poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d2c4cbe1836d14dc1d2388ffbb6f25993d04c0ca
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

6.9 KiB
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:

- 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