Deleted all the file in /dashboard/folder
This commit is contained in:
parent
bfe2c5b7ff
commit
d0539aad62
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user