kincses/service-finder
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 2 Releases Wiki Activity
Files
5d96b00f81005fc3015b77418940e094f3b0e669
service-finder/docs/epic_10_admin_frontend_spec.md
Roo 5d96b00f81 teljes backend_mentés
2026-03-22 18:59:27 +00:00

7.5 KiB
Raw Blame History

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.

Reference in New Issue View Git Blame Copy Permalink