MyClub/DOCS/PREMIUM_IMPLEMENTATION_SCHEDULE.md

Premium Version Implementation Schedule

Timeline: 8-9 Working Days

Phase 1: Analysis & Architecture (Day 1 - 8 hours)

• ✅ Catalog 45 CSS and 41 JS files from /pro folder
• ✅ Map HTML templates to React components
• ✅ Design integration strategy (no MyUIbrix conflicts)
• ✅ Create architecture documentation

Deliverables: Technical spec, component wireframes

---

Phase 2: Backend Infrastructure (Day 1-2 - 12 hours)

2.1 Environment Configuration (2h)

# Add to .env
PREMIUM_MODE=false
PREMIUM_HOMEPAGE=false
PREMIUM_BLOG=false
PREMIUM_404=false
PREMIUM_DISABLE_MYUIBRIX=false

2.2 Premium Mode Middleware (3h)

• Create internal/middleware/premium_mode.go
• Detect premium mode via environment
• Add context flags for template rendering

2.3 Settings API Extension (3h)

• Extend /api/v1/settings/public endpoint
• Add premium_mode_active field
• Include premium feature flags in response

2.4 Static Asset Routes (2h)

router.Static("/premium/css", "./pro/css")
router.Static("/premium/js", "./pro/js")
router.Static("/premium/img", "./pro/img")

2.5 Database Migration (2h)

ALTER TABLE settings ADD COLUMN premium_mode_active BOOLEAN DEFAULT FALSE;
ALTER TABLE settings ADD COLUMN premium_features TEXT;

Deliverables: Backend API ready, static routes configured

---

Phase 3: Frontend Premium Components (Day 2-4 - 16 hours)

3.1 Premium Layout Wrapper (4h)

• Create PremiumLayout.tsx with dynamic CSS/JS loading
• Handle Chakra UI style conflicts
• Implement cleanup on unmount

3.2 Premium Homepage (6h)

Components:

• PremiumHomePage.tsx - Main page
• ZoomSlider.tsx - Hero slider with parallax
• PremiumNav.tsx - Navigation
• PremiumFooter.tsx - Footer

Features:

• Dynamic data from API (matches, articles, players)
• React Router navigation
• Responsive breakpoints (mobile: 767px, tablet: 1199px, desktop: 1440px+)

3.3 Premium Blog (4h)

• PremiumBlogPage.tsx - Blog post display
• Integrate article API
• Related posts section
• Social sharing buttons

3.4 Premium 404 Page (2h)

• Simple error page with navigation
• Styled with premium CSS

Deliverables: All premium React components

---

Phase 4: Asset Migration & Styling (Day 4-6 - 16 hours)

4.1 CSS Organization (4h)

frontend/src/styles/premium/
├── core/ (bizoni.css, bootstrap.css, elementor-*.css)
├── components/ (zoom-slider.css, swiper.css)
├── utilities/ (overrides.css, animations.css)
└── index.css

4.2 JavaScript Integration (6h)

Load Order:

1. jQuery + migrate + modernizr
2. Page-specific: swiper, parallax, zoom-slider
3. Elementor: webpack.runtime, frontend-modules, frontend

Utilities:

• getPremiumCSSFiles(pageType) - Returns CSS array
• getPremiumJSFiles(pageType) - Returns JS array
• loadJS(src) - Promise-based loader
• loadCSS(src) - Dynamic CSS injection

4.3 Font Integration (2h)

• Google Fonts: Open Sans, Sofia Sans, Marcellus, Tangerine
• Material Icons
• Font fallbacks

4.4 Icon System (2h)

• Ionicons 7.1.0
• Font Awesome shims
• Icon mapping utility

4.5 Image Assets (2h)

• Copy from /pro/img/ to public/premium/img/
• Lazy loading
• Optimize delivery

Deliverables: Complete asset pipeline

---

Phase 5: Dynamic Theming (Day 6-7 - 8 hours)

5.1 Color Palette Injection (3h)

// Inject club colors
root.style.setProperty('--lte-main-color', settings.primary_color);
root.style.setProperty('--lte-secondary-color', settings.secondary_color);

5.2 Logo Integration (2h)

• Replace hardcoded logos with settings.club_logo_url
• Support light/dark variants
• Fallback to default

5.3 Dynamic Content (3h)

• Club name, tagline, contact info
• Navigation from API
• FACR matches
• Featured articles → slider
• Zonerama gallery

Deliverables: Fully dynamic premium theme

---

Phase 6: Testing & Integration (Day 7-8 - 12 hours)

6.1 Router Integration (3h)

<Route path="/" element={
  isPremiumMode ? <PremiumHomePage /> : <HomePage />
} />

6.2 Performance Testing (3h)

Targets:

• Initial load: < 2s
• CSS load: < 500ms
• JS load: < 1s
• Lighthouse: > 90

Optimizations:

• Code splitting
• Dynamic imports
• Resource hints
• Asset compression

6.3 Cross-Browser Testing (2h)

• Chrome, Firefox, Safari, Edge
• Mobile Safari, Chrome Mobile

6.4 Responsive Testing (2h)

• Mobile: 360-767px
• Tablet: 768-1199px
• Desktop: 1200-1920px+

6.5 Integration Testing (2h)

• Toggle premium on/off
• MyUIbrix disabled in premium
• FACR data integration
• Blog rendering
• Forms functionality

Deliverables: Test reports, performance benchmarks

---

Phase 7: Documentation & Deployment (Day 8-9 - 8 hours)

7.1 User Documentation (2h)

• How to enable premium mode
• Feature comparison table
• Configuration guide
• Troubleshooting
• FAQ

7.2 Developer Documentation (2h)

• Architecture overview
• Component API reference
• Customization guide
• Adding new premium pages

7.3 Deployment Checklist (2h)

• Update .env.example
• Run database migration
• Copy premium assets to production
• Update Nginx config for /premium/* routes
• Test premium mode in staging
• Rollback plan

7.4 Admin UI Integration (2h)

• Add premium toggle in Admin Settings
• Visual preview switcher
• Feature status dashboard

Deliverables: Complete documentation, deployment ready

---

Quick Reference

Environment Variables

PREMIUM_MODE=true              # Master toggle
PREMIUM_HOMEPAGE=true          # Homepage only
PREMIUM_BLOG=true              # Blog pages only
PREMIUM_404=true               # 404 page only
PREMIUM_DISABLE_MYUIBRIX=true  # Auto-disable editor

Key Files Created

Backend:
- internal/middleware/premium_mode.go
- internal/controllers/premium_controller.go
- database/migrations/XXXXXX_add_premium_settings.*.sql

Frontend:
- frontend/src/layouts/PremiumLayout.tsx
- frontend/src/pages/Premium*.tsx
- frontend/src/components/premium/*
- frontend/src/hooks/usePremiumTheme.ts
- frontend/src/utils/premiumAssets.ts
- frontend/src/styles/premium/*
- frontend/public/premium/{css,js,img}/*

Documentation:
- DOCS/PREMIUM_ARCHITECTURE.md
- DOCS/PREMIUM_USER_GUIDE.md
- DOCS/PREMIUM_DEVELOPER_GUIDE.md

Testing Checklist

• Premium mode toggle works
• MyUIbrix disabled when premium active
• All animations work (zoom slider, parallax)
• Dynamic data loads (matches, articles, players)
• Club colors applied correctly
• Responsive on all devices
• Cross-browser compatible
• Performance meets targets (<2s load)
• SEO meta tags working
• Forms submit correctly

Rollback Plan

1. Set PREMIUM_MODE=false in .env
2. Restart backend
3. Clear browser cache
4. Verify standard site works