@powerhousedao/contributor-billing 0.1.53 → 1.0.0-dev.10

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { addDocument, dispatchActions, setSelectedNode, useSelectedDrive, useDocumentsInSelectedDrive, } from "@powerhousedao/reactor-browser";
+import { deleteNode } from "document-drive";
 import { actions as invoiceActions } from "../../../../document-models/invoice/index.js";
 import { actions as billingStatementActions } from "../../../../document-models/billing-statement/index.js";
 import { setPeriodStart, setPeriodEnd, } from "../../../../document-models/expense-report/gen/creators.js";
@@ -406,6 +407,20 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
             });
         }
     };
+    // Delete selected documents from the drive
+    const handleDeleteSelected = async (ids) => {
+        const driveId = selectedDrive?.header.id;
+        if (!driveId)
+            return;
+        for (const id of ids) {
+            try {
+                await dispatchActions(deleteNode({ id }), driveId);
+            }
+            catch (error) {
+                console.error(`Failed to delete document ${id}:`, error);
+            }
+        }
+    };
     // Check for integrations document - simple computed value
     const integrationsDoc = files.find((file) => file.documentType === "powerhouse/integrations");
     // Create integrations document - simple async function
@@ -490,7 +505,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(_Fragment, { children: [_jsx(NotificationDialog, { show: notification.show, type: notification.type, title: notification.title, message: notification.message, details: notification.details, onClose: () => setNotification({ ...notification, show: false }) }), _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: handleCreateExpenseReport, selected: selected, handleCreateBillingStatement: handleCreateBillingStatement, setSelected: setSelected, invoices: invoicesDocs, billingStatements: billingStatementDocs, canExportSelectedRows: canExportSelectedRows }), renderSection("DRAFT", "Draft", draft, {
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationDialog, { show: notification.show, type: notification.type, title: notification.title, message: notification.message, details: notification.details, onClose: () => setNotification({ ...notification, show: false }) }), _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: handleCreateExpenseReport, selected: selected, handleCreateBillingStatement: handleCreateBillingStatement, setSelected: setSelected, invoices: invoicesDocs, billingStatements: billingStatementDocs, canExportSelectedRows: canExportSelectedRows, onDeleteSelected: handleDeleteSelected }), renderSection("DRAFT", "Draft", draft, {
                         showIssuer: false,
                         showCreateButton: true,
                     }), renderSection("ISSUED", "Issued", issued, {

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

@@ -5,11 +5,13 @@ interface InvoiceTableContainerProps {
     monthName?: string;
     /** The sibling Reporting folder ID where expense reports should be created */
     reportingFolderId?: string;
+    /** Content rendered above the InvoiceTable but inside the drop zone */
+    children?: React.ReactNode;
 }
 /**
  * Container that renders the InvoiceTable.
  * Uses useNodesInSelectedDriveOrFolder pattern to avoid freeze issues.
  */
-export declare function InvoiceTableContainer({ folderId, monthName, reportingFolderId, }: InvoiceTableContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function InvoiceTableContainer({ folderId, monthName, reportingFolderId, children, }: 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":"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"}
+{"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;IAC3B,uEAAuE;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,QAAQ,GACT,EAAE,0BAA0B,2CAoT5B"}

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

@@ -1,14 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { cbToast } from "../cbToast.js";
 import { InvoiceTable } from "./InvoiceTable.js";
 /**
  * Container that renders the InvoiceTable.
  * Uses useNodesInSelectedDriveOrFolder pattern to avoid freeze issues.
  */
-export function InvoiceTableContainer({ folderId, monthName, reportingFolderId, }) {
+export function InvoiceTableContainer({ folderId, monthName, reportingFolderId, children, }) {
     const [selected, setSelected] = useState({});
     const [selectedStatuses, setSelectedStatuses] = useState([]);
     const containerRef = useRef(null);
@@ -92,7 +92,7 @@ export function InvoiceTableContainer({ folderId, monthName, reportingFolderId,
         // 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" });
+            cbToast(`Only .phd files (Powerhouse documents) can be dropped here. Rejected: ${rejectedNames}`, { type: "error" });
         }
         if (phdFiles.length === 0)
             return;
@@ -149,14 +149,16 @@ export function InvoiceTableContainer({ folderId, monthName, reportingFolderId,
         });
         await Promise.allSettled(filePromises);
     }, [onDropFile, driveId, folderId]);
+    // Don't stopPropagation on dragOver/dragEnter — these must bubble to
+    // DocumentDropZone so it can show the full-screen overlay.
+    // Only handleDrop uses stopPropagation to prevent DocumentDropZone
+    // from also processing the files.
     const handleDragOver = useCallback((event) => {
         event.preventDefault();
-        event.stopPropagation();
         event.dataTransfer.dropEffect = "copy";
     }, []);
     const handleDragEnter = useCallback((event) => {
         event.preventDefault();
-        event.stopPropagation();
     }, []);
     // Handler for status filter changes
     const handleStatusChange = useCallback((value) => {
@@ -176,7 +178,7 @@ export function InvoiceTableContainer({ folderId, monthName, reportingFolderId,
     // 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" });
+            cbToast("No drive selected", { type: "error" });
             return;
         }
         try {
@@ -189,15 +191,15 @@ export function InvoiceTableContainer({ folderId, monthName, reportingFolderId,
                 setTimeout(() => {
                     setSelectedNode(createdNode.id);
                 }, 100);
-                toast("Invoice created successfully", { type: "success" });
+                cbToast("Invoice created successfully", { type: "success" });
             }
             else {
-                toast("Failed to create invoice", { type: "error" });
+                cbToast("Failed to create invoice", { type: "error" });
             }
         }
         catch (error) {
             console.error("Error creating invoice:", error);
-            toast("Failed to create invoice", { type: "error" });
+            cbToast("Failed to create invoice", { type: "error" });
         }
     }, [driveId, folderId]);
     // Determine if CSV export should be enabled based on selected rows
@@ -220,5 +222,5 @@ export function InvoiceTableContainer({ folderId, monthName, reportingFolderId,
         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, monthName: monthName, reportingFolderId: reportingFolderId }) }));
+    return (_jsxs("div", { ref: containerRef, className: "w-full h-full", onDrop: handleDrop, onDragOver: handleDragOver, onDragEnter: handleDragEnter, children: [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/MonthReportCard.d.ts

@@ -1,13 +1,20 @@
 import type { MonthReportSet } from "../hooks/useMonthlyReports.js";
+export interface MonthPaymentStats {
+    totalInvoices: number;
+    pendingCount: number;
+    paidCount: number;
+}
 interface MonthReportCardProps {
     reportSet: MonthReportSet;
     defaultExpanded?: boolean;
     onCreateExpenseReport?: (monthName: string, folderId: string) => void;
     onCreateSnapshotReport?: (monthName: string, folderId: string) => void;
+    onDeleteReport?: (reportId: string, reportName: string) => Promise<void>;
+    onViewPayments?: (monthName: string) => void;
+    paymentStats?: MonthPaymentStats;
+    /** Suggested start date based on previous month's snapshot period end + 1 day */
+    suggestedStartDate?: Date;
 }
-/**
- * Collapsible month card showing all reports for a month
- */
-export declare function MonthReportCard({ reportSet, defaultExpanded, onCreateExpenseReport, onCreateSnapshotReport, }: MonthReportCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MonthReportCard({ reportSet, defaultExpanded, onCreateExpenseReport, onCreateSnapshotReport, onDeleteReport, onViewPayments, paymentStats, suggestedStartDate, }: MonthReportCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MonthReportCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonthReportCard.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/MonthReportCard.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,cAAc,EAGf,MAAM,+BAA+B,CAAC;AAEvC,UAAU,oBAAoB;IAC5B,SAAS,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACxE;AA6ED;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,eAAuB,EACvB,qBAAqB,EACrB,sBAAsB,GACvB,EAAE,oBAAoB,2CA2GtB"}
+{"version":3,"file":"MonthReportCard.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/MonthReportCard.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,cAAc,EAGf,MAAM,+BAA+B,CAAC;AAGvC,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,oBAAoB;IAC5B,SAAS,EAAE,cAAc,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,sBAAsB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,IAAI,CAAC;CAC3B;AA6HD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,eAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACd,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,oBAAoB,2CAoNtB"}

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { Calendar, ChevronDown, ChevronRight, Camera, FileText, ArrowRight, Plus, } from "lucide-react";
+import { Calendar, ChevronDown, ChevronRight, Camera, CreditCard, FileText, ArrowRight, Plus, Info, Trash2, } from "lucide-react";
 import { setSelectedNode } from "@powerhousedao/reactor-browser";
+import { ConfirmationModal } from "./InvoiceTable/ConfirmationModal.js";
 /**
  * Get color classes for status badges
  */
@@ -37,22 +38,64 @@ function getStatusLabel(status) {
 /**
  * Individual report row component
  */
-function ReportRow({ report, isSnapshot = false, }) {
+function ReportRow({ report, isSnapshot = false, onDelete, }) {
     const colors = getStatusColors(report.status);
     const handleClick = useCallback(() => {
         setSelectedNode(report.id);
     }, [report.id]);
-    return (_jsxs("button", { onClick: handleClick, className: "w-full flex items-center justify-between p-3 hover:bg-gray-50 cursor-pointer transition-colors border-b border-gray-100 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [isSnapshot ? (_jsx(Camera, { className: "w-4 h-4 text-purple-500 flex-shrink-0" })) : (_jsx(FileText, { className: "w-4 h-4 text-blue-500 flex-shrink-0" })), _jsx("span", { className: "text-sm text-gray-900 truncate", children: report.name })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full ${colors.bg} ${colors.text}`, children: getStatusLabel(report.status) }), _jsx(ArrowRight, { className: "w-4 h-4 text-gray-400" })] })] }));
+    const handleDelete = useCallback((e) => {
+        e.stopPropagation();
+        onDelete?.(report.id, report.name);
+    }, [onDelete, report.id, report.name]);
+    return (_jsxs("div", { className: "flex items-center border-b border-gray-100 last:border-b-0", children: [_jsxs("button", { onClick: handleClick, className: "flex-1 flex items-center justify-between p-3 hover:bg-gray-50 cursor-pointer transition-colors min-w-0", children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [isSnapshot ? (_jsx(Camera, { className: "w-4 h-4 text-purple-500 flex-shrink-0" })) : (_jsx(FileText, { className: "w-4 h-4 text-blue-500 flex-shrink-0" })), _jsx("span", { className: "text-sm text-gray-900 truncate", children: report.name })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full ${colors.bg} ${colors.text}`, children: getStatusLabel(report.status) }), _jsx(ArrowRight, { className: "w-4 h-4 text-gray-400" })] })] }), onDelete && (_jsx("button", { onClick: handleDelete, className: "p-3 text-gray-400 hover:text-red-500 transition-colors flex-shrink-0", title: "Delete report", children: _jsx(Trash2, { className: "w-4 h-4" }) }))] }));
 }
 /**
  * Collapsible month card showing all reports for a month
  */
-export function MonthReportCard({ reportSet, defaultExpanded = false, onCreateExpenseReport, onCreateSnapshotReport, }) {
+/**
+ * Format a date as "Mon DD" (e.g., "Dec 24")
+ */
+function formatShortDate(date) {
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        timeZone: "UTC",
+    });
+}
+/**
+ * Check if a date is the first day of the month parsed from monthName
+ */
+function isFirstOfMonth(date, monthName) {
+    const monthDate = new Date(monthName + " 1");
+    if (isNaN(monthDate.getTime()))
+        return false;
+    return (date.getUTCFullYear() === monthDate.getFullYear() &&
+        date.getUTCMonth() === monthDate.getMonth() &&
+        date.getUTCDate() === 1);
+}
+export function MonthReportCard({ reportSet, defaultExpanded = false, onCreateExpenseReport, onCreateSnapshotReport, onDeleteReport, onViewPayments, paymentStats, suggestedStartDate, }) {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [isDeleting, setIsDeleting] = useState(false);
     const overallColors = getStatusColors(reportSet.overallStatus);
     const toggleExpanded = useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);
+    const handleDeleteRequest = useCallback((reportId, reportName) => {
+        setDeleteTarget({ id: reportId, name: reportName });
+    }, []);
+    const handleConfirmDelete = useCallback(async () => {
+        if (!deleteTarget || !onDeleteReport)
+            return;
+        setIsDeleting(true);
+        try {
+            await onDeleteReport(deleteTarget.id, deleteTarget.name);
+        }
+        finally {
+            setIsDeleting(false);
+            setDeleteTarget(null);
+        }
+    }, [deleteTarget, onDeleteReport]);
     const handleCreateExpenseReport = useCallback(() => {
         if (onCreateExpenseReport && reportSet.reportingFolderId) {
             onCreateExpenseReport(reportSet.monthName, reportSet.reportingFolderId);
@@ -67,9 +110,15 @@ export function MonthReportCard({ reportSet, defaultExpanded = false, onCreateEx
         reportSet.monthName,
         reportSet.reportingFolderId,
     ]);
+    const handleViewPayments = useCallback(() => {
+        onViewPayments?.(reportSet.monthName);
+    }, [onViewPayments, reportSet.monthName]);
     const reportCountText = reportSet.reportCount === 1
         ? "1 Report"
         : `${reportSet.reportCount} Reports`;
-    return (_jsxs("div", { className: "bg-white rounded-xl border border-gray-200 overflow-hidden", children: [_jsxs("button", { onClick: toggleExpanded, className: "w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-3", children: [isExpanded ? (_jsx(ChevronDown, { className: "w-5 h-5 text-gray-400" })) : (_jsx(ChevronRight, { className: "w-5 h-5 text-gray-400" })), _jsx(Calendar, { className: "w-5 h-5 text-gray-600" }), _jsx("span", { className: "font-medium text-gray-900", children: reportSet.monthName })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm text-gray-500", children: reportCountText }), reportSet.reportCount > 0 && (_jsx("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full ${overallColors.bg} ${overallColors.text}`, children: getStatusLabel(reportSet.overallStatus) }))] })] }), isExpanded && (_jsxs("div", { className: "border-t border-gray-200", children: [reportSet.snapshotReport && (_jsx(ReportRow, { report: reportSet.snapshotReport, isSnapshot: true })), reportSet.expenseReports.map((report) => (_jsx(ReportRow, { report: report }, report.id))), reportSet.reportCount === 0 && (_jsx("div", { className: "p-4 text-center text-sm text-gray-500", children: "No reports created yet" })), (onCreateExpenseReport || onCreateSnapshotReport) &&
-                        reportSet.reportingFolderId && (_jsxs("div", { className: "p-3 border-t border-gray-100 bg-gray-50 flex items-center gap-3", children: [onCreateSnapshotReport && !reportSet.snapshotReport && (_jsxs("button", { onClick: handleCreateSnapshotReport, className: "flex items-center gap-2 text-sm text-purple-600 hover:text-purple-700 font-medium transition-colors", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Snapshot Report"] })), onCreateExpenseReport && (_jsxs("button", { onClick: handleCreateExpenseReport, className: "flex items-center gap-2 text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Expense Report"] }))] }))] }))] }));
+    return (_jsxs("div", { className: "bg-white rounded-xl border border-gray-200 overflow-hidden", children: [_jsxs("button", { onClick: toggleExpanded, className: "w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-3", children: [isExpanded ? (_jsx(ChevronDown, { className: "w-5 h-5 text-gray-400" })) : (_jsx(ChevronRight, { className: "w-5 h-5 text-gray-400" })), _jsx(Calendar, { className: "w-5 h-5 text-gray-600" }), _jsx("span", { className: "font-medium text-gray-900", children: reportSet.monthName })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm text-gray-500", children: reportCountText }), reportSet.reportCount > 0 && (_jsx("span", { className: `px-2 py-0.5 text-xs font-medium rounded-full ${overallColors.bg} ${overallColors.text}`, children: getStatusLabel(reportSet.overallStatus) }))] })] }), isExpanded && (_jsxs("div", { className: "border-t border-gray-200", children: [onViewPayments && (_jsxs("button", { onClick: handleViewPayments, className: "w-full flex items-center justify-between p-3 hover:bg-gray-50 cursor-pointer transition-colors border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsx(CreditCard, { className: "w-4 h-4 text-emerald-500 flex-shrink-0" }), _jsx("span", { className: "text-sm font-medium text-gray-900", children: "Payments" }), paymentStats && paymentStats.totalInvoices > 0 && (_jsxs("span", { className: "text-xs text-gray-500", children: [paymentStats.totalInvoices, " invoice", paymentStats.totalInvoices !== 1 ? "s" : "", paymentStats.pendingCount > 0 && (_jsxs("span", { className: "text-amber-600", children: [" ", "\u00B7 ", paymentStats.pendingCount, " pending"] })), paymentStats.paidCount > 0 && (_jsxs("span", { className: "text-green-600", children: [" ", "\u00B7 ", paymentStats.paidCount, " paid"] }))] }))] }), _jsx(ArrowRight, { className: "w-4 h-4 text-gray-400 flex-shrink-0" })] })), reportSet.snapshotReport && (_jsx(ReportRow, { report: reportSet.snapshotReport, isSnapshot: true, onDelete: onDeleteReport ? handleDeleteRequest : undefined })), reportSet.expenseReports.map((report) => (_jsx(ReportRow, { report: report, onDelete: onDeleteReport ? handleDeleteRequest : undefined }, report.id))), reportSet.reportCount === 0 && (_jsx("div", { className: "p-4 text-center text-sm text-gray-500", children: "No reports created yet" })), (onCreateExpenseReport || onCreateSnapshotReport) &&
+                        reportSet.reportingFolderId && (_jsxs("div", { className: "p-3 border-t border-gray-100 bg-gray-50", children: [_jsxs("div", { className: "flex items-center gap-3", children: [onCreateSnapshotReport && !reportSet.snapshotReport && (_jsxs("button", { onClick: handleCreateSnapshotReport, className: "flex items-center gap-2 text-sm text-purple-600 hover:text-purple-700 font-medium transition-colors", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Snapshot Report"] })), onCreateExpenseReport && (_jsxs("button", { onClick: handleCreateExpenseReport, className: "flex items-center gap-2 text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors", children: [_jsx(Plus, { className: "w-4 h-4" }), "Add Expense Report"] }))] }), onCreateSnapshotReport &&
+                                !reportSet.snapshotReport &&
+                                suggestedStartDate &&
+                                !isFirstOfMonth(suggestedStartDate, reportSet.monthName) && (_jsxs("div", { className: "flex items-center gap-1.5 mt-2 text-xs text-indigo-600", children: [_jsx(Info, { className: "w-3.5 h-3.5 flex-shrink-0" }), _jsxs("span", { children: ["Transaction period will start", " ", formatShortDate(suggestedStartDate), " (day after previous snapshot period ends)"] })] }))] }))] })), _jsxs(ConfirmationModal, { open: !!deleteTarget, header: "Delete Report", onCancel: () => setDeleteTarget(null), onContinue: () => void handleConfirmDelete(), cancelLabel: "Cancel", continueLabel: isDeleting ? "Deleting..." : "Delete", continueDisabled: isDeleting, children: [_jsx("p", { className: "text-red-600 text-sm mb-2 font-medium", children: "This will permanently delete this report from the drive. This action cannot be undone." }), deleteTarget && (_jsx("p", { className: "text-gray-700 text-sm font-medium", children: deleteTarget.name }))] })] }));
 }

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

@@ -10,6 +10,6 @@ interface MonthlyReportsOverviewProps {
  * Monthly Reports Overview component for the billing page
  * Shows collapsible month cards with reports and status
  */
-export declare function MonthlyReportsOverview({ monthFolders, onCreateMonth, onActiveNodeIdChange, }: MonthlyReportsOverviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MonthlyReportsOverview({ onFolderSelect, monthFolders, onCreateMonth, onActiveNodeIdChange, }: MonthlyReportsOverviewProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MonthlyReportsOverview.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonthlyReportsOverview.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/MonthlyReportsOverview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAa7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,UAAU,2BAA2B;IACnC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAsCD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EACZ,aAAa,EACb,oBAAoB,GACrB,EAAE,2BAA2B,2CA4U7B"}
+{"version":3,"file":"MonthlyReportsOverview.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/MonthlyReportsOverview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAkB7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,UAAU,2BAA2B;IACnC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAuED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,cAAc,EACd,YAAY,EACZ,aAAa,EACb,oBAAoB,GACrB,EAAE,2BAA2B,2CA0b7B"}

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState, useMemo, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { BarChart3, Plus, ChevronDown } from "lucide-react";
-import { useSelectedDrive, addDocument, dispatchActions, setSelectedNode, } from "@powerhousedao/reactor-browser";
+import { useSelectedDrive, useDocumentsInSelectedDrive, addDocument, dispatchActions, setSelectedNode, isFileNodeKind, } from "@powerhousedao/reactor-browser";
 import { setName } from "document-model";
-import { moveNode } from "document-drive";
-import { useMonthlyReports } from "../hooks/useMonthlyReports.js";
+import { moveNode, deleteNode } from "document-drive";
+import { useMonthlyReports, } from "../hooks/useMonthlyReports.js";
 import { MonthReportCard } from "./MonthReportCard.js";
 import { actions as expenseReportActions } from "../../../document-models/expense-report/index.js";
 import { actions as snapshotReportActions } from "../../../document-models/snapshot-report/index.js";
@@ -38,18 +38,97 @@ function parseMonthDates(monthName) {
     const end = new Date(Date.UTC(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59, 999));
     return { start, end };
 }
+/**
+ * Get the suggested start date for a new snapshot report based on the previous
+ * month's snapshot period end date. Returns the day after the previous period
+ * ends, or the first day of the month if there's no previous snapshot.
+ */
+function getSuggestedSnapshotStartDate(monthName, monthReportSets) {
+    const monthDates = parseMonthDates(monthName);
+    if (!monthDates)
+        return null;
+    // Find the current month's index in the sorted (descending) list
+    const currentIndex = monthReportSets.findIndex((s) => s.monthName === monthName);
+    if (currentIndex === -1)
+        return null;
+    // The previous month is the next item in the descending-sorted array
+    const previousMonth = monthReportSets[currentIndex + 1];
+    if (!previousMonth?.snapshotEndDate)
+        return null;
+    const previousEnd = new Date(previousMonth.snapshotEndDate);
+    if (isNaN(previousEnd.getTime()))
+        return null;
+    // Suggested start = previous period end + 1 day
+    const suggestedStart = new Date(previousEnd);
+    suggestedStart.setUTCDate(suggestedStart.getUTCDate() + 1);
+    suggestedStart.setUTCHours(0, 0, 0, 0);
+    return suggestedStart;
+}
 /**
  * Monthly Reports Overview component for the billing page
  * Shows collapsible month cards with reports and status
  */
-export function MonthlyReportsOverview({ monthFolders, onCreateMonth, onActiveNodeIdChange, }) {
+export function MonthlyReportsOverview({ onFolderSelect, monthFolders, onCreateMonth, onActiveNodeIdChange, }) {
     const { monthReportSets, isLoading } = useMonthlyReports();
     const [selectedDrive] = useSelectedDrive();
+    const documentsInDrive = useDocumentsInSelectedDrive();
     const [isCreating, setIsCreating] = useState(false);
     const [isAddingMonth, setIsAddingMonth] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const dropdownRef = useRef(null);
     const driveId = selectedDrive?.header.id;
+    // Per-month payment stats for the Payments row in each card
+    const monthPaymentStatsMap = useMemo(() => {
+        const map = new Map();
+        if (!selectedDrive || !documentsInDrive || !monthFolders)
+            return map;
+        const nodes = selectedDrive.state.global.nodes;
+        for (const [monthName, folderInfo] of monthFolders.entries()) {
+            const paymentsFolderId = folderInfo.paymentsFolder?.id;
+            if (!paymentsFolderId)
+                continue;
+            const invoiceIds = new Set(nodes
+                .filter((n) => isFileNodeKind(n) &&
+                n.parentFolder === paymentsFolderId &&
+                n.documentType === "powerhouse/invoice")
+                .map((n) => n.id));
+            const invoices = documentsInDrive.filter((doc) => doc.header.documentType === "powerhouse/invoice" &&
+                invoiceIds.has(doc.header.id));
+            let pendingCount = 0;
+            let paidCount = 0;
+            for (const invoice of invoices) {
+                const status = (invoice.state.global?.status ??
+                    "").toUpperCase();
+                if (status === "PAYMENTSENT" ||
+                    status === "PAYMENTRECEIVED" ||
+                    status === "PAYMENTCLOSED") {
+                    paidCount++;
+                }
+                else if (status !== "REJECTED" && status !== "CANCELLED") {
+                    pendingCount++;
+                }
+            }
+            map.set(monthName, {
+                totalInvoices: invoices.length,
+                pendingCount,
+                paidCount,
+            });
+        }
+        return map;
+    }, [selectedDrive, documentsInDrive, monthFolders]);
+    const handleViewPayments = useCallback((monthName) => {
+        if (!onFolderSelect || !monthFolders)
+            return;
+        const info = monthFolders.get(monthName);
+        if (!info?.paymentsFolder)
+            return;
+        onFolderSelect({
+            folderId: info.paymentsFolder.id,
+            folderType: "payments",
+            monthName,
+            reportingFolderId: info.reportingFolder?.id,
+        });
+    }, [onFolderSelect, monthFolders]);
     const buttonRef = useRef(null);
     const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
     // Update dropdown position when opening
@@ -165,9 +244,12 @@ export function MonthlyReportsOverview({ monthFolders, onCreateMonth, onActiveNo
             }
             // Set the document name
             await dispatchActions(setName(reportName), createdNode.id);
-            // Set period dates based on month
+            // Set reporting period to calendar month boundaries
             const dates = parseMonthDates(monthName);
             if (dates) {
+                const suggestedStart = getSuggestedSnapshotStartDate(monthName, monthReportSets);
+                // Transaction filtering start: previous period end + 1 day, or month start
+                const txStartDate = suggestedStart || dates.start;
                 await dispatchActions([
                     snapshotReportActions.setPeriodStart({
                         periodStart: dates.start.toISOString(),
@@ -176,6 +258,11 @@ export function MonthlyReportsOverview({ monthFolders, onCreateMonth, onActiveNo
                         periodEnd: dates.end.toISOString(),
                     }),
                 ], createdNode.id);
+                // Set the transaction filtering range (snapshot period) separately
+                await dispatchActions(snapshotReportActions.setReportConfig({
+                    startDate: txStartDate.toISOString(),
+                    endDate: dates.end.toISOString(),
+                }), createdNode.id);
             }
             // Open the created report
             setSelectedNode(createdNode.id);
@@ -185,7 +272,17 @@ export function MonthlyReportsOverview({ monthFolders, onCreateMonth, onActiveNo
         finally {
             setIsCreating(false);
         }
-    }, [driveId, isCreating, onActiveNodeIdChange]);
+    }, [driveId, isCreating, monthReportSets, onActiveNodeIdChange]);
+    const handleDeleteReport = useCallback(async (reportId) => {
+        if (!driveId)
+            return;
+        try {
+            await dispatchActions(deleteNode({ id: reportId }), driveId);
+        }
+        catch (error) {
+            console.error("Failed to delete report:", error);
+        }
+    }, [driveId]);
     // Add Month button component (reused across states)
     const addMonthButton = onCreateMonth && (_jsxs("div", { className: "relative", children: [_jsxs("button", { ref: buttonRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), disabled: isAddingMonth, className: "flex items-center gap-1.5 px-3 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed", children: [_jsx(Plus, { className: "w-4 h-4" }), isAddingMonth ? "Adding..." : "Add Month", _jsx(ChevronDown, { className: "w-3 h-3" })] }), isDropdownOpen &&
                 createPortal(_jsxs("div", { ref: dropdownRef, className: "fixed w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-[9999]", style: {
@@ -200,5 +297,5 @@ export function MonthlyReportsOverview({ monthFolders, onCreateMonth, onActiveNo
     if (monthReportSets.length === 0) {
         return (_jsxs("div", { className: "bg-white rounded-xl border border-gray-200 p-6 overflow-visible", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 mb-5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 bg-indigo-100 rounded-lg", children: _jsx(BarChart3, { className: "w-5 h-5 text-indigo-600" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Monthly Reports" }), _jsx("p", { className: "text-sm text-gray-600", children: "Quick access to expense and snapshot reports" })] })] }), addMonthButton] }), _jsx("p", { className: "text-gray-500 text-sm text-center py-4", children: "No months configured yet. Click \"Add Month\" to get started." })] }));
     }
-    return (_jsxs("div", { className: "bg-white rounded-xl border border-gray-200 p-6 overflow-visible", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 mb-5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 bg-indigo-100 rounded-lg", children: _jsx(BarChart3, { className: "w-5 h-5 text-indigo-600" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Monthly Reports" }), _jsx("p", { className: "text-sm text-gray-600", children: "Quick access to expense and snapshot reports" })] })] }), addMonthButton] }), _jsx("div", { className: "space-y-3", children: monthReportSets.map((reportSet, index) => (_jsx(MonthReportCard, { reportSet: reportSet, defaultExpanded: index === 0, onCreateExpenseReport: handleCreateExpenseReport, onCreateSnapshotReport: handleCreateSnapshotReport }, reportSet.monthName))) })] }));
+    return (_jsxs("div", { className: "bg-white rounded-xl border border-gray-200 p-6 overflow-visible", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 mb-5", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "p-2 bg-indigo-100 rounded-lg", children: _jsx(BarChart3, { className: "w-5 h-5 text-indigo-600" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Monthly Reports" }), _jsx("p", { className: "text-sm text-gray-600", children: "Quick access to expense and snapshot reports" })] })] }), addMonthButton] }), _jsx("div", { className: "space-y-3", children: monthReportSets.map((reportSet, index) => (_jsx(MonthReportCard, { reportSet: reportSet, defaultExpanded: index === 0, onCreateExpenseReport: handleCreateExpenseReport, onCreateSnapshotReport: handleCreateSnapshotReport, onDeleteReport: handleDeleteReport, onViewPayments: onFolderSelect ? handleViewPayments : undefined, paymentStats: monthPaymentStatsMap.get(reportSet.monthName), suggestedStartDate: getSuggestedSnapshotStartDate(reportSet.monthName, monthReportSets) || undefined }, reportSet.monthName))) })] }));
 }

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

@@ -2,9 +2,6 @@ interface ReportingViewProps {
     folderId: string;
     monthName?: string;
 }
-/**
- * View for the Reporting folder showing Expense Reports and Snapshot Reports
- */
 export declare function ReportingView({ folderId, monthName }: ReportingViewProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ReportingView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReportingView.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/ReportingView.tsx"],"names":[],"mappings":"AAeA,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CAmSxE"}
+{"version":3,"file":"ReportingView.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/ReportingView.tsx"],"names":[],"mappings":"AAiBA,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+DD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CA2XxE"}