@powerhousedao/contributor-billing 0.1.42 → 0.1.43

package/dist/editors/builder-team-admin/hooks/useSnapshotReportAutoPlacement.js

@@ -1,6 +1,13 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 import { isFolderNodeKind, isFileNodeKind, addFolder, useSelectedDrive, useDocumentsInSelectedDrive, useNodeActions, } from "@powerhousedao/reactor-browser";
 const SNAPSHOT_REPORTS_FOLDER_NAME = "Snapshot Reports";
+// Module-level tracking to prevent duplicate folder creation across all hook instances
+// This is necessary because the hook may be used in multiple components simultaneously
+const globalCreationState = {
+    createdSnapshotReportsFolderForDrives: new Set(),
+    creatingYearFolders: new Map(), // driveId -> Set of years being created
+    processedDocs: new Map(), // driveId -> Set of doc IDs processed
+};
 /**
  * Hook that handles automatic placement of snapshot report documents into the
  * "Snapshot Reports" folder, organized by year based on startDate.
@@ -17,9 +24,14 @@ export function useSnapshotReportAutoPlacement() {
     const [driveDocument] = useSelectedDrive();
     const documentsInDrive = useDocumentsInSelectedDrive();
     const { onMoveNode } = useNodeActions();
-    // Track which documents have been processed for auto-placement
-    const processedDocsRef = useRef(new Set());
-    const hasCreatedFolder = useRef(false);
+    const driveId = driveDocument?.header.id;
+    // Initialize module-level tracking sets for this drive if needed
+    if (driveId && !globalCreationState.creatingYearFolders.has(driveId)) {
+        globalCreationState.creatingYearFolders.set(driveId, new Set());
+    }
+    if (driveId && !globalCreationState.processedDocs.has(driveId)) {
+        globalCreationState.processedDocs.set(driveId, new Set());
+    }
     // Find the "Snapshot Reports" folder in the drive
     const snapshotReportsFolder = useMemo(() => {
         if (!driveDocument)
@@ -67,12 +79,13 @@ export function useSnapshotReportAutoPlacement() {
     }, [documentsInDrive, driveDocument, snapshotReportsFolderNodeIds]);
     // Create folder if it doesn't exist
     useEffect(() => {
-        if (!driveDocument || snapshotReportsFolder || hasCreatedFolder.current)
+        if (!driveId || snapshotReportsFolder)
             return;
-        hasCreatedFolder.current = true;
-        const driveId = driveDocument.header.id;
+        if (globalCreationState.createdSnapshotReportsFolderForDrives.has(driveId))
+            return;
+        globalCreationState.createdSnapshotReportsFolderForDrives.add(driveId);
         void addFolder(driveId, SNAPSHOT_REPORTS_FOLDER_NAME);
-    }, [driveDocument, snapshotReportsFolder]);
+    }, [driveId, snapshotReportsFolder]);
     // Get year folders that exist directly under the Snapshot Reports folder
     const yearFolders = useMemo(() => {
         if (!driveDocument || !snapshotReportsFolder)
@@ -91,10 +104,13 @@ export function useSnapshotReportAutoPlacement() {
     // Auto-place snapshot reports into year folders based on startDate
     // This monitors ALL snapshot reports in the drive, not just those in the Snapshot Reports folder
     useEffect(() => {
-        if (!driveDocument || !snapshotReportsFolder || !documentsInDrive)
+        if (!driveId || !snapshotReportsFolder || !documentsInDrive)
+            return;
+        const allNodes = driveDocument?.state.global.nodes ?? [];
+        const processedDocs = globalCreationState.processedDocs.get(driveId);
+        const creatingYearFolders = globalCreationState.creatingYearFolders.get(driveId);
+        if (!processedDocs || !creatingYearFolders)
             return;
-        const driveId = driveDocument.header.id;
-        const allNodes = driveDocument.state.global.nodes;
         // Find ALL snapshot report file nodes that are NOT inside the Snapshot Reports folder tree
         // These need to be moved into the proper location
         const snapshotReportNodesOutsideFolder = allNodes.filter((node) => isFileNodeKind(node) &&
@@ -113,7 +129,7 @@ export function useSnapshotReportAutoPlacement() {
         // Process each snapshot report
         for (const fileNode of nodesToProcess) {
             // Skip if already processed
-            if (processedDocsRef.current.has(fileNode.id))
+            if (processedDocs.has(fileNode.id))
                 continue;
             // Find the corresponding document to get startDate
             const doc = documentsInDrive.find((d) => d.header.documentType === "powerhouse/snapshot-report" &&
@@ -124,12 +140,12 @@ export function useSnapshotReportAutoPlacement() {
             if (!startDate) {
                 // No period defined - move to root of Snapshot Reports folder
                 // (this signals something might be wrong with the document)
-                processedDocsRef.current.add(fileNode.id);
+                processedDocs.add(fileNode.id);
                 // Only move if not already in the Snapshot Reports folder
                 if (!snapshotReportsFolderNodeIds.has(fileNode.id)) {
                     onMoveNode(fileNode, snapshotReportsFolder).catch((error) => {
                         console.error(`Failed to move snapshot report to Snapshot Reports folder:`, error);
-                        processedDocsRef.current.delete(fileNode.id);
+                        processedDocs.delete(fileNode.id);
                     });
                 }
                 continue;
@@ -137,7 +153,7 @@ export function useSnapshotReportAutoPlacement() {
             // Extract year from startDate
             const year = new Date(startDate).getFullYear().toString();
             // Mark as processed immediately to prevent duplicate processing
-            processedDocsRef.current.add(fileNode.id);
+            processedDocs.add(fileNode.id);
             // Check if year folder exists
             const existingYearFolder = yearFolders.get(year);
             if (existingYearFolder) {
@@ -145,10 +161,17 @@ export function useSnapshotReportAutoPlacement() {
                 onMoveNode(fileNode, existingYearFolder).catch((error) => {
                     console.error(`Failed to move snapshot report to ${year} folder:`, error);
                     // Remove from processed so it can be retried
-                    processedDocsRef.current.delete(fileNode.id);
+                    processedDocs.delete(fileNode.id);
                 });
             }
+            else if (creatingYearFolders.has(year)) {
+                // Year folder is being created by another document - remove from processed
+                // so it can be retried on the next effect run when the folder exists
+                processedDocs.delete(fileNode.id);
+            }
             else {
+                // Mark this year as being created to prevent race conditions
+                creatingYearFolders.add(year);
                 // Create year folder first, then move the document
                 addFolder(driveId, year, snapshotReportsFolder.id)
                     .then((newFolder) => {
@@ -160,11 +183,16 @@ export function useSnapshotReportAutoPlacement() {
                     .catch((error) => {
                     console.error(`Failed to create ${year} folder or move snapshot report:`, error);
                     // Remove from processed so it can be retried
-                    processedDocsRef.current.delete(fileNode.id);
+                    processedDocs.delete(fileNode.id);
+                })
+                    .finally(() => {
+                    // Clean up the creating flag when done (success or failure)
+                    creatingYearFolders.delete(year);
                 });
             }
         }
     }, [
+        driveId,
         driveDocument,
         snapshotReportsFolder,
         documentsInDrive,

package/dist/editors/contributor-billing/components/DriveExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DriveExplorer.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/DriveExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,2CA6DtD"}
+{"version":3,"file":"DriveExplorer.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/DriveExplorer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAOlD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,2CA+DtD"}

package/dist/editors/contributor-billing/components/DriveExplorer.js

@@ -3,6 +3,7 @@ import { ToastContainer } from "@powerhousedao/design-system/connect";
 import { useState } from "react";
 import { DriveContents } from "./DriveContents.js";
 import { FolderTree } from "./FolderTree.js";
+import { FolderTreeErrorBoundary } from "./FolderTreeErrorBoundary.js";
 /**
  * Main drive explorer component for Contributor Billing.
  * Displays an operational hub with invoice management and billing statement generation.
@@ -24,7 +25,7 @@ export function DriveExplorer({ children }) {
             setActiveNodeId(folderInfo.folderId);
         }
     };
-    return (_jsxs("div", { className: "flex h-full w-full overflow-hidden", children: [_jsx(FolderTree, { onFolderSelect: handleFolderSelect, activeNodeId: activeNodeId, onActiveNodeIdChange: setActiveNodeId }), _jsx(ToastContainer, { position: "bottom-right", autoClose: 5000, hideProgressBar: false, newestOnTop: false, closeOnClick: false, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }), _jsx("div", { className: "flex-1 min-w-0 h-full overflow-auto", children: showDocumentEditor ? (
+    return (_jsxs("div", { className: "flex h-full w-full overflow-hidden", children: [_jsx(FolderTreeErrorBoundary, { children: _jsx(FolderTree, { onFolderSelect: handleFolderSelect, activeNodeId: activeNodeId, onActiveNodeIdChange: setActiveNodeId }) }), _jsx(ToastContainer, { position: "bottom-right", autoClose: 5000, hideProgressBar: false, newestOnTop: false, closeOnClick: false, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }), _jsx("div", { className: "flex-1 min-w-0 h-full overflow-auto", children: showDocumentEditor ? (
                 /* Document editor view */
                 _jsx("div", { className: "min-h-full", children: children })) : (
                 /* Folder content view */

package/dist/editors/contributor-billing/components/FolderTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/FolderTree.tsx"],"names":[],"mappings":"AA0BA,uCAAuC;AACvC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC;AAErE,+CAA+C;AAC/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,cAAc,EACd,YAAY,EAAE,sBAAsB,EACpC,oBAAoB,GACrB,EAAE,eAAe,2CA6SjB"}
+{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/FolderTree.tsx"],"names":[],"mappings":"AA0BA,uCAAuC;AACvC,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,IAAI,CAAC;AAErE,+CAA+C;AAC/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,cAAc,EACd,YAAY,EAAE,sBAAsB,EACpC,oBAAoB,GACrB,EAAE,eAAe,2CAsXjB"}

package/dist/editors/contributor-billing/components/FolderTree.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Sidebar, SidebarProvider, } from "@powerhousedao/document-engineering";
 import { setSelectedNode, showCreateDocumentModal, useDocumentsInSelectedDrive, useSelectedDrive, isFileNodeKind, } from "@powerhousedao/reactor-browser";
 import { Wallet, FileText, Building2, Calendar, CreditCard, BarChart3, Camera, } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useBillingFolderStructure } from "../hooks/useBillingFolderStructure.js";
 const ICON_SIZE = 16;
 /**
@@ -71,6 +71,67 @@ export function FolderTree({ onFolderSelect, activeNodeId: controlledActiveNodeI
             reportDocumentIds: new Set(docs.map((d) => d.header.id)),
         };
     }, [documentsInDrive]);
+    // Build a set of all valid document IDs for safe selection
+    const validDocumentIds = useMemo(() => {
+        if (!documentsInDrive)
+            return new Set();
+        return new Set(documentsInDrive.map((doc) => doc.header.id));
+    }, [documentsInDrive]);
+    // Build a set of all valid node IDs (documents + folders + special IDs)
+    const validNodeIds = useMemo(() => {
+        const ids = new Set();
+        // Add special IDs
+        ids.add("accounts");
+        ids.add("billing-placeholder");
+        // Add billing folder ID
+        if (billingFolder?.id) {
+            ids.add(billingFolder.id);
+        }
+        // Add all document IDs
+        for (const docId of validDocumentIds) {
+            ids.add(docId);
+        }
+        // Add all folder IDs (month folders, payments folders, reporting folders)
+        for (const info of monthFolders.values()) {
+            ids.add(info.folder.id);
+            if (info.paymentsFolder) {
+                ids.add(info.paymentsFolder.id);
+            }
+            if (info.reportingFolder) {
+                ids.add(info.reportingFolder.id);
+            }
+        }
+        return ids;
+    }, [validDocumentIds, billingFolder, monthFolders]);
+    // Sanitize activeNodeId - if it's not a valid node, use empty string
+    const sanitizedActiveNodeId = useMemo(() => {
+        // Empty string is always valid
+        if (activeNodeId === "")
+            return "";
+        // Check if the ID is valid
+        if (validNodeIds.has(activeNodeId))
+            return activeNodeId;
+        // Invalid ID, clear it
+        console.warn(`[FolderTree] activeNodeId ${activeNodeId} is not a valid node, clearing selection`);
+        return "";
+    }, [activeNodeId, validNodeIds]);
+    // Safe wrapper for setSelectedNode that verifies document exists
+    const safeSetSelectedNode = useCallback((nodeId) => {
+        // Empty string is valid (clears selection)
+        if (nodeId === "") {
+            setSelectedNode("");
+            return;
+        }
+        // Only select if the document exists
+        if (validDocumentIds.has(nodeId)) {
+            setSelectedNode(nodeId);
+        }
+        else {
+            // Document doesn't exist, clear selection instead of throwing
+            console.warn(`[FolderTree] Document with id ${nodeId} not found, clearing selection`);
+            setSelectedNode("");
+        }
+    }, [validDocumentIds]);
     // Generate a stable key based on the node structure to force Sidebar remount when nodes change
     // This works around a bug in the Sidebar component where toggle state isn't updated for new nodes
     const sidebarKey = useMemo(() => {
@@ -170,23 +231,23 @@ export function FolderTree({ onFolderSelect, activeNodeId: controlledActiveNodeI
         // Check if this is an account-transactions child node
         if (accountTransactionsNodeIds.has(node.id)) {
             onFolderSelect?.(null);
-            setSelectedNode(node.id);
+            safeSetSelectedNode(node.id);
             return;
         }
         // Check if this is an expense or snapshot report document
         if (reportDocumentIds.has(node.id)) {
             onFolderSelect?.(null);
-            setSelectedNode(node.id);
+            safeSetSelectedNode(node.id);
             return;
         }
         // Check if clicking Accounts section
         if (node.id === "accounts") {
             if (accountsDocument) {
                 onFolderSelect?.(null);
-                setSelectedNode(accountsDocument.header.id);
+                safeSetSelectedNode(accountsDocument.header.id);
             }
             else {
-                setSelectedNode("");
+                safeSetSelectedNode("");
                 showCreateDocumentModal("powerhouse/accounts");
             }
             return;
@@ -197,7 +258,7 @@ export function FolderTree({ onFolderSelect, activeNodeId: controlledActiveNodeI
                 folderId: billingFolder?.id || "",
                 folderType: "billing",
             });
-            setSelectedNode("");
+            safeSetSelectedNode("");
             return;
         }
         // Check if clicking a month folder - just let it expand, don't navigate or select
@@ -215,7 +276,7 @@ export function FolderTree({ onFolderSelect, activeNodeId: controlledActiveNodeI
                         monthName,
                         reportingFolderId: info.reportingFolder?.id,
                     });
-                    setSelectedNode("");
+                    safeSetSelectedNode("");
                     return;
                 }
             }
@@ -231,22 +292,22 @@ export function FolderTree({ onFolderSelect, activeNodeId: controlledActiveNodeI
                         monthName,
                         paymentsFolderId: info.paymentsFolder?.id,
                     });
-                    setSelectedNode("");
+                    safeSetSelectedNode("");
                     return;
                 }
             }
         }
         // Default: clear selection
         onFolderSelect?.(null);
-        setSelectedNode("");
+        safeSetSelectedNode("");
     };
     return (_jsxs(SidebarProvider, { nodes: navigationSections, children: [_jsx("style", { children: `
           .folder-tree-sidebar .sidebar__item-caret--no-children {
             visibility: hidden;
           }
-        ` }), _jsx(Sidebar, { className: "pt-1 folder-tree-sidebar", nodes: navigationSections, activeNodeId: activeNodeId, onActiveNodeChange: handleActiveNodeChange, sidebarTitle: "Operational Hub Navigation", showSearchBar: false, resizable: true, allowPinning: false, showStatusFilter: false, initialWidth: 256, defaultLevel: 2, handleOnTitleClick: () => {
+        ` }), _jsx(Sidebar, { className: "pt-1 folder-tree-sidebar", nodes: navigationSections, activeNodeId: sanitizedActiveNodeId, onActiveNodeChange: handleActiveNodeChange, sidebarTitle: "Operational Hub Navigation", showSearchBar: false, resizable: true, allowPinning: false, showStatusFilter: false, initialWidth: 256, defaultLevel: 2, handleOnTitleClick: () => {
                     onFolderSelect?.(null);
-                    setSelectedNode("");
+                    safeSetSelectedNode("");
                     setActiveNodeId("");
                 } }, sidebarKey)] }));
 }

package/dist/editors/contributor-billing/components/FolderTreeErrorBoundary.d.ts

@@ -0,0 +1,24 @@
+import { Component, type ReactNode } from "react";
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: string | null;
+}
+/**
+ * Error boundary specifically for FolderTree to handle DocumentNotFoundError.
+ * This error typically occurs when the drive contains a reference to a document
+ * that has been deleted from storage.
+ */
+export declare class FolderTreeErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): Partial<State>;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    handleRetry: () => void;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}
+export {};
+//# sourceMappingURL=FolderTreeErrorBoundary.d.ts.map

package/dist/editors/contributor-billing/components/FolderTreeErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTreeErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../editors/contributor-billing/components/FolderTreeErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED;;;;GAIG;AACH,qBAAa,uBAAwB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACtD,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;IAgB7D,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAI1D,WAAW,aAET;IAEF,MAAM;CA6BP"}

package/dist/editors/contributor-billing/components/FolderTreeErrorBoundary.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+/**
+ * Error boundary specifically for FolderTree to handle DocumentNotFoundError.
+ * This error typically occurs when the drive contains a reference to a document
+ * that has been deleted from storage.
+ */
+export class FolderTreeErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null, errorInfo: null };
+    }
+    static getDerivedStateFromError(error) {
+        // Check if this is a DocumentNotFoundError
+        const isDocumentNotFound = error.name === "DocumentNotFoundError" ||
+            error.message?.includes("Document with id") ||
+            error.message?.includes("not found");
+        return {
+            hasError: true,
+            error,
+            errorInfo: isDocumentNotFound
+                ? "The drive contains a reference to a document that no longer exists."
+                : null,
+        };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("[FolderTreeErrorBoundary] Caught error:", error, errorInfo);
+    }
+    handleRetry = () => {
+        this.setState({ hasError: false, error: null, errorInfo: null });
+    };
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            return (_jsxs("div", { className: "p-4 bg-red-50 border-r border-red-200 h-full min-w-[200px]", children: [_jsx("h3", { className: "text-red-800 font-semibold mb-2", children: "Navigation Error" }), _jsx("p", { className: "text-red-600 text-sm mb-3", children: this.state.errorInfo || "Failed to load the folder tree." }), this.state.error && (_jsx("p", { className: "text-red-500 text-xs mb-3 font-mono break-all", children: this.state.error.message })), _jsx("button", { onClick: this.handleRetry, className: "px-3 py-1 text-sm bg-red-100 hover:bg-red-200 text-red-800 rounded", children: "Retry" })] }));
+        }
+        return this.props.children;
+    }
+}

package/dist/editors/contributor-billing/components/InvoiceTable/HeaderStats.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderStats.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/HeaderStats.tsx"],"names":[],"mappings":"AAwBA,UAAU,gBAAgB;IACxB,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,gBAAgB,4CAgIzD,CAAC"}
+{"version":3,"file":"HeaderStats.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/HeaderStats.tsx"],"names":[],"mappings":"AAwBA,UAAU,gBAAgB;IACxB,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,gBAAgB,4CAyIzD,CAAC"}

package/dist/editors/contributor-billing/components/InvoiceTable/HeaderStats.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from "@powerhousedao/document-engineering/ui";
 import { useState, useEffect, useMemo } from "react";
-import { useGetDocuments, useSelectedDrive, isFileNodeKind, } from "@powerhousedao/reactor-browser";
+import { useDocumentsInSelectedDrive, useSelectedDrive, isFileNodeKind, } from "@powerhousedao/reactor-browser";
 import { getExchangeRate } from "../../utils/exchangeRate.js";
 import { Tooltip, TooltipProvider } from "@powerhousedao/design-system/ui";
 const currencyList = [
@@ -31,10 +31,17 @@ export const HeaderStats = ({ folderId }) => {
             node.documentType === "powerhouse/invoice")
             .map((node) => node.id);
     }, [driveDocument, folderId]);
-    const invoices = useGetDocuments(invoiceFiles);
+    const allDocuments = useDocumentsInSelectedDrive() || [];
+    const invoices = useMemo(() => {
+        if (invoiceFiles.length === 0)
+            return [];
+        const invoiceSet = new Set(invoiceFiles);
+        return allDocuments.filter((doc) => doc.header.documentType === "powerhouse/invoice" &&
+            invoiceSet.has(doc.header.id));
+    }, [allDocuments, invoiceFiles]);
     useEffect(() => {
         const calculateTotalExpenses = async () => {
-            if (!invoices || invoices.length === 0) {
+            if (!invoices || !Array.isArray(invoices) || invoices.length === 0) {
                 setTotalExpenses(0);
                 return;
             }

package/dist/editors/contributor-billing/components/InvoiceTable/InvoiceTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InvoiceTable.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,wBAAwB,EAC9B,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AA6D/C,eAAO,MAAM,aAAa;;;GAUzB,CAAC;AAeF,UAAU,iBAAiB;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,WAAW,EAAE,CACX,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAC7D,IAAI,CAAC;IACV,sBAAsB,EAAE,wBAAwB,EAAE,CAAC;IACnD,qBAAqB,EAAE,CACrB,KAAK,EAAE,wBAAwB,EAC/B,IAAI,EAAE,MAAM,KACT,IAAI,CAAC;IACV,gBAAgB,EAAE,CAChB,EAAE,EAAE,MAAM,KACP,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IAC7D,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,qBAAqB,EAAE,MAAM,OAAO,CAAC;IACrC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA6BD,eAAO,MAAM,YAAY,GAAI,2MAa1B,iBAAiB,4CAmqBnB,CAAC"}
+{"version":3,"file":"InvoiceTable.d.ts","sourceRoot":"","sources":["../../../../../editors/contributor-billing/components/InvoiceTable/InvoiceTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,wBAAwB,EAC9B,MAAM,gCAAgC,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AA8D/C,eAAO,MAAM,aAAa;;;GAUzB,CAAC;AAeF,UAAU,iBAAiB;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,WAAW,EAAE,CACX,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAC7D,IAAI,CAAC;IACV,sBAAsB,EAAE,wBAAwB,EAAE,CAAC;IACnD,qBAAqB,EAAE,CACrB,KAAK,EAAE,wBAAwB,EAC/B,IAAI,EAAE,MAAM,KACT,IAAI,CAAC;IACV,gBAAgB,EAAE,CAChB,EAAE,EAAE,MAAM,KACP,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IAC7D,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,qBAAqB,EAAE,MAAM,OAAO,CAAC;IACrC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA6BD,eAAO,MAAM,YAAY,GAAI,2MAa1B,iBAAiB,4CAosBnB,CAAC"}

package/dist/editors/contributor-billing/components/InvoiceTable/InvoiceTable.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { addDocument, dispatchActions, setSelectedNode, useSelectedDrive, useDocumentsInSelectedDrive, } from "@powerhousedao/reactor-browser";
-import { toast } from "@powerhousedao/design-system/connect";
 import { actions as invoiceActions } from "../../../../document-models/invoice/index.js";
 import { actions as billingStatementActions } from "../../../../document-models/billing-statement/index.js";
 import { mapTags } from "../../../billing-statement/lineItemTags/tagMapping.js";
@@ -10,6 +9,7 @@ import { exportExpenseReportCSV } from "../../../../scripts/contributor-billing/
 import { HeaderControls } from "./HeaderControls.js";
 import { InvoiceTableSection } from "./InvoiceTableSection.js";
 import { InvoiceTableRow } from "./InvoiceTableRow.js";
+import { NotificationDialog } from "./NotificationDialog.js";
 // Helper to convert partial tags to InvoiceTag array
 const toInvoiceTags = (tags) => {
     if (!tags)
@@ -50,6 +50,12 @@ const statusColors = {
 const TableHeader = ({ showIssuer = true, showBillingStatement = false, }) => (_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50 font-medium text-gray-500 text-xs", children: [_jsx("th", { className: "px-2 py-2 w-8 rounded-tl-sm" }), _jsx("th", { className: "px-2 py-2 text-center", children: showIssuer ? "Issuer" : "Invoice" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), showBillingStatement && (_jsx("th", { className: "px-2 py-2 text-center", children: "Billing Statement" })), _jsx("th", { className: "px-2 py-2 rounded-tr-sm text-center", children: "Exported" })] }) }));
 export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentModels, onSelectDocumentModel, getDocDispatcher, selectedStatuses, onStatusChange, onRowSelection, canExportSelectedRows, monthName, reportingFolderId, }) => {
     const [selectedDrive] = useSelectedDrive();
+    // Notification state
+    const [notification, setNotification] = useState({
+        show: false,
+        type: "success",
+        title: "",
+    });
     // Get documents directly from the hook - this will automatically update when documents change
     const documentsInDrive = useDocumentsInSelectedDrive() || [];
     // Check if an expense report already exists for the current month
@@ -232,7 +238,7 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
         const invoiceFile = files.find((file) => file.id === id);
         const invoiceDoc = allDocuments.find((doc) => doc.header.id === id);
         if (!invoiceDoc) {
-            toast("Invoice not found", { type: "error" });
+            console.error("Invoice not found");
             return;
         }
         const invoiceState = invoiceDoc.state.global;
@@ -243,7 +249,7 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
             const createdNode = await addDocument(selectedDrive?.header.id || "", `bill-${invoiceFile?.name || id}`, "powerhouse/billing-statement", targetFolder ?? undefined, // Create directly in the payments folder
             undefined, undefined, "powerhouse-billing-statement-editor");
             if (!createdNode?.id) {
-                toast("Failed to create billing statement", { type: "error" });
+                console.error("Failed to create billing statement");
                 return;
             }
             // Prepare billing statement data
@@ -295,11 +301,21 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
             if (tagActions.length > 0) {
                 await dispatchActions(tagActions, createdNode.id);
             }
-            toast("Billing statement created successfully", { type: "success" });
+            setNotification({
+                show: true,
+                type: "success",
+                title: "Billing Statement Created",
+                message: `Successfully created billing statement for ${invoiceFile?.name || id}`,
+            });
         }
         catch (error) {
             console.error("Error creating billing statement:", error);
-            toast("Failed to create billing statement", { type: "error" });
+            setNotification({
+                show: true,
+                type: "error",
+                title: "Creation Failed",
+                message: "Failed to create billing statement. Please try again.",
+            });
         }
     };
     // Get selected invoices for export - memoized to update when selected or allDocuments changes
@@ -313,7 +329,6 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
     const handleCSVExport = async (baseCurrency) => {
         try {
             const exportedData = await exportInvoicesToXeroCSV(selectedInvoices, baseCurrency);
-            toast("Invoices exported successfully", { type: "success" });
             // Update exported status on invoices
             for (const invoice of selectedInvoices) {
                 const exportedInvoiceData = exportedData[invoice.header.id];
@@ -325,34 +340,56 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
                 ], invoice.header.id);
             }
             setSelected({});
+            setNotification({
+                show: true,
+                type: "success",
+                title: "Export Successful",
+                message: `Successfully exported ${selectedInvoices.length} invoice${selectedInvoices.length !== 1 ? "s" : ""} to CSV`,
+            });
         }
         catch (error) {
             console.error("Error exporting invoices:", error);
             const err = error;
             const missingExpenseTagInvoices = err.missingExpenseTagInvoices || [];
             const missingList = missingExpenseTagInvoices.map((invoiceId) => files.find((file) => file.id === invoiceId)?.name || invoiceId);
-            toast(_jsxs(_Fragment, { children: ["Invoice Line Item Tags need to be set for:", _jsx("br", {}), missingList.map((name) => (_jsxs(React.Fragment, { children: ["- ", name, _jsx("br", {})] }, name)))] }), { type: "error" });
+            setNotification({
+                show: true,
+                type: "error",
+                title: "Export Failed",
+                message: "Invoice Line Item Tags need to be set before exporting.",
+                details: missingList,
+            });
         }
     };
     // Expense Report Export handler - simple async function
     const handleExpenseReportExport = async (baseCurrency) => {
-        console.log("selectedInvoices", selectedInvoices);
         try {
             await exportExpenseReportCSV(selectedInvoices, baseCurrency);
-            toast("Expense report exported successfully", { type: "success" });
             // Clear selection
             const updatedSelected = { ...selected };
             Object.keys(updatedSelected).forEach((id) => {
                 updatedSelected[id] = false;
             });
             setSelected(updatedSelected);
+            setNotification({
+                show: true,
+                type: "success",
+                title: "Expense Report Exported",
+                message: `Successfully exported expense report with ${selectedInvoices.length} invoice${selectedInvoices.length !== 1 ? "s" : ""}`,
+            });
         }
         catch (error) {
             console.error("Error exporting expense report:", error);
             const err = error;
             const missingTagInvoices = err.missingTagInvoices || [];
             const missingList = missingTagInvoices.map((invoiceId) => files.find((file) => file.id === invoiceId)?.name || invoiceId);
-            toast(_jsxs(_Fragment, { children: ["Invoice Line Item Tags need to be set for:", _jsx("br", {}), missingList.map((name) => (_jsxs(React.Fragment, { children: ["- ", name, _jsx("br", {})] }, name)))] }), { type: "error" });
+            setNotification({
+                show: true,
+                type: "error",
+                title: "Export Failed",
+                message: "Invoice Line Item Tags need to be set before exporting.",
+                details: missingList,
+            });
         }
     };
     // Check for integrations document - simple computed value
@@ -428,21 +465,21 @@ export const InvoiceTable = ({ files, selected, setSelected, filteredDocumentMod
         const { showIssuer = true, showBillingStatement = false, showCreateButton = false, } = options || {};
         return (_jsx(InvoiceTableSection, { title: title, count: data.length, color: statusColors[status] || statusColors.OTHER, onSelectDocumentModel: showCreateButton ? onSelectDocumentModel : undefined, filteredDocumentModels: showCreateButton ? filteredDocumentModels : undefined, children: _jsxs("table", { className: "w-full text-sm rounded-sm border-separate border-spacing-0 border border-gray-300 overflow-hidden", children: [_jsx(TableHeader, { showIssuer: showIssuer, showBillingStatement: showBillingStatement }), _jsx("tbody", { children: data.map((row) => (_jsx(InvoiceTableRow, { files: files, row: row, isSelected: !!selected[row.id], onSelect: (checked) => onRowSelection(row.id, checked, row.status), onCreateBillingStatement: handleCreateBillingStatement, billingDocStates: billingDocStates, showIssuerColumn: showIssuer, showBillingStatementColumn: showBillingStatement }, row.id))) })] }) }));
     };
-    return (_jsxs("div", { className: "contributor-billing-table w-full h-full bg-white rounded-lg p-4 border border-gray-200 shadow-sm mt-4 overflow-x-auto", children: [_jsx(HeaderControls, { statusOptions: statusOptions, selectedStatuses: selectedStatuses, onStatusChange: onStatusChange, onExport: handleCSVExport, onExpenseReportExport: handleExpenseReportExport, createIntegrationsDocument: createIntegrationsDocument, integrationsDoc: integrationsDoc, hasBillingStatements: hasBillingStatements, expenseReportDoc: expenseReportDoc, existingExpenseReportForMonth: existingExpenseReport, onCreateOrOpenExpenseReport: handleCreateOrOpenExpenseReport, selected: selected, handleCreateBillingStatement: handleCreateBillingStatement, setSelected: setSelected, invoices: invoicesDocs, billingStatements: billingStatementDocs, canExportSelectedRows: canExportSelectedRows }), renderSection("DRAFT", "Draft", draft, {
-                showIssuer: false,
-                showCreateButton: true,
-            }), renderSection("ISSUED", "Issued", issued, {
-                showBillingStatement: true,
-            }), renderSection("ACCEPTED", "Accepted", accepted, {
-                showBillingStatement: true,
-            }), renderSection("PAYMENTSCHEDULED", "Payment Scheduled", paymentScheduled, {
-                showBillingStatement: true,
-            }), renderSection("PAYMENTSENT", "Payment Sent", paymentSent, {
-                showBillingStatement: true,
-            }), renderSection("PAYMENTISSUE", "Payment Issue", paymentIssue, {
-                showBillingStatement: true,
-            }), renderSection("PAYMENTCLOSED", "Payment Closed", paymentClosed), renderSection("REJECTED", "Rejected", rejected), renderSection("OTHER", "Other", otherInvoices), loadingFileIds.length > 0 && (_jsx(InvoiceTableSection, { title: "Loading", count: loadingFileIds.length, color: "bg-gray-100 text-gray-600", children: _jsxs("table", { className: "w-full text-sm rounded-sm border-separate border-spacing-0 border border-gray-300 overflow-hidden", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50 font-medium text-gray-500 text-xs", children: [_jsx("th", { className: "px-2 py-2 w-8 rounded-tl-sm" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 rounded-tr-sm text-center", children: "Status" })] }) }), _jsx("tbody", { children: loadingFileIds.map((id) => {
-                                const file = files.find((f) => f.id === id);
-                                return (_jsxs("tr", { className: "border-t border-gray-200 animate-pulse", children: [_jsx("td", { className: "px-2 py-2" }), _jsx("td", { className: "px-2 py-2 text-center text-gray-400", children: file?.name || "Loading..." }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-16 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-20 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-20 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-12 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-16 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("span", { className: "text-xs text-gray-400", children: "Loading..." }) })] }, id));
-                            }) })] }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationDialog, { show: notification.show, type: notification.type, title: notification.title, message: notification.message, details: notification.details, onClose: () => setNotification({ ...notification, show: false }) }), _jsxs("div", { className: "contributor-billing-table w-full h-full bg-white rounded-lg p-4 border border-gray-200 shadow-sm mt-4 overflow-x-auto", children: [_jsx(HeaderControls, { statusOptions: statusOptions, selectedStatuses: selectedStatuses, onStatusChange: onStatusChange, onExport: handleCSVExport, onExpenseReportExport: handleExpenseReportExport, createIntegrationsDocument: createIntegrationsDocument, integrationsDoc: integrationsDoc, hasBillingStatements: hasBillingStatements, expenseReportDoc: expenseReportDoc, existingExpenseReportForMonth: existingExpenseReport, onCreateOrOpenExpenseReport: handleCreateOrOpenExpenseReport, selected: selected, handleCreateBillingStatement: handleCreateBillingStatement, setSelected: setSelected, invoices: invoicesDocs, billingStatements: billingStatementDocs, canExportSelectedRows: canExportSelectedRows }), renderSection("DRAFT", "Draft", draft, {
+                        showIssuer: false,
+                        showCreateButton: true,
+                    }), renderSection("ISSUED", "Issued", issued, {
+                        showBillingStatement: true,
+                    }), renderSection("ACCEPTED", "Accepted", accepted, {
+                        showBillingStatement: true,
+                    }), renderSection("PAYMENTSCHEDULED", "Payment Scheduled", paymentScheduled, {
+                        showBillingStatement: true,
+                    }), renderSection("PAYMENTSENT", "Payment Sent", paymentSent, {
+                        showBillingStatement: true,
+                    }), renderSection("PAYMENTISSUE", "Payment Issue", paymentIssue, {
+                        showBillingStatement: true,
+                    }), renderSection("PAYMENTCLOSED", "Payment Closed", paymentClosed), renderSection("REJECTED", "Rejected", rejected), renderSection("OTHER", "Other", otherInvoices), loadingFileIds.length > 0 && (_jsx(InvoiceTableSection, { title: "Loading", count: loadingFileIds.length, color: "bg-gray-100 text-gray-600", children: _jsxs("table", { className: "w-full text-sm rounded-sm border-separate border-spacing-0 border border-gray-300 overflow-hidden", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-gray-50 font-medium text-gray-500 text-xs", children: [_jsx("th", { className: "px-2 py-2 w-8 rounded-tl-sm" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Invoice No." }), _jsx("th", { className: "px-2 py-2 text-center", children: "Issue Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Due Date" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Currency" }), _jsx("th", { className: "px-2 py-2 text-center", children: "Amount" }), _jsx("th", { className: "px-2 py-2 rounded-tr-sm text-center", children: "Status" })] }) }), _jsx("tbody", { children: loadingFileIds.map((id) => {
+                                        const file = files.find((f) => f.id === id);
+                                        return (_jsxs("tr", { className: "border-t border-gray-200 animate-pulse", children: [_jsx("td", { className: "px-2 py-2" }), _jsx("td", { className: "px-2 py-2 text-center text-gray-400", children: file?.name || "Loading..." }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-16 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-20 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-20 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-12 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-16 mx-auto" }) }), _jsx("td", { className: "px-2 py-2 text-center", children: _jsx("span", { className: "text-xs text-gray-400", children: "Loading..." }) })] }, id));
+                                    }) })] }) }))] })] }));
 };