Added type in CreateFolder function

app/dashboard/folders/page.tsx

@@ -56,6 +56,8 @@ import Iframe from "@/components/4nk/Iframe"
 import MessageBus from "@/lib/4nk/MessageBus"
 import EventBus from "@/lib/4nk/EventBus"
 import UserStore from "@/lib/4nk/UserStore"
+import ProcessesViewer from "@/components/ProcessesViewer"
+import { iframeUrl } from "@/app/page"
 
 interface FolderData {
   id: number
@@ -110,16 +112,16 @@ interface FolderData {
 
 interface ActionModal {
   type:
-    | "invite"
+  | "invite"
-    | "delete"
+  | "delete"
-    | "create"
+  | "create"
-    | "edit"
+  | "edit"
-    | "archive"
+  | "archive"
-    | "request_document"
+  | "request_document"
-    | "storage_config"
+  | "storage_config"
-    | "certificate"
+  | "certificate"
-    | "documents_certificates"
+  | "documents_certificates"
-    | null
+  | null
   folder: FolderData | null
   folders: FolderData[]
 }
@@ -151,6 +153,8 @@ interface Role {
   level: "folder" | "space" | "global"
 }
 
+type FolderType = "contrat" | "projet" | "rapport" | "finance" | "rh" | "marketing";
+
 export default function FoldersPage() {
   const router = useRouter()
   const [viewMode, setViewMode] = useState<'list'>('list')
@@ -165,6 +169,9 @@ export default function FoldersPage() {
   const [currentPath, setCurrentPath] = useState<string[]>(["Racine"])
   const [actionModal, setActionModal] = useState<ActionModal>({ type: null, folder: null, folders: [] })
   const [showCreateFolderModal, setShowCreateFolderModal] = useState(false)
+  const [folderType, setFolderType] = useState<FolderType | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
 
   // 4NK Integration states
   const [isConnected, setIsConnected] = useState(false)
@@ -173,7 +180,6 @@ export default function FoldersPage() {
   const [myProcesses, setMyProcesses] = useState<string[]>([])
   const [userPairingId, setUserPairingId] = useState<string | null>(null)
   const [pairingIdInitialized, setPairingIdInitialized] = useState(false)
-  const iframeUrl = 'https://dev3.4nkweb.com'
 
   // Modal states
   const [inviteMessage, setInviteMessage] = useState("")
@@ -355,7 +361,7 @@ export default function FoldersPage() {
         });
       });
     }
-  }, [isConnected]);
+  }, [isConnected, iframeUrl]);
 
   useEffect(() => {
     if (isConnected && processes !== null) {
@@ -708,7 +714,7 @@ export default function FoldersPage() {
     }
 
     loadFolders()
-  }, [])
+  }, []);
 
   // Notification system
   const showNotification = (type: "success" | "error" | "info", message: string) => {
@@ -735,6 +741,7 @@ export default function FoldersPage() {
   }, []);
 
   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");
@@ -867,42 +874,42 @@ export default function FoldersPage() {
       () => {
         const analysisResults = [
           `📊 **Analyse du dossier "${folder.name}"**\n\n` +
-            `**Contenu :** ${folder.documentsCount} documents analysés (${folder.size})\n` +
+          `**Contenu :** ${folder.documentsCount} documents analysés (${folder.size})\n` +
-            `**Thématiques principales :** ${folder.tags.join(", ")}\n` +
+          `**Thématiques principales :** ${folder.tags.join(", ")}\n` +
-            `**Niveau d'activité :** ${folder.activity.length > 2 ? "Élevé" : "Modéré"} (dernière modification ${formatDate(folder.modified)})\n\n` +
+          `**Niveau d'activité :** ${folder.activity.length > 2 ? "Élevé" : "Modéré"} (dernière modification ${formatDate(folder.modified)})\n\n` +
-            `**Recommandations :**\n` +
+          `**Recommandations :**\n` +
-            `• ${folder.storageType === "temporary" ? "Considérer l'archivage vers le stockage permanent" : "Dossier déjà archivé de manière optimale"}\n` +
+          `• ${folder.storageType === "temporary" ? "Considérer l'archivage vers le stockage permanent" : "Dossier déjà archivé de manière optimale"}\n` +
-            `• ${folder.access === "private" ? "Évaluer les possibilités de partage avec l'équipe" : "Partage actuel avec " + folder.members.length + " membre(s)"}\n` +
+          `• ${folder.access === "private" ? "Évaluer les possibilités de partage avec l'équipe" : "Partage actuel avec " + folder.members.length + " membre(s)"}\n` +
-            `• Dernière activité significative détectée il y a ${Math.floor(Math.random() * 7) + 1} jour(s)\n\n` +
+          `• Dernière activité significative détectée il y a ${Math.floor(Math.random() * 7) + 1} jour(s)\n\n` +
-            `**Score de pertinence :** ${Math.floor(Math.random() * 30) + 70}/100`,
+          `**Score de pertinence :** ${Math.floor(Math.random() * 30) + 70}/100`,
 
           `🔍 **Analyse approfondie du dossier "${folder.name}"**\n\n` +
-            `**Structure documentaire :**\n` +
+          `**Structure documentaire :**\n` +
-            `• ${Math.floor(folder.documentsCount * 0.4)} documents principaux\n` +
+          `• ${Math.floor(folder.documentsCount * 0.4)} documents principaux\n` +
-            `• ${Math.floor(folder.documentsCount * 0.3)} documents de support\n` +
+          `• ${Math.floor(folder.documentsCount * 0.3)} documents de support\n` +
-            `• ${Math.floor(folder.documentsCount * 0.3)} documents annexes\n\n` +
+          `• ${Math.floor(folder.documentsCount * 0.3)} documents annexes\n\n` +
-            `**Analyse temporelle :**\n` +
+          `**Analyse temporelle :**\n` +
-            `• Création : ${folder.created.toLocaleDateString("fr-FR")}\n` +
+          `• Création : ${folder.created.toLocaleDateString("fr-FR")}\n` +
-            `• Pic d'activité détecté en ${new Date().toLocaleDateString("fr-FR", { month: "long", year: "numeric" })}\n` +
+          `• Pic d'activité détecté en ${new Date().toLocaleDateString("fr-FR", { month: "long", year: "numeric" })}\n` +
-            `• Tendance : ${Math.random() > 0.5 ? "Croissante" : "Stable"}\n\n` +
+          `• Tendance : ${Math.random() > 0.5 ? "Croissante" : "Stable"}\n\n` +
-            `**Recommandations stratégiques :**\n` +
+          `**Recommandations stratégiques :**\n` +
-            `• ${folder.documentsCount > 50 ? "Envisager une réorganisation en sous-dossiers" : "Structure actuelle optimale"}\n` +
+          `• ${folder.documentsCount > 50 ? "Envisager une réorganisation en sous-dossiers" : "Structure actuelle optimale"}\n` +
-            `• ${folder.members.length < 3 ? "Potentiel de collaboration à explorer" : "Équipe collaborative active"}\n` +
+          `• ${folder.members.length < 3 ? "Potentiel de collaboration à explorer" : "Équipe collaborative active"}\n` +
-            `• Prochaine révision recommandée : ${new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toLocaleDateString("fr-FR")}`,
+          `• Prochaine révision recommandée : ${new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toLocaleDateString("fr-FR")}`,
 
           `🎯 **Insights IA pour "${folder.name}"**\n\n` +
-            `**Analyse sémantique :**\n` +
+          `**Analyse sémantique :**\n` +
-            `• Cohérence thématique : ${Math.floor(Math.random() * 20) + 80}%\n` +
+          `• Cohérence thématique : ${Math.floor(Math.random() * 20) + 80}%\n` +
-            `• Mots-clés dominants : ${folder.tags.slice(0, 3).join(", ")}\n` +
+          `• Mots-clés dominants : ${folder.tags.slice(0, 3).join(", ")}\n` +
-            `• Complexité moyenne : ${["Faible", "Modérée", "Élevée"][Math.floor(Math.random() * 3)]}\n\n` +
+          `• Complexité moyenne : ${["Faible", "Modérée", "Élevée"][Math.floor(Math.random() * 3)]}\n\n` +
-            `**Patterns détectés :**\n` +
+          `**Patterns détectés :**\n` +
-            `• ${Math.random() > 0.5 ? "Cycle de révision régulier identifié" : "Activité sporadique détectée"}\n` +
+          `• ${Math.random() > 0.5 ? "Cycle de révision régulier identifié" : "Activité sporadique détectée"}\n` +
-            `• ${Math.random() > 0.5 ? "Collaboration inter-équipes active" : "Usage principalement individuel"}\n` +
+          `• ${Math.random() > 0.5 ? "Collaboration inter-équipes active" : "Usage principalement individuel"}\n` +
-            `• ${folder.storageType === "permanent" ? "Archivage conforme aux bonnes pratiques" : "Optimisation de stockage possible"}\n\n` +
+          `• ${folder.storageType === "permanent" ? "Archivage conforme aux bonnes pratiques" : "Optimisation de stockage possible"}\n\n` +
-            `**Actions suggérées :**\n` +
+          `**Actions suggérées :**\n` +
-            `• ${Math.random() > 0.5 ? "Créer un template basé sur ce dossier" : "Standardiser la nomenclature"}\n` +
+          `• ${Math.random() > 0.5 ? "Créer un template basé sur ce dossier" : "Standardiser la nomenclature"}\n` +
-            `• ${Math.random() > 0.5 ? "Planifier une session de nettoyage" : "Maintenir la structure actuelle"}\n` +
+          `• ${Math.random() > 0.5 ? "Planifier une session de nettoyage" : "Maintenir la structure actuelle"}\n` +
-            `• Prochaine analyse automatique : ${new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toLocaleDateString("fr-FR")}`,
+          `• Prochaine analyse automatique : ${new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toLocaleDateString("fr-FR")}`,
         ]
 
         const randomAnalysis = analysisResults[Math.floor(Math.random() * analysisResults.length)]
@@ -960,52 +967,65 @@ export default function FoldersPage() {
     setActionModal({ type: "delete", folder, folders: [] })
   }
 
-  const handleCreateFolder = () => {
+  const handleOpenModal = (type: FolderType) => {
-    setShowCreateFolderModal(true)
+    setFolderType(type);
-  }
+    setIsModalOpen(true);
+    setMenuOpen(false);
+  };
 
-  const handleSaveNewFolder = useCallback((folderData: SDKFolderData) => {
+  const handleCloseModal = () => {
-    console.log('Debug - handleSaveNewFolder:', {
+    setIsModalOpen(false);
-      isConnected,
+    setFolderType(null);
-      userPairingId,
+  };
-      userPairingIdType: typeof userPairingId,
+
-      userStoreConnected: UserStore.getInstance().isConnected(),
+  const handleSaveNewFolder = useCallback(
-      userStorePairingId: UserStore.getInstance().getUserPairingId()
+    (folderData: SDKFolderData) => {
-    });
+      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;
+      }
+
+      // Ajout du type dans les données du dossier
+      const folderToCreate = {
+        ...folderData,
+        type: folderType
+      };
 
-    if (userPairingId !== null && isConnected) {
       const roles = setDefaultFolderRoles(userPairingId, [], []);
       const folderPrivateFields = FolderPrivateFields;
 
-      MessageBus.getInstance(iframeUrl).createFolder(folderData, folderPrivateFields, roles).then((_folderCreated: FolderCreated) => {
+      MessageBus.getInstance(iframeUrl)
-        MessageBus.getInstance(iframeUrl).notifyProcessUpdate(_folderCreated.processId, _folderCreated.process.states[0].state_id).then(() => {
+        .createFolder(folderToCreate, folderPrivateFields, roles)
-          MessageBus.getInstance(iframeUrl).validateState(_folderCreated.processId, _folderCreated.process.states[0].state_id).then((_updatedProcess: any) => {
+        .then((_folderCreated: FolderCreated) => {
-            MessageBus.getInstance(iframeUrl).getProcesses().then((processes: any) => {
+          const firstStateId = _folderCreated.process.states[0].state_id;
-              setProcesses(processes);
+          MessageBus.getInstance(iframeUrl)
-            });
+            .notifyProcessUpdate(_folderCreated.processId, firstStateId)
-          });
+            .then(() =>
+              MessageBus.getInstance(iframeUrl)
+                .validateState(_folderCreated.processId, firstStateId)
+                .then(() =>
+                  MessageBus.getInstance(iframeUrl)
+                    .getProcesses()
+                    .then(async (processes: any) => {
+                      setProcesses(processes)
+                    })
+                )
+            );
+
+          setShowCreateFolderModal(false);
+          showNotification("success", `Dossier "${folderData.name}" créé avec succès sur 4NK`);
         })
-      }).catch((error) => {
+        .catch((error) => {
-        console.error('Erreur lors de la création du dossier 4NK:', error);
+          console.error('Erreur lors de la création du dossier 4NK:', error);
-        showNotification("error", "Erreur lors de la création du dossier");
+          showNotification("error", "Erreur lors de la création du dossier");
-      });
+        });
-
+    },
-      setShowCreateFolderModal(false);
+    [userPairingId, isConnected, iframeUrl, folderType]
-      showNotification("success", `Dossier "${folderData.name}" créé avec succès sur 4NK`);
+  );
-    } else {
-      console.error('Conditions non remplies:', {
-        userPairingIdCheck: userPairingId !== null,
-        isConnectedCheck: isConnected,
-        actualUserPairingId: userPairingId,
-        actualIsConnected: isConnected
-      });
-      showNotification("error", `Vous devez être connecté à 4NK pour créer un dossier (Connected: ${isConnected}, PairingId: ${userPairingId ? 'OK' : 'NULL'})`);
-    }
-  }, [userPairingId, isConnected, iframeUrl]);
-
-  const handleCancelCreateFolder = () => {
-    setShowCreateFolderModal(false)
-  }
 
   const handleToggleFavorite = (folderId: number) => {
     const folder = folders.find((f) => f.id === folderId)
@@ -1233,10 +1253,10 @@ export default function FoldersPage() {
         prev.map((f) =>
           folderIds.includes(f.id)
             ? {
-                ...f,
+              ...f,
-                storageType: "permanent" as const,
+              storageType: "permanent" as const,
-                modified: new Date(),
+              modified: new Date(),
-              }
+            }
             : f,
         ),
       )
@@ -1451,13 +1471,12 @@ export default function FoldersPage() {
       {/* Notification */}
       {notification && (
         <div
-          className={`fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg flex items-center space-x-2 ${
+          className={`fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg flex items-center space-x-2 ${notification.type === "success"
-            notification.type === "success"
+            ? "bg-green-100 text-green-800 border border-green-200"
-              ? "bg-green-100 text-green-800 border border-green-200"
+            : notification.type === "error"
-              : notification.type === "error"
+              ? "bg-red-100 text-red-800 border border-red-200"
-                ? "bg-red-100 text-red-800 border border-red-200"
+              : "bg-blue-100 text-blue-800 border border-blue-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" />}
@@ -1495,23 +1514,45 @@ export default function FoldersPage() {
             <Upload className="h-4 w-4 mr-2" />
             Importer
           </Button>
+
           {isConnected ? (
-            <>
+            <div className="flex gap-2">
-              <Button size="sm" onClick={handleCreateFolder}>
+              {/* Nouveau dossier avec menu */}
-                <FolderPlus className="h-4 w-4 mr-2" />
+              <div className="relative">
-                Nouveau dossier
+                <Button size="sm" onClick={() => setMenuOpen(!menuOpen)}>
-              </Button>
+                  <FolderPlus className="h-4 w-4 mr-2" />
+                  Nouveau dossier
+                </Button>
+
+                {menuOpen && (
+                  <div className="absolute mt-1 right-0 w-48 bg-white border border-gray-200 rounded shadow-lg z-50">
+                    {['contrat', 'projet', 'rapport', 'finance', 'rh', 'marketing'].map((type) => (
+                      <button
+                        key={type}
+                        className="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-100"
+                        onClick={() => handleOpenModal(type as FolderType)}
+                      >
+                        {type.charAt(0).toUpperCase() + type.slice(1)}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Déconnexion */}
               <Button variant="outline" size="sm" onClick={handleLogout}>
                 <X className="h-4 w-4 mr-2" />
                 Déconnexion 4NK
               </Button>
+
+              {/* Debug PairingId */}
               {!userPairingId && (
                 <Button variant="outline" size="sm" onClick={handleForceGetPairingId}>
                   <Brain className="h-4 w-4 mr-2" />
                   Debug PairingId
                 </Button>
               )}
-            </>
+            </div>
           ) : (
             <Button variant="outline" size="sm" onClick={handleLogin}>
               <Shield className="h-4 w-4 mr-2" />
@@ -1581,7 +1622,6 @@ export default function FoldersPage() {
                   {sortOrder === "asc" ? <SortAsc className="h-4 w-4" /> : <SortDesc className="h-4 w-4" />}
                 </Button>
               </div>
-
               {/* Vue grille supprimée: forcer la vue liste uniquement */}
             </div>
           </div>
@@ -1771,7 +1811,7 @@ export default function FoldersPage() {
       )}
 
       {/* Folders List/Grid */}
-      <Card>
+      {/* <Card>
         <CardContent className="p-0">
           {viewMode === "list" ? (
             <div className="overflow-x-auto">
@@ -1847,9 +1887,8 @@ export default function FoldersPage() {
                 {filteredFolders.map((folder) => (
                   <div
                     key={folder.id}
-                    className={`relative group border rounded-lg p-6 hover:shadow-md transition-shadow cursor-pointer ${
+                    className={`relative group border rounded-lg p-6 hover:shadow-md transition-shadow cursor-pointer ${selectedFolders.includes(folder.id) ? "bg-blue-50 border-blue-200" : "bg-white"
-                      selectedFolders.includes(folder.id) ? "bg-blue-50 border-blue-200" : "bg-white"
+                      }`}
-                    }`}
                     onClick={() => handleOpenFolder(folder)}
                   >
                     <div className="absolute top-4 left-4" onClick={(e) => e.stopPropagation()}>
@@ -1948,7 +1987,7 @@ export default function FoldersPage() {
                       </div>
                     </div>
 
-                    {/* Recent Activity */}
+                     Recent Activity 
                     <div className="mt-4 pt-4 border-t">
                       <h4 className="text-xs font-medium text-gray-700 mb-2">Activité récente</h4>
                       <div className="space-y-1">
@@ -1976,13 +2015,25 @@ export default function FoldersPage() {
                   ? "Essayez de modifier vos critères de recherche"
                   : "Commencez par créer votre premier dossier"}
               </p>
-              <Button onClick={handleCreateFolder}>
-                <FolderPlus className="h-4 w-4 mr-2" />
-                Nouveau dossier
-              </Button>
             </div>
           )}
         </CardContent>
+      </Card> */}
+
+      {/* ProcessesViewer Card */}
+      <Card className="mt-6">
+        <CardContent className="p-4">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">Processus Blockchain</h3>
+
+          {/* Intégration du ProcessesViewer */}
+          <div className="w-full h-[500px]">
+            <ProcessesViewer
+              processes={processes}
+              myProcesses={myProcesses}
+              onProcessesUpdate={setProcesses}
+            />
+          </div>
+        </CardContent>
       </Card>
 
       {/* Modals */}
@@ -2548,13 +2599,16 @@ export default function FoldersPage() {
         </div>
       )}
 
-      {/* Folder Creation Modal */}
+      {/* Modal */}
-      <FolderModal
+      {folderType && (
-        isOpen={showCreateFolderModal}
+        <FolderModal
-        onClose={handleCancelCreateFolder}
+          isOpen={isModalOpen}
-        onSave={handleSaveNewFolder}
+          onClose={handleCloseModal}
-        onCancel={handleCancelCreateFolder}
+          onSave={handleSaveNewFolder}
-      />
+          onCancel={handleCloseModal}
+          folderType={folderType}
+        />
+      )}
 
       {/* 4NK Authentication Modal */}
       <AuthModal