feat: Add comprehensive help documentation system and plugin creation page

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

frontend/src/App.tsx

@@ -67,9 +67,33 @@ const HelpTicketing = React.lazy(() => import('./pages/HelpTicketing')); // Impo
 const HelpApiDocs = React.lazy(() => import('./pages/HelpApiDocs')); // Import API documentation page
 const HelpPluginDocs = React.lazy(() => import('./pages/HelpPluginDocs')); // Import Plugin documentation page
 const HelpEmailSettings = React.lazy(() => import('./pages/HelpEmailSettings')); // Import Email settings help page
+
+// Import new help pages
+const HelpDashboard = React.lazy(() => import('./pages/help/HelpDashboard'));
+const HelpScheduler = React.lazy(() => import('./pages/help/HelpScheduler'));
+const HelpTasks = React.lazy(() => import('./pages/help/HelpTasks'));
+const HelpCustomers = React.lazy(() => import('./pages/help/HelpCustomers'));
+const HelpServices = React.lazy(() => import('./pages/help/HelpServices'));
+const HelpResources = React.lazy(() => import('./pages/help/HelpResources'));
+const HelpStaff = React.lazy(() => import('./pages/help/HelpStaff'));
+const HelpMessages = React.lazy(() => import('./pages/help/HelpMessages'));
+const HelpPayments = React.lazy(() => import('./pages/help/HelpPayments'));
+const HelpPlugins = React.lazy(() => import('./pages/help/HelpPlugins'));
+const HelpCreatePlugin = React.lazy(() => import('./pages/help/HelpCreatePlugin'));
+const HelpSettingsGeneral = React.lazy(() => import('./pages/help/HelpSettingsGeneral'));
+const HelpSettingsResourceTypes = React.lazy(() => import('./pages/help/HelpSettingsResourceTypes'));
+const HelpSettingsBooking = React.lazy(() => import('./pages/help/HelpSettingsBooking'));
+const HelpSettingsAppearance = React.lazy(() => import('./pages/help/HelpSettingsAppearance'));
+const HelpSettingsEmail = React.lazy(() => import('./pages/help/HelpSettingsEmail'));
+const HelpSettingsDomains = React.lazy(() => import('./pages/help/HelpSettingsDomains'));
+const HelpSettingsApi = React.lazy(() => import('./pages/help/HelpSettingsApi'));
+const HelpSettingsAuth = React.lazy(() => import('./pages/help/HelpSettingsAuth'));
+const HelpSettingsBilling = React.lazy(() => import('./pages/help/HelpSettingsBilling'));
+const HelpSettingsQuota = React.lazy(() => import('./pages/help/HelpSettingsQuota'));
 const PlatformSupport = React.lazy(() => import('./pages/PlatformSupport')); // Import Platform Support page (for businesses to contact SmoothSchedule)
 const PluginMarketplace = React.lazy(() => import('./pages/PluginMarketplace')); // Import Plugin Marketplace page
 const MyPlugins = React.lazy(() => import('./pages/MyPlugins')); // Import My Plugins page
+const CreatePlugin = React.lazy(() => import('./pages/CreatePlugin')); // Import Create Plugin page
 const Tasks = React.lazy(() => import('./pages/Tasks')); // Import Tasks page for scheduled plugin executions
 const EmailTemplates = React.lazy(() => import('./pages/EmailTemplates')); // Import Email Templates page
 
@@ -592,8 +616,30 @@ const AppContent: React.FC = () => {
             <Route path="/help/guide" element={<HelpGuide />} />
             <Route path="/help/ticketing" element={<HelpTicketing />} />
             <Route path="/help/api" element={<HelpApiDocs />} />
-            <Route path="/help/plugins" element={<HelpPluginDocs />} />
+            <Route path="/help/plugins/docs" element={<HelpPluginDocs />} />
             <Route path="/help/email" element={<HelpEmailSettings />} />
+            {/* New help pages */}
+            <Route path="/help/dashboard" element={<HelpDashboard />} />
+            <Route path="/help/scheduler" element={<HelpScheduler />} />
+            <Route path="/help/tasks" element={<HelpTasks />} />
+            <Route path="/help/customers" element={<HelpCustomers />} />
+            <Route path="/help/services" element={<HelpServices />} />
+            <Route path="/help/resources" element={<HelpResources />} />
+            <Route path="/help/staff" element={<HelpStaff />} />
+            <Route path="/help/messages" element={<HelpMessages />} />
+            <Route path="/help/payments" element={<HelpPayments />} />
+            <Route path="/help/plugins" element={<HelpPlugins />} />
+            <Route path="/help/plugins/create" element={<HelpCreatePlugin />} />
+            <Route path="/help/settings/general" element={<HelpSettingsGeneral />} />
+            <Route path="/help/settings/resource-types" element={<HelpSettingsResourceTypes />} />
+            <Route path="/help/settings/booking" element={<HelpSettingsBooking />} />
+            <Route path="/help/settings/appearance" element={<HelpSettingsAppearance />} />
+            <Route path="/help/settings/email" element={<HelpSettingsEmail />} />
+            <Route path="/help/settings/domains" element={<HelpSettingsDomains />} />
+            <Route path="/help/settings/api" element={<HelpSettingsApi />} />
+            <Route path="/help/settings/auth" element={<HelpSettingsAuth />} />
+            <Route path="/help/settings/billing" element={<HelpSettingsBilling />} />
+            <Route path="/help/settings/quota" element={<HelpSettingsQuota />} />
             <Route
               path="/plugins/marketplace"
               element={
@@ -614,6 +660,16 @@ const AppContent: React.FC = () => {
                 )
               }
             />
+            <Route
+              path="/plugins/create"
+              element={
+                hasAccess(['owner', 'manager']) ? (
+                  <CreatePlugin />
+                ) : (
+                  <Navigate to="/" />
+                )
+              }
+            />
             <Route
               path="/tasks"
               element={

frontend/src/components/HelpButton.tsx

@@ -0,0 +1,33 @@
+/**
+ * HelpButton Component
+ *
+ * A contextual help button that appears at the top-right of pages
+ * and links to the relevant help documentation.
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { HelpCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface HelpButtonProps {
+  helpPath: string;
+  className?: string;
+}
+
+const HelpButton: React.FC<HelpButtonProps> = ({ helpPath, className = '' }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Link
+      to={helpPath}
+      className={`inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors ${className}`}
+      title={t('common.help', 'Help')}
+    >
+      <HelpCircle size={18} />
+      <span className="hidden sm:inline">{t('common.help', 'Help')}</span>
+    </Link>
+  );
+};
+
+export default HelpButton;

frontend/src/pages/CreatePlugin.tsx

@@ -0,0 +1,568 @@
+/**
+ * Create Plugin Page
+ *
+ * Allows businesses to create custom plugins with code editor,
+ * category selection, and visibility options.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  Code,
+  Save,
+  Eye,
+  EyeOff,
+  ArrowLeft,
+  Info,
+  CheckCircle,
+  AlertTriangle,
+  Mail,
+  BarChart3,
+  Users,
+  Calendar,
+  Link as LinkIcon,
+  Bot,
+  Package,
+  Image,
+  HelpCircle,
+} from 'lucide-react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import api from '../api/client';
+import { PluginCategory } from '../types';
+import { usePlanFeatures } from '../hooks/usePlanFeatures';
+
+// Category icon mapping
+const categoryIcons: Record<PluginCategory, React.ReactNode> = {
+  EMAIL: <Mail className="h-4 w-4" />,
+  REPORTS: <BarChart3 className="h-4 w-4" />,
+  CUSTOMER: <Users className="h-4 w-4" />,
+  BOOKING: <Calendar className="h-4 w-4" />,
+  INTEGRATION: <LinkIcon className="h-4 w-4" />,
+  AUTOMATION: <Bot className="h-4 w-4" />,
+  OTHER: <Package className="h-4 w-4" />,
+};
+
+// Category descriptions
+const categoryDescriptions: Record<PluginCategory, string> = {
+  EMAIL: 'Email notifications and automated messaging',
+  REPORTS: 'Analytics, reports, and data exports',
+  CUSTOMER: 'Customer engagement and retention',
+  BOOKING: 'Scheduling and booking automation',
+  INTEGRATION: 'Third-party service integrations',
+  AUTOMATION: 'General business automation',
+  OTHER: 'Miscellaneous plugins',
+};
+
+// Default plugin code template
+const DEFAULT_PLUGIN_CODE = `# My Custom Plugin
+#
+# This plugin runs on a schedule and can interact with your business data.
+# Use template variables to make your plugin configurable.
+#
+# Available template variables:
+#   {{PROMPT:variable_name:default_value:description}}
+#   {{CONTEXT:context_type}} - Access business context (CUSTOMERS, EVENTS, etc.)
+#   {{DATE:format}} - Current date in specified format
+
+# Example: Get all customers who haven't booked in 30 days
+inactive_days = int("{{PROMPT:inactive_days:30:Days of inactivity}}")
+
+# Access customer data
+customers = {{CONTEXT:CUSTOMERS}}
+
+# Filter inactive customers
+from datetime import datetime, timedelta
+cutoff_date = datetime.now() - timedelta(days=inactive_days)
+
+inactive_customers = [
+    c for c in customers
+    if not c.get('last_booking') or
+    datetime.fromisoformat(c['last_booking']) < cutoff_date
+]
+
+# Return results (will be logged)
+result = {
+    'inactive_count': len(inactive_customers),
+    'customers': inactive_customers[:10],  # First 10 for preview
+    'message': f"Found {len(inactive_customers)} inactive customers"
+}
+`;
+
+interface FormData {
+  name: string;
+  shortDescription: string;
+  description: string;
+  category: PluginCategory;
+  pluginCode: string;
+  version: string;
+  logoUrl: string;
+  visibility: 'PRIVATE' | 'PUBLIC';
+}
+
+const CreatePlugin: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { canUse } = usePlanFeatures();
+
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    shortDescription: '',
+    description: '',
+    category: 'AUTOMATION',
+    pluginCode: DEFAULT_PLUGIN_CODE,
+    version: '1.0.0',
+    logoUrl: '',
+    visibility: 'PRIVATE',
+  });
+
+  const [showPreview, setShowPreview] = useState(false);
+  const [extractedVariables, setExtractedVariables] = useState<any[]>([]);
+
+  // Extract template variables from code
+  const extractVariables = useCallback((code: string) => {
+    const promptPattern = /\{\{PROMPT:([^:}]+):([^:}]*):([^}]*)\}\}/g;
+    const contextPattern = /\{\{CONTEXT:([^}]+)\}\}/g;
+    const datePattern = /\{\{DATE:([^}]+)\}\}/g;
+
+    const variables: any[] = [];
+    let match;
+
+    while ((match = promptPattern.exec(code)) !== null) {
+      variables.push({
+        type: 'PROMPT',
+        name: match[1],
+        default: match[2],
+        description: match[3],
+      });
+    }
+
+    while ((match = contextPattern.exec(code)) !== null) {
+      variables.push({
+        type: 'CONTEXT',
+        name: match[1],
+      });
+    }
+
+    while ((match = datePattern.exec(code)) !== null) {
+      variables.push({
+        type: 'DATE',
+        format: match[1],
+      });
+    }
+
+    return variables;
+  }, []);
+
+  // Update extracted variables when code changes
+  const handleCodeChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newCode = e.target.value;
+    setFormData(prev => ({ ...prev, pluginCode: newCode }));
+    setExtractedVariables(extractVariables(newCode));
+  };
+
+  // Create plugin mutation
+  const createMutation = useMutation({
+    mutationFn: async (data: FormData) => {
+      const payload = {
+        name: data.name,
+        short_description: data.shortDescription,
+        description: data.description,
+        category: data.category,
+        plugin_code: data.pluginCode,
+        version: data.version,
+        logo_url: data.logoUrl || undefined,
+        visibility: data.visibility,
+      };
+      const response = await api.post('/plugin-templates/', payload);
+      return response.data;
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['plugin-templates'] });
+      navigate('/plugins/my-plugins');
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    createMutation.mutate(formData);
+  };
+
+  // Check if user can create plugins
+  const canCreatePlugins = canUse('can_create_plugins');
+
+  if (!canCreatePlugins) {
+    return (
+      <div className="p-8 max-w-4xl mx-auto">
+        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-8 text-center">
+          <AlertTriangle className="h-16 w-16 mx-auto text-amber-500 mb-4" />
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            {t('plugins.upgradeRequired', 'Upgrade Required')}
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400 mb-6">
+            {t('plugins.upgradeToCreate', 'Plugin creation is available on higher-tier plans. Upgrade your subscription to create custom plugins.')}
+          </p>
+          <button
+            onClick={() => navigate('/settings/billing')}
+            className="px-6 py-3 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium"
+          >
+            {t('plugins.viewPlans', 'View Plans')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8 max-w-6xl mx-auto">
+      {/* Header */}
+      <div className="mb-8">
+        <button
+          onClick={() => navigate('/plugins/my-plugins')}
+          className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-4 transition-colors"
+        >
+          <ArrowLeft size={20} />
+          {t('common.back', 'Back')}
+        </button>
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
+              <Code className="text-brand-500" />
+              {t('plugins.createPlugin', 'Create Custom Plugin')}
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400 mt-1">
+              {t('plugins.createPluginDescription', 'Build a custom automation for your business')}
+            </p>
+          </div>
+          <a
+            href="/help/plugins"
+            target="_blank"
+            className="flex items-center gap-2 text-brand-600 dark:text-brand-400 hover:underline"
+          >
+            <HelpCircle size={18} />
+            {t('plugins.viewDocs', 'View Documentation')}
+          </a>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left Column - Basic Info */}
+          <div className="lg:col-span-1 space-y-6">
+            {/* Plugin Name */}
+            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                {t('plugins.basicInfo', 'Basic Information')}
+              </h3>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {t('plugins.pluginName', 'Plugin Name')} *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.name}
+                    onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500"
+                    placeholder="e.g., Win Back Inactive Customers"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {t('plugins.shortDescription', 'Short Description')} *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.shortDescription}
+                    onChange={(e) => setFormData(prev => ({ ...prev, shortDescription: e.target.value }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500"
+                    placeholder="Brief summary for marketplace listing"
+                    maxLength={200}
+                    required
+                  />
+                  <p className="mt-1 text-xs text-gray-500">{formData.shortDescription.length}/200</p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {t('plugins.description', 'Full Description')}
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                    rows={4}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 resize-none"
+                    placeholder="Detailed description of what this plugin does..."
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {t('plugins.category', 'Category')} *
+                  </label>
+                  <select
+                    value={formData.category}
+                    onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value as PluginCategory }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500"
+                  >
+                    {Object.entries(categoryDescriptions).map(([key, desc]) => (
+                      <option key={key} value={key}>
+                        {key} - {desc}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    {t('plugins.version', 'Version')}
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.version}
+                    onChange={(e) => setFormData(prev => ({ ...prev, version: e.target.value }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500"
+                    placeholder="1.0.0"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    <Image size={16} className="inline mr-1" />
+                    {t('plugins.logoUrl', 'Logo URL')} ({t('common.optional', 'optional')})
+                  </label>
+                  <input
+                    type="url"
+                    value={formData.logoUrl}
+                    onChange={(e) => setFormData(prev => ({ ...prev, logoUrl: e.target.value }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500"
+                    placeholder="https://example.com/logo.png"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Visibility */}
+            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                {t('plugins.visibility', 'Visibility')}
+              </h3>
+
+              <div className="space-y-3">
+                <label className="flex items-start gap-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                  <input
+                    type="radio"
+                    name="visibility"
+                    value="PRIVATE"
+                    checked={formData.visibility === 'PRIVATE'}
+                    onChange={(e) => setFormData(prev => ({ ...prev, visibility: 'PRIVATE' }))}
+                    className="mt-1"
+                  />
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <EyeOff size={16} className="text-gray-500" />
+                      <span className="font-medium text-gray-900 dark:text-white">
+                        {t('plugins.private', 'Private')}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {t('plugins.privateDescription', 'Only you can see and use this plugin')}
+                    </p>
+                  </div>
+                </label>
+
+                <label className="flex items-start gap-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                  <input
+                    type="radio"
+                    name="visibility"
+                    value="PUBLIC"
+                    checked={formData.visibility === 'PUBLIC'}
+                    onChange={(e) => setFormData(prev => ({ ...prev, visibility: 'PUBLIC' }))}
+                    className="mt-1"
+                  />
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <Eye size={16} className="text-green-500" />
+                      <span className="font-medium text-gray-900 dark:text-white">
+                        {t('plugins.public', 'Public (Marketplace)')}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {t('plugins.publicDescription', 'Submit for review to be listed in the marketplace')}
+                    </p>
+                  </div>
+                </label>
+              </div>
+
+              {formData.visibility === 'PUBLIC' && (
+                <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                  <div className="flex items-start gap-2">
+                    <Info size={16} className="text-blue-500 mt-0.5 flex-shrink-0" />
+                    <p className="text-sm text-blue-800 dark:text-blue-200">
+                      {t('plugins.publicNote', 'Public plugins require approval before appearing in the marketplace. Our team will review your code for security and quality.')}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Extracted Variables */}
+            {extractedVariables.length > 0 && (
+              <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                  {t('plugins.templateVariables', 'Detected Variables')}
+                </h3>
+                <div className="space-y-2">
+                  {extractedVariables.map((v, idx) => (
+                    <div key={idx} className="p-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg text-sm">
+                      <div className="flex items-center gap-2">
+                        <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
+                          v.type === 'PROMPT' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300' :
+                          v.type === 'CONTEXT' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' :
+                          'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+                        }`}>
+                          {v.type}
+                        </span>
+                        <span className="font-mono text-gray-900 dark:text-white">
+                          {v.name || v.format}
+                        </span>
+                      </div>
+                      {v.description && (
+                        <p className="text-gray-500 dark:text-gray-400 mt-1 ml-4">
+                          {v.description}
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Right Column - Code Editor */}
+          <div className="lg:col-span-2 space-y-6">
+            <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+              <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                  <Code size={20} className="text-brand-500" />
+                  {t('plugins.pluginCode', 'Plugin Code')}
+                </h3>
+                <button
+                  type="button"
+                  onClick={() => setShowPreview(!showPreview)}
+                  className="flex items-center gap-2 text-sm text-brand-600 dark:text-brand-400 hover:underline"
+                >
+                  {showPreview ? <EyeOff size={16} /> : <Eye size={16} />}
+                  {showPreview ? t('plugins.hidePreview', 'Hide Preview') : t('plugins.showPreview', 'Show Preview')}
+                </button>
+              </div>
+
+              {showPreview ? (
+                <div className="max-h-[600px] overflow-auto">
+                  <SyntaxHighlighter
+                    language="python"
+                    style={vscDarkPlus}
+                    customStyle={{
+                      margin: 0,
+                      borderRadius: 0,
+                      fontSize: '0.875rem',
+                    }}
+                    showLineNumbers
+                  >
+                    {formData.pluginCode}
+                  </SyntaxHighlighter>
+                </div>
+              ) : (
+                <textarea
+                  value={formData.pluginCode}
+                  onChange={handleCodeChange}
+                  rows={25}
+                  className="w-full px-4 py-4 bg-[#1e1e1e] text-gray-100 font-mono text-sm focus:outline-none resize-none"
+                  placeholder="# Write your plugin code here..."
+                  spellCheck={false}
+                />
+              )}
+            </div>
+
+            {/* Quick Reference */}
+            <div className="bg-gradient-to-r from-brand-50 to-indigo-50 dark:from-brand-900/20 dark:to-indigo-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
+              <h4 className="font-semibold text-gray-900 dark:text-white mb-3">
+                {t('plugins.quickReference', 'Quick Reference')}
+              </h4>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                <div>
+                  <p className="font-medium text-gray-900 dark:text-white mb-1">Prompt Variable</p>
+                  <code className="text-xs bg-white dark:bg-gray-800 px-2 py-1 rounded block">
+                    {`{{PROMPT:name:default:desc}}`}
+                  </code>
+                </div>
+                <div>
+                  <p className="font-medium text-gray-900 dark:text-white mb-1">Context Data</p>
+                  <code className="text-xs bg-white dark:bg-gray-800 px-2 py-1 rounded block">
+                    {`{{CONTEXT:CUSTOMERS}}`}
+                  </code>
+                </div>
+                <div>
+                  <p className="font-medium text-gray-900 dark:text-white mb-1">Date Format</p>
+                  <code className="text-xs bg-white dark:bg-gray-800 px-2 py-1 rounded block">
+                    {`{{DATE:%Y-%m-%d}}`}
+                  </code>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Error Message */}
+        {createMutation.isError && (
+          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="text-red-500" size={20} />
+              <p className="text-red-800 dark:text-red-200">
+                {createMutation.error instanceof Error ? createMutation.error.message : 'Failed to create plugin'}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Submit Buttons */}
+        <div className="flex items-center justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            type="button"
+            onClick={() => navigate('/plugins/my-plugins')}
+            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+          >
+            {t('common.cancel', 'Cancel')}
+          </button>
+          <button
+            type="submit"
+            disabled={createMutation.isPending || !formData.name || !formData.shortDescription}
+            className="flex items-center gap-2 px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+          >
+            {createMutation.isPending ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                {t('plugins.creating', 'Creating...')}
+              </>
+            ) : (
+              <>
+                <Save size={18} />
+                {formData.visibility === 'PUBLIC'
+                  ? t('plugins.createAndSubmit', 'Create & Submit for Review')
+                  : t('plugins.createPlugin', 'Create Plugin')}
+              </>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CreatePlugin;

frontend/src/pages/Customers.tsx

@@ -16,6 +16,7 @@ import {
   Eye
 } from 'lucide-react';
 import Portal from '../components/Portal';
+import HelpButton from '../components/HelpButton';
 
 interface CustomersProps {
   onMasquerade: (user: User) => void;
@@ -125,9 +126,12 @@ const Customers: React.FC<CustomersProps> = ({ onMasquerade, effectiveUser }) =>
   return (
     <div className="p-8 max-w-7xl mx-auto space-y-6">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('customers.title')}</h2>
-          <p className="text-gray-500 dark:text-gray-400">{t('customers.description')}</p>
+        <div className="flex items-start gap-4">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('customers.title')}</h2>
+            <p className="text-gray-500 dark:text-gray-400">{t('customers.description')}</p>
+          </div>
+          <HelpButton helpPath="/help/customers" />
         </div>
         <button
           onClick={() => setIsAddModalOpen(true)}

frontend/src/pages/Dashboard.tsx

@@ -12,6 +12,7 @@ import {
   Line
 } from 'recharts';
 import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import HelpButton from '../components/HelpButton';
 import { useServices } from '../hooks/useServices';
 import { useResources } from '../hooks/useResources';
 import { useAppointments } from '../hooks/useAppointments';
@@ -103,9 +104,12 @@ const Dashboard: React.FC = () => {
   if (isLoading) {
     return (
       <div className="p-8 space-y-8">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
-          <p className="text-gray-500 dark:text-gray-400">{t('common.loading')}</p>
+        <div className="flex items-start justify-between">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
+            <p className="text-gray-500 dark:text-gray-400">{t('common.loading')}</p>
+          </div>
+          <HelpButton helpPath="/help/dashboard" />
         </div>
         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
           {[1, 2, 3, 4].map((i) => (
@@ -121,9 +125,12 @@ const Dashboard: React.FC = () => {
 
   return (
     <div className="p-8 space-y-8">
-      <div>
-        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
-        <p className="text-gray-500 dark:text-gray-400">{t('dashboard.todayOverview')}</p>
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('dashboard.title')}</h2>
+          <p className="text-gray-500 dark:text-gray-400">{t('dashboard.todayOverview')}</p>
+        </div>
+        <HelpButton helpPath="/help/dashboard" />
       </div>
 
       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">

frontend/src/pages/HelpGuide.tsx

@@ -1,31 +1,196 @@
+/**
+ * Help Guide - Main Documentation Hub
+ *
+ * Comprehensive guide linking to all help pages and providing quick overviews.
+ */
+
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { BookOpen, Construction } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import {
+  BookOpen,
+  LayoutDashboard,
+  Calendar,
+  CheckSquare,
+  Users,
+  Briefcase,
+  ClipboardList,
+  UserCog,
+  MessageSquare,
+  Mail,
+  CreditCard,
+  Puzzle,
+  Settings,
+  ChevronRight,
+  HelpCircle,
+} from 'lucide-react';
+
+interface HelpSection {
+  title: string;
+  description: string;
+  links: {
+    label: string;
+    path: string;
+    icon: React.ReactNode;
+  }[];
+}
 
 const HelpGuide: React.FC = () => {
   const { t } = useTranslation();
 
+  const sections: HelpSection[] = [
+    {
+      title: 'Core Features',
+      description: 'Essential tools for managing your scheduling business',
+      links: [
+        { label: 'Dashboard', path: '/help/dashboard', icon: <LayoutDashboard size={18} /> },
+        { label: 'Scheduler', path: '/help/scheduler', icon: <Calendar size={18} /> },
+        { label: 'Tasks', path: '/help/tasks', icon: <CheckSquare size={18} /> },
+      ],
+    },
+    {
+      title: 'Manage',
+      description: 'Organize your customers, services, and resources',
+      links: [
+        { label: 'Customers', path: '/help/customers', icon: <Users size={18} /> },
+        { label: 'Services', path: '/help/services', icon: <Briefcase size={18} /> },
+        { label: 'Resources', path: '/help/resources', icon: <ClipboardList size={18} /> },
+        { label: 'Staff', path: '/help/staff', icon: <UserCog size={18} /> },
+      ],
+    },
+    {
+      title: 'Communicate',
+      description: 'Stay connected with your customers',
+      links: [
+        { label: 'Messages', path: '/help/messages', icon: <MessageSquare size={18} /> },
+        { label: 'Ticketing', path: '/help/ticketing', icon: <Mail size={18} /> },
+      ],
+    },
+    {
+      title: 'Money',
+      description: 'Handle payments and track revenue',
+      links: [
+        { label: 'Payments', path: '/help/payments', icon: <CreditCard size={18} /> },
+      ],
+    },
+    {
+      title: 'Extend',
+      description: 'Add functionality with plugins',
+      links: [
+        { label: 'Plugins Overview', path: '/help/plugins', icon: <Puzzle size={18} /> },
+        { label: 'Creating Plugins', path: '/help/plugins/create', icon: <Puzzle size={18} /> },
+        { label: 'Plugin Documentation', path: '/help/plugins/docs', icon: <BookOpen size={18} /> },
+      ],
+    },
+    {
+      title: 'Settings',
+      description: 'Configure your business settings',
+      links: [
+        { label: 'General Settings', path: '/help/settings/general', icon: <Settings size={18} /> },
+        { label: 'Resource Types', path: '/help/settings/resource-types', icon: <Settings size={18} /> },
+        { label: 'Booking Settings', path: '/help/settings/booking', icon: <Settings size={18} /> },
+        { label: 'Appearance', path: '/help/settings/appearance', icon: <Settings size={18} /> },
+        { label: 'Email Templates', path: '/help/settings/email', icon: <Settings size={18} /> },
+        { label: 'Custom Domains', path: '/help/settings/domains', icon: <Settings size={18} /> },
+        { label: 'API Settings', path: '/help/settings/api', icon: <Settings size={18} /> },
+        { label: 'Authentication', path: '/help/settings/auth', icon: <Settings size={18} /> },
+        { label: 'Billing', path: '/help/settings/billing', icon: <Settings size={18} /> },
+        { label: 'Usage & Quota', path: '/help/settings/quota', icon: <Settings size={18} /> },
+      ],
+    },
+  ];
+
   return (
-    <div className="p-8 max-w-4xl mx-auto">
+    <div className="p-8 max-w-6xl mx-auto">
+      {/* Header */}
       <div className="mb-8">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
-          <BookOpen className="text-brand-600" />
-          {t('help.guide.title', 'Platform Guide')}
-        </h1>
-        <p className="text-gray-500 dark:text-gray-400 mt-2">
-          {t('help.guide.subtitle', 'Learn how to use SmoothSchedule effectively')}
-        </p>
+        <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">
+            <BookOpen size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              {t('help.guide.title', 'Platform Guide')}
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400">
+              {t('help.guide.subtitle', 'Learn how to use SmoothSchedule effectively')}
+            </p>
+          </div>
+        </div>
       </div>
 
-      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
-        <Construction size={64} className="mx-auto text-gray-300 dark:text-gray-600 mb-4" />
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-          {t('help.guide.comingSoon', 'Coming Soon')}
-        </h2>
-        <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
-          {t('help.guide.comingSoonDesc', 'We are working on comprehensive documentation to help you get the most out of SmoothSchedule. Check back soon!')}
-        </p>
+      {/* Quick Start */}
+      <section className="mb-10">
+        <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">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Quick Start</h2>
+          <ol className="space-y-3">
+            <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>
+              <span className="text-gray-700 dark:text-gray-300">Set up your <Link to="/help/services" className="text-brand-600 hover:underline">services</Link> - what you offer to customers</span>
+            </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>
+              <span className="text-gray-700 dark:text-gray-300">Add your <Link to="/help/resources" className="text-brand-600 hover:underline">resources</Link> - staff, rooms, or equipment</span>
+            </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>
+              <span className="text-gray-700 dark:text-gray-300">Use the <Link to="/help/scheduler" className="text-brand-600 hover:underline">scheduler</Link> to manage appointments</span>
+            </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>
+              <span className="text-gray-700 dark:text-gray-300">Track your business with the <Link to="/help/dashboard" className="text-brand-600 hover:underline">dashboard</Link></span>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* Help Sections */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {sections.map((section, idx) => (
+          <div
+            key={idx}
+            className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6"
+          >
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+              {section.title}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              {section.description}
+            </p>
+            <ul className="space-y-2">
+              {section.links.map((link, linkIdx) => (
+                <li key={linkIdx}>
+                  <Link
+                    to={link.path}
+                    className="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors text-gray-700 dark:text-gray-300 hover:text-brand-600 dark:hover:text-brand-400"
+                  >
+                    <span className="text-brand-500">{link.icon}</span>
+                    <span className="flex-1">{link.label}</span>
+                    <ChevronRight size={16} className="text-gray-400" />
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
       </div>
+
+      {/* Need Help */}
+      <section className="mt-10 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">
+          Can't find what you're looking for? Our support team is ready to help.
+        </p>
+        <Link
+          to="/tickets"
+          className="inline-flex items-center gap-2 px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+        >
+          Contact Support
+        </Link>
+      </section>
     </div>
   );
 };

frontend/src/pages/Services.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Plus, Pencil, Trash2, Clock, DollarSign, X, Loader2, GripVertical, Eye, ChevronRight, Upload, ImagePlus, Image } from 'lucide-react';
+import HelpButton from '../components/HelpButton';
 import { useServices, useCreateService, useUpdateService, useDeleteService, useReorderServices } from '../hooks/useServices';
 import { Service } from '../types';
 
@@ -266,13 +267,16 @@ const Services: React.FC = () => {
   return (
     <div className="p-8 space-y-6">
       <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
-            {t('services.title', 'Services')}
-          </h2>
-          <p className="text-gray-500 dark:text-gray-400">
-            {t('services.description', 'Manage the services your business offers')}
-          </p>
+        <div className="flex items-start gap-4">
+          <div>
+            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+              {t('services.title', 'Services')}
+            </h2>
+            <p className="text-gray-500 dark:text-gray-400">
+              {t('services.description', 'Manage the services your business offers')}
+            </p>
+          </div>
+          <HelpButton helpPath="/help/services" />
         </div>
         <button
           onClick={openCreateModal}

frontend/src/pages/Tasks.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import axios from '../api/client';
+import HelpButton from '../components/HelpButton';
 import {
   Plus,
   Play,
@@ -258,13 +259,16 @@ const Tasks: React.FC = () => {
     <div className="p-6 max-w-7xl mx-auto">
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-            {t('Tasks')}
-          </h1>
-          <p className="text-gray-600 dark:text-gray-400 mt-1">
-            Schedule and manage automated plugin executions
-          </p>
+        <div className="flex items-start gap-4">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              {t('Tasks')}
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400 mt-1">
+              Schedule and manage automated plugin executions
+            </p>
+          </div>
+          <HelpButton helpPath="/help/tasks" />
         </div>
         <button
           onClick={() => setShowCreateModal(true)}

frontend/src/pages/help/HelpCreatePlugin.tsx

@@ -0,0 +1,189 @@
+/**
+ * Help Create Plugin Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Code, FileCode, Play, Settings, Eye,
+  CheckCircle, ChevronRight, HelpCircle, Puzzle, BookOpen,
+} from 'lucide-react';
+
+const HelpCreatePlugin: 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">
+            <Code size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Creating Plugins Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Build custom plugins for your business</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">
+          <Code 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">
+            Create custom plugins to automate workflows, generate reports, send notifications, and more. Plugins use AI-powered prompts that can access your business data to perform specific actions.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            No coding experience required - simply describe what you want the plugin to do using natural language prompts.
+          </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">
+          <FileCode size={20} className="text-brand-500" /> Plugin Components
+        </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">
+              <Settings size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Basic Information</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Name, description, category, and version for your plugin</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Code size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Plugin Code</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">AI prompt instructions that define plugin behavior</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Visibility</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Private (only you) or Public (share with community)</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">
+          <Play size={20} className="text-brand-500" /> Template Variables
+        </h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            Use these special variables in your plugin code to access dynamic data:
+          </p>
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg font-mono">
+              <code className="text-brand-600 dark:text-brand-400">{"{{PROMPT}}"}</code>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- User input when running the plugin</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg font-mono">
+              <code className="text-brand-600 dark:text-brand-400">{"{{CONTEXT}}"}</code>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Additional context data from the system</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg font-mono">
+              <code className="text-brand-600 dark:text-brand-400">{"{{DATE}}"}</code>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Current date for time-based operations</span>
+            </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">
+          <Puzzle size={20} className="text-brand-500" /> Plugin Categories
+        </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-3">
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Scheduling</span>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Appointment automation</p>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Communication</span>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Messages and notifications</p>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Analytics</span>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Reports and insights</p>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Integration</span>
+              <p className="text-sm text-gray-500 dark:text-gray-400">External service connections</p>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Automation</span>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Workflow automation</p>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Other</span>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Custom functionality</p>
+            </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" /> Best Practices
+        </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>Be Specific:</strong> Write clear, detailed prompts for better results</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>Test First:</strong> Run plugins in test mode before production use</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>Version Control:</strong> Update version numbers when making changes</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>Document:</strong> Add clear descriptions for easy understanding</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Guides</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/plugins" 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">
+            <Puzzle size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Plugins Overview</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link to="/help/plugins/docs" 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">
+            <BookOpen size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Plugin Documentation</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 HelpCreatePlugin;

frontend/src/pages/help/HelpCustomers.tsx

@@ -0,0 +1,175 @@
+/**
+ * Help Customers 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,
+} from 'lucide-react';
+
+const HelpCustomers: 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">
+            <Users size={24} className="text-brand-600 dark:text-brand-400" />
+          </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>
+          </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">
+          <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.
+          </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.
+          </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">
+          <FileText size={20} className="text-brand-500" /> Customer Information
+        </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">
+              <Users size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Basic Info</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Name, email, phone number, and address</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" />
+              <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>
+              </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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Notes</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Internal notes about preferences and history</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <CheckCircle size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Booking History</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">View all past and upcoming appointments</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" /> Key Features
+        </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">
+              <UserPlus size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Add Customers</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Create new customer records with all their details</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Search & Filter</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Find customers by name, email, phone, or status</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Edit Records</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Update customer information anytime</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-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>
+
+      <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>Personalized Service:</strong> Know your customers' preferences and history</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>
+            </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>
+            </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>
+            </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/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">
+            <CheckCircle 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">
+            <Mail size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Ticketing Guide</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 HelpCustomers;

frontend/src/pages/help/HelpDashboard.tsx

@@ -0,0 +1,228 @@
+/**
+ * Help Dashboard Page
+ *
+ * Comprehensive help documentation for the Dashboard.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft,
+  LayoutDashboard,
+  BarChart3,
+  TrendingUp,
+  Users,
+  Calendar,
+  Briefcase,
+  ClipboardList,
+  CheckCircle,
+  ChevronRight,
+  HelpCircle,
+} from 'lucide-react';
+
+const HelpDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4">
+      {/* 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} />
+        {t('common.back', '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">
+            <LayoutDashboard size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Dashboard Guide
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400">
+              Your business at a glance
+            </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">
+          <BarChart3 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 Dashboard is your command center for understanding your business performance. It provides real-time insights into appointments, customers, services, and resources, helping you make informed decisions quickly.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            All metrics update automatically as you add new appointments, register customers, and manage your business operations.
+          </p>
+        </div>
+      </section>
+
+      {/* Key Metrics Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <TrendingUp size={20} className="text-brand-500" />
+          Key Metrics
+        </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 Dashboard displays four primary metrics that give you an instant snapshot of your business:
+          </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">
+              <Calendar size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Total Appointments</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The number of appointments in your system. Shows trend compared to previous period.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Users size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Active Customers</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Customers with "Active" status who can book appointments with your business.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Briefcase size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Services</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  The total number of services you offer. Click to manage your service catalog.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <ClipboardList size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Resources</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Staff, rooms, and equipment available for booking. Essential for scheduling.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Charts Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <BarChart3 size={20} className="text-brand-500" />
+          Analytics Charts
+        </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-6">
+            <div>
+              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Weekly Revenue Chart</h4>
+              <p className="text-sm text-gray-600 dark:text-gray-300">
+                A bar chart showing revenue by day of the week. Helps identify your busiest and most profitable days. Calculated from appointment prices.
+              </p>
+            </div>
+            <div>
+              <h4 className="font-medium text-gray-900 dark:text-white mb-2">Weekly Appointments Chart</h4>
+              <p className="text-sm text-gray-600 dark:text-gray-300">
+                A line chart showing appointment counts by day. Useful for staffing decisions and understanding demand patterns throughout the week.
+              </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
+        </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>Quick Overview:</strong> See your entire business performance in seconds
+              </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>Trend Tracking:</strong> Understand if your business is growing with percentage changes
+              </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>Data-Driven Decisions:</strong> Use charts to identify patterns and optimize operations
+              </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>Real-Time Updates:</strong> All metrics refresh automatically as your data changes
+              </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"
+          >
+            <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/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">
+          If you have questions that aren't covered here, our support team is ready to help.
+        </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 HelpDashboard;

frontend/src/pages/help/HelpMessages.tsx

@@ -0,0 +1,162 @@
+/**
+ * Help Messages Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, MessageSquare, Send, Inbox, Users, Bell,
+  CheckCircle, ChevronRight, HelpCircle, Search, Archive,
+} from 'lucide-react';
+
+const HelpMessages: 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">
+            <MessageSquare size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Messages Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Communicate with your customers</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">
+          <MessageSquare 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 Messages feature provides a centralized inbox for all customer communications. Send and receive messages, track conversation history, and maintain clear communication records.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            Keep all customer interactions in one place for easy reference and better customer service.
+          </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">
+          <Inbox size={20} className="text-brand-500" /> Message Features
+        </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">
+              <Inbox size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Unified Inbox</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">All customer messages in one central location</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Send size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Send Messages</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Compose and send messages to customers directly</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-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Search History</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Find past conversations quickly with search</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Archive size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Archive & Organize</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Keep your inbox organized with archiving</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">
+          <Bell size={20} className="text-brand-500" /> Notifications
+        </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">
+            Stay informed about new messages with real-time notifications. Configure how and when you want to be notified about incoming customer communications.
+          </p>
+          <ul className="space-y-2 text-gray-600 dark:text-gray-300">
+            <li className="flex items-center gap-2">
+              <CheckCircle size={16} className="text-green-500" />
+              In-app notification badges
+            </li>
+            <li className="flex items-center gap-2">
+              <CheckCircle size={16} className="text-green-500" />
+              Email notifications for new messages
+            </li>
+            <li className="flex items-center gap-2">
+              <CheckCircle size={16} className="text-green-500" />
+              Unread message indicators
+            </li>
+          </ul>
+        </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>Centralized:</strong> All communications in one place</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>History:</strong> Complete record of all customer interactions</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>Responsive:</strong> Quick responses improve customer satisfaction</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>Professional:</strong> Consistent communication experience</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/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>
+          <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">
+            <MessageSquare size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Ticketing Guide</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 HelpMessages;

frontend/src/pages/help/HelpPayments.tsx

@@ -0,0 +1,167 @@
+/**
+ * Help Payments Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, CreditCard, DollarSign, Receipt, TrendingUp, RefreshCw,
+  CheckCircle, ChevronRight, HelpCircle, Calendar, FileText,
+} from 'lucide-react';
+
+const HelpPayments: 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">
+            <CreditCard size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Payments Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Manage transactions and revenue</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">
+          <CreditCard 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 Payments page is your financial hub. Track all transactions, process payments, issue refunds, and view revenue reports. Integrated with Stripe for secure payment processing.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            Get real-time insights into your business revenue and manage all payment-related activities in one place.
+          </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">
+          <DollarSign size={20} className="text-brand-500" /> Payment Features
+        </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">
+              <CreditCard size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Process Payments</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Accept credit cards, debit cards, and digital wallets</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Receipt size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Transaction History</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">View all past payments with detailed records</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-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Refunds</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Process full or partial refunds when needed</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <TrendingUp size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Revenue Reports</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Track earnings by day, week, month, or custom range</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">
+          <FileText size={20} className="text-brand-500" /> Payment Status
+        </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-3">
+            <div className="flex items-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <div className="w-3 h-3 rounded-full bg-green-500" />
+              <span className="font-medium text-gray-900 dark:text-white">Completed</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Payment successfully processed</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+              <div className="w-3 h-3 rounded-full bg-yellow-500" />
+              <span className="font-medium text-gray-900 dark:text-white">Pending</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Payment awaiting processing</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
+              <div className="w-3 h-3 rounded-full bg-red-500" />
+              <span className="font-medium text-gray-900 dark:text-white">Failed</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Payment could not be processed</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <div className="w-3 h-3 rounded-full bg-gray-500" />
+              <span className="font-medium text-gray-900 dark:text-white">Refunded</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Payment has been refunded</span>
+            </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>Secure:</strong> PCI-compliant payment processing via Stripe</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>Automatic:</strong> Payments linked to appointments 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>Reporting:</strong> Detailed financial reports for accounting</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:</strong> Support for deposits, full payments, and tips</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/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/settings/billing" 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">
+            <CreditCard size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Billing 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 HelpPayments;

frontend/src/pages/help/HelpPlugins.tsx

@@ -0,0 +1,175 @@
+/**
+ * Help Plugins Overview Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Puzzle, Store, Code, Zap, Settings,
+  CheckCircle, ChevronRight, HelpCircle, Shield, Download,
+} from 'lucide-react';
+
+const HelpPlugins: 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">
+            <Puzzle size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Plugins Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Extend your scheduling platform</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">
+          <Puzzle 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">
+            Plugins extend the functionality of your scheduling platform. Browse the marketplace for ready-made solutions, or create custom plugins tailored to your specific business needs.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            Plugins can automate tasks, integrate with external services, add new features, and customize how your scheduling system works.
+          </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" /> Plugin Areas
+        </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">
+              <Store size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Marketplace</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Browse and install plugins from the community</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Puzzle size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">My Plugins</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Manage your installed and custom plugins</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Code size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Create Plugin</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Build custom plugins with our development tools</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Zap size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Plugin Actions</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Configure how plugins interact with your system</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">
+          <Download size={20} className="text-brand-500" /> Getting Started
+        </h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+          <ol className="space-y-4">
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Browse Marketplace</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Explore available plugins by category or search for specific functionality.</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">Install Plugin</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Click "Install" on any plugin to add it to your 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">3</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Configure Settings</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Set up plugin options and connect any required integrations.</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">Run Plugin</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Execute plugins on-demand or set up automatic triggers.</p>
+              </div>
+            </li>
+          </ol>
+        </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>Automation:</strong> Automate repetitive tasks and workflows</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>Integration:</strong> Connect with external services and tools</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>Customization:</strong> Tailor functionality to your 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>Community:</strong> Access plugins built by other users</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Guides</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/plugins/create" 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">
+            <Code size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Creating Plugins</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link to="/help/plugins/docs" 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">Plugin Documentation</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 HelpPlugins;

frontend/src/pages/help/HelpResources.tsx

@@ -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;

frontend/src/pages/help/HelpScheduler.tsx

@@ -0,0 +1,300 @@
+/**
+ * Help Scheduler Page
+ *
+ * Comprehensive help documentation for the Scheduler.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft,
+  CalendarDays,
+  Clock,
+  Users,
+  Filter,
+  Plus,
+  Edit,
+  Trash2,
+  CheckCircle,
+  ChevronRight,
+  HelpCircle,
+  Eye,
+  Calendar,
+  Grid,
+} from 'lucide-react';
+
+const HelpScheduler: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4">
+      {/* 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} />
+        {t('common.back', '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">
+            <CalendarDays size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Scheduler Guide
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400">
+              Manage appointments and view your calendar
+            </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">
+          <CalendarDays 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 Scheduler is your central hub for managing all appointments and events. It provides a visual calendar interface that lets you see availability, book new appointments, and manage existing bookings efficiently.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            The scheduler supports multiple view modes and filtering options to help you find exactly what you need, whether you're looking at a single day or planning weeks ahead.
+          </p>
+        </div>
+      </section>
+
+      {/* Calendar Views Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Grid size={20} className="text-brand-500" />
+          Calendar Views
+        </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">
+              <Calendar size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Day View</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  See all appointments for a single day in a detailed timeline format. Best for managing busy days with many appointments.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Grid size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Week View</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  View an entire week at once, ideal for planning and understanding weekly patterns. See appointments across all days.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <CalendarDays size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Month View</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Get a high-level overview of the entire month. Great for identifying busy periods and planning ahead.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Key Features 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" />
+          Key Features
+        </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">
+              <Plus size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Create Appointments</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click on any time slot to create a new appointment. Select customer, service, and resource.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Edit size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Edit Appointments</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click on any existing appointment to modify its details, reschedule, or add notes.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Filter size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Filter by Resource</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Filter the calendar to show only specific staff members, rooms, or equipment.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Eye size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Status Colors</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Appointments are color-coded by status: scheduled, confirmed, completed, cancelled, no-show.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* How to Use 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" />
+          How to Use
+        </h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+          <ol className="space-y-4">
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Navigate to Scheduler</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Scheduler" in the sidebar to open the calendar view.
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">2</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Choose Your View</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Select day, week, or month view using the view toggle buttons.
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">3</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Create an Appointment</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click the "+" button or click on an empty time slot to open the appointment form.
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">4</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Fill in Details</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Select a customer, choose a service, pick an available resource, and set the time.
+                </p>
+              </div>
+            </li>
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">5</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Save & Confirm</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Save" to create the appointment. Customers can receive automatic notifications.
+                </p>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* Benefits Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <CheckCircle size={20} className="text-brand-500" />
+          Benefits
+        </h2>
+        <div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
+          <ul className="space-y-3">
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Visual Scheduling:</strong> See your entire schedule at a glance with intuitive calendar layouts
+              </span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Conflict Prevention:</strong> System prevents double-booking of resources and staff
+              </span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Quick Actions:</strong> Create, edit, and cancel appointments with just a few clicks
+              </span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Multi-Resource:</strong> Manage staff, rooms, and equipment schedules in one place
+              </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"
+          >
+            <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/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"
+          >
+            <Clock 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">
+          If you have questions that aren't covered here, our support team is ready to help.
+        </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 HelpScheduler;

frontend/src/pages/help/HelpServices.tsx

@@ -0,0 +1,134 @@
+/**
+ * Help Services 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';
+
+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">
+        <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">
+            <Briefcase size={24} className="text-brand-600 dark:text-brand-400" />
+          </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>
+          </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">
+          <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.
+          </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.
+          </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" /> 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">
+            <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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Name & Description</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Clear name and detailed description for customers</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">Duration</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">How long the service takes (e.g., 30 min, 1 hour)</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Price</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Base price for the service (can be overridden per booking)</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Resource Requirements</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Which resources/staff can provide this service</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>Clear Offerings:</strong> Customers know exactly what services you provide</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>
+            </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>
+            </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>
+            </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/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">
+            <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>
+        </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 HelpServices;

frontend/src/pages/help/HelpSettingsApi.tsx

@@ -0,0 +1,160 @@
+/**
+ * Help Settings API Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Code, Key, Shield, Zap, FileText,
+  CheckCircle, ChevronRight, HelpCircle, Lock,
+} from 'lucide-react';
+
+const HelpSettingsApi: 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">
+            <Code size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">API Settings Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Integrate with external systems</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">
+          <Code 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 API allows you to programmatically access your scheduling data. Create integrations with your website, mobile app, or other business systems.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            API access requires a Business plan or higher.
+          </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">
+          <Key size={20} className="text-brand-500" /> API Keys
+        </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">
+              <Key size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Generate Keys</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Create new API keys for authentication</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Lock size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Key Permissions</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Set read/write access levels per key</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-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Revoke Keys</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Disable compromised or unused keys</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Zap size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Rate Limits</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">View your API usage and limits</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">
+          <FileText size={20} className="text-brand-500" /> Available Endpoints
+        </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-3 font-mono text-sm">
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="text-green-600">GET</span> <span className="text-gray-600 dark:text-gray-300">/api/appointments</span>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="text-green-600">GET</span> <span className="text-gray-600 dark:text-gray-300">/api/customers</span>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="text-green-600">GET</span> <span className="text-gray-600 dark:text-gray-300">/api/services</span>
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="text-green-600">GET</span> <span className="text-gray-600 dark:text-gray-300">/api/resources</span>
+            </div>
+          </div>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">See full documentation for complete endpoint list.</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">
+          <CheckCircle size={20} className="text-brand-500" /> Security Best Practices
+        </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">Never share API keys in public code repositories</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">Use separate keys for different integrations</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">Rotate keys periodically for security</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">Grant minimum required permissions</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/plugins" 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">
+            <Zap size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Plugins 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>
+        </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 HelpSettingsApi;

frontend/src/pages/help/HelpSettingsAppearance.tsx

@@ -0,0 +1,154 @@
+/**
+ * Help Settings Appearance Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Palette, Image, Type, Layout, Eye,
+  CheckCircle, ChevronRight, HelpCircle, Sun, Moon,
+} from 'lucide-react';
+
+const HelpSettingsAppearance: 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">
+            <Palette size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Appearance Settings Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Customize your brand and look</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">
+          <Palette 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">
+            Appearance Settings let you customize how your booking page looks to customers. Upload your logo, set brand colors, and create a cohesive visual experience that matches your brand identity.
+          </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">
+          <Image size={20} className="text-brand-500" /> Branding Options
+        </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">
+              <Image size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Logo</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Upload your business logo for the booking page</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-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Favicon</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Small icon shown in browser tabs</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Palette size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Brand Color</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Primary color used throughout the interface</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Type size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Custom CSS</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Advanced styling with custom CSS (Pro plan)</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">
+          <Layout size={20} className="text-brand-500" /> Theme Options
+        </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">
+              <Sun size={20} className="text-yellow-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Light Mode</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Clean, bright interface for daytime use</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Moon size={20} className="text-indigo-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Dark Mode</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Easy on the eyes in low-light conditions</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" /> Tips
+        </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">Use a high-resolution logo (at least 200x200 pixels)</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">Choose brand colors that provide good contrast for readability</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">Test your booking page in both light and dark modes</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/settings/general" 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">
+            <Eye size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">General Settings</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link to="/help/settings/domains" 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">
+            <Layout size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Custom Domains</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 HelpSettingsAppearance;

frontend/src/pages/help/HelpSettingsAuth.tsx

@@ -0,0 +1,165 @@
+/**
+ * Help Settings Authentication Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Shield, Key, Lock, Users, Smartphone,
+  CheckCircle, ChevronRight, HelpCircle, LogIn,
+} from 'lucide-react';
+
+const HelpSettingsAuth: 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">
+            <Shield size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Authentication Settings Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Configure login and security</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">
+          <Shield 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">
+            Authentication Settings control how users log in to your system. Configure security policies, enable two-factor authentication, and manage social login options.
+          </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">
+          <Lock size={20} className="text-brand-500" /> Security Features
+        </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">
+              <Smartphone size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Two-Factor Auth (2FA)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Require additional verification for logins</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Key size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Password Policies</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Set minimum password requirements</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Lock size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Session Timeout</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Auto-logout after inactivity</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-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Login Attempts</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Lock accounts after failed attempts</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">
+          <LogIn size={20} className="text-brand-500" /> Login Options
+        </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">
+              <Key size={20} className="text-gray-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Email & Password</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Traditional login with email and password</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Social Login</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Sign in with Google, Apple, or other providers</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-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">SSO (Single Sign-On)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Enterprise integration with SAML/OIDC</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" /> Security Tips
+        </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">Enable 2FA for all staff accounts</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">Use strong, unique passwords for each service</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">Review login activity regularly</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">Set appropriate session timeouts</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 Guide</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link to="/help/settings/api" 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">
+            <Key size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">API 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 HelpSettingsAuth;

frontend/src/pages/help/HelpSettingsBilling.tsx

@@ -0,0 +1,155 @@
+/**
+ * Help Settings Billing Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, CreditCard, FileText, Clock, TrendingUp, Shield,
+  CheckCircle, ChevronRight, HelpCircle, DollarSign,
+} from 'lucide-react';
+
+const HelpSettingsBilling: 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">
+            <CreditCard size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Billing Settings Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Manage your subscription and payments</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">
+          <CreditCard 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">
+            Billing Settings let you manage your subscription plan, update payment methods, view invoices, and monitor your usage. Keep your account in good standing to maintain access to all features.
+          </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">
+          <DollarSign size={20} className="text-brand-500" /> Subscription Management
+        </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">
+              <TrendingUp size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Current Plan</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">View your active subscription tier and features</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <CreditCard size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Payment Method</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Update credit card or payment details</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Invoices</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Download past invoices and receipts</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Billing Cycle</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">View next billing date and renewal info</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">
+          <Shield size={20} className="text-brand-500" /> Plan Features
+        </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">
+            Different plans unlock different features:
+          </p>
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Free</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Basic scheduling, limited resources</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Pro</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- More resources, custom branding, payments</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+              <span className="font-medium text-gray-900 dark:text-white">Business</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Unlimited resources, API access, priority support</span>
+            </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" /> Tips
+        </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">Keep payment methods up to date to avoid service interruption</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">Annual billing saves money compared to monthly</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">Download invoices for your accounting records</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/settings/quota" 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">
+            <TrendingUp size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Usage & Quota</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>
+
+      <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 HelpSettingsBilling;

frontend/src/pages/help/HelpSettingsBooking.tsx

@@ -0,0 +1,168 @@
+/**
+ * Help Settings Booking Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Calendar, Clock, Bell, Shield, CreditCard,
+  CheckCircle, ChevronRight, HelpCircle, AlertCircle,
+} from 'lucide-react';
+
+const HelpSettingsBooking: 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">
+            <Calendar size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Booking Settings Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Configure how customers book appointments</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">
+          <Calendar 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">
+            Booking Settings control how customers interact with your scheduling system. Configure booking windows, cancellation policies, confirmation requirements, and more.
+          </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">
+          <Clock size={20} className="text-brand-500" /> Time 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">
+              <Clock size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Booking Window</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">How far in advance customers can book</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <AlertCircle size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Minimum Notice</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Minimum time before appointment for booking</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">Gap between consecutive appointments</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Time Slots</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Interval between available booking times</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">
+          <Shield size={20} className="text-brand-500" /> Policies
+        </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">
+              <Shield size={20} className="text-red-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Cancellation Policy</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">How late customers can cancel without penalty</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Bell size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Confirmation Required</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Require staff to confirm new bookings</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <CreditCard size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Deposit Required</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Collect payment upfront for bookings</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Auto-Confirm</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Automatically confirm bookings instantly</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" /> Best Practices
+        </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">Set minimum notice time to avoid last-minute 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">Use buffer time if services need cleanup or preparation</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">Consider deposits for high-value services to reduce no-shows</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/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/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">
+            <CreditCard 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>
+
+      <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 HelpSettingsBooking;

frontend/src/pages/help/HelpSettingsDomains.tsx

@@ -0,0 +1,167 @@
+/**
+ * Help Settings Custom Domains Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Globe, Shield, Link as LinkIcon, CheckCircle,
+  ChevronRight, HelpCircle, Settings, AlertCircle,
+} from 'lucide-react';
+
+const HelpSettingsDomains: 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">
+            <Globe size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Custom Domains Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Use your own domain for booking</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">
+          <Globe 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">
+            Custom Domains let you use your own domain name (like booking.yourcompany.com) instead of the default subdomain. This creates a more professional, branded experience for your customers.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            Custom domains are available on Pro and Business plans.
+          </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" /> Setup Process
+        </h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+          <ol className="space-y-4">
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Add Domain</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Enter your custom domain in the settings</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">Configure DNS</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Add CNAME record pointing to our servers</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">Verify</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Click verify to confirm DNS is configured</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">SSL Certificate</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">We automatically provision an SSL certificate</p>
+              </div>
+            </li>
+          </ol>
+        </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">
+          <AlertCircle size={20} className="text-brand-500" /> DNS Configuration
+        </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">
+            Add this CNAME record to your DNS provider:
+          </p>
+          <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg font-mono text-sm">
+            <div className="grid grid-cols-3 gap-4">
+              <div>
+                <span className="text-gray-500">Type:</span>
+                <div className="text-gray-900 dark:text-white">CNAME</div>
+              </div>
+              <div>
+                <span className="text-gray-500">Name:</span>
+                <div className="text-gray-900 dark:text-white">booking</div>
+              </div>
+              <div>
+                <span className="text-gray-500">Value:</span>
+                <div className="text-gray-900 dark:text-white">cname.smoothschedule.com</div>
+              </div>
+            </div>
+          </div>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
+            DNS changes can take up to 48 hours to propagate.
+          </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">
+          <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>Professional:</strong> Use your own branded domain</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>Trust:</strong> Customers see your domain, not ours</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>SEO:</strong> Build search rankings on your domain</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>SSL:</strong> Automatic HTTPS encryption included</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/settings/general" 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">General Settings</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link to="/help/settings/appearance" 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">
+            <LinkIcon size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Appearance 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 HelpSettingsDomains;

frontend/src/pages/help/HelpSettingsEmail.tsx

@@ -0,0 +1,158 @@
+/**
+ * Help Settings Email Templates Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Mail, FileText, Edit, Eye, Bell,
+  CheckCircle, ChevronRight, HelpCircle, Code,
+} from 'lucide-react';
+
+const HelpSettingsEmail: 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">
+            <Mail size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Email Templates Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Customize automated emails</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">
+          <Mail 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">
+            Email Templates let you customize the automated emails sent to customers. Personalize confirmation messages, reminders, and notifications to match your brand voice.
+          </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">
+          <FileText size={20} className="text-brand-500" /> Template 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-2 gap-4">
+            <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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Booking Confirmation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Sent when appointment is booked</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Bell size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Appointment Reminder</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Sent before the appointment</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Reschedule Notice</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Sent when appointment is changed</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-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Cancellation</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Sent when appointment is cancelled</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">
+          <Code size={20} className="text-brand-500" /> Template Variables
+        </h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            Use these variables in your templates to include dynamic content:
+          </p>
+          <div className="space-y-3 font-mono text-sm">
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <code className="text-brand-600">{"{{customer_name}}"}</code> - Customer's full name
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <code className="text-brand-600">{"{{service_name}}"}</code> - Name of the booked service
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <code className="text-brand-600">{"{{appointment_date}}"}</code> - Date of appointment
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <code className="text-brand-600">{"{{appointment_time}}"}</code> - Time of appointment
+            </div>
+            <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <code className="text-brand-600">{"{{business_name}}"}</code> - Your business name
+            </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" /> Best Practices
+        </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">Keep emails concise and include only essential information</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">Use preview mode to test templates before activating</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">Include clear calls to action (cancel, reschedule links)</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/settings/appearance" 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">
+            <Eye size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Appearance Settings</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">
+            <Bell 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>
+
+      <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 HelpSettingsEmail;

frontend/src/pages/help/HelpSettingsGeneral.tsx

@@ -0,0 +1,130 @@
+/**
+ * Help Settings General Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Settings, Building, Globe, Clock, MapPin,
+  CheckCircle, ChevronRight, HelpCircle,
+} from 'lucide-react';
+
+const HelpSettingsGeneral: 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">
+            <Settings size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">General Settings Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Configure your business basics</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">
+          <Settings 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">
+            General Settings contain the core configuration for your business. Set your business name, contact information, timezone, and other fundamental settings that affect your entire account.
+          </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">
+          <Building size={20} className="text-brand-500" /> Business Information
+        </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">
+              <Building size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Business Name</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Your company name displayed to customers</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Globe size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Subdomain</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Your unique URL for customer booking</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Clock size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Timezone</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Business timezone for scheduling</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Address</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Business location and contact details</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" /> Tips
+        </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">Set your timezone correctly to ensure appointments display at the right times</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">Your subdomain cannot be changed after creation - choose wisely</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">Keep contact information up to date for customer communications</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/settings/appearance" 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">Appearance Settings</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link to="/help/settings/domains" 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">
+            <Globe size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Custom Domains</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 HelpSettingsGeneral;

frontend/src/pages/help/HelpSettingsQuota.tsx

@@ -0,0 +1,155 @@
+/**
+ * Help Settings Quota Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, BarChart2, TrendingUp, AlertTriangle, Users, Calendar,
+  CheckCircle, ChevronRight, HelpCircle, CreditCard,
+} from 'lucide-react';
+
+const HelpSettingsQuota: 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">
+            <BarChart2 size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Usage & Quota Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Monitor your plan limits</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">
+          <BarChart2 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 Usage & Quota page shows your current usage against your plan limits. Monitor resources, appointments, staff members, and other tracked metrics to ensure you stay within your plan.
+          </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">
+          <TrendingUp size={20} className="text-brand-500" /> Tracked Metrics
+        </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">
+              <Users size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Resources</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Staff, rooms, and equipment count</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-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Appointments</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Monthly appointment count</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">Staff Members</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Team members with login access</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <BarChart2 size={20} className="text-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Storage</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">File and image storage used</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">
+          <AlertTriangle size={20} className="text-brand-500" /> Limit Warnings
+        </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-3">
+            <div className="flex items-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
+              <div className="w-3 h-3 rounded-full bg-green-500" />
+              <span className="font-medium text-gray-900 dark:text-white">Under 75%</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Plenty of room remaining</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
+              <div className="w-3 h-3 rounded-full bg-yellow-500" />
+              <span className="font-medium text-gray-900 dark:text-white">75% - 90%</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Consider upgrading soon</span>
+            </div>
+            <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
+              <div className="w-3 h-3 rounded-full bg-red-500" />
+              <span className="font-medium text-gray-900 dark:text-white">Over 90%</span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">- Approaching limit, upgrade recommended</span>
+            </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" /> Tips
+        </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">Check usage regularly to avoid unexpected limits</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">Remove inactive resources to free up quota</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">Upgrade before hitting limits to avoid disruption</span>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Related Settings</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Link to="/help/settings/billing" 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">
+            <CreditCard size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Billing Settings</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>
+        </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 HelpSettingsQuota;

frontend/src/pages/help/HelpSettingsResourceTypes.tsx

@@ -0,0 +1,164 @@
+/**
+ * Help Settings Resource Types Page
+ */
+
+import React from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft, Layers, Users, Building, Wrench, Plus,
+  CheckCircle, ChevronRight, HelpCircle, Edit, Palette,
+} from 'lucide-react';
+
+const HelpSettingsResourceTypes: 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">
+            <Layers size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Resource Types Guide</h1>
+            <p className="text-gray-500 dark:text-gray-400">Categorize your bookable resources</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">
+          <Layers 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">
+            Resource Types help you categorize different kinds of bookable entities in your business. Create custom types like "Staff", "Rooms", "Equipment", or any category that fits your needs.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            Each resource type can have its own icon and color, making it easy to distinguish between different categories in the scheduler.
+          </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">
+          <Layers size={20} className="text-brand-500" /> Default 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</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 for appointments</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</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">
+          <Plus size={20} className="text-brand-500" /> Managing 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-2 gap-4">
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Plus size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Create New Type</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Add custom resource categories for your business</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Edit size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Edit Types</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Modify name, icon, and color of existing types</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Palette size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Custom Colors</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Assign colors for visual distinction</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-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Assign to Resources</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Categorize each resource under a type</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>Organization:</strong> Group resources logically for easier management</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 Clarity:</strong> Color-coding helps identify resource types quickly</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>Filtering:</strong> Filter scheduler view by resource type</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/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">
+            <Building 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>
+        </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 HelpSettingsResourceTypes;

frontend/src/pages/help/HelpStaff.tsx

@@ -0,0 +1,168 @@
+/**
+ * Help Staff 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,
+} from 'lucide-react';
+
+const HelpStaff: 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">
+            <Users size={24} className="text-brand-600 dark:text-brand-400" />
+          </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>
+          </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">
+          <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.
+          </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).
+          </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">
+          <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">
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Key size={20} className="text-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Owner</h4>
+                <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>
+              </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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Manager</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Can manage scheduling, customers, services, and resources. Limited access to settings.</p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Users size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Staff</h4>
+                <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>
+              </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">
+          <Settings size={20} className="text-brand-500" /> Key Features
+        </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">
+              <UserPlus size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Invite Staff</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Send email invitations to add new team members</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Role Assignment</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Set permissions based on job responsibilities</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" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Link to Resource</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">Connect staff accounts to bookable 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-orange-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Activity Tracking</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">See when staff last accessed the system</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>Security:</strong> Control who can access sensitive business data</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>
+            </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>
+            </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>
+            </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/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/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>
+        </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 HelpStaff;

frontend/src/pages/help/HelpTasks.tsx

@@ -0,0 +1,352 @@
+/**
+ * Help Tasks Page
+ *
+ * Comprehensive help documentation for the Tasks (Scheduled Tasks) page.
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  ArrowLeft,
+  Clock,
+  Play,
+  Pause,
+  RefreshCw,
+  Zap,
+  Calendar,
+  Settings,
+  CheckCircle,
+  ChevronRight,
+  HelpCircle,
+  FileText,
+  AlertTriangle,
+} from 'lucide-react';
+
+const HelpTasks: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4">
+      {/* 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} />
+        {t('common.back', '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">
+            <Clock size={24} className="text-brand-600 dark:text-brand-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+              Tasks Guide
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400">
+              Automate your business with scheduled tasks
+            </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">
+          <Clock 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">
+            Tasks are scheduled automations that run at specified intervals to help you manage your business. When you install a plugin from the marketplace, you can schedule it to run automatically - hourly, daily, weekly, or on custom schedules.
+          </p>
+          <p className="text-gray-600 dark:text-gray-300">
+            Tasks can send emails, generate reports, engage with customers, sync data with external services, and more. They run in the background so you can focus on running your business.
+          </p>
+        </div>
+      </section>
+
+      {/* Schedule 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">
+          <Calendar size={20} className="text-brand-500" />
+          Schedule Types
+        </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">
+              <Clock size={20} className="text-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Hourly</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Runs every hour at the specified minute. Great for real-time monitoring and frequent updates.
+                </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-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Daily</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Runs once per day at your chosen time. Perfect for daily reports, reminders, and cleanup tasks.
+                </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-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Weekly</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Runs once per week on your selected day. Ideal for weekly summaries, marketing campaigns, and reports.
+                </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">Custom (Cron)</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Advanced scheduling using cron expressions for complex schedules like "every Monday and Wednesday at 9am".
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Task Management Section */}
+      <section className="mb-10">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+          <Zap size={20} className="text-brand-500" />
+          Task Management
+        </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">
+              <Play size={20} className="text-green-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Run Now</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Manually trigger a task to run immediately, regardless of its schedule.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+              <Pause size={20} className="text-yellow-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Pause/Resume</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Temporarily disable a task without deleting it. Resume when ready.
+                </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-blue-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">View Logs</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  See execution history, results, and any errors that occurred during task runs.
+                </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-purple-500 mt-0.5" />
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Edit Configuration</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Modify task settings, change schedule, or update plugin configuration values.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* How to Create a Task 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" />
+          Creating a Scheduled Task
+        </h2>
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+          <ol className="space-y-4">
+            <li className="flex items-start gap-3">
+              <span className="flex-shrink-0 w-6 h-6 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center">1</span>
+              <div>
+                <h4 className="font-medium text-gray-900 dark:text-white">Install a Plugin</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Go to the Plugin Marketplace and install a plugin you want to automate.
+                </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">Configure the Plugin</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Set up any required configuration values for the plugin in My Plugins.
+                </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">Navigate to Tasks</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Tasks" in the sidebar to access the scheduled tasks page.
+                </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">Create New Task</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Click "Create Task", select your installed plugin, and choose a schedule.
+                </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">Activate</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Save the task. It will automatically run according to your schedule.
+                </p>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      {/* Task 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">
+          <AlertTriangle size={20} className="text-brand-500" />
+          Task Statuses
+        </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-center gap-4">
+              <span className="inline-flex items-center gap-1.5 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]">
+                <CheckCircle size={14} /> Active
+              </span>
+              <p className="text-gray-600 dark:text-gray-300">
+                Task is scheduled and will run at the specified time
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 min-w-[100px]">
+                <Pause size={14} /> Paused
+              </span>
+              <p className="text-gray-600 dark:text-gray-300">
+                Task is temporarily disabled and won't run until resumed
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 min-w-[100px]">
+                <RefreshCw size={14} /> Running
+              </span>
+              <p className="text-gray-600 dark:text-gray-300">
+                Task is currently executing
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <span className="inline-flex items-center gap-1.5 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]">
+                <AlertTriangle size={14} /> Failed
+              </span>
+              <p className="text-gray-600 dark:text-gray-300">
+                Last execution failed - check logs for details
+              </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
+        </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>Automation:</strong> Set it and forget it - tasks run automatically on schedule
+              </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>Time Savings:</strong> Automate repetitive tasks that would take hours manually
+              </span>
+            </li>
+            <li className="flex items-start gap-2">
+              <ChevronRight size={16} className="text-brand-500 mt-1 flex-shrink-0" />
+              <span className="text-gray-700 dark:text-gray-300">
+                <strong>Consistency:</strong> Tasks run exactly when scheduled, every time
+              </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>Visibility:</strong> Full logging shows exactly what happened and when
+              </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/plugins-overview"
+            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"
+          >
+            <Zap size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Plugins Overview</span>
+            <ChevronRight size={16} className="text-gray-400 ml-auto" />
+          </Link>
+          <Link
+            to="/help/plugins"
+            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"
+          >
+            <FileText size={20} className="text-brand-500" />
+            <span className="text-gray-900 dark:text-white">Plugin Documentation</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">
+          If you have questions that aren't covered here, our support team is ready to help.
+        </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 HelpTasks;