- Update activeContext.md with current focus and status - Add development environment decisions to decisionLog.md - Update progress.md with completed tasks - Add development patterns to systemPatterns.md - Update productContext.md with environment details - Add Development Environment Setup section to implementation plan
9.9 KiB
Implementation Plan: Phase 1 & 2 Features
This document outlines the implementation plan for Phase 1 & 2 features of the HVAC Community Events Management System.
Goal
Implement Phase 1 features: Community Login Page, Registration Page, Basic Dashboard, Create/Modify Event Pages, Event Summary Page. Implement Phase 2 features: Zoho CRM API Integration, Email Attendees functionality, Enhanced event management, and Comprehensive transaction reporting.
Design References
The implementation should follow the design patterns and layouts shown in the reference screenshots located in the design_references/ directory:
upskillhvac.com_hce-dashboard_ (4).png: Trainer dashboard layout with statistics and events tableupskillhvac.com_hce-event-summary__event_id=1662 (1).png: Event summary page with details and transactionsupskillhvac.com_hce-login_.png: Login page layout and stylingupskillhvac.com_hce-modify-event__event_id=1662.png: Event editing interface
These design references serve as visual guides for layout, information organization, and user interface elements.
WordPress Theme Integration
All implementations must leverage the existing WordPress theme (Upskill HVAC, a child theme of Astra) and styling plugins:
- Use theme hooks and filters for template modifications
- Utilize theme-provided CSS classes rather than creating custom styling
- Ensure responsive behavior matches theme's breakpoints
- Leverage Spectra Pro components for enhanced layouts
- Use Essential Blocks for advanced UI components when appropriate
- Follow the theme's color scheme and typography
Tasks
-
Phase 1: Core Functionality
-
0. Development Environment Setup
- 0.1. Configure Docker environment with WordPress, Nginx, and MariaDB
- 0.2. Set up PHP-FPM configuration
- 0.3. Configure WordPress with proper settings
- 0.4. Set up development domain and SSL
- 0.5. Implement development scripts
- 0.6. Configure testing environment
-
1. Implement Community Registration Page
- 1.1. Create a custom registration form with the required fields as specified in
docs/REQUIREMENTS.md. - 1.2. Implement input validation and sanitization as specified in
docs/REQUIREMENTS.md. - 1.3. Implement logic to create a new user with the "hvac_trainer" role.
- 1.4. Implement logic to create a Training Venue Profile if the user selects "Yes".
- 1.5. Implement logic to add custom fields to the user's profile, including mapping to The Events Calendar organizer fields.
- 1.6. Implement email notification to admin upon new registration.
- 1.7. Use Astra theme form styling and responsive layout patterns.
- 1.8. Add unit tests for registration form validation.
- 1.9. Add integration tests to verify user creation, profile updates, and organizer mapping.
- 1.1. Create a custom registration form with the required fields as specified in
-
2. Implement Community Login Page
- 2.1. Create a custom login form using theme-compatible styling.
- 2.2. Implement authentication logic.
- 2.3. Implement "Remember me" option.
- 2.4. Implement password reset functionality.
- 2.5. Redirect to Trainer Dashboard after successful login.
- 2.6. Style the login page using Astra theme components.
- 2.7. Add unit tests for authentication logic.
- 2.8. Add integration tests to verify login and redirection.
-
3. Implement Trainer Dashboard
- 3.1. Create a custom dashboard page template that extends the theme's default template.
- 3.2. Add navigation buttons for Create Event, View Trainer Profile, and Logout using theme button styles.
- 3.3. Implement Overall Statistics Summary using theme-compatible cards or blocks.
- 3.4. Implement Events Table using theme's table styling.
- 3.5. Add sorting/filtering capabilities using theme-styled tabs.
- 3.6. Ensure responsive behavior matches theme's breakpoints.
- 3.7. Add unit tests for dashboard statistics calculations.
- 3.8. Add integration tests to verify dashboard data is displayed correctly.
-
4. Implement Create/Modify Event Pages
- 4.1. Create custom event creation and modification pages using theme templates.
- 4.2. Leverage functionality from The Events Calendar Community Events plugin.
- 4.3. Add instructions section to the pages using theme typography.
- 4.4. Add Return to Dashboard button using theme button styles.
- 4.5. Ensure form styling matches theme patterns.
- 4.6. Add unit tests for event creation and modification logic.
- 4.7. Add integration tests to verify events are created and modified correctly in The Events Calendar.
-
5. Implement Event Summary Page
- 5.1. Create a custom event summary page template based on the theme's single post template.
- 5.2. Display Event Details in theme-styled card sections.
- 5.3. Implement breadcrumb navigation using theme's breadcrumb component.
- 5.4. Format content sections using theme's typography and spacing.
- 5.5. Implement Transactions Table using theme's table styling.
- 5.6. Ensure all buttons use theme's button classes and styling.
- 5.7. Add unit tests for event summary data retrieval.
- 5.8. Add integration tests to verify event summary data is displayed correctly.
-
-
Phase 2: Enhanced Features
-
1. Implement Zoho CRM API Integration
- 1.1. Research Zoho CRM API and identify relevant endpoints.
- 1.2. Create a Zoho CRM API client class in PHP.
- 1.3. Implement authentication with Zoho CRM API.
- 1.4. Implement function to create records for each training event in the "Campaigns" table.
- 1.5. Implement function to update each Campaign record with ticket sales, attendance & certificate activities.
- 1.6. Create settings page to configure Zoho CRM API credentials using theme's styling.
- 1.7. Add unit tests for Zoho CRM API client class.
- 1.8. Add integration tests to verify data is synced to Zoho CRM.
-
2. Implement Email Attendees Functionality
- 2.1. Create an "Email Attendees" page using theme templates.
- 2.2. Add filtering options for event selector, ticket type, and attendee filter using theme form elements.
- 2.3. Implement a rich-text editor for email body compatible with the theme.
- 2.4. Add CC field and subject line using theme form styling.
- 2.5. Implement function to send emails to selected attendees.
- 2.6. Add unit tests for email sending functionality.
- 2.7. Add integration tests to verify emails are sent correctly.
-
3. Implement Enhanced Event Management
- 3.1. Review existing event management features and identify areas for enhancement.
- 3.2. Implement new features based on trainer feedback and requirements using theme components.
- 3.3. Ensure consistency with design references while using theme elements.
- 3.4. Add unit tests for new event management features.
- 3.5. Add integration tests to verify new features work correctly with The Events Calendar.
-
4. Implement Comprehensive Transaction Reporting
- 4.1. Create an "Order Summary" page with basic details using theme templates.
- 4.2. Display order number, purchaser name and email, date of purchase, number of tickets, and total price using theme typography.
- 4.3. Display attendee information for each ticket purchased in theme-styled tables.
- 4.4. Add filtering and sorting capabilities to the transaction table using theme components.
- 4.5. Add unit tests for transaction reporting functionality.
- 4.6. Add integration tests to verify transaction data is displayed correctly.
-
WordPress Theme Integration Implementation
-
Template Structure
- Create template parts following Astra's template organization pattern
- Implement content-*.php templates for different view types
- Use get_template_part() to maintain theme compatibility
-
Styling Approach
- Enqueue stylesheets properly with theme dependencies
- Use minimal custom CSS, only for specialized components
- Implement responsive design using theme's media queries
- Utilize theme colors via CSS variables or the WordPress color palette
-
JavaScript Integration
- Enqueue scripts properly with theme dependencies
- Utilize jQuery or vanilla JS depending on theme's approach
- Implement AJAX functionality for dynamic content loading
- Ensure JS interactions follow theme's interaction patterns
Testing and Deployment
- Development Environment: All development and testing should be performed within the Docker-based development environment as described in the
wordpress-devdirectory. - Production Data: The production website should only be accessed to download all of the production server data as a reference and to import into the dev server so that the dev server environment mirrors the production server.
- Testing:
- Unit Tests: Use PHPUnit to test individual classes and functions.
- Integration Tests: Use WordPress testing framework to test integration with WordPress and The Events Calendar.
- E2E Tests: Use Playwright to test user journeys and UI interactions.
- Theme Compatibility Testing: Test across different screen sizes and browsers to ensure theme responsiveness.
- Deployment: Follow the configuration-based deployment process outlined in
docs/deployment.md.
Status
- Not Started
- In Progress
- Complete