4nk/docv
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Imporved the dashboard to add the chat

Browse Source
This commit is contained in:
Sadrinho27 2025-11-05 18:23:18 +01:00
parent ed54f2e7e2
commit bfe2c5b7ff
6 changed files with 909 additions and 943 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
app/dashboard/layout.tsx
View File

@ -1,58 +1,51 @@
"use client"
import type React from "react"
import { useState, useEffect, useCallback } from "react"
import { useRouter, usePathname } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
Shield,
FileText,
Folder,
Users,
Settings,
Search,
MessageCircle,
Bell,
User,
LogOut,
Menu,
X,
ChevronDown,
ChevronRight,
Home,
Key,
LayoutDashboard,
TestTube,
User
} from "@/lib/icons"
import UserStore from "@/lib/4nk/UserStore"
import { iframeUrl } from "../page"
import EventBus from "@/lib/4nk/EventBus"
import AuthModal from "@/components/4nk/AuthModal"
import Iframe from "@/components/4nk/Iframe"
import { iframeUrl } from "../page"
import { FourNKProvider } from "@/lib/contexts/FourNKContext";
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
const [processes, setProcesses] = useState<any>(null)
const [myProcesses, setMyProcesses] = useState<string[]>([])
const [isConnected, setIsConnected] = useState(false)
const [userPairingId, setUserPairingId] = useState<string | null>(null)
const [isAuthenticated, setIsAuthenticated] = useState(false)
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
const [show4nkAuthModal, setShow4nkAuthModal] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const [isMockMode, setIsMockMode] = useState(false)
const [sidebarOpen, setSidebarOpen] = useState(false)
const [userInfo, setUserInfo] = useState<any>(null)
const [showLogoutConfirm, setShowLogoutConfirm] = useState(false)
const [isPrivateKeyFlash, setIsPrivateKeyFlash] = useState(false)
const [currentFolderType, setCurrentFolderType] = useState<string | undefined>(undefined)
const router = useRouter()
const pathname = usePathname()
const navigation: Array<{ name: string; href: string; icon: any; type?: string }> = [
{ name: "My work", href: "/dashboard", icon: LayoutDashboard },
{ name: "Dossier", href: "/dashboard/folders", icon: Folder },
]
// Appliquer le thème global dès le chargement (préférence stockée)
useEffect(() => {
try {
const saved = typeof window !== 'undefined' ? localStorage.getItem('theme') : null
@ -65,13 +58,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
useEffect(() => {
const connected = UserStore.getInstance().isConnected();
console.log('[Login] User connected:', connected);
setIsConnected(connected);
if (!connected) {
setShow4nkAuthModal(true);
}
}, []);
useEffect(() => {
const pairingId = UserStore.getInstance().getUserPairingId();
console.log('[Login] User pairing ID:', pairingId);
setUserPairingId(pairingId);
}, []);
@ -99,44 +93,27 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
setIsLoading(false)
}
}
checkAuthentication()
}, [iframeUrl])
const handleAuthSuccess = () => {
setIsAuthModalOpen(false)
setIsAuthenticated(true)
// Recharger la page pour récupérer les nouvelles données
window.location.reload()
}
const handle4nkConnect = useCallback(() => {
setIsConnected(true);
setShow4nkAuthModal(false);
}, []);
const handle4nkClose = useCallback(() => {
if (!isConnected) return;
setShow4nkAuthModal(false);
}, [isConnected]);
const handleLogout = useCallback(() => {
UserStore.getInstance().disconnect();
setIsConnected(false);
setProcesses(null);
setMyProcesses([]);
setUserPairingId(null);
// Émettre un événement pour vider les messages locaux
EventBus.getInstance().emit('CLEAR_CONSOLE');
setShowLogoutConfirm(true)
}, []);
// Stabilise la lecture de query params côté client pour éviter les décalages SSR/CSR
useEffect(() => {
if (typeof window !== "undefined") {
const updateType = () => {
const t = new URLSearchParams(window.location.search).get("type") || undefined
setCurrentFolderType(t || undefined)
}
updateType()
window.addEventListener("popstate", updateType)
return () => window.removeEventListener("popstate", updateType)
}
}, [pathname])
useEffect(() => {
const onPrivateKeyAccess = () => {
setIsPrivateKeyFlash(true)
@ -152,28 +129,17 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
}
}, [])
// Suppression des retours conditionnels précoces pour stabiliser l'ordre des hooks
return (
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
{/* Sidebar mobile overlay */}
{sidebarOpen && (
<div className="fixed inset-0 z-40 lg:hidden">
<div
className="fixed inset-0 bg-gray-600 bg-opacity-75"
onClick={() => setSidebarOpen(false)}
/>
</div>
)}
{/* Sidebar */}
<div
className={`fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:relative lg:flex lg:flex-col ${sidebarOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
<div className="flex flex-col h-full">
{/* Logo */}
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-200 dark:border-gray-700">
{/* Main content (prend tout l'écran) */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* --- TOP BAR (MODIFIÉE) --- */}
<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-3 shadow-sm">
<div className="flex items-center justify-between">
{/* Partie Gauche: Logo */}
<div className="flex items-center space-x-2">
<Shield className="h-8 w-8 text-blue-600 dark:text-blue-400" />
<span className="text-xl font-bold text-gray-900 dark:text-gray-100">DocV</span>
@ -187,151 +153,68 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
</Badge>
)}
</div>
<Button variant="ghost" size="sm" className="lg:hidden" onClick={() => setSidebarOpen(false)}>
<X className="h-5 w-5 text-gray-900 dark:text-gray-100" />
</Button>
</div>
{/* User info */}
{userInfo && (
<div className="px-6 py-4 border-b bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-700">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
<span className="text-blue-600 dark:text-blue-400 font-medium text-sm">
{userInfo.name.charAt(0)}
</span>
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{userInfo.name}</p>
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">{userInfo.company}</p>
</div>
</div>
</div>
)}
{/* Navigation */}
<nav className="flex-1 px-4 py-4 space-y-1 overflow-y-auto">
{navigation.map((item) => {
const isActive =
pathname === item.href ||
(item.type && pathname.startsWith("/dashboard/folders") && currentFolderType === item.type);
return (
<Link
key={item.name}
href={item.href}
className={`flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-colors ${isActive
? "bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400"
: "text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100"
}`}
onClick={() => setSidebarOpen(false)}
>
<item.icon className="h-5 w-5 mr-3" />
{item.name}
{isActive && <ChevronRight className="h-4 w-4 ml-auto" />}
</Link>
);
})}
</nav>
{/* Footer */}
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
<div className="space-y-2">
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
<span>Sécurisé par 4NK</span>
<Shield className="h-3 w-3" />
</div>
{isMockMode && (
<div className="text-xs text-green-600 dark:text-green-300 bg-green-50 dark:bg-green-800 p-2 rounded">
Mode démonstration actif
</div>
)}
<Button
variant="outline"
size="sm"
onClick={handleLogout}
className="w-full bg-transparent dark:bg-transparent"
>
<LogOut className="h-4 w-4 mr-2" />
Déconnexion
</Button>
</div>
</div>
</div>
</div>
{/* Main content */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Top bar */}
<div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3 shadow-sm">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<Button variant="ghost" size="sm" className="lg:hidden" onClick={() => setSidebarOpen(true)}>
<Menu className="h-5 w-5 text-gray-900 dark:text-gray-100" />
</Button>
<div className="hidden lg:block">
<nav className="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<Link href="/dashboard" className="hover:text-gray-700 dark:hover:text-gray-100">
My work
</Link>
{pathname !== "/dashboard" && (
<>
<ChevronRight className="h-4 w-4 mx-1 text-gray-500 dark:text-gray-400" />
<span className="text-gray-900 dark:text-gray-100 font-medium">
{(() => {
if (pathname.startsWith("/dashboard/folders") && currentFolderType) {
const match = navigation.find((it) => it.type === currentFolderType);
return match?.name || "Dossiers";
}
return navigation.find((it) => it.href === pathname)?.name || "Page";
})()}
</span>
</>
)}
</nav>
</div>
</div>
{/* Partie Droite: Icônes + Profil Utilisateur */}
<div className="flex items-center space-x-3">
{isMockMode && (
<Badge
variant="outline"
className="bg-green-50 dark:bg-green-800 text-green-700 dark:text-green-200 border-green-200 dark:border-green-700"
>
<TestTube className="h-4 w-4 mr-1" />
Mode Démo
</Badge>
)}
<Button variant="ghost" size="sm">
<Bell className="h-5 w-5 text-gray-900 dark:text-gray-100" />
{/* TODO: Icone de cloche pour une future lsite de notifications */}
<Button variant="ghost" size="sm" className="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
<Bell className="h-5 w-5" />
</Button>
<Link href="/dashboard/settings">
<Button variant="ghost" size="sm" title="Paramètres">
<Settings className="h-5 w-5 text-gray-900 dark:text-gray-100" />
</Button>
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="flex items-center space-x-2 px-2 py-1 h-10">
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
<span className="text-blue-600 dark:text-blue-400 font-medium text-sm">
{userInfo ? userInfo.name.charAt(0) : '?'}
</span>
</div>
<div className="hidden md:flex items-center">
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{userInfo ? userInfo.name : 'Chargement...'}
</span>
<ChevronDown className="h-4 w-4 text-gray-400 ml-1" />
</div>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>
<p className="text-sm font-medium">{userInfo?.name}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{userInfo?.company}</p>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<User className="h-4 w-4 mr-2" />
<span>Profil</span>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/dashboard/settings">
<Settings className="h-4 w-4 mr-2" />
<span>Paramètres</span>
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout} className="text-red-500 focus:text-red-500 focus:bg-red-50 dark:focus:bg-red-900/50">
<LogOut className="h-4 w-4 mr-2" />
<span>Déconnexion</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<div
title="Accès à la clé privée"
className={`h-9 w-9 flex items-center justify-center ${isPrivateKeyFlash ? "text-red-600" : "text-gray-700 dark:text-gray-300"
}`}
aria-hidden
>
<Key className="h-5 w-5" />
</div>
</div>
</div>
</div>
{/* Page content */}
<main className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900">
<div className="p-6">{children}</div>
<main className="flex-1 overflow-hidden bg-gray-900">
<FourNKProvider>
{children}
</FourNKProvider>
</main>
</div>
{/* Modal de confirmation de déconnexion */}
{/* --- Modal de déconnexion --- */}
{showLogoutConfirm && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
@ -341,14 +224,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
<p className="text-gray-600 dark:text-gray-300 mb-6">
Vous avez été déconnecté de votre espace sécurisé DocV.
</p>
<div className="space-y-3">
<Button onClick={() => router.push("/")} variant="outline" className="w-full">
<Home className="h-4 w-4 mr-2" />
Retourner à l'accueil
</Button>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
Vos données restent sécurisées par le chiffrement 4NK
</p>
@ -356,7 +237,18 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
</div>
</div>
)}
</div>
{/* --- Modals 4NK --- */}
{show4nkAuthModal && (
<AuthModal
isOpen={show4nkAuthModal}
onClose={handle4nkClose}
onConnect={handle4nkConnect}
iframeUrl={iframeUrl}
/>
)}
{isConnected && <Iframe iframeUrl={iframeUrl} />}
</div>
)
}
}

682
app/dashboard/page.tsx
View File

@ -1,474 +1,282 @@
"use client"
import { useState, useEffect, useCallback } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
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 {
FileText,
Folder,
Users,
Activity,
TrendingUp,
Clock,
Shield,
AlertCircle,
CheckCircle,
Download,
Upload,
Search,
Plus,
MoreHorizontal,
Edit,
Share2,
TestTube,
Zap,
HardDrive,
X,
FolderPlus,
XCircle,
Info,
} from "@/lib/icons"
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 Link from "next/link"
import Chat from "@/components/4nk/Chat"
import UserStore from "@/lib/4nk/UserStore"
import EventBus from "@/lib/4nk/EventBus"
import { iframeUrl } from "../page"
import Iframe from "@/components/4nk/Iframe"
import { iframeUrl } from "@/app/page"
import FolderModal from "@/components/4nk/FolderModal"
import FolderChat from "@/components/4nk/FolderChat"
import { use4NK, EnrichedFolderData } from "@/lib/contexts/FourNKContext"
type FolderType = string;
// 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)
// 4NK Integration states
const [isConnected, setIsConnected] = useState(false)
const [showAuthModal, setShowAuthModal] = useState(false)
const [processes, setProcesses] = useState<any>(null)
const [myProcesses, setMyProcesses] = useState<string[]>([])
const [userPairingId, setUserPairingId] = useState<string | null>(null)
const [selectedFolder, setSelectedFolder] = useState<EnrichedFolderData | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [folderType, setFolderType] = useState<FolderType | null>(null);
const {
isConnected,
userPairingId,
folders,
loadingFolders,
setFolderProcesses,
setMyFolderProcesses,
setFolderPrivateData
} = use4NK();
const [stats, setStats] = useState({
totalDocuments: 0,
totalFolders: 0,
totalUsers: 0,
storageUsed: 0,
storageLimit: 100,
recentActivity: 0,
// Nouveaux indicateurs
permanentStorage: 0,
permanentStorageLimit: 1000, // 1 To en Go
temporaryStorage: 0,
temporaryStorageLimit: 100, // 100 Go
newFoldersThisMonth: 0,
newFoldersLimit: 75,
tokensUsed: 0,
tokensTotal: 1000,
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 [recentDocuments, setRecentDocuments] = useState<any[]>([])
const [recentActivity, setRecentActivity] = useState<any[]>([])
const [notifications, setNotifications] = useState<any[]>([])
useEffect(() => {
// Simuler le chargement des données
const mockMode = true
if (mockMode) {
setStats({
totalDocuments: 1247,
totalFolders: 89,
totalUsers: 12,
storageUsed: 67.3,
storageLimit: 100,
recentActivity: 24,
// Nouveaux indicateurs avec données réalistes
permanentStorage: 673, // 673 Go utilisés sur 1000 Go
permanentStorageLimit: 1000,
temporaryStorage: 45, // 45 Go utilisés sur 100 Go
temporaryStorageLimit: 100,
newFoldersThisMonth: 23, // 23 nouveaux dossiers ce mois
newFoldersLimit: 75,
tokensUsed: 673, // Environ 67% des jetons utilisés
tokensTotal: 1000,
})
setRecentDocuments([
{
id: "doc_001",
name: "Contrat_Client_ABC_2024.pdf",
type: "PDF",
size: "2.4 MB",
modifiedAt: "Il y a 2 heures",
modifiedBy: "Marie Dubois",
status: "Signé",
folder: "Général",
},
{
id: "doc_002",
name: "Contrat_Fournisseur_XYZ.pdf",
type: "PDF",
size: "1.8 MB",
modifiedAt: "Il y a 4 heures",
modifiedBy: "Jean Martin",
status: "En révision",
folder: "Général",
},
{
id: "doc_003",
name: "Avenant_Contrat_123.docx",
type: "Word",
size: "892 KB",
modifiedAt: "Il y a 2 jours",
modifiedBy: "Pierre Durand",
status: "Brouillon",
folder: "Général",
},
])
setRecentActivity([
{
id: "act_001",
type: "upload",
user: "Marie Dubois",
action: "a téléchargé",
target: "Contrat_Client_ABC_2024.pdf",
time: "Il y a 2 heures",
icon: Upload,
color: "text-green-600",
},
{
id: "act_002",
type: "edit",
user: "Jean Martin",
action: "a modifié",
target: "Contrat_Fournisseur_XYZ.pdf",
time: "Il y a 4 heures",
icon: Edit,
color: "text-blue-600",
},
{
id: "act_003",
type: "share",
user: "Sophie Laurent",
action: "a partagé",
target: "Contrat_Client_ABC_2024.pdf",
time: "Hier",
icon: Share2,
color: "text-purple-600",
},
{
id: "act_004",
type: "create",
user: "Pierre Durand",
action: "a créé le dossier",
target: "Dossier Général",
time: "Il y a 2 jours",
icon: Folder,
color: "text-orange-600",
},
])
setNotifications([
{
id: "notif_001",
type: "success",
title: "Document signé",
message: "Le contrat ABC a été signé par toutes les parties",
time: "Il y a 1 heure",
icon: CheckCircle,
color: "text-green-600",
bgColor: "bg-green-50",
},
{
id: "notif_002",
type: "warning",
title: "Stockage temporaire élevé",
message: "45 Go utilisés sur 100 Go de stockage temporaire ce mois",
time: "Il y a 2 heures",
icon: AlertCircle,
color: "text-orange-600",
bgColor: "bg-orange-50",
},
{
id: "notif_003",
type: "info",
title: "Nouveau contrat",
message: "Un nouveau document a été ajouté au dossier Général",
time: "Hier",
icon: FileText,
color: "text-blue-600",
bgColor: "bg-blue-50",
},
])
}
}, [])
const getFileIcon = (type: string) => {
switch (type.toLowerCase()) {
case "pdf":
return "📄"
case "excel":
return "📊"
case "powerpoint":
return "📈"
case "word":
return "📝"
default:
return "📄"
}
const showNotification = (type: "success" | "error" | "info", message: string) => {
setNotification({ type, message })
setTimeout(() => setNotification(null), 5000)
}
const getStatusColor = (status: string) => {
switch (status.toLowerCase()) {
case "signé":
case "finalisé":
case "payée":
return "bg-green-100 text-green-800"
case "en révision":
return "bg-orange-100 text-orange-800"
case "brouillon":
return "bg-gray-100 text-gray-800"
default:
return "bg-blue-100 text-blue-800"
}
}
// 4NK Integration useEffects
useEffect(() => {
const userStore = UserStore.getInstance();
const connected = userStore.isConnected();
const pairingId = userStore.getUserPairingId();
console.log('Initialisation 4NK:', { connected, pairingId });
setIsConnected(connected);
setUserPairingId(pairingId);
}, []);
useEffect(() => {
const handleConnectionFlow = async () => {
if (!isConnected) return;
const userStore = UserStore.getInstance();
const messageBus = MessageBus.getInstance(iframeUrl);
try {
await messageBus.isReady();
let pairingId = userStore.getUserPairingId();
// 1️⃣ Créer le pairing si non existant
if (!pairingId || pairingId === 'undefined' || pairingId === 'null') {
// We may have a pairing id but the value is not in cache for some reason
pairingId = await messageBus.getUserPairingId();
if (pairingId) {
userStore.pair(pairingId);
setUserPairingId(pairingId);
} else {
console.log("🚀 No pairing found — creating new pairing...");
pairingId = await messageBus.createUserPairing();
console.log("✅ Pairing created:", pairingId);
userStore.pair(pairingId);
setUserPairingId(pairingId);
}
} else {
console.log("🔗 Already paired with ID:", pairingId);
}
// 2️⃣ Charger les processes
const processes = await messageBus.getProcesses();
setProcesses(processes);
// 3️⃣ Charger les myProcesses
const myProcesses = await messageBus.getMyProcesses();
setMyProcesses(myProcesses);
} catch (err) {
console.error("❌ Error during pairing or process loading:", err);
}
};
handleConnectionFlow();
}, [isConnected, iframeUrl]);
const handleOpenModal = (type: FolderType) => {
setFolderType(type);
setIsModalOpen(true);
setMenuOpen(false);
};
const handleCloseModal = () => {
setIsModalOpen(false);
setFolderType(null);
};
// Notification system
const showNotification = (type: "success" | "error" | "info", message: string) => {
setNotification({ type, message })
setTimeout(() => setNotification(null), 3000)
}
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;
// 4NK handlers
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="space-y-6">
{/* Notification */}
<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 p-4 rounded-lg shadow-lg flex items-center space-x-2 ${notification.type === "success"
? "bg-green-100 text-green-800 border border-green-200"
: notification.type === "error"
? "bg-red-100 text-red-800 border border-red-200"
: "bg-blue-100 text-blue-800 border border-blue-200"
}`}
>
{notification.type === "success" && <CheckCircle className="h-5 w-5" />}
{notification.type === "error" && <XCircle className="h-5 w-5" />}
{notification.type === "info" && <Info className="h-5 w-5" />}
<span>{notification.message}</span>
<Button variant="ghost" size="sm" onClick={() => setNotification(null)}>
<X className="h-4 w-4" />
</Button>
<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>
)}
{/* En-tête */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">My work</h1>
<p className="text-gray-600 dark:text-gray-300">
Vue d'ensemble de votre espace documentaire sécurisé
</p>
</div>
</div>
{/* Statistiques principales */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{/* SUPPRIMER les cartes Documents, Dossiers, Collaborateurs */}
{/* Conserver uniquement les autres indicateurs utiles (ex : Jetons utilisés, stockage, etc.) */}
</div>
{/* Messages intégrés */}
<div className="mt-6">
<Chat heightClass="h-[600px]" processes={processes} myProcesses={myProcesses} />
</div>
{/* Nouveaux indicateurs de stockage */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-gray-900 dark:text-gray-100">
Stockage permanent
</CardTitle>
<HardDrive className="h-4 w-4 text-blue-600 dark:text-blue-400" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.permanentStorage} Go</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-2">
<div
className="bg-blue-600 dark:bg-blue-400 h-2 rounded-full"
style={{ width: `${(stats.permanentStorage / stats.permanentStorageLimit) * 100}%` }}
></div>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{stats.permanentStorage} Go / {stats.permanentStorageLimit} Go (1 To)
</p>
</CardContent>
</Card>
<Card className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-gray-900 dark:text-gray-100">
Stockage temporaire
</CardTitle>
<Zap className="h-4 w-4 text-orange-600 dark:text-orange-400" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.temporaryStorage} Go</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-2">
<div
className={`h-2 rounded-full ${stats.temporaryStorage > 80
? "bg-red-600 dark:bg-red-500"
: stats.temporaryStorage > 60
? "bg-orange-600 dark:bg-orange-500"
: "bg-green-600 dark:bg-green-500"
}`}
style={{ width: `${(stats.temporaryStorage / stats.temporaryStorageLimit) * 100}%` }}
></div>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{stats.temporaryStorage} Go / {stats.temporaryStorageLimit} Go ce mois
</p>
</CardContent>
</Card>
<Card className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium text-gray-900 dark:text-gray-100">
Nouveaux dossiers
</CardTitle>
<Plus className="h-4 w-4 text-green-600 dark:text-green-400" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.newFoldersThisMonth}</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-2">
<div
className="bg-green-600 dark:bg-green-400 h-2 rounded-full"
style={{ width: `${(stats.newFoldersThisMonth / stats.newFoldersLimit) * 100}%` }}
></div>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{stats.newFoldersThisMonth} / {stats.newFoldersLimit} ce mois
</p>
</CardContent>
</Card>
</div>
{/* Sécurité */}
<Card className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
<CardHeader>
<CardTitle className="flex items-center text-gray-900 dark:text-gray-100">
<Shield className="h-5 w-5 mr-2 text-green-600 dark:text-green-400" />
Statut de sécurité
</CardTitle>
</CardHeader>
<CardContent>
<div className="flex items-center space-x-4 p-4 bg-green-50 dark:bg-green-900 rounded-lg">
<CheckCircle className="h-8 w-8 text-green-600 dark:text-green-400" />
<div>
<h4 className="font-medium text-green-900 dark:text-green-300">Sécurité optimale</h4>
<p className="text-sm text-green-700 dark:text-green-200">
Tous vos documents sont chiffrés et sécurisés par la technologie 4NK
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div className="text-center p-3">
<Shield className="h-6 w-6 mx-auto text-green-600 dark:text-green-400 mb-2" />
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">Chiffrement bout en bout</p>
</div>
<div className="text-center p-3">
<CheckCircle className="h-6 w-6 mx-auto text-green-600 dark:text-green-400 mb-2" />
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">Authentification 4NK</p>
</div>
<div className="text-center p-3">
<Activity className="h-6 w-6 mx-auto text-green-600 dark:text-green-400 mb-2" />
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">Audit complet</p>
</div>
</div>
</CardContent>
</Card>
{/* 4NK Iframe - only show when connected */}
{isConnected && <Iframe iframeUrl={iframeUrl} />}
</div>
)
}
}

442
components/4nk/FolderChat.tsx
View File

@ -1,338 +1,188 @@
"use client"
import { useState, useEffect } from "react"
import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
MessageSquare,
Search,
Send,
Paperclip,
Smile,
MoreHorizontal,
Users,
Circle,
Folder,
Clock,
MessageSquare
} from "lucide-react"
import type { EnrichedFolderData } from "@/lib/contexts/FourNKContext";
interface FolderMember {
id: string
name: string
avatar: string
isOnline: boolean
}
interface FolderConversation {
id: string
folderNumber: string
folderName: string
members: FolderMember[]
lastMessage: string
lastMessageTime: string
unreadCount: number
}
// Interface pour les props (accepte null)
interface FolderChatProps {
heightClass?: string
folderProcesses?: any
myFolderProcesses?: string[]
folderPrivateData?: Record<string, Record<string, any>>
folder: EnrichedFolderData | null;
}
export default function FolderChat({
heightClass = "h-[calc(100vh-8rem)]",
folderProcesses,
myFolderProcesses = [],
folderPrivateData = {}
}: FolderChatProps) {
const [selectedConversation, setSelectedConversation] = useState("")
// Message fictif pour la maquette
interface MockMessage {
id: number;
sender: 'me' | 'other';
name: string;
avatar: string;
text: string;
time: string;
type: 'owner' | 'general'; // Pour filtrer
}
export default function FolderChat({ folder }: FolderChatProps) {
const [newMessage, setNewMessage] = useState("")
const [folderConversations, setFolderConversations] = useState<FolderConversation[]>([])
const [isLoading, setIsLoading] = useState(true)
const [searchQuery, setSearchQuery] = useState("")
const [activeTab, setActiveTab] = useState<'owner' | 'general'>('owner');
// Extract folder conversations from processes
useEffect(() => {
if (folderProcesses && Object.keys(folderProcesses).length > 0) {
setIsLoading(true)
const conversations: FolderConversation[] = []
Object.entries(folderProcesses).forEach(([processId, process]: [string, any]) => {
// Only include processes that belong to the user
if (!myFolderProcesses.includes(processId)) return
// Données fictives
const mockMessages: MockMessage[] = [
{ id: 1, sender: 'other', name: 'Membre A4B2 (Owner)', avatar: 'A4', text: "Validation Owner OK.", time: "14:30", type: 'owner' },
{ id: 2, sender: 'me', name: 'Vous', avatar: 'MO', text: "Parfait, merci.", time: "14:32", type: 'owner' },
{ id: 3, sender: 'other', name: 'Membre C8F1', avatar: 'C8', text: "Le client a une question sur ce dossier.", time: "14:33", type: 'general' },
{ id: 4, sender: 'me', name: 'Vous', avatar: 'MO', text: "Je regarde ça.", time: "14:34", type: 'general' },
];
const latestState = process.states?.[0]
if (!latestState) return
// Check if this process has a folderNumber (indicates it's a folder process)
const folderNumber = latestState.pcd_commitment?.folderNumber
if (!folderNumber) return
// Get private data for folder name
const privateData = folderPrivateData[latestState.state_id]
const folderName = privateData?.name || `Dossier ${folderNumber}`
// Extract members from roles.owner.members
const ownerMembers = latestState.roles?.owner?.members || []
const members: FolderMember[] = ownerMembers.map((memberId: string, index: number) => {
// Generate avatar from member ID
const avatar = memberId.slice(0, 2).toUpperCase()
return {
id: memberId,
name: `Membre ${memberId.slice(0, 8)}`, // Could be enhanced with real names
avatar: avatar,
isOnline: Math.random() > 0.5 // Random online status for demo
}
})
conversations.push({
id: processId,
folderNumber: folderNumber,
folderName: folderName,
members: members,
lastMessage: "",
lastMessageTime: "",
unreadCount: 0
})
})
setFolderConversations(conversations)
setIsLoading(false)
} else {
setIsLoading(true)
setFolderConversations([])
}
}, [folderProcesses, myFolderProcesses, folderPrivateData])
// Filter conversations based on search query
const filteredConversations = folderConversations.filter(conversation => {
if (!searchQuery.trim()) return true
const matchesNumber = conversation.folderNumber.toLowerCase().includes(searchQuery.toLowerCase())
const matchesName = conversation.folderName.toLowerCase().includes(searchQuery.toLowerCase())
const matchesId = conversation.id.toLowerCase().includes(searchQuery.toLowerCase())
return matchesNumber || matchesName || matchesId
})
const currentConversation = folderConversations.find((conv) => conv.id === selectedConversation)
// Filtre les messages basé sur l'onglet actif
const filteredMessages = mockMessages.filter(msg => msg.type === activeTab);
const handleSendMessage = () => {
if (newMessage.trim()) {
console.log("Sending message to folder:", selectedConversation, "Message:", newMessage)
// Here implement the actual message sending logic
console.log(`Envoi message [${activeTab}] à:`, folder?.folderNumber, "Msg:", newMessage)
// TODO: Implémenter la logique d'envoi de message
setNewMessage("")
}
}
// Si aucun dossier n'est sélectionné, afficher un placeholder
if (!folder) {
return (
<div className="flex h-full items-center justify-center bg-gray-800 text-gray-500 p-6">
<div className="text-center">
<MessageSquare className="h-12 w-12 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-100 mb-2">
Chat de dossier
</h3>
<p className="text-gray-400">
Sélectionnez un dossier pour voir la conversation
</p>
</div>
</div>
)
}
// Si un dossier EST sélectionné, afficher le chat complet
return (
<div className={`${heightClass} flex`}>
{/* Sidebar with folder conversations */}
<div className="w-80 border-r bg-white dark:bg-gray-800 flex flex-col">
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
<div className="mb-4">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
Chat Dossiers
</h2>
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<Input
placeholder="Rechercher un dossier..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
/>
<div className="flex flex-col h-full bg-gray-800 text-gray-100">
{/* En-tête du chat */}
<div className="p-4 border-b border-gray-700">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-green-800 rounded-full flex items-center justify-center flex-shrink-0">
<Folder className="h-5 w-5 text-green-400" />
</div>
<div>
<h3 className="font-medium text-gray-100">
{folder.name}
</h3>
{/* ID du dossier supprimé */}
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto">
{isLoading ? (
<div className="flex items-center justify-center p-8">
<div className="text-gray-500 dark:text-gray-400">Chargement des dossiers...</div>
</div>
) : filteredConversations.length > 0 ? (
filteredConversations.map((conversation) => (
<div
key={conversation.id}
onClick={() => setSelectedConversation(conversation.id)}
className={`p-4 border-b cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 ${
selectedConversation === conversation.id
? "bg-blue-50 dark:bg-blue-900 border-r-2 border-blue-500 dark:border-blue-400"
: ""
}`}
>
<div className="flex items-start space-x-3">
<div className="relative">
<div className="w-12 h-12 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center">
<Folder className="h-6 w-6 text-green-600 dark:text-green-400" />
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<h3 className="font-medium text-gray-900 dark:text-gray-100 truncate">
{conversation.folderName}
</h3>
{conversation.members.length > 0 && (
<Badge variant="secondary" className="ml-2">
<Users className="h-3 w-3 mr-1" />
{conversation.members.length}
</Badge>
)}
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
#{conversation.folderNumber}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{conversation.members.length} membre{conversation.members.length > 1 ? 's' : ''}
</p>
</div>
</div>
</div>
))
) : (
<div className="flex items-center justify-center p-8">
<div className="text-center">
<Folder className="h-8 w-8 mx-auto text-gray-400 dark:text-gray-500 mb-2" />
<p className="text-gray-500 dark:text-gray-400">Aucun dossier trouvé</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
Essayez de rechercher par nom ou numéro
</p>
</div>
</div>
)}
<Button variant="ghost" size="sm" className="text-gray-400 hover:text-gray-100 hover:bg-gray-700">
<MoreHorizontal className="h-4 w-4" />
</Button>
</div>
</div>
{/* Main chat area */}
<div className="flex-1 flex flex-col">
{currentConversation ? (
<>
{/* Chat header */}
<div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center">
<Folder className="h-5 w-5 text-green-600 dark:text-green-400" />
</div>
<div>
<h3 className="font-medium text-gray-900 dark:text-gray-100">
{currentConversation.folderName}
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">
Dossier #{currentConversation.folderNumber} • {currentConversation.members.length} membre{currentConversation.members.length > 1 ? 's' : ''}
</p>
</div>
</div>
<div className="flex items-center space-x-2">
<Button variant="outline" size="sm">
<Users className="h-4 w-4" />
</Button>
<Button variant="outline" size="sm">
<MoreHorizontal className="h-4 w-4" />
</Button>
</div>
</div>
{/* Members list */}
{currentConversation.members.length > 0 && (
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
<div className="flex items-center space-x-2 mb-2">
<Users className="h-4 w-4 text-gray-500" />
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
Membres du dossier
</span>
</div>
<div className="flex flex-wrap gap-2">
{currentConversation.members.map((member) => (
<div
key={member.id}
className="flex items-center space-x-2 bg-gray-100 dark:bg-gray-700 rounded-full px-3 py-1"
>
<div className="relative">
<div className="w-6 h-6 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
{member.avatar}
</span>
</div>
{member.isOnline && (
<Circle className="absolute -bottom-1 -right-1 h-3 w-3 text-green-500 fill-current" />
)}
</div>
<span className="text-xs text-gray-700 dark:text-gray-300">
{member.name}
</span>
</div>
))}
</div>
</div>
)}
</div>
{/* Onglets "Owner" / "General" */}
<div className="p-2 flex border-b border-gray-700 bg-gray-900">
<Button
variant={activeTab === 'owner' ? "secondary" : "ghost"}
size="sm"
onClick={() => setActiveTab('owner')}
className={`flex-1 ${activeTab === 'owner' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'}`}
>
Propriétaires
</Button>
<Button
variant={activeTab === 'general' ? "secondary" : "ghost"}
size="sm"
onClick={() => setActiveTab('general')}
className={`flex-1 ${activeTab === 'general' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'}`}
>
Général
</Button>
</div>
{/* Messages area */}
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-900">
<div className="flex items-center justify-center h-full">
<div className="text-center">
<MessageSquare className="h-12 w-12 mx-auto text-gray-400 dark:text-gray-500 mb-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
Aucun message
</h3>
<p className="text-gray-600 dark:text-gray-400">
Commencez une conversation avec les membres de ce dossier
</p>
</div>
</div>
</div>
{/* --- LISTE DES MEMBRES (SUPPRIMÉE) --- */}
{/* Message input */}
<div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div className="flex items-end space-x-2">
<Button variant="outline" size="sm">
<Paperclip className="h-4 w-4" />
</Button>
<div className="flex-1">
<Textarea
placeholder="Tapez votre message..."
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
onKeyPress={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleSendMessage();
}
}}
rows={1}
className="resize-none bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700"
/>
</div>
<Button variant="outline" size="sm">
<Smile className="h-4 w-4" />
</Button>
<Button onClick={handleSendMessage} disabled={!newMessage.trim()}>
<Send className="h-4 w-4" />
</Button>
{/* Zone des messages */}
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-900">
{filteredMessages.length > 0 ? filteredMessages.map((msg) => (
<div
key={msg.id}
className={`flex items-start gap-3 ${msg.sender === 'me' ? 'justify-end' : ''}`}
>
{msg.sender === 'other' && (
<div className="w-8 h-8 bg-blue-800 rounded-full flex items-center justify-center flex-shrink-0">
<span className="text-xs text-blue-300 font-medium">{msg.avatar}</span>
</div>
</div>
</>
) : (
<div className="flex-1 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
<div className="text-center">
<Folder className="h-12 w-12 mx-auto text-gray-400 dark:text-gray-500 mb-4" />
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
Sélectionnez un dossier
</h3>
<p className="text-gray-600 dark:text-gray-400">
Choisissez un dossier pour commencer à discuter avec ses membres
)}
<div>
<div
className={`p-3 rounded-lg ${msg.sender === 'me'
? 'bg-blue-600 text-white rounded-br-none'
: 'bg-gray-700 text-gray-100 rounded-bl-none'
}`}
>
{msg.sender === 'other' && (
<p className="text-xs font-medium text-blue-300 mb-1">{msg.name}</p>
)}
<p>{msg.text}</p>
</div>
<p className={`text-xs text-gray-500 mt-1 ${msg.sender === 'me' ? 'text-right' : ''}`}>
{msg.time}
</p>
</div>
</div>
)) : (
<div className="flex h-full items-center justify-center text-center text-gray-500 p-4">
<p>Aucun message dans le chat "{activeTab}"</p>
</div>
)}
</div>
{/* Input de message */}
<div className="p-4 border-t border-gray-700">
<div className="flex items-end space-x-2">
<Button variant="ghost" size="sm" className="text-gray-400 hover:text-gray-100 hover:bg-gray-700">
<Paperclip className="h-5 w-5" />
</Button>
<Button variant="ghost" size="sm" className="text-gray-400 hover:text-gray-100 hover:bg-gray-700">
<Smile className="h-5 w-5" />
</Button>
<Textarea
placeholder={`Message (${activeTab})...`}
value={newMessage}
onChange={(e) => setNewMessage(e.target.value)}
onKeyPress={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
handleSendMessage();
}
}}
rows={1}
className="resize-none flex-1 bg-gray-700 border-gray-700 text-gray-100 placeholder-gray-400 focus:border-blue-500 focus:ring-0"
/>
<Button
onClick={handleSendMessage}
disabled={!newMessage.trim()}
className="bg-blue-600 hover:bg-blue-700 text-white"
>
<Send className="h-4 w-4" />
</Button>
</div>
</div>
</div>
)
}
}

8
components/4nk/FolderModal.tsx
View File

@ -21,16 +21,10 @@ interface FolderModalProps {
const defaultFolder: FolderData = {
folderNumber: '',
name: '',
deedType: '',
description: '',
archived_description: '',
status: 'active',
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
customers: [],
documents: [],
notes: [],
stakeholders: []
notes: []
};
function capitalize(s?: string) {

214
components/ui/dropdown-menu.tsx Normal file
View File

@ -0,0 +1,214 @@
"use client"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "@/lib/utils" // Assurez-vous d'avoir ce fichier (voir ci-dessous)
const DropdownMenu = DropdownMenuPrimitive.Root
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
const DropdownMenuGroup = DropdownMenuPrimitive.Group
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuSubTrigger = React.forwardRef<
React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
"dark:focus:bg-gray-700 dark:data-[state=open]:bg-gray-700", // Thème sombre
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100", // Thème sombre
className
)}
{...props}
/>
))
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100", // Thème sombre
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"focus:bg-accent focus:text-accent-foreground dark:focus:bg-gray-700 dark:focus:text-gray-100", // Thème sombre
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"dark:focus:bg-gray-700", // Thème sombre
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"dark:focus:bg-gray-700", // Thème sombre
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
"dark:text-gray-300", // Thème sombre
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn(
"-mx-1 my-1 h-px bg-muted",
"dark:bg-gray-700", // Thème sombre
className
)}
{...props}
/>
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest opacity-60",
className
)}
{...props}
/>
)
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}

208
lib/contexts/FourNKContext.tsx Normal file
View File

@ -0,0 +1,208 @@
"use client"
import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
import MessageBus from "@/lib/4nk/MessageBus";
import { iframeUrl } from "@/app/page";
import UserStore from "@/lib/4nk/UserStore";
import { FolderData } from "@/lib/4nk/models/FolderData";
// --- Définition des types pour plus de clarté ---
export interface FolderMember {
id: string
name: string
avatar: string
isOnline: boolean
}
// Interface enrichie qui inclut maintenant les membres ET les fichiers
export interface EnrichedFolderData extends FolderData {
members: FolderMember[];
files: any[]; // <-- AJOUT DES FICHIERS
// notes: any[]; // 'notes' est déjà dans FolderData
}
// ---
type FourNKContextType = {
isConnected: boolean;
userPairingId: string | null;
processes: any;
myProcesses: string[];
folderProcesses: any;
myFolderProcesses: string[];
folderPrivateData: Record<string, Record<string, any>>;
folders: EnrichedFolderData[]; // <-- Utilise le type enrichi
loadingFolders: boolean;
setFolderProcesses: React.Dispatch<React.SetStateAction<any>>;
setMyFolderProcesses: React.Dispatch<React.SetStateAction<string[]>>;
setFolderPrivateData: React.Dispatch<React.SetStateAction<Record<string, Record<string, any>>>>;
};
const FourNKContext = createContext<FourNKContextType | undefined>(undefined);
export function FourNKProvider({ children }: { children: ReactNode }) {
const [isConnected, setIsConnected] = useState(false);
const [userPairingId, setUserPairingId] = useState<string | null>(null);
const [processes, setProcesses] = useState<any>(null);
const [myProcesses, setMyProcesses] = useState<string[]>([]);
const [folderProcesses, setFolderProcesses] = useState<any>(null);
const [myFolderProcesses, setMyFolderProcesses] = useState<string[]>([]);
const [folderPrivateData, setFolderPrivateData] = useState<Record<string, Record<string, any>>>({});
const [loadingFolders, setLoadingFolders] = useState(true);
const [folders, setFolders] = useState<EnrichedFolderData[]>([]);
const fetchFolderPrivateData = useCallback(async (processId: string, stateId: string) => {
try {
const messageBus = MessageBus.getInstance(iframeUrl);
await messageBus.isReady();
const data = await messageBus.getData(processId, stateId);
setFolderPrivateData(prev => ({ ...prev, [stateId]: data }));
return data;
} catch (err) {
console.error('Error fetching folder private data:', err);
return null;
}
}, []);
const loadFoldersFrom4NK = useCallback(() => {
if (!folderProcesses || !myFolderProcesses) {
return;
}
const folderData: EnrichedFolderData[] = [];
let hasAllPrivateData = true;
let hasFoldersToLoad = false;
const missingPrivateData: Array<{ processId: string, stateId: string }> = [];
Object.entries(folderProcesses).forEach(([processId, process]: [string, any]) => {
if (!myFolderProcesses.includes(processId)) return;
const latestState = process.states[0];
if (!latestState) return;
const folderNumber = latestState.pcd_commitment?.folderNumber;
if (!folderNumber) return;
hasFoldersToLoad = true;
const privateData = folderPrivateData[latestState.state_id];
if (!privateData) {
hasAllPrivateData = false;
missingPrivateData.push({ processId, stateId: latestState.state_id });
return;
}
const ownerMembers = latestState.roles?.owner?.members || [];
const members: FolderMember[] = ownerMembers.map((memberId: string) => {
const avatar = memberId.slice(0, 2).toUpperCase();
return {
id: memberId,
name: `Membre ${memberId.slice(0, 4)}`,
avatar: avatar,
isOnline: Math.random() > 0.5
}
});
folderData.push({
folderNumber: folderNumber,
name: privateData.name || `Dossier ${folderNumber}`,
description: privateData.description || '',
created_at: privateData.created_at || new Date().toISOString(),
updated_at: privateData.updated_at || new Date().toISOString(),
notes: privateData.notes || [],
files: privateData.files || [], // <-- AJOUT DE L'EXTRACTION DES FICHIERS
members: members
});
});
if (hasFoldersToLoad && !hasAllPrivateData) {
setLoadingFolders(true);
missingPrivateData.forEach(({ processId, stateId }) => {
if (!folderPrivateData[stateId]) {
fetchFolderPrivateData(processId, stateId);
}
});
} else {
setFolders(folderData);
setLoadingFolders(false);
}
}, [folderProcesses, myFolderProcesses, folderPrivateData, fetchFolderPrivateData]);
// Chargement initial des données 4NK
useEffect(() => {
const userStore = UserStore.getInstance();
const connected = userStore.isConnected();
const pairingId = userStore.getUserPairingId();
setIsConnected(connected);
setUserPairingId(pairingId);
const handleConnectionFlow = async () => {
if (!connected) {
setLoadingFolders(false);
return;
}
setLoadingFolders(true);
try {
const messageBus = MessageBus.getInstance(iframeUrl);
await messageBus.isReady();
let pid = pairingId;
if (!pid) {
pid = await messageBus.createUserPairing();
if (pid) {
userStore.pair(pid);
setUserPairingId(pid);
}
}
const procs = await messageBus.getProcesses();
const myProcs = await messageBus.getMyProcesses();
setProcesses(procs);
setFolderProcesses(procs);
setMyProcesses(myProcs);
setMyFolderProcesses(myProcs);
} catch (err) {
console.error("❌ Error during global connection flow:", err);
setLoadingFolders(false);
}
};
handleConnectionFlow();
}, [isConnected]);
// Re-calculer les dossiers lorsque les données changent
useEffect(() => {
loadFoldersFrom4NK();
}, [loadFoldersFrom4NK]);
const value = {
isConnected,
userPairingId,
processes,
myProcesses,
folderProcesses,
myFolderProcesses,
folderPrivateData,
folders,
loadingFolders,
setFolderProcesses,
setMyFolderProcesses,
setFolderPrivateData,
};
return (
<FourNKContext.Provider value={value}>
{children}
</FourNKContext.Provider>
);
}
export function use4NK() {
const context = useContext(FourNKContext);
if (context === undefined) {
throw new Error('use4NK must be used within a FourNKProvider');
}
return context;
}