From 22a1052080f34705f8dd7f246c88aad87b654619 Mon Sep 17 00:00:00 2001
From: Omar Oughriss <omaroughriss8@gmail.com>
Date: Fri, 24 Oct 2025 17:05:54 +0200
Subject: [PATCH] Add Chat for each Folder

---
 app/dashboard/folders/page.tsx | 209 ++++++++++++++++++++-------------
 1 file changed, 126 insertions(+), 83 deletions(-)

diff --git a/app/dashboard/folders/page.tsx b/app/dashboard/folders/page.tsx
index ee1f499..5579f72 100644
--- a/app/dashboard/folders/page.tsx
+++ b/app/dashboard/folders/page.tsx
@@ -14,6 +14,8 @@ import {
   SortAsc,
   SortDesc,
   X,
+  MessageSquare,
+  List,
 } from "lucide-react"
 import { FolderData, FolderCreated, FolderPrivateFields, setDefaultFolderRoles } from "@/lib/4nk/models/FolderData"
 import MessageBus from "@/lib/4nk/MessageBus"
@@ -22,6 +24,7 @@ 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';
 
@@ -32,6 +35,7 @@ export default function FoldersPage() {
   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)
@@ -356,103 +360,142 @@ export default function FoldersPage() {
             </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
-                onClick={() => handleOpenModal("autre")}
-                disabled={!isConnected}
+                variant={activeTab === "folders" ? "default" : "ghost"}
+                size="sm"
+                onClick={() => setActiveTab("folders")}
                 className="flex items-center space-x-2"
               >
-                <FolderPlus className="h-4 w-4" />
-                <span>Nouveau dossier</span>
+                <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 */}
-          <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"
-              />
+          {/* 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 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 p-6 bg-gray-900">
-          {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 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>
-                        </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>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                </div>
+              )}
             </div>
+          ) : (
+            <FolderChat
+              heightClass="h-full"
+              folderProcesses={folderProcesses}
+              myFolderProcesses={myFolderProcesses}
+              folderPrivateData={folderPrivateData}
+            />
           )}
         </div>
       </div>