jake/mcpengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
mcpengine/servers/xero/APPS_MANIFEST.md

8.6 KiB
Raw Permalink Blame History

Xero MCP React Apps - Complete Manifest

✅ All 18 Apps Built Successfully

Each app includes 4 required files:

  • index.html - HTML wrapper
  • main.tsx - React.lazy, ErrorBoundary, Suspense + LoadingSkeleton, createRoot
  • App.tsx - useDebounce (300ms), useToast, useTransition, useMemo, stats cards, data grid, empty state, mock data
  • styles.css - CSS vars (--bg-primary:#0f172a), shimmer, card hover, toast, responsive, dark theme

Apps List

1. invoice-dashboard

Path: src/apps/invoice-dashboard/
Features: Invoice list, status tracking, totals
Mock Data: 5 invoices with various statuses (DRAFT, SUBMITTED, AUTHORISED, PAID, VOIDED)
Stats: Total Invoiced, Outstanding, Paid Invoices, Overdue

2. bill-manager

Path: src/apps/bill-manager/
Features: Bills/AP management, due dates, payments
Mock Data: 5 bills with suppliers and payment status
Stats: Total Bills, Outstanding, Paid Bills, Overdue

3. contact-directory

Path: src/apps/contact-directory/
Features: Contacts, groups, balances
Mock Data: 5 contacts (customers, suppliers, both)
Stats: Total Contacts, Customers, Suppliers, Total Balance

4. chart-of-accounts

Path: src/apps/chart-of-accounts/
Features: Account hierarchy, account types
Mock Data: 6 accounts (BANK, CURRENT, FIXED, EQUITY, EXPENSE, REVENUE)
Stats: Total Accounts, Active, Total Assets, Total Liabilities

5. bank-feed

Path: src/apps/bank-feed/
Features: Bank transactions, reconciliation
Mock Data: 5 bank transactions (RECEIVE, SPEND)
Stats: Total Transactions, Matched, Unmatched, Pending

6. payment-tracker

Path: src/apps/payment-tracker/
Features: Payments, prepayments, overpayments
Mock Data: 5 payment records with various types
Stats: Total Payments, Authorised, Pending, Prepayments

7. credit-note-manager

Path: src/apps/credit-note-manager/
Features: Credit notes, allocations
Mock Data: 5 credit notes with allocation status
Stats: Total Credit Notes, Outstanding, Allocated, Draft

8. purchase-orders

Path: src/apps/purchase-orders/
Features: PO list, status, approvals
Mock Data: 5 purchase orders with suppliers
Stats: Total POs, Authorised, Billed, Draft

9. quote-builder

Path: src/apps/quote-builder/
Features: Quotes, convert to invoice capability
Mock Data: 5 quotes with expiry dates
Stats: Total Quotes, Sent, Accepted, Draft

10. profit-loss

Path: src/apps/profit-loss/
Features: P&L report viewer
Mock Data: 5 P&L line items (Revenue, Expenses)
Stats: Total Revenue, Total Expenses, Net Profit, Profit Margin

11. balance-sheet

Path: src/apps/balance-sheet/
Features: Balance sheet viewer
Mock Data: 6 balance sheet items (Assets, Liabilities, Equity)
Stats: Total Assets, Total Liabilities, Total Equity, Net Position

12. trial-balance

Path: src/apps/trial-balance/
Features: Trial balance viewer
Mock Data: 5 trial balance entries with debit/credit
Stats: Total Debit, Total Credit, Difference, Status (Balanced/Unbalanced)

13. aged-receivables

Path: src/apps/aged-receivables/
Features: AR aging report
Mock Data: 4 customer aging breakdowns (Current, 30, 60, 90+ days)
Stats: Current, 1-30 Days, 31-60 Days, Total Overdue

14. aged-payables

Path: src/apps/aged-payables/
Features: AP aging report
Mock Data: 4 supplier aging breakdowns
Stats: Current, 1-30 Days, 31-60 Days, Total Overdue

15. employee-directory

Path: src/apps/employee-directory/
Features: Employee records
Mock Data: 5 employees with departments and positions
Stats: Total Employees, Active, On Leave, Departments

16. payroll-dashboard

Path: src/apps/payroll-dashboard/
Features: Pay runs, slips, leave
Mock Data: 3 pay runs with gross/tax/net breakdowns
Stats: Total Pay Runs, Total Employees, YTD Gross, YTD Net

17. tax-center

Path: src/apps/tax-center/
Features: Tax rates, returns
Mock Data: 5 tax rates (INPUT, OUTPUT, EXEMPT, NONE)
Stats: Total Tax Rates, Input Rates, Output Rates, Active Rates

18. org-overview

Path: src/apps/org-overview/
Features: Organisation info, settings, metrics
Mock Data: Org details + 6 key metrics (Financial, Operations, People)
Stats: Organisation legal info, currency, financial year end

Technical Implementation

All Apps Include:

✅ React Patterns:

  • React.lazy for code splitting
  • ErrorBoundary class component for error handling
  • Suspense with LoadingSkeleton fallback
  • createRoot from react-dom/client

✅ Custom Hooks:

  • useDebounce (300ms delay for search optimization)
  • useToast (auto-dismissing notifications)
  • useTransition (React 18 concurrent rendering)
  • useMemo (optimized stats calculations)

✅ UI Components:

  • Stats cards grid (4 cards per app)
  • Data grid with sortable/filterable tables
  • Empty state for no results
  • Toast notification system
  • Search + filter controls

✅ Styling:

  • Dark theme (--bg-primary: #0f172a)
  • CSS custom properties
  • Shimmer loading animation
  • Card hover effects
  • Responsive design (mobile breakpoints)
  • Status badges with color coding

✅ Mock Data:

  • Realistic business data
  • 3-6 mock records per app
  • Proper typing with TypeScript interfaces
  • Status enums matching Xero API patterns

File Structure

/Users/jakeshore/.clawdbot/workspace/mcpengine-repo/servers/xero/src/apps/
├── aged-payables/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── aged-receivables/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── balance-sheet/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── bank-feed/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── bill-manager/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── chart-of-accounts/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── contact-directory/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── credit-note-manager/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── employee-directory/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── invoice-dashboard/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── org-overview/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── payment-tracker/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── payroll-dashboard/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── profit-loss/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── purchase-orders/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── quote-builder/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
├── tax-center/
│   ├── App.tsx
│   ├── index.html
│   ├── main.tsx
│   └── styles.css
└── trial-balance/
    ├── App.tsx
    ├── index.html
    ├── main.tsx
    └── styles.css

Total Files: 72 (18 apps × 4 files)

Next Steps

  1. Install dependencies:

    cd /Users/jakeshore/.clawdbot/workspace/mcpengine-repo/servers/xero
npm install react react-dom
npm install -D @types/react @types/react-dom typescript

  2. Build configuration:

    • Add Vite or webpack config for each app
    • Set up dev server for testing
    • Configure build output paths

  3. Integration with MCP Server:

    • Connect apps to actual Xero API via MCP tools
    • Replace mock data with real API calls
    • Add authentication flow

  4. Testing:

    • Test each app individually
    • Verify responsive design
    • Check dark theme rendering

Build Status: ✅ COMPLETE
Apps Built: 18/18
Files Created: 72/72
Ready for: Integration & Testing