docs(help): Comprehensive Scheduler documentation with all features
Rewrote HelpScheduler.tsx to document actual scheduler features including: - Drag-and-drop to reschedule, change resource, or delete appointments - Resize appointments by dragging edges (start or end) - Pending appointments sidebar with archive zone - Undo/Redo with Ctrl+Z/Ctrl+Y (up to 50 actions) - Zoom controls for timeline detail - Status colors (blue/yellow/red/green/gray) - Filtering by status, resource, and service - Overlapping appointment lanes - Real-time WebSocket updates - Month view click-to-day and drag overlay features 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
@@ -22,6 +22,18 @@ import {
|
||||
Eye,
|
||||
Calendar,
|
||||
Grid,
|
||||
Move,
|
||||
GripVertical,
|
||||
Undo,
|
||||
Redo,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
Archive,
|
||||
AlertCircle,
|
||||
Inbox,
|
||||
MousePointer,
|
||||
Keyboard,
|
||||
Layers,
|
||||
} from 'lucide-react';
|
||||
|
||||
const HelpScheduler: React.FC = () => {
|
||||
@@ -50,7 +62,7 @@ const HelpScheduler: React.FC = () => {
|
||||
Scheduler Guide
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Manage appointments and view your calendar
|
||||
Master your appointment calendar with drag-and-drop scheduling
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,10 +76,14 @@ const HelpScheduler: React.FC = () => {
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
The Scheduler is your central hub for managing all appointments and events. It provides a visual calendar interface that lets you see availability, book new appointments, and manage existing bookings efficiently.
|
||||
The Scheduler is a powerful, interactive calendar designed for fast appointment management.
|
||||
It features full drag-and-drop support, real-time updates via WebSocket, and a horizontal timeline
|
||||
layout that shows all your resources (staff, rooms, equipment) at once.
|
||||
</p>
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
The scheduler supports multiple view modes and filtering options to help you find exactly what you need, whether you're looking at a single day or planning weeks ahead.
|
||||
You can reschedule appointments by dragging them, resize them by pulling their edges,
|
||||
filter by status/resource/service, and even undo mistakes with keyboard shortcuts.
|
||||
Pending appointment requests appear in a sidebar, ready to be dragged onto the schedule.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -85,7 +101,9 @@ const HelpScheduler: React.FC = () => {
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Day View</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
See all appointments for a single day in a detailed timeline format. Best for managing busy days with many appointments.
|
||||
See a single day in detail with a horizontal timeline. Each resource gets its own row.
|
||||
The timeline scrolls horizontally and auto-centers on the current time when you open it.
|
||||
Perfect for managing a busy day with many appointments across multiple staff or rooms.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,7 +112,9 @@ const HelpScheduler: React.FC = () => {
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Week View</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
View an entire week at once, ideal for planning and understanding weekly patterns. See appointments across all days.
|
||||
View all 7 days side-by-side with each day separated on the timeline.
|
||||
Drag appointments between days or across resources. Great for weekly planning
|
||||
and seeing patterns in your schedule.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,8 +122,72 @@ const HelpScheduler: React.FC = () => {
|
||||
<CalendarDays size={20} className="text-purple-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Month View</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
Traditional calendar grid showing the entire month. Each day cell shows a summary of
|
||||
appointments for that day, color-coded by status.
|
||||
</p>
|
||||
<ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1 ml-4">
|
||||
<li><strong>Click a day</strong> to jump directly to that day's detailed Day View</li>
|
||||
<li><strong>Drag an appointment</strong> over a day and hover for 1 second - a mini Day View scheduler overlay opens where you can drop it at the exact time and resource you want</li>
|
||||
<li>The overlay shows hour slots and resource columns, just like Day View, for precise placement</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Drag and Drop Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Move size={20} className="text-brand-500" />
|
||||
Drag and Drop
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Drag-and-drop is the fastest way to manage your schedule. Simply click and drag any
|
||||
appointment to reschedule it.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<GripVertical size={20} className="text-blue-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Reschedule Appointments</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Get a high-level overview of the entire month. Great for identifying busy periods and planning ahead.
|
||||
Drag an appointment left or right to change its time, or up/down to move it to a
|
||||
different resource. The appointment snaps to 15-minute increments. A ghost preview
|
||||
shows where it will land.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
||||
<Inbox size={20} className="text-green-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Schedule Pending Requests</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Pending appointments (from online booking or manual entry) appear in the sidebar on
|
||||
the right. Drag them onto the timeline to schedule them - they'll automatically be
|
||||
confirmed. The pending sidebar shows customer name, service, and requested duration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
|
||||
<Undo size={20} className="text-yellow-600 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Return to Pending</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Drag a scheduled appointment back to the pending sidebar to unschedule it.
|
||||
The appointment returns to pending status and can be rescheduled later.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
|
||||
<Archive size={20} className="text-red-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Archive (Delete)</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Drag an appointment to the archive zone at the bottom of the pending sidebar to
|
||||
delete it permanently. This is useful for removing cancelled or test appointments.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,47 +195,356 @@ const HelpScheduler: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Features Section */}
|
||||
{/* Resizing Appointments Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Clock size={20} className="text-brand-500" />
|
||||
Key Features
|
||||
<MousePointer size={20} className="text-brand-500" />
|
||||
Resizing Appointments
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Change an appointment's duration by dragging its edges. This is helpful when a service
|
||||
takes more or less time than expected.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Plus size={20} className="text-green-500 mt-0.5" />
|
||||
<ChevronRight size={20} className="text-brand-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Create Appointments</h4>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Extend Duration</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Click on any time slot to create a new appointment. Select customer, service, and resource.
|
||||
Hover over the right edge of an appointment until you see the resize cursor,
|
||||
then drag right to make it longer. Duration snaps to 15-minute increments.
|
||||
Minimum duration is 15 minutes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Edit size={20} className="text-blue-500 mt-0.5" />
|
||||
<ChevronRight size={20} className="text-brand-500 mt-0.5 rotate-180" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Edit Appointments</h4>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Change Start Time</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Click on any existing appointment to modify its details, reschedule, or add notes.
|
||||
Drag the left edge to change when the appointment starts. Dragging left makes
|
||||
it start earlier (and longer), dragging right makes it start later (and shorter).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Status Colors Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Eye size={20} className="text-brand-500" />
|
||||
Status Colors
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Appointments are color-coded so you can see their status at a glance:
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-3 p-3 bg-blue-100 dark:bg-blue-900/50 border-l-4 border-blue-500 rounded">
|
||||
<span className="font-medium text-blue-900 dark:text-blue-200">Blue - Upcoming</span>
|
||||
<span className="text-sm text-blue-700 dark:text-blue-300">Confirmed, hasn't started yet</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 bg-yellow-100 dark:bg-yellow-900/50 border-l-4 border-yellow-500 rounded">
|
||||
<span className="font-medium text-yellow-900 dark:text-yellow-200">Yellow - In Progress</span>
|
||||
<span className="text-sm text-yellow-700 dark:text-yellow-300">Currently happening</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 bg-red-100 dark:bg-red-900/50 border-l-4 border-red-500 rounded">
|
||||
<span className="font-medium text-red-900 dark:text-red-200">Red - Overdue</span>
|
||||
<span className="text-sm text-red-700 dark:text-red-300">Past end time, not completed</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 bg-green-100 dark:bg-green-900/50 border-l-4 border-green-500 rounded">
|
||||
<span className="font-medium text-green-900 dark:text-green-200">Green - Completed</span>
|
||||
<span className="text-sm text-green-700 dark:text-green-300">Successfully finished</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-100 dark:bg-gray-700 border-l-4 border-gray-400 rounded">
|
||||
<span className="font-medium text-gray-700 dark:text-gray-300">Gray - No-show</span>
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Customer didn't arrive</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 bg-gray-100 dark:bg-gray-700 border-l-4 border-gray-400 rounded opacity-75">
|
||||
<span className="font-medium text-gray-500 dark:text-gray-400">Gray (faded) - Cancelled</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-500">Appointment was cancelled</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filtering Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Filter size={20} className="text-brand-500" />
|
||||
Filtering Appointments
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Use the filter button in the toolbar to narrow down what you see:
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<AlertCircle size={20} className="text-orange-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Filter by Status</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Show or hide appointments by status (Pending, Confirmed, Completed, Cancelled, No-show).
|
||||
Useful for focusing on confirmed appointments only or finding no-shows.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Filter size={20} className="text-purple-500 mt-0.5" />
|
||||
<Users size={20} className="text-blue-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Filter by Resource</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Filter the calendar to show only specific staff members, rooms, or equipment.
|
||||
Show only specific staff members, rooms, or equipment. Great for viewing one
|
||||
person's schedule or a specific treatment room.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Eye size={20} className="text-orange-500 mt-0.5" />
|
||||
<Clock size={20} className="text-purple-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Status Colors</h4>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Filter by Service</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Appointments are color-coded by status: scheduled, confirmed, completed, cancelled, no-show.
|
||||
Show only appointments for specific services. Helpful for tracking how often
|
||||
certain services are booked or finding all massage appointments.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
|
||||
A badge appears on the filter button when filters are active. Click "Clear All" to reset.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Keyboard Shortcuts Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Keyboard size={20} className="text-brand-500" />
|
||||
Keyboard Shortcuts
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-center gap-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div className="flex gap-1">
|
||||
<kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Ctrl</kbd>
|
||||
<span>+</span>
|
||||
<kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Z</kbd>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white">Undo</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Undo the last move or resize</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div className="flex gap-1">
|
||||
<kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Ctrl</kbd>
|
||||
<span>+</span>
|
||||
<kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Y</kbd>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white">Redo</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Redo the last undone action</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div className="flex gap-1">
|
||||
<kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Ctrl</kbd>
|
||||
<span>+</span>
|
||||
<kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Shift</kbd>
|
||||
<span>+</span>
|
||||
<kbd className="px-2 py-1 bg-gray-200 dark:bg-gray-600 rounded text-xs font-mono">Z</kbd>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-gray-900 dark:text-white">Redo (Alt)</span>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400">Alternative redo shortcut</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
|
||||
The scheduler keeps a history of up to 50 actions, so you can undo multiple changes.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Zoom Controls Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<ZoomIn size={20} className="text-brand-500" />
|
||||
Zoom Controls
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Adjust the zoom level to see more or less detail in the timeline (Day and Week views only):
|
||||
</p>
|
||||
<div className="flex items-center gap-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<ZoomOut size={20} className="text-gray-500" />
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Zoom out to see more hours at once</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ZoomIn size={20} className="text-gray-500" />
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Zoom in for precise time placement</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
|
||||
Use the zoom slider in the toolbar to adjust. The timeline width scales proportionally.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Overlapping Appointments Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Layers size={20} className="text-brand-500" />
|
||||
Overlapping Appointments
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
When appointments overlap in time for the same resource, the scheduler automatically
|
||||
stacks them in multiple "lanes" so you can see all of them:
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
Each resource row expands vertically to accommodate overlapping appointments
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
Overlapping appointments are shown stacked, with each in its own horizontal lane
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
This helps identify double-bookings or intentional concurrent appointments
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pending Sidebar Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Inbox size={20} className="text-brand-500" />
|
||||
Pending Appointments Sidebar
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
The sidebar on the right shows all pending (unscheduled) appointment requests:
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
<strong>Online Bookings:</strong> When customers book online, their requests appear here until you assign them to a resource
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
<strong>Drag to Schedule:</strong> Drag any pending appointment onto the timeline to schedule it with a specific resource
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
<strong>Auto-Confirm:</strong> Pending appointments automatically change to "Confirmed" when scheduled
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
<strong>Archive Zone:</strong> Drag to the archive section at the bottom to delete unwanted requests
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Real-time Updates Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<AlertCircle size={20} className="text-brand-500" />
|
||||
Real-time Updates
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
The scheduler uses WebSocket connections to update in real-time:
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
When a customer books online, the appointment appears instantly
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
When another staff member makes changes, you see them without refreshing
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 dark:text-gray-300">
|
||||
No need to manually refresh the page - the schedule stays current
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Editing Appointments Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Edit size={20} className="text-brand-500" />
|
||||
Editing Appointment Details
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Click on any appointment to open its detail modal where you can:
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Clock size={20} className="text-blue-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Change Date & Time</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Use the date/time picker for precise scheduling
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Users size={20} className="text-green-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Reassign Resource</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Move the appointment to a different staff member or room
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<Clock size={20} className="text-purple-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Adjust Duration</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Change how long the appointment lasts
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<CheckCircle size={20} className="text-orange-500 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Update Status</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Mark as completed, no-show, or cancelled
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,93 +552,42 @@ const HelpScheduler: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How to Use Section */}
|
||||
{/* Tips Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<CheckCircle size={20} className="text-brand-500" />
|
||||
How to Use
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<ol className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Navigate to Scheduler</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Click "Scheduler" in the sidebar to open the calendar view.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Choose Your View</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Select day, week, or month view using the view toggle buttons.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Create an Appointment</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Click the "+" button or click on an empty time slot to open the appointment form.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Fill in Details</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Select a customer, choose a service, pick an available resource, and set the time.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Save & Confirm</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Click "Save" to create the appointment. Customers can receive automatic notifications.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<CheckCircle size={20} className="text-brand-500" />
|
||||
Benefits
|
||||
<HelpCircle size={20} className="text-brand-500" />
|
||||
Pro Tips
|
||||
</h2>
|
||||
<div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
<strong>Visual Scheduling:</strong> See your entire schedule at a glance with intuitive calendar layouts
|
||||
<strong>Drag from where you grab:</strong> When dragging, the appointment time adjusts based on where you clicked on it, making repositioning intuitive
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
<strong>Conflict Prevention:</strong> System prevents double-booking of resources and staff
|
||||
<strong>Use filters to focus:</strong> When the schedule is busy, filter to show only what you need
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
<strong>Quick Actions:</strong> Create, edit, and cancel appointments with just a few clicks
|
||||
<strong>Ctrl+Z is your friend:</strong> Made a mistake? Undo it instantly without finding and fixing manually
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
<strong>Multi-Resource:</strong> Manage staff, rooms, and equipment schedules in one place
|
||||
<strong>Month view drag overlay:</strong> While dragging in month view, hover over any day for 1 second to open a mini Day View scheduler - drop the appointment at the exact time and resource
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-700 dark:text-gray-300">
|
||||
<strong>Check red appointments:</strong> Red means overdue - these need to be completed or rescheduled
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -274,6 +616,14 @@ const HelpScheduler: React.FC = () => {
|
||||
<span className="text-gray-900 dark:text-white">Services Guide</span>
|
||||
<ChevronRight size={16} className="text-gray-400 ml-auto" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/help/customers"
|
||||
className="flex items-center gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-brand-500 transition-colors"
|
||||
>
|
||||
<Users size={20} className="text-brand-500" />
|
||||
<span className="text-gray-900 dark:text-white">Customers Guide</span>
|
||||
<ChevronRight size={16} className="text-gray-400 ml-auto" />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user