# 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
