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>

frontend/src/pages/help/HelpScheduler.tsx

@@ -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" />
+          <MousePointer size={20} className="text-brand-500" />
-          Key Features
+          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" />
+          <HelpCircle size={20} className="text-brand-500" />
-          How to Use
+          Pro Tips
-        </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
         </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>