Imporved the dashboard to add the chat
This commit is contained in:
parent
ed54f2e7e2
commit
bfe2c5b7ff
@ -1,58 +1,51 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import type React from "react"
|
import type React from "react"
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react"
|
import { useState, useEffect, useCallback } from "react"
|
||||||
import { useRouter, usePathname } from "next/navigation"
|
import { useRouter, usePathname } from "next/navigation"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu"
|
||||||
import {
|
import {
|
||||||
Shield,
|
Shield,
|
||||||
FileText,
|
|
||||||
Folder,
|
|
||||||
Users,
|
|
||||||
Settings,
|
Settings,
|
||||||
Search,
|
|
||||||
MessageCircle,
|
|
||||||
Bell,
|
Bell,
|
||||||
User,
|
|
||||||
LogOut,
|
LogOut,
|
||||||
Menu,
|
|
||||||
X,
|
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
ChevronRight,
|
|
||||||
Home,
|
Home,
|
||||||
Key,
|
Key,
|
||||||
LayoutDashboard,
|
|
||||||
TestTube,
|
TestTube,
|
||||||
|
User
|
||||||
} from "@/lib/icons"
|
} from "@/lib/icons"
|
||||||
import UserStore from "@/lib/4nk/UserStore"
|
import UserStore from "@/lib/4nk/UserStore"
|
||||||
import { iframeUrl } from "../page"
|
|
||||||
import EventBus from "@/lib/4nk/EventBus"
|
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 }) {
|
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 [isConnected, setIsConnected] = useState(false)
|
||||||
const [userPairingId, setUserPairingId] = useState<string | null>(null)
|
const [userPairingId, setUserPairingId] = useState<string | null>(null)
|
||||||
const [isAuthenticated, setIsAuthenticated] = useState(false)
|
const [isAuthenticated, setIsAuthenticated] = useState(false)
|
||||||
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
|
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false)
|
||||||
|
const [show4nkAuthModal, setShow4nkAuthModal] = useState(false)
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [isMockMode, setIsMockMode] = useState(false)
|
const [isMockMode, setIsMockMode] = useState(false)
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
|
||||||
const [userInfo, setUserInfo] = useState<any>(null)
|
const [userInfo, setUserInfo] = useState<any>(null)
|
||||||
const [showLogoutConfirm, setShowLogoutConfirm] = useState(false)
|
const [showLogoutConfirm, setShowLogoutConfirm] = useState(false)
|
||||||
const [isPrivateKeyFlash, setIsPrivateKeyFlash] = useState(false)
|
const [isPrivateKeyFlash, setIsPrivateKeyFlash] = useState(false)
|
||||||
const [currentFolderType, setCurrentFolderType] = useState<string | undefined>(undefined)
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const pathname = usePathname()
|
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(() => {
|
useEffect(() => {
|
||||||
try {
|
try {
|
||||||
const saved = typeof window !== 'undefined' ? localStorage.getItem('theme') : null
|
const saved = typeof window !== 'undefined' ? localStorage.getItem('theme') : null
|
||||||
@ -65,13 +58,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const connected = UserStore.getInstance().isConnected();
|
const connected = UserStore.getInstance().isConnected();
|
||||||
console.log('[Login] User connected:', connected);
|
|
||||||
setIsConnected(connected);
|
setIsConnected(connected);
|
||||||
|
if (!connected) {
|
||||||
|
setShow4nkAuthModal(true);
|
||||||
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const pairingId = UserStore.getInstance().getUserPairingId();
|
const pairingId = UserStore.getInstance().getUserPairingId();
|
||||||
console.log('[Login] User pairing ID:', pairingId);
|
|
||||||
setUserPairingId(pairingId);
|
setUserPairingId(pairingId);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -99,44 +93,27 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
|||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
checkAuthentication()
|
checkAuthentication()
|
||||||
}, [iframeUrl])
|
}, [iframeUrl])
|
||||||
|
|
||||||
const handleAuthSuccess = () => {
|
const handle4nkConnect = useCallback(() => {
|
||||||
setIsAuthModalOpen(false)
|
setIsConnected(true);
|
||||||
setIsAuthenticated(true)
|
setShow4nkAuthModal(false);
|
||||||
// Recharger la page pour récupérer les nouvelles données
|
}, []);
|
||||||
window.location.reload()
|
|
||||||
}
|
const handle4nkClose = useCallback(() => {
|
||||||
|
if (!isConnected) return;
|
||||||
|
setShow4nkAuthModal(false);
|
||||||
|
}, [isConnected]);
|
||||||
|
|
||||||
const handleLogout = useCallback(() => {
|
const handleLogout = useCallback(() => {
|
||||||
UserStore.getInstance().disconnect();
|
UserStore.getInstance().disconnect();
|
||||||
setIsConnected(false);
|
setIsConnected(false);
|
||||||
setProcesses(null);
|
|
||||||
setMyProcesses([]);
|
|
||||||
setUserPairingId(null);
|
setUserPairingId(null);
|
||||||
|
|
||||||
// Émettre un événement pour vider les messages locaux
|
|
||||||
EventBus.getInstance().emit('CLEAR_CONSOLE');
|
EventBus.getInstance().emit('CLEAR_CONSOLE');
|
||||||
|
|
||||||
setShowLogoutConfirm(true)
|
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(() => {
|
useEffect(() => {
|
||||||
const onPrivateKeyAccess = () => {
|
const onPrivateKeyAccess = () => {
|
||||||
setIsPrivateKeyFlash(true)
|
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 (
|
return (
|
||||||
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
|
<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 */}
|
{/* Main content (prend tout l'écran) */}
|
||||||
<div
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
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"
|
|
||||||
}`}
|
{/* --- 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 flex-col h-full">
|
<div className="flex items-center justify-between">
|
||||||
{/* Logo */}
|
|
||||||
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-200 dark:border-gray-700">
|
{/* Partie Gauche: Logo */}
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Shield className="h-8 w-8 text-blue-600 dark:text-blue-400" />
|
<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>
|
<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>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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">
|
<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">
|
{/* TODO: Icone de cloche pour une future lsite de notifications */}
|
||||||
<Bell className="h-5 w-5 text-gray-900 dark:text-gray-100" />
|
<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>
|
</Button>
|
||||||
|
|
||||||
<Link href="/dashboard/settings">
|
<DropdownMenu>
|
||||||
<Button variant="ghost" size="sm" title="Paramètres">
|
<DropdownMenuTrigger asChild>
|
||||||
<Settings className="h-5 w-5 text-gray-900 dark:text-gray-100" />
|
<Button variant="ghost" className="flex items-center space-x-2 px-2 py-1 h-10">
|
||||||
</Button>
|
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center">
|
||||||
</Link>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Page content */}
|
{/* Page content */}
|
||||||
<main className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900">
|
<main className="flex-1 overflow-hidden bg-gray-900">
|
||||||
<div className="p-6">{children}</div>
|
<FourNKProvider>
|
||||||
|
{children}
|
||||||
|
</FourNKProvider>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Modal de confirmation de déconnexion */}
|
{/* --- Modal de déconnexion --- */}
|
||||||
{showLogoutConfirm && (
|
{showLogoutConfirm && (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
<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">
|
<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">
|
<p className="text-gray-600 dark:text-gray-300 mb-6">
|
||||||
Vous avez été déconnecté de votre espace sécurisé DocV.
|
Vous avez été déconnecté de votre espace sécurisé DocV.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<Button onClick={() => router.push("/")} variant="outline" className="w-full">
|
<Button onClick={() => router.push("/")} variant="outline" className="w-full">
|
||||||
<Home className="h-4 w-4 mr-2" />
|
<Home className="h-4 w-4 mr-2" />
|
||||||
Retourner à l'accueil
|
Retourner à l'accueil
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
|
<p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
|
||||||
Vos données restent sécurisées par le chiffrement 4NK
|
Vos données restent sécurisées par le chiffrement 4NK
|
||||||
</p>
|
</p>
|
||||||
@ -356,7 +237,18 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{/* --- Modals 4NK --- */}
|
||||||
|
{show4nkAuthModal && (
|
||||||
|
<AuthModal
|
||||||
|
isOpen={show4nkAuthModal}
|
||||||
|
onClose={handle4nkClose}
|
||||||
|
onConnect={handle4nkConnect}
|
||||||
|
iframeUrl={iframeUrl}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isConnected && <Iframe iframeUrl={iframeUrl} />}
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,474 +1,282 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useState, useEffect, useCallback } from "react"
|
import { useState, useMemo, useCallback } from "react" // <-- useCallback ajouté
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
import { useRouter } from "next/navigation"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Input } from "@/components/ui/input"
|
||||||
import {
|
import {
|
||||||
FileText,
|
|
||||||
Folder,
|
Folder,
|
||||||
Users,
|
|
||||||
Activity,
|
|
||||||
TrendingUp,
|
|
||||||
Clock,
|
|
||||||
Shield,
|
|
||||||
AlertCircle,
|
|
||||||
CheckCircle,
|
|
||||||
Download,
|
|
||||||
Upload,
|
|
||||||
Search,
|
Search,
|
||||||
Plus,
|
|
||||||
MoreHorizontal,
|
|
||||||
Edit,
|
|
||||||
Share2,
|
|
||||||
TestTube,
|
|
||||||
Zap,
|
|
||||||
HardDrive,
|
|
||||||
X,
|
|
||||||
FolderPlus,
|
FolderPlus,
|
||||||
XCircle,
|
Clock,
|
||||||
Info,
|
StickyNote,
|
||||||
} from "@/lib/icons"
|
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 MessageBus from "@/lib/4nk/MessageBus"
|
||||||
import Link from "next/link"
|
import { iframeUrl } from "@/app/page"
|
||||||
import Chat from "@/components/4nk/Chat"
|
import FolderModal from "@/components/4nk/FolderModal"
|
||||||
import UserStore from "@/lib/4nk/UserStore"
|
import FolderChat from "@/components/4nk/FolderChat"
|
||||||
import EventBus from "@/lib/4nk/EventBus"
|
import { use4NK, EnrichedFolderData } from "@/lib/contexts/FourNKContext"
|
||||||
import { iframeUrl } from "../page"
|
|
||||||
import Iframe from "@/components/4nk/Iframe"
|
|
||||||
|
|
||||||
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() {
|
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 [notification, setNotification] = useState<{ type: "success" | "error" | "info"; message: string } | null>(null)
|
||||||
|
|
||||||
// 4NK Integration states
|
const [selectedFolder, setSelectedFolder] = useState<EnrichedFolderData | null>(null);
|
||||||
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 [isModalOpen, setIsModalOpen] = useState(false);
|
const {
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
isConnected,
|
||||||
const [folderType, setFolderType] = useState<FolderType | null>(null);
|
userPairingId,
|
||||||
|
folders,
|
||||||
|
loadingFolders,
|
||||||
|
setFolderProcesses,
|
||||||
|
setMyFolderProcesses,
|
||||||
|
setFolderPrivateData
|
||||||
|
} = use4NK();
|
||||||
|
|
||||||
const [stats, setStats] = useState({
|
const filteredFolders = folders.filter(folder => {
|
||||||
totalDocuments: 0,
|
const matchesSearch = folder.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
totalFolders: 0,
|
folder.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
totalUsers: 0,
|
folder.folderNumber.toLowerCase().includes(searchTerm.toLowerCase()) // On garde la recherche par ID
|
||||||
storageUsed: 0,
|
return matchesSearch
|
||||||
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 [recentDocuments, setRecentDocuments] = useState<any[]>([])
|
const showNotification = (type: "success" | "error" | "info", message: string) => {
|
||||||
const [recentActivity, setRecentActivity] = useState<any[]>([])
|
setNotification({ type, message })
|
||||||
const [notifications, setNotifications] = useState<any[]>([])
|
setTimeout(() => setNotification(null), 5000)
|
||||||
|
|
||||||
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 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) => {
|
const handleOpenModal = (type: FolderType) => {
|
||||||
setFolderType(type);
|
setFolderType(type);
|
||||||
setIsModalOpen(true);
|
setIsModalOpen(true);
|
||||||
setMenuOpen(false);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseModal = () => {
|
const handleCloseModal = () => {
|
||||||
setIsModalOpen(false);
|
setIsModalOpen(false);
|
||||||
setFolderType(null);
|
setFolderType(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Notification system
|
const handleSaveNewFolder = useCallback(
|
||||||
const showNotification = (type: "success" | "error" | "info", message: string) => {
|
(folderData: FolderData) => {
|
||||||
setNotification({ type, message })
|
if (!isConnected || !userPairingId) {
|
||||||
setTimeout(() => setNotification(null), 3000)
|
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 (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="flex h-full text-gray-100 p-6 space-x-6">
|
||||||
{/* Notification */}
|
|
||||||
|
{/* --- 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 && (
|
{notification && (
|
||||||
<div
|
<div className="fixed top-4 right-4 z-50">
|
||||||
className={`fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg flex items-center space-x-2 ${notification.type === "success"
|
<div className={`p-4 rounded-md shadow-lg ${notification.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
|
||||||
? "bg-green-100 text-green-800 border border-green-200"
|
notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
|
||||||
: notification.type === "error"
|
"bg-blue-50 text-blue-800 border border-blue-200"
|
||||||
? "bg-red-100 text-red-800 border border-red-200"
|
}`}>
|
||||||
: "bg-blue-100 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)}>
|
||||||
{notification.type === "success" && <CheckCircle className="h-5 w-5" />}
|
<X className="h-4 w-4" />
|
||||||
{notification.type === "error" && <XCircle className="h-5 w-5" />}
|
</Button>
|
||||||
{notification.type === "info" && <Info className="h-5 w-5" />}
|
</div>
|
||||||
<span>{notification.message}</span>
|
</div>
|
||||||
<Button variant="ghost" size="sm" onClick={() => setNotification(null)}>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,338 +1,188 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useState, useEffect } from "react"
|
import { useState } from "react"
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from "@/components/ui/badge"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
import { Input } from "@/components/ui/input"
|
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
import {
|
import {
|
||||||
MessageSquare,
|
|
||||||
Search,
|
|
||||||
Send,
|
Send,
|
||||||
Paperclip,
|
Paperclip,
|
||||||
Smile,
|
Smile,
|
||||||
MoreHorizontal,
|
MoreHorizontal,
|
||||||
Users,
|
|
||||||
Circle,
|
|
||||||
Folder,
|
Folder,
|
||||||
Clock,
|
MessageSquare
|
||||||
} from "lucide-react"
|
} from "lucide-react"
|
||||||
|
import type { EnrichedFolderData } from "@/lib/contexts/FourNKContext";
|
||||||
|
|
||||||
interface FolderMember {
|
// Interface pour les props (accepte null)
|
||||||
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 FolderChatProps {
|
interface FolderChatProps {
|
||||||
heightClass?: string
|
folder: EnrichedFolderData | null;
|
||||||
folderProcesses?: any
|
|
||||||
myFolderProcesses?: string[]
|
|
||||||
folderPrivateData?: Record<string, Record<string, any>>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function FolderChat({
|
// Message fictif pour la maquette
|
||||||
heightClass = "h-[calc(100vh-8rem)]",
|
interface MockMessage {
|
||||||
folderProcesses,
|
id: number;
|
||||||
myFolderProcesses = [],
|
sender: 'me' | 'other';
|
||||||
folderPrivateData = {}
|
name: string;
|
||||||
}: FolderChatProps) {
|
avatar: string;
|
||||||
const [selectedConversation, setSelectedConversation] = useState("")
|
text: string;
|
||||||
|
time: string;
|
||||||
|
type: 'owner' | 'general'; // Pour filtrer
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FolderChat({ folder }: FolderChatProps) {
|
||||||
const [newMessage, setNewMessage] = useState("")
|
const [newMessage, setNewMessage] = useState("")
|
||||||
const [folderConversations, setFolderConversations] = useState<FolderConversation[]>([])
|
const [activeTab, setActiveTab] = useState<'owner' | 'general'>('owner');
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
|
||||||
const [searchQuery, setSearchQuery] = useState("")
|
|
||||||
|
|
||||||
// Extract folder conversations from processes
|
// Données fictives
|
||||||
useEffect(() => {
|
const mockMessages: MockMessage[] = [
|
||||||
if (folderProcesses && Object.keys(folderProcesses).length > 0) {
|
{ id: 1, sender: 'other', name: 'Membre A4B2 (Owner)', avatar: 'A4', text: "Validation Owner OK.", time: "14:30", type: 'owner' },
|
||||||
setIsLoading(true)
|
{ 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' },
|
||||||
const conversations: FolderConversation[] = []
|
{ id: 4, sender: 'me', name: 'Vous', avatar: 'MO', text: "Je regarde ça.", time: "14:34", type: 'general' },
|
||||||
|
];
|
||||||
Object.entries(folderProcesses).forEach(([processId, process]: [string, any]) => {
|
|
||||||
// Only include processes that belong to the user
|
|
||||||
if (!myFolderProcesses.includes(processId)) return
|
|
||||||
|
|
||||||
const latestState = process.states?.[0]
|
// Filtre les messages basé sur l'onglet actif
|
||||||
if (!latestState) return
|
const filteredMessages = mockMessages.filter(msg => msg.type === activeTab);
|
||||||
|
|
||||||
// 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)
|
|
||||||
|
|
||||||
const handleSendMessage = () => {
|
const handleSendMessage = () => {
|
||||||
if (newMessage.trim()) {
|
if (newMessage.trim()) {
|
||||||
console.log("Sending message to folder:", selectedConversation, "Message:", newMessage)
|
console.log(`Envoi message [${activeTab}] à:`, folder?.folderNumber, "Msg:", newMessage)
|
||||||
// Here implement the actual message sending logic
|
// TODO: Implémenter la logique d'envoi de message
|
||||||
setNewMessage("")
|
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 (
|
return (
|
||||||
<div className={`${heightClass} flex`}>
|
<div className="flex flex-col h-full bg-gray-800 text-gray-100">
|
||||||
{/* Sidebar with folder conversations */}
|
|
||||||
<div className="w-80 border-r bg-white dark:bg-gray-800 flex flex-col">
|
{/* En-tête du chat */}
|
||||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
<div className="p-4 border-b border-gray-700">
|
||||||
<div className="mb-4">
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
<div className="flex items-center space-x-3">
|
||||||
Chat Dossiers
|
<div className="w-10 h-10 bg-green-800 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
</h2>
|
<Folder className="h-5 w-5 text-green-400" />
|
||||||
<div className="relative">
|
</div>
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
<div>
|
||||||
<Input
|
<h3 className="font-medium text-gray-100">
|
||||||
placeholder="Rechercher un dossier..."
|
{folder.name}
|
||||||
value={searchQuery}
|
</h3>
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
{/* ID du dossier supprimé */}
|
||||||
className="pl-10 bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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" />
|
||||||
<div className="flex-1 overflow-y-auto">
|
</Button>
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main chat area */}
|
{/* Onglets "Owner" / "General" */}
|
||||||
<div className="flex-1 flex flex-col">
|
<div className="p-2 flex border-b border-gray-700 bg-gray-900">
|
||||||
{currentConversation ? (
|
<Button
|
||||||
<>
|
variant={activeTab === 'owner' ? "secondary" : "ghost"}
|
||||||
{/* Chat header */}
|
size="sm"
|
||||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
onClick={() => setActiveTab('owner')}
|
||||||
<div className="flex items-center justify-between">
|
className={`flex-1 ${activeTab === 'owner' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'}`}
|
||||||
<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">
|
Propriétaires
|
||||||
<Folder className="h-5 w-5 text-green-600 dark:text-green-400" />
|
</Button>
|
||||||
</div>
|
<Button
|
||||||
<div>
|
variant={activeTab === 'general' ? "secondary" : "ghost"}
|
||||||
<h3 className="font-medium text-gray-900 dark:text-gray-100">
|
size="sm"
|
||||||
{currentConversation.folderName}
|
onClick={() => setActiveTab('general')}
|
||||||
</h3>
|
className={`flex-1 ${activeTab === 'general' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'}`}
|
||||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
>
|
||||||
Dossier #{currentConversation.folderNumber} • {currentConversation.members.length} membre{currentConversation.members.length > 1 ? 's' : ''}
|
Général
|
||||||
</p>
|
</Button>
|
||||||
</div>
|
</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>
|
|
||||||
|
|
||||||
{/* Messages area */}
|
{/* --- LISTE DES MEMBRES (SUPPRIMÉE) --- */}
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Message input */}
|
{/* Zone des messages */}
|
||||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-900">
|
||||||
<div className="flex items-end space-x-2">
|
{filteredMessages.length > 0 ? filteredMessages.map((msg) => (
|
||||||
<Button variant="outline" size="sm">
|
<div
|
||||||
<Paperclip className="h-4 w-4" />
|
key={msg.id}
|
||||||
</Button>
|
className={`flex items-start gap-3 ${msg.sender === 'me' ? 'justify-end' : ''}`}
|
||||||
<div className="flex-1">
|
>
|
||||||
<Textarea
|
{msg.sender === 'other' && (
|
||||||
placeholder="Tapez votre message..."
|
<div className="w-8 h-8 bg-blue-800 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
value={newMessage}
|
<span className="text-xs text-blue-300 font-medium">{msg.avatar}</span>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</>
|
<div>
|
||||||
) : (
|
<div
|
||||||
<div className="flex-1 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
className={`p-3 rounded-lg ${msg.sender === 'me'
|
||||||
<div className="text-center">
|
? 'bg-blue-600 text-white rounded-br-none'
|
||||||
<Folder className="h-12 w-12 mx-auto text-gray-400 dark:text-gray-500 mb-4" />
|
: 'bg-gray-700 text-gray-100 rounded-bl-none'
|
||||||
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
|
}`}
|
||||||
Sélectionnez un dossier
|
>
|
||||||
</h3>
|
{msg.sender === 'other' && (
|
||||||
<p className="text-gray-600 dark:text-gray-400">
|
<p className="text-xs font-medium text-blue-300 mb-1">{msg.name}</p>
|
||||||
Choisissez un dossier pour commencer à discuter avec ses membres
|
)}
|
||||||
|
<p>{msg.text}</p>
|
||||||
|
</div>
|
||||||
|
<p className={`text-xs text-gray-500 mt-1 ${msg.sender === 'me' ? 'text-right' : ''}`}>
|
||||||
|
{msg.time}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -21,16 +21,10 @@ interface FolderModalProps {
|
|||||||
const defaultFolder: FolderData = {
|
const defaultFolder: FolderData = {
|
||||||
folderNumber: '',
|
folderNumber: '',
|
||||||
name: '',
|
name: '',
|
||||||
deedType: '',
|
|
||||||
description: '',
|
description: '',
|
||||||
archived_description: '',
|
|
||||||
status: 'active',
|
|
||||||
created_at: new Date().toISOString(),
|
created_at: new Date().toISOString(),
|
||||||
updated_at: new Date().toISOString(),
|
updated_at: new Date().toISOString(),
|
||||||
customers: [],
|
notes: []
|
||||||
documents: [],
|
|
||||||
notes: [],
|
|
||||||
stakeholders: []
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function capitalize(s?: string) {
|
function capitalize(s?: string) {
|
||||||
|
|||||||
214
components/ui/dropdown-menu.tsx
Normal file
214
components/ui/dropdown-menu.tsx
Normal 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
208
lib/contexts/FourNKContext.tsx
Normal 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;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user