@powerhousedao/contributor-billing 0.1.3 → 0.1.5

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

@@ -0,0 +1,268 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import React from "react";
+import { actions } from "../../../document-models/expense-report/index.js";
+import { Textarea } from "@powerhousedao/document-engineering";
+export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEnd, dispatch, }) {
+    // State for active tab (selected wallet)
+    const [activeWalletIndex, setActiveWalletIndex] = useState(0);
+    // State for editing comments
+    const [editingGroupId, setEditingGroupId] = useState(null);
+    const [editingComment, setEditingComment] = useState("");
+    const [originalComment, setOriginalComment] = useState("");
+    // State for editing numeric fields
+    const [editingField, setEditingField] = useState(null);
+    const [editingValue, setEditingValue] = useState("");
+    // Format period for title
+    const periodTitle = useMemo(() => {
+        if (!periodStart)
+            return "Breakdown";
+        const date = new Date(periodStart);
+        const month = date.toLocaleDateString("en-US", { month: "short" });
+        const year = date.getFullYear();
+        return `${month} ${year} Breakdown`;
+    }, [periodStart]);
+    // Create a map of groups with their parent info
+    const groupsMap = useMemo(() => {
+        const map = new Map();
+        groups.forEach((group) => {
+            map.set(group.id, { group });
+        });
+        // Add parent references
+        groups.forEach((group) => {
+            if (group.parentId) {
+                const entry = map.get(group.id);
+                const parentEntry = map.get(group.parentId);
+                if (entry && parentEntry) {
+                    entry.parent = parentEntry.group;
+                }
+            }
+        });
+        return map;
+    }, [groups]);
+    // Get line items for the active wallet with group information
+    // Line items are now already aggregated by category
+    const walletLineItems = useMemo(() => {
+        if (!wallets[activeWalletIndex])
+            return [];
+        const wallet = wallets[activeWalletIndex];
+        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,
+            };
+        });
+    }, [wallets, activeWalletIndex, groupsMap]);
+    // Group line items by parent category
+    // Line items are already aggregated by category, so we just need to group them by parent
+    const groupedAndAggregatedItems = useMemo(() => {
+        const grouped = new Map();
+        walletLineItems.forEach((item) => {
+            if (!item)
+                return;
+            const parentKey = item.parentGroupId || "uncategorized";
+            const items = grouped.get(parentKey) || [];
+            items.push({
+                lineItemId: item.id || "",
+                groupId: item.group || "uncategorized",
+                groupLabel: item.groupLabel || "Uncategorised",
+                parentGroupId: item.parentGroupId,
+                parentGroupLabel: item.parentGroupLabel,
+                budget: item.budget || 0,
+                forecast: item.forecast || 0,
+                actuals: item.actuals || 0,
+                payments: item.payments || 0,
+                comment: item.comments || "",
+            });
+            grouped.set(parentKey, items);
+        });
+        return grouped;
+    }, [walletLineItems]);
+    // Calculate subtotals for each parent group
+    const calculateSubtotal = (items) => {
+        return items.reduce((acc, item) => ({
+            budget: acc.budget + item.budget,
+            forecast: acc.forecast + item.forecast,
+            actuals: acc.actuals + item.actuals,
+            difference: acc.difference + (item.forecast - item.actuals),
+            payments: acc.payments + item.payments,
+        }), { budget: 0, forecast: 0, actuals: 0, difference: 0, payments: 0 });
+    };
+    // Calculate grand totals
+    const grandTotals = useMemo(() => {
+        return walletLineItems.reduce((acc, item) => ({
+            budget: acc.budget + (item?.budget || 0),
+            forecast: acc.forecast + (item?.forecast || 0),
+            actuals: acc.actuals + (item?.actuals || 0),
+            difference: acc.difference + ((item?.forecast || 0) - (item?.actuals || 0)),
+            payments: acc.payments + (item?.payments || 0),
+        }), { budget: 0, forecast: 0, actuals: 0, difference: 0, payments: 0 });
+    }, [walletLineItems]);
+    const formatNumber = (value) => {
+        return new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(value);
+    };
+    const formatWalletAddress = (address) => {
+        if (!address || address.length < 13)
+            return address;
+        return `${address.substring(0, 6)}...${address.substring(address.length - 6)}`;
+    };
+    // Handle starting comment edit
+    const handleStartEdit = (lineItemId, currentComment) => {
+        setEditingGroupId(lineItemId);
+        setEditingComment(currentComment);
+        setOriginalComment(currentComment);
+    };
+    // Handle saving comment for a single line item
+    const handleSaveComment = () => {
+        const wallet = wallets[activeWalletIndex];
+        if (!wallet || !wallet.wallet || !editingGroupId)
+            return;
+        // Only dispatch if the comment has actually changed
+        if (editingComment !== originalComment) {
+            dispatch(actions.updateLineItem({
+                wallet: wallet.wallet,
+                lineItemId: editingGroupId,
+                comments: editingComment,
+            }));
+        }
+        // Reset editing state
+        setEditingGroupId(null);
+        setEditingComment("");
+        setOriginalComment("");
+    };
+    // Handle canceling comment edit
+    const handleCancelEdit = () => {
+        setEditingGroupId(null);
+        setEditingComment("");
+        setOriginalComment("");
+    };
+    // Handle starting numeric field edit
+    const handleStartFieldEdit = (lineItemId, field, currentValue) => {
+        setEditingField({ lineItemId, field, originalValue: currentValue });
+        setEditingValue(currentValue.toString());
+    };
+    // Handle saving numeric field
+    const handleSaveField = () => {
+        const wallet = wallets[activeWalletIndex];
+        if (!wallet || !wallet.wallet || !editingField)
+            return;
+        const numericValue = parseFloat(editingValue);
+        if (isNaN(numericValue)) {
+            // Invalid number, cancel edit
+            handleCancelFieldEdit();
+            return;
+        }
+        // Only dispatch if the value has actually changed
+        if (numericValue !== editingField.originalValue) {
+            dispatch(actions.updateLineItem({
+                wallet: wallet.wallet,
+                lineItemId: editingField.lineItemId,
+                [editingField.field]: numericValue,
+            }));
+        }
+        // Reset editing state
+        setEditingField(null);
+        setEditingValue("");
+    };
+    // Handle canceling numeric field edit
+    const handleCancelFieldEdit = () => {
+        setEditingField(null);
+        setEditingValue("");
+    };
+    // Sort parent groups: Headcount first, then Non-Headcount, then others, then uncategorized
+    const sortedParentKeys = useMemo(() => {
+        const keys = Array.from(groupedAndAggregatedItems.keys());
+        // 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");
+        return keys.sort((a, b) => {
+            // Uncategorized always goes last
+            if (a === "uncategorized")
+                return 1;
+            if (b === "uncategorized")
+                return -1;
+            // Headcount Expenses always first
+            if (a === headcountGroup?.id)
+                return -1;
+            if (b === headcountGroup?.id)
+                return 1;
+            // Non-Headcount Expenses always second
+            if (a === nonHeadcountGroup?.id)
+                return -1;
+            if (b === nonHeadcountGroup?.id)
+                return 1;
+            // For other groups, maintain their original order
+            return 0;
+        });
+    }, [groupedAndAggregatedItems, groups]);
+    if (wallets.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "border-b border-gray-200 dark:border-gray-700", children: _jsx("nav", { className: "-mb-px flex space-x-8", "aria-label": "Tabs", children: wallets.map((wallet, index) => {
+                        const isActive = index === activeWalletIndex;
+                        return (_jsx("button", { onClick: () => setActiveWalletIndex(index), className: `
+                  whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors
+                  ${isActive
+                                ? "border-green-500 text-green-600 dark:text-green-400"
+                                : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"}
+                `, children: wallet.name || formatWalletAddress(wallet.wallet || "") }, wallet.wallet || index));
+                    }) }) }), _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: "Expense Category" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Mthly 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-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-96", children: "Comments" }), _jsx("th", { className: "px-3 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32", children: "Payments" })] }) }), _jsxs("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-700", children: [sortedParentKeys.map((parentKey) => {
+                                    const items = groupedAndAggregatedItems.get(parentKey) || [];
+                                    if (items.length === 0)
+                                        return null;
+                                    const subtotals = calculateSubtotal(items);
+                                    const parentLabel = parentKey === "uncategorized"
+                                        ? "Uncategorised"
+                                        : items[0]?.parentGroupLabel || "Other";
+                                    return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: "bg-gray-100 dark:bg-gray-800", children: _jsx("td", { colSpan: 7, className: "px-6 py-3 text-sm font-bold text-gray-900 dark:text-white", children: parentLabel }) }), items.map((item) => {
+                                                if (!item)
+                                                    return null;
+                                                const difference = item.forecast - item.actuals;
+                                                const isEditingComment = editingGroupId === item.lineItemId;
+                                                // Helper function to render editable numeric cell
+                                                const renderEditableCell = (field, value) => {
+                                                    const isEditingThis = editingField?.lineItemId === item.lineItemId &&
+                                                        editingField?.field === field;
+                                                    if (isEditingThis) {
+                                                        return (_jsx("div", { className: "flex items-center gap-1", children: _jsx("input", { type: "number", step: "0.01", value: editingValue, onChange: (e) => setEditingValue(e.target.value), onKeyDown: (e) => {
+                                                                    if (e.key === "Enter") {
+                                                                        handleSaveField();
+                                                                    }
+                                                                    else if (e.key === "Escape") {
+                                                                        handleCancelFieldEdit();
+                                                                    }
+                                                                }, onBlur: handleSaveField, autoFocus: true, className: "w-full px-2 py-1 text-right text-sm border border-blue-500 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white" }) }));
+                                                    }
+                                                    return (_jsx("div", { className: "group cursor-pointer text-right", onClick: () => handleStartFieldEdit(item.lineItemId, field, value), children: _jsx("span", { className: "group-hover:bg-blue-50 dark:group-hover:bg-blue-900/20 inline-block px-1 py-0.5 rounded transition-colors min-w-[4rem]", children: formatNumber(value) }) }));
+                                                };
+                                                return (_jsxs("tr", { className: "bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors align-top", children: [_jsx("td", { className: "px-6 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-white", children: item.groupLabel }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: renderEditableCell("budget", item.budget) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: renderEditableCell("forecast", item.forecast) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: renderEditableCell("actuals", item.actuals) }), _jsx("td", { className: `px-6 py-3 whitespace-nowrap text-right text-sm font-medium ${difference < 0
+                                                                ? "text-red-600 dark:text-red-400"
+                                                                : "text-gray-900 dark:text-white"}`, children: formatNumber(difference) }), _jsx("td", { className: "px-3 py-3 text-sm w-96", children: isEditingComment ? (_jsx(Textarea, { value: editingComment, onChange: (e) => setEditingComment(e.target.value), placeholder: "Add comment...", autoExpand: true, multiline: true, onKeyDown: (e) => {
+                                                                    if (e.key === "Enter" && !e.shiftKey) {
+                                                                        e.preventDefault();
+                                                                        handleSaveComment();
+                                                                    }
+                                                                    else if (e.key === "Escape") {
+                                                                        handleCancelEdit();
+                                                                    }
+                                                                    else if (e.key === "Tab") {
+                                                                        e.preventDefault();
+                                                                        handleSaveComment();
+                                                                    }
+                                                                }, onBlur: handleSaveComment, autoFocus: true, className: "w-full px-2 py-1 text-sm border border-blue-500 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white max-h-32 overflow-y-auto" })) : (_jsx("div", { className: "group cursor-pointer w-full max-h-20 overflow-hidden", onClick: () => handleStartEdit(item.lineItemId, item.comment), title: item.comment || "No comments", children: _jsx("span", { className: "group-hover:bg-blue-50 dark:group-hover:bg-blue-900/20 px-1 py-0.5 rounded transition-colors block text-gray-600 dark:text-gray-400 break-words", children: item.comment || "No comments" }) })) }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white w-32", children: renderEditableCell("payments", item.payments) })] }, item.lineItemId));
+                                            }), _jsxs("tr", { className: "bg-gray-50 dark:bg-gray-800/50 font-semibold align-top", children: [_jsx("td", { className: "px-6 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-white", children: "Subtotal" }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(subtotals.budget) }) }) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(subtotals.forecast) }) }) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(subtotals.actuals) }) }) }), _jsx("td", { className: `px-6 py-3 whitespace-nowrap text-right text-sm font-bold ${subtotals.difference < 0
+                                                            ? "text-red-600 dark:text-red-400"
+                                                            : "text-gray-900 dark:text-white"}`, children: formatNumber(subtotals.difference) }), _jsx("td", { className: "px-3 py-3" }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white w-32", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(subtotals.payments) }) }) })] })] }, parentKey));
+                                }), _jsxs("tr", { className: "bg-gray-100 dark:bg-gray-800 font-bold align-top", children: [_jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white", children: "Total" }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(grandTotals.budget) }) }) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(grandTotals.forecast) }) }) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(grandTotals.actuals) }) }) }), _jsx("td", { className: `px-6 py-4 whitespace-nowrap text-right text-sm ${grandTotals.difference < 0
+                                                ? "text-red-600 dark:text-red-400"
+                                                : "text-gray-900 dark:text-white"}`, children: formatNumber(grandTotals.difference) }), _jsx("td", { className: "px-3 py-4" }), _jsx("td", { className: "px-3 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white w-32", children: _jsx("div", { className: "text-right", children: _jsx("span", { className: "inline-block px-1 py-0.5 min-w-[4rem]", children: formatNumber(grandTotals.payments) }) }) })] })] })] }) })] }));
+}

package/dist/editors/expense-report/components/ExpenseReportPDF.d.ts

@@ -0,0 +1,10 @@
+import type { Wallet, LineItemGroup } from "../../../document-models/expense-report/gen/types.js";
+interface ExpenseReportPDFProps {
+    periodStart?: string | null;
+    periodEnd?: string | null;
+    wallets: Wallet[];
+    groups: LineItemGroup[];
+}
+export declare function ExpenseReportPDF({ periodStart, periodEnd, wallets, groups, }: ExpenseReportPDFProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExpenseReportPDF.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpenseReportPDF.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/components/ExpenseReportPDF.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,MAAM,EACN,aAAa,EAEd,MAAM,sDAAsD,CAAC;AAE9D,UAAU,qBAAqB;IAC7B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;AAmKD,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,GACP,EAAE,qBAAqB,2CAiVvB"}

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, { wrap: false, break: walletIndex > 0, 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: [_jsxs(View, { style: styles.tableHeader, 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" })] }), 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: [_jsx(View, { style: {
+                                                        paddingVertical: 6,
+                                                        paddingHorizontal: 6,
+                                                        backgroundColor: "#f9fafb",
+                                                        borderBottom: "1pt solid #e5e7eb",
+                                                        marginTop: groupIndex > 0 ? 8 : 0,
+                                                    }, 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

@@ -0,0 +1,10 @@
+import type { Wallet, LineItemGroup } from "../../../document-models/expense-report/gen/types.js";
+interface WalletsTableProps {
+    wallets: Wallet[];
+    groups: LineItemGroup[];
+    onAddBillingStatement: (walletAddress: string) => void;
+    dispatch: any;
+}
+export declare function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch, }: WalletsTableProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WalletsTable.d.ts.map

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

@@ -0,0 +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"}