@powerhousedao/contributor-billing 0.1.3 → 0.1.4

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

@@ -0,0 +1,232 @@
+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("");
+    // 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
+    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 || undefined,
+                parentGroupId: groupInfo?.parent?.id || null,
+                parentGroupLabel: groupInfo?.parent?.label || undefined,
+            };
+        });
+    }, [wallets, activeWalletIndex, groupsMap]);
+    // Group line items by category and aggregate by parent category
+    const groupedAndAggregatedItems = useMemo(() => {
+        // First, aggregate line items by their category (group)
+        const categoryAggregation = new Map();
+        walletLineItems.forEach((item) => {
+            if (!item)
+                return;
+            const categoryKey = item.group || "uncategorized";
+            const existing = categoryAggregation.get(categoryKey);
+            if (existing) {
+                // Aggregate values for the same category
+                existing.budget += item.budget || 0;
+                existing.forecast += item.forecast || 0;
+                existing.actuals += item.actuals || 0;
+                existing.payments += item.payments || 0;
+                // Comment stays the same (first item's comment is used)
+            }
+            else {
+                // Create new category entry
+                categoryAggregation.set(categoryKey, {
+                    groupId: categoryKey,
+                    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 || "",
+                });
+            }
+        });
+        // Then, group aggregated categories by their parent
+        const grouped = new Map();
+        categoryAggregation.forEach((aggItem) => {
+            const parentKey = aggItem.parentGroupId || "uncategorized";
+            const items = grouped.get(parentKey) || [];
+            items.push(aggItem);
+            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.actuals - item.budget),
+            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?.actuals || 0) - (item?.budget || 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 = (groupId, currentComment) => {
+        setEditingGroupId(groupId);
+        setEditingComment(currentComment);
+    };
+    // Handle saving comment
+    const handleSaveComment = (groupId) => {
+        const wallet = wallets[activeWalletIndex];
+        if (!wallet || !wallet.wallet)
+            return;
+        // Find all line items with this group ID
+        const lineItemsToUpdate = wallet.lineItems?.filter((item) => item?.group === groupId) || [];
+        // Create all update actions
+        const updateActions = lineItemsToUpdate
+            .filter((item) => item?.id)
+            .map((item) => actions.updateLineItem({
+            wallet: wallet.wallet,
+            lineItemId: item.id,
+            comments: editingComment,
+        }));
+        // Dispatch all actions at once
+        if (updateActions.length > 0) {
+            dispatch(updateActions);
+        }
+        // Reset editing state
+        setEditingGroupId(null);
+        setEditingComment("");
+    };
+    // Handle canceling comment edit
+    const handleCancelEdit = () => {
+        setEditingGroupId(null);
+        setEditingComment("");
+    };
+    // 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-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Comments" }), _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" })] }) }), _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.actuals - item.budget;
+                                                const isEditing = editingGroupId === item.groupId;
+                                                return (_jsxs("tr", { className: "bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors", 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: formatNumber(item.budget) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatNumber(item.forecast) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatNumber(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"
+                                                                : difference < 0
+                                                                    ? "text-green-600 dark:text-green-400"
+                                                                    : "text-gray-900 dark:text-white"}`, children: formatNumber(difference) }), _jsx("td", { className: "px-6 py-3 text-sm", children: isEditing ? (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Textarea, { value: editingComment, onChange: (e) => setEditingComment(e.target.value), placeholder: "Add comment...", autoExpand: true, multiline: true, onKeyDown: (e) => {
+                                                                                if (e.key === "Escape") {
+                                                                                    handleCancelEdit();
+                                                                                }
+                                                                            } }) }), _jsxs("div", { className: "flex gap-1 mt-1", children: [_jsx("button", { onClick: () => handleSaveComment(item.groupId), className: "px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700", title: "Save", children: "\u2713" }), _jsx("button", { onClick: handleCancelEdit, className: "px-2 py-1 text-xs bg-gray-400 text-white rounded hover:bg-gray-500", title: "Cancel", children: "\u2715" })] })] })) : (_jsxs("div", { className: "flex items-center gap-2 group", children: [_jsx("span", { className: "text-gray-600 dark:text-gray-400 italic flex-1 whitespace-pre-wrap", children: item.comment || "No comments" }), _jsx("button", { onClick: () => handleStartEdit(item.groupId, item.comment), className: "opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded", title: "Edit comment", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 text-gray-600 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) })] })) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatNumber(item.payments) })] }, item.groupId));
+                                            }), _jsxs("tr", { className: "bg-gray-50 dark:bg-gray-800/50 font-semibold", 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: formatNumber(subtotals.budget) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatNumber(subtotals.forecast) }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", 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"
+                                                            : subtotals.difference < 0
+                                                                ? "text-green-600 dark:text-green-400"
+                                                                : "text-gray-900 dark:text-white"}`, children: formatNumber(subtotals.difference) }), _jsx("td", { className: "px-6 py-3" }), _jsx("td", { className: "px-6 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatNumber(subtotals.payments) })] })] }, parentKey));
+                                }), _jsxs("tr", { className: "bg-gray-100 dark:bg-gray-800 font-bold", 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: formatNumber(grandTotals.budget) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatNumber(grandTotals.forecast) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", 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"
+                                                : grandTotals.difference < 0
+                                                    ? "text-green-600 dark:text-green-400"
+                                                    : "text-gray-900 dark:text-white"}`, children: formatNumber(grandTotals.difference) }), _jsx("td", { className: "px-6 py-4" }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatNumber(grandTotals.payments) })] })] })] }) })] }));
+}

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"}

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

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, TextInput } from "@powerhousedao/document-engineering";
+import { Plus, Trash2, Pencil, Check, X, Copy, CheckCheck, RefreshCw } from "lucide-react";
+import { actions } from "../../../document-models/expense-report/index.js";
+import { useWalletSync } from "../hooks/useWalletSync.js";
+import { useSyncWallet } from "../hooks/useSyncWallet.js";
+export function WalletsTable({ wallets, groups, onAddBillingStatement, dispatch, }) {
+    const [newWalletAddress, setNewWalletAddress] = useState("");
+    const [newWalletName, setNewWalletName] = useState("");
+    const [walletError, setWalletError] = useState("");
+    const [hoveredWallet, setHoveredWallet] = useState(null);
+    const [editingWallet, setEditingWallet] = useState(null);
+    const [editingName, setEditingName] = useState("");
+    const [copiedWallet, setCopiedWallet] = useState(null);
+    const [syncingWallet, setSyncingWallet] = useState(null);
+    // Check sync status
+    const { needsSync, outdatedWallets, tagChangedWallets } = useWalletSync(wallets);
+    const { syncWallet } = useSyncWallet();
+    const handleAddWallet = () => {
+        const trimmedAddress = newWalletAddress.trim();
+        if (trimmedAddress) {
+            // Check if wallet already exists
+            const walletExists = wallets.some(w => w.wallet === trimmedAddress);
+            if (walletExists) {
+                setWalletError("This wallet already exists");
+                return;
+            }
+            dispatch(actions.addWallet({
+                wallet: trimmedAddress,
+                name: newWalletName.trim() || undefined,
+            }));
+            setNewWalletAddress("");
+            setNewWalletName("");
+            setWalletError("");
+        }
+    };
+    const handleStartEditName = (wallet) => {
+        setEditingWallet(wallet.wallet || null);
+        setEditingName(wallet.name || "");
+    };
+    const handleSaveEditName = (walletAddress) => {
+        const wallet = wallets.find(w => w.wallet === walletAddress);
+        const trimmedName = editingName.trim();
+        // Only update if the name has changed
+        if (trimmedName && wallet && trimmedName !== (wallet.name || "")) {
+            dispatch(actions.updateWallet({
+                address: walletAddress,
+                name: trimmedName,
+            }));
+        }
+        setEditingWallet(null);
+        setEditingName("");
+    };
+    const handleCancelEditName = () => {
+        setEditingWallet(null);
+        setEditingName("");
+    };
+    const handleCopyAddress = (address) => {
+        navigator.clipboard.writeText(address);
+        setCopiedWallet(address);
+        setTimeout(() => setCopiedWallet(null), 2000);
+    };
+    const formatAddress = (address) => {
+        if (!address || address.length < 11)
+            return address;
+        return `${address.substring(0, 6)}...${address.substring(address.length - 5)}`;
+    };
+    const handleSyncWallet = async (wallet) => {
+        if (!wallet.wallet || !wallet.billingStatements || wallet.billingStatements.length === 0) {
+            return;
+        }
+        setSyncingWallet(wallet.wallet);
+        try {
+            // 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);
+            // Small delay to show sync animation
+            setTimeout(() => {
+                setSyncingWallet(null);
+            }, 500);
+        }
+        catch (error) {
+            console.error("Error syncing wallet:", error);
+            setSyncingWallet(null);
+        }
+    };
+    const handleRemoveWallet = (walletAddress) => {
+        dispatch(actions.removeWallet({
+            wallet: walletAddress,
+        }));
+    };
+    // Calculate totals for a wallet
+    const calculateWalletTotals = (wallet) => {
+        const lineItems = wallet.lineItems || [];
+        return {
+            budget: lineItems.reduce((sum, item) => sum + (item?.budget || 0), 0),
+            forecast: lineItems.reduce((sum, item) => sum + (item?.forecast || 0), 0),
+            actuals: lineItems.reduce((sum, item) => sum + (item?.actuals || 0), 0),
+            difference: lineItems.reduce((sum, item) => {
+                const budget = item?.budget || 0;
+                const actuals = item?.actuals || 0;
+                return sum + (actuals - budget);
+            }, 0),
+            payments: lineItems.reduce((sum, item) => sum + (item?.payments || 0), 0),
+        };
+    };
+    const formatCurrency = (value) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+            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) => {
+                                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) => {
+                                                            if (e.key === "Enter") {
+                                                                handleSaveEditName(wallet.wallet || "");
+                                                            }
+                                                            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 || "")
+                                                            ? "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!"
+                                                            : 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));
+                            }) })] }) })) : (_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();
+                                    }
+                                } })] }), _jsxs("div", { className: "flex-1 relative", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Wallet Address" }), _jsx(TextInput, { value: newWalletAddress, onChange: (e) => {
+                                    setNewWalletAddress(e.target.value);
+                                    setWalletError(""); // Clear error when typing
+                                }, placeholder: "Enter wallet address (e.g., 0x1234...)", onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        handleAddWallet();
+                                    }
+                                } }), walletError && (_jsx("div", { className: "absolute left-0 right-0 top-full mt-1 px-3 py-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md shadow-lg z-10", children: _jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: walletError }) }))] }), _jsx(Button, { onClick: handleAddWallet, disabled: !newWalletAddress.trim(), children: "Add Wallet" })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function Editor(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

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

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

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { useSelectedExpenseReportDocument } from "../hooks/useExpenseReportDocument.js";
+import { actions } from "../../document-models/expense-report/index.js";
+import { DatePicker } 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";
+export function Editor() {
+    const [document, dispatch] = useSelectedExpenseReportDocument();
+    const [selectedWallet, setSelectedWallet] = useState(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    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;
+        setPeriodStart(value);
+        if (value) {
+            dispatch(actions.setPeriodStart({ periodStart: value }));
+        }
+    };
+    const handlePeriodEndChange = (e) => {
+        const value = e.target.value;
+        setPeriodEnd(value);
+        if (value) {
+            dispatch(actions.setPeriodEnd({ periodEnd: value }));
+        }
+    };
+    // Handle wallet selection for adding billing statements
+    const handleAddBillingStatement = (walletAddress) => {
+        setSelectedWallet(walletAddress);
+        setIsModalOpen(true);
+    };
+    // Handle closing modal
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setSelectedWallet(null);
+    };
+    // Format period title for the breakdown section
+    const breakdownTitle = 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]);
+    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 }))] }));
+}

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

@@ -0,0 +1,5 @@
+import type { LineItemGroup } from "../../../document-models/expense-report/gen/types.js";
+export declare function useSyncWallet(): {
+    syncWallet: (walletAddress: string, billingStatementIds: string[], groups: LineItemGroup[], dispatch: any) => void;
+};
+//# sourceMappingURL=useSyncWallet.d.ts.map

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

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

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

@@ -0,0 +1,55 @@
+import { useSelectedDriveDocuments } from "@powerhousedao/reactor-browser";
+import { actions } from "../../../document-models/expense-report/index.js";
+import { generateId } from "document-model";
+export function useSyncWallet() {
+    const documents = useSelectedDriveDocuments();
+    const syncWallet = (walletAddress, billingStatementIds, groups, dispatch) => {
+        if (!documents)
+            return;
+        // Get billing statement documents
+        const billingStatements = new Map();
+        documents
+            .filter((doc) => doc.header.documentType === "powerhouse/billing-statement")
+            .forEach((doc) => {
+            billingStatements.set(doc.header.id, doc);
+        });
+        // Helper function to map tag to group
+        const mapTagToGroup = (billingLineItem) => {
+            // Find expense-account tag
+            const expenseAccountTag = billingLineItem.lineItemTag?.find((tag) => tag.dimension === "expense-account");
+            if (!expenseAccountTag || !expenseAccountTag.label)
+                return null;
+            // Find matching group by label
+            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
+        billingStatementIds.forEach((statementId) => {
+            const statement = billingStatements.get(statementId);
+            if (!statement?.state?.global?.lineItems)
+                return;
+            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,
+                }));
+            });
+        });
+    };
+    return { syncWallet };
+}

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

@@ -0,0 +1,9 @@
+import type { Wallet } from "../../../document-models/expense-report/gen/types.js";
+interface SyncStatus {
+    needsSync: boolean;
+    outdatedWallets: string[];
+    tagChangedWallets: string[];
+}
+export declare function useWalletSync(wallets: Wallet[]): SyncStatus;
+export {};
+//# sourceMappingURL=useWalletSync.d.ts.map

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

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