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/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>
   );
 };