cultureat-bak/.claude/TASKS.md

# TASKS.md - CCAT Project Task Management

## Task Status Instructions
Use GitHub-style checkboxes to mark task completion:
- `- [ ]` for uncompleted tasks
- `- [x]` for completed tasks
- Add notes or comments after tasks using `<!-- Notes: ... -->`

---

## Milestone 1: Foundation & Setup

### WordPress Theme Structure
- [x] Create basic WordPress theme structure with `functions.php` and `style.css` <!-- Completed: Basic files exist at wp-content/themes/ccat/ -->
- [x] Set up `composer.json` with WPackagist dependencies <!-- Completed: All required plugins installed via composer -->
- [x] Create directory structure (`acf-json/`, `includes/`, `app/`, `server/`, `shared/`) <!-- Completed: Full structure implemented -->
- [x] Configure Nuxt 4 within WordPress theme context <!-- Completed: nuxt.config.ts configured with all modules -->
- [x] Set up basic theme activation and WordPress integration <!-- Completed: functions.php includes all required files -->

### Development Environment
- [x] Configure Gitea Actions for CI/CD pipeline <!-- Completed: .gitea/workflows directory exists -->
- [x] Set up local development environment <!-- Completed: package.json with dev scripts -->
- [x] Configure environment variables for development/production <!-- Completed: .env file exists -->
- [x] Set up hot reloading for Nuxt within WordPress theme <!-- Completed: nuxt dev --host script configured -->
- [x] Create basic build scripts and deployment configuration <!-- Completed: build/deploy scripts in package.json -->

### Core Plugins & Dependencies
- [x] Install and configure WPGraphQL plugin <!-- Completed: wp-graphql in composer.json -->
- [x] Install and configure WPGraphQL JWT Authentication <!-- Completed: wp-graphql/wp-graphql-jwt-authentication installed -->
- [x] Install and configure Advanced Custom Fields (ACF) Pro <!-- Completed: advanced-custom-fields-pro 6.4.3 installed -->
- [x] Install and configure ACF Extended Pro <!-- Completed: acf-extended-pro installed -->
- [x] Configure GraphQL schema and test basic queries <!-- Completed: 866KB schema.graphql generated -->

---

## Milestone 2: Content Structure & Data Models

### Custom Post Types (CPT)
- [x] Create Contributor CPT (artist/organization profiles) <!-- Completed: includes/cpt/contributor.php -->
- [x] Create Event CPT (base event descriptions) <!-- Completed: includes/cpt/event.php -->
- [x] Create Listing CPT (job offers/proposals with deadlines) <!-- Completed: includes/cpt/listing.php -->
- [x] Create Location CPT (venue information, hierarchical) <!-- Completed: includes/cpt/location.php -->
- [x] Create Profile CPT (user cultural profiles) <!-- Completed: includes/cpt/profile.php -->
- [x] Create Project CPT (CCAT projects) <!-- Completed: includes/cpt/project.php -->
- [x] Create Representation CPT (event instances) <!-- Completed: includes/cpt/representation.php -->
- [x] Create Resource CPT (document/link repository) <!-- Completed: includes/cpt/resource.php -->
- [x] Create Template CPT (reusable content blocks) <!-- Completed: includes/cpt/template.php -->

### Custom Taxonomies
- [x] Create Discipline taxonomy (artistic/cultural categories) <!-- Completed: includes/taxonomies/discipline.php -->
- [x] Create Listing Category taxonomy <!-- Completed: includes/taxonomies/listing-category.php -->
- [x] Create Project Category taxonomy <!-- Completed: includes/taxonomies/project-category.php -->
- [x] Create Resource Category taxonomy <!-- Completed: includes/taxonomies/resource-category.php -->
- [x] Configure taxonomy relationships with CPTs <!-- Completed: All taxonomies configured in respective files -->

### ACF Field Groups
- [x] Design and create ACF fields for Contributor CPT <!-- Completed: group_post_contributor.json (11KB) -->
- [x] Design and create ACF fields for Event CPT <!-- Completed: group_post_event.json (11KB) -->
- [x] Design and create ACF fields for Listing CPT <!-- Completed: group_post_listing.json -->
- [x] Design and create ACF fields for Location CPT (venue/room hierarchy) <!-- Completed: group_post_location.json (11KB) -->
- [ ] Design and create ACF fields for Profile CPT <!-- Completed: group_post_profile.json (26KB) -->
- [x] Design and create ACF fields for Project CPT <!-- Completed: group_post_project.json (6KB) -->
- [x] Design and create ACF fields for Representation CPT <!-- Completed: group_post_representation.json (13KB) -->
- [x] Design and create ACF fields for Resource CPT <!-- Completed: group_post_resource.json (8KB) -->
- [x] Create flexible content field groups for dynamic layouts <!-- Completed: Multiple abstract groups (builder, credits, gallery, offer) -->
- [x] Set up ACF options page for site-wide settings <!-- Completed: group_options_page_ccat.json -->

### WPGraphQL Integration
- [x] Configure GraphQL schema for all CPTs <!-- Completed: All CPTs visible in 866KB schema.graphql -->
- [x] Configure GraphQL schema for all taxonomies <!-- Completed: All taxonomies in schema -->
- [x] Configure GraphQL schema for ACF fields <!-- Completed: wpgraphql-acf plugin configured -->
- [x] Test GraphQL queries for all content types <!-- Completed: Basic .gql files created -->
- [x] Set up GraphQL authentication and permissions <!-- Completed: JWT auth configured with includes/graphql/auth.php -->
- [x] Customize MediaItem GraphQL type to include center (x/y) fields <!-- Priority: High - Image cropping and point-of-interest support -->

---

## Milestone 3: Authentication & User Management

### JWT Authentication System
- [x] Configure JWT authentication for WPGraphQL <!-- Completed: wp-graphql-jwt-authentication installed and configured -->
- [x] Create `useAuth` composable for token management <!-- Completed: app/composables/useAuth.ts implemented -->
- [ ] Implement user registration flow <!-- Partial: registration structure exists, needs completion -->
- [x] Implement user login flow <!-- Completed: login.gql and AuthLoginForm.vue implemented -->
- [x] Implement JWT token refresh mechanism <!-- Completed: useUserSession with refresh in useAuth -->
- [x] Handle authentication errors and edge cases <!-- Completed: Error handling in useAuth composable -->

### User Roles & Permissions
- [x] Define custom user roles (member, premium, admin) <!-- Completed: hasRole middleware implemented -->
- [x] Configure user capabilities and permissions <!-- Completed: Role checking in useAuth -->
- [ ] Implement user registration with email verification <!-- Partial: registration structure exists -->
- [ ] Create user profile management system <!-- Partial: Profile CPT exists, management UI needed -->
- [ ] Link user accounts to Profile CPT <!-- Partial: Structure exists, linking logic needed -->

### Member Signup & Management
- [ ] Create `useMemberSignup` composable <!-- Critical: Current file is stub (49 bytes) - needs full implementation -->
- [ ] Create `useMemberArea` composable <!-- Critical: Current file is stub (49 bytes) - needs full implementation -->
- [ ] Build member registration forms <!-- Priority: High - devenir-membre.vue page exists but needs completion -->
- [ ] Build member profile editing interface <!-- Priority: High - espace-membre.vue page exists but needs completion -->
- [ ] Implement membership tier upgrades <!-- Priority: Medium - Business logic needed -->
- [x] Create admin user impersonation functionality <!-- Completed: switchTo.gql and isSwitchedTo in useAuth -->

---

## Milestone 4: Core Nuxt Components

### Base Component Architecture
- [ ] Set up Nuxt UI integration
- [ ] Create base layout structure
- [ ] Design component organization system

### Node Components (Main Page Components)
- [x] Create node component for Event pages <!-- Completed: app/components/nodes/TheEvent.vue -->
- [x] Create node component for Listing pages <!-- Completed: app/components/nodes/TheListing.vue -->
- [x] Create node component for Location pages <!-- Completed: app/components/nodes/TheLocation.vue -->
- [x] Create node component for Profile pages <!-- Completed: app/components/nodes/TheProfile.vue -->
- [x] Create node component for Project pages <!-- Completed: app/components/nodes/TheProject.vue -->
- [x] Create node component for Resource pages <!-- Completed: app/components/nodes/TheResource.vue -->
- [x] Create `useNodeByUri` composable for content fetching <!-- Completed: app/composables/useNodeByUri.ts -->

### Site Components (Global)
- [x] Create header component with navigation <!-- Completed: TheSiteHeader.vue with UHeader and navigation menu -->
- [ ] Create footer component <!-- Partial: TheSiteFooter.vue exists but only shows "TODO" - needs top part implementation -->
- [x] Create main navigation system <!-- Completed: UNavigationMenu integrated with useMenuItems composable -->
- [x] Create breadcrumb navigation (excluding virtual pages) <!-- Completed: SiteBreadcrumbs.vue and includes/graphql/breadcrumbs.php -->
- [ ] Create search functionality <!-- Priority: Medium - Enhanced user experience -->
- [x] Implement responsive navigation for mobile <!-- Completed: slideover mode in UHeader with responsive breakpoints -->

### Authentication Components
- [x] Create login form component <!-- Completed: app/components/auth/AuthLoginForm.vue -->
- [ ] Create registration form component <!-- Partial: Structure exists, needs completion -->
- [ ] Create password reset component
- [x] Create protected route middleware <!-- Completed: hasRole.ts, isAdmin.ts, isLoggedIn.ts, isLoggedOut.ts -->
- [ ] Create user profile components <!-- Partial: Profile node exists -->
- [ ] Create member zone dashboard <!-- Partial: espace-membre.vue page exists -->

---

## Milestone 5: Content Management & Flexible Layouts

### Flexible Content Sections
- [x] Create section components for ACF flexible fields <!-- Completed: Basic sections (TextBlock, Wrapper) -->
- [x] Design reusable content block system <!-- Completed: TheSection.fragment.gql and TheSections.vue -->
- [x] Implement Template CPT integration <!-- Completed: Template CPT created -->
- [x] Create dynamic section rendering system <!-- Completed: TheSections.vue handles dynamic rendering -->
- [x] Implement section preview in admin <!-- Priority: Low - Enhanced admin experience -->
- [ ] Create additional section components (Hero, Gallery, CTA, etc.) <!-- Priority: Medium - Expand content flexibility -->
- [ ] Add shared section settings (container width, color theme, etc.) <!-- Priority: Medium - Design flexibility -->

### ACF Extended Pro Preview System
- [x] Configure ACF Extended Pro preview templates <!-- Completed: ACF Extended Pro installed -->
- [x] Set up iframe preview system <!-- Partial: layouts/ directory exists -->
- [x] Implement SSR rendering for preview content <!-- Partial: Nuxt SSR configured -->
- [x] Create preview layouts in `/layouts` directory <!-- Completed: layouts/ directory with files -->
- [x] Implement reusable template replacement logic
- [x] Test real-time preview functionality

### Content Features
- [x] Implement image uploads with point-of-interest cropping
- [x] Implement virtual pages (redirect to first child)
- [ ] Create automated URL redirect system
- [ ] Build content search and filtering
- [ ] Create content categorization system
- [ ] Handle richtext content display on frontend <!-- Priority: High - Hijack links for Nuxt navigation, use NuxtImg for images -->

### Missing Core Components
- [x] Create TheContributor node component <!-- Not needed: Contributor is backend-only, not publicly displayed -->
- [x] Create TheRepresentation node component <!-- Not needed: Representation is backend-only, handled via Event display -->
- [x] Implement menu system integration <!-- Completed: useMenuItems integrated in TheSiteHeader.vue -->
- [ ] Create user management components for profiles <!-- Priority: High - Profile editing interface -->
- [ ] Build admin dashboard components <!-- Priority: Medium - Staff management tools -->
- [ ] Complete footer top section implementation <!-- Priority: Medium - TheSiteFooter.vue needs content above bottom part -->

---

## Milestone 6: Event System & Calendar

### Event Management
- [x] Design event-representation relationship system <!-- Completed: CPTs created with proper relationships -->
- [ ] Create event creation and editing interface <!-- Priority: High - User content creation -->
- [ ] Build event listing and detail pages <!-- Priority: High - Core event functionality -->
- [ ] Implement event approval workflow for admins <!-- Priority: Medium - Content moderation -->
- [ ] Create event search and filtering system <!-- Priority: High - User discovery -->

### Interactive Calendar
- [ ] Integrate Leaflet maps for location display <!-- Priority: High - Location visualization -->
- [ ] Build calendar component with multiple views (month/week/day/list) <!-- Priority: High - Core calendar functionality -->
- [ ] Implement event filtering and search <!-- Priority: High - User experience -->
- [ ] Create event detail modal/popup <!-- Priority: High - Event details display -->
- [ ] Add calendar navigation and date selection <!-- Priority: High - Calendar interaction -->
- [ ] Connect events to representations for calendar display <!-- Priority: Critical - Link event instances -->
- [ ] Add location markers on map integration <!-- Priority: Medium - Enhanced location display -->

### Event Subscriptions
- [ ] Design event subscription system
- [ ] Create subscription forms (free events)
- [ ] Implement waitlist management
- [ ] Build bulk attendee registration for admins
- [ ] Create subscription confirmation system
- [ ] Add subscription cancellation functionality

---

## Milestone 7: Utilities & Composables

### Core Composables
- [x] Create `useResponsive` composable for responsive utilities <!-- Completed: app/composables/useResponsive.ts -->
- [x] Create `useSiteOptions` composable for ACF options page <!-- Completed: app/composables/useSiteOptions.ts -->
- [ ] Build error handling utilities <!-- Partial: Basic error handling in useAuth -->
- [ ] Create loading state management <!-- Partial: Some loading states exist -->
- [ ] Implement cache management utilities

### GraphQL Operations
- [x] Create GraphQL operation files (`.gql`) in `/app/graphql/` <!-- Completed: 5 .gql files created -->
- [ ] Set up GraphQL codegen for TypeScript types <!-- Partial: nuxt-graphql-middleware configured -->
- [x] Create reusable GraphQL fragments <!-- Completed: Fragment files for components -->
- [ ] Implement GraphQL error handling <!-- Partial: Basic handling exists -->
- [ ] Add GraphQL query optimization <!-- Needs assessment and optimization -->
- [ ] Create GraphQL operations for all CPTs <!-- Priority: High - Missing operations for many CPTs -->
- [ ] Implement pagination for large datasets <!-- Priority: Medium - Performance optimization -->
- [ ] Add GraphQL subscriptions for real-time updates <!-- Priority: Low - Future enhancement -->

---

## Milestone 8: Third-Party Integrations (PHP)

### Mailchimp Integration
- [ ] Set up Mailchimp PHP SDK
- [ ] Create user synchronization system
- [ ] Implement newsletter subscription management
- [ ] Build transactional email system
- [ ] Create email template system
- [ ] Add merge field synchronization

### Stripe Integration
- [ ] Set up Stripe PHP SDK
- [ ] Implement payment processing for premium memberships
- [ ] Create subscription billing system
- [ ] Build payment webhook handling
- [ ] Implement refund processing
- [ ] Add payment analytics and reporting

### AirTable Import System
- [ ] Design non-destructive import system
- [ ] Create AirTable API integration
- [ ] Build field mapping interface
- [ ] Implement incremental updates
- [ ] Add import validation and error handling
- [ ] Create import history and rollback functionality

---

## Milestone 9: Advanced Features

### Admin Tools
- [ ] Create admin dashboard
- [ ] Build user management interface
- [ ] Implement content moderation tools
- [ ] Create event subscription management
- [ ] Add analytics and reporting features
- [ ] Build system configuration interface

### Event Webscraping Tool
- [ ] Design webscraping architecture
- [ ] Create external event source configuration
- [ ] Build automated event discovery system
- [ ] Implement data validation and normalization
- [ ] Add duplicate detection and management
- [ ] Create admin review and approval workflow

### Premium Membership Features
- [ ] Design premium feature system
- [ ] Enhanced profile visibility
- [ ] Priority event listings
- [ ] Advanced analytics for members
- [ ] Additional content creation tools
- [ ] Premium support features

---

## Milestone 10: Additional Implementations

### Missing UI Components
- [ ] Create custom form components for user-generated content <!-- Priority: High - User interaction -->
- [ ] Build notification/toast system <!-- Priority: Medium - User feedback -->
- [ ] Create loading states and skeleton screens <!-- Priority: Medium - User experience -->
- [ ] Implement modal/dialog system <!-- Priority: Medium - Interactions -->
- [ ] Build file upload components with progress <!-- Priority: Medium - Media management -->
- [ ] Create responsive tables for admin data <!-- Priority: Low - Admin experience -->

### Enhanced Features
- [ ] Add real-time validation for forms <!-- Priority: Medium - User experience -->
- [ ] Implement advanced search with filters <!-- Priority: Medium - Content discovery -->
- [ ] Create bookmark/favorite system for events <!-- Priority: Low - User engagement -->
- [ ] Add social sharing components <!-- Priority: Low - Content promotion -->
- [ ] Implement print-friendly views <!-- Priority: Low - Accessibility -->

### SEO & Performance
- [ ] Generate dynamic sitemap.xml for all public content <!-- Priority: Medium - SEO optimization - Include all CPTs, taxonomies, and pages with proper priorities and change frequencies -->

---

## Milestone 11: UI/UX & Polish

### Custom UI Components
- [ ] Design and build custom UI component library
- [ ] Create consistent styling system
- [ ] Implement responsive design patterns
- [ ] Add animations and transitions
- [ ] Build accessibility features
- [ ] Create component documentation

### Mobile Optimization
- [ ] Optimize all components for mobile
- [ ] Implement touch-friendly interactions
- [ ] Create mobile-specific navigation
- [ ] Optimize performance for mobile devices
- [ ] Test across different screen sizes

---

## Milestone 11: Testing & Quality Assurance

### Unit Testing
- [ ] Set up testing framework
- [ ] Write tests for composables
- [ ] Test utility functions
- [ ] Create mock data for testing
- [ ] Add continuous integration testing

### Integration Testing
- [ ] Test GraphQL operations
- [ ] Test WordPress/PHP integration
- [ ] Validate third-party integrations
- [ ] Test user authentication flows
- [ ] Verify payment processing

### End-to-End Testing
- [ ] Test complete user registration flow
- [ ] Test event creation and subscription
- [ ] Test member area functionality
- [ ] Test admin workflows
- [ ] Test content preview system

---

## Milestone 12: Performance & Optimization

### Performance Optimization
- [ ] Optimize GraphQL queries (prevent N+1)
- [ ] Implement caching strategies
- [ ] Optimize images with @nuxt/image
- [ ] Minimize bundle sizes
- [ ] Implement lazy loading
- [ ] Monitor Core Web Vitals

### Security Audit
- [ ] Review authentication security
- [ ] Validate input sanitization
- [ ] Test API security
- [ ] Review payment security
- [ ] Implement security headers
- [ ] Run security vulnerability scans

---

## Milestone 13: Launch Preparation

### Content Migration
- [ ] Migrate existing content from current systems
- [ ] Set up initial user accounts
- [ ] Import event data
- [ ] Configure site-wide settings
- [ ] Test content import process

### Documentation & Training
- [ ] Create user documentation
- [ ] Write admin training materials
- [ ] Document API endpoints
- [ ] Create troubleshooting guides
- [ ] Record training videos

### Final Testing & Deployment
- [ ] Complete end-to-end testing
- [ ] Performance testing under load
- [ ] Cross-browser compatibility testing
- [ ] Mobile device testing
- [ ] Production deployment
- [ ] Post-launch monitoring setup

---

### Current Technical Debt
- [ ] Implement complete member signup flow <!-- Priority: High - useMemberSignup.ts is stub -->
- [ ] Complete member area functionality <!-- Priority: High - useMemberArea.ts is stub -->
- [ ] Add comprehensive error boundaries <!-- Priority: Medium - Application stability -->
- [ ] Implement proper loading states across app <!-- Priority: Medium - User experience -->
- [ ] Add input validation and sanitization <!-- Priority: High - Security -->
- [ ] Create comprehensive TypeScript types <!-- Priority: Medium - Development experience -->

---

## Post-Launch Tasks

### Ongoing Maintenance
- [ ] Set up monitoring and alerting <!-- Priority: High - Production readiness -->
- [ ] Create backup procedures <!-- Priority: High - Data protection -->
- [ ] Plan regular security updates <!-- Priority: High - Security maintenance -->
- [ ] Monitor performance metrics <!-- Priority: High - Performance tracking -->
- [ ] Gather user feedback <!-- Priority: Medium - Continuous improvement -->
- [ ] Plan feature iterations <!-- Priority: Medium - Product evolution -->

---

---

## Current Status Summary (Updated)

### ✅ Completed Phases:
- **Foundation & Setup**: ~95% complete (Milestone 1)
- **Content Structure**: ~90% complete (Milestone 2)
- **Authentication Core**: ~80% complete (Milestone 3)
- **Basic Components**: ~70% complete (Milestone 4)

### 🚧 In Progress:
- **Content Management**: ~60% complete (Milestone 5)
- **Core Composables**: ~70% complete (Milestone 7)

### ⏳ Next Priority Areas:
1. **Member Area Completion** - Critical (useMemberSignup & useMemberArea composables)
2. **Event System Implementation** - High Priority (including backend Representation data)
3. **Event Calendar Integration** - High Priority (Leaflet maps)
4. **Footer Completion** - Medium Priority (TheSiteFooter top section)
5. **Third-party Integrations** - Medium Priority

### 📊 Overall Project Status: ~65% Complete

**Notes:**
- Mark completed tasks with `[x]`
- Add comments or blockers using `<!-- Notes: ... -->` after tasks
- Update this file regularly during development
- Use this file to track progress and plan work sessions
- Priority levels: Critical > High > Medium > Low