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>
This commit is contained in:
poduck
@@ -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>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Physical spaces (consultation rooms, studios, courts)</p>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Room</h4>
|
||||
<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 > 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>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Set working hours and days for each resource</p>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Resource Name</h4>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Time between appointments for cleanup or breaks</p>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Type</h4>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Allow multiple bookings at the same time (for group settings)</p>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Upcoming</h4>
|
||||
<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>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">Which services this resource can provide</p>
|
||||
<h4 className="font-medium text-gray-900 dark:text-white">Capacity</h4>
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user