diff --git a/frontend/src/pages/help/HelpCustomers.tsx b/frontend/src/pages/help/HelpCustomers.tsx index 6e9feab..e788c36 100644 --- a/frontend/src/pages/help/HelpCustomers.tsx +++ b/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, - Trash2, CheckCircle, ChevronRight, HelpCircle, FileText, Tag, + ArrowLeft, + 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 (
- + {/* Header */}
@@ -25,101 +49,331 @@ const HelpCustomers: React.FC = () => {

Customers Guide

-

Manage your customer database

+

Manage your customer database and relationships

+ {/* Overview Section */}

Overview

- 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. +

+

+ 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.

- 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.

+ {/* The Customer Table Section */}

- Customer Information + The Customer Table

-
+

+ The main view displays all customers in a table with the following columns: +

+
- +
-

Basic Info

-

Name, email, phone number, and address

+

Customer

+

+ Avatar (or initials), full name, and any tags assigned to the customer. Click the header to sort alphabetically. +

- + +
+

Contact Info

+

+ Email address and phone number for quick reference and communication. +

+
+
+
+

Status

-

Active, Inactive, VIP, or custom statuses

+

+ Customer status badge - Active (green), Inactive (gray), or blocked (red). Click header to sort. +

- +
-

Notes

-

Internal notes about preferences and history

+

Total Spend

+

+ Cumulative amount the customer has spent at your business. Click header to sort by highest/lowest spenders. +

- +
-

Booking History

-

View all past and upcoming appointments

+

Last Visit

+

+ Date of the customer's most recent appointment. Shows "Never" for customers who haven't booked yet. Click header to sort. +

+
+
+
+ +
+

Actions

+

+ Action buttons including Masquerade (for owners) and a menu for additional options. +

+ {/* Searching and Sorting Section */}

- Key Features + Searching and Sorting

-
+
- +
-

Add Customers

-

Create new customer records with all their details

+

Search

+

+ Type in the search bar to instantly filter customers by name, email, or phone number. Results update as you type. +

- +
-

Search & Filter

-

Find customers by name, email, phone, or status

+

Sort Columns

+

+ Click any sortable column header (Customer, Status, Total Spend, Last Visit) to sort ascending/descending. Click again to reverse the order. +

- +
-

Edit Records

-

Update customer information anytime

-
-
-
- -
-

Contact

-

Quick actions to email or call customers

+

Filters

+

+ Use the Filters button to access advanced filtering options for narrowing down your customer list. +

+ {/* Adding a Customer Section */} +
+

+ Adding a Customer +

+
+

+ Click the "Add Customer" button to open the new customer form: +

+
+
+ +
+

Full Name *

+

+ The customer's name as it should appear in your records and communications. +

+
+
+
+ +
+

Email Address *

+

+ Primary email for appointment confirmations, reminders, and marketing. +

+
+
+
+ +
+

Phone Number *

+

+ Contact number for SMS reminders and direct communication. +

+
+
+
+ +
+

Location (Optional)

+

+ City, State, and ZIP code fields for address information. +

+
+
+
+ +
+

Tags (Optional)

+

+ Comma-separated labels for categorizing customers (e.g., "VIP, Referral, Corporate"). Tags appear as badges in the customer list. +

+
+
+
+
+

+ Note: New customers are created with "Active" status by default. Total Spend starts at $0.00 and increases automatically as they complete appointments. +

+
+
+
+ + {/* Customer Status Section */} +
+

+ Customer Statuses +

+
+

+ Customer status controls their ability to book and helps you categorize your customer base: +

+
+
+ + Active + +

+ Customer can book appointments and access the booking system +

+
+
+ + Inactive + +

+ Temporarily disabled - customer cannot book but record is preserved +

+
+
+ + Blocked + +

+ Customer is blocked from booking (e.g., for policy violations) +

+
+
+
+
+ + {/* Tags Section */} +
+

+ Using Tags +

+
+

+ Tags are custom labels you assign to customers for organization and segmentation: +

+
    +
  • + + VIP: Mark your best customers for special treatment +
    • +
  • + + Referral: Track customers who came through referrals +
    • +
  • + + Corporate: Identify business/corporate accounts +
    • +
  • + + New: Recently acquired customers +
    • +
+
+

+ Adding Tags: 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. +

+
+
+
+ + {/* Masquerading Section */} +
+

+ Masquerading as Customers +

+
+

+ Masquerading allows business owners to see the application exactly as a specific customer sees it. This powerful feature helps you: +

+
    +
  • + + Provide Support: Walk customers through tasks step-by-step while seeing exactly what they see +
    • +
  • + + Troubleshoot Issues: Diagnose problems by experiencing the customer's perspective +
    • +
  • + + Test Experience: Verify that booking flows and features work correctly for customers +
    • +
  • + + Book on Behalf: Complete bookings for customers who need assistance +
    • +
+
+
+ +
+

How to Masquerade

+

+ Click the "Masquerade" button in the Actions column for any customer with an associated user account. The interface will switch to show what that customer sees. +

+
+
+
+ +
+

Ending Masquerade

+

+ A notification banner appears at the top of the screen while masquerading. Click "End Masquerade" to return to your owner view. +

+
+
+
+
+
+ +

+ Owner Only: Masquerading is restricted to business owners for security. The Masquerade button only appears for customers who have created a user account. +

+
+
+
+
+ + {/* Benefits Section */}

Benefits @@ -128,45 +382,96 @@ const HelpCustomers: React.FC = () => {
  • - Personalized Service: Know your customers' preferences and history + + Personalized Service: Know your customers' preferences, history, and value at a glance +
  • - Quick Booking: Select customers instantly when scheduling appointments + + Quick Booking: Select existing customers instantly when scheduling appointments +
  • - Marketing: Segment customers for targeted campaigns and offers + + Revenue Tracking: Monitor customer lifetime value with automatic spend tracking +
  • - Communication: Store all contact info in one place for easy outreach + + Segmentation: Use tags and filters to target specific customer groups + +
    • +
  • + + + Support Tools: Masquerade feature enables hands-on customer assistance + +
    • +
  • + + + Easy Communication: One-click access to email and phone for direct contact +

+ {/* Related Features */}

Related Features

- - + + Scheduler Guide - + - Ticketing Guide + Messages Guide + + + + + Services Guide + + + + + Payments Guide
+ {/* Need More Help */}

Need More Help?

-

Our support team is ready to help with any questions.

- +

+ Our support team is ready to help with any questions about managing customers. +

+
); diff --git a/frontend/src/pages/help/HelpResources.tsx b/frontend/src/pages/help/HelpResources.tsx index 6287df0..5c5902d 100644 --- a/frontend/src/pages/help/HelpResources.tsx +++ b/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 (
- + {/* Header */}
@@ -22,94 +49,402 @@ const HelpResources: React.FC = () => {

Resources Guide

-

Manage staff, rooms, and equipment

+

Manage staff, rooms, and equipment for scheduling

+ {/* Overview Section */}

Overview

- 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. +

+

+ 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.

- 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.

+ {/* Resource Types Section */}

Resource Types

+

+ SmoothSchedule supports three built-in resource types, each with an associated icon and color coding: +

-
+

Staff

-

Team members who provide services (stylists, therapists, etc.)

+

+ Team members who provide services - stylists, therapists, consultants, doctors, etc. Can be linked to a staff user account. +

-
+
-

Rooms

-

Physical spaces (consultation rooms, studios, courts)

+

Room

+

+ Physical spaces - consultation rooms, massage rooms, studios, courts, meeting rooms, etc. +

-
+

Equipment

-

Tools and machinery that need scheduling

+

+ Tools and machinery - laser machines, MRI scanners, rental equipment, vehicles, etc. +

+
+

+ Custom Resource Types: You can create additional resource types in Settings > Resource Types to match your specific business needs (e.g., "Vehicle", "Studio", "Instructor"). +

+
+ {/* The Resources Table Section */}

- Resource Settings + The Resources Table

-
+

+ The main view shows all resources in a table with the following columns: +

+
- +
+ +
-

Availability

-

Set working hours and days for each resource

+

Resource Name

+

+ The name and type icon of the resource. The icon indicates whether it's Staff (blue person), Room (green building), or Equipment (purple wrench). +

- +
+ Type +
-

Buffer Time

-

Time between appointments for cleanup or breaks

+

Type

+

+ A color-coded badge showing the resource type (Staff, Room, or Equipment). +

- +
-

Concurrent Events

-

Allow multiple bookings at the same time (for group settings)

+

Upcoming

+

+ The count of future appointments assigned to this resource. Helps you see at a glance how busy each resource is. +

- +
-

Service Assignment

-

Which services this resource can provide

+

Capacity

+

+ Shows "1 at a time" for single-booking resources or "X simultaneous" for multilane resources that can handle multiple concurrent appointments. +

+
+
+
+ +
+

Status

+

+ Indicates whether the resource is active and available for scheduling. +

+
+
+
+ +
+

Actions

+

+ View Calendar button to see the resource's schedule, and an Edit button to modify resource settings. +

+ {/* Creating a Resource Section */} +
+

+ Creating a Resource +

+
+

+ Click the "Add Resource" button in the top right to open the creation form: +

+
    +
  1. + 1 +
    +

    Select Resource Type

    +

    + Choose Staff, Room, or Equipment from the dropdown. This determines the icon and how the resource behaves. +

    +
    +
    2. +
  2. + 2 +
    +

    Link Staff Member (Staff type only)

    +

    + 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. +

    +
    +
    3. +
  3. + 3 +
    +

    Enter Resource Name

    +

    + Give the resource a descriptive name that will appear in the scheduler and booking interface (e.g., "Sarah (Stylist)", "Massage Room 1", "Laser Machine"). +

    +
    +
    4. +
  4. + 4 +
    +

    Add Description (Optional)

    +

    + Add notes about the resource for internal reference. +

    +
    +
    5. +
  5. + 5 +
    +

    Configure Multilane Mode (Optional)

    +

    + Toggle on to allow multiple simultaneous bookings. Set the number of lanes (2-10) for resources like group classes or shared equipment. +

    +
    +
    6. +
  6. + 6 +
    +

    Save

    +

    + Click "Create Resource" to add the resource. It will appear immediately in the table and be available in the scheduler. +

    +
    +
    7. +
+
+
+ + {/* Staff Autocomplete Section */} +
+

+ Staff Member Autocomplete +

+
+

+ When creating a Staff resource, you'll use an autocomplete field to link the resource to a staff user account: +

+
+
+ +
+

Search

+

+ Start typing to filter staff members by name or email. Results appear in a dropdown below the input. +

+
+
+
+ +
+

Keyboard Navigation

+

+ Use ↑/↓ arrow keys to highlight options, Enter to select, and Escape to close the dropdown. +

+
+
+
+ +
+

Selection Confirmation

+

+ Once selected, a green indicator shows "Selected: [Name]" below the input field confirming your choice. +

+
+
+
+
+
+ +

+ 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. +

+
+
+
+
+ + {/* Multilane Mode Section */} +
+

+ Multilane Mode +

+
+

+ Multilane mode allows a single resource to handle multiple appointments at the same time. This is useful for: +

+
    +
  • + + Group fitness instructors who can teach multiple clients +
    • +
  • + + Rooms with multiple stations (salon chairs, dental chairs) +
    • +
  • + + Equipment that can be shared (3D printers, charging stations) +
    • +
  • + + Classes with limited capacity (yoga classes, workshops) +
    • +
+
+
+ +
+

Enable Multilane

+

+ Toggle the "Multilane Mode" switch in the resource form. When enabled, a number input appears. +

+
+
+
+ +
+

Set Lane Count

+

+ Enter the number of simultaneous appointments allowed (2-10). For example, set to 5 for a yoga class with 5 spots. +

+
+
+
+
+

+ In the Scheduler: When viewing a multilane resource, overlapping appointments appear in separate horizontal lanes, making it easy to see all concurrent bookings. +

+
+
+
+ + {/* Viewing a Resource Calendar Section */} +
+

+ Viewing a Resource Calendar +

+
+

+ Click the "View Calendar" button on any resource row to open a dedicated calendar view for that resource: +

+
+
+ +
+

Focused View

+

+ See only the appointments assigned to this specific resource, without clutter from other resources. +

+
+
+
+ +
+

Date Navigation

+

+ Navigate between weeks to see past and future appointments for planning and review. +

+
+
+
+ +
+

Appointment Details

+

+ Click on any appointment in the calendar to view its full details. +

+
+
+
+
+
+ + {/* Editing a Resource Section */} +
+

+ Editing a Resource +

+
+

+ Click the pencil icon in the Actions column to edit a resource. The edit form pre-fills with the current values. +

+

+ You can change: +

+
    +
  • + + Resource type (Staff, Room, Equipment) +
    • +
  • + + Linked staff member (for Staff resources) +
    • +
  • + + Resource name and description +
    • +
  • + + Multilane settings and lane count +
    • +
+
+
+ +

+ Changing a resource's type or linked staff member may affect how existing appointments display. The appointments themselves remain intact. +

+
+
+
+
+ + {/* Benefits Section */}

Benefits @@ -118,45 +453,90 @@ const HelpResources: React.FC = () => {
  • - No Double-Booking: System prevents scheduling conflicts automatically + + Prevent Double-Booking: Resources automatically block conflicting time slots +
  • - Utilization Tracking: See how busy each resource is + + Accurate Availability: Customers only see times when resources are actually free +
  • - Flexible Types: Customize resource types for your business needs + + Flexible Capacity: Multilane mode supports group bookings and shared resources +
  • - Individual Schedules: Each resource can have unique availability + + Staff Integration: Link resources to staff accounts for proper attribution and filtering + +
    • +
  • + + + Quick Visibility: Upcoming appointment counts show resource utilization at a glance +

+ {/* Related Features */}

Related Features

- + + + Scheduler Guide + + + Staff Management - + Resource Types Settings + + + Services Guide + +
+ {/* Need More Help */}

Need More Help?

-

Our support team is ready to help with any questions.

- +

+ Our support team is ready to help with any questions about managing resources. +

+
); diff --git a/frontend/src/pages/help/HelpServices.tsx b/frontend/src/pages/help/HelpServices.tsx index 30cd330..465c4f6 100644 --- a/frontend/src/pages/help/HelpServices.tsx +++ b/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 (
- + {/* Header */}
@@ -22,63 +50,378 @@ const HelpServices: React.FC = () => {

Services Guide

-

Define what you offer to customers

+

Define and manage the services your business offers

+ {/* Overview Section */}

Overview

- 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. +

+

+ 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.

- 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.

+ {/* Page Layout Section */} +
+

+ Page Layout +

+
+

+ The Services page is divided into two columns for efficient management: +

+
+
+ +
+

Left: Editable Services List

+

+ Your services in a draggable list. Reorder by dragging, edit or delete with action buttons. Shows name, description, duration, price, and photo count. +

+
+
+
+ +
+

Right: Customer Preview

+

+ A live mockup showing how customers see your services in the booking widget. Updates instantly as you reorder. +

+
+
+
+
+

+ Tip: 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! +

+
+
+
+ + {/* Service Properties Section */}

Service Properties

-
+

+ Each service has the following properties: +

+
- +
-

Name & Description

-

Clear name and detailed description for customers

+

Name *

+

+ A clear, descriptive name customers will see (e.g., "Haircut", "60-Minute Massage", "Initial Consultation"). Required. +

- +
-

Duration

-

How long the service takes (e.g., 30 min, 1 hour)

+

Duration *

+

+ How long the service takes in minutes (minimum 5, in 5-minute increments). This determines the time block reserved in the scheduler. +

- +
-

Price

-

Base price for the service (can be overridden per booking)

+

Price *

+

+ The base price for this service displayed to customers. You can override the price on individual appointments if needed. +

- +
-

Resource Requirements

-

Which resources/staff can provide this service

+

Description

+

+ Optional text describing what's included, what to expect, or any special notes. Shown to customers in the booking flow. +

+
+
+
+ +
+

Photos

+

+ Optional images showcasing the service. Multiple photos supported, reorderable. The first photo is the primary/featured image. +

+ {/* Drag and Drop Reordering Section */} +
+

+ Drag and Drop Reordering +

+
+

+ Control the display order of your services by dragging and dropping: +

+
    +
  1. + 1 +
    +

    Grab the Handle

    +

    + Click and hold the grip icon (⋮⋮) on the left side of any service card. +

    +
    +
    2. +
  2. + 2 +
    +

    Drag to New Position

    +

    + Move the service up or down in the list. Visual feedback shows where it will be placed. +

    +
    +
    3. +
  3. + 3 +
    +

    Release to Save

    +

    + Drop the service and the new order is saved automatically. The Customer Preview updates instantly. +

    +
    +
    4. +
+
+

+ Visual Feedback: When dragging, the service being moved becomes semi-transparent, and the drop target shows a highlighted border. +

+
+
+
+ + {/* Creating a Service Section */} +
+

+ Creating a Service +

+
+

+ Click the "Add Service" button in the top right to open the creation form: +

+
    +
  1. + 1 +
    +

    Enter Service Name

    +

    + Give your service a clear name (e.g., "Haircut", "Massage", "Consultation"). +

    +
    +
    2. +
  2. + 2 +
    +

    Set Duration

    +

    + Enter how many minutes the service takes. The scheduler will block this amount of time. +

    +
    +
    3. +
  3. + 3 +
    +

    Set Price

    +

    + Enter the price customers pay for this service. +

    +
    +
    4. +
  4. + 4 +
    +

    Add Description (Optional)

    +

    + Describe what's included or what customers should know. +

    +
    +
    5. +
  5. + 5 +
    +

    Upload Photos (Optional)

    +

    + Add images to showcase the service. See the Photo Gallery section below for details. +

    +
    +
    6. +
  6. + 6 +
    +

    Create

    +

    + Click "Create" to add the service. It appears at the end of the list (drag to reorder). +

    +
    +
    7. +
+
+
+ + {/* Photo Gallery Section */} +
+

+ Photo Gallery +

+
+

+ Each service can have multiple photos to showcase what customers will receive: +

+
+
+ +
+

Upload Methods

+

+ Drag and drop images directly onto the drop zone, or click "browse files" to select from your computer. Multiple images can be uploaded at once. +

+
+
+
+ +
+

Reorder Photos

+

+ Drag photos to change their order. The first photo (position 1) is the primary/featured image shown in the service listing. +

+
+
+
+ +
+

Delete Photos

+

+ Hover over a photo and click the red trash button to remove it. +

+
+
+
+ +
+

Photo Count Display

+

+ In the services list, a small image icon with count shows how many photos each service has. +

+
+
+
+
+

+ Tip: Use high-quality photos that showcase your work. The first photo is what customers see first when browsing services! +

+
+
+
+ + {/* Editing and Deleting Section */} +
+

+ Editing and Deleting +

+
+
+
+ +
+

Edit a Service

+

+ 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". +

+
+
+
+ +
+

Delete a Service

+

+ Click the trash icon on a service card. A confirmation dialog appears - click confirm to permanently delete the service. +

+
+
+
+
+
+ +

+ Note: Deleting a service does not affect existing appointments that used that service. Those appointments retain their data. +

+
+
+
+
+ + {/* Customer Preview Section */} +
+

+ Customer Preview +

+
+

+ The right side of the Services page shows a live preview of how your services appear to customers: +

+
+
+ +
+

Live Preview

+

+ The preview updates instantly when you reorder services by dragging. See exactly how the booking widget will look. +

+
+
+
+ +
+

Booking Widget Style

+

+ Styled like the actual booking interface with a branded header, service cards showing name, description, duration, and price. +

+
+
+
+ +
+

Selection Indicator

+

+ Each service shows a chevron (→) indicating it's clickable. The preview is visual only - clicking doesn't navigate. +

+
+
+
+
+

+ Preview only - not clickable +

+
+
+
+ + {/* Benefits Section */}

Benefits @@ -87,45 +430,96 @@ const HelpServices: React.FC = () => {
  • - Clear Offerings: Customers know exactly what services you provide + + Clear Offerings: Customers see exactly what services you provide with pricing upfront +
  • - Consistent Pricing: Set standard prices that apply automatically + + Consistent Pricing: Set standard prices that apply automatically to new appointments +
  • - Smart Scheduling: Duration ensures enough time is allocated + + Accurate Scheduling: Duration settings ensure the right amount of time is allocated +
  • - Better Reports: Track which services are most popular + + Custom Order: Drag to prioritize popular services at the top of customer-facing lists + +
    • +
  • + + + Visual Appeal: Photo galleries showcase your work and attract bookings + +
    • +
  • + + + Live Preview: See exactly how customers experience your service catalog +

+ {/* Related Features */}

Related Features

- + + + Scheduler Guide + + + Resources Guide - - - Scheduler Guide + + + Customers Guide + + + + + Booking Settings
+ {/* Need More Help */}

Need More Help?

-

Our support team is ready to help with any questions.

- +

+ Our support team is ready to help with any questions about managing services. +

+
); diff --git a/frontend/src/pages/help/HelpStaff.tsx b/frontend/src/pages/help/HelpStaff.tsx index 1d0f45f..96f3858 100644 --- a/frontend/src/pages/help/HelpStaff.tsx +++ b/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, - CheckCircle, ChevronRight, HelpCircle, Settings, Key, + ArrowLeft, + 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 (
- + {/* Header */}
@@ -25,94 +52,388 @@ const HelpStaff: React.FC = () => {

Staff Guide

-

Manage your team members and permissions

+

Manage your team members, roles, and permissions

+ {/* Overview Section */}

Overview

- 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. +

+

+ 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).

- 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.

+ {/* Staff Roles Section */}

Staff Roles

+

+ Each staff member has a role that determines their base level of access: +

-
- +
+
-

Owner

-

Full access to all features including billing, settings, and staff management. Cannot be removed.

+
+

Owner

+ + owner + +
+

+ 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. +

-
- +
+
-

Manager

-

Can manage scheduling, customers, services, and resources. Limited access to settings.

+
+

Manager

+ + manager + +
+

+ 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. +

-
- +
+
-

Staff

-

Basic access to view schedules and manage their own appointments. Read-only for most settings.

+
+

Staff

+ + staff + +
+

+ 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. +

+ {/* The Staff Table Section */}

- Key Features + The Staff Table

-
+

+ The main table displays active staff members with the following columns: +

+
- +
-

Invite Staff

-

Send email invitations to add new team members

+

Name

+

+ Staff member's name and email address. Displays an avatar with their initial. +

- +
-

Role Assignment

-

Set permissions based on job responsibilities

+

Role

+

+ Color-coded badge showing their role - purple for Owner, blue for Manager, gray for Staff. +

- +
-

Link to Resource

-

Connect staff accounts to bookable resources

+

Bookable Resource

+

+ 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. +

- +
-

Activity Tracking

-

See when staff last accessed the system

+

Actions

+

+ Masquerade button (owners only), Edit button to modify permissions and settings. +

+ {/* Inviting Staff Section */} +
+

+ Inviting Staff +

+
+

+ Click the "Invite Staff" button to send an email invitation: +

+
    +
  1. + 1 +
    +

    Enter Email Address

    +

    + The email address where the invitation will be sent. They'll receive a link to create their account. +

    +
    +
    2. +
  2. + 2 +
    +

    Select Role

    +

    + Choose Staff Member or Manager. Only owners can invite managers. +

    +
    +
    3. +
  3. + 3 +
    +

    Set Permissions (Optional)

    +

    + Customize which features they can access. Different permission options are available based on the selected role. +

    +
    +
    4. +
  4. + 4 +
    +

    Make Bookable (Optional)

    +

    + 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. +

    +
    +
    5. +
  5. + 5 +
    +

    Send Invitation

    +

    + Click "Send Invitation" to email them. The invitation appears in Pending Invitations until they accept. +

    +
    +
    6. +
+
+
+ + {/* Pending Invitations Section */} +
+

+ Pending Invitations +

+
+

+ When you invite someone, their invitation appears in a yellow highlighted section above the staff table: +

+
+
+ +
+

Invitation Details

+

+ Shows the invitee's email, their assigned role, and when the invitation expires. +

+
+
+
+ +
+

Resend Invitation

+

+ Click the refresh icon to send the invitation email again if they haven't received it. +

+
+
+
+ +
+

Cancel Invitation

+

+ Click the trash icon to revoke the invitation. They won't be able to join even if they click the link. +

+
+
+
+
+
+ + {/* Editing Staff Section */} +
+

+ Editing Staff +

+
+

+ Click the pencil icon on any staff row to open the edit modal: +

+
+
+ +
+

Staff Info

+

+ View the staff member's name, email, and current role badge. +

+
+
+
+ +
+

Edit Permissions

+

+ Toggle individual permissions on/off for Managers and Staff. Owners have full access and cannot be restricted. +

+
+
+
+ +
+

Danger Zone: Deactivate

+

+ 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. +

+
+
+
+
+
+ + {/* Make Bookable Section */} +
+

+ Make Staff Bookable +

+
+

+ Staff members who provide services to customers need to be "bookable" - this means they have a linked resource in the scheduler: +

+
+
+ +
+

Already Bookable

+

+ Shows "Yes (Resource Name)" if a resource is already linked. Customers can book appointments with this person. +

+
+
+
+ +
+

Make Bookable

+

+ 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. +

+
+
+
+
+

+ Tip: You can also check "Make Bookable" when sending the initial invitation to create the resource automatically when they join. +

+
+
+
+ + {/* Inactive Staff Section */} +
+

+ Inactive Staff +

+
+

+ Deactivated staff members appear in a collapsible section below the main table: +

+
+
+ +
+

Collapsible Section

+

+ Click "Inactive Staff (X)" to expand and see deactivated team members. They appear grayed out. +

+
+
+
+ +
+

Reactivate

+

+ Click the "Reactivate" button to restore their access. They can immediately log in again with their existing credentials. +

+
+
+
+
+
+ +

+ Note: 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. +

+
+
+
+
+ + {/* Masquerading Section */} +
+

+ Masquerading as Staff +

+
+

+ Owners can masquerade as staff members to see the system from their perspective: +

+
    +
  • + + Training: Show new staff how to use features from their view +
    • +
  • + + Troubleshooting: Diagnose issues by seeing exactly what they see +
    • +
  • + + Permission Testing: Verify that permissions are configured correctly +
    • +
+
+
+ +

+ Click the "Masquerade" button in the Actions column. A banner appears at the top while masquerading - click "End Masquerade" to return to your owner view. +

+
+
+
+
+ + {/* Benefits Section */}

Benefits @@ -121,45 +442,96 @@ const HelpStaff: React.FC = () => {
  • - Security: Control who can access sensitive business data + + Security: Control who can access sensitive business data with role-based permissions +
  • - Delegation: Let team members handle day-to-day operations + + Delegation: Let managers and staff handle day-to-day operations independently +
  • - Accountability: Track who made changes and when + + Easy Onboarding: Email invitations make adding new team members seamless +
  • - Flexibility: Adjust permissions as roles evolve + + Flexibility: Adjust permissions as roles evolve without changing job titles + +
    • +
  • + + + Resource Linking: Connect staff accounts to bookable calendars with one click + +
    • +
  • + + + Safe Offboarding: Deactivate staff while preserving their historical data +

+ {/* Related Features */}

Related Features

- - + + Resources Guide - + + + Scheduler Guide + + + Authentication Settings + + + Customers Guide + +
+ {/* Need More Help */}

Need More Help?

-

Our support team is ready to help with any questions.

- +

+ Our support team is ready to help with any questions about managing staff. +

+
);