# Help Documentation Implementation Plan

## Overview
This plan covers creating comprehensive help documentation for the SmoothSchedule business dashboard, adding contextual help buttons to each page, and creating a monolithic help document.

## Phase 1: Create Plugin Page First (User Request)

### Task 1.1: Create CreatePlugin.tsx Page
- Create `/frontend/src/pages/CreatePlugin.tsx`
- Features:
  - Name, description, short description fields
  - Category dropdown (EMAIL, REPORTS, CUSTOMER, BOOKING, INTEGRATION, AUTOMATION, OTHER)
  - Plugin code editor with syntax highlighting (using same Prism setup as HelpPluginDocs)
  - Template variables preview (auto-extracted from code)
  - Version field (default 1.0.0)
  - Logo URL field (optional)
  - Save as Private / Submit to Marketplace options
  - Visibility selector (PRIVATE, PUBLIC)
- Uses API endpoint: `POST /api/plugin-templates/`
- Plan feature gate: `can_create_plugins`

### Task 1.2: Add Route for CreatePlugin
- Add lazy import: `const CreatePlugin = React.lazy(() => import('./pages/CreatePlugin'));`
- Add route: `/plugins/create` pointing to CreatePlugin component

## Phase 2: Create Reusable HelpButton Component

### Task 2.1: Create HelpButton Component
- Create `/frontend/src/components/HelpButton.tsx`
- Props: `helpPath: string` (route to help page)
- Renders: HelpCircle icon button at fixed position (top-right of page)
- Styling: Circular button with question mark icon, tooltip on hover
- Uses Link from react-router-dom to navigate to help page

## Phase 3: Create Individual Help Pages

### 3.1 Core Pages Help
| Page | Help File | Route |
|------|-----------|-------|
| Dashboard | HelpDashboard.tsx | /help/dashboard |
| Scheduler | HelpScheduler.tsx | /help/scheduler |
| Tasks | HelpTasks.tsx | /help/tasks |

### 3.2 Manage Section Help
| Page | Help File | Route |
|------|-----------|-------|
| Customers | HelpCustomers.tsx | /help/customers |
| Services | HelpServices.tsx | /help/services |
| Resources | HelpResources.tsx | /help/resources |
| Staff | HelpStaff.tsx | /help/staff |

### 3.3 Communicate Section Help
| Page | Help File | Route |
|------|-----------|-------|
| Messages | HelpMessages.tsx | /help/messages |
| Tickets | HelpTicketing.tsx (exists) | /help/ticketing |

### 3.4 Money Section Help
| Page | Help File | Route |
|------|-----------|-------|
| Payments | HelpPayments.tsx | /help/payments |

### 3.5 Extend Section Help
| Page | Help File | Route |
|------|-----------|-------|
| Plugins | HelpPluginsOverview.tsx | /help/plugins-overview |
| Plugin Marketplace | (link to existing HelpPluginDocs) | /help/plugins |
| My Plugins | HelpMyPlugins.tsx | /help/my-plugins |
| Create Plugin | HelpCreatePlugin.tsx | /help/create-plugin |

### 3.6 Settings Section Help
| Page | Help File | Route |
|------|-----------|-------|
| General | HelpSettingsGeneral.tsx | /help/settings/general |
| Resource Types | HelpSettingsResourceTypes.tsx | /help/settings/resource-types |
| Booking | HelpSettingsBooking.tsx | /help/settings/booking |
| Appearance | HelpSettingsAppearance.tsx | /help/settings/appearance |
| Email Templates | HelpSettingsEmailTemplates.tsx | /help/settings/email-templates |
| Custom Domains | HelpSettingsCustomDomains.tsx | /help/settings/custom-domains |
| API & Webhooks | HelpSettingsApi.tsx | /help/settings/api |
| Authentication | HelpSettingsAuth.tsx | /help/settings/authentication |
| Email Setup | HelpEmailSettings.tsx (exists) | /help/email-settings |
| SMS & Calling | HelpSettingsSmsCalling.tsx | /help/settings/sms-calling |
| Plan & Billing | HelpSettingsBilling.tsx | /help/settings/billing |
| Quota Management | HelpSettingsQuota.tsx | /help/settings/quota |

## Phase 4: Add HelpButton to Each Page

Add the HelpButton component to the top-right of each dashboard page, linking to its corresponding help page.

## Phase 5: Update HelpPluginDocs

### Task 5.1: Review and Update Plugin Documentation
- Verify plugin documentation matches current codebase
- Add section for "Creating Custom Plugins"
- Add links to API documentation
- Ensure examples work with current API

## Phase 6: Create Monolithic Help Document

### Task 6.1: Create HelpGuideComplete.tsx
- Compile all help content into single comprehensive page
- Table of contents with anchor links
- Searchable content
- Organized by sections (Core, Manage, Communicate, Money, Extend, Settings)

### Task 6.2: Update HelpGuide.tsx
- Replace "Coming Soon" with actual compiled documentation
- Or redirect to HelpGuideComplete

## Phase 7: Register All Routes

Add all new help page routes to App.tsx in the business dashboard section.

## Help Page Template Structure

Each help page should follow this structure:
```tsx
- Header with icon and title
- Overview/Introduction
- Key Features section
- How to Use section (step-by-step)
- Benefits section
- Tips & Best Practices
- Related Features (links to other help pages)
- Need More Help? (link to support/tickets)
```

## Implementation Order

1. Create CreatePlugin.tsx page and route
2. Create HelpButton component
3. Create help pages for core pages (Dashboard, Scheduler, Tasks)
4. Create help pages for Manage section
5. Create help pages for Communicate section
6. Create help pages for Money section
7. Create help pages for Extend section (including plugin docs update)
8. Create help pages for Settings section
9. Add HelpButton to all pages
10. Create monolithic help document
11. Test all help pages and navigation

## Files to Create

### New Components
- `/frontend/src/components/HelpButton.tsx`

### New Pages
- `/frontend/src/pages/CreatePlugin.tsx`
- `/frontend/src/pages/help/HelpDashboard.tsx`
- `/frontend/src/pages/help/HelpScheduler.tsx`
- `/frontend/src/pages/help/HelpTasks.tsx`
- `/frontend/src/pages/help/HelpCustomers.tsx`
- `/frontend/src/pages/help/HelpServices.tsx`
- `/frontend/src/pages/help/HelpResources.tsx`
- `/frontend/src/pages/help/HelpStaff.tsx`
- `/frontend/src/pages/help/HelpMessages.tsx`
- `/frontend/src/pages/help/HelpPayments.tsx`
- `/frontend/src/pages/help/HelpPluginsOverview.tsx`
- `/frontend/src/pages/help/HelpMyPlugins.tsx`
- `/frontend/src/pages/help/HelpCreatePlugin.tsx`
- `/frontend/src/pages/help/HelpSettingsGeneral.tsx`
- `/frontend/src/pages/help/HelpSettingsResourceTypes.tsx`
- `/frontend/src/pages/help/HelpSettingsBooking.tsx`
- `/frontend/src/pages/help/HelpSettingsAppearance.tsx`
- `/frontend/src/pages/help/HelpSettingsEmailTemplates.tsx`
- `/frontend/src/pages/help/HelpSettingsCustomDomains.tsx`
- `/frontend/src/pages/help/HelpSettingsApi.tsx`
- `/frontend/src/pages/help/HelpSettingsAuth.tsx`
- `/frontend/src/pages/help/HelpSettingsSmsCalling.tsx`
- `/frontend/src/pages/help/HelpSettingsBilling.tsx`
- `/frontend/src/pages/help/HelpSettingsQuota.tsx`
- `/frontend/src/pages/help/HelpGuideComplete.tsx`

### Files to Modify
- `/frontend/src/App.tsx` - Add routes
- `/frontend/src/pages/HelpPluginDocs.tsx` - Update with current codebase info
- `/frontend/src/pages/HelpGuide.tsx` - Replace Coming Soon
- All dashboard pages - Add HelpButton component