@powerhousedao/contributor-billing 0.0.92 → 0.0.93

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":"AACA,OAAO,EAEL,KAAK,gBAAgB,EAUtB,MAAM,gCAAgC,CAAC;AAUxC;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,gBAAgB,2CAuWpD"}
+{"version":3,"file":"DriveExplorer.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/DriveExplorer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,gBAAgB,EAStB,MAAM,gCAAgC,CAAC;AAQxC;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,gBAAgB,2CAkXpD"}

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

@@ -1,11 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CreateDocumentModal, useDrop } from "@powerhousedao/design-system";
-import { addDocument, useDocumentModelModules, useDriveContext, useDriveSharingType, useEditorModules, useFileChildNodes, useSelectedDrive, useSelectedDriveDocuments, useSelectedFolder, useSelectedNodePath, } from "@powerhousedao/reactor-browser";
+import { CreateDocumentModal, ToastContainer, } from "@powerhousedao/design-system";
+import { addDocument, useDocumentModelModules, useEditorModules, useFileChildNodes, useSelectedDrive, useSelectedDriveDocuments, useSelectedFolder, useNodeActions, showDeleteNodeModal, } from "@powerhousedao/reactor-browser";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { EditorContainer } from "./EditorContainer.js";
 import { InvoiceTable } from "./InvoiceTable/InvoiceTable.js";
-import { twMerge } from "tailwind-merge";
-import { ToastContainer } from "@powerhousedao/design-system";
 import { HeaderStats } from "./InvoiceTable/HeaderStats.js";
 /**
  * Main drive explorer component with sidebar navigation and content area.
@@ -24,24 +22,13 @@ export function DriveExplorer(props) {
     const [openModal, setOpenModal] = useState(false);
     const selectedDocumentModel = useRef(null);
     const editorModules = useEditorModules();
-    // === DRIVE CONTEXT HOOKS ===
-    // Core drive operations and document models
-    const { onAddFile, onAddFolder, onCopyNode, onMoveNode } = useDriveContext();
+    // === NODE ACTIONS HOOK ===
+    // Get all node operations from reactor-browser
+    const { onRenameNode, onDuplicateNode } = useNodeActions();
     // === STATE MANAGEMENT HOOKS ===
     // Core state hooks for drive navigation
     const [selectedDrive] = useSelectedDrive(); // Currently selected drive
     const selectedFolder = useSelectedFolder(); // Currently selected folder
-    const selectedNodePath = useSelectedNodePath();
-    const sharingType = useDriveSharingType(selectedDrive?.header.id);
-    // === DROP HOOKS ===
-    const { isDropTarget, dropProps } = useDrop({
-        node: selectedNodePath?.length > 0
-            ? selectedNodePath[selectedNodePath.length - 1]
-            : undefined,
-        onAddFile,
-        onCopyNode,
-        onMoveNode,
-    });
     const fileChildren = useFileChildNodes();
     // All document states
     const allDocuments = useSelectedDriveDocuments();
@@ -64,12 +51,12 @@ export function DriveExplorer(props) {
             "PAYMENTCLOSED",
         ];
         // Get all selected row IDs
-        const selectedRowIds = Object.keys(selected).filter(id => selected[id]);
+        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 = state?.filter(doc => selectedRowIds.includes(doc.header.id)) || [];
-        return selectedRows.every(row => allowedStatuses.includes(row.state.global.status));
+        const selectedRows = state?.filter((doc) => selectedRowIds.includes(doc.header.id)) || [];
+        return selectedRows.every((row) => allowedStatuses.includes(row.state.global.status));
     }, [selected, state]);
     // Create a stable dispatcher map using useRef only (no useState to avoid re-renders)
     const dispatchersRef = useRef(new Map());
@@ -166,23 +153,38 @@ export function DriveExplorer(props) {
         return dispatchersRef.current.get(id) || null;
     };
     // === EVENT HANDLERS ===
-    // Handle folder creation with optional name parameter
-    const handleCreateFolder = useCallback(async (folderName) => {
-        let name = folderName;
-        // If no name provided, prompt for it (for manual folder creation)
-        if (!name) {
-            const promptResult = prompt("Enter folder name:");
-            name = promptResult || undefined;
+    // Wrapper for rename that handles node ID
+    const handleRenameNode = useCallback(async (nodeId, newName) => {
+        const node = fileChildren.find((n) => n.id === nodeId);
+        if (node) {
+            await onRenameNode(newName, node);
         }
-        if (name?.trim()) {
-            try {
-                await onAddFolder(name.trim(), selectedFolder);
-            }
-            catch (error) {
-                console.error("Failed to create folder:", error);
-            }
+    }, [fileChildren, onRenameNode]);
+    // Wrapper for delete that clears selection
+    const handleDeleteNode = useCallback(async (nodeId) => {
+        const node = fileChildren.find((n) => n.id === nodeId);
+        if (node &&
+            window.confirm(`Are you sure you want to delete "${node.name}"?`)) {
+            // Delete via context menu or direct call
+            // The FileItem component will call showDeleteNodeModal instead
+            setSelected((prev) => {
+                const newSelected = { ...prev };
+                delete newSelected[nodeId];
+                return newSelected;
+            });
         }
-    }, [onAddFolder, selectedFolder]);
+    }, [fileChildren]);
+    // Wrapper for showDeleteNodeModal (for FileItem) - uses the reactor-browser function
+    const handleShowDeleteModal = useCallback(async (node) => {
+        showDeleteNodeModal(node.id);
+        // Clear selection after deletion is confirmed
+        setSelected((prev) => {
+            const newSelected = { ...prev };
+            delete newSelected[node.id];
+            return newSelected;
+        });
+        return undefined;
+    }, []);
     // Handle document creation from modal
     const onCreateDocument = useCallback(async (fileName) => {
         setOpenModal(false);
@@ -222,11 +224,10 @@ export function DriveExplorer(props) {
         ? editorModules?.find((e) => e.documentTypes.includes(activeDocument.documentType))
         : null;
     // === RENDER ===
-    // console.log("files", fileChildren);
-    // console.log("state", state);
-    // console.log("isDropTarget", isDropTarget);
-    // console.log("dropProps", dropProps);
-    return (_jsx("div", { className: "flex h-full editor-container", children: _jsxs("div", { ...dropProps, className: twMerge("rounded-md border-2 border-transparent ", isDropTarget && "border-dashed border-blue-100"), 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 p-4", children: activeDocument && documentModelModule && editorModule ? (
+    return (_jsx("div", { className: "flex h-full editor-container", children: _jsxs("div", { className: "h-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 p-4", children: activeDocument && documentModelModule && editorModule ? (
                     // Document editor view
-                    _jsx(EditorContainer, { handleClose: () => setActiveDocumentId(undefined), activeDocumentId: activeDocumentId || "" })) : (_jsxs(_Fragment, { children: [_jsx(HeaderStats, {}), _jsx(InvoiceTable, { setActiveDocumentId: setActiveDocumentId, files: fileChildren, state: state || [], selected: selected, setSelected: setSelected, onBatchAction: () => { }, onDeleteNode: () => { }, renameNode: () => { }, filteredDocumentModels: documentModelModules, onSelectDocumentModel: onSelectDocumentModel, getDocDispatcher: getDocDispatcher, selectedStatuses: selectedStatuses, onStatusChange: handleStatusChange, onRowSelection: handleRowSelection, canExportSelectedRows: canExportSelectedRows })] })) }), _jsx(CreateDocumentModal, { onContinue: onCreateDocument, onOpenChange: (open) => setOpenModal(open), open: openModal })] }) }));
+                    _jsx(EditorContainer, { handleClose: () => setActiveDocumentId(undefined), activeDocumentId: activeDocumentId || "" })) : (_jsxs(_Fragment, { children: [_jsx(HeaderStats, {}), _jsx(InvoiceTable, { setActiveDocumentId: setActiveDocumentId, files: fileChildren, state: state || [], selected: selected, setSelected: setSelected, onBatchAction: () => { }, onDeleteNode: handleDeleteNode, renameNode: handleRenameNode, onDuplicateNode: async (node) => {
+                                    await onDuplicateNode(node);
+                                    return undefined;
+                                }, showDeleteNodeModal: handleShowDeleteModal, filteredDocumentModels: documentModelModules, onSelectDocumentModel: onSelectDocumentModel, getDocDispatcher: getDocDispatcher, selectedStatuses: selectedStatuses, onStatusChange: handleStatusChange, onRowSelection: handleRowSelection, canExportSelectedRows: canExportSelectedRows })] })) }), _jsx(CreateDocumentModal, { onContinue: onCreateDocument, onOpenChange: (open) => setOpenModal(open), open: openModal })] }) }));
 }

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

@@ -1,3 +1,4 @@
+import type { Node } from "document-drive";
 import { type DocumentModelModule } from "document-model";
 interface InvoiceTableProps {
     files: any[];
@@ -16,6 +17,8 @@ interface InvoiceTableProps {
     onBatchAction: (action: string) => void;
     onDeleteNode: (nodeId: string) => void;
     renameNode: (nodeId: string, name: string) => void;
+    onDuplicateNode: (node: Node) => Promise<Node | undefined>;
+    showDeleteNodeModal: (node: Node) => Promise<Node | undefined>;
     filteredDocumentModels: DocumentModelModule[];
     onSelectDocumentModel: (model: DocumentModelModule) => void;
     getDocDispatcher: (id: string) => any;
@@ -24,6 +27,6 @@ interface InvoiceTableProps {
     onRowSelection: (rowId: string, checked: boolean, rowStatus: string) => void;
     canExportSelectedRows: () => boolean;
 }
-export declare const InvoiceTable: ({ files, state, setActiveDocumentId, selected, setSelected, onBatchAction, onDeleteNode, renameNode, filteredDocumentModels, onSelectDocumentModel, getDocDispatcher, selectedStatuses, onStatusChange, onRowSelection, canExportSelectedRows, }: InvoiceTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InvoiceTable: ({ files, state, setActiveDocumentId, selected, setSelected, onBatchAction, onDeleteNode, renameNode, onDuplicateNode, showDeleteNodeModal, filteredDocumentModels, onSelectDocumentModel, getDocDispatcher, selectedStatuses, onStatusChange, onRowSelection, canExportSelectedRows, }: InvoiceTableProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=InvoiceTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceTable.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTable.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2B1D,UAAU,iBAAiB;IACzB,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACpC,WAAW,EAAE,CACX,QAAQ,EACJ;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,GACzB,CAAC,CAAC,IAAI,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,KAAK;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,KACjE,IAAI,CAAC;IACV,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;IAC9C,qBAAqB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;IACtC,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,qBAAqB,EAAE,MAAM,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,GAAI,kPAgB1B,iBAAiB,4CAwoBnB,CAAC"}
+{"version":3,"file":"InvoiceTable.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTable.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AA2B1D,UAAU,iBAAiB;IACzB,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;IACpC,WAAW,EAAE,CACX,QAAQ,EACJ;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,GACzB,CAAC,CAAC,IAAI,EAAE;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,KAAK;QAAE,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,KACjE,IAAI,CAAC;IACV,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;IAC/D,sBAAsB,EAAE,mBAAmB,EAAE,CAAC;IAC9C,qBAAqB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;IACtC,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,qBAAqB,EAAE,MAAM,OAAO,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,GAAI,wRAkB1B,iBAAiB,4CA0pBnB,CAAC"}

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

@@ -20,7 +20,7 @@ const statusOptions = [
     { label: "Rejected", value: "REJECTED" },
     { label: "Other", value: "OTHER" },
 ];
-export const InvoiceTable = ({ files, state, setActiveDocumentId, selected, setSelected, onBatchAction, onDeleteNode, renameNode, filteredDocumentModels, onSelectDocumentModel, getDocDispatcher, selectedStatuses, onStatusChange, onRowSelection, canExportSelectedRows, }) => {
+export const InvoiceTable = ({ files, state, setActiveDocumentId, selected, setSelected, onBatchAction, onDeleteNode, renameNode, onDuplicateNode, showDeleteNodeModal, filteredDocumentModels, onSelectDocumentModel, getDocDispatcher, selectedStatuses, onStatusChange, onRowSelection, canExportSelectedRows, }) => {
     const [selectedDrive] = useSelectedDrive();
     const billingDocStates = state
         .filter((doc) => doc.header.documentType === "powerhouse/billing-statement")
@@ -214,5 +214,5 @@ export const InvoiceTable = ({ files, state, setActiveDocumentId, selected, setS
             setActiveDocumentId(createdNode.id);
         }
     };
-    return (_jsxs("div", { className: "w-full h-full bg-white rounded-lg p-4 border border-gray-200 shadow-md mt-4 overflow-x-auto", children: [_jsx(HeaderControls, { statusOptions: statusOptions, onStatusChange: onStatusChange, onBatchAction: onBatchAction, onExport: handleCSVExport, selectedStatuses: selectedStatuses, createIntegrationsDocument: createIntegrationsDocument, integrationsDoc: integrationsDoc, setActiveDocumentId: setActiveDocumentId, canExportSelectedRows: canExportSelectedRows }), shouldShowSection("DRAFT") && (_jsx(InvoiceTableSection, { title: "Draft", count: draft.length, onSelectDocumentModel: onSelectDocumentModel, filteredDocumentModels: filteredDocumentModels, children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: draft.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode }, row.id))) })] }) })), shouldShowSection("ISSUED") && (_jsx(InvoiceTableSection, { title: "Issued", count: issued.length, children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: issued.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("ACCEPTED") && (_jsx(InvoiceTableSection, { title: "Accepted", count: accepted.length, color: "bg-green-100 text-green-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: accepted.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTSCHEDULED") && (_jsx(InvoiceTableSection, { title: "Payment Scheduled", count: paymentScheduled.length, color: "bg-green-100 text-green-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentScheduled.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTSENT") && (_jsx(InvoiceTableSection, { title: "Payment Sent", count: paymentSent.length, color: "bg-green-100 text-green-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentSent.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTISSUE") && (_jsx(InvoiceTableSection, { title: "Payment Issue", count: paymentIssue.length, color: "bg-yellow-100 text-yellow-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentIssue.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTCLOSED") && (_jsx(InvoiceTableSection, { title: "Payment Closed", count: paymentClosed.length, color: "bg-red-500 text-black-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentClosed.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode }, row.id))) })] }) })), shouldShowSection("REJECTED") && (_jsx(InvoiceTableSection, { title: "Rejected", count: rejected.length, color: "bg-red-500 text-black-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: rejected.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode }, row.id))) })] }) })), shouldShowSection("OTHER") && (_jsx(InvoiceTableSection, { title: "Other", count: otherInvoices.length, children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Exported" })] }) }), _jsx("tbody", { children: otherInvoices.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode }, row.id))) })] }) }))] }, `${state.length}`));
+    return (_jsxs("div", { className: "w-full h-full bg-white rounded-lg p-4 border border-gray-200 shadow-md mt-4 overflow-x-auto", children: [_jsx(HeaderControls, { statusOptions: statusOptions, onStatusChange: onStatusChange, onBatchAction: onBatchAction, onExport: handleCSVExport, selectedStatuses: selectedStatuses, createIntegrationsDocument: createIntegrationsDocument, integrationsDoc: integrationsDoc, setActiveDocumentId: setActiveDocumentId, canExportSelectedRows: canExportSelectedRows }), shouldShowSection("DRAFT") && (_jsx(InvoiceTableSection, { title: "Draft", count: draft.length, onSelectDocumentModel: onSelectDocumentModel, filteredDocumentModels: filteredDocumentModels, children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: draft.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal }, row.id))) })] }) })), shouldShowSection("ISSUED") && (_jsx(InvoiceTableSection, { title: "Issued", count: issued.length, children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: issued.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("ACCEPTED") && (_jsx(InvoiceTableSection, { title: "Accepted", count: accepted.length, color: "bg-green-100 text-green-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: accepted.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTSCHEDULED") && (_jsx(InvoiceTableSection, { title: "Payment Scheduled", count: paymentScheduled.length, color: "bg-green-100 text-green-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentScheduled.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTSENT") && (_jsx(InvoiceTableSection, { title: "Payment Sent", count: paymentSent.length, color: "bg-green-100 text-green-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentSent.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTISSUE") && (_jsx(InvoiceTableSection, { title: "Payment Issue", count: paymentIssue.length, color: "bg-yellow-100 text-yellow-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentIssue.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal, onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates }, row.id))) })] }) })), shouldShowSection("PAYMENTCLOSED") && (_jsx(InvoiceTableSection, { title: "Payment Closed", count: paymentClosed.length, color: "bg-red-500 text-black-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: paymentClosed.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal }, row.id))) })] }) })), shouldShowSection("REJECTED") && (_jsx(InvoiceTableSection, { title: "Rejected", count: rejected.length, color: "bg-red-500 text-black-600", children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2", children: "Exported" })] }) }), _jsx("tbody", { children: rejected.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal }, row.id))) })] }) })), shouldShowSection("OTHER") && (_jsx(InvoiceTableSection, { title: "Other", count: otherInvoices.length, children: _jsxs("table", { className: "w-full text-sm border-separate border-spacing-0 border border-gray-400", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50", children: [_jsx("th", { className: "px-2 py-2 w-8" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issuer" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Exported" })] }) }), _jsx("tbody", { children: otherInvoices.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), setActiveDocumentId: setActiveDocumentId, onDeleteNode: handleDelete, renameNode: renameNode, onDuplicateNode: onDuplicateNode, showDeleteNodeModal: showDeleteNodeModal }, row.id))) })] }) }))] }, `${state.length}`));
 };

package/dist/editors/contributor-billing/components/InvoiceTable/InvoiceTableRow.d.ts

@@ -1,4 +1,5 @@
-export declare const InvoiceTableRow: ({ files, row, isSelected, onSelect, setActiveDocumentId, onDeleteNode, renameNode, onCreateBillingStatement, billingDocStates, }: {
+import type { Node } from "document-drive";
+export declare const InvoiceTableRow: ({ files, row, isSelected, onSelect, setActiveDocumentId, onDeleteNode, renameNode, onDuplicateNode, showDeleteNodeModal, onCreateBillingStatement, billingDocStates, }: {
     files?: any[];
     row: any;
     isSelected: boolean;
@@ -6,6 +7,8 @@ export declare const InvoiceTableRow: ({ files, row, isSelected, onSelect, setAc
     setActiveDocumentId: (id: string) => void;
     onDeleteNode: (nodeId: string) => void;
     renameNode: (nodeId: string, name: string) => void;
+    onDuplicateNode?: (node: Node) => Promise<Node | undefined>;
+    showDeleteNodeModal?: (node: Node) => Promise<Node | undefined>;
     onCreateBillingStatement?: (id: string) => void;
     billingDocStates?: {
         id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceTableRow.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTableRow.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,GAAI,kIAU7B;IACD,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,GAAG,EAAE,GAAG,CAAC;IACT,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC1D,4CAgLA,CAAC"}
+{"version":3,"file":"InvoiceTableRow.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE3C,eAAO,MAAM,eAAe,GAAI,wKAY7B;IACD,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,GAAG,EAAE,GAAG,CAAC;IACT,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;IAChE,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC1D,4CAoLA,CAAC"}

package/dist/editors/contributor-billing/components/InvoiceTable/InvoiceTableRow.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { FileItem } from "@powerhousedao/design-system";
-import { useDriveContext } from "@powerhousedao/reactor-browser";
-export const InvoiceTableRow = ({ files, row, isSelected, onSelect, setActiveDocumentId, onDeleteNode, renameNode, onCreateBillingStatement, billingDocStates, }) => {
+export const InvoiceTableRow = ({ files, row, isSelected, onSelect, setActiveDocumentId, onDeleteNode, renameNode, onDuplicateNode, showDeleteNodeModal, onCreateBillingStatement, billingDocStates, }) => {
     const [menuOpen, setMenuOpen] = useState(false);
     const menuRef = useRef(null);
     const formatTimestamp = (timestamp) => {
@@ -42,11 +41,21 @@ export const InvoiceTableRow = ({ files, row, isSelected, onSelect, setActiveDoc
     const billingFile = files?.find((file) => file.id === billingDoc?.id);
     const file = files?.find((file) => file.id === row.id);
     const hasExportedData = row.exported != null && Boolean(row.exported.timestamp?.trim());
-    const { onAddFile, onAddFolder, onCopyNode, onDuplicateNode, onMoveNode, onRenameNode, showDeleteNodeModal, } = useDriveContext();
-    return (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "px-2 py-2", children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => onSelect(e.target.checked), className: "size-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" }) }), _jsx("td", { className: "py-1 w-10", children: file && (_jsx(FileItem, { fileNode: file, sharingType: "PUBLIC", onRenameNode: onRenameNode, onDuplicateNode: () => new Promise((resolve) => resolve(undefined)), showDeleteNodeModal: showDeleteNodeModal, isAllowedToCreateDocuments: true, className: "h-10", onAddFile: () => new Promise((resolve) => resolve(undefined)), onAddFolder: () => new Promise((resolve) => resolve(undefined)), onCopyNode: () => new Promise((resolve) => resolve(undefined)), onMoveNode: () => new Promise((resolve) => resolve(undefined)), onAddAndSelectNewFolder: () => new Promise((resolve) => resolve(undefined)), getSyncStatusSync: () => undefined, setSelectedNode: () => setActiveDocumentId(row.id) }, row.id)) }), _jsx("td", { className: "px-2 py-2 text-center", children: row.invoiceNo }), _jsx("td", { className: "px-2 py-2 text-center", children: row.issueDate }), _jsx("td", { className: "px-2 py-2 text-center", children: row.dueDate }), _jsx("td", { className: "px-2 py-2 text-center", children: row.currency }), _jsx("td", { className: "px-2 py-2 text-center", children: formatAmount(row.amount) }), (row.status === "ISSUED" ||
+    // Wrapper functions for FileItem that convert between nodeId and Node
+    const handleRenameNode = async (newName, node) => {
+        await renameNode(node.id, newName);
+        return undefined;
+    };
+    const handleDuplicateNode = async (node) => {
+        if (onDuplicateNode) {
+            await onDuplicateNode(node);
+        }
+    };
+    const handleShowDeleteModal = showDeleteNodeModal || (async () => undefined);
+    return (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "px-2 py-2", children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => onSelect(e.target.checked), className: "size-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" }) }), _jsx("td", { className: "py-1 w-10", children: file && (_jsx(FileItem, { fileNode: file, sharingType: "PUBLIC", onRenameNode: handleRenameNode, onDuplicateNode: handleDuplicateNode, showDeleteNodeModal: handleShowDeleteModal, isAllowedToCreateDocuments: true, className: "h-10", onAddFile: () => new Promise((resolve) => resolve(undefined)), onAddFolder: () => new Promise((resolve) => resolve(undefined)), onCopyNode: () => new Promise((resolve) => resolve(undefined)), onMoveNode: () => new Promise((resolve) => resolve(undefined)), onAddAndSelectNewFolder: () => new Promise((resolve) => resolve(undefined)), getSyncStatusSync: () => undefined, setSelectedNode: () => setActiveDocumentId(row.id) }, row.id)) }), _jsx("td", { className: "px-2 py-2 text-center", children: row.invoiceNo }), _jsx("td", { className: "px-2 py-2 text-center", children: row.issueDate }), _jsx("td", { className: "px-2 py-2 text-center", children: row.dueDate }), _jsx("td", { className: "px-2 py-2 text-center", children: row.currency }), _jsx("td", { className: "px-2 py-2 text-center", children: formatAmount(row.amount) }), (row.status === "ISSUED" ||
                 row.status === "ACCEPTED" ||
                 row.status === "PAYMENTSCHEDULED" ||
                 row.status === "PAYMENTRECEIVED" ||
                 row.status === "PAYMENTSENT") &&
-                !billingFile && (_jsx("td", { className: "px-2 py-2 text-center", children: _jsx("button", { className: "bg-white border border-gray-300 rounded px-3 py-1 text-sm hover:bg-gray-100 col-span-1 justify-self-end", onClick: () => onCreateBillingStatement?.(row.id), children: "Generate Billing Statement" }) })), billingFile && (_jsx("td", { className: "px-2 py-2 text-center", children: _jsx(FileItem, { fileNode: billingFile, sharingType: "PUBLIC", onRenameNode: onRenameNode, onDuplicateNode: () => new Promise((resolve) => resolve(undefined)), showDeleteNodeModal: showDeleteNodeModal, isAllowedToCreateDocuments: true, className: "h-10", onAddFile: () => new Promise((resolve) => resolve(undefined)), onAddFolder: () => new Promise((resolve) => resolve(undefined)), onCopyNode: () => new Promise((resolve) => resolve(undefined)), onMoveNode: () => new Promise((resolve) => resolve(undefined)), onAddAndSelectNewFolder: () => new Promise((resolve) => resolve(undefined)), getSyncStatusSync: () => undefined, setSelectedNode: () => setActiveDocumentId(billingDoc?.id) }, billingDoc?.id) })), _jsx("td", { className: "px-2 py-2 text-center", children: hasExportedData ? (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("span", { className: "text-green-500", children: "Yes" }), _jsx("span", { className: "text-green-500 text-xs", children: formatTimestamp(row.exported.timestamp) })] })) : (_jsx("span", { className: "text-red-500", children: "No" })) })] }));
+                !billingFile && (_jsx("td", { className: "px-2 py-2 text-center", children: _jsx("button", { className: "bg-white border border-gray-300 rounded px-3 py-1 text-sm hover:bg-gray-100 col-span-1 justify-self-end", onClick: () => onCreateBillingStatement?.(row.id), children: "Generate Billing Statement" }) })), billingFile && (_jsx("td", { className: "px-2 py-2 text-center", children: _jsx(FileItem, { fileNode: billingFile, sharingType: "PUBLIC", onRenameNode: handleRenameNode, onDuplicateNode: handleDuplicateNode, showDeleteNodeModal: handleShowDeleteModal, isAllowedToCreateDocuments: true, className: "h-10", onAddFile: () => new Promise((resolve) => resolve(undefined)), onAddFolder: () => new Promise((resolve) => resolve(undefined)), onCopyNode: () => new Promise((resolve) => resolve(undefined)), onMoveNode: () => new Promise((resolve) => resolve(undefined)), onAddAndSelectNewFolder: () => new Promise((resolve) => resolve(undefined)), getSyncStatusSync: () => undefined, setSelectedNode: () => setActiveDocumentId(billingDoc?.id) }, billingDoc?.id) })), _jsx("td", { className: "px-2 py-2 text-center", children: hasExportedData ? (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("span", { className: "text-green-500", children: "Yes" }), _jsx("span", { className: "text-green-500 text-xs", children: formatTimestamp(row.exported.timestamp) })] })) : (_jsx("span", { className: "text-red-500", children: "No" })) })] }));
 };

package/dist/editors/contributor-billing/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/contributor-billing/editor.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,gCAAgC,CAAC;AAGxC;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,2CAMjD;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,gBAAgB,2CAarD"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/contributor-billing/editor.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,2CAMjD;AAKD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,gBAAgB,2CAWrD"}

package/dist/editors/contributor-billing/editor.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { WagmiContext } from "@powerhousedao/design-system";
-import { AnalyticsProvider, DriveContextProvider, useAppConfig, } from "@powerhousedao/reactor-browser";
+import { AnalyticsProvider, useAppConfig, } from "@powerhousedao/reactor-browser";
 import { DriveExplorer } from "./components/DriveExplorer.js";
+import { withDropZone } from "./utils/withDropZone.js";
 /**
  * Base editor component that renders the drive explorer interface.
  * Customize document opening behavior and drive-level actions here.
@@ -9,6 +10,8 @@ import { DriveExplorer } from "./components/DriveExplorer.js";
 export function BaseEditor(props) {
     return (_jsx("div", { className: "new-drive-explorer", style: { height: "100%" }, children: _jsx(DriveExplorer, { ...props }) }));
 }
+// Wrap base editor with drop zone functionality
+const BaseEditorWithDropZone = withDropZone(BaseEditor);
 /**
  * Main editor entry point with required providers.
  */
@@ -17,5 +20,5 @@ export default function Editor(props) {
     const analyticsDatabaseName = appConfig?.analyticsDatabaseName;
     return (
     // Required context providers for drive functionality
-    _jsx(DriveContextProvider, { value: props.context, children: _jsx(WagmiContext, { children: _jsx(AnalyticsProvider, { databaseName: analyticsDatabaseName, children: _jsx(BaseEditor, { ...props }) }) }) }));
+    _jsx(WagmiContext, { children: _jsx(AnalyticsProvider, { databaseName: analyticsDatabaseName, children: _jsx(BaseEditorWithDropZone, { ...props }) }) }));
 }

package/dist/editors/contributor-billing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editors/contributor-billing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGxE,eAAO,MAAM,MAAM,EAAE,iBASpB,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editors/contributor-billing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGxE,eAAO,MAAM,MAAM,EAAE,iBAgBpB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/editors/contributor-billing/index.js

@@ -7,6 +7,13 @@ export const module = {
         disableExternalControls: true,
         documentToolbarEnabled: true,
         showSwitchboardLink: true,
+        documentTypes: [
+            "powerhouse/invoice",
+            "powerhouse/billing-statement",
+        ],
+        dragAndDrop: {
+            enabled: true,
+        },
     },
 };
 export default module;

package/dist/editors/contributor-billing/utils/withDropZone.d.ts

@@ -0,0 +1,4 @@
+import type { DriveEditorProps } from "@powerhousedao/reactor-browser";
+import type { ComponentType } from "react";
+export declare function withDropZone<T extends DriveEditorProps>(WrappedComponent: ComponentType<T>): ComponentType<T>;
+//# sourceMappingURL=withDropZone.d.ts.map

package/dist/editors/contributor-billing/utils/withDropZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withDropZone.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/utils/withDropZone.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,gBAAgB,EAEjB,MAAM,gCAAgC,CAAC;AAMxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,wBAAgB,YAAY,CAAC,CAAC,SAAS,gBAAgB,EACrD,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,GACjC,aAAa,CAAC,CAAC,CAAC,CAqClB"}

package/dist/editors/contributor-billing/utils/withDropZone.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropZone } from "@powerhousedao/design-system";
+import { setSelectedNode, useOnDropFile, useSelectedDriveId, } from "@powerhousedao/reactor-browser";
+export function withDropZone(WrappedComponent) {
+    const WithDropZoneComponent = (props) => {
+        const driveId = useSelectedDriveId();
+        const onDropFile = useOnDropFile(props.editorConfig?.documentTypes);
+        const onAddFile = async (file, parent, onProgress, resolveConflict) => {
+            return await onDropFile(file, onProgress, resolveConflict);
+        };
+        // Only wrap with DropZone if enabled in config
+        if (props.editorConfig?.dragAndDrop?.enabled) {
+            return (_jsx(DropZone, { onAddFile: onAddFile, setSelectedNode: setSelectedNode, driveId: driveId, useLocalStorage: true, style: { height: "100%" }, children: _jsx(WrappedComponent, { ...props }) }));
+        }
+        return _jsx(WrappedComponent, { ...props });
+    };
+    WithDropZoneComponent.displayName = `withDropZone(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+    return WithDropZoneComponent;
+}

package/dist/style.css

@@ -363,9 +363,6 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
-  .mr-1 {
-    margin-right: calc(var(--spacing) * 1);
-  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -375,9 +372,6 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-3 {
-    margin-bottom: calc(var(--spacing) * 3);
-  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -466,9 +460,6 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
-  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -578,9 +569,6 @@
   .flex-nowrap {
     flex-wrap: nowrap;
   }
-  .flex-wrap {
-    flex-wrap: wrap;
-  }
   .items-center {
     align-items: center;
   }
@@ -605,13 +593,6 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .space-y-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -684,10 +665,6 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -700,10 +677,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
-  .border-dashed {
-    --tw-border-style: dashed;
-    border-style: dashed;
-  }
   .border-blue-100 {
     border-color: var(--color-blue-100);
   }
@@ -915,9 +888,6 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
-  .text-blue-800 {
-    color: var(--color-blue-800);
-  }
   .text-blue-900 {
     color: var(--color-blue-900);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@powerhousedao/contributor-billing",
   "description": "Document models that help contributors of open organisations get paid anonymously for their work on a monthly basis.",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "license": "AGPL-3.0-only",
   "type": "module",
   "files": [
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@google-cloud/documentai": "^8.12.0",
-    "@powerhousedao/builder-tools": "^5.0.0-staging.19",
-    "@powerhousedao/common": "^5.0.0-staging.19",
-    "@powerhousedao/design-system": "^5.0.0-staging.19",
-    "@powerhousedao/document-engineering": "^1.37.0",
+    "@powerhousedao/builder-tools": "^5.0.0-staging.21",
+    "@powerhousedao/common": "^5.0.0-staging.21",
+    "@powerhousedao/design-system": "^5.0.0-staging.21",
+    "@powerhousedao/document-engineering": "^1.38.0",
     "@react-pdf/renderer": "^4.3.0",
     "@safe-global/api-kit": "^3.0.1",
     "@safe-global/protocol-kit": "^6.0.3",
@@ -69,7 +69,7 @@
     "@types/cors": "^2.8.17",
     "axios": "^1.9.0",
     "cors": "^2.8.5",
-    "document-model": "^5.0.0-staging.19",
+    "document-model": "^5.0.0-staging.21",
     "dotenv": "^16.5.0",
     "error": "^10.4.0",
     "ethers": "^6.14.0",
@@ -85,19 +85,19 @@
     "@electric-sql/pglite": "^0.2.12",
     "@eslint/js": "^9.25.0",
     "@powerhousedao/analytics-engine-core": "^0.5.0",
-    "@powerhousedao/codegen": "^5.0.0-staging.19",
-    "@powerhousedao/ph-cli": "^5.0.0-staging.19",
-    "@powerhousedao/reactor-api": "^5.0.0-staging.19",
-    "@powerhousedao/reactor-browser": "^5.0.0-staging.19",
-    "@powerhousedao/reactor-local": "^5.0.0-staging.19",
+    "@powerhousedao/codegen": "^5.0.0-staging.21",
+    "@powerhousedao/ph-cli": "^5.0.0-staging.21",
+    "@powerhousedao/reactor-api": "^5.0.0-staging.21",
+    "@powerhousedao/reactor-browser": "^5.0.0-staging.21",
+    "@powerhousedao/reactor-local": "^5.0.0-staging.21",
     "@powerhousedao/scalars": "^1.33.1-staging.5",
-    "@powerhousedao/switchboard": "^5.0.0-staging.19",
+    "@powerhousedao/switchboard": "^5.0.0-staging.21",
     "@tailwindcss/cli": "^4.1.4",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^22.14.1",
     "@types/react": "^18.3.20",
     "@vitejs/plugin-react": "^4.4.1",
-    "document-drive": "^5.0.0-staging.19",
+    "document-drive": "^5.0.0-staging.21",
     "eslint": "^9.25.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",