@powerhousedao/contributor-billing 0.0.92 → 0.0.94

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/editors/invoice/InvoicePDF.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvoicePDF.d.ts","sourceRoot":"","sources":["../../../editors/invoice/InvoicePDF.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EAIb,MAAM,wCAAwC,CAAC;AAgThD,UAAU,eAAe;IACvB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6bhD,CAAC"}
+{"version":3,"file":"InvoicePDF.d.ts","sourceRoot":"","sources":["../../../editors/invoice/InvoicePDF.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EAIb,MAAM,wCAAwC,CAAC;AAyThD,UAAU,eAAe;IACvB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8ahD,CAAC"}

package/dist/editors/invoice/InvoicePDF.js

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     tableRow: {
         flexDirection: "row",
         borderBottomWidth: 0,
-        padding: 8,
+        paddingVertical: 8,
         fontSize: 10,
         alignItems: "flex-start",
     },
@@ -106,13 +106,21 @@ const styles = StyleSheet.create({
         fontWeight: "normal",
     },
     tableCol40: {
-        width: "40%",
+        width: "38%",
         paddingRight: 8,
     },
     tableCol15: {
         width: "15%",
         textAlign: "right",
     },
+    tableCol12: {
+        width: "12%",
+        textAlign: "right",
+    },
+    tableCol18: {
+        width: "20%",
+        textAlign: "right",
+    },
     totals: {
         marginTop: 20,
         marginRight: 0,
@@ -128,15 +136,15 @@ const styles = StyleSheet.create({
     totalLabel: {
         marginRight: 8,
         color: "#6B7280",
-        fontSize: 14,
+        fontSize: 10,
         fontWeight: "normal",
         width: 120,
         textAlign: "right",
     },
     totalValue: {
-        minWidth: 100,
+        width: 160,
         textAlign: "right",
-        fontSize: 14,
+        fontSize: 10,
         fontWeight: "normal",
         color: "#374151",
     },
@@ -152,15 +160,15 @@ const styles = StyleSheet.create({
     totalLabelBold: {
         marginRight: 8,
         color: "#000",
-        fontSize: 16,
+        fontSize: 10,
         fontWeight: "bold",
         width: 120,
         textAlign: "right",
     },
     totalValueBold: {
-        minWidth: 100,
+        width: 160,
         textAlign: "right",
-        fontSize: 16,
+        fontSize: 10,
         fontWeight: "bold",
         color: "#000",
     },
@@ -205,7 +213,7 @@ const styles = StyleSheet.create({
     },
     invoiceLabel: {
         fontSize: 14,
-        marginRight: 4,
+        marginRight: 8,
         marginBottom: 4,
         fontFamily: "Helvetica",
         color: "#9ea0a2",
@@ -263,7 +271,8 @@ const formatDate = (dateString) => {
 const formatCurrency = (amount, currency) => {
     // Format number with appropriate decimal places
     const formattedAmount = formatNumber(amount);
-    return `${formattedAmount} ${currency}`;
+    // Use non-breaking space to keep currency inline with value
+    return `${formattedAmount}\u00A0${currency}`;
 };
 // Helper function to format numbers with appropriate decimal places
 function formatNumber(value) {
@@ -310,77 +319,50 @@ export const InvoicePDF = ({ invoice, fiatMode, }) => {
                                     }, children: [_jsxs(View, { style: {
                                                 flexDirection: "column",
                                                 alignItems: "flex-start",
+                                                marginRight: 0,
                                             }, children: [_jsx(Text, { style: {
-                                                        fontSize: 20,
+                                                        fontSize: 18,
                                                         fontWeight: "bold",
-                                                        marginBottom: 10,
-                                                        paddingRight: 65,
-                                                        marginRight: 20,
-                                                    }, children: invoice.issuer.name }), _jsxs(View, { children: [_jsx(Text, { style: styles.invoiceLabel, children: "Invoice number" }), _jsx(Text, { style: styles.invoiceNumber, children: invoice.invoiceNo })] })] }), _jsxs(View, { style: { alignItems: "flex-end" }, children: [_jsxs(Text, { style: styles.invoiceLabel, children: ["Invoice of (", invoice.currency, ")"] }), _jsx(Text, { style: [
-                                                        styles.invoiceNumber,
-                                                        { fontSize: 18, fontWeight: "bold" },
-                                                    ], children: formatNumber(invoice.totalPriceTaxIncl) })] })] }), _jsxs(View, { style: {
+                                                        marginBottom: 20,
+                                                        paddingRight: 100,
+                                                        marginRight: 0,
+                                                    }, hyphenationCallback: (word) => [word], children: invoice.issuer.name }), _jsxs(View, { style: {
+                                                        flexDirection: "row",
+                                                        alignItems: "flex-start",
+                                                        gap: 24,
+                                                        flexWrap: "nowrap",
+                                                    }, children: [_jsxs(View, { children: [_jsx(Text, { style: styles.invoiceLabel, children: "Invoice number" }), _jsx(Text, { style: styles.invoiceNumber, children: invoice.invoiceNo })] }), _jsxs(View, { style: {
+                                                                flexDirection: "row",
+                                                                gap: 20,
+                                                                alignItems: "flex-start",
+                                                            }, children: [_jsxs(View, { children: [_jsx(Text, { style: styles.invoiceLabel, children: "Invoice date" }), _jsx(Text, { style: styles.invoiceNumber, children: formatDate(invoice.dateIssued) })] }), invoice.dateDelivered && (_jsxs(View, { children: [_jsx(Text, { style: styles.invoiceLabel, children: "Delivery date" }), _jsx(Text, { style: styles.invoiceNumber, children: formatDate(invoice.dateDelivered) })] })), _jsxs(View, { children: [_jsx(Text, { style: styles.invoiceLabel, children: "Due date" }), _jsx(Text, { style: styles.invoiceNumber, children: formatDate(invoice.dateDue) })] }), _jsxs(View, { children: [_jsxs(Text, { style: styles.invoiceLabel, children: ["Invoice of ", invoice.currency] }), _jsx(Text, { style: [
+                                                                                styles.invoiceNumber,
+                                                                                { fontWeight: "bold" },
+                                                                            ], children: formatNumber(invoice.totalPriceTaxIncl) })] })] })] })] }), _jsx(View, {})] }), _jsxs(View, { style: {
                                         flexDirection: "row",
                                         justifyContent: "space-between",
                                         marginTop: 20,
                                     }, children: [_jsxs(View, { style: {
-                                                width: "50%",
+                                                width: "48%",
                                                 minWidth: 0,
                                                 flexDirection: "column",
-                                                paddingRight: 65,
+                                                paddingRight: 30,
+                                                marginRight: 20,
                                             }, children: [_jsx(Text, { style: styles.sectionTitle, children: "Issuer" }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Name:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.issuer.name })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Tax/Corp ID:" }), _jsx(Text, { style: styles.companyInfo, children: invoice.issuer.id
                                                                 ?.taxId ||
                                                                 invoice.issuer
                                                                     .id?.corpRegId ||
                                                                 "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Address:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.issuer.address?.streetAddress || "" })] }), invoice.issuer.address?.extendedAddress && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.issuer.address?.extendedAddress || "" })] })), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsxs(Text, { style: styles.companyInfo, wrap: true, children: [invoice.issuer.address?.city || "", ",", " ", invoice.issuer.address?.stateProvince || "", ",", " ", getCountryName(invoice.issuer.address?.country || "") || ""] })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Postcode:" }), _jsx(Text, { style: styles.companyInfo, children: invoice.issuer.address?.postalCode || "00000" })] }), invoice.issuer.contactInfo?.email && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Email:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.issuer.contactInfo.email })] }))] }), _jsxs(View, { style: {
-                                                width: "47%",
+                                                width: "48%",
                                                 minWidth: 0,
                                                 flexDirection: "column",
-                                            }, children: [_jsx(Text, { style: styles.sectionTitle, children: "Payer" }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Name:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.payer.name })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Tax/Corp ID:" }), _jsx(Text, { style: styles.companyInfo, children: invoice.payer.id?.taxId ||
+                                                paddingRight: 0,
+                                                marginRight: 10,
+                                            }, children: [_jsx(Text, { style: styles.sectionTitle, children: "Payer" }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Name:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, hyphenationCallback: (word) => [word], children: invoice.payer.name })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Tax/Corp ID:" }), _jsx(Text, { style: styles.companyInfo, children: invoice.payer.id?.taxId ||
                                                                 invoice.payer
                                                                     .id?.corpRegId ||
-                                                                "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Address:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.payer.address?.streetAddress || "" })] }), invoice.payer.address?.extendedAddress && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.payer.address?.extendedAddress || "" })] })), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsxs(Text, { style: styles.companyInfo, wrap: true, children: [invoice.payer.address?.city || "", ",", " ", invoice.payer.address?.stateProvince || "", ",", " ", getCountryName(invoice.payer.address?.country || "") ||
-                                                                    ""] })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Postcode:" }), _jsx(Text, { style: styles.companyInfo, children: invoice.payer.address?.postalCode || "00000" })] }), invoice.payer.contactInfo?.email && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Email:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.payer.contactInfo.email })] }))] }), _jsxs(View, { style: {
-                                                width: "30%",
-                                                alignItems: "flex-end",
-                                                textAlign: "right",
-                                            }, children: [_jsxs(View, { style: { marginBottom: 5, width: "100%" }, children: [_jsx(Text, { style: {
-                                                                color: "#9ea0a2",
-                                                                fontSize: 12,
-                                                                textAlign: "right",
-                                                                fontFamily: "Helvetica",
-                                                                fontWeight: "normal",
-                                                            }, children: "Invoice date" }), _jsx(Text, { style: {
-                                                                fontWeight: 4,
-                                                                fontSize: 12,
-                                                                textAlign: "right",
-                                                                color: "#000",
-                                                                fontFamily: "Helvetica",
-                                                            }, children: formatDate(invoice.dateIssued) })] }), invoice.dateDelivered && (_jsxs(View, { style: { marginBottom: 5, width: "100%" }, children: [_jsx(Text, { style: {
-                                                                color: "#9ea0a2",
-                                                                fontSize: 12,
-                                                                textAlign: "right",
-                                                                fontFamily: "Helvetica",
-                                                                fontWeight: "normal",
-                                                            }, children: "Delivery date" }), _jsx(Text, { style: {
-                                                                fontWeight: 4,
-                                                                fontSize: 12,
-                                                                textAlign: "right",
-                                                                color: "#000",
-                                                                fontFamily: "Helvetica",
-                                                            }, children: formatDate(invoice.dateDelivered) })] })), _jsxs(View, { style: { marginBottom: 5, width: "100%" }, children: [_jsx(Text, { style: {
-                                                                color: "#9ea0a2",
-                                                                fontSize: 12,
-                                                                textAlign: "right",
-                                                                fontFamily: "Helvetica",
-                                                                fontWeight: "normal",
-                                                            }, children: "Due date" }), _jsx(Text, { style: {
-                                                                fontWeight: 4,
-                                                                fontSize: 12,
-                                                                textAlign: "right",
-                                                                color: "#000",
-                                                                fontFamily: "Helvetica",
-                                                            }, children: formatDate(invoice.dateDue) })] })] })] }), _jsxs(View, { style: [styles.paymentSection, { marginLeft: 0 }], children: [_jsx(Text, { style: styles.sectionTitle, children: "Payment Information" }), fiatMode ? (_jsx("div", { children: _jsx(PaymentSectionFiat, { paymentRouting: invoice.issuer.paymentRouting }) })) : (_jsx(PaymentSectionCrypto, { paymentRouting: invoice.issuer.paymentRouting }))] })] })), _jsxs(View, { style: styles.table, children: [_jsxs(View, { style: styles.tableHeader, children: [_jsx(Text, { style: styles.tableCol40, children: "Description" }), _jsx(Text, { style: styles.tableCol15, children: "Quantity" }), _jsx(Text, { style: styles.tableCol15, children: "Unit Price" }), _jsx(Text, { style: styles.tableCol15, children: "Tax" }), _jsx(Text, { style: styles.tableCol15, children: "Total" })] }), items.map((item, index) => (_jsx(InvoiceLineItem, { item: item, currency: invoice.currency }, index + pageIndex * 1000)))] }), pageIndex === totalPages - 1 && (_jsx(_Fragment, { children: _jsxs(View, { style: { flexDirection: "row", gap: 20 }, children: [_jsxs(View, { style: {
+                                                                "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Address:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, hyphenationCallback: (word) => [word], children: invoice.payer.address?.streetAddress || "" })] }), invoice.payer.address?.extendedAddress && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, hyphenationCallback: (word) => [word] }), _jsx(Text, { style: styles.companyInfo, wrap: true, hyphenationCallback: (word) => [word], children: invoice.payer.address?.extendedAddress || "" })] })), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, hyphenationCallback: (word) => [word] }), _jsxs(Text, { style: styles.companyInfo, wrap: true, hyphenationCallback: (word) => [word], children: [invoice.payer.address?.city || "", ",", " ", invoice.payer.address?.stateProvince || "", ",", " ", getCountryName(invoice.payer.address?.country || "") ||
+                                                                    ""] })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Postcode:" }), _jsx(Text, { style: styles.companyInfo, hyphenationCallback: (word) => [word], children: invoice.payer.address?.postalCode || "" })] }), invoice.payer.contactInfo?.email && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Email:" }), _jsx(Text, { style: styles.companyInfo, wrap: true, children: invoice.payer.contactInfo.email })] }))] })] }), _jsxs(View, { style: [styles.paymentSection, { marginLeft: 0 }], children: [_jsx(Text, { style: styles.sectionTitle, children: "Payment Information" }), fiatMode ? (_jsx("div", { children: _jsx(PaymentSectionFiat, { paymentRouting: invoice.issuer.paymentRouting }) })) : (_jsx(PaymentSectionCrypto, { paymentRouting: invoice.issuer.paymentRouting }))] })] })), _jsxs(View, { style: styles.table, children: [_jsxs(View, { style: styles.tableHeader, children: [_jsx(Text, { style: styles.tableCol40, children: "Description" }), _jsx(Text, { style: styles.tableCol15, children: "Quantity" }), _jsx(Text, { style: styles.tableCol18, children: "Unit Price" }), _jsx(Text, { style: styles.tableCol12, children: "Tax" }), _jsx(Text, { style: styles.tableCol18, children: "Total" })] }), items.map((item, index) => (_jsx(InvoiceLineItem, { item: item, currency: invoice.currency }, index + pageIndex * 1000)))] }), pageIndex === totalPages - 1 && (_jsx(_Fragment, { children: _jsxs(View, { style: { flexDirection: "row", gap: 20 }, children: [_jsxs(View, { style: {
                                             flex: 1,
                                             marginTop: 20,
                                         }, children: [_jsx(Text, { style: [styles.sectionTitle, { marginBottom: 10 }], children: invoice.notes ? "Notes" : "" }), _jsx(Text, { style: styles.companyInfo, children: invoice.notes || "" })] }), _jsxs(View, { style: [styles.totals, { flex: 1 }], children: [_jsxs(View, { style: styles.totalRow, children: [_jsx(Text, { style: styles.totalLabel, children: "Subtotal" }), _jsx(Text, { style: styles.totalValue, children: formatCurrency(invoice.lineItems.reduce((sum, item) => sum + item.quantity * item.unitPriceTaxExcl, 0), invoice.currency) })] }), _jsxs(View, { style: styles.totalRow, children: [_jsx(Text, { style: styles.totalLabel, children: "Tax" }), _jsx(Text, { style: styles.totalValue, children: formatCurrency(invoice.lineItems.reduce((sum, item) => sum +
@@ -403,12 +385,21 @@ export const InvoicePDF = ({ invoice, fiatMode, }) => {
 }
 const PaymentSectionFiat = ({ paymentRouting, }) => {
     console.log("paymentRouting", paymentRouting.bank);
-    return (_jsxs(View, { style: [styles.gridContainer, { marginTop: 0, marginLeft: 0 }], children: [_jsxs(View, { style: styles.gridColumn, children: [_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Bank Name:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.name || "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Address:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.address?.streetAddress || "" })] }), paymentRouting.bank?.address?.extendedAddress && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.address?.extendedAddress })] })), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsxs(Text, { style: styles.companyInfo, children: [paymentRouting.bank?.address?.city || "", ",", " ", paymentRouting.bank?.address?.stateProvince || "", ",", " ", getCountryName(paymentRouting.bank?.address?.country || "") || ""] })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Postcode:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.address?.postalCode || "00000" })] })] }), _jsxs(View, { style: [styles.gridColumn], children: [_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Beneficiary:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.beneficiary || "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Acct No:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.accountNum || "" })] }), paymentRouting.bank?.ABA && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "ABA/ACH:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.ABA })] })), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "BIC/SWIFT:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.BIC || paymentRouting.bank?.SWIFT || "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Acct Type:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.accountType || "" })] }), paymentRouting.bank?.intermediaryBank?.accountNum && (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Bank:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.name })] }), paymentRouting.bank?.intermediaryBank?.accountNum && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Acct:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.accountNum })] })), paymentRouting.bank?.intermediaryBank?.accountType && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Type:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.accountType })] })), paymentRouting.bank?.intermediaryBank?.beneficiary && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Beneficiary:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.beneficiary })] })), paymentRouting.bank?.intermediaryBank?.ABA && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary ABA:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.ABA })] })), (paymentRouting.bank?.intermediaryBank?.BIC || paymentRouting.bank?.intermediaryBank?.SWIFT) && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary BIC/SWIFT:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.BIC || paymentRouting.bank?.intermediaryBank?.SWIFT })] })), paymentRouting.bank?.intermediaryBank?.address?.streetAddress && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Address:" }), _jsxs(Text, { style: styles.companyInfo, children: [paymentRouting.bank?.intermediaryBank?.address?.streetAddress, paymentRouting.bank?.intermediaryBank?.address?.extendedAddress &&
-                                                `, ${paymentRouting.bank?.intermediaryBank?.address?.extendedAddress}`] })] })), (paymentRouting.bank?.intermediaryBank?.address?.city || paymentRouting.bank?.intermediaryBank?.address?.stateProvince || paymentRouting.bank?.intermediaryBank?.address?.postalCode) && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Location:" }), _jsx(Text, { style: styles.companyInfo, children: [
+    return (_jsxs(View, { style: [styles.gridContainer, { marginTop: 0, marginLeft: 0 }], children: [_jsxs(View, { style: styles.gridColumn, children: [_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Bank Name:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.name || "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Address:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.address?.streetAddress || "" })] }), paymentRouting.bank?.address?.extendedAddress && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.address?.extendedAddress })] })), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel }), _jsxs(Text, { style: styles.companyInfo, children: [paymentRouting.bank?.address?.city || "", ",", " ", paymentRouting.bank?.address?.stateProvince || "", ",", " ", getCountryName(paymentRouting.bank?.address?.country || "") || ""] })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Postcode:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.address?.postalCode || "00000" })] })] }), _jsxs(View, { style: [styles.gridColumn], children: [_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Beneficiary:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.beneficiary || "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Acct No:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.accountNum || "" })] }), paymentRouting.bank?.ABA && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "ABA/ACH:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.ABA })] })), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "BIC/SWIFT:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.BIC || paymentRouting.bank?.SWIFT || "" })] }), _jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Acct Type:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.accountType || "" })] }), paymentRouting.bank?.intermediaryBank?.accountNum && (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Bank:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.name })] }), paymentRouting.bank?.intermediaryBank?.accountNum && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Acct:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.accountNum })] })), paymentRouting.bank?.intermediaryBank?.accountType && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Type:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.accountType })] })), paymentRouting.bank?.intermediaryBank?.beneficiary && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Beneficiary:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.beneficiary })] })), paymentRouting.bank?.intermediaryBank?.ABA && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary ABA:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.ABA })] })), (paymentRouting.bank?.intermediaryBank?.BIC ||
+                                paymentRouting.bank?.intermediaryBank?.SWIFT) && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary BIC/SWIFT:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.BIC ||
+                                            paymentRouting.bank?.intermediaryBank?.SWIFT })] })), paymentRouting.bank?.intermediaryBank?.address?.streetAddress && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Address:" }), _jsxs(Text, { style: styles.companyInfo, children: [paymentRouting.bank?.intermediaryBank?.address
+                                                ?.streetAddress, paymentRouting.bank?.intermediaryBank?.address
+                                                ?.extendedAddress &&
+                                                `, ${paymentRouting.bank?.intermediaryBank?.address?.extendedAddress}`] })] })), (paymentRouting.bank?.intermediaryBank?.address?.city ||
+                                paymentRouting.bank?.intermediaryBank?.address?.stateProvince ||
+                                paymentRouting.bank?.intermediaryBank?.address?.postalCode) && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Location:" }), _jsx(Text, { style: styles.companyInfo, children: [
                                             paymentRouting.bank?.intermediaryBank?.address?.city,
-                                            paymentRouting.bank?.intermediaryBank?.address?.stateProvince,
-                                            paymentRouting.bank?.intermediaryBank?.address?.postalCode
-                                        ].filter(Boolean).join(', ') })] })), paymentRouting.bank?.intermediaryBank?.address?.country && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Country:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.address?.country })] })), paymentRouting.bank?.intermediaryBank?.memo && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Memo:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.memo })] }))] }))] })] }));
+                                            paymentRouting.bank?.intermediaryBank?.address
+                                                ?.stateProvince,
+                                            paymentRouting.bank?.intermediaryBank?.address?.postalCode,
+                                        ]
+                                            .filter(Boolean)
+                                            .join(", ") })] })), paymentRouting.bank?.intermediaryBank?.address?.country && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Country:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.address?.country })] })), paymentRouting.bank?.intermediaryBank?.memo && (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: styles.companyInfoLabel, children: "Intermediary Memo:" }), _jsx(Text, { style: styles.companyInfo, children: paymentRouting.bank?.intermediaryBank?.memo })] }))] }))] })] }));
 };
 {
     /* New component for crypto payment section */
@@ -417,6 +408,4 @@ const PaymentSectionCrypto = ({ paymentRouting, }) => (_jsx(View, { style: style
 {
     /* New component for line items */
 }
-const InvoiceLineItem = ({ item, currency, }) => (_jsxs(View, { style: styles.tableRow, children: [_jsxs(View, { style: styles.tableCol40, children: [_jsx(Text, { style: styles.itemName, children: item.description }), item.longDescription && (_jsx(Text, { style: styles.itemDescription, children: item.longDescription }))] }), _jsx(Text, { style: styles.tableCol15, children: item.quantity % 1 === 0
-                ? item.quantity.toString()
-                : item.quantity.toFixed(2) }), _jsx(Text, { style: styles.tableCol15, children: formatCurrency(item.unitPriceTaxExcl, currency) }), _jsx(Text, { style: styles.tableCol15, children: formatCurrency(item.unitPriceTaxIncl - item.unitPriceTaxExcl, currency) }), _jsx(Text, { style: styles.tableCol15, children: formatCurrency(item.quantity * item.unitPriceTaxIncl, currency) })] }));
+const InvoiceLineItem = ({ item, currency, }) => (_jsxs(View, { style: styles.tableRow, children: [_jsxs(View, { style: styles.tableCol40, children: [_jsx(Text, { style: styles.itemName, hyphenationCallback: (word) => [word], children: item.description }), item.longDescription && (_jsx(Text, { style: styles.itemDescription, hyphenationCallback: (word) => [word], children: item.longDescription }))] }), _jsx(Text, { style: styles.tableCol15, children: item.quantity.toFixed(2) }), _jsx(Text, { style: styles.tableCol18, children: formatCurrency(item.unitPriceTaxExcl, currency) }), _jsx(Text, { style: styles.tableCol12, children: formatNumber(item.unitPriceTaxIncl - item.unitPriceTaxExcl) }), _jsx(Text, { style: styles.tableCol18, children: formatCurrency(item.quantity * item.unitPriceTaxIncl, currency) })] }));

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.94",
   "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",