@powerhousedao/contributor-billing 0.1.37 → 0.1.40

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useMemo, useState, useEffect } from "react";
+import React, { useMemo } from "react";
 import { addDocument, dispatchActions, setSelectedNode, useSelectedDrive, useDocumentsInSelectedDrive, } from "@powerhousedao/reactor-browser";
 import { toast } from "@powerhousedao/design-system/connect";
 import { actions as invoiceActions } from "../../../../document-models/invoice/index.js";
@@ -48,18 +48,42 @@ const statusColors = {
 };
 // Table header component
 const TableHeader = ({ showIssuer = true, showBillingStatement = false, }) => (_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50 font-medium text-gray-500 text-xs", children: [_jsx("th", { className: "px-2 py-2 w-8 rounded-tl-sm" }), _jsx("th", { className: "px-2 py-2 text-center", children: showIssuer ? "Issuer" : "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" }), showBillingStatement && (_jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" })), _jsx("th", { className: "px-2 py-2 rounded-tr-sm text-center", children: "Exported" })] }) }));
-export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentModels, onSelectDocumentModel, getDocDispatcher, selectedStatuses, onStatusChange, onRowSelection, canExportSelectedRows, }) => {
+export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentModels, onSelectDocumentModel, getDocDispatcher, selectedStatuses, onStatusChange, onRowSelection, canExportSelectedRows, monthName, reportingFolderId, }) => {
     const [selectedDrive] = useSelectedDrive();
-    // State to track when export actions complete, triggering page refresh
-    const [actionsCompleted, setActionsCompleted] = useState(0);
     // Get documents directly from the hook - this will automatically update when documents change
-    const allDocuments = useDocumentsInSelectedDrive() || [];
-    // Refresh page when actions complete to ensure state is updated
-    useEffect(() => {
-        if (actionsCompleted > 0) {
-            window.location.reload();
+    const documentsInDrive = useDocumentsInSelectedDrive() || [];
+    // Check if an expense report already exists for the current month
+    const existingExpenseReport = useMemo(() => {
+        if (!monthName || !documentsInDrive)
+            return null;
+        const monthLower = monthName.toLowerCase();
+        return documentsInDrive.find((doc) => doc.header.documentType === "powerhouse/expense-report" &&
+            doc.header.name?.toLowerCase().includes(monthLower));
+    }, [documentsInDrive, monthName]);
+    // Build a set of file IDs from the files prop for quick lookup
+    const fileIds = useMemo(() => {
+        return new Set(files.map((f) => f.id));
+    }, [files]);
+    // Build a map of document IDs to documents for quick lookup
+    const documentsById = useMemo(() => {
+        const map = new Map();
+        for (const doc of documentsInDrive) {
+            map.set(doc.header.id, doc);
         }
-    }, [actionsCompleted]);
+        return map;
+    }, [documentsInDrive]);
+    // Filter documents to only those in the current folder (matching the files prop)
+    const allDocuments = useMemo(() => {
+        const filtered = documentsInDrive.filter((doc) => fileIds.has(doc.header.id));
+        return filtered;
+    }, [documentsInDrive, fileIds]);
+    // Find files that are in the folder but don't have document content loaded yet
+    // These are "loading" files that need to show a placeholder
+    const loadingFileIds = useMemo(() => {
+        return files
+            .filter((f) => f.documentType === "powerhouse/invoice" && !documentsById.has(f.id))
+            .map((f) => f.id);
+    }, [files, documentsById]);
     // Helper function to map invoice document to InvoiceRowData
     const mapInvoiceToRowData = (doc) => {
         const state = doc.state;
@@ -212,8 +236,12 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
             return;
         }
         const invoiceState = invoiceDoc.state.global;
+        // Get the target folder (same as invoice's folder)
+        const targetFolder = invoiceFile?.parentFolder;
         try {
-            const createdNode = await addDocument(selectedDrive?.header.id || "", `bill-${invoiceFile?.name || id}`, "powerhouse/billing-statement", undefined, undefined, undefined, "powerhouse-billing-statement-editor");
+            // Create billing statement directly in the target folder (avoids race condition with move)
+            const createdNode = await addDocument(selectedDrive?.header.id || "", `bill-${invoiceFile?.name || id}`, "powerhouse/billing-statement", targetFolder ?? undefined, // Create directly in the payments folder
+            undefined, undefined, "powerhouse-billing-statement-editor");
             if (!createdNode?.id) {
                 toast("Failed to create billing statement", { type: "error" });
                 return;
@@ -266,7 +294,6 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
             }
             if (tagActions.length > 0) {
                 await dispatchActions(tagActions, createdNode.id);
-                window.location.reload();
             }
             toast("Billing statement created successfully", { type: "success" });
         }
@@ -298,8 +325,6 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
                 ], invoice.header.id);
             }
             setSelected({});
-            // Trigger page refresh after all actions complete
-            setActionsCompleted((prev) => prev + 1);
         }
         catch (error) {
             console.error("Error exporting invoices:", error);
@@ -342,8 +367,28 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
             }
         }
     };
-    // Check for expense report document - simple computed value
-    const expenseReportDoc = files.find((file) => file.documentType === "powerhouse/expense-report");
+    // Check for expense report document in the Reporting folder (not Payments folder)
+    // We need to look at documentsInDrive and check if any expense report is in the reportingFolderId
+    const expenseReportDoc = useMemo(() => {
+        if (!reportingFolderId || !selectedDrive)
+            return undefined;
+        // Get all nodes from the drive to check parent folders
+        const nodes = selectedDrive.state.global.nodes;
+        // Find expense report documents that are in the reporting folder
+        for (const doc of documentsInDrive) {
+            if (doc.header.documentType === "powerhouse/expense-report") {
+                // Find the file node to check its parent folder
+                const fileNode = nodes.find((n) => n.id === doc.header.id);
+                if (fileNode &&
+                    "parentFolder" in fileNode &&
+                    fileNode.parentFolder === reportingFolderId) {
+                    // Return the file node (for consistency with the rest of the code)
+                    return fileNode;
+                }
+            }
+        }
+        return undefined;
+    }, [documentsInDrive, reportingFolderId, selectedDrive]);
     // Check if billing statements exist - memoized to update when allDocuments changes
     const hasBillingStatements = useMemo(() => {
         return allDocuments.some((doc) => doc.header.documentType === "powerhouse/billing-statement");
@@ -356,7 +401,8 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
         else {
             const expenseReportModel = filteredDocumentModels.find((model) => model.id === "powerhouse/expense-report");
             if (expenseReportModel) {
-                const createdNode = await addDocument(selectedDrive?.header.id || "", "expense-report", "powerhouse/expense-report", undefined, undefined, undefined, "powerhouse-expense-report-editor");
+                const createdNode = await addDocument(selectedDrive?.header.id || "", "expense-report", "powerhouse/expense-report", reportingFolderId, // Create in the Reporting folder (sibling of Payments)
+                undefined, undefined, "powerhouse-expense-report-editor");
                 if (createdNode?.id) {
                     setSelectedNode(createdNode.id);
                 }
@@ -382,7 +428,7 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
         const { showIssuer = true, showBillingStatement = false, showCreateButton = false, } = options || {};
         return (_jsx(InvoiceTableSection, { title: title, count: data.length, color: statusColors[status] || statusColors.OTHER, onSelectDocumentModel: showCreateButton ? onSelectDocumentModel : undefined, filteredDocumentModels: showCreateButton ? filteredDocumentModels : undefined, children: _jsxs("table", { className: "w-full text-sm rounded-sm border-separate border-spacing-0 border border-gray-300 overflow-hidden", children: [_jsx(TableHeader, { showIssuer: showIssuer, showBillingStatement: showBillingStatement }), _jsx("tbody", { children: data.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates, showIssuerColumn: showIssuer, showBillingStatementColumn: showBillingStatement }, row.id))) })] }) }));
     };
-    return (_jsxs("div", { className: "contributor-billing-table w-full h-full bg-white rounded-lg p-4 border border-gray-200 shadow-sm mt-4 overflow-x-auto", children: [_jsx(HeaderControls, { statusOptions: statusOptions, selectedStatuses: selectedStatuses, onStatusChange: onStatusChange, onExport: handleCSVExport, onExpenseReportExport: handleExpenseReportExport, createIntegrationsDocument: createIntegrationsDocument, integrationsDoc: integrationsDoc, hasBillingStatements: hasBillingStatements, expenseReportDoc: expenseReportDoc, onCreateOrOpenExpenseReport: handleCreateOrOpenExpenseReport, selected: selected, handleCreateBillingStatement: handleCreateBillingStatement, setSelected: setSelected, invoices: invoicesDocs, billingStatements: billingStatementDocs, canExportSelectedRows: canExportSelectedRows }), renderSection("DRAFT", "Draft", draft, {
+    return (_jsxs("div", { className: "contributor-billing-table w-full h-full bg-white rounded-lg p-4 border border-gray-200 shadow-sm mt-4 overflow-x-auto", children: [_jsx(HeaderControls, { statusOptions: statusOptions, selectedStatuses: selectedStatuses, onStatusChange: onStatusChange, onExport: handleCSVExport, onExpenseReportExport: handleExpenseReportExport, createIntegrationsDocument: createIntegrationsDocument, integrationsDoc: integrationsDoc, hasBillingStatements: hasBillingStatements, expenseReportDoc: expenseReportDoc, existingExpenseReportForMonth: existingExpenseReport, onCreateOrOpenExpenseReport: handleCreateOrOpenExpenseReport, selected: selected, handleCreateBillingStatement: handleCreateBillingStatement, setSelected: setSelected, invoices: invoicesDocs, billingStatements: billingStatementDocs, canExportSelectedRows: canExportSelectedRows }), renderSection("DRAFT", "Draft", draft, {
                 showIssuer: false,
                 showCreateButton: true,
             }), renderSection("ISSUED", "Issued", issued, {
@@ -395,5 +441,8 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
                 showBillingStatement: true,
             }), renderSection("PAYMENTISSUE", "Payment Issue", paymentIssue, {
                 showBillingStatement: true,
-            }), renderSection("PAYMENTCLOSED", "Payment Closed", paymentClosed), renderSection("REJECTED", "Rejected", rejected), renderSection("OTHER", "Other", otherInvoices)] }));
+            }), renderSection("PAYMENTCLOSED", "Payment Closed", paymentClosed), renderSection("REJECTED", "Rejected", rejected), renderSection("OTHER", "Other", otherInvoices), loadingFileIds.length > 0 && (_jsx(InvoiceTableSection, { title: "Loading", count: loadingFileIds.length, color: "bg-gray-100 text-gray-600", children: _jsxs("table", { className: "w-full text-sm rounded-sm border-separate border-spacing-0 border border-gray-300 overflow-hidden", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50 font-medium text-gray-500 text-xs", children: [_jsx("th", { className: "px-2 py-2 w-8 rounded-tl-sm" }), _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 rounded-tr-sm text-center", children: "Status" })] }) }), _jsx("tbody", { children: loadingFileIds.map((id) => {
+                                const file = files.find((f) => f.id === id);
+                                return (_jsxs("tr", { className: "border-t border-gray-200 animate-pulse", children: [_jsx("td", { className: "px-2 py-2" }), _jsx("td", { className: "px-2 py-2 text-center text-gray-400", children: file?.name || "Loading..." }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-16 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-20 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-20 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-12 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-16 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("span", { className: "text-xs text-gray-400", children: "Loading..." }) })] }, id));
+                            }) })] }) }))] }));
 };

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

@@ -1,6 +1,15 @@
+interface InvoiceTableContainerProps {
+    /** The ID of the payments folder to filter invoices by */
+    folderId: string;
+    /** The month name (e.g., "January 2026") for checking existing reports */
+    monthName?: string;
+    /** The sibling Reporting folder ID where expense reports should be created */
+    reportingFolderId?: string;
+}
 /**
  * Container that renders the InvoiceTable.
  * Uses useNodesInSelectedDriveOrFolder pattern to avoid freeze issues.
  */
-export declare function InvoiceTableContainer(): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceTableContainer({ folderId, monthName, reportingFolderId, }: InvoiceTableContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=InvoiceTableContainer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceTableContainer.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTableContainer.tsx"],"names":[],"mappings":"AAaA;;;GAGG;AACH,wBAAgB,qBAAqB,4CAqKpC"}
+{"version":3,"file":"InvoiceTableContainer.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTableContainer.tsx"],"names":[],"mappings":"AAmBA,UAAU,0BAA0B;IAClC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,iBAAiB,GAClB,EAAE,0BAA0B,2CAiT5B"}

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

@@ -1,64 +1,154 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useCallback, useRef } from "react";
-import { useNodesInSelectedDriveOrFolder, isFileNodeKind, useDocumentModelModules, showCreateDocumentModal, useDocumentsInSelectedDrive, useOnDropFile, } from "@powerhousedao/reactor-browser";
+import { useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { isFileNodeKind, useDocumentModelModules, useDocumentsInSelectedDrive, useSelectedDrive, useOnDropFile, dispatchActions, addDocument, setSelectedNode, } from "@powerhousedao/reactor-browser";
+import { toast } from "@powerhousedao/design-system/connect";
+import { moveNode } from "document-drive";
 import { InvoiceTable } from "./InvoiceTable.js";
 /**
  * Container that renders the InvoiceTable.
  * Uses useNodesInSelectedDriveOrFolder pattern to avoid freeze issues.
  */
-export function InvoiceTableContainer() {
+export function InvoiceTableContainer({ folderId, monthName, reportingFolderId, }) {
     const [selected, setSelected] = useState({});
     const [selectedStatuses, setSelectedStatuses] = useState([]);
     const containerRef = useRef(null);
     const pendingFilesRef = useRef(new Set());
+    // Track file names that were dropped into THIS specific folder view
+    // Using state (not ref) so changes trigger re-renders and useEffect runs
+    const [droppedFileNames, setDroppedFileNames] = useState(() => new Map());
     const documentModelModules = useDocumentModelModules();
-    // Use the simple pattern - just nodes, no document fetching
-    const nodes = useNodesInSelectedDriveOrFolder();
-    const fileNodes = nodes.filter((n) => isFileNodeKind(n));
+    const [driveDocument] = useSelectedDrive();
     const allDocuments = useDocumentsInSelectedDrive();
+    // Filter file nodes to only those in the specific payments folder
+    // Access drive nodes directly (same approach as HeaderStats)
+    const fileNodes = useMemo(() => {
+        if (!driveDocument)
+            return [];
+        const nodes = driveDocument.state.global.nodes;
+        const fileNodesInFolder = nodes.filter((n) => isFileNodeKind(n) && n.parentFolder === folderId);
+        return fileNodesInFolder;
+    }, [driveDocument, folderId]);
     // Get the drop file handler
     const onDropFile = useOnDropFile();
     // Handle file drop
+    const driveId = driveDocument?.header.id;
+    // Watch for files that we explicitly dropped and move them if needed
+    // This handles the case where conflict resolution creates files at root
+    useEffect(() => {
+        if (!driveDocument || !driveId || !folderId)
+            return;
+        if (droppedFileNames.size === 0)
+            return;
+        const nodes = driveDocument.state.global.nodes;
+        // Check each file name we're tracking
+        for (const [fileName, targetFolderId] of droppedFileNames.entries()) {
+            // Only process if this is the target folder for this file
+            if (targetFolderId !== folderId)
+                continue;
+            // Find the file by name that's not in the correct folder
+            // Also match files with similar names (e.g., "freshInvoice (1)" matches "freshInvoice")
+            const fileNode = nodes.find((n) => {
+                if (!isFileNodeKind(n))
+                    return false;
+                const fn = n;
+                // Only match invoice documents
+                if (fn.documentType !== "powerhouse/invoice")
+                    return false;
+                // Check if file is not in the target folder (at root or elsewhere)
+                if (fn.parentFolder === targetFolderId)
+                    return false;
+                // Match exact name or name with conflict suffix like "(1)"
+                const nameMatches = fn.name === fileName || fn.name.startsWith(fileName + " (");
+                return nameMatches;
+            });
+            if (fileNode) {
+                // Remove from tracking since we found it
+                setDroppedFileNames((prev) => {
+                    const next = new Map(prev);
+                    next.delete(fileName);
+                    return next;
+                });
+                // Move the file to the correct folder
+                dispatchActions(moveNode({
+                    srcFolder: fileNode.id,
+                    targetParentFolder: targetFolderId,
+                }), driveId).catch((error) => {
+                    console.error("[InvoiceTableContainer] Move failed:", error);
+                });
+            }
+        }
+    }, [driveDocument, driveId, folderId, droppedFileNames]);
     const handleDrop = useCallback(async (event) => {
         event.preventDefault();
         event.stopPropagation();
         const files = Array.from(event.dataTransfer.files);
         if (files.length === 0)
             return;
-        if (!onDropFile)
+        if (!onDropFile || !driveId)
+            return;
+        // Filter to only accept .phd files (Powerhouse document archives)
+        const phdFiles = files.filter((file) => file.name.endsWith(".phd"));
+        const rejectedFiles = files.filter((file) => !file.name.endsWith(".phd"));
+        // Show error for rejected files
+        if (rejectedFiles.length > 0) {
+            const rejectedNames = rejectedFiles.map((f) => f.name).join(", ");
+            toast(`Only .phd files (Powerhouse documents) can be dropped here. Rejected: ${rejectedNames}`, { type: "error" });
+        }
+        if (phdFiles.length === 0)
             return;
         // Track all files being processed
-        files.forEach((file) => pendingFilesRef.current.add(file));
-        // Process all files
-        const filePromises = files.map(async (file) => {
+        const fileBaseNames = [];
+        phdFiles.forEach((file) => {
+            pendingFilesRef.current.add(file);
+            const fileBaseName = file.name.replace(/\.phd$/, "");
+            fileBaseNames.push(fileBaseName);
+        });
+        // Update state to track file names -> target folder
+        // This triggers useEffect to check for misplaced files
+        setDroppedFileNames((prev) => {
+            const next = new Map(prev);
+            fileBaseNames.forEach((name) => next.set(name, folderId));
+            return next;
+        });
+        // Process all files - React state updates automatically via hooks
+        const filePromises = phdFiles.map(async (file) => {
+            const fileBaseName = file.name.replace(/\.phd$/, "");
             try {
-                await onDropFile(file, (progress) => {
-                    // Handle progress updates if needed
-                    if (progress.stage === "complete" || progress.stage === "failed") {
+                const fileNode = await onDropFile(file, (progress) => {
+                    if (progress.stage === "complete" ||
+                        progress.stage === "failed") {
                         pendingFilesRef.current.delete(file);
-                        // If all files are done, reload the page
-                        if (pendingFilesRef.current.size === 0) {
-                            window.location.reload();
-                        }
                     }
                 });
+                // Move the uploaded file to the correct folder
+                if (fileNode && folderId) {
+                    try {
+                        await dispatchActions(moveNode({
+                            srcFolder: fileNode.id,
+                            targetParentFolder: folderId,
+                        }), driveId);
+                        // Successfully moved, remove from tracking
+                        setDroppedFileNames((prev) => {
+                            const next = new Map(prev);
+                            next.delete(fileBaseName);
+                            return next;
+                        });
+                    }
+                    catch (moveError) {
+                        console.error("[InvoiceTableContainer] Move failed:", moveError);
+                        // Keep in tracking so useEffect can retry
+                    }
+                }
+                // If fileNode is null (conflict resolution), keep in tracking so useEffect can handle it
             }
             catch (error) {
                 console.error("Error dropping file:", error);
                 pendingFilesRef.current.delete(file);
-                // If all files are done (including failed ones), reload
-                if (pendingFilesRef.current.size === 0) {
-                    window.location.reload();
-                }
+                // Keep in tracking - conflict resolution might still create the file
             }
         });
-        // Wait for all files to complete
         await Promise.allSettled(filePromises);
-        // Final check - reload if all files are done
-        if (pendingFilesRef.current.size === 0) {
-            window.location.reload();
-        }
-    }, [onDropFile]);
+    }, [onDropFile, driveId, folderId]);
     const handleDragOver = useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -83,10 +173,33 @@ export function InvoiceTableContainer() {
     const getDocDispatcher = useCallback((_id) => {
         return null;
     }, []);
-    // Handle document model selection for create modal
-    const onSelectDocumentModel = useCallback((documentModel) => {
-        showCreateDocumentModal(documentModel.id);
-    }, []);
+    // Handle document model selection - create invoice directly in the payments folder
+    const onSelectDocumentModel = useCallback(async (documentModel, name) => {
+        if (!driveId) {
+            toast("No drive selected", { type: "error" });
+            return;
+        }
+        try {
+            // Create a new invoice document directly in the payments folder
+            const createdNode = await addDocument(driveId, name, documentModel.id, folderId, // Create directly in the payments folder
+            undefined, undefined, "powerhouse-invoice-editor");
+            if (createdNode?.id) {
+                // Small delay to allow the drive state to sync before selecting the node
+                // This prevents the Sidebar from trying to find a node that doesn't exist yet
+                setTimeout(() => {
+                    setSelectedNode(createdNode.id);
+                }, 100);
+                toast("Invoice created successfully", { type: "success" });
+            }
+            else {
+                toast("Failed to create invoice", { type: "error" });
+            }
+        }
+        catch (error) {
+            console.error("Error creating invoice:", error);
+            toast("Failed to create invoice", { type: "error" });
+        }
+    }, [driveId, folderId]);
     // Determine if CSV export should be enabled based on selected rows
     const canExportSelectedRows = useCallback(() => {
         const allowedStatuses = [
@@ -107,5 +220,5 @@ export function InvoiceTableContainer() {
         return selectedRows.every((row) => allowedStatuses.includes(row.state.global
             .status));
     }, [selected, allDocuments]);
-    return (_jsx("div", { ref: containerRef, className: "w-full h-full", onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, children: _jsx(InvoiceTable, { files: fileNodes, selected: selected, setSelected: setSelected, filteredDocumentModels: documentModelModules || [], onSelectDocumentModel: onSelectDocumentModel, getDocDispatcher: getDocDispatcher, selectedStatuses: selectedStatuses, onStatusChange: handleStatusChange, onRowSelection: handleRowSelection, canExportSelectedRows: canExportSelectedRows }) }));
+    return (_jsx("div", { ref: containerRef, className: "w-full h-full", onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, children: _jsx(InvoiceTable, { files: fileNodes, selected: selected, setSelected: setSelected, filteredDocumentModels: documentModelModules || [], onSelectDocumentModel: onSelectDocumentModel, getDocDispatcher: getDocDispatcher, selectedStatuses: selectedStatuses, onStatusChange: handleStatusChange, onRowSelection: handleRowSelection, canExportSelectedRows: canExportSelectedRows, monthName: monthName, reportingFolderId: reportingFolderId }) }));
 }

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":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE;QACT,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,iBAAiB,CAAC,EAAE,OAAO,EAAE,CAAC;KAC/B,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,GAAG,EAAE,cAAc,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AAoCD,eAAO,MAAM,eAAe,GAAI,iIAS7B,oBAAoB,4CA2GtB,CAAC"}
+{"version":3,"file":"InvoiceTableRow.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE;QACT,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,iBAAiB,CAAC,EAAE,OAAO,EAAE,CAAC;KAC/B,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,GAAG,EAAE,cAAc,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC;AA0CD,eAAO,MAAM,eAAe,GAAI,iIAS7B,oBAAoB,4CA2GtB,CAAC"}

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

@@ -34,6 +34,11 @@ const formatAmount = (amount) => {
         maximumFractionDigits: 2,
     });
 };
+/** Format a date string without timezone conversion */
+const formatDateUTC = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString(undefined, { timeZone: "UTC" });
+};
 export const InvoiceTableRow = ({ files, row, isSelected, onSelect, onCreateBillingStatement, billingDocStates, showIssuerColumn = true, showBillingStatementColumn = false, }) => {
     // Simple computed values like old working code
     const billingDoc = billingDocStates?.find((doc) => doc.contributor === row.id);
@@ -51,5 +56,5 @@ export const InvoiceTableRow = ({ files, row, isSelected, onSelect, onCreateBill
     const canShowBillingStatementButton = showBillingStatementColumn &&
         allowedStatuses.includes(row.status) &&
         !billingFile;
-    return (_jsxs("tr", { className: "hover:bg-gray-50 transition-colors", children: [_jsx("td", { className: "px-2 py-2", children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => onSelect(e.target.checked), className: "w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" }) }), _jsx("td", { className: "py-1 px-2", children: showIssuerColumn ? (invoiceFile ? (_jsx(FileItem, { fileNode: invoiceFile, className: "h-10" })) : (_jsx("span", { className: "text-gray-500", children: row.issuer || "Unknown" }))) : invoiceFile ? (_jsx(FileItem, { fileNode: invoiceFile, className: "h-10" })) : (_jsx("span", { className: "text-gray-400", children: "-" })) }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.invoiceNo || "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.issueDate ? new Date(row.issueDate).toLocaleDateString() : "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.dueDate ? new Date(row.dueDate).toLocaleDateString() : "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.currency || "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm font-medium text-gray-800", children: formatAmount(row.amount) }), showBillingStatementColumn && (_jsx("td", { className: "px-2 py-2 text-center", children: canShowBillingStatementButton ? (_jsx("button", { type: "button", className: "bg-white border border-gray-300 rounded px-3 py-1 text-xs font-medium hover:bg-gray-50 transition-colors", onClick: () => onCreateBillingStatement?.(row.id), children: "Generate Billing Statement" })) : billingFile ? (_jsx(FileItem, { fileNode: billingFile, className: "h-10" })) : null })), _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-600 text-sm font-medium", children: "Yes" }), _jsx("span", { className: "text-green-600 text-xs", children: formatTimestamp(row.exported.timestamp) })] })) : (_jsx("span", { className: "text-red-500 text-sm", children: "No" })) })] }));
+    return (_jsxs("tr", { className: "hover:bg-gray-50 transition-colors", children: [_jsx("td", { className: "px-2 py-2", children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: (e) => onSelect(e.target.checked), className: "w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500" }) }), _jsx("td", { className: "py-1 px-2", children: showIssuerColumn ? (invoiceFile ? (_jsx(FileItem, { fileNode: invoiceFile, className: "h-10" })) : (_jsx("span", { className: "text-gray-500", children: row.issuer || "Unknown" }))) : invoiceFile ? (_jsx(FileItem, { fileNode: invoiceFile, className: "h-10" })) : (_jsx("span", { className: "text-gray-400", children: "-" })) }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.invoiceNo || "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.issueDate ? formatDateUTC(row.issueDate) : "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.dueDate ? formatDateUTC(row.dueDate) : "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm text-gray-700", children: row.currency || "-" }), _jsx("td", { className: "px-2 py-2 text-center text-sm font-medium text-gray-800", children: formatAmount(row.amount) }), showBillingStatementColumn && (_jsx("td", { className: "px-2 py-2 text-center", children: canShowBillingStatementButton ? (_jsx("button", { type: "button", className: "bg-white border border-gray-300 rounded px-3 py-1 text-xs font-medium hover:bg-gray-50 transition-colors", onClick: () => onCreateBillingStatement?.(row.id), children: "Generate Billing Statement" })) : billingFile ? (_jsx(FileItem, { fileNode: billingFile, className: "h-10" })) : null })), _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-600 text-sm font-medium", children: "Yes" }), _jsx("span", { className: "text-green-600 text-xs", children: formatTimestamp(row.exported.timestamp) })] })) : (_jsx("span", { className: "text-red-500 text-sm", children: "No" })) })] }));
 };

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

@@ -4,7 +4,7 @@ interface InvoiceTableSectionProps {
     count: number;
     children: React.ReactNode;
     color?: string;
-    onSelectDocumentModel?: (model: VetraDocumentModelModule) => void;
+    onSelectDocumentModel?: (model: VetraDocumentModelModule, name: string) => void;
     filteredDocumentModels?: VetraDocumentModelModule[];
     defaultExpanded?: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"InvoiceTableSection.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTableSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE/E,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAClE,sBAAsB,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,GAAI,oGAQjC,wBAAwB,4CAoD1B,CAAC"}
+{"version":3,"file":"InvoiceTableSection.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTableSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE/E,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,CACtB,KAAK,EAAE,wBAAwB,EAC/B,IAAI,EAAE,MAAM,KACT,IAAI,CAAC;IACV,sBAAsB,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB,GAAI,oGAQjC,wBAAwB,4CAiJ1B,CAAC"}

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

@@ -1,16 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { ChevronDown, ChevronRight, X } from "lucide-react";
 export const InvoiceTableSection = ({ title, count, children, color = "bg-blue-100 text-blue-600", onSelectDocumentModel, filteredDocumentModels, defaultExpanded = true, }) => {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [invoiceName, setInvoiceName] = useState("");
+    const inputRef = useRef(null);
     const invoiceDocModel = filteredDocumentModels?.find((model) => model.id === "powerhouse/invoice");
     const handleToggle = useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);
-    const handleCreateInvoice = useCallback(() => {
-        if (invoiceDocModel) {
-            onSelectDocumentModel?.(invoiceDocModel);
+    const handleOpenModal = useCallback(() => {
+        setInvoiceName("");
+        setIsModalOpen(true);
+    }, []);
+    const handleCloseModal = useCallback(() => {
+        setIsModalOpen(false);
+        setInvoiceName("");
+    }, []);
+    const handleConfirmCreate = useCallback(() => {
+        if (invoiceDocModel && invoiceName.trim()) {
+            onSelectDocumentModel?.(invoiceDocModel, invoiceName.trim());
+            handleCloseModal();
+        }
+    }, [invoiceDocModel, invoiceName, onSelectDocumentModel, handleCloseModal]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Enter" && invoiceName.trim()) {
+            handleConfirmCreate();
+        }
+        else if (e.key === "Escape") {
+            handleCloseModal();
+        }
+    }, [invoiceName, handleConfirmCreate, handleCloseModal]);
+    // Focus input when modal opens
+    useEffect(() => {
+        if (isModalOpen && inputRef.current) {
+            inputRef.current.focus();
         }
-    }, [invoiceDocModel, onSelectDocumentModel]);
-    return (_jsxs("div", { className: "contributor-billing-section mb-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("button", { type: "button", onClick: handleToggle, className: "flex items-center gap-2 hover:opacity-80 transition-opacity py-1", children: [_jsx("span", { className: "font-medium text-gray-800", children: title }), _jsx("span", { className: `inline-flex items-center justify-center rounded-full text-xs font-semibold px-2 py-0.5 min-w-[24px] ${color}`, children: count }), isExpanded ? (_jsx(ChevronDown, { className: "w-4 h-4 text-gray-600" })) : (_jsx(ChevronRight, { className: "w-4 h-4 text-gray-600" }))] }), title === "Draft" && invoiceDocModel && (_jsx("button", { type: "button", className: "bg-white border border-gray-300 rounded px-3 py-1 text-sm font-medium hover:bg-gray-50 transition-colors", onClick: handleCreateInvoice, children: "Create Invoice" }))] }), isExpanded && _jsx("div", { className: "mt-2", children: children })] }));
+    }, [isModalOpen]);
+    return (_jsxs("div", { className: "contributor-billing-section mb-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("button", { type: "button", onClick: handleToggle, className: "flex items-center gap-2 hover:opacity-80 transition-opacity py-1", children: [_jsx("span", { className: "font-medium text-gray-800", children: title }), _jsx("span", { className: `inline-flex items-center justify-center rounded-full text-xs font-semibold px-2 py-0.5 min-w-[24px] ${color}`, children: count }), isExpanded ? (_jsx(ChevronDown, { className: "w-4 h-4 text-gray-600" })) : (_jsx(ChevronRight, { className: "w-4 h-4 text-gray-600" }))] }), title === "Draft" && invoiceDocModel && (_jsx("button", { type: "button", className: "bg-white border border-gray-300 rounded px-3 py-1 text-sm font-medium hover:bg-gray-50 transition-colors", onClick: handleOpenModal, children: "Create Invoice" }))] }), isExpanded && _jsx("div", { className: "mt-2", children: children }), isModalOpen && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: handleCloseModal }), _jsxs("div", { className: "relative bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Create New Invoice" }), _jsx("button", { type: "button", onClick: handleCloseModal, className: "text-gray-400 hover:text-gray-600 transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { htmlFor: "invoice-name", className: "block text-sm font-medium text-gray-700 mb-1", children: "Invoice Name" }), _jsx("input", { ref: inputRef, id: "invoice-name", type: "text", value: invoiceName, onChange: (e) => setInvoiceName(e.target.value), onKeyDown: handleKeyDown, placeholder: "Enter invoice name...", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx("button", { type: "button", onClick: handleCloseModal, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors", children: "Cancel" }), _jsx("button", { type: "button", onClick: handleConfirmCreate, disabled: !invoiceName.trim(), className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", children: "Create" })] })] })] }))] }));
 };

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

@@ -0,0 +1,12 @@
+import type { SelectedFolderInfo } from "./FolderTree.js";
+interface MonthOverviewProps {
+    folderId: string;
+    monthName?: string;
+    onFolderSelect?: (folderInfo: SelectedFolderInfo | null) => void;
+}
+/**
+ * Overview for a month folder showing links to Payments and Reporting
+ */
+export declare function MonthOverview({ folderId: _folderId, monthName, onFolderSelect, }: MonthOverviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MonthOverview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MonthOverview.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/MonthOverview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;CAClE;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EAAE,SAAS,EACnB,SAAS,EACT,cAAc,GACf,EAAE,kBAAkB,2CAwGpB"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CreditCard, BarChart3, ArrowRight } from "lucide-react";
+import { useBillingFolderStructure, } from "../hooks/useBillingFolderStructure.js";
+import { setSelectedNode } from "@powerhousedao/reactor-browser";
+/**
+ * Overview for a month folder showing links to Payments and Reporting
+ */
+export function MonthOverview({ folderId: _folderId, monthName, onFolderSelect, }) {
+    const { monthFolders } = useBillingFolderStructure();
+    // Find the month info for this folder
+    const monthInfo = monthName
+        ? monthFolders.get(monthName)
+        : undefined;
+    const handlePaymentsClick = () => {
+        if (monthInfo?.paymentsFolder) {
+            setSelectedNode(monthInfo.paymentsFolder.id);
+            onFolderSelect?.({
+                folderId: monthInfo.paymentsFolder.id,
+                folderType: "payments",
+                monthName,
+            });
+        }
+    };
+    const handleReportingClick = () => {
+        if (monthInfo?.reportingFolder) {
+            setSelectedNode(monthInfo.reportingFolder.id);
+            onFolderSelect?.({
+                folderId: monthInfo.reportingFolder.id,
+                folderType: "reporting",
+                monthName,
+            });
+        }
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900", children: monthName || "Month Overview" }), _jsx("p", { className: "text-gray-600", children: "Select a category to manage your billing for this month" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("button", { onClick: handlePaymentsClick, disabled: !monthInfo?.paymentsFolder, className: "bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md hover:border-blue-300 transition-all text-left cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-3 bg-blue-100 rounded-lg", children: _jsx(CreditCard, { className: "w-6 h-6 text-blue-600" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Payments" }), _jsx("p", { className: "text-sm text-gray-600", children: "Invoices and billing statements" })] })] }), _jsx(ArrowRight, { className: "w-5 h-5 text-gray-400" })] }), _jsx("div", { className: "mt-4 pt-4 border-t border-gray-100", children: _jsx("p", { className: "text-sm text-gray-500", children: "Manage contributor invoices, generate billing statements, and track payment status." }) })] }), _jsxs("button", { onClick: handleReportingClick, disabled: !monthInfo?.reportingFolder, className: "bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md hover:border-purple-300 transition-all text-left cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-3 bg-purple-100 rounded-lg", children: _jsx(BarChart3, { className: "w-6 h-6 text-purple-600" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Reporting" }), _jsx("p", { className: "text-sm text-gray-600", children: "Expense and snapshot reports" })] })] }), _jsx(ArrowRight, { className: "w-5 h-5 text-gray-400" })] }), _jsx("div", { className: "mt-4 pt-4 border-t border-gray-100", children: _jsx("p", { className: "text-sm text-gray-500", children: "Create expense reports and snapshot reports for financial tracking and auditing." }) })] })] })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { SelectedFolderInfo } from "./FolderTree.js";
+interface MonthlyReportingProps {
+    onFolderSelect?: (folderInfo: SelectedFolderInfo | null) => void;
+    /** Show all months or just current/prior */
+    showAllMonths?: boolean;
+}
+/**
+ * Reusable Monthly Reporting component
+ * Shows expense and snapshot report status for each month
+ */
+export declare function MonthlyReporting({ onFolderSelect, showAllMonths, }: MonthlyReportingProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MonthlyReporting.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MonthlyReporting.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/MonthlyReporting.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAmCD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,cAAc,EACd,aAAqB,GACtB,EAAE,qBAAqB,2CAqKvB"}