docs(help): Comprehensive rewrites for Resources, Services, Customers, Staff guides

HelpResources.tsx:
- Added resource types section with Staff/Room/Equipment
- Documented table columns and their meanings
- Added step-by-step resource creation guide
- Added staff autocomplete with keyboard navigation
- Detailed multilane mode for concurrent bookings
- Documented View Calendar and Edit features

HelpServices.tsx:
- Documented two-column layout with customer preview
- Added drag-and-drop reordering instructions
- Detailed service properties (name, duration, price, description)
- Added photo gallery section with upload, reorder, delete
- Documented customer preview mockup feature

HelpCustomers.tsx:
- Documented customer table columns
- Added search and sorting capabilities
- Step-by-step customer creation guide
- Documented customer statuses (Active, Inactive, Blocked)
- Added tags section for customer organization
- Documented masquerading feature for customer support

HelpStaff.tsx:
- Detailed staff roles (Owner, Manager, Staff) with badges
- Staff table columns documentation
- Step-by-step staff invitation workflow
- Pending invitations management (resend, cancel)
- Edit staff modal with permissions
- Make Bookable feature for linking to resources
- Inactive staff section with reactivation
- Masquerading as staff for training/troubleshooting

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/pages/help/HelpCustomers.tsx

@@ -1,12 +1,31 @@
 /**
  * Help Customers Page
+ *
+ * Comprehensive help documentation for the Customers management page.
  */
 
 import React from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import {
-  ArrowLeft, Users, UserPlus, Mail, Phone, Filter, Search, Edit,
+  ArrowLeft,
-  Trash2, CheckCircle, ChevronRight, HelpCircle, FileText, Tag,
+  Users,
+  UserPlus,
+  Mail,
+  Phone,
+  Search,
+  Edit,
+  CheckCircle,
+  ChevronRight,
+  HelpCircle,
+  Tag,
+  ArrowUpDown,
+  Filter,
+  DollarSign,
+  Calendar,
+  MapPin,
+  Eye,
+  AlertCircle,
+  MoreHorizontal,
 } from 'lucide-react';
 
 const HelpCustomers: React.FC = () => {
@@ -14,10 +33,15 @@ const HelpCustomers: React.FC = () => {
 
   return (
     <div className="max-w-4xl mx-auto py-8 px-4">
-      <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6">
+      {/* Back Button */}
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
+      >
         <ArrowLeft size={20} /> Back
       </button>
 
+      {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-3 mb-4">
           <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
@@ -25,101 +49,331 @@ const HelpCustomers: React.FC = () => {
           </div>
           <div>
             <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Customers Guide</h1>
-            <p className="text-gray-500 dark:text-gray-400">Manage your customer database</p>
+            <p className="text-gray-500 dark:text-gray-400">Manage your customer database and relationships</p>
           </div>
         </div>
       </div>
 
+      {/* Overview Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <Users size={20} className="text-brand-500" /> Overview
         </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 Customers page is your central hub for managing all client information. Store contact details, view booking history, track customer status, and maintain notes for personalized service.
+            The Customers page is your central hub for managing all client information. Every person who books with your business has a customer record that stores their contact details, booking history, total spend, and custom tags.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            The page displays customers in a sortable, searchable table with key information at a glance: name with avatar, contact info, status, total spend, and last visit. You can quickly add new customers, filter the list, or take actions on individual customers.
           </p>
           <p className="text-gray-600 dark:text-gray-300">
-            A well-maintained customer database helps you provide better service, send targeted communications, and build lasting relationships.
+            A well-maintained customer database enables personalized service, targeted marketing, and tracking of customer lifetime value.
           </p>
         </div>
       </section>
 
+      {/* The Customer Table Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-          <FileText size={20} className="text-brand-500" /> Customer Information
+          <Users size={20} className="text-brand-500" /> The Customer Table
         </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">
+            The main view displays all customers in a table with the following columns:
+          </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">
-              <Users size={20} className="text-blue-500 mt-0.5" />
+              <Users size={20} className="text-blue-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Basic Info</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Customer</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Name, email, phone number, and address</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Avatar (or initials), full name, and any tags assigned to the customer. Click the header to sort alphabetically.
+                </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <Tag size={20} className="text-green-500 mt-0.5" />
+              <Mail size={20} className="text-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Contact Info</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Email address and phone number for quick reference and communication.
+                </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-purple-500 mt-0.5 shrink-0" />
               <div>
                 <h4 className="font-medium text-gray-900 dark:text-white">Status</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Active, Inactive, VIP, or custom statuses</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Customer status badge - <span className="text-green-600 dark:text-green-400">Active</span> (green), <span className="text-gray-600 dark:text-gray-400">Inactive</span> (gray), or blocked (red). Click header to sort.
+                </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <FileText size={20} className="text-purple-500 mt-0.5" />
+              <DollarSign size={20} className="text-amber-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Notes</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Total Spend</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Internal notes about preferences and history</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Cumulative amount the customer has spent at your business. Click header to sort by highest/lowest spenders.
+                </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" />
+              <Calendar size={20} className="text-pink-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Booking History</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Last Visit</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">View all past and upcoming appointments</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Date of the customer's most recent appointment. Shows "Never" for customers who haven't booked yet. Click header to sort.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <MoreHorizontal size={20} className="text-gray-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Actions</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Action buttons including Masquerade (for owners) and a menu for additional options.
+                </p>
               </div>
             </div>
           </div>
         </div>
       </section>
 
+      {/* Searching and Sorting 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" /> Key Features
+          <Search size={20} className="text-brand-500" /> Searching and Sorting
         </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="space-y-4">
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <UserPlus size={20} className="text-green-500 mt-0.5" />
+              <Search size={20} className="text-brand-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Add Customers</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Search</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Create new customer records with all their details</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Type in the search bar to instantly filter customers by name, email, or phone number. Results update as you type.
+                </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <Search size={20} className="text-blue-500 mt-0.5" />
+              <ArrowUpDown size={20} className="text-blue-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Search & Filter</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Sort Columns</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Find customers by name, email, phone, or status</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click any sortable column header (Customer, Status, Total Spend, Last Visit) to sort ascending/descending. Click again to reverse the order.
+                </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-purple-500 mt-0.5" />
+              <Filter size={20} className="text-green-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Edit Records</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Filters</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Update customer information anytime</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
-              </div>
+                  Use the Filters button to access advanced filtering options for narrowing down your customer list.
-            </div>
+                </p>
-            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <Mail size={20} className="text-orange-500 mt-0.5" />
-              <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Contact</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Quick actions to email or call customers</p>
               </div>
             </div>
           </div>
         </div>
       </section>
 
+      {/* Adding a Customer Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <UserPlus size={20} className="text-brand-500" /> Adding a Customer
+        </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 the <strong>"Add Customer"</strong> button to open the new customer form:
+          </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">
+              <Users size={20} className="text-blue-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Full Name <span className="text-red-500">*</span></h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The customer's name as it should appear in your records and communications.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Mail size={20} className="text-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Email Address <span className="text-red-500">*</span></h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Primary email for appointment confirmations, reminders, and marketing.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Phone size={20} className="text-purple-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Phone Number <span className="text-red-500">*</span></h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Contact number for SMS reminders and direct communication.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <MapPin size={20} className="text-orange-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Location (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  City, State, and ZIP code fields for address information.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Tag size={20} className="text-pink-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Tags (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Comma-separated labels for categorizing customers (e.g., "VIP, Referral, Corporate"). Tags appear as badges in the customer list.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              <strong>Note:</strong> New customers are created with "Active" status by default. Total Spend starts at $0.00 and increases automatically as they complete appointments.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Customer Status 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" /> Customer Statuses
+        </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">
+            Customer status controls their ability to book and helps you categorize your customer base:
+          </p>
+          <div className="space-y-4">
+            <div className="flex items-center gap-4">
+              <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 min-w-[100px]">
+                Active
+              </span>
+              <p className="text-gray-600 dark:text-gray-300">
+                Customer can book appointments and access the booking system
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 min-w-[100px]">
+                Inactive
+              </span>
+              <p className="text-gray-600 dark:text-gray-300">
+                Temporarily disabled - customer cannot book but record is preserved
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <span className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 min-w-[100px]">
+                Blocked
+              </span>
+              <p className="text-gray-600 dark:text-gray-300">
+                Customer is blocked from booking (e.g., for policy violations)
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Tags Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Tag size={20} className="text-brand-500" /> Using Tags
+        </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">
+            Tags are custom labels you assign to customers for organization and segmentation:
+          </p>
+          <ul className="space-y-2 mb-4">
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>VIP:</strong> Mark your best customers for special treatment</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Referral:</strong> Track customers who came through referrals</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Corporate:</strong> Identify business/corporate accounts</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>New:</strong> Recently acquired customers</span>
+            </li>
+          </ul>
+          <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              <strong>Adding Tags:</strong> Enter tags as comma-separated values when creating or editing a customer (e.g., "VIP, Monthly, Referral"). Tags appear as small badges next to the customer name in the list.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Masquerading 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" /> Masquerading as Customers
+        </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">
+            Masquerading allows business owners to see the application exactly as a specific customer sees it. This powerful feature helps you:
+          </p>
+          <ul className="space-y-2 mb-4">
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Provide Support:</strong> Walk customers through tasks step-by-step while seeing exactly what they see</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Troubleshoot Issues:</strong> Diagnose problems by experiencing the customer's perspective</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Test Experience:</strong> Verify that booking flows and features work correctly for customers</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Book on Behalf:</strong> Complete bookings for customers who need assistance</span>
+            </li>
+          </ul>
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
+              <Eye size={20} className="text-indigo-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">How to Masquerade</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Click the <strong>"Masquerade"</strong> button in the Actions column for any customer with an associated user account. The interface will switch to show what that customer sees.
+                </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-blue-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Ending Masquerade</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  A notification banner appears at the top of the screen while masquerading. Click "End Masquerade" to return to your owner view.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+            <div className="flex items-start gap-2">
+              <AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+              <p className="text-sm text-amber-800 dark:text-amber-200">
+                <strong>Owner Only:</strong> Masquerading is restricted to business owners for security. The Masquerade button only appears for customers who have created a user account.
+              </p>
+            </div>
+          </div>
+        </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
@@ -128,45 +382,96 @@ const HelpCustomers: React.FC = () => {
           <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>Personalized Service:</strong> Know your customers' preferences and history</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Personalized Service:</strong> Know your customers' preferences, history, and value at a glance
+              </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 Booking:</strong> Select customers instantly when scheduling appointments</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Quick Booking:</strong> Select existing customers instantly when scheduling 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-700 dark:text-gray-300"><strong>Marketing:</strong> Segment customers for targeted campaigns and offers</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Revenue Tracking:</strong> Monitor customer lifetime value with automatic spend tracking
+              </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>Communication:</strong> Store all contact info in one place for easy outreach</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Segmentation:</strong> Use tags and filters to target specific customer groups
+              </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>Support Tools:</strong> Masquerade feature enables hands-on customer assistance
+              </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>Easy Communication:</strong> One-click access to email and phone for direct contact
+              </span>
             </li>
           </ul>
         </div>
       </section>
 
+      {/* Related Features */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <Link to="/help/scheduler" 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">
+          <Link
-            <CheckCircle size={20} className="text-brand-500" />
+            to="/help/scheduler"
+            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"
+          >
+            <Calendar size={20} className="text-brand-500" />
             <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
             <ChevronRight size={16} className="text-gray-400 ml-auto" />
           </Link>
-          <Link to="/help/ticketing" 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">
+          <Link
+            to="/help/messages"
+            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"
+          >
             <Mail size={20} className="text-brand-500" />
-            <span className="text-gray-900 dark:text-white">Ticketing Guide</span>
+            <span className="text-gray-900 dark:text-white">Messages Guide</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link
+            to="/help/services"
+            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"
+          >
+            <Tag size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Services Guide</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link
+            to="/help/payments"
+            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"
+          >
+            <DollarSign size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Payments Guide</span>
             <ChevronRight size={16} className="text-gray-400 ml-auto" />
           </Link>
         </div>
       </section>
 
+      {/* Need More Help */}
       <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
         <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Need More Help?</h3>
-        <p className="text-gray-600 dark:text-gray-300 mb-4">Our support team is ready to help with any questions.</p>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
-        <button onClick={() => navigate('/tickets')} className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors">Contact Support</button>
+          Our support team is ready to help with any questions about managing customers.
+        </p>
+        <button
+          onClick={() => navigate('/tickets')}
+          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+        >
+          Contact Support
+        </button>
       </section>
     </div>
   );

frontend/src/pages/help/HelpResources.tsx

@@ -1,20 +1,47 @@
 /**
  * Help Resources Page
+ *
+ * Comprehensive help documentation for the Resources management page.
  */
 
 import React from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { ArrowLeft, ClipboardList, Users, Building, Wrench, Calendar, Settings, CheckCircle, ChevronRight, HelpCircle, Clock } from 'lucide-react';
+import {
+  ArrowLeft,
+  ClipboardList,
+  Users,
+  Building,
+  Wrench,
+  Calendar,
+  Settings,
+  CheckCircle,
+  ChevronRight,
+  HelpCircle,
+  Clock,
+  Plus,
+  Eye,
+  Pencil,
+  Search,
+  Keyboard,
+  Layers,
+  ToggleLeft,
+  AlertCircle,
+} from 'lucide-react';
 
 const HelpResources: React.FC = () => {
   const navigate = useNavigate();
 
   return (
     <div className="max-w-4xl mx-auto py-8 px-4">
-      <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6">
+      {/* Back Button */}
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
+      >
         <ArrowLeft size={20} /> Back
       </button>
 
+      {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-3 mb-4">
           <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
@@ -22,94 +49,402 @@ const HelpResources: React.FC = () => {
           </div>
           <div>
             <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Resources Guide</h1>
-            <p className="text-gray-500 dark:text-gray-400">Manage staff, rooms, and equipment</p>
+            <p className="text-gray-500 dark:text-gray-400">Manage staff, rooms, and equipment for scheduling</p>
           </div>
         </div>
       </div>
 
+      {/* Overview Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <ClipboardList size={20} className="text-brand-500" /> Overview
         </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">
-            Resources are the people and things that can be booked. This includes staff members, rooms, equipment, or any other bookable entity. Resources are the foundation of your scheduling system.
+            Resources are the bookable entities in your scheduling system - staff members, rooms, equipment, or any other asset that needs time-slot management. Every appointment in your system is assigned to a resource.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            The Resources page displays all your resources in a table format with their type, upcoming appointment counts, capacity settings, and status. From here you can create new resources, edit existing ones, and view individual resource calendars.
           </p>
           <p className="text-gray-600 dark:text-gray-300">
-            When customers book appointments, they are booking time with a specific resource. Properly configured resources prevent double-booking and ensure smooth operations.
+            Properly configured resources are essential for preventing double-booking and ensuring your scheduler displays availability correctly.
           </p>
         </div>
       </section>
 
+      {/* Resource Types Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <Settings size={20} className="text-brand-500" /> Resource Types
         </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">
+            SmoothSchedule supports three built-in resource types, each with an associated icon and color coding:
+          </p>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <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">
               <Users size={20} className="text-blue-500 mt-0.5" />
               <div>
                 <h4 className="font-medium text-gray-900 dark:text-white">Staff</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Team members who provide services (stylists, therapists, etc.)</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Team members who provide services - stylists, therapists, consultants, doctors, etc. Can be linked to a staff user account.
+                </p>
               </div>
             </div>
-            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <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">
               <Building size={20} className="text-green-500 mt-0.5" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Rooms</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Room</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Physical spaces (consultation rooms, studios, courts)</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Physical spaces - consultation rooms, massage rooms, studios, courts, meeting rooms, etc.
+                </p>
               </div>
             </div>
-            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <div className="flex items-start gap-3 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
               <Wrench size={20} className="text-purple-500 mt-0.5" />
               <div>
                 <h4 className="font-medium text-gray-900 dark:text-white">Equipment</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Tools and machinery that need scheduling</p>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Tools and machinery - laser machines, MRI scanners, rental equipment, vehicles, etc.
+                </p>
               </div>
             </div>
           </div>
+          <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              <strong>Custom Resource Types:</strong> You can create additional resource types in Settings &gt; Resource Types to match your specific business needs (e.g., "Vehicle", "Studio", "Instructor").
+            </p>
+          </div>
         </div>
       </section>
 
+      {/* The Resources Table Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-          <Calendar size={20} className="text-brand-500" /> Resource Settings
+          <ClipboardList size={20} className="text-brand-500" /> The Resources Table
         </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">
+            The main view shows all resources in a table with the following columns:
+          </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">
-              <Calendar size={20} className="text-blue-500 mt-0.5" />
+              <div className="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-600 flex items-center justify-center shrink-0">
+                <Users size={16} className="text-gray-500" />
+              </div>
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Availability</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Resource Name</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Set working hours and days for each resource</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The name and type icon of the resource. The icon indicates whether it's Staff (blue person), Room (green building), or Equipment (purple wrench).
+                </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-green-500 mt-0.5" />
+              <div className="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
+                <span className="text-xs font-medium text-blue-800 dark:text-blue-300">Type</span>
+              </div>
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Buffer Time</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Type</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Time between appointments for cleanup or breaks</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  A color-coded badge showing the resource type (Staff, Room, or Equipment).
+                </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-purple-500 mt-0.5" />
+              <Calendar size={20} className="text-brand-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Concurrent Events</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Upcoming</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Allow multiple bookings at the same time (for group settings)</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The count of future appointments assigned to this resource. Helps you see at a glance how busy each resource is.
+                </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <Settings size={20} className="text-orange-500 mt-0.5" />
+              <Layers size={20} className="text-amber-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Service Assignment</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Capacity</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Which services this resource can provide</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Shows "1 at a time" for single-booking resources or "X simultaneous" for multilane resources that can handle multiple concurrent appointments.
+                </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-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Status</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Indicates whether the resource is active and available for scheduling.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Settings size={20} className="text-gray-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Actions</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  View Calendar button to see the resource's schedule, and an Edit button to modify resource settings.
+                </p>
               </div>
             </div>
           </div>
         </div>
       </section>
 
+      {/* Creating a Resource Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Plus size={20} className="text-brand-500" /> Creating a Resource
+        </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 the <strong>"Add Resource"</strong> button in the top right to open the creation form:
+          </p>
+          <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">Select Resource Type</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Choose Staff, Room, or Equipment from the dropdown. This determines the icon and how the resource behaves.
+                </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">Link Staff Member (Staff type only)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  For Staff resources, search and select a staff user from your team. This links the resource to their user account. Type to search by name or email, use arrow keys to navigate, and press Enter to select.
+                </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">Enter Resource Name</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Give the resource a descriptive name that will appear in the scheduler and booking interface (e.g., "Sarah (Stylist)", "Massage Room 1", "Laser Machine").
+                </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">Add Description (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Add notes about the resource for internal reference.
+                </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">Configure Multilane Mode (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Toggle on to allow multiple simultaneous bookings. Set the number of lanes (2-10) for resources like group classes or shared equipment.
+                </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">6</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Save</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Create Resource" to add the resource. It will appear immediately in the table and be available in the scheduler.
+                </p>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* Staff Autocomplete Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Search size={20} className="text-brand-500" /> Staff Member Autocomplete
+        </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 creating a Staff resource, you'll use an autocomplete field to link the resource to a staff user account:
+          </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">
+              <Search size={20} className="text-blue-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Search</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Start typing to filter staff members by name or email. Results appear in a dropdown below the input.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Keyboard size={20} className="text-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Keyboard Navigation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Use <strong>↑/↓</strong> arrow keys to highlight options, <strong>Enter</strong> to select, and <strong>Escape</strong> to close the dropdown.
+                </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-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Selection Confirmation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Once selected, a green indicator shows "Selected: [Name]" below the input field confirming your choice.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+            <div className="flex items-start gap-2">
+              <AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+              <p className="text-sm text-amber-800 dark:text-amber-200">
+                Staff must first be added via the Staff page before they can be linked to a resource. If you don't see someone in the autocomplete, make sure they have a staff account.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Multilane Mode 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" /> Multilane Mode
+        </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">
+            Multilane mode allows a single resource to handle multiple appointments at the same time. This is useful for:
+          </p>
+          <ul className="space-y-2 mb-4">
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Group fitness instructors who can teach multiple clients</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Rooms with multiple stations (salon chairs, dental chairs)</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Equipment that can be shared (3D printers, charging stations)</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Classes with limited capacity (yoga classes, workshops)</span>
+            </li>
+          </ul>
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <ToggleLeft size={20} className="text-brand-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Enable Multilane</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Toggle the "Multilane Mode" switch in the resource form. When enabled, a number input appears.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Layers size={20} className="text-amber-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Set Lane Count</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Enter the number of simultaneous appointments allowed (2-10). For example, set to 5 for a yoga class with 5 spots.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              <strong>In the Scheduler:</strong> When viewing a multilane resource, overlapping appointments appear in separate horizontal lanes, making it easy to see all concurrent bookings.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Viewing a Resource Calendar 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" /> Viewing a Resource Calendar
+        </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 the <strong>"View Calendar"</strong> button on any resource row to open a dedicated calendar view for that resource:
+          </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">
+              <Calendar size={20} className="text-brand-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Focused View</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  See only the appointments assigned to this specific resource, without clutter from other resources.
+                </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-blue-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Date Navigation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Navigate between weeks to see past and future appointments for planning and review.
+                </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-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Appointment Details</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click on any appointment in the calendar to view its full details.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Editing a Resource Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Pencil size={20} className="text-brand-500" /> Editing a Resource
+        </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 the pencil icon in the Actions column to edit a resource. The edit form pre-fills with the current values.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            You can change:
+          </p>
+          <ul className="space-y-2 mb-4">
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Resource type (Staff, Room, Equipment)</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Linked staff member (for Staff resources)</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Resource name and description</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300">Multilane settings and lane count</span>
+            </li>
+          </ul>
+          <div className="p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+            <div className="flex items-start gap-2">
+              <AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+              <p className="text-sm text-amber-800 dark:text-amber-200">
+                Changing a resource's type or linked staff member may affect how existing appointments display. The appointments themselves remain intact.
+              </p>
+            </div>
+          </div>
+        </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
@@ -118,45 +453,90 @@ const HelpResources: React.FC = () => {
           <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>No Double-Booking:</strong> System prevents scheduling conflicts automatically</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Prevent Double-Booking:</strong> Resources automatically block conflicting time slots
+              </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>Utilization Tracking:</strong> See how busy each resource is</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Accurate Availability:</strong> Customers only see times when resources are actually free
+              </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>Flexible Types:</strong> Customize resource types for your business needs</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Flexible Capacity:</strong> Multilane mode supports group bookings and shared resources
+              </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>Individual Schedules:</strong> Each resource can have unique availability</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Staff Integration:</strong> Link resources to staff accounts for proper attribution and filtering
+              </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 Visibility:</strong> Upcoming appointment counts show resource utilization at a glance
+              </span>
             </li>
           </ul>
         </div>
       </section>
 
+      {/* Related Features */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <Link to="/help/staff" 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">
+          <Link
+            to="/help/scheduler"
+            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"
+          >
+            <Calendar size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link
+            to="/help/staff"
+            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">Staff Management</span>
             <ChevronRight size={16} className="text-gray-400 ml-auto" />
           </Link>
-          <Link to="/help/settings/resource-types" 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">
+          <Link
+            to="/help/settings/resource-types"
+            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"
+          >
             <Settings size={20} className="text-brand-500" />
             <span className="text-gray-900 dark:text-white">Resource Types Settings</span>
             <ChevronRight size={16} className="text-gray-400 ml-auto" />
           </Link>
+          <Link
+            to="/help/services"
+            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"
+          >
+            <ClipboardList size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Services Guide</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
         </div>
       </section>
 
+      {/* Need More Help */}
       <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
         <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Need More Help?</h3>
-        <p className="text-gray-600 dark:text-gray-300 mb-4">Our support team is ready to help with any questions.</p>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
-        <button onClick={() => navigate('/tickets')} className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors">Contact Support</button>
+          Our support team is ready to help with any questions about managing resources.
+        </p>
+        <button
+          onClick={() => navigate('/tickets')}
+          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+        >
+          Contact Support
+        </button>
       </section>
     </div>
   );

frontend/src/pages/help/HelpServices.tsx

@@ -1,20 +1,48 @@
 /**
  * Help Services Page
+ *
+ * Comprehensive help documentation for the Services management page.
  */
 
 import React from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { ArrowLeft, Briefcase, Clock, DollarSign, Users, Settings, CheckCircle, ChevronRight, HelpCircle, Tag } from 'lucide-react';
+import {
+  ArrowLeft,
+  Briefcase,
+  Clock,
+  DollarSign,
+  Users,
+  Settings,
+  CheckCircle,
+  ChevronRight,
+  HelpCircle,
+  Tag,
+  Plus,
+  Pencil,
+  Trash2,
+  GripVertical,
+  Eye,
+  Image,
+  ImagePlus,
+  Upload,
+  AlertCircle,
+  LayoutGrid,
+} from 'lucide-react';
 
 const HelpServices: React.FC = () => {
   const navigate = useNavigate();
 
   return (
     <div className="max-w-4xl mx-auto py-8 px-4">
-      <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6">
+      {/* Back Button */}
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
+      >
         <ArrowLeft size={20} /> Back
       </button>
 
+      {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-3 mb-4">
           <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
@@ -22,63 +50,378 @@ const HelpServices: React.FC = () => {
           </div>
           <div>
             <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Services Guide</h1>
-            <p className="text-gray-500 dark:text-gray-400">Define what you offer to customers</p>
+            <p className="text-gray-500 dark:text-gray-400">Define and manage the services your business offers</p>
           </div>
         </div>
       </div>
 
+      {/* Overview Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <Briefcase size={20} className="text-brand-500" /> Overview
         </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">
-            Services define what you offer to customers. Each service has a name, description, duration, and price. When customers book appointments, they select from your service catalog.
+            Services are what you offer to your customers - haircuts, massages, consultations, lessons, repairs, or any bookable activity. Each service has a name, duration, price, optional description, and photo gallery.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            The Services page features a two-column layout: an editable list on the left where you can reorder services by dragging, and a live Customer Preview on the right showing exactly how your services appear in the booking interface.
           </p>
           <p className="text-gray-600 dark:text-gray-300">
-            Well-defined services make booking easier for customers and ensure consistent pricing and scheduling throughout your business.
+            Well-defined services make booking seamless for customers and ensure consistent pricing and time allocation for every appointment.
           </p>
         </div>
       </section>
 
+      {/* Page Layout Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <LayoutGrid size={20} className="text-brand-500" /> Page Layout
+        </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 Services page is divided into two columns for efficient management:
+          </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">
+              <GripVertical size={20} className="text-brand-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Left: Editable Services List</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Your services in a draggable list. Reorder by dragging, edit or delete with action buttons. Shows name, description, duration, price, and photo count.
+                </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-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Right: Customer Preview</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  A live mockup showing how customers see your services in the booking widget. Updates instantly as you reorder.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              <strong>Tip:</strong> The order you see in the editable list is exactly how services appear to customers when booking. Drag your most popular services to the top!
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Service Properties Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <Settings size={20} className="text-brand-500" /> Service Properties
         </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">
+            Each service has the following properties:
+          </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">
-              <Tag size={20} className="text-blue-500 mt-0.5" />
+              <Tag size={20} className="text-blue-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Name & Description</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Name <span className="text-red-500">*</span></h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Clear name and detailed description for customers</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  A clear, descriptive name customers will see (e.g., "Haircut", "60-Minute Massage", "Initial Consultation"). Required.
+                </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-green-500 mt-0.5" />
+              <Clock size={20} className="text-green-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Duration</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Duration <span className="text-red-500">*</span></h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">How long the service takes (e.g., 30 min, 1 hour)</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  How long the service takes in minutes (minimum 5, in 5-minute increments). This determines the time block reserved in the scheduler.
+                </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <DollarSign size={20} className="text-purple-500 mt-0.5" />
+              <DollarSign size={20} className="text-purple-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Price</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Price <span className="text-red-500">*</span></h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Base price for the service (can be overridden per booking)</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The base price for this service displayed to customers. You can override the price on individual appointments if needed.
+                </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-orange-500 mt-0.5" />
+              <Briefcase size={20} className="text-orange-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Resource Requirements</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Description</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Which resources/staff can provide this service</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Optional text describing what's included, what to expect, or any special notes. Shown to customers in the booking flow.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Image size={20} className="text-pink-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Photos</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Optional images showcasing the service. Multiple photos supported, reorderable. The first photo is the primary/featured image.
+                </p>
               </div>
             </div>
           </div>
         </div>
       </section>
 
+      {/* Drag and Drop Reordering Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <GripVertical size={20} className="text-brand-500" /> Drag and Drop Reordering
+        </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">
+            Control the display order of your services by dragging and dropping:
+          </p>
+          <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">Grab the Handle</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click and hold the grip icon (⋮⋮) on the left side of any service card.
+                </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">Drag to New Position</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Move the service up or down in the list. Visual feedback shows where it will be placed.
+                </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">Release to Save</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Drop the service and the new order is saved automatically. The Customer Preview updates instantly.
+                </p>
+              </div>
+            </li>
+          </ol>
+          <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+            <p className="text-sm text-green-800 dark:text-green-200">
+              <strong>Visual Feedback:</strong> When dragging, the service being moved becomes semi-transparent, and the drop target shows a highlighted border.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Creating a Service Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Plus size={20} className="text-brand-500" /> Creating a Service
+        </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 the <strong>"Add Service"</strong> button in the top right to open the creation form:
+          </p>
+          <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">Enter Service Name</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Give your service a clear name (e.g., "Haircut", "Massage", "Consultation").
+                </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">Set Duration</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Enter how many minutes the service takes. The scheduler will block this amount of 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">3</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Set Price</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Enter the price customers pay for this service.
+                </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">Add Description (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Describe what's included or what customers should know.
+                </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">Upload Photos (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Add images to showcase the service. See the Photo Gallery section below for details.
+                </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">6</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Create</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Create" to add the service. It appears at the end of the list (drag to reorder).
+                </p>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* Photo Gallery Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <ImagePlus size={20} className="text-brand-500" /> Photo Gallery
+        </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">
+            Each service can have multiple photos to showcase what customers will receive:
+          </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">
+              <Upload size={20} className="text-blue-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Upload Methods</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  <strong>Drag and drop</strong> images directly onto the drop zone, or click <strong>"browse files"</strong> to select from your computer. Multiple images can be uploaded at once.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <GripVertical size={20} className="text-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Reorder Photos</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Drag photos to change their order. The first photo (position 1) is the primary/featured image shown in the service listing.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Trash2 size={20} className="text-red-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Delete Photos</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Hover over a photo and click the red trash button to remove it.
+                </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-purple-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Photo Count Display</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  In the services list, a small image icon with count shows how many photos each service has.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              <strong>Tip:</strong> Use high-quality photos that showcase your work. The first photo is what customers see first when browsing services!
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Editing and Deleting Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Pencil size={20} className="text-brand-500" /> Editing and Deleting
+        </h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Pencil size={20} className="text-brand-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Edit a Service</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click the pencil icon on any service card to open the edit form. All fields are pre-filled with current values. Update what you need and click "Save".
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Trash2 size={20} className="text-red-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Delete a Service</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click the trash icon on a service card. A confirmation dialog appears - click confirm to permanently delete the service.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+            <div className="flex items-start gap-2">
+              <AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+              <p className="text-sm text-amber-800 dark:text-amber-200">
+                <strong>Note:</strong> Deleting a service does not affect existing appointments that used that service. Those appointments retain their data.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Customer Preview 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" /> Customer Preview
+        </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 right side of the Services page shows a live preview of how your services appear to customers:
+          </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">
+              <Eye size={20} className="text-brand-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Live Preview</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The preview updates instantly when you reorder services by dragging. See exactly how the booking widget will look.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <LayoutGrid size={20} className="text-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Booking Widget Style</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Styled like the actual booking interface with a branded header, service cards showing name, description, duration, and price.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <ChevronRight size={20} className="text-purple-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Selection Indicator</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Each service shows a chevron (→) indicating it's clickable. The preview is visual only - clicking doesn't navigate.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-gray-100 dark:bg-gray-700/50 rounded-lg text-center">
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              Preview only - not clickable
+            </p>
+          </div>
+        </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
@@ -87,45 +430,96 @@ const HelpServices: React.FC = () => {
           <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>Clear Offerings:</strong> Customers know exactly what services you provide</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Clear Offerings:</strong> Customers see exactly what services you provide with pricing upfront
+              </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>Consistent Pricing:</strong> Set standard prices that apply automatically</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Consistent Pricing:</strong> Set standard prices that apply automatically to new 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-700 dark:text-gray-300"><strong>Smart Scheduling:</strong> Duration ensures enough time is allocated</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Accurate Scheduling:</strong> Duration settings ensure the right amount of time is allocated
+              </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>Better Reports:</strong> Track which services are most popular</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Custom Order:</strong> Drag to prioritize popular services at the top of customer-facing lists
+              </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>Visual Appeal:</strong> Photo galleries showcase your work and attract bookings
+              </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>Live Preview:</strong> See exactly how customers experience your service catalog
+              </span>
             </li>
           </ul>
         </div>
       </section>
 
+      {/* Related Features */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <Link to="/help/resources" 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">
+          <Link
+            to="/help/scheduler"
+            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"
+          >
+            <Clock size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link
+            to="/help/resources"
+            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">Resources Guide</span>
             <ChevronRight size={16} className="text-gray-400 ml-auto" />
           </Link>
-          <Link to="/help/scheduler" 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">
+          <Link
-            <Clock size={20} className="text-brand-500" />
+            to="/help/customers"
-            <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
+            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>
+          <Link
+            to="/help/settings/booking"
+            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"
+          >
+            <Settings size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Booking Settings</span>
             <ChevronRight size={16} className="text-gray-400 ml-auto" />
           </Link>
         </div>
       </section>
 
+      {/* Need More Help */}
       <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
         <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Need More Help?</h3>
-        <p className="text-gray-600 dark:text-gray-300 mb-4">Our support team is ready to help with any questions.</p>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
-        <button onClick={() => navigate('/tickets')} className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors">Contact Support</button>
+          Our support team is ready to help with any questions about managing services.
+        </p>
+        <button
+          onClick={() => navigate('/tickets')}
+          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+        >
+          Contact Support
+        </button>
       </section>
     </div>
   );

frontend/src/pages/help/HelpStaff.tsx

@@ -1,12 +1,34 @@
 /**
  * Help Staff Page
+ *
+ * Comprehensive help documentation for the Staff management page.
  */
 
 import React from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import {
-  ArrowLeft, Users, UserPlus, Shield, Clock, Calendar, Mail,
+  ArrowLeft,
-  CheckCircle, ChevronRight, HelpCircle, Settings, Key,
+  Users,
+  UserPlus,
+  Shield,
+  Briefcase,
+  Clock,
+  Calendar,
+  Mail,
+  CheckCircle,
+  ChevronRight,
+  HelpCircle,
+  Settings,
+  Key,
+  Send,
+  RefreshCw,
+  Trash2,
+  Pencil,
+  Power,
+  Eye,
+  AlertCircle,
+  UserX,
+  ChevronDown,
 } from 'lucide-react';
 
 const HelpStaff: React.FC = () => {
@@ -14,10 +36,15 @@ const HelpStaff: React.FC = () => {
 
   return (
     <div className="max-w-4xl mx-auto py-8 px-4">
-      <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6">
+      {/* Back Button */}
+      <button
+        onClick={() => navigate(-1)}
+        className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
+      >
         <ArrowLeft size={20} /> Back
       </button>
 
+      {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-3 mb-4">
           <div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
@@ -25,94 +52,388 @@ const HelpStaff: React.FC = () => {
           </div>
           <div>
             <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Staff Guide</h1>
-            <p className="text-gray-500 dark:text-gray-400">Manage your team members and permissions</p>
+            <p className="text-gray-500 dark:text-gray-400">Manage your team members, roles, and permissions</p>
           </div>
         </div>
       </div>
 
+      {/* Overview Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <Users size={20} className="text-brand-500" /> Overview
         </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 Staff page lets you manage team members who can access your business dashboard. Add employees, set their roles and permissions, and control what they can see and do.
+            The Staff page lets you manage team members who can access your business dashboard. Invite employees via email, assign roles with appropriate permissions, and control what each person can see and do within the system.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            Staff members are different from Resources - staff are users who log in to manage the system, while resources are what gets booked. However, a staff member can also be linked to a bookable resource (e.g., a stylist who has both login access AND an appointment calendar).
           </p>
           <p className="text-gray-600 dark:text-gray-300">
-            Staff members are different from Resources - staff are users who log in to manage the system, while resources are what gets booked (though a staff member can also be a resource).
+            The page displays your team in a table with active staff at the top and an expandable section for inactive (deactivated) staff below.
           </p>
         </div>
       </section>
 
+      {/* Staff Roles Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <Shield size={20} className="text-brand-500" /> Staff Roles
         </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">
+            Each staff member has a role that determines their base level of access:
+          </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">
+            <div className="flex items-start gap-3 p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
-              <Key size={20} className="text-purple-500 mt-0.5" />
+              <Key size={20} className="text-purple-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Owner</h4>
+                <div className="flex items-center gap-2">
-                <p className="text-sm text-gray-500 dark:text-gray-400">Full access to all features including billing, settings, and staff management. Cannot be removed.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white">Owner</h4>
+                  <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
+                    <Shield size={10} /> owner
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  Full access to all features including billing, business settings, staff management, and all operational features. Owners cannot be deactivated or have their permissions restricted. Every business has at least one owner.
+                </p>
               </div>
             </div>
-            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <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">
-              <Shield size={20} className="text-blue-500 mt-0.5" />
+              <Briefcase size={20} className="text-blue-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Manager</h4>
+                <div className="flex items-center gap-2">
-                <p className="text-sm text-gray-500 dark:text-gray-400">Can manage scheduling, customers, services, and resources. Limited access to settings.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white">Manager</h4>
+                  <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                    <Briefcase size={10} /> manager
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  Can manage scheduling, customers, services, and resources. Has access to view reports. Limited access to settings. Permissions can be customized to expand or restrict access to specific features.
+                </p>
               </div>
             </div>
-            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600">
-              <Users size={20} className="text-green-500 mt-0.5" />
+              <Users size={20} className="text-gray-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Staff</h4>
+                <div className="flex items-center gap-2">
-                <p className="text-sm text-gray-500 dark:text-gray-400">Basic access to view schedules and manage their own appointments. Read-only for most settings.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white">Staff</h4>
+                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                    staff
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  Basic access to view schedules and manage their own appointments. Read-only access to most areas. Ideal for employees who only need to see their calendar and handle their assigned bookings.
+                </p>
               </div>
             </div>
           </div>
         </div>
       </section>
 
+      {/* The Staff Table Section */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-          <Settings size={20} className="text-brand-500" /> Key Features
+          <Users size={20} className="text-brand-500" /> The Staff Table
         </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">
+            The main table displays active staff members with the following columns:
+          </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">
-              <UserPlus size={20} className="text-green-500 mt-0.5" />
+              <Users size={20} className="text-blue-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Invite Staff</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Name</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Send email invitations to add new team members</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Staff member's name and email address. Displays an avatar with their initial.
+                </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <Shield size={20} className="text-blue-500 mt-0.5" />
+              <Shield size={20} className="text-purple-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Role Assignment</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Role</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Set permissions based on job responsibilities</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Color-coded badge showing their role - purple for Owner, blue for Manager, gray for Staff.
+                </p>
               </div>
             </div>
             <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <Calendar size={20} className="text-purple-500 mt-0.5" />
+              <Calendar size={20} className="text-green-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Link to Resource</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Bookable Resource</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Connect staff accounts to bookable resources</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Shows if the staff member is linked to a bookable resource. Displays "Yes (Resource Name)" with a green badge if linked, or a "Make Bookable" link if not.
+                </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-orange-500 mt-0.5" />
+              <Settings size={20} className="text-gray-500 mt-0.5 shrink-0" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Activity Tracking</h4>
+                <h4 className="font-medium text-gray-900 dark:text-white">Actions</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">See when staff last accessed the system</p>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Masquerade button (owners only), Edit button to modify permissions and settings.
+                </p>
               </div>
             </div>
           </div>
         </div>
       </section>
 
+      {/* Inviting Staff Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <UserPlus size={20} className="text-brand-500" /> Inviting Staff
+        </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 the <strong>"Invite Staff"</strong> button to send an email invitation:
+          </p>
+          <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">Enter Email Address</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The email address where the invitation will be sent. They'll receive a link to create their account.
+                </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">Select Role</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Choose Staff Member or Manager. Only owners can invite managers.
+                </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">Set Permissions (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Customize which features they can access. Different permission options are available based on the selected role.
+                </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">Make Bookable (Optional)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Check this to automatically create a bookable resource linked to this person. You can set a custom display name or use their name by default.
+                </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">Send Invitation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Send Invitation" to email them. The invitation appears in Pending Invitations until they accept.
+                </p>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* Pending Invitations 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" /> Pending Invitations
+        </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 you invite someone, their invitation appears in a yellow highlighted section above the staff table:
+          </p>
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+              <Mail size={20} className="text-amber-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Invitation Details</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Shows the invitee's email, their assigned role, and when the invitation expires.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <RefreshCw size={20} className="text-brand-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Resend Invitation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click the refresh icon to send the invitation email again if they haven't received it.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Trash2 size={20} className="text-red-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Cancel Invitation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click the trash icon to revoke the invitation. They won't be able to join even if they click the link.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Editing Staff Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Pencil size={20} className="text-brand-500" /> Editing Staff
+        </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 the pencil icon on any staff row to open the edit modal:
+          </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">
+              <Users size={20} className="text-brand-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Staff Info</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  View the staff member's name, email, and current role badge.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Settings size={20} className="text-blue-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Edit Permissions</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Toggle individual permissions on/off for Managers and Staff. Owners have full access and cannot be restricted.
+                </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">
+              <Power size={20} className="text-red-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Danger Zone: Deactivate</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Deactivate a staff member to prevent them from logging in while keeping their data. Only owners can deactivate staff, and they cannot deactivate themselves or other owners.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Make Bookable Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Calendar size={20} className="text-brand-500" /> Make Staff Bookable
+        </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">
+            Staff members who provide services to customers need to be "bookable" - this means they have a linked resource in the scheduler:
+          </p>
+          <div className="space-y-4">
+            <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">
+              <CheckCircle size={20} className="text-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Already Bookable</h4>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Shows "Yes (Resource Name)" if a resource is already linked. Customers can book appointments with this person.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <UserPlus size={20} className="text-brand-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Make Bookable</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click this link in the table to create a bookable resource for the staff member. This links their user account to a schedulable resource automatically.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              <strong>Tip:</strong> You can also check "Make Bookable" when sending the initial invitation to create the resource automatically when they join.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Inactive Staff Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <UserX size={20} className="text-brand-500" /> Inactive Staff
+        </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">
+            Deactivated staff members appear in a collapsible section below the main table:
+          </p>
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 bg-gray-100 dark:bg-gray-700/50 rounded-lg">
+              <ChevronDown size={20} className="text-gray-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Collapsible Section</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Inactive Staff (X)" to expand and see deactivated team members. They appear grayed out.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Power size={20} className="text-green-500 mt-0.5 shrink-0" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Reactivate</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click the "Reactivate" button to restore their access. They can immediately log in again with their existing credentials.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
+            <div className="flex items-start gap-2">
+              <AlertCircle size={16} className="text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
+              <p className="text-sm text-amber-800 dark:text-amber-200">
+                <strong>Note:</strong> Deactivating staff is different from deleting them. Deactivated staff keep their data (appointment history, etc.) but cannot log in. Use this when someone leaves temporarily or you want to revoke access while preserving records.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Masquerading 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" /> Masquerading as Staff
+        </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">
+            Owners can masquerade as staff members to see the system from their perspective:
+          </p>
+          <ul className="space-y-2 mb-4">
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Training:</strong> Show new staff how to use features from their view</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Troubleshooting:</strong> Diagnose issues by seeing exactly what they see</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 shrink-0" />
+              <span className="text-gray-600 dark:text-gray-300"><strong>Permission Testing:</strong> Verify that permissions are configured correctly</span>
+            </li>
+          </ul>
+          <div className="p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
+            <div className="flex items-start gap-2">
+              <Eye size={16} className="text-indigo-500 mt-0.5 shrink-0" />
+              <p className="text-sm text-indigo-800 dark:text-indigo-200">
+                Click the <strong>"Masquerade"</strong> button in the Actions column. A banner appears at the top while masquerading - click "End Masquerade" to return to your owner view.
+              </p>
+            </div>
+          </div>
+        </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
@@ -121,45 +442,96 @@ const HelpStaff: React.FC = () => {
           <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>Security:</strong> Control who can access sensitive business data</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Security:</strong> Control who can access sensitive business data with role-based permissions
+              </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>Delegation:</strong> Let team members handle day-to-day operations</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Delegation:</strong> Let managers and staff handle day-to-day operations independently
+              </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>Accountability:</strong> Track who made changes and when</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Easy Onboarding:</strong> Email invitations make adding new team members seamless
+              </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>Flexibility:</strong> Adjust permissions as roles evolve</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Flexibility:</strong> Adjust permissions as roles evolve without changing job titles
+              </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>Resource Linking:</strong> Connect staff accounts to bookable calendars with one click
+              </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>Safe Offboarding:</strong> Deactivate staff while preserving their historical data
+              </span>
             </li>
           </ul>
         </div>
       </section>
 
+      {/* Related Features */}
       <section className="mb-10">
         <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Features</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <Link to="/help/resources" 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">
+          <Link
-            <Users size={20} className="text-brand-500" />
+            to="/help/resources"
+            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"
+          >
+            <Calendar size={20} className="text-brand-500" />
             <span className="text-gray-900 dark:text-white">Resources Guide</span>
             <ChevronRight size={16} className="text-gray-400 ml-auto" />
           </Link>
-          <Link to="/help/settings/auth" 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">
+          <Link
+            to="/help/scheduler"
+            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"
+          >
+            <Clock size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Scheduler Guide</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link
+            to="/help/settings/auth"
+            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"
+          >
             <Shield size={20} className="text-brand-500" />
             <span className="text-gray-900 dark:text-white">Authentication Settings</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>
 
+      {/* Need More Help */}
       <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
         <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Need More Help?</h3>
-        <p className="text-gray-600 dark:text-gray-300 mb-4">Our support team is ready to help with any questions.</p>
+        <p className="text-gray-600 dark:text-gray-300 mb-4">
-        <button onClick={() => navigate('/tickets')} className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors">Contact Support</button>
+          Our support team is ready to help with any questions about managing staff.
+        </p>
+        <button
+          onClick={() => navigate('/tickets')}
+          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+        >
+          Contact Support
+        </button>
       </section>
     </div>
   );