@powerhousedao/contributor-billing 0.1.29 → 0.1.30

package/dist/editors/clean-new-editor/components/FolderTree.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar, SidebarProvider, } from "@powerhousedao/document-engineering";
+import { setSelectedNode, useNodesInSelectedDrive, useSelectedDrive, useSelectedNode, } from "@powerhousedao/reactor-browser";
+import { useMemo } from "react";
+function buildSidebarNodes(nodes, parentId) {
+    return nodes
+        .filter((n) => {
+        if (parentId == null) {
+            return n.parentFolder == null;
+        }
+        return n.parentFolder === parentId;
+    })
+        .map((node) => {
+        if (node.kind === "folder") {
+            return {
+                id: node.id,
+                title: node.name,
+                icon: "FolderClose",
+                expandedIcon: "FolderOpen",
+                children: buildSidebarNodes(nodes, node.id),
+            };
+        }
+        return {
+            id: node.id,
+            title: node.name,
+            icon: "File",
+        };
+    });
+}
+function transformNodesToSidebarNodes(nodes, driveName) {
+    return [
+        {
+            id: "root",
+            title: driveName,
+            icon: "Drive",
+            children: buildSidebarNodes(nodes, null),
+        },
+    ];
+}
+/**
+ * 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 function FolderTree() {
+    const [selectedDrive] = useSelectedDrive();
+    const nodes = useNodesInSelectedDrive();
+    const selectedNode = useSelectedNode();
+    const driveName = selectedDrive.header.name;
+    // Transform Node[] to hierarchical SidebarNode structure
+    const sidebarNodes = useMemo(() => transformNodesToSidebarNodes(nodes || [], driveName), [nodes, driveName]);
+    const handleActiveNodeChange = (node) => {
+        // If root node is selected, pass undefined to match existing behavior
+        if (node.id === "root") {
+            setSelectedNode(undefined);
+        }
+        else {
+            setSelectedNode(node.id);
+        }
+    };
+    // Map selectedNodeId to activeNodeId (use "root" when undefined)
+    const activeNodeId = !selectedNode || selectedNode.id === selectedDrive.header.id
+        ? "root"
+        : selectedNode.id;
+    return (_jsx(SidebarProvider, { nodes: sidebarNodes, children: _jsx(Sidebar, { className: "pt-1", nodes: sidebarNodes, activeNodeId: activeNodeId, onActiveNodeChange: handleActiveNodeChange, sidebarTitle: "Drive Explorer", showSearchBar: true, resizable: true, allowPinning: false, showStatusFilter: false, initialWidth: 256, defaultLevel: 2 }) }));
+}

package/dist/editors/clean-new-editor/components/Folders.d.ts

@@ -0,0 +1,3 @@
+/** Shows the folders in the selected drive or folder */
+export declare function Folders(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Folders.d.ts.map

package/dist/editors/clean-new-editor/components/Folders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Folders.d.ts","sourceRoot":"","sources":["../../../../editors/clean-new-editor/components/Folders.tsx"],"names":[],"mappings":"AAMA,wDAAwD;AACxD,wBAAgB,OAAO,mDAgBtB"}

package/dist/editors/clean-new-editor/components/Folders.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FolderItem } from "@powerhousedao/design-system/connect";
+import { useNodesInSelectedDriveOrFolder, isFolderNodeKind, } from "@powerhousedao/reactor-browser";
+/** Shows the folders in the selected drive or folder */
+export function Folders() {
+    const nodes = useNodesInSelectedDriveOrFolder();
+    const folderNodes = nodes.filter((n) => isFolderNodeKind(n));
+    const hasFolders = folderNodes.length > 0;
+    if (!hasFolders)
+        return null;
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-bold text-gray-600", children: "Folders" }), _jsx("div", { className: "flex flex-wrap gap-4", children: folderNodes.map((folderNode) => (_jsx(FolderItem, { folderNode: folderNode }, folderNode.id))) })] }));
+}

package/dist/editors/clean-new-editor/components/NavigationBreadcrumbs.d.ts

@@ -0,0 +1,3 @@
+/** Shows the navigation breadcrumbs for the selected drive or folder */
+export declare function NavigationBreadcrumbs(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NavigationBreadcrumbs.d.ts.map

package/dist/editors/clean-new-editor/components/NavigationBreadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../editors/clean-new-editor/components/NavigationBreadcrumbs.tsx"],"names":[],"mappings":"AAEA,wEAAwE;AACxE,wBAAgB,qBAAqB,4CAMpC"}

package/dist/editors/clean-new-editor/components/NavigationBreadcrumbs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumbs } from "@powerhousedao/design-system/connect";
+/** Shows the navigation breadcrumbs for the selected drive or folder */
+export function NavigationBreadcrumbs() {
+    return (_jsx("div", { className: "border-b border-gray-200 pb-3 space-y-3", children: _jsx(Breadcrumbs, {}) }));
+}

package/dist/editors/clean-new-editor/config.d.ts

@@ -0,0 +1,4 @@
+import type { PHDriveEditorConfig } from "@powerhousedao/reactor-browser";
+/** Editor config for the CleanNewEditor */
+export declare const editorConfig: PHDriveEditorConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/editors/clean-new-editor/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../editors/clean-new-editor/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAE1E,2CAA2C;AAC3C,eAAO,MAAM,YAAY,EAAE,mBAG1B,CAAC"}

package/dist/editors/clean-new-editor/config.js

@@ -0,0 +1,5 @@
+/** Editor config for the CleanNewEditor */
+export const editorConfig = {
+    isDragAndDropEnabled: true,
+    allowedDocumentTypes: [],
+};

package/dist/editors/clean-new-editor/editor.d.ts

@@ -0,0 +1,4 @@
+import type { EditorProps } from "document-model";
+/** Editor component for the CleanNewEditor drive editor */
+export default function Editor(props: EditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

package/dist/editors/clean-new-editor/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/clean-new-editor/editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,2DAA2D;AAC3D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,2CAKhD"}

package/dist/editors/clean-new-editor/editor.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSetPHDriveEditorConfig } from "@powerhousedao/reactor-browser";
+import { DriveExplorer } from "./components/DriveExplorer.js";
+import { editorConfig } from "./config.js";
+/** Editor component for the CleanNewEditor drive editor */
+export default function Editor(props) {
+    // set the config for this drive editor
+    // you can update these configs in `./config.ts`
+    useSetPHDriveEditorConfig(editorConfig);
+    return _jsx(DriveExplorer, { ...props });
+}

package/dist/editors/clean-new-editor/module.d.ts

@@ -0,0 +1,3 @@
+import { type EditorModule } from "document-model";
+export declare const CleanNewEditor: EditorModule;
+//# sourceMappingURL=module.d.ts.map

package/dist/editors/clean-new-editor/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../editors/clean-new-editor/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,eAAO,MAAM,cAAc,EAAE,YAO5B,CAAC"}

package/dist/editors/clean-new-editor/module.js

@@ -0,0 +1,10 @@
+import {} from "document-model";
+import { lazy } from "react";
+export const CleanNewEditor = {
+    Component: lazy(() => import("./editor.js")),
+    documentTypes: ["powerhouse/document-drive"],
+    config: {
+        id: "clean-new-editor",
+        name: "clean-new-editor",
+    },
+};

package/dist/editors/contributor-billing/components/ConfirmationModal.d.ts

@@ -0,0 +1,14 @@
+import type React from "react";
+interface ConfirmationModalProps {
+    open: boolean;
+    header: React.ReactNode;
+    onCancel: () => void;
+    onContinue: () => void;
+    cancelLabel?: string;
+    continueLabel?: string;
+    children?: React.ReactNode;
+    continueDisabled?: boolean;
+}
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps>;
+export {};
+//# sourceMappingURL=ConfirmationModal.d.ts.map

package/dist/editors/contributor-billing/components/ConfirmationModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/ConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2C9D,CAAC"}

package/dist/editors/contributor-billing/components/ConfirmationModal.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ConfirmationModal = ({ open, header, onCancel, onContinue, cancelLabel = "Cancel", continueLabel = "Continue", children, continueDisabled = false, }) => {
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "contributor-billing-modal fixed inset-0 z-50 flex items-center justify-center bg-black/10 backdrop-blur-sm", children: _jsxs("div", { className: "bg-white rounded-2xl shadow-xl w-full max-w-md p-6", children: [_jsx("div", { className: "border-b border-slate-100 pb-3 text-xl font-semibold text-gray-800", children: header }), _jsx("div", { className: "my-5 rounded-lg bg-slate-50 p-4 text-center flex flex-col items-center justify-center min-h-[64px]", children: children }), _jsxs("div", { className: "mt-6 flex justify-between gap-3", children: [_jsx("button", { type: "button", onClick: onCancel, className: "flex-1 min-h-[44px] min-w-[120px] text-sm font-medium py-2.5 px-5 rounded-lg outline-none active:opacity-75 hover:bg-slate-100 transition-colors bg-slate-50 text-slate-700", children: cancelLabel }), _jsx("button", { type: "button", onClick: onContinue, disabled: continueDisabled, className: `flex-1 min-h-[44px] min-w-[120px] text-sm font-medium py-2.5 px-5 rounded-lg outline-none active:opacity-75 transition-colors bg-gray-800 text-white hover:bg-gray-700 ${continueDisabled ? "opacity-50 cursor-not-allowed" : ""}`, children: continueLabel })] })] }) }));
+};

package/dist/editors/contributor-billing/components/CreateDocument.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Document creation UI component.
+ * Displays available document types as clickable buttons.
+ */
+export declare function CreateDocument(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CreateDocument.d.ts.map

package/dist/editors/contributor-billing/components/CreateDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateDocument.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/CreateDocument.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,wBAAgB,cAAc,4CAsB7B"}

package/dist/editors/contributor-billing/components/CreateDocument.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { showCreateDocumentModal, useAllowedDocumentModelModules, } from "@powerhousedao/reactor-browser";
+/**
+ * Document creation UI component.
+ * Displays available document types as clickable buttons.
+ */
+export function CreateDocument() {
+    const allowedDocumentModelModules = useAllowedDocumentModelModules();
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-3 mt-4 text-sm font-bold text-gray-600", children: "Create document" }), _jsx("div", { className: "flex w-full flex-wrap gap-4", children: allowedDocumentModelModules?.map((documentModelModule) => {
+                    return (_jsx(CreateDocumentButton, { documentModelModule: documentModelModule }, documentModelModule.documentModel.global.id));
+                }) })] }));
+}
+function CreateDocumentButton({ documentModelModule }) {
+    const documentType = documentModelModule.documentModel.global.id;
+    const documentModelName = documentModelModule.documentModel.global.name || documentType;
+    const documentModelDescription = documentModelModule.documentModel.global.description;
+    return (_jsx("button", { className: "cursor-pointer rounded-md bg-gray-200 py-2 px-3 hover:bg-gray-300", title: documentModelName, "aria-description": documentModelDescription, onClick: () => showCreateDocumentModal(documentType), children: documentModelName }));
+}

package/dist/editors/contributor-billing/components/DriveContents.d.ts

@@ -0,0 +1,3 @@
+/** Shows the documents and folders in the selected drive */
+export declare function DriveContents(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DriveContents.d.ts.map

package/dist/editors/contributor-billing/components/DriveContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DriveContents.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/DriveContents.tsx"],"names":[],"mappings":"AAMA,4DAA4D;AAC5D,wBAAgB,aAAa,4CAU5B"}

package/dist/editors/contributor-billing/components/DriveContents.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CreateDocument } from "./CreateDocument.js";
+import { EmptyState } from "./EmptyState.js";
+import { Files } from "./Files.js";
+import { Folders } from "./Folders.js";
+import { NavigationBreadcrumbs } from "./NavigationBreadcrumbs.js";
+/** Shows the documents and folders in the selected drive */
+export function DriveContents() {
+    return (_jsxs("div", { className: "space-y-6 px-6", children: [_jsx(NavigationBreadcrumbs, {}), _jsx(Folders, {}), _jsx(Files, {}), _jsx(EmptyState, {}), _jsx(CreateDocument, {})] }));
+}

package/dist/editors/contributor-billing/components/DriveExplorer.d.ts

@@ -1,7 +1,7 @@
 import type { EditorProps } from "document-model";
 /**
- * Main drive explorer component with sidebar navigation and content area.
- * Layout: Left sidebar (folder tree) + Right content area (files/folders + document editor)
+ * Main drive explorer component for Contributor Billing.
+ * Displays an operational hub with invoice management and billing statement generation.
  */
-export declare function DriveExplorer(props: EditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function DriveExplorer({ children }: EditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DriveExplorer.d.ts.map

package/dist/editors/contributor-billing/components/DriveExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DriveExplorer.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/DriveExplorer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAkBlD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,2CA4R/C"}
+{"version":3,"file":"DriveExplorer.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/DriveExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,2CAiCtD"}

package/dist/editors/contributor-billing/components/DriveExplorer.js

@@ -1,184 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CreateDocumentModal, ToastContainer, } from "@powerhousedao/design-system/connect";
-import { addDocument, useDocumentModelModules, useDocumentsInSelectedDrive, useEditorModules, useFileNodesInSelectedDrive, useSelectedDrive, useSelectedFolder, } from "@powerhousedao/reactor-browser";
-import { useReactor } from "@powerhousedao/reactor-browser/connect";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { InvoiceTable } from "./InvoiceTable/InvoiceTable.js";
-import { HeaderStats } from "./InvoiceTable/HeaderStats.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToastContainer } from "@powerhousedao/design-system/connect";
+import { HeaderStats } from "./HeaderStats.js";
+import { InvoiceTableContainer } from "./InvoiceTableContainer.js";
 /**
- * Main drive explorer component with sidebar navigation and content area.
- * Layout: Left sidebar (folder tree) + Right content area (files/folders + document editor)
+ * Main drive explorer component for Contributor Billing.
+ * Displays an operational hub with invoice management and billing statement generation.
  */
-export function DriveExplorer(props) {
-    const { children } = props;
-    const [selected, setSelected] = useState({});
-    const [selectedStatuses, setSelectedStatuses] = useState([]);
-    const reactor = useReactor();
-    // Handler for status filter changes
-    const handleStatusChange = useCallback((value) => {
-        setSelectedStatuses(Array.isArray(value) ? value : [value]);
-    }, []);
-    // === DOCUMENT EDITOR STATE ===
-    // Customize document opening/closing behavior here
-    const [openModal, setOpenModal] = useState(false);
-    const selectedDocumentModel = useRef(null);
-    const editorModules = useEditorModules();
-    // === STATE MANAGEMENT HOOKS ===
-    // Core state hooks for drive navigation
-    const [selectedDrive] = useSelectedDrive(); // Currently selected drive
-    const selectedFolder = useSelectedFolder(); // Currently selected folder
-    const fileChildren = useFileNodesInSelectedDrive();
-    // All document states
-    const allDocuments = useDocumentsInSelectedDrive();
-    // Handler for row selection (does not affect status filter display)
-    const handleRowSelection = useCallback((rowId, checked, rowStatus) => {
-        setSelected((prev) => ({
-            ...prev,
-            [rowId]: checked,
-        }));
-    }, []);
-    // Determine if CSV export should be enabled based on selected rows
-    const canExportSelectedRows = useCallback(() => {
-        const allowedStatuses = [
-            "ACCEPTED",
-            "AWAITINGPAYMENT",
-            "PAYMENTSCHEDULED",
-            "PAYMENTSENT",
-            "PAYMENTRECEIVED",
-            "PAYMENTCLOSED",
-        ];
-        // Get all selected row IDs
-        const selectedRowIds = Object.keys(selected).filter((id) => selected[id]);
-        if (selectedRowIds.length === 0)
-            return false;
-        // Check if all selected rows have allowed statuses
-        const selectedRows = allDocuments?.filter((doc) => selectedRowIds.includes(doc.header.id)) ||
-            [];
-        return selectedRows.every((row) => allowedStatuses.includes(row.state.global
-            .status));
-    }, [selected, allDocuments]);
-    // Create a stable dispatcher map using useRef only (no useState to avoid re-renders)
-    const dispatchersRef = useRef(new Map());
-    // Create a working dispatch function that uses the existing reactor system
-    const createDispatchFunction = useCallback((docId) => {
-        return async (action) => {
-            try {
-                console.log(`Dispatching action for document ${docId}:`, action);
-                // Since we can't use GraphQL mutations, we need to find another way
-                // The key insight is that the existing useDocumentById hook already works
-                // We need to create a dispatch function that can handle actions
-                // Try to access the reactor instance through the global window object
-                // This is a common pattern in React applications
-                if (reactor) {
-                    const result = await reactor.addAction(docId, action);
-                    if (result.status !== "SUCCESS") {
-                        throw new Error(result.error?.message ?? "Failed to dispatch action");
-                    }
-                    return;
-                }
-                // Fallback: Use a custom event system
-                // This allows the reactor system to listen for actions
-                const actionEvent = new CustomEvent("reactor-action", {
-                    detail: {
-                        docId,
-                        action,
-                        timestamp: Date.now(),
-                    },
-                });
-                window.dispatchEvent(actionEvent);
-                // For now, we'll just log the action to maintain the interface
-                // The InvoiceTable will still work, but actions won't be persisted
-                console.warn(`Action dispatched via event system for document ${docId}. Make sure the reactor system is listening for 'reactor-action' events.`);
-            }
-            catch (error) {
-                console.error(`Failed to dispatch action for document ${docId}:`, error);
-            }
-        };
-    }, []);
-    // Update dispatchers when state changes - use a more stable approach
-    useEffect(() => {
-        // Only update if the document IDs have actually changed
-        const currentDocIds = allDocuments?.map((doc) => doc.header.id) || [];
-        const previousDocIds = Array.from(dispatchersRef.current.keys());
-        // Check if the document list has actually changed
-        const hasChanged = currentDocIds.length !== previousDocIds.length ||
-            !currentDocIds.every((id) => previousDocIds.includes(id));
-        if (!hasChanged) {
-            // Just update the document states without recreating dispatchers
-            allDocuments?.forEach((doc) => {
-                const docId = doc.header.id;
-                if (dispatchersRef.current.has(docId)) {
-                    const [, dispatchFunction] = dispatchersRef.current.get(docId);
-                    dispatchersRef.current.set(docId, [doc, dispatchFunction]);
-                }
-            });
-            return;
-        }
-        // Only recreate dispatchers when the document list actually changes
-        const newDispatchers = new Map();
-        allDocuments?.forEach((doc) => {
-            const docId = doc.header.id;
-            // Check if we already have a dispatcher for this document
-            if (dispatchersRef.current.has(docId)) {
-                // Update the document state but keep the same dispatch function
-                const [, dispatchFunction] = dispatchersRef.current.get(docId);
-                newDispatchers.set(docId, [doc, dispatchFunction]);
-            }
-            else {
-                // Create a new dispatcher for this document
-                const dispatchFunction = createDispatchFunction(docId);
-                newDispatchers.set(docId, [doc, dispatchFunction]);
-            }
-        });
-        // Clean up dispatchers for documents that no longer exist
-        for (const [docId] of dispatchersRef.current) {
-            if (!currentDocIds.includes(docId)) {
-                dispatchersRef.current.delete(docId);
-            }
-        }
-        // Update the ref
-        dispatchersRef.current = newDispatchers;
-    }, [allDocuments, createDispatchFunction]);
-    const getDocDispatcher = (id) => {
-        return dispatchersRef.current.get(id) || null;
-    };
-    // Handle document creation from modal
-    const onCreateDocument = useCallback(async (fileName) => {
-        setOpenModal(false);
-        const documentModel = selectedDocumentModel.current;
-        if (!documentModel || !selectedDrive?.header.id)
-            return;
-        let editorType = "integrations-editor";
-        if (documentModel.id === "powerhouse/invoice") {
-            editorType = "powerhouse-invoice-editor";
-        }
-        else if (documentModel.id === "powerhouse/expense-report") {
-            editorType = "powerhouse-expense-report-editor";
-        }
-        try {
-            const node = await addDocument(selectedDrive.header.id, fileName, documentModel.id, selectedFolder?.id, undefined, undefined, editorType);
-            selectedDocumentModel.current = null;
-            if (node) {
-                // Customize: Auto-open created document by uncommenting below
-                // setActiveDocumentId(node.id);
-            }
-        }
-        catch (error) {
-            console.error("Failed to create document:", error);
-        }
-    }, [addDocument, editorModules, selectedDrive?.header.id, selectedFolder?.id]);
-    const onSelectDocumentModel = useCallback((documentModel) => {
-        selectedDocumentModel.current = documentModel;
-        setOpenModal(true);
-    }, []);
-    // === DOCUMENT EDITOR DATA ===
-    // Filter available document types here if needed
-    const documentModelModules = useDocumentModelModules();
-    // Get active document and its editor components
-    // if a document is selected then it's editor will be passed as children
+export function DriveExplorer({ children }) {
+    // if a document is selected then its editor will be passed as children
     const showDocumentEditor = !!children;
-    // === RENDER ===
-    return (_jsx("div", { className: `flex h-full ${showDocumentEditor ? "w-full" : "editor-container"}`, children: _jsxs("div", { className: `h-full ${showDocumentEditor ? "w-full" : ""}`, children: [_jsx(ToastContainer, { position: "bottom-right", autoClose: 5000, hideProgressBar: false, newestOnTop: false, closeOnClick: false, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }), _jsx("div", { className: "flex-1", children: showDocumentEditor ? (
-                    // Document editor view
-                    children) : (_jsxs(_Fragment, { children: [_jsx(HeaderStats, {}), _jsx(InvoiceTable, { files: fileChildren || [], state: allDocuments || [], selected: selected, setSelected: setSelected, filteredDocumentModels: documentModelModules || [], onSelectDocumentModel: onSelectDocumentModel, getDocDispatcher: getDocDispatcher, selectedStatuses: selectedStatuses, onStatusChange: handleStatusChange, onRowSelection: handleRowSelection, canExportSelectedRows: canExportSelectedRows })] })) }), _jsx(CreateDocumentModal, { onContinue: onCreateDocument, onOpenChange: (open) => setOpenModal(open), open: openModal })] }) }));
+    return (_jsxs("div", { className: "contributor-billing-explorer h-full overflow-y-auto", children: [_jsx(ToastContainer, { position: "bottom-right", autoClose: 5000, hideProgressBar: false, newestOnTop: false, closeOnClick: false, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }), showDocumentEditor ? (
+            /* Document editor view */
+            children) : (
+            /* Operational Hub view */
+            _jsxs("div", { className: "container mx-auto p-4 space-y-4", children: [_jsx(HeaderStats, {}), _jsx(InvoiceTableContainer, {})] }))] }));
 }

package/dist/editors/contributor-billing/components/EmptyState.d.ts

@@ -0,0 +1,3 @@
+/** Shows a message when the selected drive or folder is empty */
+export declare function EmptyState(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/editors/contributor-billing/components/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/EmptyState.tsx"],"names":[],"mappings":"AAEA,iEAAiE;AACjE,wBAAgB,UAAU,mDAWzB"}

package/dist/editors/contributor-billing/components/EmptyState.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNodesInSelectedDriveOrFolder } from "@powerhousedao/reactor-browser";
+/** Shows a message when the selected drive or folder is empty */
+export function EmptyState() {
+    const nodes = useNodesInSelectedDriveOrFolder();
+    const hasNodes = nodes.length > 0;
+    if (hasNodes)
+        return null;
+    return (_jsxs("div", { className: "py-12 text-center text-gray-500", children: [_jsx("p", { className: "text-lg", children: "This folder is empty" }), _jsx("p", { className: "mt-2 text-sm", children: "Create your first document or folder below" })] }));
+}

package/dist/editors/contributor-billing/components/Files.d.ts

@@ -0,0 +1,3 @@
+/** Shows the files in the selected drive or folder */
+export declare function Files(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Files.d.ts.map

package/dist/editors/contributor-billing/components/Files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Files.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/Files.tsx"],"names":[],"mappings":"AAMA,sDAAsD;AACtD,wBAAgB,KAAK,mDAiBpB"}

package/dist/editors/contributor-billing/components/Files.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileItem } from "@powerhousedao/design-system/connect";
+import { useNodesInSelectedDriveOrFolder, isFileNodeKind, } from "@powerhousedao/reactor-browser";
+/** Shows the files in the selected drive or folder */
+export function Files() {
+    const nodes = useNodesInSelectedDriveOrFolder();
+    const fileNodes = nodes.filter((n) => isFileNodeKind(n));
+    const hasFiles = fileNodes.length > 0;
+    if (!hasFiles)
+        return null;
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-semibold text-gray-600", children: "Documents" }), _jsx("div", { className: "flex flex-wrap gap-4", children: fileNodes.map((fileNode) => (_jsx(FileItem, { fileNode: fileNode }, fileNode.id))) })] }));
+}

package/dist/editors/contributor-billing/components/FolderTree.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FolderTree.d.ts.map

package/dist/editors/contributor-billing/components/FolderTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/FolderTree.tsx"],"names":[],"mappings":"AAyDA;;;GAGG;AACH,wBAAgB,UAAU,4CA0CzB"}

package/dist/editors/contributor-billing/components/FolderTree.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar, SidebarProvider, } from "@powerhousedao/document-engineering";
+import { setSelectedNode, useNodesInSelectedDrive, useSelectedDrive, useSelectedNode, } from "@powerhousedao/reactor-browser";
+import { useMemo } from "react";
+function buildSidebarNodes(nodes, parentId) {
+    return nodes
+        .filter((n) => {
+        if (parentId == null) {
+            return n.parentFolder == null;
+        }
+        return n.parentFolder === parentId;
+    })
+        .map((node) => {
+        if (node.kind === "folder") {
+            return {
+                id: node.id,
+                title: node.name,
+                icon: "FolderClose",
+                expandedIcon: "FolderOpen",
+                children: buildSidebarNodes(nodes, node.id),
+            };
+        }
+        return {
+            id: node.id,
+            title: node.name,
+            icon: "File",
+        };
+    });
+}
+function transformNodesToSidebarNodes(nodes, driveName) {
+    return [
+        {
+            id: "root",
+            title: driveName,
+            icon: "Drive",
+            children: buildSidebarNodes(nodes, null),
+        },
+    ];
+}
+/**
+ * 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 function FolderTree() {
+    const [selectedDrive] = useSelectedDrive();
+    const nodes = useNodesInSelectedDrive();
+    const selectedNode = useSelectedNode();
+    const driveName = selectedDrive.header.name;
+    // Transform Node[] to hierarchical SidebarNode structure
+    const sidebarNodes = useMemo(() => transformNodesToSidebarNodes(nodes || [], driveName), [nodes, driveName]);
+    const handleActiveNodeChange = (node) => {
+        // If root node is selected, pass undefined to match existing behavior
+        if (node.id === "root") {
+            setSelectedNode(undefined);
+        }
+        else {
+            setSelectedNode(node.id);
+        }
+    };
+    // Map selectedNodeId to activeNodeId (use "root" when undefined)
+    const activeNodeId = !selectedNode || selectedNode.id === selectedDrive.header.id
+        ? "root"
+        : selectedNode.id;
+    return (_jsx(SidebarProvider, { nodes: sidebarNodes, children: _jsx(Sidebar, { className: "pt-1", nodes: sidebarNodes, activeNodeId: activeNodeId, onActiveNodeChange: handleActiveNodeChange, sidebarTitle: "Drive Explorer", showSearchBar: true, resizable: true, allowPinning: false, showStatusFilter: false, initialWidth: 256, defaultLevel: 2 }) }));
+}

package/dist/editors/contributor-billing/components/Folders.d.ts

@@ -0,0 +1,3 @@
+/** Shows the folders in the selected drive or folder */
+export declare function Folders(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Folders.d.ts.map

package/dist/editors/contributor-billing/components/Folders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Folders.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/Folders.tsx"],"names":[],"mappings":"AAMA,wDAAwD;AACxD,wBAAgB,OAAO,mDAgBtB"}

package/dist/editors/contributor-billing/components/Folders.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FolderItem } from "@powerhousedao/design-system/connect";
+import { useNodesInSelectedDriveOrFolder, isFolderNodeKind, } from "@powerhousedao/reactor-browser";
+/** Shows the folders in the selected drive or folder */
+export function Folders() {
+    const nodes = useNodesInSelectedDriveOrFolder();
+    const folderNodes = nodes.filter((n) => isFolderNodeKind(n));
+    const hasFolders = folderNodes.length > 0;
+    if (!hasFolders)
+        return null;
+    return (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-bold text-gray-600", children: "Folders" }), _jsx("div", { className: "flex flex-wrap gap-4", children: folderNodes.map((folderNode) => (_jsx(FolderItem, { folderNode: folderNode }, folderNode.id))) })] }));
+}