@powerhousedao/network-admin 0.0.64 → 1.0.0-dev.2

package/dist/editors/network-admin/components/DriveExplorer.js

@@ -1,17 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef } from "react";
-import { setSelectedNode, useSelectedDriveSafe, useSelectedFolder, useUserPermissions, useDocumentsInSelectedDrive, useFileNodesInSelectedDrive, useNodeActions, useSelectedDocumentSafe, showDeleteNodeModal, addDocument, dispatchActions, } from "@powerhousedao/reactor-browser";
-import { Button } from "@powerhousedao/document-engineering";
-import { CreateDocumentModal } from "@powerhousedao/design-system/connect";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { Sidebar, SidebarProvider, Button, } from "@powerhousedao/document-engineering";
+import { setSelectedNode, isFileNodeKind, isFolderNodeKind, useNodesInSelectedDriveOrFolder, useSelectedDrive, useSelectedFolder, useUserPermissions, useDocumentsInSelectedDrive, useFileNodesInSelectedDrive, useNodeActions, useSelectedDocument, showDeleteNodeModal, addDocument, showCreateDocumentModal, } from "@powerhousedao/reactor-browser";
+import {} from "document-drive";
 import {} from "document-model";
+import { PaymentIcon } from "./icons/PaymentIcon.js";
+import { RfpIcon } from "./icons/RfpIcon.js";
+import { SowIcon } from "./icons/SowIcon.js";
 import { WorkstreamIcon } from "./icons/WorkstreamIcon.js";
-import { editClientInfo, editWorkstream, } from "../../../document-models/workstream/gen/creators.js";
+import { Earth } from "lucide-react";
+import { CreateDocument } from "./CreateDocument.js";
 import { FolderTree } from "./FolderTree.js";
+const WorkstreamStatusEnums = [
+    "RFP_DRAFT",
+    "PREWORK_RFC",
+    "RFP_CANCELLED",
+    "OPEN_FOR_PROPOSALS",
+    "PROPOSAL_SUBMITTED",
+    "NOT_AWARDED",
+    "AWARDED",
+    "IN_PROGRESS",
+    "FINISHED",
+];
 /**
  * Main drive explorer component with sidebar navigation and content area.
  * Layout: Left sidebar (folder tree) + Right content area (files/folders + document editor)
  */
-export function DriveExplorer({ children }) {
+export function DriveExplorer(props) {
+    const { children } = props;
     const { isAllowedToCreateDocuments } = useUserPermissions();
     // === DOCUMENT EDITOR STATE ===
     const [activeSidebarNodeId, setActiveSidebarNodeId] = useState("workstreams");
@@ -21,19 +37,18 @@ export function DriveExplorer({ children }) {
     const selectedDocumentModel = useRef(null);
     // === STATE MANAGEMENT HOOKS ===
     // Core state hooks for drive navigation
-    const [selectedDrive] = useSelectedDriveSafe(); // Currently selected drive
+    const [selectedDrive] = useSelectedDrive(); // Currently selected drive
     const selectedFolder = useSelectedFolder(); // Currently selected folder
     const allDocuments = useDocumentsInSelectedDrive();
     const fileChildren = useFileNodesInSelectedDrive();
     const { onRenameNode } = useNodeActions();
     // Listen to global selected document state (for external editors like Scope of Work)
-    const [globalSelectedDocument] = useSelectedDocumentSafe();
+    const [globalSelectedDocument] = useSelectedDocument();
     const networkAdminDocuments = allDocuments?.filter((doc) => doc.header.documentType === "powerhouse/network-profile" ||
         doc.header.documentType === "powerhouse/workstream" ||
         doc.header.documentType === "powerhouse/scopeofwork" ||
         doc.header.documentType === "powerhouse/rfp" ||
-        doc.header.documentType === "payment-terms" ||
-        doc.header.documentType === "powerhouse/builders");
+        doc.header.documentType === "payment-terms");
     //check if network profile doc is created, set isNetworkProfileCreated to true
     const isNetworkProfileCreated = networkAdminDocuments?.some((doc) => doc.header.documentType === "powerhouse/network-profile") || false;
     // Sync global selected document with local activeDocumentId
@@ -45,11 +60,186 @@ export function DriveExplorer({ children }) {
     }, [globalSelectedDocument]);
     // Check if current active document is a Scope of Work (should show in full view)
     const isScopeOfWorkFullView = globalSelectedDocument?.header.documentType === "powerhouse/scopeofwork";
+    // Convert network admin documents to SidebarNode format
+    const sidebarNodes = useMemo(() => {
+        // Group documents by type
+        const workstreamDocs = (networkAdminDocuments?.filter((doc) => doc.header.documentType === "powerhouse/workstream") ?? []);
+        const networkProfileDocs = (networkAdminDocuments?.filter((doc) => doc.header.documentType === "powerhouse/network-profile") ?? []);
+        const workstreamsNode = {
+            id: "workstreams",
+            title: "Workstreams",
+            children: [
+                ...WorkstreamStatusEnums.map((status) => {
+                    const statusTitle = status
+                        .toLowerCase()
+                        .split("_")
+                        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                        .join(" ");
+                    return {
+                        id: `workstream-status-${status}`,
+                        title: statusTitle +
+                            (workstreamDocs.filter((doc) => doc.state.global.status === status).length > 0
+                                ? ` (${workstreamDocs.filter((doc) => doc.state.global.status === status).length})`
+                                : ""),
+                        children: workstreamDocs
+                            .filter((doc) => doc.state.global.status === status)
+                            .map((doc) => {
+                            let sow = null;
+                            let paymentTerms = null;
+                            let rfp = null;
+                            if (doc.state.global.initialProposal) {
+                                sow = doc.state.global.initialProposal.sow;
+                                paymentTerms = doc.state.global.initialProposal.paymentTerms;
+                            }
+                            if (doc.state.global.rfp) {
+                                rfp = doc.state.global.rfp.id;
+                            }
+                            const sowDoc = allDocuments?.find((doc) => doc.header.id === sow);
+                            const rfpDoc = allDocuments?.find((doc) => doc.header.id === rfp);
+                            const pmtDoc = allDocuments?.find((doc) => doc.header.id === paymentTerms);
+                            // get alternative proposals
+                            const alternativeProposals = doc.state.global.alternativeProposals;
+                            const returnableChildren = {
+                                id: `editor-${doc.header.id}`,
+                                title: `${doc.state.global.code ? doc.state.global.code + " - " : ""}${doc.state.global.title || doc.header.name}`,
+                                icon: _jsx(WorkstreamIcon, { className: "w-5 h-5" }),
+                                children: rfpDoc
+                                    ? [
+                                        {
+                                            id: `editor-${rfpDoc.header.id}`,
+                                            title: "Request For Proposal",
+                                            icon: _jsx(RfpIcon, { className: "w-5 h-5" }),
+                                        },
+                                    ]
+                                    : [],
+                            };
+                            // if sowDoc or pmtDoc is included in the wstrChildDocs, then add a child with the title "Initial Proposal"
+                            const children = [];
+                            if (sowDoc) {
+                                children.push({
+                                    id: `editor-${sowDoc.header.id}`,
+                                    title: "Scope of Work",
+                                    icon: _jsx(SowIcon, { className: "w-5 h-5" }),
+                                });
+                            }
+                            if (pmtDoc) {
+                                children.push({
+                                    id: `editor-${pmtDoc.header.id}`,
+                                    title: "Payment Terms",
+                                    icon: _jsx(PaymentIcon, { className: "w-5 h-5" }),
+                                });
+                            }
+                            if (children.length) {
+                                returnableChildren.children = [
+                                    ...(returnableChildren.children ?? []),
+                                    {
+                                        id: "initial-proposal",
+                                        title: "Initial Proposal",
+                                        children: children,
+                                    },
+                                ];
+                            }
+                            if (alternativeProposals.length > 0) {
+                                returnableChildren.children = [
+                                    ...(returnableChildren.children ?? []),
+                                    {
+                                        id: "alternative-proposals",
+                                        title: `Alternative Proposals (${alternativeProposals.length})`,
+                                        children: alternativeProposals.map((proposal) => {
+                                            // Find documents for this specific proposal
+                                            const proposalSowDoc = allDocuments?.find((doc) => doc.header.id === proposal.sow);
+                                            const proposalPaymentTermsDoc = allDocuments?.find((doc) => doc.header.id === proposal.paymentTerms);
+                                            // Filter to only include documents that exist
+                                            const proposalChildDocs = [
+                                                proposalSowDoc,
+                                                proposalPaymentTermsDoc,
+                                            ].filter((doc) => doc !== undefined && doc !== null);
+                                            return {
+                                                id: `alternative-proposal-${proposal.id}`,
+                                                title: `${proposal.author.name}`,
+                                                children: proposalChildDocs.map((childDoc) => {
+                                                    const dynamicTitle = childDoc.header.documentType ===
+                                                        "powerhouse/scopeofwork"
+                                                        ? "Scope of Work"
+                                                        : childDoc.header.documentType ===
+                                                            "payment-terms"
+                                                            ? "Payment Terms"
+                                                            : "";
+                                                    return {
+                                                        id: `editor-${childDoc.header.id}`,
+                                                        title: dynamicTitle,
+                                                        icon: childDoc.header.documentType ===
+                                                            "powerhouse/scopeofwork" ? (_jsx(SowIcon, { className: "w-5 h-5" })) : (_jsx(PaymentIcon, { className: "w-5 h-5" })),
+                                                    };
+                                                }),
+                                            };
+                                        }),
+                                    },
+                                ];
+                            }
+                            return returnableChildren;
+                        }),
+                    };
+                }),
+            ],
+        };
+        const networkInfoNode = {
+            id: "network-information",
+            title: "Network Information",
+            children: [
+                // Add network profile documents
+                ...networkProfileDocs.map((doc) => ({
+                    id: `editor-${doc.header.id}`,
+                    title: "Network Profile",
+                    icon: _jsx(Earth, { className: "w-5 h-5" }),
+                })),
+            ],
+        };
+        return [workstreamsNode, networkInfoNode];
+    }, [networkAdminDocuments]);
+    // Handle sidebar node selection
+    const handleActiveNodeChange = useCallback((nodeId) => {
+        console.log("nodeId", nodeId);
+        // Find the node by ID
+        const findNodeById = (nodes, id) => {
+            for (const node of nodes) {
+                if (node.id === id) {
+                    return node;
+                }
+                if (node.children) {
+                    const found = findNodeById(node.children, id);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        const newNode = findNodeById(sidebarNodes, nodeId);
+        if (!newNode)
+            return;
+        // Always update the active sidebar node ID
+        setActiveSidebarNodeId(newNode.id);
+        if (newNode.id === "workstreams") {
+            setSelectedNode(undefined);
+            setSelectedRootNode("workstreams");
+        }
+        else if (newNode.id === "network-information") {
+            setSelectedNode(undefined);
+            setSelectedRootNode("network-information");
+            // Handle network information display
+        }
+        else if (newNode.id.startsWith("editor-")) {
+            // Extract file ID from editor-{file.id} format
+            const fileId = newNode.id.replace("editor-", "");
+            setSelectedNode(fileId);
+        }
+    }, [setSelectedNode, sidebarNodes]);
     // === EVENT HANDLERS ===
     // Display function that switches views based on active node ID
     const displayActiveNode = (activeNodeId) => {
         // Determine the type of node and extract the actual ID
         let nodeType = "unknown";
+        let actualId = activeNodeId;
         if (activeNodeId === "workstreams") {
             nodeType = "workstreams";
         }
@@ -58,23 +248,25 @@ export function DriveExplorer({ children }) {
         }
         else if (activeNodeId.startsWith("editor-")) {
             nodeType = "file";
+            actualId = activeNodeId.replace("editor-", "");
         }
         const networkProfileDoc = networkAdminDocuments?.find((doc) => doc.header.documentType === "powerhouse/network-profile");
         switch (nodeType) {
             case "workstreams":
-                return (_jsx("div", { className: "w-full h-full p-6 overflow-auto", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "space-y-6 flex flex-col items-center justify-center mb-10", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Welcome to the Network Admin" }), isNetworkProfileCreated &&
-                                        networkProfileDoc?.state.global.logo && (_jsxs("div", { className: "bg-white rounded-lg shadow-md border border-gray-300 p-4 max-w-lg mx-auto text-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [networkProfileDoc?.state.global.logo ? (_jsx("img", { src: networkProfileDoc?.state.global.logo, alt: "Network Profile Logo", className: "mb-4 max-w-64 max-h-12 w-auto h-auto object-contain flex-shrink-0" })) : (_jsx("div", {})), _jsx("div", { className: "flex flex-wrap gap-2 justify-end flex-shrink-0", children: networkProfileDoc?.state.global.category.map((category) => (_jsx("span", { className: `inline-flex items-center justify-center rounded-md w-fit whitespace-nowrap shrink-0 border-2 px-2 py-0 text-sm font-extrabold ${category.toLowerCase() === "oss"
+                return (_jsx("div", { className: "w-full h-full p-6 overflow-auto", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "space-y-6 flex flex-col items-center justify-center mb-10", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Welcome to the Network Admin" }), isNetworkProfileCreated && (_jsxs("div", { className: "bg-white rounded-lg shadow-md border border-gray-300 p-4 max-w-lg mx-auto text-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [networkProfileDoc?.state.global.logo ? (_jsx("img", { src: networkProfileDoc?.state.global.logo, alt: "Network Profile Logo", className: "mb-4 max-w-32 max-h-32 sm:max-w-48 sm:max-h-48 md:max-w-64 md:max-h-64 w-auto h-auto object-contain flex-shrink-0" })) : (_jsx("div", {})), _jsx("div", { className: "flex flex-wrap gap-2 justify-end flex-shrink-0", children: networkProfileDoc?.state.global.category.map((category) => (_jsx("span", { className: `inline-flex items-center justify-center rounded-md w-fit whitespace-nowrap shrink-0 border-2 px-2 py-0 text-sm font-extrabold ${category.toLowerCase() === "oss"
                                                                 ? "bg-purple-600/30 text-purple-600 border-purple-600/70"
                                                                 : category.toLowerCase() === "defi"
                                                                     ? "bg-blue-600/30 text-blue-600 border-blue-600/70"
                                                                     : "bg-gray-500/30 text-gray-500 border-gray-500/70"}`, children: category }, category))) })] }), _jsx("p", { className: "mt-4", children: networkProfileDoc?.state.global.description })] })), _jsxs("div", { className: "flex flex-wrap gap-3 justify-center", children: [_jsx(Button, { color: "dark" // Customize button appearance
                                                 , size: "sm", className: "cursor-pointer hover:bg-gray-600 hover:text-white", title: "Create Workstream Document", "aria-description": "Create Workstream Document", onClick: () => {
-                                                    setModalDocumentType("powerhouse/workstream");
-                                                    setOpenModal(true);
+                                                    // setModalDocumentType("powerhouse/workstream");
+                                                    // setOpenModal(true);
+                                                    showCreateDocumentModal("powerhouse/workstream");
                                                 }, disabled: !isNetworkProfileCreated, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(WorkstreamIcon, { className: "w-7 h-7 text-white" }), "Create Workstream Document"] }) }), _jsx(Button, { color: "dark" // Customize button appearance
                                                 , size: "sm", className: "cursor-pointer hover:bg-gray-600 hover:text-white", title: "Create Network Profile Document", "aria-description": "Create Network Profile Document", onClick: () => {
-                                                    setModalDocumentType("powerhouse/network-profile");
-                                                    setOpenModal(true);
+                                                    // setModalDocumentType("powerhouse/network-profile");
+                                                    // setOpenModal(true);
+                                                    showCreateDocumentModal("powerhouse/network-profile");
                                                 }, disabled: isNetworkProfileCreated, children: _jsx("span", { className: "flex items-center gap-2", children: "Create Network Profile Document" }) })] })] }), networkAdminDocuments && networkAdminDocuments.length > 0 && (_jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-4 text-lg font-medium text-gray-700", children: "\uD83D\uDCC4 Documents" }), _jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200 shadow-sm", children: _jsxs("table", { className: "w-full bg-white", children: [_jsx("thead", { className: "bg-gray-50", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4", children: "Name" }), _jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4", children: "Type" }), _jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4", children: "Actions" })] }) }), _jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: networkAdminDocuments.map((document) => {
                                                         // Find the corresponding file node for actions
                                                         const fileNode = fileChildren?.find((file) => file.id === document.header.id);
@@ -125,20 +317,24 @@ export function DriveExplorer({ children }) {
                 return;
             }
             if (documentType === "powerhouse/workstream") {
-                const networkProfileDoc = networkAdminDocuments?.find((doc) => doc.header.documentType === "powerhouse/network-profile");
-                const actionsToDispatch = [
-                    editWorkstream({ title: fileName }),
-                    editClientInfo({
-                        clientId: networkProfileDoc?.header.id || "",
-                        name: networkProfileDoc?.state.global.name || "",
-                        icon: networkProfileDoc?.state.global.icon || "",
-                    }),
-                ];
-                await dispatchActions(actionsToDispatch, node.id);
+                // const networkProfileDoc = networkAdminDocuments?.find(
+                //   (doc) => doc.header.documentType === "powerhouse/network-profile"
+                // ) as NetworkProfileDocument | undefined;
+                // const actionsToDispatch = [
+                //   editWorkstream({ title: fileName }),
+                //   editClientInfo({
+                //     clientId: networkProfileDoc?.header.id || "",
+                //     name: networkProfileDoc?.state.global.name || "",
+                //     icon: networkProfileDoc?.state.global.icon || "",
+                //   }),
+                // ];
+                // await dispatchActions(actionsToDispatch, node.id);
             }
             selectedDocumentModel.current = null;
             console.log("Created document node", node);
             if (node) {
+                // Customize: Auto-open created document by uncommenting below
+                // setActiveDocumentId(node.id);
                 // Refresh the sidebar by triggering a re-render
                 // Set the root node based on the document type that was created
                 if (documentType === "powerhouse/network-profile") {
@@ -152,33 +348,14 @@ export function DriveExplorer({ children }) {
         catch (error) {
             console.error("Failed to create document:", error);
         }
-    }, [selectedDrive?.header.id, modalDocumentType, networkAdminDocuments]);
-    // Create builders document
-    const createBuildersDocument = useCallback(async () => {
-        try {
-            const isCreated = allDocuments?.some((doc) => doc.header.documentType === "powerhouse/builders");
-            if (isCreated) {
-                return;
-            }
-            else {
-                console.log("Creating builders document");
-                const node = await addDocument(selectedDrive?.header.id || "", "Builders", "powerhouse/builders", undefined, // creating in root folder
-                undefined, undefined, "builders-editor");
-                if (!node?.id) {
-                    console.error("Error creating builders document");
-                    return;
-                }
-                return node;
-            }
-        }
-        catch (error) {
-            console.error("Failed to create builders document:", error);
-            return null;
-        }
-    }, [selectedDrive?.header.id, allDocuments]);
+    }, [selectedDrive?.header.id, modalDocumentType]);
     // === RENDER ===
-    return (_jsx("div", { className: "h-full", children: isScopeOfWorkFullView && children ? (_jsx("div", { className: "h-full w-full", children: children })) : (
+    return (_jsx(SidebarProvider, { nodes: sidebarNodes, children: isScopeOfWorkFullView && props.children ? (_jsx("div", { className: "h-full w-full", children: props.children })) : (
         /* === NORMAL VIEW WITH SIDEBAR === */
-        _jsxs("div", { className: "flex h-full", children: [_jsx(FolderTree, { activeSidebarNodeId: activeSidebarNodeId, setActiveSidebarNodeId: setActiveSidebarNodeId, setSelectedRootNode: setSelectedRootNode, createBuildersDocument: createBuildersDocument }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("div", { className: "h-full", children: children ||
-                            displayActiveNode(selectedFolder?.id || selectedRootNode) }) }), _jsx(CreateDocumentModal, { onContinue: onCreateDocument, onOpenChange: (open) => setOpenModal(open), open: openModal })] })) }));
+        _jsxs("div", { className: "flex h-full", children: [_jsx(Sidebar, { nodes: sidebarNodes, activeNodeId: activeSidebarNodeId, onActiveNodeChange: (node) => handleActiveNodeChange(node.id), sidebarTitle: "Network Admin", showSearchBar: true, allowPinning: true, resizable: true, initialWidth: 300, maxWidth: 500, enableMacros: 4, handleOnTitleClick: () => {
+                        setSelectedNode(undefined);
+                        setActiveSidebarNodeId("workstreams");
+                        setSelectedRootNode("workstreams");
+                    } }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("div", { className: "h-full", children: props.children ||
+                            displayActiveNode(selectedFolder?.id || selectedRootNode) }) })] })) }));
 }

package/dist/editors/network-admin/components/FolderTree.d.ts

@@ -1,14 +1,6 @@
-import type { FileNode } from "document-drive";
-interface FolderTreeProps {
-    activeSidebarNodeId: string;
-    setActiveSidebarNodeId: (id: string) => void;
-    setSelectedRootNode: (node: string) => void;
-    createBuildersDocument: () => Promise<FileNode | null | undefined>;
-}
 /**
  * Hierarchical folder tree navigation component using Sidebar from document-engineering.
  * Displays folders and files in a tree structure with expand/collapse functionality, search, and resize support.
  */
-export declare function FolderTree({ activeSidebarNodeId, setActiveSidebarNodeId, setSelectedRootNode, createBuildersDocument, }: FolderTreeProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function FolderTree(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FolderTree.d.ts.map

package/dist/editors/network-admin/components/FolderTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../../../editors/network-admin/components/FolderTree.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AA0B/C,UAAU,eAAe;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,sBAAsB,EAAE,MAAM,OAAO,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACpE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,mBAAmB,EACnB,sBAAsB,GACvB,EAAE,eAAe,2CA+QjB"}
+{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../../../editors/network-admin/components/FolderTree.tsx"],"names":[],"mappings":"AAyDA;;;GAGG;AACH,wBAAgB,UAAU,4CA0CzB"}