205 lines
7.5 KiB
Markdown
205 lines
7.5 KiB
Markdown
# 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.* |