@powerhousedao/contributor-billing 0.1.31 → 0.1.32

package/dist/editors/expense-report/services/walletAccountService.js

@@ -0,0 +1,403 @@
+/**
+ * Service for managing wallet accounts and transactions in expense reports
+ * Handles creation and linking of Accounts and Account Transactions documents
+ */
+import { generateId } from "document-model/core";
+import { accountTransactionsService } from "../../accounts-editor/services/accountTransactionsService.js";
+export class WalletAccountService {
+    graphqlEndpoint;
+    constructor() {
+        this.graphqlEndpoint = this.getGraphQLEndpoint();
+    }
+    getGraphQLEndpoint() {
+        if (typeof window !== "undefined" &&
+            !window.document.baseURI.includes("localhost")) {
+            return "https://switchboard-dev.powerhouse.xyz/graphql";
+        }
+        return "http://localhost:4001/graphql";
+    }
+    /**
+     * Process wallet addition: ensure Accounts document exists, add account if needed,
+     * and create/update Account Transactions document
+     */
+    async processWalletAddition(walletAddress, walletName, driveId, allDocuments) {
+        console.log("[WalletAccountService] Starting wallet addition process", {
+            walletAddress,
+            walletName,
+            driveId,
+            documentsCount: allDocuments?.length || 0,
+        });
+        try {
+            // Step 1: Find or create Accounts document
+            console.log("[WalletAccountService] Step 1: Finding or creating Accounts document", {
+                driveId,
+                hasDocuments: !!allDocuments,
+                documentsCount: allDocuments?.length || 0,
+            });
+            if (!driveId) {
+                console.warn("[WalletAccountService] No driveId provided - documents will be created but not added to drive");
+            }
+            const accountsDocResult = await this.findOrCreateAccountsDocument(driveId, allDocuments);
+            console.log("[WalletAccountService] Accounts document result:", accountsDocResult);
+            if (!accountsDocResult.success || !accountsDocResult.documentId) {
+                const errorMsg = accountsDocResult.message ||
+                    "Failed to find or create Accounts document";
+                console.error("[WalletAccountService] Failed at step 1:", errorMsg);
+                return {
+                    success: false,
+                    message: errorMsg,
+                };
+            }
+            const accountsDocumentId = accountsDocResult.documentId;
+            // Wait for document to be added to drive and processed
+            // The UI needs time to detect the new document
+            if (driveId) {
+                console.log("[WalletAccountService] Waiting for document to be added to drive...");
+                // Wait longer to ensure the drive state is updated and UI can refresh
+                await new Promise((resolve) => setTimeout(resolve, 1000));
+            }
+            // Step 2: Check if account exists, if not add it
+            console.log("[WalletAccountService] Step 2: Finding or adding account");
+            const accountResult = await this.findOrAddAccount(accountsDocumentId, walletAddress, walletName || walletAddress);
+            console.log("[WalletAccountService] Account result:", accountResult);
+            if (!accountResult.success || !accountResult.accountId) {
+                const errorMsg = accountResult.message || "Failed to find or add account";
+                console.error("[WalletAccountService] Failed at step 2:", errorMsg);
+                return {
+                    success: false,
+                    message: errorMsg,
+                };
+            }
+            const accountId = accountResult.accountId;
+            const account = accountResult.account;
+            if (!account) {
+                const errorMsg = "Account object is missing";
+                console.error("[WalletAccountService] Failed at step 2:", errorMsg);
+                return {
+                    success: false,
+                    message: errorMsg,
+                };
+            }
+            // Step 3: Check if Account Transactions document exists, create/update if needed
+            console.log("[WalletAccountService] Step 3: Handling Account Transactions document", {
+                hasExistingTxnsDoc: !!(account.accountTransactionsId &&
+                    account.accountTransactionsId !== null &&
+                    account.accountTransactionsId !== ""),
+                driveId,
+            });
+            let accountTransactionsDocumentId;
+            if (account.accountTransactionsId &&
+                account.accountTransactionsId !== null &&
+                account.accountTransactionsId !== "") {
+                // Account Transactions document already exists, update it
+                console.log("[WalletAccountService] Account Transactions document exists, updating:", account.accountTransactionsId);
+                accountTransactionsDocumentId = account.accountTransactionsId;
+                await this.updateAccountTransactions(accountTransactionsDocumentId, walletAddress);
+            }
+            else {
+                // Create new Account Transactions document
+                console.log("[WalletAccountService] Creating new Account Transactions document with driveId:", driveId);
+                const txnsResult = await accountTransactionsService.createAccountTransactionsDocument(account, accountsDocumentId, driveId);
+                console.log("[WalletAccountService] Account Transactions creation result:", txnsResult);
+                if (txnsResult.success && txnsResult.documentId) {
+                    accountTransactionsDocumentId = txnsResult.documentId;
+                    // Wait for document to be added to drive and processed
+                    if (driveId) {
+                        console.log("[WalletAccountService] Waiting for Account Transactions document to be added to drive...");
+                        // Wait longer to ensure the drive state is updated and UI can refresh
+                        await new Promise((resolve) => setTimeout(resolve, 1000));
+                    }
+                }
+                else {
+                    console.warn("[WalletAccountService] Failed to create Account Transactions document:", txnsResult.message);
+                }
+            }
+            const result = {
+                success: true,
+                accountDocumentId: accountsDocumentId,
+                accountTransactionsDocumentId,
+                accountId,
+                message: "Successfully processed wallet addition",
+            };
+            console.log("[WalletAccountService] Wallet addition process completed successfully:", result);
+            return result;
+        }
+        catch (error) {
+            const errorMsg = `Error processing wallet addition: ${error instanceof Error ? error.message : "Unknown error"}`;
+            console.error("[WalletAccountService] Error in processWalletAddition:", error);
+            return {
+                success: false,
+                message: errorMsg,
+            };
+        }
+    }
+    /**
+     * Find existing Accounts document in drive or create a new one
+     */
+    async findOrCreateAccountsDocument(driveId, allDocuments) {
+        console.log("[WalletAccountService] findOrCreateAccountsDocument called", {
+            driveId,
+            documentsCount: allDocuments?.length || 0,
+            documentTypes: allDocuments?.map((d) => d.header.documentType) || [],
+        });
+        // First, try to find existing Accounts document in the drive
+        if (allDocuments && driveId) {
+            const accountsDoc = allDocuments.find((doc) => doc.header.documentType === "powerhouse/accounts");
+            console.log("[WalletAccountService] Accounts document search result:", {
+                found: !!accountsDoc,
+                documentId: accountsDoc?.header.id,
+            });
+            if (accountsDoc) {
+                return {
+                    success: true,
+                    documentId: accountsDoc.header.id,
+                    message: "Found existing Accounts document",
+                };
+            }
+        }
+        else {
+            console.log("[WalletAccountService] Cannot search for existing document:", {
+                hasDocuments: !!allDocuments,
+                hasDriveId: !!driveId,
+            });
+        }
+        // If not found, create a new Accounts document
+        console.log("[WalletAccountService] Creating new Accounts document", {
+            endpoint: this.graphqlEndpoint,
+            driveId,
+        });
+        try {
+            console.log("[WalletAccountService] Creating Accounts document", {
+                driveId,
+                hasDriveId: !!driveId,
+                endpoint: this.graphqlEndpoint,
+            });
+            const variables = {
+                name: "Accounts",
+                ...(driveId && { driveId }),
+            };
+            console.log("[WalletAccountService] Sending GraphQL request with variables:", variables);
+            const requestBody = {
+                query: `
+          mutation CreateAccountsDocument($name: String!, $driveId: String) {
+            Accounts_createDocument(name: $name, driveId: $driveId)
+          }
+        `,
+                variables,
+            };
+            console.log("[WalletAccountService] GraphQL request body:", JSON.stringify(requestBody, null, 2));
+            const response = await fetch(this.graphqlEndpoint, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(requestBody),
+            });
+            console.log("[WalletAccountService] Create Accounts document response status:", response.status);
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error("[WalletAccountService] GraphQL request failed:", {
+                    status: response.status,
+                    statusText: response.statusText,
+                    errorText,
+                });
+                throw new Error(`GraphQL request failed: ${response.status} - ${response.statusText} - ${errorText}`);
+            }
+            const result = (await response.json());
+            console.log("[WalletAccountService] Create Accounts document result:", result);
+            if (result.errors) {
+                console.error("[WalletAccountService] GraphQL errors:", result.errors);
+                throw new Error(result.errors[0]?.message || "GraphQL error");
+            }
+            const documentId = result.data?.Accounts_createDocument;
+            if (!documentId) {
+                throw new Error("Failed to create Accounts document - no document ID returned");
+            }
+            console.log("[WalletAccountService] Successfully created Accounts document:", documentId);
+            return {
+                success: true,
+                documentId,
+                message: "Created new Accounts document",
+            };
+        }
+        catch (error) {
+            const errorMsg = `Failed to create Accounts document: ${error instanceof Error ? error.message : "Unknown error"}`;
+            console.error("[WalletAccountService] Error creating Accounts document:", error);
+            return {
+                success: false,
+                message: errorMsg,
+            };
+        }
+    }
+    /**
+     * Find account in Accounts document or add it if it doesn't exist
+     */
+    async findOrAddAccount(accountsDocumentId, walletAddress, accountName) {
+        try {
+            // Try to get the Accounts document with retry mechanism
+            // (newly created documents might not be immediately available)
+            let accounts = [];
+            let retries = 3;
+            let lastError = null;
+            while (retries > 0) {
+                try {
+                    const getDocResponse = await fetch(this.graphqlEndpoint, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                            query: `
+                query GetAccountsDocument($docId: PHID!) {
+                  Accounts {
+                    getDocument(docId: $docId) {
+                      state {
+                        accounts {
+                          id
+                          account
+                          name
+                          accountTransactionsId
+                        }
+                      }
+                    }
+                  }
+                }
+              `,
+                            variables: {
+                                docId: accountsDocumentId,
+                            },
+                        }),
+                    });
+                    if (!getDocResponse.ok) {
+                        throw new Error(`Failed to get Accounts document: ${getDocResponse.status}`);
+                    }
+                    const getDocResult = (await getDocResponse.json());
+                    if (getDocResult.errors) {
+                        const errorMsg = getDocResult.errors[0]?.message ||
+                            "Failed to get Accounts document";
+                        // If document not found and we have retries left, wait and retry
+                        if (errorMsg.includes("not found") && retries > 1) {
+                            console.log(`[WalletAccountService] Document not found, retrying in 500ms... (${retries - 1} retries left)`);
+                            await new Promise((resolve) => setTimeout(resolve, 500));
+                            retries--;
+                            lastError = new Error(errorMsg);
+                            continue;
+                        }
+                        throw new Error(errorMsg);
+                    }
+                    accounts =
+                        getDocResult.data?.Accounts?.getDocument?.state?.accounts || [];
+                    break; // Success, exit retry loop
+                }
+                catch (error) {
+                    lastError = error instanceof Error ? error : new Error(String(error));
+                    if (retries > 1) {
+                        console.log(`[WalletAccountService] Error querying document, retrying in 500ms... (${retries - 1} retries left)`, lastError.message);
+                        await new Promise((resolve) => setTimeout(resolve, 500));
+                        retries--;
+                    }
+                    else {
+                        throw lastError;
+                    }
+                }
+            }
+            if (lastError && accounts.length === 0) {
+                throw lastError;
+            }
+            // Check if account already exists
+            const existingAccount = accounts.find((acc) => acc.account.toLowerCase() === walletAddress.toLowerCase());
+            if (existingAccount) {
+                console.log("[WalletAccountService] Account already exists:", existingAccount.id);
+                return {
+                    success: true,
+                    accountId: existingAccount.id,
+                    account: {
+                        id: existingAccount.id,
+                        account: existingAccount.account,
+                        name: existingAccount.name,
+                        budgetPath: null,
+                        accountTransactionsId: existingAccount.accountTransactionsId || null,
+                        chain: ["ethereum"],
+                        type: "External",
+                        owners: [],
+                        KycAmlStatus: null,
+                    },
+                    message: "Account already exists",
+                };
+            }
+            // Account doesn't exist, add it
+            console.log("[WalletAccountService] Account does not exist, adding new account");
+            const accountId = generateId();
+            const addAccountResponse = await fetch(this.graphqlEndpoint, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    query: `
+            mutation AddAccount($docId: PHID!, $input: Accounts_AddAccountInput!) {
+              Accounts_addAccount(docId: $docId, input: $input)
+            }
+          `,
+                    variables: {
+                        docId: accountsDocumentId,
+                        input: {
+                            id: accountId,
+                            account: walletAddress,
+                            name: accountName,
+                            chain: ["ethereum"],
+                        },
+                    },
+                }),
+            });
+            if (!addAccountResponse.ok) {
+                const errorText = await addAccountResponse.text();
+                throw new Error(`Failed to add account: ${addAccountResponse.status} - ${errorText}`);
+            }
+            const addAccountResult = (await addAccountResponse.json());
+            if (addAccountResult.errors) {
+                throw new Error(addAccountResult.errors[0]?.message || "Failed to add account");
+            }
+            // Ensure the mutation reports success
+            if (!addAccountResult.data?.Accounts_addAccount) {
+                throw new Error("Failed to add account - mutation returned falsy result");
+            }
+            console.log("[WalletAccountService] Account added successfully:", accountId);
+            // Give the drive a moment to process the new account state
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            const newAccount = {
+                id: accountId,
+                account: walletAddress,
+                name: accountName,
+                budgetPath: null,
+                accountTransactionsId: null,
+                chain: ["ethereum"],
+                type: "External",
+                owners: [],
+                KycAmlStatus: null,
+            };
+            return {
+                success: true,
+                accountId,
+                account: newAccount,
+                message: "Account added successfully",
+            };
+        }
+        catch (error) {
+            const errorMsg = `Failed to find or add account: ${error instanceof Error ? error.message : "Unknown error"}`;
+            console.error("[WalletAccountService] Error in findOrAddAccount:", error);
+            return {
+                success: false,
+                message: errorMsg,
+            };
+        }
+    }
+    /**
+     * Update existing Account Transactions document with latest transactions
+     */
+    async updateAccountTransactions(documentId, address) {
+        try {
+            await accountTransactionsService.syncTransactionsForDocument(documentId, address);
+        }
+        catch (error) {
+            console.error("Failed to update account transactions:", error);
+            // Don't throw - this is not critical for wallet addition
+        }
+    }
+}
+// Export singleton instance
+export const walletAccountService = new WalletAccountService();

package/dist/editors/hooks/useAccountTransactionsDocument.d.ts

@@ -0,0 +1,4 @@
+import type { AccountTransactionsAction, AccountTransactionsDocument } from "../../document-models/account-transactions/index.js";
+export declare function useAccountTransactionsDocument(documentId: string | null | undefined): never[] | [AccountTransactionsDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<AccountTransactionsAction>];
+export declare function useSelectedAccountTransactionsDocument(): never[] | [AccountTransactionsDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<AccountTransactionsAction>];
+//# sourceMappingURL=useAccountTransactionsDocument.d.ts.map

package/dist/editors/hooks/useAccountTransactionsDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccountTransactionsDocument.d.ts","sourceRoot":"","sources":["../../../editors/hooks/useAccountTransactionsDocument.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,yBAAyB,EACzB,2BAA2B,EAC5B,MAAM,qDAAqD,CAAC;AAE7D,wBAAgB,8BAA8B,CAC5C,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,iIAMtC;AAED,wBAAgB,sCAAsC,kIAGrD"}

package/dist/editors/hooks/useAccountTransactionsDocument.js

@@ -0,0 +1,8 @@
+import { useDocumentOfType, useSelectedDocumentId, } from "@powerhousedao/reactor-browser";
+export function useAccountTransactionsDocument(documentId) {
+    return useDocumentOfType(documentId, "powerhouse/account-transactions");
+}
+export function useSelectedAccountTransactionsDocument() {
+    const selectedDocumentId = useSelectedDocumentId();
+    return useAccountTransactionsDocument(selectedDocumentId);
+}

package/dist/editors/hooks/useAccountsDocument.d.ts

@@ -0,0 +1,4 @@
+import type { AccountsDocument } from "../../document-models/accounts/index.js";
+export declare function useAccountsDocument(documentId: string | null | undefined): never[] | [AccountsDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<import("../../document-models/accounts/index.js").AccountsAccountsAction>];
+export declare function useSelectedAccountsDocument(): never[] | [AccountsDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<import("../../document-models/accounts/index.js").AccountsAccountsAction>];
+//# sourceMappingURL=useAccountsDocument.d.ts.map

package/dist/editors/hooks/useAccountsDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccountsDocument.d.ts","sourceRoot":"","sources":["../../../editors/hooks/useAccountsDocument.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,gBAAgB,EACjB,MAAM,yCAAyC,CAAC;AAEjD,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,qKAKxE;AAED,wBAAgB,2BAA2B,sKAG1C"}

package/dist/editors/hooks/useAccountsDocument.js

@@ -0,0 +1,8 @@
+import { useDocumentOfType, useSelectedDocumentId, } from "@powerhousedao/reactor-browser";
+export function useAccountsDocument(documentId) {
+    return useDocumentOfType(documentId, "powerhouse/accounts");
+}
+export function useSelectedAccountsDocument() {
+    const selectedDocumentId = useSelectedDocumentId();
+    return useAccountsDocument(selectedDocumentId);
+}

package/dist/editors/hooks/useSnapshotReportDocument.d.ts

@@ -0,0 +1,4 @@
+import type { SnapshotReportAction, SnapshotReportDocument } from "../../document-models/snapshot-report/index.js";
+export declare function useSnapshotReportDocument(documentId: string | null | undefined): never[] | [SnapshotReportDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<SnapshotReportAction>];
+export declare function useSelectedSnapshotReportDocument(): never[] | [SnapshotReportDocument, import("@powerhousedao/reactor-browser").DocumentDispatch<SnapshotReportAction>];
+//# sourceMappingURL=useSnapshotReportDocument.d.ts.map

package/dist/editors/hooks/useSnapshotReportDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnapshotReportDocument.d.ts","sourceRoot":"","sources":["../../../editors/hooks/useSnapshotReportDocument.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,gDAAgD,CAAC;AAExD,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,uHAMtC;AAED,wBAAgB,iCAAiC,wHAGhD"}

package/dist/editors/hooks/useSnapshotReportDocument.js

@@ -0,0 +1,8 @@
+import { useDocumentOfType, useSelectedDocumentId, } from "@powerhousedao/reactor-browser";
+export function useSnapshotReportDocument(documentId) {
+    return useDocumentOfType(documentId, "powerhouse/snapshot-report");
+}
+export function useSelectedSnapshotReportDocument() {
+    const selectedDocumentId = useSelectedDocumentId();
+    return useSnapshotReportDocument(selectedDocumentId);
+}

package/dist/editors/index.d.ts

@@ -1,6 +1,11 @@
-export { Invoice } from "./invoice/module.js";
+export { AccountTransactionsEditor } from "./account-transactions-editor/module.js";
+export { AccountsEditor } from "./accounts-editor/module.js";
 export { BillingStatement } from "./billing-statement/module.js";
+export { BuilderTeamAdmin } from "./builder-team-admin/module.js";
 export { ContributorBilling } from "./contributor-billing/module.js";
-export { Integrations } from "./integrations/module.js";
+export { Invoice } from "./invoice/module.js";
+export { SnapshotReportEditor } from "./snapshot-report-editor/module.js";
 export { ExpenseReport } from "./expense-report/module.js";
+export { ServiceSubscriptionsEditor } from "./service-subscriptions-editor/module.js";
+export { ServiceOfferingEditor } from "./service-offering-editor/module.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/editors/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../editors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../editors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/editors/index.js

@@ -1,5 +1,10 @@
-export { Invoice } from "./invoice/module.js";
+export { AccountTransactionsEditor } from "./account-transactions-editor/module.js";
+export { AccountsEditor } from "./accounts-editor/module.js";
 export { BillingStatement } from "./billing-statement/module.js";
+export { BuilderTeamAdmin } from "./builder-team-admin/module.js";
 export { ContributorBilling } from "./contributor-billing/module.js";
-export { Integrations } from "./integrations/module.js";
+export { Invoice } from "./invoice/module.js";
+export { SnapshotReportEditor } from "./snapshot-report-editor/module.js";
 export { ExpenseReport } from "./expense-report/module.js";
+export { ServiceSubscriptionsEditor } from "./service-subscriptions-editor/module.js";
+export { ServiceOfferingEditor } from "./service-offering-editor/module.js";

package/dist/editors/invoice/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/invoice/editor.tsx"],"names":[],"mappings":"AAwEA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAiuC7B"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/invoice/editor.tsx"],"names":[],"mappings":"AAwEA,MAAM,CAAC,OAAO,UAAU,MAAM,4CA6hC7B"}

package/dist/editors/invoice/editor.js

@@ -58,8 +58,6 @@ export default function Editor() {
     // ALL HOOKS MUST BE CALLED BEFORE ANY CONDITIONAL RETURNS
     // Get the parent folder node for the currently selected node
     const parentFolder = useParentFolderForSelectedNode();
-    // Mobile header menu state
-    const [mobileHeaderOpen, setMobileHeaderOpen] = useState(false);
     // Initialize hooks with safe defaults that don't depend on state being available
     const [fiatMode, setFiatMode] = useState(false);
     const [uploadDropdownOpen, setUploadDropdownOpen] = useState(false);
@@ -417,39 +415,25 @@ export default function Editor() {
     function handleClose() {
         setSelectedNode(parentFolder);
     }
-    return (_jsxs("div", { children: [_jsx(DocumentToolbar, { document: doc, onClose: handleClose }), _jsxs("div", { className: "container mx-auto mt-4", children: [_jsx(ToastContainer, { position: "bottom-right", autoClose: 5000, hideProgressBar: false, newestOnTop: false, closeOnClick: false, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: "light" }), _jsxs("div", { className: "mb-6", children: [_jsxs("div", { className: "hidden md:flex flex-row items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-row items-center gap-4 flex-wrap", children: [_jsx("h1", { className: "text-3xl font-bold whitespace-nowrap", children: "Invoice" }), _jsx(InputField, { placeholder: "Add invoice number", value: invoiceNoInput, handleInputChange: (e) => setInvoiceNoInput(e.target.value), onBlur: (e) => {
+    return (_jsxs("div", { className: "w-full min-h-full flex flex-col", children: [_jsx(DocumentToolbar, { document: doc, onClose: handleClose }), _jsxs("div", { className: "flex-1 max-w-7xl mx-auto w-full mt-4 px-4 pb-8", children: [_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: "mb-6", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("h1", { className: "text-3xl font-bold whitespace-nowrap", children: "Invoice" }), _jsx("div", { className: "min-w-[200px]", children: _jsx(InputField, { placeholder: "Add invoice number", value: invoiceNoInput, handleInputChange: (e) => setInvoiceNoInput(e.target.value), onBlur: (e) => {
                                                     const newValue = e.target.value;
                                                     if (newValue !== state.invoiceNo) {
                                                         dispatch(actions.editInvoice({ invoiceNo: newValue }));
                                                     }
-                                                }, input: invoiceNoInput, validation: invoiceValidation }), _jsxs("div", { className: "relative", ref: uploadDropdownRef, children: [_jsxs("button", { onClick: () => setUploadDropdownOpen(!uploadDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", disabled: isPdfLoading, children: [isPdfLoading ? "Processing..." : "Upload File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), uploadDropdownOpen && !isPdfLoading && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsxs("label", { className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: ["Upload UBL", _jsx("input", { accept: ".xml", className: "hidden", onChange: (e) => {
-                                                                                handleFileUpload(e);
-                                                                                setUploadDropdownOpen(false);
-                                                                            }, type: "file" })] }), _jsx(PDFUploader, { dispatch: dispatch, changeDropdownOpen: setUploadDropdownOpen })] }) }))] }), _jsxs("div", { className: "relative", ref: exportDropdownRef, children: [_jsxs("button", { onClick: () => setExportDropdownOpen(!exportDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-black hover:bg-gray-800 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", children: ["Export File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), exportDropdownOpen && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsx("button", { onClick: () => {
-                                                                        handleExportUBL();
-                                                                        setExportDropdownOpen(false);
-                                                                    }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export UBL" }), _jsx("button", { onClick: () => {
-                                                                        handleExportPDF();
-                                                                        setExportDropdownOpen(false);
-                                                                    }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export PDF" })] }) }))] })] }), _jsxs("div", { className: "flex flex-row items-center gap-4", children: [_jsx(CurrencyForm, { currency: state.currency, handleInputChange: (e) => {
-                                                    handleCurrencyChange(e.target.value);
-                                                }, validation: currencyValidation }), _jsx(SelectField, { options: STATUS_OPTIONS, value: state.status, onChange: (value) => handleStatusChange(value) })] })] }), _jsxs("div", { className: "md:hidden", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "Invoice" }), _jsx("button", { onClick: () => setMobileHeaderOpen(!mobileHeaderOpen), className: "inline-flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer", "aria-label": "Toggle invoice settings", children: mobileHeaderOpen ? (_jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })) : (_jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" }) })) })] }), !mobileHeaderOpen && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 mb-2", children: [_jsx("span", { className: "font-medium", children: state.invoiceNo || "No invoice #" }), _jsx("span", { children: "\u2022" }), _jsx("span", { children: state.currency }), _jsx("span", { children: "\u2022" }), _jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800", children: state.status })] })), mobileHeaderOpen && (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg p-4 space-y-4 shadow-sm", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Invoice Number" }), _jsx(InputField, { placeholder: "Add invoice number", value: invoiceNoInput, handleInputChange: (e) => setInvoiceNoInput(e.target.value), onBlur: (e) => {
-                                                            const newValue = e.target.value;
-                                                            if (newValue !== state.invoiceNo) {
-                                                                dispatch(actions.editInvoice({ invoiceNo: newValue }));
-                                                            }
-                                                        }, input: invoiceNoInput, validation: invoiceValidation })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Currency" }), _jsx(CurrencyForm, { currency: state.currency, handleInputChange: (e) => {
-                                                            handleCurrencyChange(e.target.value);
-                                                        }, validation: currencyValidation })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Status" }), _jsx(SelectField, { options: STATUS_OPTIONS, value: state.status, onChange: (value) => handleStatusChange(value) })] }), _jsxs("div", { className: "space-y-2 pt-2 border-t border-gray-200", children: [_jsxs("div", { className: "relative", ref: uploadDropdownRef, children: [_jsxs("button", { onClick: () => setUploadDropdownOpen(!uploadDropdownOpen), className: "w-full inline-flex items-center justify-center h-10 px-4 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors cursor-pointer", disabled: isPdfLoading, children: [isPdfLoading ? "Processing..." : "Upload File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), uploadDropdownOpen && !isPdfLoading && (_jsx("div", { className: "absolute z-10 mt-1 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", children: [_jsxs("label", { className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: ["Upload UBL", _jsx("input", { accept: ".xml", className: "hidden", onChange: (e) => {
-                                                                                        handleFileUpload(e);
-                                                                                        setUploadDropdownOpen(false);
-                                                                                    }, type: "file" })] }), _jsx(PDFUploader, { dispatch: dispatch, changeDropdownOpen: setUploadDropdownOpen })] }) }))] }), _jsxs("div", { className: "relative", ref: exportDropdownRef, children: [_jsxs("button", { onClick: () => setExportDropdownOpen(!exportDropdownOpen), className: "w-full inline-flex items-center justify-center h-10 px-4 rounded bg-black hover:bg-gray-800 text-white font-medium transition-colors cursor-pointer", children: ["Export File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), exportDropdownOpen && (_jsx("div", { className: "absolute z-10 mt-1 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", children: [_jsx("button", { onClick: () => {
-                                                                                handleExportUBL();
-                                                                                setExportDropdownOpen(false);
-                                                                            }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export UBL" }), _jsx("button", { onClick: () => {
-                                                                                handleExportPDF();
-                                                                                setExportDropdownOpen(false);
-                                                                            }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export PDF" })] }) }))] })] })] }))] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-0 lg:gap-4", children: [_jsxs("div", { className: "border-0 lg:border lg:border-gray-200 lg:rounded-lg p-0 lg:p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Issuer" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Issue Date:" }), _jsx(DatePicker, { name: "issueDate", className: String.raw `w-full p-0 bg-white`, onChange: (e) => {
+                                                }, input: invoiceNoInput, validation: invoiceValidation }) }), _jsxs("div", { className: "relative", ref: uploadDropdownRef, children: [_jsxs("button", { onClick: () => setUploadDropdownOpen(!uploadDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-blue-500 hover:bg-blue-600 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", disabled: isPdfLoading, children: [isPdfLoading ? "Processing..." : "Upload File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), uploadDropdownOpen && !isPdfLoading && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsxs("label", { className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: ["Upload UBL", _jsx("input", { accept: ".xml", className: "hidden", onChange: (e) => {
+                                                                            handleFileUpload(e);
+                                                                            setUploadDropdownOpen(false);
+                                                                        }, type: "file" })] }), _jsx(PDFUploader, { dispatch: dispatch, changeDropdownOpen: setUploadDropdownOpen })] }) }))] }), _jsxs("div", { className: "relative", ref: exportDropdownRef, children: [_jsxs("button", { onClick: () => setExportDropdownOpen(!exportDropdownOpen), className: "inline-flex items-center h-10 px-4 rounded bg-black hover:bg-gray-800 text-white font-medium transition-colors whitespace-nowrap cursor-pointer", children: ["Export File", _jsx("svg", { className: "w-4 h-4 ml-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })] }), exportDropdownOpen && (_jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", children: [_jsx("button", { onClick: () => {
+                                                                    handleExportUBL();
+                                                                    setExportDropdownOpen(false);
+                                                                }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export UBL" }), _jsx("button", { onClick: () => {
+                                                                    handleExportPDF();
+                                                                    setExportDropdownOpen(false);
+                                                                }, className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer", children: "Export PDF" })] }) }))] })] }), _jsxs("div", { className: "flex flex-row items-center gap-4", children: [_jsx(CurrencyForm, { currency: state.currency, handleInputChange: (e) => {
+                                                handleCurrencyChange(e.target.value);
+                                            }, validation: currencyValidation }), _jsx(SelectField, { options: STATUS_OPTIONS, value: state.status, onChange: (value) => handleStatusChange(value) })] })] }) }), _jsxs("div", { className: "grid gap-6", style: {
+                            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 400px), 1fr))",
+                        }, children: [_jsxs("div", { className: "border border-gray-200 rounded-lg p-4 min-w-0", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Issuer" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Issue Date:" }), _jsx(DatePicker, { name: "issueDate", className: String.raw `w-full p-0 bg-white`, onChange: (e) => {
                                                             const dateOnly = e.target.value.split("T")[0];
                                                             const datetime = dateToDatetime(dateOnly);
                                                             dispatch(actions.editInvoice({
@@ -461,7 +445,7 @@ export default function Editor() {
                                                             if (datetime !== state.dateDelivered) {
                                                                 dispatch(actions.editInvoice({ dateDelivered: datetime }));
                                                             }
-                                                        }, value: datetimeToDate(state.dateDelivered) })] })] }), _jsx(LegalEntityForm, { legalEntity: state.issuer, onChangeInfo: (input) => dispatch(actions.editIssuer(input)), onChangeBank: (input) => dispatch(actions.editIssuerBank(input)), onChangeWallet: (input) => dispatch(actions.editIssuerWallet(input)), basicInfoDisabled: false, bankDisabled: !fiatMode, walletDisabled: fiatMode, currency: state.currency, status: state.status, walletvalidation: walletValidation, mainCountryValidation: mainCountryValidation, bankCountryValidation: bankCountryValidation, ibanvalidation: ibanValidation, bicvalidation: bicValidation, banknamevalidation: bankNameValidation, streetaddressvalidation: streetAddressValidation, cityvalidation: cityValidation, postalcodevalidation: postalCodeValidation, payeremailvalidation: payerEmailValidation, routingNumbervalidation: routingNumberValidation, accountNumbervalidation: accountNumberValidation })] }), _jsxs("div", { className: "border-0 lg:border lg:border-gray-200 lg:rounded-lg p-0 lg:p-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Payer" }), _jsxs("div", { className: "mb-2 w-64", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Due Date:" }), _jsx(DatePicker, { name: "dateDue", className: String.raw `w-full p-0 bg-white`, onChange: (e) => {
+                                                        }, value: datetimeToDate(state.dateDelivered) })] })] }), _jsx(LegalEntityForm, { legalEntity: state.issuer, onChangeInfo: (input) => dispatch(actions.editIssuer(input)), onChangeBank: (input) => dispatch(actions.editIssuerBank(input)), onChangeWallet: (input) => dispatch(actions.editIssuerWallet(input)), basicInfoDisabled: false, bankDisabled: !fiatMode, walletDisabled: fiatMode, currency: state.currency, status: state.status, walletvalidation: walletValidation, mainCountryValidation: mainCountryValidation, bankCountryValidation: bankCountryValidation, ibanvalidation: ibanValidation, bicvalidation: bicValidation, banknamevalidation: bankNameValidation, streetaddressvalidation: streetAddressValidation, cityvalidation: cityValidation, postalcodevalidation: postalCodeValidation, payeremailvalidation: payerEmailValidation, routingNumbervalidation: routingNumberValidation, accountNumbervalidation: accountNumberValidation })] }), _jsxs("div", { className: "border border-gray-200 rounded-lg p-4 min-w-0", children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Payer" }), _jsxs("div", { className: "mb-2 w-64", children: [_jsx("label", { className: "block mb-1 text-sm", children: "Due Date:" }), _jsx(DatePicker, { name: "dateDue", className: String.raw `w-full p-0 bg-white`, onChange: (e) => {
                                                     const dateOnly = e.target.value.split("T")[0];
                                                     const datetime = dateToDatetime(dateOnly);
                                                     dispatch(actions.editInvoice({
@@ -473,14 +457,16 @@ export default function Editor() {
                             })), onAddItem: (item) => dispatch(actions.addLineItem(item)), onDeleteItem: (input) => dispatch(actions.deleteLineItem(input)), onUpdateCurrency: (input) => {
                                 setFiatMode(input.currency !== "USDS");
                                 dispatch(actions.editInvoice(input));
-                            }, onUpdateItem: (item) => dispatch(actions.editLineItem(item)), onEditingItemChange: setEditingItemValues, dispatch: dispatch, paymentAccounts: state.invoiceTags || [] }) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx("div", { className: "col-span-1", children: _jsx("div", { className: "", children: _jsx(Textarea, { label: "Notes", placeholder: "Add notes", autoExpand: true, rows: 4, multiline: true, value: notes, onBlur: (e) => {
+                            }, onUpdateItem: (item) => dispatch(actions.editLineItem(item)), onEditingItemChange: setEditingItemValues, dispatch: dispatch, paymentAccounts: state.invoiceTags || [] }) }), _jsxs("div", { className: "grid gap-4", style: {
+                            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 300px), 1fr))",
+                        }, children: [_jsx("div", { children: _jsx("div", { className: "", children: _jsx(Textarea, { label: "Notes", placeholder: "Add notes", autoExpand: true, rows: 4, multiline: true, value: notes, onBlur: (e) => {
                                             const newValue = e.target.value;
                                             if (newValue !== state.notes) {
                                                 dispatch(actions.editInvoice({ notes: newValue }));
                                             }
                                         }, onChange: (e) => {
                                             setNotes(e.target.value);
-                                        }, className: "p-2 mb-4" }) }) }), _jsx("div", { className: "col-span-1", children: _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-6 shadow-sm h-32", children: _jsxs("div", { className: "", children: [_jsxs("div", { className: "flex justify-between text-gray-700", children: [_jsx("span", { className: "font-medium", children: "Subtotal (excl. tax):" }), _jsxs("span", { children: [formatNumber(itemsTotalTaxExcl), " ", state.currency] })] }), _jsxs("div", { className: "flex justify-between border-t border-gray-200 pt-6 text-lg font-bold text-gray-900", children: [_jsx("span", { children: "Total (incl. tax):" }), _jsxs("span", { children: [formatNumber(itemsTotalTaxIncl), " ", state.currency] })] })] }) }) })] }), activeModal && (_jsx(ConfirmationModal, { open: !!activeModal, header: modalHeaders[activeModal], onCancel: () => setActiveModal(null), onContinue: () => {
+                                        }, className: "p-2 mb-4" }) }) }), _jsx("div", { children: _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-6 shadow-sm h-32", children: _jsxs("div", { className: "", children: [_jsxs("div", { className: "flex justify-between text-gray-700", children: [_jsx("span", { className: "font-medium", children: "Subtotal (excl. tax):" }), _jsxs("span", { children: [formatNumber(itemsTotalTaxExcl), " ", state.currency] })] }), _jsxs("div", { className: "flex justify-between border-t border-gray-200 pt-6 text-lg font-bold text-gray-900", children: [_jsx("span", { children: "Total (incl. tax):" }), _jsxs("span", { children: [formatNumber(itemsTotalTaxIncl), " ", state.currency] })] })] }) }) })] }), activeModal && (_jsx(ConfirmationModal, { open: !!activeModal, header: modalHeaders[activeModal], onCancel: () => setActiveModal(null), onContinue: () => {
                             if (activeModal === "issueInvoice") {
                                 // Ensure dateIssued is a valid datetime string for the issue action
                                 // The issue action requires a non-null string, so use current date if not set