@powerhousedao/contributor-billing 0.1.30 → 0.1.32

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

@@ -0,0 +1,560 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { generateId } from "document-model/core";
+import { useState, useMemo, useEffect } from "react";
+import { useDocumentsInSelectedDrive, useParentFolderForSelectedNode, setSelectedNode, dispatchActions, } from "@powerhousedao/reactor-browser";
+import { DocumentToolbar } from "@powerhousedao/design-system/connect";
+import { Button, Select, DatePicker } from "@powerhousedao/document-engineering";
+import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
+import { useSelectedSnapshotReportDocument } from "../hooks/useSnapshotReportDocument.js";
+import { setReportConfig, addSnapshotAccount, addTransaction, setPeriodStart, setPeriodEnd, } from "../../document-models/snapshot-report/gen/creators.js";
+import { SetOwner } from "./components/SetOwner.js";
+import { useSyncSnapshotAccount } from "./hooks/useSyncSnapshotAccount.js";
+import { formatBalance } from "./utils/balanceCalculations.js";
+import { calculateTransactionFlowInfo } from "./utils/flowTypeCalculations.js";
+import { deriveTransactionsForAccount } from "./utils/deriveTransactions.js";
+import { actions as accountsActions } from "../../document-models/accounts/index.js";
+import { transactionsActions } from "../../document-models/snapshot-report/index.js";
+// Helper function to generate month options from January 2025 to current month
+function generateMonthOptions() {
+    const options = [];
+    const startDate = new Date(2025, 0, 1); // January 2025
+    const currentDate = new Date();
+    const date = new Date(startDate);
+    while (date <= currentDate) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const monthName = date.toLocaleDateString("en-US", { month: "long" });
+        const label = `${monthName} ${year}`;
+        // Value format: YYYY-MM (e.g., "2025-01")
+        const value = `${year}-${String(month + 1).padStart(2, "0")}`;
+        options.push({ label, value });
+        // Move to next month
+        date.setMonth(date.getMonth() + 1);
+    }
+    // Reverse to show most recent first
+    return options.reverse();
+}
+// Helper function to get start and end dates for a given month
+function getMonthDateRange(yearMonth) {
+    const [year, month] = yearMonth.split("-").map(Number);
+    // First day of month at 00:00:00 UTC
+    const periodStart = new Date(Date.UTC(year, month - 1, 1, 0, 0, 0, 0)).toISOString();
+    // Last day of month at 23:59:59.999 UTC
+    // Get the last day by using day 0 of the next month
+    const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+    const periodEnd = new Date(Date.UTC(year, month - 1, lastDay, 23, 59, 59, 999)).toISOString();
+    return { periodStart, periodEnd };
+}
+export default function Editor() {
+    const [document, dispatch] = useSelectedSnapshotReportDocument();
+    const documentsInDrive = useDocumentsInSelectedDrive();
+    const [isAccountPickerOpen, setIsAccountPickerOpen] = useState(false);
+    const [selectedAccountIds, setSelectedAccountIds] = useState(new Set());
+    const [expandedAccounts, setExpandedAccounts] = useState(new Set());
+    const [syncingAccounts, setSyncingAccounts] = useState(new Set());
+    const [isSyncingAll, setIsSyncingAll] = useState(false);
+    const { syncAccount } = useSyncSnapshotAccount();
+    if (!document) {
+        return _jsx("div", { children: "Loading..." });
+    }
+    const { reportName, startDate, endDate, snapshotAccounts, accountsDocumentId, ownerId, reportPeriodStart, reportPeriodEnd, } = document.state.global;
+    // Filter for Accounts documents
+    const accountsDocuments = documentsInDrive
+        ? documentsInDrive.filter((doc) => doc.header.documentType === "powerhouse/accounts")
+        : [];
+    // Find selected accounts document
+    const selectedAccountsDoc = accountsDocuments.find((doc) => doc.header.id === accountsDocumentId);
+    // Get available accounts from the selected Accounts document
+    const availableAccounts = selectedAccountsDoc
+        ? selectedAccountsDoc.state.global?.accounts || []
+        : [];
+    // Get IDs of accounts already in the snapshot
+    const existingAccountIds = new Set(snapshotAccounts.map((acc) => acc.accountId));
+    // Create a map of accountId to accountEntry for quick lookup
+    const accountEntryMap = new Map(availableAccounts.map((acc) => [acc.id, acc]));
+    // Local state for the selected period (before confirmation)
+    const [selectedPeriod, setSelectedPeriod] = useState(() => {
+        if (reportPeriodStart) {
+            const date = new Date(reportPeriodStart);
+            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+        }
+        // Default to current month
+        const now = new Date();
+        return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+    });
+    // Track if the selected period differs from the saved period
+    const savedPeriod = useMemo(() => {
+        if (reportPeriodStart) {
+            const date = new Date(reportPeriodStart);
+            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+        }
+        return "";
+    }, [reportPeriodStart]);
+    // Track if we're in editing mode
+    const [isEditingPeriod, setIsEditingPeriod] = useState(!savedPeriod);
+    const isPeriodChanged = selectedPeriod !== savedPeriod;
+    // Update selected period when document period changes externally
+    useEffect(() => {
+        if (savedPeriod && savedPeriod !== selectedPeriod) {
+            setSelectedPeriod(savedPeriod);
+        }
+    }, [savedPeriod]);
+    // Handle period dropdown change (doesn't save yet)
+    const handlePeriodChange = (value) => {
+        setSelectedPeriod(value);
+    };
+    // Handle period confirmation (saves to document)
+    const handleConfirmPeriod = () => {
+        const { periodStart, periodEnd } = getMonthDateRange(selectedPeriod);
+        // Dispatch both start and end dates
+        dispatch?.(setPeriodStart({ periodStart }));
+        dispatch?.(setPeriodEnd({ periodEnd }));
+        // Exit editing mode
+        setIsEditingPeriod(false);
+    };
+    // Handle starting to edit the period
+    const handleEditPeriod = () => {
+        setIsEditingPeriod(true);
+    };
+    // Generate month options
+    const monthOptions = useMemo(() => generateMonthOptions(), []);
+    // Get the formatted display label for the current period
+    const periodDisplayLabel = useMemo(() => {
+        const option = monthOptions.find((opt) => opt.value === selectedPeriod);
+        return option ? option.label : selectedPeriod;
+    }, [selectedPeriod, monthOptions]);
+    // Note: startDate/endDate are used for transaction filtering (the actual date range to fetch)
+    // reportPeriodStart/End are used for the reporting period label (e.g., "January 2025")
+    // Handle sync for a single account
+    const handleSyncAccount = async (snapshotAccount) => {
+        if (!startDate || !endDate) {
+            alert("Please set the Snapshot Period (start and end dates) before syncing");
+            return;
+        }
+        setSyncingAccounts((prev) => new Set(prev).add(snapshotAccount.id));
+        try {
+            const accountEntry = accountEntryMap.get(snapshotAccount.accountId);
+            const result = await syncAccount(snapshotAccount, accountEntry, accountsDocumentId || undefined, startDate, endDate, dispatch, snapshotAccounts, document?.header?.id);
+            if (result.success) {
+                // If account transactions document was created, update the Accounts document
+                if (result.documentId && accountEntry && accountsDocumentId) {
+                    await dispatchActions([
+                        accountsActions.updateAccount({
+                            id: accountEntry.id,
+                            accountTransactionsId: result.documentId,
+                        }),
+                    ], accountsDocumentId);
+                }
+            }
+            else {
+                alert(`Sync failed: ${result.message}`);
+            }
+        }
+        catch (error) {
+            console.error("Error syncing account:", error);
+            alert(`Error: ${error instanceof Error ? error.message : "Unknown error"}`);
+        }
+        finally {
+            setSyncingAccounts((prev) => {
+                const newSet = new Set(prev);
+                newSet.delete(snapshotAccount.id);
+                return newSet;
+            });
+        }
+    };
+    // Handle sync all accounts - parallel with concurrency limit
+    const handleSyncAll = async () => {
+        if (!startDate || !endDate) {
+            alert("Please set the Snapshot Period (start and end dates) before syncing");
+            return;
+        }
+        setIsSyncingAll(true);
+        const accountUpdates = [];
+        const CONCURRENCY_LIMIT = 5;
+        try {
+            // Process accounts in batches of 5 for parallel execution
+            for (let i = 0; i < snapshotAccounts.length; i += CONCURRENCY_LIMIT) {
+                const batch = snapshotAccounts.slice(i, i + CONCURRENCY_LIMIT);
+                await Promise.all(batch.map(async (account) => {
+                    const accountEntry = accountEntryMap.get(account.accountId);
+                    setSyncingAccounts((prev) => new Set(prev).add(account.id));
+                    try {
+                        const result = await syncAccount(account, accountEntry, accountsDocumentId || undefined, startDate, endDate, dispatch, snapshotAccounts, document?.header?.id);
+                        if (result.documentId && accountEntry) {
+                            accountUpdates.push({
+                                id: accountEntry.id,
+                                accountTransactionsId: result.documentId,
+                            });
+                        }
+                    }
+                    finally {
+                        setSyncingAccounts((prev) => {
+                            const newSet = new Set(prev);
+                            newSet.delete(account.id);
+                            return newSet;
+                        });
+                    }
+                }));
+            }
+            // Single batch update to Accounts document
+            if (accountUpdates.length > 0 && accountsDocumentId) {
+                await dispatchActions(accountUpdates.map((u) => accountsActions.updateAccount(u)), accountsDocumentId);
+            }
+        }
+        finally {
+            setIsSyncingAll(false);
+        }
+    };
+    const handleSetReportName = (name) => {
+        dispatch?.(setReportConfig({
+            reportName: name,
+            startDate: startDate || undefined,
+            endDate: endDate || undefined,
+            accountsDocumentId: undefined,
+        }));
+    };
+    const handleToggleAccountExpansion = (accountId) => {
+        setExpandedAccounts((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(accountId)) {
+                newSet.delete(accountId);
+            }
+            else {
+                newSet.add(accountId);
+            }
+            return newSet;
+        });
+    };
+    const handleOpenAccountPicker = () => {
+        if (!accountsDocumentId) {
+            alert("Please select an Accounts document first");
+            return;
+        }
+        setIsAccountPickerOpen(true);
+        setSelectedAccountIds(new Set());
+    };
+    const handleToggleAccount = (accountId) => {
+        const newSelection = new Set(selectedAccountIds);
+        if (newSelection.has(accountId)) {
+            newSelection.delete(accountId);
+        }
+        else {
+            newSelection.add(accountId);
+        }
+        setSelectedAccountIds(newSelection);
+    };
+    const handleImportAccounts = async () => {
+        if (!documentsInDrive || !startDate || !endDate) {
+            alert("Please set the report period (start and end dates) before importing accounts");
+            return;
+        }
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        // Track newly imported accounts for two-pass import
+        const newlyImportedAccounts = [];
+        // Build a combined list of existing + newly imported accounts for flow type calculation
+        const allAccountsForLookup = [
+            ...snapshotAccounts,
+            ...Array.from(selectedAccountIds)
+                .map((accountId) => {
+                const account = availableAccounts.find((acc) => acc.id === accountId);
+                if (account && !existingAccountIds.has(accountId) && account.type) {
+                    return {
+                        id: generateId(),
+                        accountId: account.id,
+                        accountAddress: account.account,
+                        accountName: account.name,
+                        type: account.type,
+                        accountTransactionsId: account.accountTransactionsId || null,
+                        startingBalances: [],
+                        endingBalances: [],
+                        transactions: [],
+                    };
+                }
+                return null;
+            })
+                .filter(Boolean),
+        ];
+        // FIRST PASS: Import all accounts
+        // - Internal accounts: Import with transactions from AccountTransactions doc
+        // - Non-Internal accounts: Import account only (transactions derived later)
+        for (const accountId of selectedAccountIds) {
+            const account = availableAccounts.find((acc) => acc.id === accountId);
+            if (account && !existingAccountIds.has(accountId)) {
+                if (!account.type) {
+                    alert(`Account "${account.name}" does not have a type set. Please update the account first.`);
+                    continue;
+                }
+                // Add the snapshot account
+                const snapshotAccountId = generateId();
+                dispatch?.(addSnapshotAccount({
+                    id: snapshotAccountId,
+                    accountId: account.id,
+                    accountAddress: account.account,
+                    accountName: account.name,
+                    type: account.type,
+                    accountTransactionsId: account.accountTransactionsId || undefined,
+                }));
+                // Track for second pass
+                newlyImportedAccounts.push({
+                    snapshotAccountId,
+                    accountAddress: account.account,
+                    accountType: account.type,
+                    accountTransactionsId: account.accountTransactionsId,
+                });
+                // Only import transactions for Internal accounts
+                // Non-Internal accounts will derive transactions from Internal accounts
+                if (account.type === "Internal" && account.accountTransactionsId) {
+                    const txDoc = documentsInDrive.find((doc) => doc.header.id === account.accountTransactionsId &&
+                        doc.header.documentType === "powerhouse/account-transactions");
+                    if (txDoc?.state?.global?.transactions) {
+                        const transactions = txDoc.state.global.transactions;
+                        // Filter transactions by the report period
+                        const filteredTransactions = transactions.filter((tx) => {
+                            if (!tx?.datetime)
+                                return false;
+                            const txDate = new Date(tx.datetime);
+                            if (isNaN(txDate.getTime()))
+                                return false;
+                            return txDate >= start && txDate <= end;
+                        });
+                        // Add each transaction to the snapshot account
+                        for (const tx of filteredTransactions) {
+                            const { flowType, counterPartyAccountId } = calculateTransactionFlowInfo(tx.direction, account.type, tx.counterParty, allAccountsForLookup);
+                            dispatch?.(addTransaction({
+                                accountId: snapshotAccountId,
+                                id: generateId(),
+                                transactionId: tx.id,
+                                counterParty: tx.counterParty || undefined,
+                                amount: tx.amount,
+                                datetime: tx.datetime,
+                                txHash: tx.details?.txHash || "",
+                                token: tx.details?.token || "",
+                                blockNumber: tx.details?.blockNumber || undefined,
+                                direction: tx.direction,
+                                flowType: flowType,
+                                counterPartyAccountId: counterPartyAccountId || undefined,
+                            }));
+                        }
+                    }
+                }
+            }
+        }
+        // SECOND PASS: Derive transactions for non-Internal accounts
+        // We need to wait a moment for state to update, then derive
+        // For now, user can click "Sync" on non-Internal accounts to derive
+        // TODO: Implement auto-derive after import completes
+        setIsAccountPickerOpen(false);
+        setSelectedAccountIds(new Set());
+    };
+    /**
+     * Derive transactions for a non-Internal account from Internal accounts
+     * This finds all transactions in Internal accounts where the counter-party
+     * matches the non-Internal account's address
+     */
+    const handleDeriveTransactions = async (accountId) => {
+        const account = snapshotAccounts.find((a) => a.id === accountId);
+        if (!account || account.type === "Internal") {
+            return;
+        }
+        const internalAccounts = snapshotAccounts.filter((a) => a.type === "Internal");
+        if (internalAccounts.length === 0) {
+            alert("No Internal accounts found. Import Internal accounts first.");
+            return;
+        }
+        // Get derived transactions
+        const derivedTxs = deriveTransactionsForAccount(account, internalAccounts);
+        // Remove existing transactions for this account
+        for (const tx of account.transactions) {
+            dispatch?.(transactionsActions.removeTransaction({ id: tx.id }));
+        }
+        // Add derived transactions
+        for (const tx of derivedTxs) {
+            dispatch?.(addTransaction({
+                accountId: account.id,
+                id: tx.id,
+                transactionId: tx.transactionId,
+                counterParty: tx.counterParty,
+                amount: tx.amount,
+                datetime: tx.datetime,
+                txHash: tx.txHash,
+                token: tx.token,
+                blockNumber: tx.blockNumber ?? undefined,
+                direction: tx.direction,
+                flowType: tx.flowType,
+                counterPartyAccountId: tx.counterPartyAccountId,
+            }));
+        }
+    };
+    /**
+     * Derive transactions for all non-Internal accounts
+     */
+    const handleDeriveAllNonInternal = async () => {
+        const internalAccounts = snapshotAccounts.filter((a) => a.type === "Internal");
+        if (internalAccounts.length === 0) {
+            alert("No Internal accounts found. Import Internal accounts first.");
+            return;
+        }
+        const nonInternalAccounts = snapshotAccounts.filter((a) => a.type !== "Internal");
+        for (const account of nonInternalAccounts) {
+            await handleDeriveTransactions(account.id);
+        }
+    };
+    // Handlers for the legacy startDate/endDate fields (DatePicker approach)
+    const handleStartDateChange = (e) => {
+        const dateValue = e.target.value;
+        if (!dateValue)
+            return;
+        // DatePicker may return ISO string or date string - extract just the date part
+        const dateString = dateValue.split("T")[0]; // Get YYYY-MM-DD part if ISO string
+        if (!dateString)
+            return;
+        // Create date at start of day (00:00:00)
+        const date = new Date(dateString + "T00:00:00.000Z");
+        if (isNaN(date.getTime())) {
+            console.error("Invalid date value:", dateValue);
+            return;
+        }
+        const isoDateTime = date.toISOString();
+        dispatch?.(setReportConfig({
+            startDate: isoDateTime,
+            endDate: endDate || undefined,
+            reportName: reportName || undefined,
+            accountsDocumentId: accountsDocumentId || undefined,
+        }));
+    };
+    const handleEndDateChange = (e) => {
+        const dateValue = e.target.value;
+        if (!dateValue)
+            return;
+        // DatePicker may return ISO string or date string - extract just the date part
+        const dateString = dateValue.split("T")[0]; // Get YYYY-MM-DD part if ISO string
+        if (!dateString)
+            return;
+        // Create date at end of day (23:59:59.999)
+        const endOfDay = new Date(dateString + "T23:59:59.999Z");
+        if (isNaN(endOfDay.getTime())) {
+            console.error("Invalid date value:", dateValue);
+            return;
+        }
+        const isoDateTime = endOfDay.toISOString();
+        dispatch?.(setReportConfig({
+            endDate: isoDateTime,
+            startDate: startDate || undefined,
+            reportName: reportName || undefined,
+            accountsDocumentId: accountsDocumentId || undefined,
+        }));
+    };
+    // 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: "p-6 max-w-7xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold mb-6", children: "Snapshot Report" }), _jsxs("div", { className: "bg-white rounded-lg shadow p-6 mb-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Report Configuration" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Report Name" }), _jsx("input", { type: "text", value: reportName || "", onChange: (e) => handleSetReportName(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Q4 2024 Treasury Report" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Owner" }), _jsx(SetOwner, { ownerId: ownerId, dispatch: dispatch })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Accounts Document" }), _jsxs("select", { value: accountsDocumentId || "", onChange: (e) => dispatch?.(setReportConfig({
+                                                            accountsDocumentId: e.target.value || undefined,
+                                                            reportName: reportName || undefined,
+                                                            startDate: startDate || undefined,
+                                                            endDate: endDate || undefined,
+                                                        })), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "", children: "Select an Accounts document..." }), accountsDocuments.map((doc) => (_jsx("option", { value: doc.header.id, children: doc.header.name ||
+                                                                    `Accounts (${doc.header.id.slice(0, 8)}...)` }, doc.header.id)))] }), selectedAccountsDoc && (_jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [selectedAccountsDoc.state.global?.accounts
+                                                                ?.length || 0, " ", "accounts available"] }))] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Reporting Period" }), isEditingPeriod ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Select, { options: monthOptions, value: selectedPeriod, onChange: (value) => handlePeriodChange(value), className: "min-w-[180px]" }), isPeriodChanged && (_jsx(Button, { variant: "default", onClick: handleConfirmPeriod, className: "text-sm", children: "Set Period" }))] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-lg font-bold text-gray-900", children: periodDisplayLabel }), _jsx(Button, { variant: "ghost", onClick: handleEditPeriod, className: "text-sm", children: "Change" })] }))] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Snapshot Period" }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx(DatePicker, { name: "startDate", value: startDate ? startDate.split("T")[0] : "", onChange: handleStartDateChange, dateFormat: "YYYY-MM-DD", className: "flex-1" }), _jsx("span", { className: "self-center", children: "to" }), _jsx(DatePicker, { name: "endDate", value: endDate ? endDate.split("T")[0] : "", onChange: handleEndDateChange, dateFormat: "YYYY-MM-DD", className: "flex-1" })] })] })] })] }), _jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-xl font-semibold", children: "Snapshot Accounts" }), _jsxs("div", { className: "flex gap-2", children: [snapshotAccounts.length > 0 && (_jsxs("button", { onClick: handleSyncAll, disabled: isSyncingAll || !startDate || !endDate, className: "px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center gap-2", children: [_jsx(RefreshCw, { className: `w-4 h-4 ${isSyncingAll ? "animate-spin" : ""}` }), "Sync All"] })), _jsx("button", { onClick: handleOpenAccountPicker, disabled: !accountsDocumentId, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed", children: "Add Account" })] })] }), snapshotAccounts.length === 0 ? (_jsxs("div", { className: "text-center py-12 text-gray-500", children: [_jsx("p", { children: "No accounts added yet" }), _jsx("p", { className: "text-sm mt-2", children: "Click \"Add Account\" to select accounts for this snapshot" })] })) : (_jsx("div", { className: "space-y-6", children: [
+                                    {
+                                        type: "Source",
+                                        label: "Source",
+                                        borderClass: "border-emerald-300",
+                                        badgeClass: "bg-emerald-100 text-emerald-800",
+                                    },
+                                    {
+                                        type: "Internal",
+                                        label: "Internal",
+                                        borderClass: "border-blue-300",
+                                        badgeClass: "bg-blue-100 text-blue-800",
+                                    },
+                                    {
+                                        type: "Destination",
+                                        label: "Destination",
+                                        borderClass: "border-amber-300",
+                                        badgeClass: "bg-amber-100 text-amber-800",
+                                    },
+                                    {
+                                        type: "External",
+                                        label: "External",
+                                        borderClass: "border-gray-300",
+                                        badgeClass: "bg-gray-100 text-gray-800",
+                                    },
+                                ].map(({ type, label, borderClass, badgeClass }) => {
+                                    const accountsOfType = snapshotAccounts.filter((a) => a.type === type);
+                                    if (accountsOfType.length === 0)
+                                        return null;
+                                    return (_jsxs("div", { children: [_jsxs("div", { className: `flex items-center gap-2 mb-3 pb-2 border-b-2 ${borderClass}`, children: [_jsx("span", { className: `px-2 py-0.5 text-xs font-semibold rounded ${badgeClass}`, children: label }), _jsxs("span", { className: "text-sm text-gray-500", children: [accountsOfType.length, " account", accountsOfType.length !== 1 ? "s" : ""] })] }), _jsx("div", { className: "space-y-4", children: accountsOfType.map((account) => (_jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("h3", { className: "font-semibold", children: account.accountName }), _jsx("button", { onClick: () => handleSyncAccount(account), disabled: syncingAccounts.has(account.id) ||
+                                                                                                !startDate ||
+                                                                                                !endDate, className: "p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed", title: "Sync account transactions and balances", children: _jsx(RefreshCw, { className: `w-4 h-4 ${syncingAccounts.has(account.id)
+                                                                                                    ? "animate-spin text-blue-600"
+                                                                                                    : "text-gray-600"}` }) })] }), _jsx("p", { className: "text-sm text-gray-600", children: account.accountAddress }), _jsx("span", { className: `inline-block mt-2 px-3 py-1 text-xs font-medium rounded-full ${account.type === "Source"
+                                                                                        ? "bg-emerald-100 text-emerald-800"
+                                                                                        : account.type === "Internal"
+                                                                                            ? "bg-blue-100 text-blue-800"
+                                                                                            : account.type === "Destination"
+                                                                                                ? "bg-amber-100 text-amber-800"
+                                                                                                : "bg-gray-100 text-gray-800"}`, children: account.type })] }), _jsxs("div", { className: "text-right", children: [_jsxs("p", { className: "text-sm text-gray-600", children: ["Transactions: ", account.transactions.length] }), _jsxs("p", { className: "text-sm text-gray-600", children: ["Tokens: ", account.startingBalances.length] })] })] }), (() => {
+                                                                    // Helper to check if a balance is non-zero
+                                                                    const isNonZero = (amount) => {
+                                                                        const value = parseFloat(amount?.value || "0");
+                                                                        return value !== 0;
+                                                                    };
+                                                                    // Filter to non-zero balances
+                                                                    const nonZeroStarting = account.startingBalances.filter((b) => {
+                                                                        const endingBalance = account.endingBalances.find((eb) => eb.token === b.token);
+                                                                        return (isNonZero(b.amount) ||
+                                                                            (endingBalance &&
+                                                                                isNonZero(endingBalance.amount)));
+                                                                    });
+                                                                    const endingOnlyBalances = account.endingBalances.filter((eb) => !account.startingBalances.some((sb) => sb.token === eb.token) && isNonZero(eb.amount));
+                                                                    const hasBalances = nonZeroStarting.length > 0 ||
+                                                                        endingOnlyBalances.length > 0;
+                                                                    if (!hasBalances)
+                                                                        return null;
+                                                                    return (_jsxs("div", { className: "mt-4 pt-4 border-t border-gray-200", children: [_jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-2", children: "Balances" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [nonZeroStarting.map((balance) => {
+                                                                                        const endingBalance = account.endingBalances.find((eb) => eb.token === balance.token);
+                                                                                        return (_jsxs("div", { className: "bg-gray-50 rounded p-2 text-sm", children: [_jsx("div", { className: "font-medium text-gray-700 mb-1", children: balance.token }), _jsxs("div", { className: "text-xs text-gray-600 space-y-1", style: {
+                                                                                                        fontVariantNumeric: "tabular-nums",
+                                                                                                    }, children: [_jsxs("div", { children: ["Opening:", " ", _jsx("span", { className: "font-medium", children: formatBalance(balance.amount) })] }), endingBalance && (_jsxs("div", { children: ["Closing:", " ", _jsx("span", { className: "font-medium", children: formatBalance(endingBalance.amount) })] }))] })] }, balance.id));
+                                                                                    }), endingOnlyBalances.map((balance) => (_jsxs("div", { className: "bg-gray-50 rounded p-2 text-sm", children: [_jsx("div", { className: "font-medium text-gray-700 mb-1", children: balance.token }), _jsx("div", { className: "text-xs text-gray-600", style: {
+                                                                                                    fontVariantNumeric: "tabular-nums",
+                                                                                                }, children: _jsxs("div", { children: ["Closing:", " ", _jsx("span", { className: "font-medium", children: formatBalance(balance.amount) })] }) })] }, balance.id)))] })] }));
+                                                                })(), account.transactions.length > 0 && (_jsx("button", { onClick: () => handleToggleAccountExpansion(account.id), className: "mt-3 flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800", children: expandedAccounts.has(account.id) ? (_jsxs(_Fragment, { children: [_jsx(ChevronUp, { className: "w-4 h-4" }), _jsx("span", { children: "Hide Transactions" })] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDown, { className: "w-4 h-4" }), _jsx("span", { children: "Show Transactions" })] })) }))] }), expandedAccounts.has(account.id) &&
+                                                            account.transactions.length > 0 && (_jsx("div", { className: "border-t border-gray-200 bg-gray-50", children: _jsxs("div", { className: "p-4", children: [_jsxs("h4", { className: "text-sm font-semibold text-gray-700 mb-3", children: ["Transactions (", account.transactions.length, ")"] }), _jsx("div", { className: "space-y-2", children: account.transactions.map((tx) => (_jsx("div", { className: "bg-white border border-gray-200 rounded p-3 text-sm", children: _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-gray-500", children: "Direction:" }), _jsx("span", { className: `ml-2 font-medium ${tx.direction === "INFLOW"
+                                                                                                    ? "text-green-600"
+                                                                                                    : "text-red-600"}`, children: tx.direction })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-500", children: "Amount:" }), _jsx("span", { className: "ml-2 font-medium", children: typeof tx.amount === "object" &&
+                                                                                                    tx.amount?.value !== undefined
+                                                                                                    ? `${tx.amount.value} ${tx.amount.unit || tx.token}`
+                                                                                                    : `${tx.amount} ${tx.token}` })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-500", children: "Date:" }), _jsx("span", { className: "ml-2", children: new Date(tx.datetime).toLocaleDateString() })] }), _jsxs("div", { children: [_jsx("span", { className: "text-gray-500", children: "Time:" }), _jsx("span", { className: "ml-2", children: new Date(tx.datetime).toLocaleTimeString() })] }), tx.counterParty && (_jsxs("div", { className: "col-span-2", children: [_jsx("span", { className: "text-gray-500", children: "Counter Party:" }), _jsx("span", { className: "ml-2 font-mono text-xs", children: tx.counterParty })] })), tx.flowType && (_jsxs("div", { children: [_jsx("span", { className: "text-gray-500", children: "Flow Type:" }), _jsx("span", { className: `ml-2 px-2 py-0.5 rounded text-xs font-medium ${tx.flowType === "TopUp"
+                                                                                                    ? "bg-green-100 text-green-800"
+                                                                                                    : tx.flowType === "Return"
+                                                                                                        ? "bg-orange-100 text-orange-800"
+                                                                                                        : tx.flowType ===
+                                                                                                            "Internal"
+                                                                                                            ? "bg-purple-100 text-purple-800"
+                                                                                                            : "bg-red-100 text-red-800"}`, children: tx.flowType })] })), _jsxs("div", { className: "col-span-2", children: [_jsx("span", { className: "text-gray-500", children: "Tx Hash:" }), _jsxs("a", { href: `https://etherscan.io/tx/${tx.txHash}`, target: "_blank", rel: "noopener noreferrer", className: "ml-2 text-blue-600 hover:underline font-mono text-xs", children: [tx.txHash.substring(0, 10), "...", tx.txHash.substring(tx.txHash.length - 8)] })] })] }) }, tx.id))) })] }) }))] }, account.id))) })] }, type));
+                                }) }))] }), isAccountPickerOpen && (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: _jsxs("div", { className: "bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col", children: [_jsxs("div", { className: "p-6 border-b", children: [_jsx("h3", { className: "text-xl font-semibold", children: "Select Accounts to Import" }), _jsx("p", { className: "text-sm text-gray-600 mt-1", children: "Choose accounts from the selected Accounts document" })] }), _jsx("div", { className: "p-6 overflow-y-auto flex-1", children: availableAccounts.length === 0 ? (_jsx("div", { className: "text-center py-8 text-gray-500", children: "No accounts available in the selected document" })) : (_jsx("div", { className: "space-y-2", children: availableAccounts.map((account) => {
+                                            const isAlreadyAdded = existingAccountIds.has(account.id);
+                                            const isSelected = selectedAccountIds.has(account.id);
+                                            return (_jsx("div", { onClick: () => !isAlreadyAdded && handleToggleAccount(account.id), className: `p-4 border rounded-lg cursor-pointer transition-colors ${isAlreadyAdded
+                                                    ? "bg-gray-100 cursor-not-allowed opacity-50"
+                                                    : isSelected
+                                                        ? "bg-blue-50 border-blue-500"
+                                                        : "hover:bg-gray-50"}`, children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("input", { type: "checkbox", checked: isSelected, disabled: isAlreadyAdded, onChange: () => { }, className: "mt-1" }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium", children: account.name }), _jsx("p", { className: "text-sm text-gray-600", children: account.account }), _jsx("span", { className: `inline-block mt-2 px-2 py-1 text-xs rounded ${account.type === "Source"
+                                                                                ? "bg-emerald-100 text-emerald-800"
+                                                                                : account.type === "Internal"
+                                                                                    ? "bg-blue-100 text-blue-800"
+                                                                                    : account.type === "Destination"
+                                                                                        ? "bg-amber-100 text-amber-800"
+                                                                                        : "bg-gray-100 text-gray-700"}`, children: account.type || "External" })] })] }), isAlreadyAdded && (_jsx("span", { className: "text-xs text-gray-500", children: "Already added" }))] }) }, account.id));
+                                        }) })) }), _jsxs("div", { className: "p-6 border-t flex justify-end gap-3", children: [_jsx("button", { onClick: () => {
+                                                setIsAccountPickerOpen(false);
+                                                setSelectedAccountIds(new Set());
+                                            }, className: "px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50", children: "Cancel" }), _jsxs("button", { onClick: handleImportAccounts, disabled: selectedAccountIds.size === 0, className: "px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed", children: ["Import", " ", selectedAccountIds.size > 0
+                                                    ? `(${selectedAccountIds.size})`
+                                                    : ""] })] })] }) }))] })] }));
+}

package/dist/editors/snapshot-report-editor/hooks/useSyncSnapshotAccount.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hook for syncing snapshot accounts with account transactions documents
+ * Similar to useSyncWallet in expense-report
+ */
+import type { SnapshotAccount } from "../../../document-models/snapshot-report/gen/types.js";
+import type { AccountEntry } from "../../../document-models/accounts/gen/schema/types.js";
+export declare function useSyncSnapshotAccount(): {
+    syncAccount: (snapshotAccount: SnapshotAccount, accountEntry: AccountEntry | undefined, accountsDocumentId: string | null | undefined, startDate: string | null | undefined, endDate: string | null | undefined, dispatch: any, allSnapshotAccounts?: SnapshotAccount[], snapshotDocumentId?: string) => Promise<{
+        success: boolean;
+        message: string;
+        transactionsAdded?: number;
+        documentId?: string;
+    }>;
+};
+//# sourceMappingURL=useSyncSnapshotAccount.d.ts.map

package/dist/editors/snapshot-report-editor/hooks/useSyncSnapshotAccount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSyncSnapshotAccount.d.ts","sourceRoot":"","sources":["../../../../editors/snapshot-report-editor/hooks/useSyncSnapshotAccount.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAiBH,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uDAAuD,CAAC;AAG1F,wBAAgB,sBAAsB;mCAKjB,eAAe,gBAClB,YAAY,GAAG,SAAS,sBAClB,MAAM,GAAG,IAAI,GAAG,SAAS,aAClC,MAAM,GAAG,IAAI,GAAG,SAAS,WAC3B,MAAM,GAAG,IAAI,GAAG,SAAS,YACxB,GAAG,wBACQ,eAAe,EAAE,uBACjB,MAAM,KAC1B,OAAO,CAAC;QACT,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;EAsbH"}