@powerhousedao/contributor-billing 0.1.4 → 0.1.6

package/dist/editors/billing-statement/lineItemTags/lineItemTags.js

@@ -24,7 +24,7 @@ export function LineItemTagsTable({ lineItems, onClose, dispatch, }) {
                                                     id: item.id,
                                                     description: e.target.value,
                                                 }));
-                                            }, className: "w-full text-xs" }) }), _jsx("td", { className: "border-b border-gray-200 p-2 w-50", children: _jsx(DatePicker, { name: "period", dateFormat: "YYYY-MM", autoClose: true, placeholder: "Select Period", value: item.lineItemTag.find((tag) => tag.dimension === "accounting-period")?.label || "", onChange: (e) => dispatch(actions.editLineItemTag({
+                                            }, className: "w-full text-xs" }) }), _jsx("td", { className: "border-b border-gray-200 p-2 w-50", children: _jsx(DatePicker, { name: "period", dateFormat: "YYYY-MM-DD", autoClose: true, placeholder: "Select Period", value: item.lineItemTag.find((tag) => tag.dimension === "accounting-period")?.label || "", onChange: (e) => dispatch(actions.editLineItemTag({
                                                 lineItemId: item.id,
                                                 dimension: "accounting-period",
                                                 value: new Date(e.target.value)

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

@@ -1 +1 @@
-{"version":3,"file":"AddBillingStatementModal.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/components/AddBillingStatementModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AAO1F,UAAU,6BAA6B;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;AA+BD,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,OAAO,EACP,aAAa,EACb,QAAQ,EACR,MAAM,GACP,EAAE,6BAA6B,kDAqS/B"}
+{"version":3,"file":"AddBillingStatementModal.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/components/AddBillingStatementModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AAO1F,UAAU,6BAA6B;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;AA+BD,wBAAgB,wBAAwB,CAAC,EACvC,MAAM,EACN,OAAO,EACP,aAAa,EACb,QAAQ,EACR,MAAM,GACP,EAAE,6BAA6B,kDAuU/B"}

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

@@ -112,39 +112,64 @@ export function AddBillingStatementModal({ isOpen, onClose, walletAddress, dispa
     const handleAddStatements = () => {
         if (selectedStatements.size === 0)
             return;
+        // First, add all billing statement references
         selectedStatements.forEach((statementId) => {
-            const statement = billingStatements.find((s) => s.id === statementId);
-            if (!statement || !statement.document)
-                return;
-            console.log("Statement document:", statement.document);
-            // Add billing statement reference to wallet
             dispatch(actions.addBillingStatement({
                 wallet: walletAddress,
                 billingStatementId: statementId,
             }));
-            // Extract line items from billing statement and add to wallet
+        });
+        // Aggregate line items by category across all selected billing statements
+        const categoryAggregation = new Map();
+        selectedStatements.forEach((statementId) => {
+            const statement = billingStatements.find((s) => s.id === statementId);
+            if (!statement || !statement.document)
+                return;
+            console.log("Statement document:", statement.document);
+            // Extract line items from billing statement
             const billingState = statement.document;
             const lineItems = billingState.state?.global?.lineItems || [];
             console.log("Line items found:", lineItems.length, lineItems);
+            // Aggregate line items by category
             lineItems.forEach((billingLineItem) => {
                 const groupId = mapTagToGroup(billingLineItem);
-                // Create expense report line item from billing statement line item
-                const expenseLineItem = {
-                    id: generateId(),
-                    label: billingLineItem.description,
-                    group: groupId,
-                    budget: 0, // Could be mapped if available
-                    actuals: billingLineItem.totalPriceCash || 0,
-                    forecast: 0, // Could be mapped if available
-                    payments: 0, // Could be set based on status
-                    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,
+            }));
+        });
         onClose();
     };
     if (!isOpen)
@@ -166,5 +191,5 @@ export function AddBillingStatementModal({ isOpen, onClose, walletAddress, dispa
                                                     : "border-gray-300 dark:border-gray-600"}`, children: (isSelected || isAlreadyAdded) && (_jsx(Check, { className: "text-white", size: 14 })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-white truncate", children: statement.name }), _jsxs("span", { className: "text-xs text-gray-500 dark:text-gray-400 px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded", children: [lineItemCount, " items"] }), isAlreadyAdded && (_jsx("span", { className: "text-xs text-amber-600 dark:text-amber-400 px-2 py-1 bg-amber-50 dark:bg-amber-900/20 rounded font-medium", children: "Already included" }))] }), _jsxs("div", { className: "flex items-center gap-4 mt-1 text-sm text-gray-600 dark:text-gray-400", children: [_jsxs("span", { children: ["Total: ", formatCurrency(totalCash)] }), _jsxs("span", { className: "text-xs font-mono", children: [statement.id.substring(0, 8), "..."] })] })] })] }, statement.id));
                             }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400", children: [_jsx(FileText, { size: 48, className: "mb-4 opacity-50" }), _jsx("p", { className: "text-sm", children: searchTerm
                                         ? "No billing statements found matching your search"
-                                        : "No billing statements available in this drive" })] })) }), _jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [_jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: [selectedStatements.size, " statement", selectedStatements.size !== 1 ? "s" : "", " selected"] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { onClick: onClose, className: "px-4 py-2 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", children: "Cancel" }), _jsxs(Button, { onClick: handleAddStatements, disabled: selectedStatements.size === 0, className: "px-4 py-2", children: ["Add", " ", selectedStatements.size > 0 && `(${selectedStatements.size})`] })] })] })] })] }));
+                                        : "No billing statements available in this drive" })] })) }), _jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [_jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: [selectedStatements.size, " statement", selectedStatements.size !== 1 ? "s" : "", " selected"] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Button, { onClick: onClose, variant: "secondary", children: "CANCEL" }), _jsxs(Button, { onClick: handleAddStatements, disabled: selectedStatements.size === 0, className: "bg-green-600 hover:bg-green-700 text-white", children: ["ADD", " ", selectedStatements.size > 0 && `(${selectedStatements.size})`] })] })] })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AggregatedExpensesTable.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/components/AggregatedExpensesTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAY,MAAM,sDAAsD,CAAC;AAI5G,UAAU,4BAA4B;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAQD,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,4BAA4B,kDAye9B"}
+{"version":3,"file":"AggregatedExpensesTable.d.ts","sourceRoot":"","sources":["../../../../editors/expense-report/components/AggregatedExpensesTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAY,MAAM,sDAAsD,CAAC;AAM5G,UAAU,4BAA4B;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CACjC;AAQD,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,QAAQ,GACT,EAAE,4BAA4B,kDAmzB9B"}

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

@@ -1,14 +1,136 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
 import React from "react";
 import { actions } from "../../../document-models/expense-report/index.js";
-import { Textarea } from "@powerhousedao/document-engineering";
+import { Textarea, Select, Button } from "@powerhousedao/document-engineering";
+import { Plus, Trash2 } from "lucide-react";
+import { generateId } from "document-model";
 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("");
+    // State for adding new line item
+    const [isAddingLineItem, setIsAddingLineItem] = useState(false);
+    const [selectedGroupId, setSelectedGroupId] = useState("");
+    const [duplicateCategoryError, setDuplicateCategoryError] = useState("");
+    // State for delete confirmation modal
+    const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+    const [lineItemToDelete, setLineItemToDelete] = useState(null);
+    // Ref for line item editor to scroll into view
+    const lineItemEditorRef = useRef(null);
+    // Scroll to bottom of page when editor opens
+    useEffect(() => {
+        if (isAddingLineItem && lineItemEditorRef.current) {
+            // Use a slight delay to ensure the editor is rendered
+            setTimeout(() => {
+                // Find the scrollable container by traversing up from the ref
+                let element = lineItemEditorRef.current?.parentElement;
+                while (element) {
+                    const style = window.getComputedStyle(element);
+                    const isScrollable = style.overflow === 'auto' || style.overflow === 'scroll' ||
+                        style.overflowY === 'auto' || style.overflowY === 'scroll';
+                    if (isScrollable && element.scrollHeight > element.clientHeight) {
+                        // Found the scrollable container, scroll to bottom
+                        element.scrollTo({ top: element.scrollHeight, behavior: "smooth" });
+                        break;
+                    }
+                    element = element.parentElement;
+                }
+            }, 150);
+        }
+    }, [isAddingLineItem]);
+    // Get existing category IDs for the active wallet
+    const existingCategoryIds = useMemo(() => {
+        const wallet = wallets[activeWalletIndex];
+        if (!wallet || !wallet.lineItems)
+            return new Set();
+        return new Set(wallet.lineItems
+            .filter((item) => item !== null && item !== undefined)
+            .map(item => item.group)
+            .filter((group) => !!group));
+    }, [wallets, activeWalletIndex]);
+    // Create group options for Select component
+    const groupOptions = useMemo(() => {
+        return groups.map((group) => ({
+            value: group.id,
+            label: group.label || group.id,
+        }));
+    }, [groups]);
+    // Handle category selection with duplicate check
+    const handleCategoryChange = (value) => {
+        setSelectedGroupId(value);
+        // Check if category already exists
+        if (existingCategoryIds.has(value)) {
+            const categoryLabel = groups.find(g => g.id === value)?.label || value;
+            setDuplicateCategoryError(`"${categoryLabel}" already exists in this wallet. Please select a different category.`);
+        }
+        else {
+            setDuplicateCategoryError("");
+        }
+    };
+    // Handle saving new line item
+    const handleSaveLineItem = () => {
+        const wallet = wallets[activeWalletIndex];
+        if (!wallet || !wallet.wallet || !selectedGroupId)
+            return;
+        // Prevent saving if duplicate
+        if (existingCategoryIds.has(selectedGroupId)) {
+            return;
+        }
+        const newLineItem = {
+            id: generateId(),
+            label: groups.find(g => g.id === selectedGroupId)?.label || "",
+            group: selectedGroupId,
+            budget: 0,
+            actuals: 0,
+            forecast: 0,
+            payments: 0,
+            comments: "",
+        };
+        dispatch(actions.addLineItem({
+            wallet: wallet.wallet,
+            lineItem: newLineItem,
+        }));
+        // Reset state
+        setIsAddingLineItem(false);
+        setSelectedGroupId("");
+        setDuplicateCategoryError("");
+    };
+    // Handle canceling new line item
+    const handleCancelLineItem = () => {
+        setIsAddingLineItem(false);
+        setSelectedGroupId("");
+        setDuplicateCategoryError("");
+    };
+    // Handle opening delete confirmation modal
+    const handleDeleteLineItem = (lineItemId, lineItemLabel) => {
+        setLineItemToDelete({ id: lineItemId, label: lineItemLabel });
+        setDeleteModalOpen(true);
+    };
+    // Handle confirming deletion
+    const handleConfirmDelete = () => {
+        const wallet = wallets[activeWalletIndex];
+        if (!wallet || !wallet.wallet || !lineItemToDelete)
+            return;
+        dispatch(actions.removeLineItem({
+            wallet: wallet.wallet,
+            lineItemId: lineItemToDelete.id,
+        }));
+        // Close modal and reset state
+        setDeleteModalOpen(false);
+        setLineItemToDelete(null);
+    };
+    // Handle canceling deletion
+    const handleCancelDelete = () => {
+        setDeleteModalOpen(false);
+        setLineItemToDelete(null);
+    };
     // Format period for title
     const periodTitle = useMemo(() => {
         if (!periodStart)
@@ -37,6 +159,7 @@ export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEn
         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 [];
@@ -48,50 +171,33 @@ export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEn
             const groupInfo = item.group ? groupsMap.get(item.group) : undefined;
             return {
                 ...item,
-                groupLabel: groupInfo?.group.label || undefined,
+                groupLabel: groupInfo?.group.label || item.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
+    // 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(() => {
-        // First, aggregate line items by their category (group)
-        const categoryAggregation = new Map();
+        const grouped = 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 parentKey = item.parentGroupId || "uncategorized";
             const items = grouped.get(parentKey) || [];
-            items.push(aggItem);
+            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;
@@ -102,7 +208,7 @@ export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEn
             budget: acc.budget + item.budget,
             forecast: acc.forecast + item.forecast,
             actuals: acc.actuals + item.actuals,
-            difference: acc.difference + (item.actuals - item.budget),
+            difference: acc.difference + (item.forecast - item.actuals),
             payments: acc.payments + item.payments,
         }), { budget: 0, forecast: 0, actuals: 0, difference: 0, payments: 0 });
     };
@@ -112,7 +218,7 @@ export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEn
             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)),
+            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]);
@@ -128,37 +234,67 @@ export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEn
         return `${address.substring(0, 6)}...${address.substring(address.length - 6)}`;
     };
     // Handle starting comment edit
-    const handleStartEdit = (groupId, currentComment) => {
-        setEditingGroupId(groupId);
+    const handleStartEdit = (lineItemId, currentComment) => {
+        setEditingGroupId(lineItemId);
         setEditingComment(currentComment);
+        setOriginalComment(currentComment);
     };
-    // Handle saving comment
-    const handleSaveComment = (groupId) => {
+    // Handle saving comment for a single line item
+    const handleSaveComment = () => {
         const wallet = wallets[activeWalletIndex];
-        if (!wallet || !wallet.wallet)
+        if (!wallet || !wallet.wallet || !editingGroupId)
             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);
+        // 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(() => {
@@ -197,7 +333,7 @@ export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEn
                                 ? "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) => {
+                    }) }) }), _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: "pl-6 pr-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => setIsAddingLineItem(true), className: "inline-flex items-center justify-center w-6 h-6 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", children: _jsx(Plus, { size: 14 }) }), _jsx("span", { children: "Expense Category" })] }) }), _jsx("th", { className: "px-3 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-3 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Forecast" }), _jsx("th", { className: "px-3 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Actuals" }), _jsx("th", { className: "px-3 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" }), _jsx("th", { className: "px-2 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16", children: "Actions" })] }) }), _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;
@@ -205,28 +341,46 @@ export function AggregatedExpensesTable({ wallets, groups, periodStart, periodEn
                                     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) => {
+                                    return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: "bg-gray-100 dark:bg-gray-800", children: _jsx("td", { colSpan: 8, 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
+                                                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: "pl-6 pr-3 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-white", children: item.groupLabel }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: renderEditableCell("budget", item.budget) }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: renderEditableCell("forecast", item.forecast) }), _jsx("td", { className: "px-3 py-3 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: renderEditableCell("actuals", item.actuals) }), _jsx("td", { className: `px-3 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-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) }), _jsx("td", { className: "px-2 py-3 whitespace-nowrap text-center w-16", children: _jsx("button", { onClick: () => handleDeleteLineItem(item.lineItemId, item.groupLabel), className: "inline-flex items-center justify-center p-0.5 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors", title: "Delete line item", children: _jsx(Trash2, { size: 14 }) }) })] }, item.lineItemId));
+                                            }), _jsxs("tr", { className: "bg-gray-50 dark:bg-gray-800/50 font-semibold align-top", children: [_jsx("td", { className: "pl-6 pr-3 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-white", children: "Subtotal" }), _jsx("td", { className: "px-3 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-3 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-3 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-3 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-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) }) }) }), _jsx("td", { className: "px-2 py-3" })] })] }, parentKey));
+                                }), _jsxs("tr", { className: "bg-gray-100 dark:bg-gray-800 font-bold align-top", children: [_jsx("td", { className: "pl-6 pr-3 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white", children: "Total" }), _jsx("td", { className: "px-3 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-3 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-3 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-3 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) })] })] })] }) })] }));
+                                                : "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) }) }) }), _jsx("td", { className: "px-2 py-4" })] }), isAddingLineItem && (_jsx("tr", { ref: lineItemEditorRef, className: "bg-white dark:bg-gray-900 border-t border-gray-900 dark:border-gray-100", children: _jsx("td", { colSpan: 8, className: "px-6 py-4", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-end gap-4", children: [_jsxs("div", { className: "flex-1", children: [_jsx("label", { className: "block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Select Category" }), _jsx(Select, { name: "category", searchable: true, value: selectedGroupId, onChange: (value) => handleCategoryChange(value), options: groupOptions, placeholder: "Choose a category...", className: "w-full" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: handleSaveLineItem, disabled: !selectedGroupId || !!duplicateCategoryError, className: "bg-green-600 hover:bg-green-700 text-white", children: "SAVE" }), _jsx(Button, { onClick: handleCancelLineItem, variant: "secondary", children: "CANCEL" })] })] }), duplicateCategoryError && (_jsx("div", { className: "flex items-start gap-2 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-md", children: _jsx("span", { className: "text-sm text-amber-800 dark:text-amber-200", children: duplicateCategoryError }) }))] }) }) }))] })] }) }), deleteModalOpen && lineItemToDelete && (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: handleCancelDelete }), _jsxs("div", { className: "relative bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden", children: [_jsx("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: _jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Delete Line Item" }) }), _jsx("div", { className: "px-6 py-4", children: _jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Are you sure you want to delete the line item", " ", _jsxs("span", { className: "font-semibold text-gray-900 dark:text-white", children: ["\"", lineItemToDelete.label, "\""] }), "? This action cannot be undone."] }) }), _jsxs("div", { className: "px-6 py-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3", children: [_jsx(Button, { onClick: handleCancelDelete, variant: "secondary", children: "CANCEL" }), _jsx(Button, { onClick: handleConfirmDelete, className: "bg-red-600 hover:bg-red-700 text-white", children: "DELETE" })] })] })] }))] }));
 }

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,2CAqVvB"}