poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b20fa5cfd8653e6bd632faa39d112aca348913ed
smoothschedule/PLAN_HELP_DOCS.md
poduck dcb14503a2 feat: Dashboard redesign, plan permissions, and help docs improvements 
Major updates including:
- Customizable dashboard with drag-and-drop widget grid layout
- Plan-based feature locking for plugins and tasks
- Comprehensive help documentation updates across all pages
- Plugin seeding in deployment process for all tenants
- Permission synchronization system for subscription plans
- QuotaOverageModal component and enhanced UX flows

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 13:02:44 -05:00

180 lines
6.9 KiB
Markdown
Raw Blame History

# 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
Reference in New Issue View Git Blame Copy Permalink