acuity-scheduling: Add React apps README
This commit is contained in:
parent
1d25243353
commit
dfd9620d30
74
servers/acuity-scheduling/src/ui/react-app/README.md
Normal file
74
servers/acuity-scheduling/src/ui/react-app/README.md
Normal file
@ -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
|
||||||
Loading…
x
Reference in New Issue
Block a user