@powerhousedao/builder-team-admin 0.0.1

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

@@ -0,0 +1,456 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } 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 { generateId } from "document-model/core";
+import { useWalletSync } from "../hooks/useWalletSync.js";
+import { useSyncWallet } from "../hooks/useSyncWallet.js";
+import { addDocument, dispatchActions, useDocumentsInSelectedDrive, useSelectedDrive, setSelectedNode, useDocumentById, } from "@powerhousedao/reactor-browser";
+import { actions as accountTransactionsActions } from "../../../document-models/expense-report/index.js";
+export function WalletsTable({ wallets, groups, onAddBillingStatement, periodStart, periodEnd, dispatch, }) {
+    const [selectedAccountId, setSelectedAccountId] = useState("");
+    const [walletError, setWalletError] = useState("");
+    const [editingWallet, setEditingWallet] = useState(null);
+    const [editingName, setEditingName] = useState("");
+    const [copiedWallet, setCopiedWallet] = useState(null);
+    const [syncingWallet, setSyncingWallet] = useState(null);
+    const [addingWallet, setAddingWallet] = useState(false);
+    // State for handling newly created transaction documents
+    const [pendingTxDoc, setPendingTxDoc] = useState(null);
+    // Track if we're currently processing to prevent duplicate runs
+    const [isProcessing, setIsProcessing] = useState(false);
+    // Progress state for Add Txns operation
+    const [txProgress, setTxProgress] = useState({
+        show: false,
+        step: "",
+        current: 0,
+        total: 5,
+        details: "",
+    });
+    // Get drive and documents for account/transactions document management
+    const [selectedDrive] = useSelectedDrive();
+    const allDocuments = useDocumentsInSelectedDrive();
+    // Load the pending transaction document if one exists
+    const [pendingDocument, pendingDocDispatch] = useDocumentById(pendingTxDoc?.documentId || null);
+    // Get available Account documents from the drive
+    const availableAccounts = allDocuments?.filter((doc) => doc.header.documentType === "powerhouse/accounts") || [];
+    // Extract all account entries from all Accounts documents
+    const accountEntries = availableAccounts.flatMap((doc) => {
+        const accounts = doc.state?.global?.accounts || [];
+        return accounts.map((acc) => ({
+            ...acc,
+            accountsDocumentId: doc.header.id, // Store which Accounts document this came from
+        }));
+    });
+    // Check sync status
+    const { needsSync, outdatedWallets, tagChangedWallets } = useWalletSync(wallets);
+    const { syncWallet } = useSyncWallet();
+    // Handle fetching and adding transactions when a new document is created
+    useEffect(() => {
+        // Check if we have pending work and all required resources
+        if (!pendingTxDoc ||
+            !pendingDocument ||
+            !pendingDocDispatch ||
+            isProcessing) {
+            return;
+        }
+        // Mark as processing and save current pending doc
+        setIsProcessing(true);
+        const currentPendingDoc = pendingTxDoc;
+        const fetchAndAddTransactions = async () => {
+            console.log("[WalletsTable] Processing pending transaction document:", currentPendingDoc.documentId);
+            try {
+                // Step 1: Set account info in the transaction document
+                setTxProgress({
+                    show: true,
+                    step: "Initializing",
+                    current: 1,
+                    total: 5,
+                    details: "Setting up transaction document...",
+                });
+                // Add small delay to ensure document is fully initialized
+                await new Promise((resolve) => setTimeout(resolve, 300));
+                console.log("[WalletsTable] Document state before setAccount:", {
+                    documentId: pendingDocument?.header?.id,
+                    hasState: !!pendingDocument?.state,
+                    hasGlobal: !!pendingDocument?.state?.global,
+                });
+                const setAccountAction = accountTransactionsActions.updateWallet({
+                    address: currentPendingDoc.accountEntry.account,
+                    name: currentPendingDoc.accountEntry.name,
+                });
+                console.log("[WalletsTable] Dispatching setAccount action:", setAccountAction);
+                pendingDocDispatch(setAccountAction);
+                // Wait a bit for the action to be processed
+                await new Promise((resolve) => setTimeout(resolve, 200));
+                console.log("[WalletsTable] Account info set - checking document state:", {
+                    account: pendingDocument?.state?.global?.account,
+                });
+                // Step 2: Fetch transactions from Alchemy
+                setTxProgress({
+                    show: true,
+                    step: "Fetching Transactions",
+                    current: 2,
+                    total: 5,
+                    details: "Retrieving blockchain transactions from Alchemy...",
+                });
+                console.log("[WalletsTable] Fetching transactions from Alchemy for:", currentPendingDoc.accountEntry.account);
+                // Step 4: Update the Accounts document with the transaction document ID
+                setTxProgress({
+                    show: true,
+                    step: "Linking Documents",
+                    current: 4,
+                    total: 5,
+                    details: "Updating account references...",
+                });
+                console.log("[WalletsTable] Updating account in Accounts document:", {
+                    accountId: currentPendingDoc.accountEntry.id,
+                    accountsDocId: currentPendingDoc.accountsDocId,
+                    transactionsDocId: currentPendingDoc.documentId,
+                });
+                await dispatchActions([
+                    accountTransactionsActions.updateWallet({
+                        address: currentPendingDoc.accountEntry.account,
+                        accountTransactionsDocumentId: currentPendingDoc.documentId,
+                    }),
+                ], currentPendingDoc.accountsDocId);
+                console.log("[WalletsTable] Successfully updated account with transactions ID");
+                // Step 5: Link the transaction document to the wallet in ExpenseReport
+                setTxProgress({
+                    show: true,
+                    step: "Finalizing",
+                    current: 5,
+                    total: 5,
+                    details: "Linking to expense report...",
+                });
+                dispatch(actions.updateWallet({
+                    address: currentPendingDoc.walletAddress,
+                    accountTransactionsDocumentId: currentPendingDoc.documentId,
+                }));
+                console.log("[WalletsTable] Successfully linked to wallet");
+                // Success! Close modal after a brief delay
+                setTimeout(() => {
+                    setTxProgress({
+                        show: false,
+                        step: "",
+                        current: 0,
+                        total: 5,
+                        details: "",
+                    });
+                }, 1500);
+            }
+            catch (error) {
+                console.error("[WalletsTable] Error processing pending transaction document:", error);
+                setTxProgress({
+                    show: false,
+                    step: "",
+                    current: 0,
+                    total: 5,
+                    details: "",
+                });
+                alert(`Failed to fetch transactions: ${error instanceof Error ? error.message : "Unknown error"}`);
+            }
+            finally {
+                // Always clear processing state and pending doc
+                setPendingTxDoc(null);
+                setIsProcessing(false);
+            }
+        };
+        fetchAndAddTransactions();
+    }, [pendingTxDoc, pendingDocument, pendingDocDispatch, isProcessing]);
+    const handleAddWallet = async () => {
+        if (!selectedAccountId) {
+            setWalletError("Please select an account");
+            return;
+        }
+        // Find the selected account from accountEntries
+        const selectedAccount = accountEntries.find((acc) => acc.id === selectedAccountId);
+        if (!selectedAccount) {
+            setWalletError("Selected account not found");
+            return;
+        }
+        // Check if wallet already exists
+        const walletExists = wallets.some((w) => w.wallet === selectedAccount.account);
+        if (walletExists) {
+            setWalletError("This account is already added to the report");
+            return;
+        }
+        setAddingWallet(true);
+        setWalletError("");
+        try {
+            // Add the wallet to the expense report
+            dispatch(actions.addWallet({
+                wallet: selectedAccount.account,
+                name: selectedAccount.name || undefined,
+            }));
+            // Immediately update with the linked document IDs
+            dispatch(actions.updateWallet({
+                address: selectedAccount.account,
+                accountDocumentId: selectedAccount.accountsDocumentId || undefined,
+                accountTransactionsDocumentId: selectedAccount.accountTransactionsId || undefined,
+            }));
+            // Clear selection
+            setSelectedAccountId("");
+        }
+        catch (error) {
+            console.error("Error adding wallet:", error);
+            setWalletError("Failed to add wallet. Please try again.");
+        }
+        finally {
+            setAddingWallet(false);
+        }
+    };
+    const handleAddTransactions = async (wallet) => {
+        if (!wallet.wallet) {
+            return;
+        }
+        // Check if transactions document already exists
+        if (wallet.accountTransactionsDocumentId) {
+            return;
+        }
+        if (!selectedDrive?.header?.id) {
+            alert("No drive selected");
+            return;
+        }
+        try {
+            // Show initial progress
+            setTxProgress({
+                show: true,
+                step: "Preparing",
+                current: 0,
+                total: 5,
+                details: "Checking for existing documents...",
+            });
+            // Find or create AccountTransactions document for this wallet
+            const existingTxDoc = allDocuments?.find((doc) => doc.header.documentType === "powerhouse/account-transactions" &&
+                doc.state?.global?.account?.account === wallet.wallet);
+            if (existingTxDoc) {
+                // Link existing document
+                dispatch(actions.updateWallet({
+                    address: wallet.wallet,
+                    accountTransactionsDocumentId: existingTxDoc.header.id,
+                }));
+                setTxProgress({
+                    show: false,
+                    step: "",
+                    current: 0,
+                    total: 5,
+                    details: "",
+                });
+                return;
+            }
+            // Step 1: Find or create an Accounts document
+            setTxProgress({
+                show: true,
+                step: "Preparing",
+                current: 0,
+                total: 5,
+                details: "Setting up accounts...",
+            });
+            const accountsDoc = allDocuments?.find((doc) => doc.header.documentType === "powerhouse/accounts");
+            let accountsDocId;
+            let existingAccounts = [];
+            if (!accountsDoc) {
+                console.log("[WalletsTable] Creating new Accounts document");
+                const accountsNode = await addDocument(selectedDrive.header.id, "Accounts", "powerhouse/accounts", undefined, undefined, undefined, "powerhouse-accounts-editor");
+                if (!accountsNode?.id) {
+                    throw new Error("Failed to create Accounts document");
+                }
+                accountsDocId = accountsNode.id;
+            }
+            else {
+                accountsDocId = accountsDoc.header.id;
+                existingAccounts = accountsDoc.state?.global?.accounts || [];
+            }
+            // Step 2: Find or create an AccountEntry for this wallet
+            const accountEntry = existingAccounts.find((acc) => acc.account === wallet.wallet);
+            if (!accountEntry) {
+                console.log("[WalletsTable] Creating new account entry for wallet:", wallet.wallet);
+                const newAccountId = generateId();
+                const newAccountName = wallet.name || wallet.wallet.substring(0, 10);
+                // Add the account to the Accounts document
+                console.log("[WalletsTable] Adding new account to Accounts document:", newAccountId);
+                await dispatchActions([], accountsDocId);
+                console.log("[WalletsTable] Account added successfully");
+                // Create accountEntry reference
+                // Give a small delay to ensure the account is persisted
+                await new Promise((resolve) => setTimeout(resolve, 100));
+            }
+            // Step 3: Create the AccountTransactions document
+            setTxProgress({
+                show: true,
+                step: "Preparing",
+                current: 0,
+                total: 5,
+                details: "Creating transaction document...",
+            });
+            console.log("[WalletsTable] Creating AccountTransactions document");
+            const createdNode = await addDocument(selectedDrive.header.id, "powerhouse/account-transactions", "powerhouse-account-transactions-editor");
+            if (!createdNode?.id) {
+                throw new Error("Failed to create AccountTransactions document");
+            }
+            console.log("[WalletsTable] AccountTransactions document created:", createdNode.id);
+            // Step 4: Set up pending state to let useEffect handle the rest
+            setPendingTxDoc({
+                documentId: createdNode.id,
+                accountEntry,
+                accountsDocId,
+                walletAddress: wallet.wallet,
+            });
+        }
+        catch (error) {
+            console.error("[WalletsTable] Error adding transactions:", error);
+            setTxProgress({
+                show: false,
+                step: "",
+                current: 0,
+                total: 5,
+                details: "",
+            });
+            alert(`Failed to add transactions document: ${error instanceof Error ? error.message : "Unknown error"}`);
+        }
+    };
+    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) {
+            return;
+        }
+        // Validate period dates before syncing
+        if (!periodStart || !periodEnd) {
+            alert("Please set the period start and end dates before syncing wallet transactions.");
+            return;
+        }
+        setSyncingWallet(wallet.wallet);
+        try {
+            // Get existing line items (don't remove them, we'll update instead)
+            const existingLineItems = (wallet.lineItems || []).filter((item) => item !== null && item !== undefined);
+            // Get billing statement IDs
+            const billingStatementIds = (wallet.billingStatements || []).filter((id) => id !== null && id !== undefined);
+            // Sync wallet with all new parameters
+            syncWallet(wallet.wallet, existingLineItems, billingStatementIds, groups, wallets, wallet.accountTransactionsDocumentId, periodStart, periodEnd, dispatch);
+            // Small delay to show sync animation
+            setTimeout(() => {
+                setSyncingWallet(null);
+            }, 500);
+        }
+        catch (error) {
+            console.error("Error syncing wallet:", error);
+            alert(error instanceof Error ? error.message : "Error syncing wallet");
+            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: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [needsSync && (_jsx("button", { onClick: () => {
+                                                        // Sync all outdated wallets
+                                                        [...tagChangedWallets, ...outdatedWallets].forEach((walletAddress) => {
+                                                            const wallet = wallets.find((w) => w.wallet === walletAddress);
+                                                            if (wallet) {
+                                                                handleSyncWallet(wallet);
+                                                            }
+                                                        });
+                                                    }, disabled: syncingWallet !== null, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.length > 0
+                                                        ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 animate-pulse"
+                                                        : "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.length > 0
+                                                        ? "ALERT: Tags have changed in billing statements - sync all wallets!"
+                                                        : "Sync all wallets with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet !== null ? "animate-spin" : "" }) })), _jsx("span", { children: "Actuals" })] }) }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Difference" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Payments" }), _jsx("th", { className: "px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Actions" })] }) }), _jsx("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: wallets.map((wallet) => {
+                                const totals = calculateWalletTotals(wallet);
+                                return (_jsxs("tr", { 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-1", children: [_jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: wallet.name || "Unnamed Wallet" }), _jsx("button", { onClick: () => handleStartEditName(wallet), className: "inline-flex items-center justify-center w-6 h-6 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors", title: "Edit name", children: _jsx(Pencil, { size: 12 }) }), _jsxs("button", { onClick: () => handleCopyAddress(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 font-mono hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors", title: `Copy address: ${wallet.wallet}`, children: [formatAddress(wallet.wallet || ""), copiedWallet === wallet.wallet ? (_jsx(CheckCheck, { size: 12, className: "text-green-500" })) : (_jsx(Copy, { size: 12 }))] })] })) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.budget) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900 dark:text-white", children: formatCurrency(totals.forecast) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: totals.actuals === 0 &&
+                                                (!wallet.billingStatements ||
+                                                    wallet.billingStatements.length === 0) ? (
+                                            // When actuals is 0 and no billing statements, only show the Add Bills button
+                                            _jsx("div", { className: "flex items-center justify-end", children: _jsxs("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: [_jsx(Plus, { size: 16 }), _jsx("span", { children: "Add Bills" })] }) })) : (
+                                            // When actuals is not 0 or has billing statements, show compact buttons + value horizontally
+                                            _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => onAddBillingStatement(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors", title: "Add billing statement for this wallet", children: _jsx(Plus, { size: 16 }) }), ((wallet.billingStatements &&
+                                                        wallet.billingStatements.length > 0) ||
+                                                        wallet.accountTransactionsDocumentId) && (_jsx("button", { onClick: () => handleSyncWallet(wallet), disabled: syncingWallet === wallet.wallet, className: `inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors ${tagChangedWallets.includes(wallet.wallet || "")
+                                                            ? "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 animate-pulse"
+                                                            : outdatedWallets.includes(wallet.wallet || "")
+                                                                ? "text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30 animate-pulse"
+                                                                : "text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"} disabled:opacity-50 disabled:cursor-not-allowed`, title: tagChangedWallets.includes(wallet.wallet || "")
+                                                            ? "ALERT: Tags have changed - sync required!"
+                                                            : outdatedWallets.includes(wallet.wallet || "")
+                                                                ? "Sync needed - billing statements updated"
+                                                                : wallet.accountTransactionsDocumentId
+                                                                    ? "Sync wallet with billing statements and transactions"
+                                                                    : "Sync with latest billing statements", children: _jsx(RefreshCw, { size: 16, className: syncingWallet === wallet.wallet
+                                                                ? "animate-spin"
+                                                                : "" }) })), _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-white", children: formatCurrency(totals.actuals) })] })) }), _jsx("td", { className: `px-6 py-4 whitespace-nowrap text-right text-sm font-medium ${totals.difference > 0
+                                                ? "text-red-600 dark:text-red-400"
+                                                : totals.difference < 0
+                                                    ? "text-green-600 dark:text-green-400"
+                                                    : "text-gray-900 dark:text-white"}`, children: formatCurrency(totals.difference) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: wallet.accountTransactionsDocumentId ? (
+                                            // Show clickable document snippet card when transactions document is linked
+                                            _jsx("button", { onClick: () => setSelectedNode(wallet.accountTransactionsDocumentId), className: "w-full bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg p-2 transition-colors text-left", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "text-xs font-medium text-green-900 dark:text-green-100 block", children: "Transactions" }), _jsx("span", { className: "text-xs text-green-600 dark:text-green-400", children: formatCurrency(totals.payments) })] })] }), _jsx("svg", { className: "w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }) })) : (
+                                            // Show Add Txns button when no transactions document is linked
+                                            _jsx("div", { className: "flex items-center justify-end", children: _jsxs("button", { onClick: () => handleAddTransactions(wallet), className: "inline-flex items-center gap-1 px-3 py-1 text-sm font-medium text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-md transition-colors", title: "Add transactions document for this wallet", children: [_jsx(Plus, { size: 16 }), _jsx("span", { children: "Add Txns" })] }) })) }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm", children: _jsx("div", { className: "flex items-center justify-end gap-2", children: _jsx("button", { onClick: () => handleRemoveWallet(wallet.wallet || ""), className: "inline-flex items-center justify-center w-8 h-8 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors", title: "Remove wallet", children: _jsx(Trash2, { size: 16 }) }) }) })] }, wallet.wallet));
+                            }) })] }) })) : (_jsx("div", { className: "text-center py-12 text-gray-500 dark:text-gray-400", children: _jsx("p", { className: "text-sm", children: "No wallets added yet. Add a wallet to get started." }) })), _jsxs("div", { className: "flex items-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: "Select Account" }), _jsxs("select", { value: selectedAccountId, onChange: (e) => {
+                                    setSelectedAccountId(e.target.value);
+                                    setWalletError(""); // Clear error when selecting
+                                }, className: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "", children: "-- Select an account --" }), accountEntries.map((acc) => (_jsxs("option", { value: acc.id, children: [acc.name, " (", acc.account?.substring(0, 10), "...", acc.account?.substring(acc.account.length - 4), ")"] }, acc.id)))] }), 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: !selectedAccountId || addingWallet, children: addingWallet ? "Adding..." : "Add Account" })] }), txProgress.show && (_jsx("div", { className: "fixed bottom-4 right-4 z-50 transition-all duration-300 ease-out", children: _jsx("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-2xl border border-gray-200 dark:border-gray-700 p-4 w-80", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(RefreshCw, { size: 20, className: "animate-spin text-blue-600 dark:text-blue-500 flex-shrink-0" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: txProgress.step }), _jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: ["Step ", txProgress.current, " of ", txProgress.total] })] })] }), _jsx("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: _jsx("div", { className: "bg-blue-600 dark:bg-blue-500 h-1.5 rounded-full transition-all duration-300 ease-in-out", style: {
+                                        width: `${(txProgress.current / txProgress.total) * 100}%`,
+                                    } }) }), _jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: txProgress.details })] }) }) }))] }));
+}

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

@@ -0,0 +1,3 @@
+import type { PHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+export declare const editorConfig: PHDocumentEditorConfig;
+//# sourceMappingURL=config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../editors/expense-report/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,eAAO,MAAM,YAAY,EAAE,sBAE1B,CAAC"}

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

@@ -0,0 +1,3 @@
+export const editorConfig = {
+    isExternalControlsEnabled: false,
+};

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

@@ -0,0 +1,2 @@
+export default 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":"AAsBA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAqQ7B"}

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { useSelectedExpenseReportDocument } from "../../document-models/expense-report/hooks.js";
+import { actions, } from "../../document-models/expense-report/index.js";
+import { DatePicker, Icon, Button } from "@powerhousedao/document-engineering";
+import { WalletsTable } from "./components/WalletsTable.js";
+import { AggregatedExpensesTable } from "./components/AggregatedExpensesTable.js";
+import { AddBillingStatementModal } from "./components/AddBillingStatementModal.js";
+import { ExpenseReportPDF } from "./components/ExpenseReportPDF.js";
+import { pdf } from "@react-pdf/renderer";
+import { PDFViewer } from "@react-pdf/renderer";
+import { DocumentToolbar } from "@powerhousedao/design-system/connect";
+import { setSelectedNode, useParentFolderForSelectedNode, } from "@powerhousedao/reactor-browser";
+import { useSyncWallet } from "./hooks/useSyncWallet.js";
+import { RefreshCw } from "lucide-react";
+export default function Editor() {
+    const [document, dispatch] = useSelectedExpenseReportDocument();
+    const [selectedWallet, setSelectedWallet] = useState(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isSyncingAll, setIsSyncingAll] = useState(false);
+    const [periodStart, setPeriodStart] = useState(document?.state.global.periodStart || "");
+    const [periodEnd, setPeriodEnd] = useState(document?.state.global.periodEnd || "");
+    const { wallets, groups } = document?.state.global || {
+        wallets: [],
+        groups: [],
+    };
+    const { syncWallet } = useSyncWallet();
+    // 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);
+    };
+    // Handle sync all wallets
+    const handleSyncAllWallets = () => {
+        if (!periodStart || !periodEnd) {
+            alert("Please set the period start and end dates before syncing wallet transactions.");
+            return;
+        }
+        setIsSyncingAll(true);
+        // Sync all wallets that have either billing statements or transactions
+        wallets.forEach((wallet) => {
+            if (wallet.wallet &&
+                ((wallet.billingStatements && wallet.billingStatements.length > 0) ||
+                    wallet.accountTransactionsDocumentId)) {
+                syncWallet(wallet.wallet, (wallet.lineItems || []).filter((item) => item !== null), (wallet.billingStatements || []).filter((id) => id !== null), groups, wallets, wallet.accountTransactionsDocumentId, periodStart, periodEnd, dispatch);
+            }
+        });
+        setIsSyncingAll(false);
+    };
+    // Handle PDF export
+    const handleExportPDF = async () => {
+        try {
+            const blob = await pdf(_jsx(ExpenseReportPDF, { periodStart: periodStart, periodEnd: periodEnd, wallets: wallets, groups: groups })).toBlob();
+            // Create download link
+            const url = URL.createObjectURL(blob);
+            const link = window.document.createElement("a");
+            link.href = url;
+            // Generate filename with period
+            const filename = periodStart
+                ? `expense-report-${new Date(periodStart).toISOString().split("T")[0]}.pdf`
+                : "expense-report.pdf";
+            link.download = filename;
+            link.click();
+            // Cleanup
+            URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            console.error("Error generating PDF:", error);
+        }
+    };
+    // Format period title for the breakdown section
+    const breakdownTitle = useMemo(() => {
+        if (!periodStart)
+            return "Breakdown";
+        const date = new Date(periodStart);
+        const month = date.toLocaleDateString("en-US", { month: "short" });
+        const year = date.getFullYear();
+        return `${month} ${year} Breakdown`;
+    }, [periodStart]);
+    // Get the parent folder node for the currently selected node
+    const parentFolder = useParentFolderForSelectedNode();
+    // Set the selected node to the parent folder node (close the editor)
+    function handleClose() {
+        setSelectedNode(parentFolder?.id);
+    }
+    return (_jsxs("div", { children: [_jsx(DocumentToolbar, { document: document, onClose: handleClose }), _jsxs("div", { className: "ph-default-styles flex flex-col h-full w-full bg-gray-50 dark:bg-gray-900", children: [_jsx("div", { className: "flex-1 overflow-auto px-8 py-6", children: _jsxs("div", { className: "max-w-7xl mx-auto space-y-8", children: [_jsx("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: _jsx("div", { className: "px-6 py-6", children: _jsxs("div", { className: "relative", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-4", children: "Expense Report" }), _jsx("div", { className: "flex items-center justify-center gap-4 text-sm text-gray-600 dark:text-gray-400", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium", children: "Period:" }), _jsx(DatePicker, { name: "periodStart", value: periodStart, onChange: handlePeriodStartChange, className: "bg-white" }), _jsx("span", { children: "to" }), _jsx(DatePicker, { name: "periodEnd", value: periodEnd, onChange: handlePeriodEndChange, className: "bg-white" })] }) })] }), _jsxs(Button, { variant: "ghost", onClick: handleExportPDF, className: "absolute top-0 right-0 flex items-center gap-2", children: [_jsx(Icon, { name: "ExportPdf", size: 18 }), "Export to PDF"] })] }) }) }), _jsxs("section", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700", children: [_jsxs("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [_jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Wallets" }), _jsxs(Button, { variant: "ghost", onClick: handleSyncAllWallets, disabled: isSyncingAll, className: "flex items-center gap-2", children: [_jsx(RefreshCw, { size: 16, className: isSyncingAll ? "animate-spin" : "" }), _jsx("span", { children: isSyncingAll ? "Syncing..." : "Sync All" })] })] }), _jsx("div", { className: "p-6", children: _jsx(WalletsTable, { wallets: wallets, groups: groups, onAddBillingStatement: handleAddBillingStatement, periodStart: periodStart, periodEnd: periodEnd, 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, LineItem, Wallet } from "../../../document-models/expense-report/gen/types.js";
+export declare function useSyncWallet(): {
+    syncWallet: (walletAddress: string, existingLineItems: LineItem[], billingStatementIds: string[], groups: LineItemGroup[], allWallets: Wallet[], accountTransactionsDocumentId: string | null | undefined, periodStart: string | null | undefined, periodEnd: string | null | undefined, 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,EACV,aAAa,EACb,QAAQ,EACR,MAAM,EACP,MAAM,sDAAsD,CAAC;AAkB9D,wBAAgB,aAAa;gCAIV,MAAM,qBACF,QAAQ,EAAE,uBACR,MAAM,EAAE,UACrB,aAAa,EAAE,cACX,MAAM,EAAE,iCACW,MAAM,GAAG,IAAI,GAAG,SAAS,eAC3C,MAAM,GAAG,IAAI,GAAG,SAAS,aAC3B,MAAM,GAAG,IAAI,GAAG,SAAS,YAC1B,GAAG;EAuMhB"}