Compare commits
2 Commits
ed54f2e7e2
...
d0539aad62
| Author | SHA1 | Date | |
|---|---|---|---|
| d0539aad62 | |||
| bfe2c5b7ff |
@ -1,3 +0,0 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
@ -1,540 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter, useParams } 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 { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import {
|
||||
Users,
|
||||
UserPlus,
|
||||
Search,
|
||||
ArrowLeft,
|
||||
Crown,
|
||||
Edit,
|
||||
Eye,
|
||||
Shield,
|
||||
UserCheck,
|
||||
Trash2,
|
||||
X,
|
||||
CheckCircle,
|
||||
XCircle,
|
||||
Info,
|
||||
Folder,
|
||||
} from "lucide-react"
|
||||
|
||||
interface FolderRole {
|
||||
userId: string
|
||||
userName: string
|
||||
userEmail: string
|
||||
userAvatar: string
|
||||
role: "owner" | "editor" | "viewer" | "validator" | "contributor"
|
||||
assignedDate: Date
|
||||
assignedBy: string
|
||||
defaultRole: "admin" | "editor" | "viewer"
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
avatar: string
|
||||
defaultRole: "admin" | "editor" | "viewer"
|
||||
department: string
|
||||
}
|
||||
|
||||
export default function FolderRolesPage() {
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const folderId = params.id as string
|
||||
|
||||
const [folderName, setFolderName] = useState("")
|
||||
const [folderRoles, setFolderRoles] = useState<FolderRole[]>([])
|
||||
const [availableUsers, setAvailableUsers] = useState<User[]>([])
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [showAddUser, setShowAddUser] = useState(false)
|
||||
const [selectedUser, setSelectedUser] = useState("")
|
||||
const [selectedRole, setSelectedRole] = useState("viewer")
|
||||
const [inviteMessage, setInviteMessage] = useState("")
|
||||
const [notification, setNotification] = useState<{ type: "success" | "error" | "info"; message: string } | null>(null)
|
||||
|
||||
// Simuler le chargement des données
|
||||
useEffect(() => {
|
||||
// Charger les informations du dossier
|
||||
const folderNames: { [key: string]: string } = {
|
||||
"1": "Contrats",
|
||||
"2": "Rapports",
|
||||
"3": "Projets",
|
||||
"4": "Finance",
|
||||
"5": "Ressources Humaines",
|
||||
"6": "Marketing",
|
||||
}
|
||||
setFolderName(folderNames[folderId] || "Dossier")
|
||||
|
||||
// Charger les rôles existants sur le dossier
|
||||
const mockFolderRoles: FolderRole[] = [
|
||||
{
|
||||
userId: "1",
|
||||
userName: "Marie Dubois",
|
||||
userEmail: "marie.dubois@docv.fr",
|
||||
userAvatar: "MD",
|
||||
role: "owner",
|
||||
assignedDate: new Date("2024-01-01"),
|
||||
assignedBy: "Système",
|
||||
defaultRole: "admin",
|
||||
},
|
||||
{
|
||||
userId: "2",
|
||||
userName: "Pierre Martin",
|
||||
userEmail: "pierre.martin@docv.fr",
|
||||
userAvatar: "PM",
|
||||
role: "editor",
|
||||
assignedDate: new Date("2024-01-10"),
|
||||
assignedBy: "Marie Dubois",
|
||||
defaultRole: "editor",
|
||||
},
|
||||
{
|
||||
userId: "5",
|
||||
userName: "Julie Moreau",
|
||||
userEmail: "julie.moreau@docv.fr",
|
||||
userAvatar: "JM",
|
||||
role: "validator",
|
||||
assignedDate: new Date("2024-01-15"),
|
||||
assignedBy: "Marie Dubois",
|
||||
defaultRole: "admin",
|
||||
},
|
||||
]
|
||||
setFolderRoles(mockFolderRoles)
|
||||
|
||||
// Charger les utilisateurs disponibles (ceux qui n'ont pas encore de rôle sur ce dossier)
|
||||
const allUsers: User[] = [
|
||||
{
|
||||
id: "3",
|
||||
name: "Sophie Laurent",
|
||||
email: "sophie.laurent@docv.fr",
|
||||
avatar: "SL",
|
||||
defaultRole: "viewer",
|
||||
department: "RH",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Thomas Rousseau",
|
||||
email: "thomas.rousseau@docv.fr",
|
||||
avatar: "TR",
|
||||
defaultRole: "editor",
|
||||
department: "Finance",
|
||||
},
|
||||
]
|
||||
|
||||
const usersWithRoles = mockFolderRoles.map((fr) => fr.userId)
|
||||
const available = allUsers.filter((user) => !usersWithRoles.includes(user.id))
|
||||
setAvailableUsers(available)
|
||||
}, [folderId])
|
||||
|
||||
// Notification system
|
||||
const showNotification = (type: "success" | "error" | "info", message: string) => {
|
||||
setNotification({ type, message })
|
||||
setTimeout(() => setNotification(null), 3000)
|
||||
}
|
||||
|
||||
const getRoleIcon = (role: string) => {
|
||||
switch (role) {
|
||||
case "owner":
|
||||
return <Crown className="h-4 w-4 text-yellow-600" />
|
||||
case "editor":
|
||||
return <Edit className="h-4 w-4 text-blue-600" />
|
||||
case "validator":
|
||||
return <Shield className="h-4 w-4 text-green-600" />
|
||||
case "contributor":
|
||||
return <UserPlus className="h-4 w-4 text-purple-600" />
|
||||
case "viewer":
|
||||
return <Eye className="h-4 w-4 text-gray-600" />
|
||||
default:
|
||||
return <Eye className="h-4 w-4 text-gray-600" />
|
||||
}
|
||||
}
|
||||
|
||||
const getRoleColor = (role: string) => {
|
||||
switch (role) {
|
||||
case "owner":
|
||||
return "bg-yellow-100 text-yellow-800 border-yellow-200"
|
||||
case "editor":
|
||||
return "bg-blue-100 text-blue-800 border-blue-200"
|
||||
case "validator":
|
||||
return "bg-green-100 text-green-800 border-green-200"
|
||||
case "contributor":
|
||||
return "bg-purple-100 text-purple-800 border-purple-200"
|
||||
case "viewer":
|
||||
return "bg-gray-100 text-gray-800 border-gray-200"
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800 border-gray-200"
|
||||
}
|
||||
}
|
||||
|
||||
const getDefaultRoleColor = (role: string) => {
|
||||
switch (role) {
|
||||
case "admin":
|
||||
return "bg-red-100 text-red-800 border-red-200"
|
||||
case "editor":
|
||||
return "bg-blue-100 text-blue-800 border-blue-200"
|
||||
case "viewer":
|
||||
return "bg-gray-100 text-gray-800 border-gray-200"
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800 border-gray-200"
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddUser = () => {
|
||||
if (!selectedUser) return
|
||||
|
||||
const user = availableUsers.find((u) => u.id === selectedUser)
|
||||
if (!user) return
|
||||
|
||||
const newRole: FolderRole = {
|
||||
userId: user.id,
|
||||
userName: user.name,
|
||||
userEmail: user.email,
|
||||
userAvatar: user.avatar,
|
||||
role: selectedRole as "owner" | "editor" | "viewer" | "validator" | "contributor",
|
||||
assignedDate: new Date(),
|
||||
assignedBy: "Utilisateur actuel",
|
||||
defaultRole: user.defaultRole,
|
||||
}
|
||||
|
||||
setFolderRoles((prev) => [...prev, newRole])
|
||||
setAvailableUsers((prev) => prev.filter((u) => u.id !== selectedUser))
|
||||
|
||||
showNotification("success", `${user.name} ajouté avec le rôle ${selectedRole}`)
|
||||
|
||||
// Reset form
|
||||
setSelectedUser("")
|
||||
setSelectedRole("viewer")
|
||||
setInviteMessage("")
|
||||
setShowAddUser(false)
|
||||
}
|
||||
|
||||
const handleChangeRole = (userId: string, newRole: string) => {
|
||||
setFolderRoles((prev) =>
|
||||
prev.map((fr) =>
|
||||
fr.userId === userId
|
||||
? { ...fr, role: newRole as "owner" | "editor" | "viewer" | "validator" | "contributor" }
|
||||
: fr,
|
||||
),
|
||||
)
|
||||
|
||||
const user = folderRoles.find((fr) => fr.userId === userId)
|
||||
showNotification("success", `Rôle de ${user?.userName} mis à jour vers ${newRole}`)
|
||||
}
|
||||
|
||||
const handleRemoveUser = (userId: string) => {
|
||||
const userRole = folderRoles.find((fr) => fr.userId === userId)
|
||||
if (!userRole) return
|
||||
|
||||
if (userRole.role === "owner") {
|
||||
showNotification("error", "Impossible de supprimer le propriétaire du dossier")
|
||||
return
|
||||
}
|
||||
|
||||
setFolderRoles((prev) => prev.filter((fr) => fr.userId !== userId))
|
||||
|
||||
// Remettre l'utilisateur dans la liste des disponibles
|
||||
const user: User = {
|
||||
id: userRole.userId,
|
||||
name: userRole.userName,
|
||||
email: userRole.userEmail,
|
||||
avatar: userRole.userAvatar,
|
||||
defaultRole: userRole.defaultRole,
|
||||
department: "Département", // Valeur par défaut
|
||||
}
|
||||
setAvailableUsers((prev) => [...prev, user])
|
||||
|
||||
showNotification("success", `${userRole.userName} retiré du dossier`)
|
||||
}
|
||||
|
||||
const filteredRoles = folderRoles.filter(
|
||||
(role) =>
|
||||
role.userName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
role.userEmail.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Notification */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="outline" onClick={() => router.back()}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Retour
|
||||
</Button>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-blue-100 rounded-lg">
|
||||
<Folder className="h-6 w-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Gestion des rôles - Dossier "{folderName}"</h1>
|
||||
<p className="text-gray-600">Gérez les permissions d'accès et les rôles des utilisateurs sur ce dossier</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats supprimées selon la consigne */}
|
||||
|
||||
{/* Search and Add */}
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
|
||||
<div className="relative flex-1 sm:max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
||||
<Input
|
||||
placeholder="Rechercher un utilisateur..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={() => setShowAddUser(true)} disabled={availableUsers.length === 0}>
|
||||
<UserPlus className="h-4 w-4 mr-2" />
|
||||
Ajouter un utilisateur
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{showAddUser && (
|
||||
<div className="mt-4 p-4 border rounded-lg bg-blue-50">
|
||||
<h3 className="font-medium text-blue-900 mb-3">Ajouter un utilisateur au dossier</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label>Utilisateur</Label>
|
||||
<Select value={selectedUser} onValueChange={setSelectedUser}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un utilisateur" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableUsers.map((user) => (
|
||||
<SelectItem key={user.id} value={user.id}>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center text-xs">
|
||||
{user.avatar}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">{user.name}</span>
|
||||
<div className="flex items-center space-x-1 mt-1">
|
||||
<span className="text-xs text-gray-500">Rôle par défaut:</span>
|
||||
<Badge variant="outline" className={`text-xs ${getDefaultRoleColor(user.defaultRole)}`}>
|
||||
{user.defaultRole}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label>Rôle sur ce dossier</Label>
|
||||
<Select value={selectedRole} onValueChange={setSelectedRole}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="viewer">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Eye className="h-4 w-4" />
|
||||
<div>
|
||||
<span>Lecteur</span>
|
||||
<p className="text-xs text-gray-500">Lecture seule</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="contributor">
|
||||
<div className="flex items-center space-x-2">
|
||||
<UserPlus className="h-4 w-4" />
|
||||
<div>
|
||||
<span>Contributeur</span>
|
||||
<p className="text-xs text-gray-500">Peut ajouter des documents</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="editor">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Edit className="h-4 w-4" />
|
||||
<div>
|
||||
<span>Éditeur</span>
|
||||
<p className="text-xs text-gray-500">Peut modifier les documents</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="validator">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Shield className="h-4 w-4" />
|
||||
<div>
|
||||
<span>Validateur</span>
|
||||
<p className="text-xs text-gray-500">Peut valider les documents</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="owner">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Crown className="h-4 w-4" />
|
||||
<div>
|
||||
<span>Propriétaire</span>
|
||||
<p className="text-xs text-gray-500">Contrôle total</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-end space-x-2">
|
||||
<Button onClick={handleAddUser} disabled={!selectedUser}>
|
||||
<UserCheck className="h-4 w-4 mr-2" />
|
||||
Ajouter
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setShowAddUser(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Roles List */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Utilisateurs avec accès au dossier</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left p-4 font-medium">Utilisateur</th>
|
||||
<th className="text-left p-4 font-medium">Rôle par défaut</th>
|
||||
<th className="text-left p-4 font-medium">Rôle sur ce dossier</th>
|
||||
<th className="text-left p-4 font-medium">Assigné le</th>
|
||||
<th className="text-left p-4 font-medium">Assigné par</th>
|
||||
<th className="text-left p-4 font-medium">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredRoles.map((roleAssignment) => (
|
||||
<tr key={roleAssignment.userId} className="border-b hover:bg-gray-50">
|
||||
<td className="p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-blue-600 font-medium text-sm">{roleAssignment.userAvatar}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{roleAssignment.userName}</p>
|
||||
<p className="text-sm text-gray-500">{roleAssignment.userEmail}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<Badge variant="outline" className={getDefaultRoleColor(roleAssignment.defaultRole)}>
|
||||
{roleAssignment.defaultRole}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<Select
|
||||
value={roleAssignment.role}
|
||||
onValueChange={(newRole) => handleChangeRole(roleAssignment.userId, newRole)}
|
||||
disabled={roleAssignment.role === "owner"}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<div className="flex items-center space-x-2">
|
||||
{getRoleIcon(roleAssignment.role)}
|
||||
<span className="capitalize">{roleAssignment.role}</span>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="viewer">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Eye className="h-4 w-4" />
|
||||
<span>Lecteur</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="contributor">
|
||||
<div className="flex items-center space-x-2">
|
||||
<UserPlus className="h-4 w-4" />
|
||||
<span>Contributeur</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="editor">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Edit className="h-4 w-4" />
|
||||
<span>Éditeur</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="validator">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Shield className="h-4 w-4" />
|
||||
<span>Validateur</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="owner">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Crown className="h-4 w-4" />
|
||||
<span>Propriétaire</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</td>
|
||||
<td className="p-4 text-gray-600">{roleAssignment.assignedDate.toLocaleDateString("fr-FR")}</td>
|
||||
<td className="p-4 text-gray-600">{roleAssignment.assignedBy}</td>
|
||||
<td className="p-4">
|
||||
{roleAssignment.role !== "owner" && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRemoveUser(roleAssignment.userId)}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{filteredRoles.length === 0 && (
|
||||
<div className="text-center py-8">
|
||||
<Users className="h-12 w-12 mx-auto text-gray-400 mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">Aucun utilisateur trouvé</h3>
|
||||
<p className="text-gray-600">Essayez de modifier vos critères de recherche</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
export default function FoldersLoading() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header Skeleton */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<div className="h-8 w-32 bg-gray-200 rounded animate-pulse mb-2" />
|
||||
<div className="h-4 w-56 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-3 mt-4 sm:mt-0">
|
||||
<div className="h-9 w-24 bg-gray-200 rounded animate-pulse" />
|
||||
<div className="h-9 w-36 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb Skeleton */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="h-4 w-16 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* Stats Cards Skeleton */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="bg-white border rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="h-4 w-16 bg-gray-200 rounded animate-pulse mb-2" />
|
||||
<div className="h-8 w-8 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
<div className="h-8 w-8 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search and Filters Skeleton */}
|
||||
<div className="bg-white border rounded-lg p-4">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-4">
|
||||
<div className="h-10 w-80 bg-gray-200 rounded animate-pulse" />
|
||||
<div className="h-10 w-20 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
|
||||
<div className="h-10 w-20 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Folders Grid Skeleton */}
|
||||
<div className="bg-white border rounded-lg p-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div key={i} className="border rounded-lg p-6">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="h-16 w-16 bg-gray-200 rounded-xl animate-pulse" />
|
||||
<div className="text-center space-y-2 w-full">
|
||||
<div className="h-6 w-32 bg-gray-200 rounded animate-pulse mx-auto" />
|
||||
<div className="h-4 w-full bg-gray-200 rounded animate-pulse" />
|
||||
<div className="h-4 w-3/4 bg-gray-200 rounded animate-pulse mx-auto" />
|
||||
<div className="flex items-center justify-center space-x-4">
|
||||
<div className="h-4 w-8 bg-gray-200 rounded animate-pulse" />
|
||||
<div className="h-4 w-8 bg-gray-200 rounded animate-pulse" />
|
||||
<div className="h-4 w-8 bg-gray-200 rounded animate-pulse" />
|
||||
</div>
|
||||
<div className="h-6 w-16 bg-gray-200 rounded animate-pulse mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,549 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Folder,
|
||||
Search,
|
||||
FolderPlus,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
SortAsc,
|
||||
SortDesc,
|
||||
X,
|
||||
MessageSquare,
|
||||
List,
|
||||
} from "lucide-react"
|
||||
import { FolderData, FolderCreated, FolderPrivateFields, setDefaultFolderRoles } from "@/lib/4nk/models/FolderData"
|
||||
import MessageBus from "@/lib/4nk/MessageBus"
|
||||
import { iframeUrl } from "@/app/page"
|
||||
import UserStore from "@/lib/4nk/UserStore"
|
||||
import FolderModal from "@/components/4nk/FolderModal"
|
||||
import AuthModal from "@/components/4nk/AuthModal"
|
||||
import Iframe from "@/components/4nk/Iframe"
|
||||
import FolderChat from "@/components/4nk/FolderChat"
|
||||
|
||||
type FolderType = 'contrat' | 'projet' | 'rapport' | 'finance' | 'rh' | 'marketing' | 'autre';
|
||||
|
||||
export default function FoldersPage() {
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [sortBy, setSortBy] = useState("updated_at")
|
||||
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
|
||||
const [currentPath, setCurrentPath] = useState<string[]>(["Racine"])
|
||||
const [folderType, setFolderType] = useState<FolderType | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<"folders" | "chat">("folders");
|
||||
|
||||
// 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 [folderProcesses, setFolderProcesses] = useState<any>(null)
|
||||
const [myFolderProcesses, setMyFolderProcesses] = useState<string[]>([])
|
||||
const [folderPrivateData, setFolderPrivateData] = useState<Record<string, Record<string, any>>>({})
|
||||
const [loadingFolders, setLoadingFolders] = useState(false)
|
||||
|
||||
// Modal states
|
||||
const [notification, setNotification] = useState<{ type: "success" | "error" | "info"; message: string } | null>(null)
|
||||
|
||||
const [folders, setFolders] = useState<FolderData[]>([])
|
||||
const [stats, setStats] = useState({
|
||||
total: 0
|
||||
})
|
||||
|
||||
// Notification system
|
||||
const showNotification = (type: "success" | "error" | "info", message: string) => {
|
||||
setNotification({ type, message })
|
||||
setTimeout(() => setNotification(null), 5000)
|
||||
}
|
||||
|
||||
// Function to fetch folder private data
|
||||
const fetchFolderPrivateData = useCallback(async (processId: string, stateId: string) => {
|
||||
if (!myFolderProcesses.includes(processId)) return;
|
||||
try {
|
||||
const messageBus = MessageBus.getInstance(iframeUrl);
|
||||
await messageBus.isReady();
|
||||
const data = await messageBus.getData(processId, stateId);
|
||||
setFolderPrivateData(prev => ({ ...prev, [stateId]: data }));
|
||||
} catch (err) {
|
||||
console.error('Error fetching folder private data:', err);
|
||||
}
|
||||
}, [myFolderProcesses]);
|
||||
|
||||
// Function to load folders from 4NK processes (adapted to new FolderData model)
|
||||
const loadFoldersFrom4NK = useCallback(() => {
|
||||
if (!folderProcesses) return;
|
||||
|
||||
const folderData: FolderData[] = [];
|
||||
let hasAllPrivateData = true;
|
||||
let hasFoldersToLoad = false;
|
||||
const missingPrivateData: Array<{processId: string, stateId: string}> = [];
|
||||
|
||||
Object.entries(folderProcesses).forEach(([processId, process]: [string, any]) => {
|
||||
// Only include processes that belong to the user (myFolderProcesses)
|
||||
if (!myFolderProcesses.includes(processId)) return;
|
||||
|
||||
// Check if this process has a folderNumber in pcd_commitment
|
||||
const latestState = process.states[0];
|
||||
if (!latestState) return;
|
||||
|
||||
const folderNumber = latestState.pcd_commitment?.folderNumber;
|
||||
if (!folderNumber) return; // Skip processes without folderNumber
|
||||
|
||||
hasFoldersToLoad = true; // We have at least one folder to load
|
||||
|
||||
// Get private data for this state if available
|
||||
const privateData = folderPrivateData[latestState.state_id];
|
||||
|
||||
// If we don't have private data yet, mark as incomplete and collect missing data
|
||||
if (!privateData) {
|
||||
hasAllPrivateData = false;
|
||||
missingPrivateData.push({processId, stateId: latestState.state_id});
|
||||
return; // Skip creating folder until we have private data
|
||||
}
|
||||
|
||||
// Create folder with new simplified model
|
||||
const folder: FolderData = {
|
||||
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 || []
|
||||
};
|
||||
|
||||
folderData.push(folder);
|
||||
});
|
||||
|
||||
// Manage loading state
|
||||
if (hasFoldersToLoad && !hasAllPrivateData) {
|
||||
setLoadingFolders(true);
|
||||
// Fetch missing private data (but only once per missing item)
|
||||
missingPrivateData.forEach(({processId, stateId}) => {
|
||||
if (!folderPrivateData[stateId]) {
|
||||
fetchFolderPrivateData(processId, stateId);
|
||||
}
|
||||
});
|
||||
} else if (hasAllPrivateData) {
|
||||
setLoadingFolders(false);
|
||||
setFolders(folderData);
|
||||
|
||||
// Update stats
|
||||
setStats({
|
||||
total: folderData.length
|
||||
});
|
||||
}
|
||||
}, [folderProcesses, myFolderProcesses, folderPrivateData, fetchFolderPrivateData]);
|
||||
|
||||
// 4NK Integration useEffects
|
||||
useEffect(() => {
|
||||
const userStore = UserStore.getInstance();
|
||||
const connected = userStore.isConnected();
|
||||
const pairingId = userStore.getUserPairingId();
|
||||
|
||||
console.log('Initial 4NK state:', { connected, pairingId });
|
||||
setIsConnected(connected);
|
||||
setUserPairingId(pairingId);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleConnectionFlow = async () => {
|
||||
if (!isConnected) return;
|
||||
|
||||
try {
|
||||
const messageBus = MessageBus.getInstance(iframeUrl);
|
||||
await messageBus.isReady();
|
||||
|
||||
const userStore = UserStore.getInstance();
|
||||
let pairingId = userStore.getUserPairingId();
|
||||
|
||||
// 1️⃣ Créer ou récupérer le pairing
|
||||
if (!pairingId) {
|
||||
pairingId = await messageBus.createUserPairing();
|
||||
console.log("✅ Pairing created:", pairingId);
|
||||
|
||||
if (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);
|
||||
setFolderProcesses(processes);
|
||||
|
||||
// 3️⃣ Charger les myProcesses
|
||||
const myProcesses = await messageBus.getMyProcesses();
|
||||
setMyProcesses(myProcesses);
|
||||
setMyFolderProcesses(myProcesses);
|
||||
|
||||
} catch (err) {
|
||||
console.error("❌ Error during pairing or process loading:", err);
|
||||
}
|
||||
};
|
||||
|
||||
handleConnectionFlow();
|
||||
}, [isConnected, iframeUrl]);
|
||||
|
||||
// Load folders from 4NK when folder processes are available
|
||||
useEffect(() => {
|
||||
if (folderProcesses && myFolderProcesses.length >= 0) {
|
||||
loadFoldersFrom4NK();
|
||||
}
|
||||
}, [folderProcesses, myFolderProcesses, loadFoldersFrom4NK]);
|
||||
|
||||
// Filter and sort folders
|
||||
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())
|
||||
|
||||
return matchesSearch
|
||||
})
|
||||
|
||||
const sortedFolders = [...filteredFolders].sort((a, b) => {
|
||||
let aValue: any, bValue: any
|
||||
|
||||
switch (sortBy) {
|
||||
case "name":
|
||||
aValue = a.name.toLowerCase()
|
||||
bValue = b.name.toLowerCase()
|
||||
break
|
||||
case "created_at":
|
||||
aValue = new Date(a.created_at)
|
||||
bValue = new Date(b.created_at)
|
||||
break
|
||||
case "updated_at":
|
||||
aValue = new Date(a.updated_at)
|
||||
bValue = new Date(b.updated_at)
|
||||
break
|
||||
default:
|
||||
aValue = a.name.toLowerCase()
|
||||
bValue = b.name.toLowerCase()
|
||||
}
|
||||
|
||||
if (sortOrder === "asc") {
|
||||
return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
|
||||
} else {
|
||||
return aValue > bValue ? -1 : aValue < bValue ? 1 : 0
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// Modal handlers
|
||||
const handleOpenModal = (type: FolderType) => {
|
||||
setFolderType(type);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setFolderType(null);
|
||||
};
|
||||
|
||||
const handleSaveNewFolder = useCallback(
|
||||
(folderData: FolderData) => {
|
||||
if (!isConnected || !userPairingId) {
|
||||
console.error('Conditions non remplies:', { isConnected, userPairingId });
|
||||
showNotification(
|
||||
"error",
|
||||
`Vous devez être connecté à 4NK pour créer un dossier (Connected: ${isConnected}, PairingId: ${userPairingId ? 'OK' : 'NULL'})`
|
||||
);
|
||||
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(async () => {
|
||||
// Recharger les processes et myProcesses
|
||||
const messageBus = MessageBus.getInstance(iframeUrl);
|
||||
const [processes, myProcesses] = await Promise.all([
|
||||
messageBus.getProcesses(),
|
||||
messageBus.getMyProcesses()
|
||||
]);
|
||||
|
||||
setProcesses(processes);
|
||||
setFolderProcesses(processes);
|
||||
setMyProcesses(myProcesses);
|
||||
setMyFolderProcesses(myProcesses);
|
||||
|
||||
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]
|
||||
);
|
||||
|
||||
// Auth connection handler
|
||||
const handleAuthConnect = useCallback(() => {
|
||||
setIsConnected(true);
|
||||
setShowAuthModal(false);
|
||||
console.log('Auth Connect - Connexion établie, le useEffect se chargera de récupérer le userPairingId');
|
||||
showNotification("success", "Connexion 4NK réussie");
|
||||
}, []);
|
||||
|
||||
const handleAuthClose = useCallback(() => {
|
||||
setShowAuthModal(false);
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-900">
|
||||
{/* Sidebar */}
|
||||
<div className="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
|
||||
<div className="p-6 border-b border-gray-700">
|
||||
<h1 className="text-xl font-semibold text-gray-100">Dossiers</h1>
|
||||
<p className="text-sm text-gray-400 mt-1">Gérez vos dossiers 4NK</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">Total</span>
|
||||
<span className="font-medium text-gray-100">{stats.total}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4NK Connection Status */}
|
||||
<div className="p-4 border-t border-gray-700">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-gray-100">4NK Status</span>
|
||||
<Badge variant={isConnected ? "default" : "secondary"}>
|
||||
{isConnected ? "Connecté" : "Déconnecté"}
|
||||
</Badge>
|
||||
</div>
|
||||
{!isConnected && (
|
||||
<Button
|
||||
size="sm"
|
||||
className="w-full"
|
||||
onClick={() => setShowAuthModal(true)}
|
||||
>
|
||||
Se connecter à 4NK
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{currentPath.map((path, index) => (
|
||||
<div key={index} className="flex items-center">
|
||||
{index > 0 && <ChevronRight className="h-4 w-4 text-gray-400 mx-1" />}
|
||||
<span className="text-sm text-gray-300">{path}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
{activeTab === "folders" && (
|
||||
<Button
|
||||
onClick={() => handleOpenModal("autre")}
|
||||
disabled={!isConnected}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<FolderPlus className="h-4 w-4" />
|
||||
<span>Nouveau dossier</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<div className="flex bg-gray-700 rounded-lg p-1">
|
||||
<Button
|
||||
variant={activeTab === "folders" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setActiveTab("folders")}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
<span>Dossiers</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === "chat" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setActiveTab("chat")}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<MessageSquare className="h-4 w-4" />
|
||||
<span>Chat</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and filters - only show for folders tab */}
|
||||
{activeTab === "folders" && (
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="Rechercher des dossiers..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
|
||||
>
|
||||
{sortOrder === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 bg-gray-900">
|
||||
{activeTab === "folders" ? (
|
||||
<div className="p-6">
|
||||
{loadingFolders ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-400">Chargement des dossiers...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : sortedFolders.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center">
|
||||
<Folder className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-100 mb-2">Aucun dossier</h3>
|
||||
<p className="text-gray-400 mb-4">
|
||||
{searchTerm ? "Aucun dossier ne correspond à votre recherche." : "Commencez par créer votre premier dossier."}
|
||||
</p>
|
||||
{!searchTerm && (
|
||||
<Button
|
||||
onClick={() => handleOpenModal("autre")}
|
||||
disabled={!isConnected}
|
||||
>
|
||||
<FolderPlus className="h-4 w-4 mr-2" />
|
||||
Créer un dossier
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Folder list */}
|
||||
<div className="space-y-2">
|
||||
{sortedFolders.map((folder) => (
|
||||
<Card key={folder.folderNumber} className="hover:shadow-md transition-shadow bg-gray-800 border border-gray-700">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Folder className="h-5 w-5 text-blue-600" />
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-100">{folder.name}</h3>
|
||||
<p className="text-sm text-gray-400">{folder.description}</p>
|
||||
<div className="flex items-center space-x-4 mt-1">
|
||||
<span className="text-xs text-gray-400">#{folder.folderNumber}</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
<Clock className="h-3 w-3 inline mr-1" />
|
||||
{new Date(folder.updated_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
{folder.notes.length > 0 && (
|
||||
<Badge variant="outline">{folder.notes.length} notes</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<FolderChat
|
||||
heightClass="h-full"
|
||||
folderProcesses={folderProcesses}
|
||||
myFolderProcesses={myFolderProcesses}
|
||||
folderPrivateData={folderPrivateData}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
{isModalOpen && (
|
||||
<FolderModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSaveNewFolder}
|
||||
onCancel={handleCloseModal}
|
||||
folderType={folderType || "autre"}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showAuthModal && (
|
||||
<AuthModal
|
||||
isOpen={showAuthModal}
|
||||
onClose={handleAuthClose}
|
||||
onConnect={handleAuthConnect}
|
||||
iframeUrl={iframeUrl}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Notification */}
|
||||
{notification && (
|
||||
<div className="fixed top-4 right-4 z-50">
|
||||
<div className={`p-4 rounded-md shadow-lg ${
|
||||
notification.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
|
||||
notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
|
||||
"bg-blue-50 text-blue-800 border border-blue-200"
|
||||
}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{notification.message}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setNotification(null)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 4NK Iframe - only show when connected */}
|
||||
{isConnected && <Iframe iframeUrl={iframeUrl} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -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">
|
||||
{/* Partie Droite: Icônes + Profil Utilisateur */}
|
||||
<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">
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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.name.charAt(0)}
|
||||
{userInfo ? 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";
|
||||
})()}
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
<ChevronDown className="h-4 w-4 text-gray-400 ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</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">
|
||||
<Button variant="ghost" size="sm" title="Paramètres">
|
||||
<Settings className="h-5 w-5 text-gray-900 dark:text-gray-100" />
|
||||
</Button>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@ -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 showNotification = (type: "success" | "error" | "info", message: string) => {
|
||||
setNotification({ type, message })
|
||||
setTimeout(() => setNotification(null), 5000)
|
||||
}
|
||||
}, [])
|
||||
|
||||
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) => {
|
||||
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 */}
|
||||
{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"
|
||||
}`}
|
||||
<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"
|
||||
>
|
||||
{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" />}
|
||||
<FolderPlus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="relative mb-4">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
placeholder="Rechercher..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 bg-gray-800 border-gray-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste scrollable */}
|
||||
<div className="flex-1 overflow-y-auto -mr-3 pr-3">
|
||||
{loadingFolders ? (
|
||||
<p className="text-gray-400">Chargement...</p>
|
||||
) : filteredFolders.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">Aucun dossier trouvé.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filteredFolders.map((folder) => (
|
||||
<Card
|
||||
key={folder.folderNumber}
|
||||
className={`transition-shadow bg-gray-800 border border-gray-700 cursor-pointer ${selectedFolder?.folderNumber === folder.folderNumber
|
||||
? 'border-blue-500' // Dossier sélectionné
|
||||
: 'hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => setSelectedFolder(folder)}
|
||||
>
|
||||
<CardContent className="p-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Folder className="h-5 w-5 text-blue-500 flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<h3 className="font-medium text-gray-100 truncate">{folder.name}</h3>
|
||||
{/* ID du dossier supprimé */}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- COLONNE 2: RÉSUMÉ DU DOSSIER (Largeur fixe) --- */}
|
||||
<div className="w-[600px] flex-shrink-0 flex flex-col h-full overflow-y-auto">
|
||||
{!selectedFolder ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-gray-500">Sélectionnez un dossier pour voir le résumé</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Header Colonne 2 */}
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className="text-2xl font-semibold">{selectedFolder.name}</h1>
|
||||
<p className="text-gray-400 mt-2">{selectedFolder.description}</p>
|
||||
{/* Badge ID supprimé */}
|
||||
</div>
|
||||
|
||||
{/* Contenu Colonne 2 */}
|
||||
<div className="flex-1 mt-6 space-y-6">
|
||||
<Card className="bg-gray-800 border-gray-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-medium text-gray-100 flex items-center">
|
||||
<StickyNote className="h-5 w-5 mr-2 text-yellow-400" />
|
||||
Notes du dossier
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{selectedFolder.notes && selectedFolder.notes.length > 0 ? (
|
||||
<ul className="list-disc pl-5 space-y-2">
|
||||
{selectedFolder.notes.map((note, index) => (
|
||||
<li key={index} className="text-gray-300">
|
||||
{note}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-gray-500">Aucune note pour ce dossier.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gray-800 border-gray-700">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-medium text-gray-100 flex items-center">
|
||||
<FileText className="h-5 w-5 mr-2 text-blue-400" />
|
||||
Fichiers
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{selectedFolder.files && selectedFolder.files.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{selectedFolder.files.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
|
||||
<div className="flex items-center space-x-3 min-w-0">
|
||||
<FileText className="h-5 w-5 text-gray-400 flex-shrink-0" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-gray-100 truncate">{file.name || 'Fichier'}</p>
|
||||
<p className="text-xs text-gray-400">{formatBytes(file.size || 0)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500">Aucun fichier dans ce dossier.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* --- COLONNE 3: CHAT (flex-1) --- */}
|
||||
<div className="flex-1 bg-gray-800 border border-gray-700 rounded-lg flex flex-col overflow-hidden h-full">
|
||||
<FolderChat
|
||||
folder={selectedFolder} // Passe le dossier sélectionné (ou null)
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* --- MODALS (hors layout) --- */}
|
||||
{isModalOpen && (
|
||||
<FolderModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSaveNewFolder}
|
||||
onCancel={handleCloseModal}
|
||||
folderType={folderType || "autre"}
|
||||
/>
|
||||
)}
|
||||
{notification && (
|
||||
<div className="fixed top-4 right-4 z-50">
|
||||
<div className={`p-4 rounded-md shadow-lg ${notification.type === "success" ? "bg-green-50 text-green-800 border border-green-200" :
|
||||
notification.type === "error" ? "bg-red-50 text-red-800 border border-red-200" :
|
||||
"bg-blue-50 text-blue-800 border border-blue-200"
|
||||
}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{notification.message}</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => setNotification(null)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* 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>
|
||||
)
|
||||
}
|
||||
@ -1,303 +1,168 @@
|
||||
"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)
|
||||
// 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 conversations: FolderConversation[] = []
|
||||
|
||||
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]
|
||||
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={`${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>
|
||||
</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="flex h-full items-center justify-center bg-gray-800 text-gray-500 p-6">
|
||||
<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
|
||||
<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>
|
||||
)}
|
||||
</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">
|
||||
// Si un dossier EST sélectionné, afficher le chat complet
|
||||
return (
|
||||
<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-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 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-900 dark:text-gray-100">
|
||||
{currentConversation.folderName}
|
||||
<h3 className="font-medium text-gray-100">
|
||||
{folder.name}
|
||||
</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>
|
||||
{/* ID du dossier supprimé */}
|
||||
</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">
|
||||
<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>
|
||||
|
||||
{/* 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"
|
||||
{/* 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'}`}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
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
|
||||
{/* --- LISTE DES MEMBRES (SUPPRIMÉE) --- */}
|
||||
|
||||
{/* 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={`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>
|
||||
|
||||
{/* Message input */}
|
||||
<div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
{/* Input de message */}
|
||||
<div className="p-4 border-t border-gray-700">
|
||||
<div className="flex items-end space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Paperclip className="h-4 w-4" />
|
||||
<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>
|
||||
<div className="flex-1">
|
||||
<Textarea
|
||||
placeholder="Tapez votre message..."
|
||||
placeholder={`Message (${activeTab})...`}
|
||||
value={newMessage}
|
||||
onChange={(e) => setNewMessage(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
@ -307,32 +172,17 @@ export default function FolderChat({
|
||||
}
|
||||
}}
|
||||
rows={1}
|
||||
className="resize-none bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700"
|
||||
className="resize-none flex-1 bg-gray-700 border-gray-700 text-gray-100 placeholder-gray-400 focus:border-blue-500 focus:ring-0"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Smile className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button onClick={handleSendMessage} disabled={!newMessage.trim()}>
|
||||
<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 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
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -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
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