294 lines
8.6 KiB
Markdown
294 lines
8.6 KiB
Markdown
# 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:**
|
||
```bash
|
||
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
|