@powerhousedao/contributor-billing 0.1.4 → 0.1.6

package/dist/editors/expense-report/components/ExpenseReportPDF.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, Text, View, StyleSheet } from "@react-pdf/renderer";
+// Tailwind-inspired styles for PDF
+const styles = StyleSheet.create({
+    page: {
+        padding: 32,
+        fontSize: 8,
+        fontFamily: "Helvetica",
+        backgroundColor: "#ffffff",
+    },
+    header: {
+        marginBottom: 20,
+        borderBottom: "1pt solid #e5e7eb",
+        paddingBottom: 12,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "bold",
+        marginBottom: 6,
+        color: "#111827",
+        textAlign: "center",
+    },
+    period: {
+        fontSize: 9,
+        color: "#6b7280",
+        textAlign: "center",
+        marginTop: 2,
+    },
+    sectionTitle: {
+        fontSize: 12,
+        fontWeight: "bold",
+        marginTop: 16,
+        marginBottom: 8,
+        color: "#111827",
+    },
+    walletInfo: {
+        fontSize: 8,
+        color: "#6b7280",
+        marginBottom: 8,
+    },
+    table: {
+        marginBottom: 16,
+    },
+    tableHeader: {
+        flexDirection: "row",
+        borderBottom: "1pt solid #e5e7eb",
+        paddingBottom: 6,
+        marginBottom: 6,
+        backgroundColor: "#f9fafb",
+        paddingTop: 6,
+        paddingHorizontal: 6,
+    },
+    tableRow: {
+        flexDirection: "row",
+        paddingVertical: 4,
+        paddingHorizontal: 6,
+        borderBottom: "0.5pt solid #f3f4f6",
+        minHeight: 20,
+    },
+    tableRowAlt: {
+        flexDirection: "row",
+        paddingVertical: 4,
+        paddingHorizontal: 6,
+        backgroundColor: "#f9fafb",
+        borderBottom: "0.5pt solid #f3f4f6",
+        minHeight: 20,
+    },
+    subtotalRow: {
+        flexDirection: "row",
+        paddingVertical: 6,
+        paddingHorizontal: 6,
+        borderTop: "1pt solid #d1d5db",
+        marginTop: 3,
+        fontWeight: "bold",
+        backgroundColor: "#fafafa",
+    },
+    totalRow: {
+        flexDirection: "row",
+        paddingVertical: 6,
+        paddingHorizontal: 6,
+        borderTop: "2pt solid #111827",
+        marginTop: 3,
+        fontWeight: "bold",
+        backgroundColor: "#f3f4f6",
+    },
+    headerCell: {
+        fontSize: 7,
+        fontWeight: "bold",
+        color: "#374151",
+        textTransform: "uppercase",
+        letterSpacing: 0.3,
+    },
+    cell: {
+        fontSize: 8,
+        color: "#111827",
+    },
+    cellRight: {
+        fontSize: 8,
+        color: "#111827",
+        textAlign: "right",
+    },
+    cellBold: {
+        fontSize: 8,
+        color: "#111827",
+        fontWeight: "bold",
+    },
+    // Breakdown table columns - adjusted to match AggregatedExpensesTable
+    categoryCol: { width: "20%" },
+    budgetCol: { width: "11%", textAlign: "right" },
+    forecastCol: { width: "11%", textAlign: "right" },
+    actualsCol: { width: "11%", textAlign: "right" },
+    differenceCol: { width: "11%", textAlign: "right" },
+    commentsCol: { width: "25%", paddingLeft: 4 },
+    paymentsCol: { width: "11%", textAlign: "right" },
+    commentsText: {
+        fontSize: 7,
+        color: "#6b7280",
+        lineHeight: 1.4,
+    },
+    // Color styles for difference column
+    differenceNegative: {
+        color: "#dc2626", // red-600 for negative values
+    },
+    differenceNormal: {
+        color: "#111827", // gray-900 for positive or zero
+    },
+    pageNumber: {
+        position: "absolute",
+        bottom: 20,
+        left: 0,
+        right: 0,
+        textAlign: "center",
+        fontSize: 7,
+        color: "#6b7280",
+    },
+});
+// Format number as currency
+const formatNumber = (value) => {
+    if (value === null || value === undefined)
+        return "0.00";
+    return value.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    });
+};
+// Format date
+const formatDate = (dateString) => {
+    if (!dateString)
+        return "";
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+};
+export function ExpenseReportPDF({ periodStart, periodEnd, wallets, groups, }) {
+    // Create a map of groups with their parent info
+    const groupsMap = new Map();
+    groups.forEach((group) => {
+        groupsMap.set(group.id, { group });
+    });
+    groups.forEach((group) => {
+        if (group.parentId) {
+            const entry = groupsMap.get(group.id);
+            const parentEntry = groupsMap.get(group.parentId);
+            if (entry && parentEntry) {
+                entry.parent = parentEntry.group;
+            }
+        }
+    });
+    // Get line items for a wallet with group information
+    const getWalletLineItems = (wallet) => {
+        const lineItems = wallet.lineItems || [];
+        return lineItems
+            .filter((item) => item !== null && item !== undefined)
+            .map((item) => {
+            const groupInfo = item.group ? groupsMap.get(item.group) : undefined;
+            return {
+                ...item,
+                groupLabel: groupInfo?.group.label || item.label || undefined,
+                parentGroupId: groupInfo?.parent?.id || null,
+                parentGroupLabel: groupInfo?.parent?.label || undefined,
+            };
+        });
+    };
+    // Group line items by parent category
+    const groupLineItemsByParent = (lineItems) => {
+        const grouped = new Map();
+        lineItems.forEach((item) => {
+            const key = item.parentGroupId || "uncategorized";
+            if (!grouped.has(key)) {
+                grouped.set(key, []);
+            }
+            grouped.get(key).push(item);
+        });
+        // Convert to array and sort by hierarchy: Headcount, Non-Headcount, others, then uncategorized
+        const entries = Array.from(grouped.entries());
+        // Find Headcount and Non-Headcount group IDs
+        const headcountGroup = groups.find((g) => g.label === "Headcount Expenses");
+        const nonHeadcountGroup = groups.find((g) => g.label === "Non-Headcount Expenses");
+        entries.sort(([keyA], [keyB]) => {
+            // Uncategorized always goes last
+            if (keyA === "uncategorized")
+                return 1;
+            if (keyB === "uncategorized")
+                return -1;
+            // Headcount Expenses always first
+            if (keyA === headcountGroup?.id)
+                return -1;
+            if (keyB === headcountGroup?.id)
+                return 1;
+            // Non-Headcount Expenses always second
+            if (keyA === nonHeadcountGroup?.id)
+                return -1;
+            if (keyB === nonHeadcountGroup?.id)
+                return 1;
+            // For other groups, maintain their original order
+            return 0;
+        });
+        return entries.map(([key, items]) => ({
+            parentLabel: key === "uncategorized"
+                ? "Uncategorised"
+                : items[0]?.parentGroupLabel || "Unknown",
+            items,
+        }));
+    };
+    return (_jsx(Document, { children: _jsxs(Page, { size: "A4", style: styles.page, children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.title, children: "Expense Report" }), periodStart && (_jsxs(Text, { style: styles.period, children: ["Period: ", formatDate(periodStart), " to ", formatDate(periodEnd)] }))] }), wallets.map((wallet, walletIndex) => {
+                    const lineItems = getWalletLineItems(wallet);
+                    const groupedItems = groupLineItemsByParent(lineItems);
+                    // Calculate grand totals
+                    const grandTotals = lineItems.reduce((acc, item) => ({
+                        budget: acc.budget + (item.budget || 0),
+                        forecast: acc.forecast + (item.forecast || 0),
+                        actuals: acc.actuals + (item.actuals || 0),
+                        payments: acc.payments + (item.payments || 0),
+                    }), { budget: 0, forecast: 0, actuals: 0, payments: 0 });
+                    return (_jsxs(View, { break: walletIndex > 0, children: [_jsxs(View, { wrap: false, children: [_jsxs(Text, { style: styles.sectionTitle, children: [periodStart &&
+                                                new Date(periodStart).toLocaleDateString("en-US", {
+                                                    month: "short",
+                                                    year: "numeric",
+                                                }), " ", "Breakdown"] }), _jsxs(Text, { style: styles.walletInfo, children: [wallet.name && `${wallet.name} • `, wallet.wallet || "Unknown Wallet"] })] }), _jsxs(View, { style: styles.table, children: [groupedItems.map((group, groupIndex) => {
+                                        const subtotals = group.items.reduce((acc, item) => ({
+                                            budget: acc.budget + (item.budget || 0),
+                                            forecast: acc.forecast + (item.forecast || 0),
+                                            actuals: acc.actuals + (item.actuals || 0),
+                                            payments: acc.payments + (item.payments || 0),
+                                        }), { budget: 0, forecast: 0, actuals: 0, payments: 0 });
+                                        const subtotalDifference = subtotals.forecast - subtotals.actuals;
+                                        return (_jsxs(View, { children: [groupIndex === 0 && (_jsxs(View, { style: styles.tableHeader, wrap: false, children: [_jsx(Text, { style: [styles.headerCell, styles.categoryCol], children: "Category" }), _jsx(Text, { style: [styles.headerCell, styles.budgetCol], children: "Budget" }), _jsx(Text, { style: [styles.headerCell, styles.forecastCol], children: "Forecast" }), _jsx(Text, { style: [styles.headerCell, styles.actualsCol], children: "Actuals" }), _jsx(Text, { style: [styles.headerCell, styles.differenceCol], children: "Difference" }), _jsx(Text, { style: [styles.headerCell, styles.commentsCol], children: "Comments" }), _jsx(Text, { style: [styles.headerCell, styles.paymentsCol], children: "Payments" })] })), _jsx(View, { style: {
+                                                        paddingVertical: 6,
+                                                        paddingHorizontal: 6,
+                                                        backgroundColor: "#f9fafb",
+                                                        borderBottom: "1pt solid #e5e7eb",
+                                                        marginTop: groupIndex > 0 ? 8 : 0,
+                                                    }, wrap: false, children: _jsx(Text, { style: {
+                                                            fontSize: 9,
+                                                            fontWeight: "bold",
+                                                            color: "#111827",
+                                                        }, children: group.parentLabel }) }), group.items.map((item, itemIndex) => {
+                                                    const difference = (item.forecast || 0) - (item.actuals || 0);
+                                                    const differenceStyle = difference < 0
+                                                        ? styles.differenceNegative
+                                                        : styles.differenceNormal;
+                                                    return (_jsxs(View, { style: itemIndex % 2 === 0
+                                                            ? styles.tableRow
+                                                            : styles.tableRowAlt, children: [_jsx(Text, { style: [styles.cell, styles.categoryCol], children: item.groupLabel || item.label || "Uncategorised" }), _jsx(Text, { style: [styles.cellRight, styles.budgetCol], children: formatNumber(item.budget) }), _jsx(Text, { style: [styles.cellRight, styles.forecastCol], children: formatNumber(item.forecast) }), _jsx(Text, { style: [styles.cellRight, styles.actualsCol], children: formatNumber(item.actuals) }), _jsx(Text, { style: [
+                                                                    styles.cellRight,
+                                                                    styles.differenceCol,
+                                                                    differenceStyle,
+                                                                ], children: formatNumber(difference) }), _jsx(View, { style: styles.commentsCol, children: item.comments && (_jsx(Text, { style: styles.commentsText, children: item.comments })) }), _jsx(Text, { style: [styles.cellRight, styles.paymentsCol], children: formatNumber(item.payments) })] }, item.id));
+                                                }), _jsxs(View, { style: styles.subtotalRow, children: [_jsx(Text, { style: [styles.cellBold, styles.categoryCol], children: "Subtotal" }), _jsx(Text, { style: [styles.cellRight, styles.budgetCol], children: formatNumber(subtotals.budget) }), _jsx(Text, { style: [styles.cellRight, styles.forecastCol], children: formatNumber(subtotals.forecast) }), _jsx(Text, { style: [styles.cellRight, styles.actualsCol], children: formatNumber(subtotals.actuals) }), _jsx(Text, { style: [
+                                                                styles.cellRight,
+                                                                styles.differenceCol,
+                                                                subtotalDifference < 0
+                                                                    ? styles.differenceNegative
+                                                                    : styles.differenceNormal,
+                                                            ], children: formatNumber(subtotalDifference) }), _jsx(View, { style: styles.commentsCol }), _jsx(Text, { style: [styles.cellRight, styles.paymentsCol], children: formatNumber(subtotals.payments) })] })] }, group.parentLabel));
+                                    }), _jsxs(View, { style: styles.totalRow, children: [_jsx(Text, { style: [styles.cellBold, styles.categoryCol], children: "Total" }), _jsx(Text, { style: [styles.cellRight, styles.budgetCol], children: formatNumber(grandTotals.budget) }), _jsx(Text, { style: [styles.cellRight, styles.forecastCol], children: formatNumber(grandTotals.forecast) }), _jsx(Text, { style: [styles.cellRight, styles.actualsCol], children: formatNumber(grandTotals.actuals) }), _jsx(Text, { style: [
+                                                    styles.cellRight,
+                                                    styles.differenceCol,
+                                                    grandTotals.forecast - grandTotals.actuals < 0
+                                                        ? styles.differenceNegative
+                                                        : styles.differenceNormal,
+                                                ], children: formatNumber(grandTotals.forecast - grandTotals.actuals) }), _jsx(View, { style: styles.commentsCol }), _jsx(Text, { style: [styles.cellRight, styles.paymentsCol], children: formatNumber(grandTotals.payments) })] })] })] }, wallet.wallet || walletIndex));
+                }), _jsx(Text, { style: styles.pageNumber, render: ({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`, fixed: true })] }) }));
+}

package/dist/editors/expense-report/components/WalletsTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsTable.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/components/WalletsTable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AAKlG,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,qBAAqB,EACrB,QAAQ,GACT,EAAE,iBAAiB,2CA+XnB"}
+{"version":3,"file":"WalletsTable.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/components/WalletsTable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AAKlG,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,qBAAqB,EACrB,QAAQ,GACT,EAAE,iBAAiB,2CAwanB"}

package/dist/editors/expense-report/components/WalletsTable.js

@@ -122,7 +122,19 @@ export function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch,
             minimumFractionDigits: 2,
         }).format(value);
     };
-    return (_jsxs("div", { className: "space-y-4", children: [wallets.length > 0 ? (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700", children: [_jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: _jsxs("tr", { children: [_jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Wallet" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Monthly Budget" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Forecast" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Actuals" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Difference" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Payments" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Actions" })] }) }), _jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: wallets.map((wallet) => {
+    return (_jsxs("div", { className: "space-y-4", children: [wallets.length > 0 ? (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700", children: [_jsx("thead", { className: "bg-gray-50 dark:bg-gray-800", children: _jsxs("tr", { children: [_jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Wallet" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Monthly Budget" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Forecast" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [needsSync && (_jsx("button", { onClick: () => {
+                                                        // Sync all outdated wallets
+                                                        [...tagChangedWallets, ...outdatedWallets].forEach((walletAddress) => {
+                                                            const wallet = wallets.find(w => w.wallet === walletAddress);
+                                                            if (wallet) {
+                                                                handleSyncWallet(wallet);
+                                                            }
+                                                        });
+                                                    }, disabled: syncingWallet !== null, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.length > 0
+                                                        ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 animate-pulse"
+                                                        : "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.length > 0
+                                                        ? "ALERT: Tags have changed in billing statements - sync all wallets!"
+                                                        : "Sync all wallets with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet !== null ? "animate-spin" : "" }) })), _jsx("span", { children: "Actuals" })] }) }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Difference" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Payments" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Actions" })] }) }), _jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: wallets.map((wallet) => {
                                 const totals = calculateWalletTotals(wallet);
                                 const isHovered = hoveredWallet === wallet.wallet;
                                 return (_jsxs("tr", { onMouseEnter: () => setHoveredWallet(wallet.wallet || null), onMouseLeave: () => setHoveredWallet(null), className: "hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors", children: [_jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: editingWallet === wallet.wallet ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TextInput, { value: editingName, onChange: (e) => setEditingName(e.target.value), placeholder: "Enter wallet name", className: "flex-1", onKeyDown: (e) => {
@@ -132,23 +144,23 @@ export function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch,
                                                             else if (e.key === "Escape") {
                                                                 handleCancelEditName();
                                                             }
-                                                        }, autoFocus: true }), _jsx("button", { onClick: () => handleSaveEditName(wallet.wallet || ""), className: "inline-flex items-center justify-center w-7 h-7 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-md transition-colors", title: "Save", children: _jsx(Check, { size: 14 }) }), _jsx("button", { onClick: handleCancelEditName, className: "inline-flex items-center justify-center w-7 h-7 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900/20 rounded-md transition-colors", title: "Cancel", children: _jsx(X, { size: 14 }) })] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: wallet.name || "Unnamed Wallet" }), _jsx("button", { onClick: () => handleStartEditName(wallet), className: "inline-flex items-center justify-center w-6 h-6 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors", title: "Edit name", children: _jsx(Pencil, { size: 12 }) }), _jsxs("button", { onClick: () => handleCopyAddress(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 font-mono hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors", title: `Copy address: ${wallet.wallet}`, children: [formatAddress(wallet.wallet || ""), copiedWallet === wallet.wallet ? (_jsx(CheckCheck, { size: 12, className: "text-green-500" })) : (_jsx(Copy, { size: 12 }))] })] })) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.budget) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.forecast) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.actuals) }), _jsx("td", { className: `px-6 py-4 whitespace-nowrap text-right text-sm font-medium ${totals.difference > 0
-                                                ? "text-red-600 dark:text-red-400"
-                                                : totals.difference < 0
-                                                    ? "text-green-600 dark:text-green-400"
-                                                    : "text-gray-900 dark:text-white"}`, children: formatCurrency(totals.difference) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.payments) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsxs("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement", children: [_jsx(Plus, { size: 16 }), _jsx("span", { children: "Add Bills" })] }), wallet.billingStatements && wallet.billingStatements.length > 0 && (_jsxs("button", { onClick: () => handleSyncWallet(wallet), disabled: syncingWallet === wallet.wallet, className: `inline-flex items-center gap-1 px-3 py-1 text-sm font-medium rounded-md transition-colors ${tagChangedWallets.includes(wallet.wallet || "")
+                                                        }, autoFocus: true }), _jsx("button", { onClick: () => handleSaveEditName(wallet.wallet || ""), className: "inline-flex items-center justify-center w-7 h-7 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-md transition-colors", title: "Save", children: _jsx(Check, { size: 14 }) }), _jsx("button", { onClick: handleCancelEditName, className: "inline-flex items-center justify-center w-7 h-7 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-900/20 rounded-md transition-colors", title: "Cancel", children: _jsx(X, { size: 14 }) })] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: wallet.name || "Unnamed Wallet" }), _jsx("button", { onClick: () => handleStartEditName(wallet), className: "inline-flex items-center justify-center w-6 h-6 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors", title: "Edit name", children: _jsx(Pencil, { size: 12 }) }), _jsxs("button", { onClick: () => handleCopyAddress(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 font-mono hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors", title: `Copy address: ${wallet.wallet}`, children: [formatAddress(wallet.wallet || ""), copiedWallet === wallet.wallet ? (_jsx(CheckCheck, { size: 12, className: "text-green-500" })) : (_jsx(Copy, { size: 12 }))] })] })) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.budget) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.forecast) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: totals.actuals === 0 && (!wallet.billingStatements || wallet.billingStatements.length === 0) ? (
+                                            // When actuals is 0 and no billing statements, only show the Add Bills button
+                                            _jsx("div", { className: "flex items-center justify-end", children: _jsxs("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: [_jsx(Plus, { size: 16 }), _jsx("span", { children: "Add Bills" })] }) })) : (
+                                            // When actuals is not 0 or has billing statements, show compact buttons + value horizontally
+                                            _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: _jsx(Plus, { size: 16 }) }), wallet.billingStatements && wallet.billingStatements.length > 0 && (_jsx("button", { onClick: () => handleSyncWallet(wallet), disabled: syncingWallet === wallet.wallet, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.includes(wallet.wallet || "")
                                                             ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 animate-pulse"
                                                             : outdatedWallets.includes(wallet.wallet || "")
                                                                 ? "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"
                                                                 : "text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.includes(wallet.wallet || "")
-                                                            ? "ALERT: Tags have changed in billing statements - sync required!"
+                                                            ? "ALERT: Tags have changed - sync required!"
                                                             : outdatedWallets.includes(wallet.wallet || "")
-                                                                ? "Sync needed - billing statements have been updated"
-                                                                : "Sync with latest billing statements", children: [_jsx(RefreshCw, { size: 16, className: syncingWallet === wallet.wallet ? "animate-spin" : "" }), _jsx("span", { children: tagChangedWallets.includes(wallet.wallet || "")
-                                                                    ? "Tags Changed!"
-                                                                    : outdatedWallets.includes(wallet.wallet || "")
-                                                                        ? "Sync"
-                                                                        : "Synced" })] })), _jsx("button", { onClick: () => handleRemoveWallet(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors", title: "Remove wallet", children: _jsx(Trash2, { size: 16 }) })] }) })] }, wallet.wallet));
+                                                                ? "Sync needed - billing statements updated"
+                                                                : "Sync with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet === wallet.wallet ? "animate-spin" : "" }) })), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: formatCurrency(totals.actuals) })] })) }), _jsx("td", { className: `px-6 py-4 whitespace-nowrap text-right text-sm font-medium ${totals.difference > 0
+                                                ? "text-red-600 dark:text-red-400"
+                                                : totals.difference < 0
+                                                    ? "text-green-600 dark:text-green-400"
+                                                    : "text-gray-900 dark:text-white"}`, children: formatCurrency(totals.difference) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.payments) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: _jsx("div", { className: "flex items-center justify-end gap-2", children: _jsx("button", { onClick: () => handleRemoveWallet(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors", title: "Remove wallet", children: _jsx(Trash2, { size: 16 }) }) }) })] }, wallet.wallet));
                             }) })] }) })) : (_jsx("div", { className: "text-center py-12 text-gray-500 dark:text-gray-400", children: _jsx("p", { className: "text-sm", children: "No wallets added yet. Add a wallet to get started." }) })), _jsxs("div", { className: "flex items-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Wallet Name" }), _jsx(TextInput, { value: newWalletName, onChange: (e) => setNewWalletName(e.target.value), placeholder: "Enter wallet name (optional)", onKeyDown: (e) => {
                                     if (e.key === "Enter") {
                                         handleAddWallet();

package/dist/editors/expense-report/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/expense-report/editor.tsx"],"names":[],"mappings":"AAUA,wBAAgB,MAAM,4CAiLrB"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/expense-report/editor.tsx"],"names":[],"mappings":"AAWA,wBAAgB,MAAM,4CAmMrB"}

package/dist/editors/expense-report/editor.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo } from "react";
 import { useSelectedExpenseReportDocument } from "../hooks/useExpenseReportDocument.js";
 import { actions } from "../../document-models/expense-report/index.js";
-import { DatePicker } from "@powerhousedao/document-engineering";
+import { DatePicker, Icon, Button } from "@powerhousedao/document-engineering";
 import { WalletsTable } from "./components/WalletsTable.js";
 import { AggregatedExpensesTable } from "./components/AggregatedExpensesTable.js";
 import { AddBillingStatementModal } from "./components/AddBillingStatementModal.js";
-import { useWalletSync } from "./hooks/useWalletSync.js";
-import { useSyncWallet } from "./hooks/useSyncWallet.js";
+import { ExpenseReportPDF } from "./components/ExpenseReportPDF.js";
+import { pdf } from "@react-pdf/renderer";
 export function Editor() {
     const [document, dispatch] = useSelectedExpenseReportDocument();
     const [selectedWallet, setSelectedWallet] = useState(null);
@@ -15,41 +15,6 @@ export function Editor() {
     const [periodStart, setPeriodStart] = useState(document.state.global.periodStart || "");
     const [periodEnd, setPeriodEnd] = useState(document.state.global.periodEnd || "");
     const { wallets, groups } = document.state.global;
-    // Check sync status
-    const { needsSync, outdatedWallets, tagChangedWallets } = useWalletSync(wallets);
-    const { syncWallet } = useSyncWallet();
-    // Auto-sync on component mount
-    useEffect(() => {
-        if (needsSync && outdatedWallets.length > 0) {
-            if (tagChangedWallets.length > 0) {
-                console.warn("⚠️ Tag changes detected in wallets:", tagChangedWallets);
-                console.log("Auto-syncing wallets with tag changes:", outdatedWallets);
-            }
-            else {
-                console.log("Auto-syncing wallets:", outdatedWallets);
-            }
-            // Sync each outdated wallet
-            outdatedWallets.forEach((walletAddress) => {
-                const wallet = wallets.find((w) => w.wallet === walletAddress);
-                if (!wallet || !wallet.billingStatements || wallet.billingStatements.length === 0) {
-                    return;
-                }
-                // Remove all existing line items first
-                const lineItemsToRemove = [...(wallet.lineItems || [])];
-                lineItemsToRemove.forEach((item) => {
-                    if (item?.id) {
-                        dispatch(actions.removeLineItem({
-                            wallet: wallet.wallet,
-                            lineItemId: item.id,
-                        }));
-                    }
-                });
-                // Re-extract line items from billing statements
-                const billingStatementIds = wallet.billingStatements.filter((id) => id !== null && id !== undefined);
-                syncWallet(wallet.wallet, billingStatementIds, groups, dispatch);
-            });
-        }
-    }, [needsSync, outdatedWallets, wallets, groups, dispatch, syncWallet]);
     // Handle period date changes
     const handlePeriodStartChange = (e) => {
         const value = e.target.value;
@@ -75,6 +40,27 @@ export function Editor() {
         setIsModalOpen(false);
         setSelectedWallet(null);
     };
+    // Handle PDF export
+    const handleExportPDF = async () => {
+        try {
+            const blob = await pdf(_jsx(ExpenseReportPDF, { periodStart: periodStart, periodEnd: periodEnd, wallets: wallets, groups: groups })).toBlob();
+            // Create download link
+            const url = URL.createObjectURL(blob);
+            const link = window.document.createElement("a");
+            link.href = url;
+            // Generate filename with period
+            const filename = periodStart
+                ? `expense-report-${new Date(periodStart).toISOString().split('T')[0]}.pdf`
+                : "expense-report.pdf";
+            link.download = filename;
+            link.click();
+            // Cleanup
+            URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            console.error("Error generating PDF:", error);
+        }
+    };
     // Format period title for the breakdown section
     const breakdownTitle = useMemo(() => {
         if (!periodStart)
@@ -84,5 +70,5 @@ export function Editor() {
         const year = date.getFullYear();
         return `${month} ${year} Breakdown`;
     }, [periodStart]);
-    return (_jsxs("div", { className: "ph-default-styles flex flex-col h-full w-full bg-gray-50 dark:bg-gray-900", children: [_jsx("div", { className: "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-8 py-6", children: _jsx("div", { className: "max-w-7xl mx-auto", children: _jsxs("div", { className: "text-center mb-6", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-2", children: "Expense Report" }), _jsx("div", { className: "flex items-center justify-center gap-4 text-sm text-gray-600 dark:text-gray-400", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium", children: "Period:" }), _jsx(DatePicker, { name: "periodStart", value: periodStart, onChange: handlePeriodStartChange }), _jsx("span", { children: "to" }), _jsx(DatePicker, { name: "periodEnd", value: periodEnd, onChange: handlePeriodEndChange })] }) })] }) }) }), _jsx("div", { className: "flex-1 overflow-auto px-8 py-6", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-8", children: [_jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: _jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Wallets" }) }), _jsx("div", { className: "p-6", children: _jsx(WalletsTable, { wallets: wallets, groups: groups, onAddBillingStatement: handleAddBillingStatement, dispatch: dispatch }) })] }), wallets.length > 0 && (_jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: _jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: breakdownTitle }) }), _jsx("div", { className: "p-6", children: _jsx(AggregatedExpensesTable, { wallets: wallets, groups: groups, periodStart: periodStart, periodEnd: periodEnd, dispatch: dispatch }) })] }))] }) }), isModalOpen && selectedWallet && (_jsx(AddBillingStatementModal, { isOpen: isModalOpen, onClose: handleCloseModal, walletAddress: selectedWallet, dispatch: dispatch, groups: groups }))] }));
+    return (_jsxs("div", { className: "ph-default-styles flex flex-col h-full w-full bg-gray-50 dark:bg-gray-900", children: [_jsx("div", { className: "flex-1 overflow-auto px-8 py-6", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-8", children: [_jsx("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: _jsx("div", { className: "px-6 py-6", children: _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-4", children: "Expense Report" }), _jsx("div", { className: "flex items-center justify-center gap-4 text-sm text-gray-600 dark:text-gray-400", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium", children: "Period:" }), _jsx(DatePicker, { name: "periodStart", value: periodStart, onChange: handlePeriodStartChange }), _jsx("span", { children: "to" }), _jsx(DatePicker, { name: "periodEnd", value: periodEnd, onChange: handlePeriodEndChange })] }) })] }), _jsxs(Button, { variant: "ghost", onClick: handleExportPDF, className: "absolute top-0 right-0 flex items-center gap-2", children: [_jsx(Icon, { name: "ExportPdf", size: 18 }), "Export to PDF"] })] }) }) }), _jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: _jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Wallets" }) }), _jsx("div", { className: "p-6", children: _jsx(WalletsTable, { wallets: wallets, groups: groups, onAddBillingStatement: handleAddBillingStatement, dispatch: dispatch }) })] }), wallets.length > 0 && (_jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: _jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: breakdownTitle }) }), _jsx("div", { className: "p-6", children: _jsx(AggregatedExpensesTable, { wallets: wallets, groups: groups, periodStart: periodStart, periodEnd: periodEnd, dispatch: dispatch }) })] }))] }) }), isModalOpen && selectedWallet && (_jsx(AddBillingStatementModal, { isOpen: isModalOpen, onClose: handleCloseModal, walletAddress: selectedWallet, dispatch: dispatch, groups: groups }))] }));
 }

package/dist/editors/expense-report/hooks/useSyncWallet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSyncWallet.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/hooks/useSyncWallet.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AAkB1F,wBAAgB,aAAa;gCAIV,MAAM,uBACA,MAAM,EAAE,UACrB,aAAa,EAAE,YACb,GAAG;EA8DhB"}
+{"version":3,"file":"useSyncWallet.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/hooks/useSyncWallet.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AAkB1F,wBAAgB,aAAa;gCAIV,MAAM,uBACA,MAAM,EAAE,UACrB,aAAa,EAAE,YACb,GAAG;EA0FhB"}

package/dist/editors/expense-report/hooks/useSyncWallet.js

@@ -23,10 +23,9 @@ export function useSyncWallet() {
             const group = groups.find((g) => g.label === expenseAccountTag.label);
             return group ? group.id : null;
         };
-        // Clear existing line items for this wallet first
-        // Note: We'll need to add a new action for this, or remove items one by one
-        // For now, let's re-add all line items from billing statements
-        // Extract and add line items from all billing statements
+        // Aggregate line items by category
+        const categoryAggregation = new Map();
+        // Extract and aggregate line items from all billing statements
         billingStatementIds.forEach((statementId) => {
             const statement = billingStatements.get(statementId);
             if (!statement?.state?.global?.lineItems)
@@ -34,22 +33,43 @@ export function useSyncWallet() {
             const lineItems = statement.state.global.lineItems || [];
             lineItems.forEach((billingLineItem) => {
                 const groupId = mapTagToGroup(billingLineItem);
-                const expenseLineItem = {
-                    id: generateId(),
-                    label: billingLineItem.description,
-                    group: groupId,
-                    budget: 0,
-                    actuals: billingLineItem.totalPriceCash || 0,
-                    forecast: 0,
-                    payments: 0,
-                    comments: null,
-                };
-                dispatch(actions.addLineItem({
-                    wallet: walletAddress,
-                    lineItem: expenseLineItem,
-                }));
+                const categoryKey = groupId || "uncategorized";
+                const existing = categoryAggregation.get(categoryKey);
+                if (existing) {
+                    // Aggregate values for the same category
+                    existing.actuals += billingLineItem.totalPriceCash || 0;
+                }
+                else {
+                    // Create new category entry
+                    const group = groups.find((g) => g.id === groupId);
+                    categoryAggregation.set(categoryKey, {
+                        groupId: groupId,
+                        groupLabel: group?.label || "Uncategorised",
+                        budget: 0,
+                        actuals: billingLineItem.totalPriceCash || 0,
+                        forecast: 0,
+                        payments: 0,
+                    });
+                }
             });
         });
+        // Now add aggregated line items to wallet
+        categoryAggregation.forEach((aggregatedItem) => {
+            const expenseLineItem = {
+                id: generateId(),
+                label: aggregatedItem.groupLabel,
+                group: aggregatedItem.groupId,
+                budget: aggregatedItem.budget,
+                actuals: aggregatedItem.actuals,
+                forecast: aggregatedItem.forecast,
+                payments: aggregatedItem.payments,
+                comments: null,
+            };
+            dispatch(actions.addLineItem({
+                wallet: walletAddress,
+                lineItem: expenseLineItem,
+            }));
+        });
     };
     return { syncWallet };
 }

package/dist/editors/expense-report/hooks/useWalletSync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWalletSync.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/hooks/useWalletSync.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sDAAsD,CAAC;AAEnF,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,UAAU,CA2F3D"}
+{"version":3,"file":"useWalletSync.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/hooks/useWalletSync.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sDAAsD,CAAC;AAEnF,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,UAAU,CAoG3D"}