dev day #81

DOCS/PREMIUM_IMPLEMENTATION_SCHEDULE.md

@@ -0,0 +1,277 @@
+# 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)
+```bash
+# 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)
+```go
+router.Static("/premium/css", "./pro/css")
+router.Static("/premium/js", "./pro/js")
+router.Static("/premium/img", "./pro/img")
+```
+
+#### 2.5 Database Migration (2h)
+```sql
+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)
+```typescript
+// 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)
+```typescript
+<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
+```bash
+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