f8e0b3246f
- Full API client with Basic Auth and OAuth2 support - 40+ tools across 10 categories (appointments, availability, clients, calendars, products, forms, labels, webhooks, coupons, blocks) - 14 interactive React-based MCP apps for rich UI experiences - Comprehensive error handling and pagination - TypeScript implementation with full type definitions - Complete documentation and examples
146 lines
5.5 KiB
TypeScript
146 lines
5.5 KiB
TypeScript
export default `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar Manager</title>
|
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
<style>
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; }
|
|
.container { max-width: 1000px; margin: 0 auto; }
|
|
h1 { color: #333; margin-bottom: 20px; }
|
|
.toolbar { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; display: flex; justify-content: space-between; }
|
|
button { padding: 10px 20px; background: #4F46E5; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
|
|
button:hover { background: #4338CA; }
|
|
.calendars-list { background: white; border-radius: 8px; overflow: hidden; }
|
|
.calendar-item { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
|
|
.calendar-item:last-child { border-bottom: none; }
|
|
.calendar-info { flex: 1; }
|
|
.calendar-name { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 5px; }
|
|
.calendar-details { font-size: 14px; color: #666; }
|
|
.calendar-actions { display: flex; gap: 10px; }
|
|
.btn-small { padding: 6px 12px; font-size: 13px; }
|
|
.btn-secondary { background: #6B7280; }
|
|
.btn-secondary:hover { background: #4B5563; }
|
|
.calendar-stats { display: flex; gap: 20px; margin-top: 10px; }
|
|
.stat { font-size: 12px; color: #666; }
|
|
.stat strong { color: #4F46E5; font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="text/babel">
|
|
const { useState, useEffect } = React;
|
|
|
|
function CalendarManager() {
|
|
const [calendars, setCalendars] = useState([]);
|
|
|
|
useEffect(() => {
|
|
fetchCalendars();
|
|
}, []);
|
|
|
|
const fetchCalendars = async () => {
|
|
// Mock data
|
|
const mockCalendars = [
|
|
{
|
|
id: 1,
|
|
name: 'Dr. Sarah Smith',
|
|
email: 'sarah.smith@clinic.com',
|
|
location: 'Room 101',
|
|
timezone: 'America/New_York',
|
|
appointmentsToday: 6,
|
|
appointmentsWeek: 28
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Dr. James Johnson',
|
|
email: 'james.johnson@clinic.com',
|
|
location: 'Room 102',
|
|
timezone: 'America/New_York',
|
|
appointmentsToday: 4,
|
|
appointmentsWeek: 22
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Dr. Emily Davis',
|
|
email: 'emily.davis@clinic.com',
|
|
location: 'Room 103',
|
|
timezone: 'America/New_York',
|
|
appointmentsToday: 7,
|
|
appointmentsWeek: 31
|
|
},
|
|
];
|
|
setCalendars(mockCalendars);
|
|
};
|
|
|
|
const handleAddCalendar = () => {
|
|
alert('Add new calendar - would open form');
|
|
};
|
|
|
|
const handleEditCalendar = (calendar) => {
|
|
alert(\`Edit calendar: \${calendar.name}\`);
|
|
};
|
|
|
|
const handleDeleteCalendar = (calendar) => {
|
|
if (confirm(\`Are you sure you want to delete \${calendar.name}?\`)) {
|
|
alert('Calendar deleted');
|
|
}
|
|
};
|
|
|
|
const handleViewSchedule = (calendar) => {
|
|
alert(\`View schedule for \${calendar.name}\`);
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<h1>Calendar Manager</h1>
|
|
|
|
<div className="toolbar">
|
|
<h2 style={{ margin: 0, fontSize: '18px', color: '#666' }}>
|
|
{calendars.length} Calendar{calendars.length !== 1 ? 's' : ''}
|
|
</h2>
|
|
<button onClick={handleAddCalendar}>+ Add Calendar</button>
|
|
</div>
|
|
|
|
<div className="calendars-list">
|
|
{calendars.map(calendar => (
|
|
<div key={calendar.id} className="calendar-item">
|
|
<div className="calendar-info">
|
|
<div className="calendar-name">{calendar.name}</div>
|
|
<div className="calendar-details">
|
|
📧 {calendar.email} • 📍 {calendar.location} • 🌍 {calendar.timezone}
|
|
</div>
|
|
<div className="calendar-stats">
|
|
<div className="stat">
|
|
<strong>{calendar.appointmentsToday}</strong> appointments today
|
|
</div>
|
|
<div className="stat">
|
|
<strong>{calendar.appointmentsWeek}</strong> this week
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="calendar-actions">
|
|
<button className="btn-small" onClick={() => handleViewSchedule(calendar)}>
|
|
View Schedule
|
|
</button>
|
|
<button className="btn-small btn-secondary" onClick={() => handleEditCalendar(calendar)}>
|
|
Edit
|
|
</button>
|
|
<button className="btn-small btn-secondary" onClick={() => handleDeleteCalendar(calendar)}>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(<CalendarManager />, document.getElementById('root'));
|
|
</script>
|
|
</body>
|
|
</html>`;
|