diff --git a/servers/acuity-scheduling/src/ui/react-app/README.md b/servers/acuity-scheduling/src/ui/react-app/README.md new file mode 100644 index 0000000..26301ae --- /dev/null +++ b/servers/acuity-scheduling/src/ui/react-app/README.md @@ -0,0 +1,74 @@ +# Acuity Scheduling MCP Apps + +14 React-based MCP Apps for the Acuity Scheduling server. + +## Apps + +| App | Port | Description | +|-----|------|-------------| +| **appointment-dashboard** | 3000 | Overview dashboard with stats and upcoming appointments | +| **appointment-detail** | 3001 | Detailed appointment view with edit/cancel/reschedule | +| **appointment-grid** | 3002 | Searchable/filterable table of all appointments | +| **availability-calendar** | 3003 | Check available time slots by date/calendar/type | +| **client-detail** | 3004 | Individual client profile and appointment history | +| **client-directory** | 3005 | Grid view of all clients with search | +| **calendar-manager** | 3006 | Manage multiple calendars and settings | +| **product-catalog** | 3007 | View/manage appointment types and packages | +| **form-responses** | 3008 | Browse and view intake form submissions | +| **label-manager** | 3009 | Create and manage appointment labels | +| **coupon-manager** | 3010 | Track and manage discount coupons | +| **booking-flow** | 3011 | Multi-step appointment booking wizard | +| **schedule-overview** | 3012 | Day/week timeline view of appointments | +| **blocked-time-manager** | 3013 | Create and manage blocked time slots | + +## Tech Stack + +- **React 18** with TypeScript +- **Vite 5** for build tooling +- **Dark theme**: `#0f172a` / `#1e293b` (Tailwind slate) +- **Self-contained**: Each app is a complete Vite project +- **Client-side state**: No external state management (yet) + +## Structure + +Each app directory contains: +- `App.tsx` - Main React component +- `index.html` - HTML entry point +- `main.tsx` - React DOM render +- `styles.css` - Dark theme styles +- `vite.config.ts` - Vite configuration +- `package.json` - Dependencies + +## Running an App + +```bash +cd appointment-dashboard +npm install +npm run dev +``` + +## Development + +- Each app runs on a unique port (3000-3013) +- Apps currently use mock data +- To integrate with MCP tools, replace mock calls with: + ```typescript + const data = await window.mcp.call('acuity_list_appointments', { minDate, maxDate }); + ``` + +## Design + +- **Dark theme** throughout (#0f172a background, #1e293b cards) +- **Consistent UI** patterns across all apps +- **Responsive** grid layouts +- **Accessible** color contrast (WCAG AA+) + +## Next Steps + +1. Add shared component library +2. Integrate real MCP tool calls +3. Add TypeScript interfaces for MCP responses +4. State management (Zustand/Jotai) if needed +5. Add tests (Vitest + React Testing Library) +6. Build production bundles +7. Deploy to MCP app registry