Prompt for Vercel.ai (or similar GenAI UI tool): Build an interactive proof-of-concept (POC) web app for a finance automation platform called ZenStatement, I need to end-to-end working flow. The app should support four modules: Primary color:#377e7f

⸻

1️⃣ QuickBooks Sync (COA, Trial Balance, Journal Entries)

Goal: Sync financial data from QuickBooks to ZenStatement for automated workflows.

Screens/UI Components: • QuickBooks Connection UI with: • “Connect to QuickBooks” (OAuth login button) • Last Sync: [Date/Time] • Manual Sync button • Sync Status Indicator (success/failure + date) • Table for Chart of Accounts (COA) & Trial Balance: • Account Name, Account Type (Asset, Liability, etc.), Account Code, Currency, Balance (YTD, MTD), Sync Frequency (Daily / Weekly / On-Demand) • Journal Entries Table: • Entry ID, Description, Debit Amount, Credit Amount, Sync Status (Synced / Pending) • Filters: Date Range, Status

Flow: 1. User clicks “Connect to QuickBooks” → OAuth 2. System auto-syncs COA, Trial Balance, and Journal Entries 3. User can filter, view, and manually re-sync entries

⸻

2️⃣ Financial Close Process (E-commerce Specific)

Goal: Automate revenue and expense recognition for eCommerce companies.

Screens/UI Components: • Revenue Accrual UI: • Form: Select Sales Source (OMS, Shopify, Amazon), Expected Settlement Period (Daily/Weekly/Bi-weekly), Accrual Method (Sales-Based/Percentage Completion) • Table: Order ID, Sales Amount, Expected Collection Date, Accrual Status • Expense Provision UI: • Form: Select Cost Type (Logistics, PG Fees), Upload Rate Card (CSV), Auto-Compute vs Invoice Toggle • Table: Vendor Name, Cost Type, Provisioned Amount, Actual Charged, Variance % • Financial Close Checklist: • Checklist: Revenue Accrual, Expense Provision, Bank Reconciliation, AR/AP Aging • Status Tags (Completed, Pending, Issue Detected), Final Review Button

Flow: 1. User defines revenue/expense rules 2. System accrues/provisions entries automatically 3. Finance team uses checklist to complete monthly close

⸻

3️⃣ Financial & Management Reporting

Goal: Enable real-time financial visibility with automated variance analysis.

Screens/UI Components: • Financial Statements Tabs: P&L, Balance Sheet, Cash Flow • Table Drill-Downs: Account Name, Current Month, Prior Month, Variance % • Variance Analysis UI: • Form: Select Report Type (Revenue/Expense/Margin), Comparison Period (MTD/QTD/YTD) • Table: Category, Expected vs Actual, Variance Amount, % Variance

Flow: 1. User selects report → Data auto-loads 2. Highlights major variances → Drill down for root cause

⸻

4️⃣ Talk to the Data – CFO Query Assistant

Goal: Let users ask natural language finance questions and receive structured insights.

Screens/UI Components: • Chat UI with Input Box and Suggested Questions (Buttons): • “Show revenue vs. settlement trends” • “Breakdown logistics expenses by provider” • “Last 6 months’ cash flow projection” • Query Result UI: • Chart/Table based on query • Download & Share options

Flow: 1. User asks a finance question 2. AI processes data and responds with tables/graphs 3. User can export results

---

🛠 Notes: • Use modular component design for reuse. • Ensure status indicators and filters work dynamically. • Focus on form-table-review flow pattern across modules. • Prioritize drill-down & export options in reporting. • Suggest keeping layout consistent (sidebar navigation, tabbed sections, etc.).