# Epic 10 - Nuxt 3 Mission Control (Admin Dashboard)
**Frontend Specification for Service Finder Admin Interface**

## 📋 Overview
This epic defines the development of a modern, reactive admin dashboard built with Nuxt 3 and Vuetify/Tailwind CSS. The dashboard will provide comprehensive control over the Service Finder ecosystem, including service moderation, AI pipeline monitoring, gamification management, and user administration.

## 🛠️ Technology Stack
- **Framework:** Nuxt 3 (SSR/SPA hybrid)
- **UI Library:** Vuetify 3 (Material Design) OR Tailwind CSS + Headless UI
- **State Management:** Pinia (Vuex 5)
- **Mapping:** Leaflet (with Vue3-leaflet wrapper)
- **Charts:** Chart.js / Vue-chartjs
- **HTTP Client:** Axios / Nuxt $fetch
- **Authentication:** JWT tokens with refresh mechanism
- **Form Validation:** Vee-Validate / Zod
- **Internationalization:** Nuxt i18n (hu/en)
- **Build Tool:** Vite
- **Package Manager:** npm / yarn

## 🎯 Functional Requirements

### Jegy 1: Alapstruktúra, Auth & JWT Login Felület
**Ticket ID:** #TBD (to be assigned in Gitea)
**Scope:** Frontend Core, Authentication
**Estimated Complexity:** Medium

#### Requirements:
1. **Project Scaffolding**
   - Nuxt 3 project initialization with TypeScript
   - Vuetify 3/Tailwind CSS integration
   - Layout system with admin sidebar, header, and main content area
   - Responsive design (mobile/tablet/desktop)

2. **Authentication System**
   - JWT login page with email/password form
   - Token storage in secure HTTP-only cookies
   - Auto-refresh token mechanism
   - Protected route middleware (Nuxt middleware)
   - Login/logout flow with redirects

3. **Admin Layout Components**
   - Sidebar navigation with collapsible menu
   - Header with user profile dropdown and notifications
   - Breadcrumb navigation
   - Dark/light theme toggle

4. **API Integration**
   - Axios instance with interceptors for auth headers
   - Centralized error handling (401 redirect to login, 403/404 displays)
   - Loading states and progress indicators

5. **Initial Pages**
   - Dashboard overview (placeholder)
   - Login page
   - 404/error pages

### Jegy 2: Térképes Szerviz Moderátor (Leaflet integráció)
**Ticket ID:** #TBD
**Scope:** Frontend Mapping, Service Moderation
**Estimated Complexity:** High

#### Requirements:
1. **Leaflet Map Integration**
   - Vue3-leaflet wrapper setup
   - Hungarian map tiles (OpenStreetMap/Mapbox)
   - Cluster markers for service locations
   - Zoom/pan controls with bounds restriction

2. **Service Visualization**
   - Different marker colors/icons for service statuses:
     - Ghost (gray) - robot-discovered, unverified
     - Active (green) - verified, public services
     - Flagged (orange) - suspicious, needs manual review
     - Suspended (red) - banned services
   - Marker popups with service summary
   - Filter controls by status/city/rating

3. **Moderation Actions**
   - Right-click context menu on markers
   - Change status (ghost→active, active→flagged, etc.)
   - Bulk selection and status updates
   - Service details modal with full information
   - Edit service profile (contact info, hours, tags)

4. **Geospatial Features**
   - Drag-and-drop marker relocation for ghost services
   - Address search with geocoding (Nominatim API)
   - Radius search around a point
   - Export selected services as CSV/GeoJSON

5. **Real-time Updates**
   - WebSocket connection for live service status changes
   - Notification when new ghost services appear

### Jegy 3: AI Pipeline Monitor (Progress barok, manuális újrafuttatás)
**Ticket ID:** #TBD
**Scope:** Frontend Monitoring, AI Integration
**Estimated Complexity:** Medium-High

#### Requirements:
1. **Pipeline Dashboard**
   - Overview of all AI robots (GB Discovery, GB Hunter, VIES Validator, OSM Enricher)
   - Current status (idle, running, failed, completed)
   - Last run timestamps and durations
   - Success/failure statistics (charts)

2. **Progress Visualization**
   - Real-time progress bars for active pipelines
   - Step-by-step breakdown (fetching, processing, saving)
   - Live log stream with auto-scroll
   - Color-coded log levels (INFO, WARN, ERROR)

3. **Manual Control**
   - "Run Now" buttons for each robot (with confirmation)
   - Stop/abort running pipelines
   - Configuration parameter editing
   - Schedule management (cron expression editor)

4. **Log Management**
   - Filterable log table with search
   - Export logs as text file
   - Log detail modal with stack traces
   - Automatic log rotation display

5. **VIES/OSM Integration**
   - Dedicated panels for VIES validation results
   - OSM enrichment statistics
   - Side-by-side comparison of raw vs enriched data
   - Manual validation override controls

### Jegy 4: Gamification Vezérlő & User Menedzsment
**Ticket ID:** #TBD
**Scope:** Frontend Gamification, User Administration
**Estimated Complexity:** Medium

#### Requirements:
1. **User Management Interface**
   - User table with pagination and sorting
   - Filter by level, status, registration date
   - Quick actions (ban, promote to admin, reset password)
   - User detail view with activity history

2. **Gamification Control Panel**
   - Level configuration editor (-3 to +10 levels)
   - Edit rank names, point thresholds, penalty flags
   - Real-time preview of level progression
   - Bulk level adjustments for user groups

3. **Penalty System Management**
   - Assign penalty levels (-1, -2, -3) to users
   - View penalty quota usage
   - Manual penalty point addition/removal
   - Ban user temporarily/permanently

4. **Point Administration**
   - Manual XP/point adjustment interface
   - Transaction ledger with filters
   - Revert mistaken point allocations
   - Export user stats as CSV

5. **Badge & Achievement System**
   - Badge creation/editing interface
   - Assign badges to users
   - Badge gallery with unlock conditions
   - Seasonal competition management

## 🎨 Design Requirements
- **Design System:** Follow Material Design 3 guidelines
- **Color Palette:** Service Finder brand colors (primary: #3B82F6, secondary: #10B981)
- **Accessibility:** WCAG 2.1 AA compliant
- **Responsive:** Mobile-first approach, breakpoints at 640px, 768px, 1024px, 1280px
- **Icons:** Material Design Icons (mdi-vue)

## 🔧 Technical Specifications
- **Code Quality:** ESLint, Prettier, TypeScript strict mode
- **Testing:** Vitest for unit tests, Cypress for E2E
- **Performance:** Lazy loading routes, code splitting, image optimization
- **Security:** CSP headers, XSS protection, sanitized inputs
- **Browser Support:** Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

## 📊 Success Metrics
- Page load time < 2 seconds
- Time to interactive < 3 seconds
- Lighthouse score > 90
- Zero critical security vulnerabilities
- 100% test coverage for critical paths

## 🔗 Dependencies
- **Backend:** Requires completed seed_v2_0.py for mock data
- **APIs:** Authentication API, Service Profile API, Gamification API, AI Pipeline API
- **External:** OpenStreetMap tiles, Nominatim geocoding

## 📅 Implementation Phases
1. **Phase 1 (Week 1-2):** Core setup, authentication, basic layout
2. **Phase 2 (Week 3-4):** Map integration, service moderation
3. **Phase 3 (Week 5-6):** AI pipeline monitoring
4. **Phase 4 (Week 7-8):** Gamification controls, polish, testing

## 🚀 Deployment Strategy
- **Development:** Local Nuxt dev server
- **Staging:** Docker container with Nginx
- **Production:** Cloudflare Pages / Vercel / Self-hosted Nginx

---
*This specification serves as the foundation for Gitea ticket creation and frontend development planning. Each "Jegy" section corresponds to a separate development ticket.*