poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive help documentation system and plugin creation page

Browse Source 
- Add CreatePlugin.tsx page for custom plugin creation with code editor
- Add HelpButton component for contextual help links
- Create 21 new help pages covering all dashboard features:
  - Core: Dashboard, Scheduler, Tasks
  - Manage: Customers, Services, Resources, Staff
  - Communicate: Messages (Ticketing already existed)
  - Money: Payments
  - Extend: Plugins overview and creation guide
  - Settings: General, Resource Types, Booking, Appearance, Email, Domains, API, Auth, Billing, Quota
- Update HelpGuide.tsx as main documentation hub with quick start guide
- Add routes for all help pages in App.tsx
- Add HelpButton to Dashboard, Customers, Services, and Tasks pages

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-03 02:18:05 -05:00
parent 5cef01ad0d
commit 11bb83a85d
29 changed files with 4673 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
frontend/src/pages/help/HelpResources.tsx Normal file
View File

@@ -0,0 +1,165 @@
/**
* Help Resources 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';
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">
<ArrowLeft size={20} /> Back
</button>
<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">
<ClipboardList size={24} className="text-brand-600 dark:text-brand-400" />
</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>
</div>
</div>
</div>
<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.
</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.
</p>
</div>
</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">
<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">
<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>
</div>
</div>
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<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>
</div>
</div>
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
<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>
</div>
</div>
</div>
</div>
</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
</h2>
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-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>
<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>
</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>
<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>
</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" />
<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>
</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" />
<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>
</div>
</div>
</div>
</div>
</section>
<section className="mb-10">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<CheckCircle size={20} className="text-brand-500" /> Benefits
</h2>
<div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
<ul className="space-y-3">
<li className="flex items-start gap-2">
<ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
<span className="text-gray-700 dark:text-gray-300"><strong>No Double-Booking:</strong> System prevents scheduling conflicts automatically</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>
</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>
</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>
</li>
</ul>
</div>
</section>
<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">
<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">
<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>
</div>
</section>
<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>
</section>
</div>
);
};
export default HelpResources;