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>
This commit is contained in:
poduck
2025-12-03 02:18:05 -05:00
parent 5cef01ad0d
commit 11bb83a85d
29 changed files with 4673 additions and 41 deletions

View File

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