⚡ Flix Support v2.0

Sistema Inteligente de Gestión de Soporte Técnico

---

📌 ¿Qué es Flix Support?

Flix Support es una plataforma completa de gestión de soporte técnico construida con las últimas tecnologías web. Diseñada para empresas y personas, incluye gestión de tickets, IA predictiva, tablero Kanban, pagos con YAPE/PLIN, y notificaciones en tiempo real.

✨ Novedades v2.0

Novedad	Descripción
🪟 Frosted Glass Landing	Diseño premium con glassmorphism en 3 niveles, mockups realistas de laptop y teléfono, animaciones Framer Motion
🔔 Sistema de Notificaciones	Persistencia en DB, SSE en tiempo real, bell dropdown con badge, banner mobile con swipe dismiss
📊 Dashboard Rediseñado	Cards con gradiente, barras color-codeadas por estado, tarjeta de eficiencia, diseño dark-first
💳 YAPE/PLIN Reales	Logos oficiales y QR codes reales en landing y modales de pago
🖥️ Mockups de Dispositivos	Laptop con bezel negro + webcam, teléfono con Dynamic Island y marco metálico
🌙 Dark Mode Default	Arranca en modo oscuro sin flash blanco, tipografía y colores optimizados para ambos temas
🧭 Navegación Inteligente	Redirect al login devuelve al usuario a donde estaba, kiosko detecta sesión activa, sidebar con "Panel Global" para SUPER_ADMIN
📱 PWA + Capacitor	Instalable en home screen, Service Worker, push notifications nativas

---

🎯 Características Principales

Categoría	Funcionalidades
🎫 Tickets	Creación con IA, asignación, seguimiento por estados, comentarios, historial, evaluación post-resolución
🤖 IA Predictiva	Clasificación automática, análisis de sentimiento, sugerencias de solución, triage por chat
📊 Kanban	Vista de columnas drag & drop, 5 estados, validación de transiciones
📈 Analytics	Dashboard en tiempo real, métricas, gráficos por categoría, tendencias
💳 Pagos	Ticket Exprés (respuesta <2h), YAPE, PLIN, Visa, Mastercard con logos y QR reales
📚 Base de Conocimiento	13 artículos documentados, busqueda, categorización
🔔 Notificaciones	Persistencia DB, SSE tiempo real, bell dropdown, banner mobile, badge counter
🖥️ Kiosko Auto-Servicio	Pantalla pública, diagnóstico guiado, requiere login para crear tickets
👥 Roles	SUPER_ADMIN, ADMIN, TECHNICIAN, END_USER con permisos diferenciados
🏢 Multi-tenant	Aislamiento por organización, suscripciones, planes de pago
📱 PWA	Manifest, Service Worker, instalable, push notifications
🎨 UI Premium	Frosted glass, animaciones Framer Motion, dark/light mode, responsive

---

🏗️ Arquitectura

┌──────────────────────────────────────────────────┐
│                   🌐 FRONTEND                    │
│  Next.js 14 App Router + React 18 + TypeScript   │
│                                                  │
│  ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │
│  │ Landing  │ │ Dashboard│ │   Super Admin    │ │
│  │ Glass    │ │ Gradient │ │   Panel Global   │ │
│  │ Mockups  │ │ Cards    │ │   Organizaciones │ │
│  └──────────┘ └──────────┘ └──────────────────┘ │
│                                                  │
│  UI: Tailwind + Radix/shadcn + Framer Motion    │
└───────────────────────┬──────────────────────────┘
                        │
┌───────────────────────▼──────────────────────────┐
│                 ⚡ API ROUTES                     │
│  Next.js API Routes + Middleware (JWT + Roles)   │
│                                                  │
│  Auth │ Tickets │ AI │ Knowledge │ Payments      │
│  Users│ Notifications │ Subscriptions │ Admin    │
│  40+ endpoints RESTful + SSE                    │
└───────────────────────┬──────────────────────────┘
                        │
┌───────────────────────▼──────────────────────────┐
│                 🗄️ DATABASE                      │
│  PostgreSQL (Neon Serverless) + Prisma ORM       │
│                                                  │
│  Organization → User → Ticket → Comment          │
│  → History → Evaluation → Category               │
│  → KnowledgeArticle → Subscription → Payment     │
│  → Notification → PushToken                      │
│                                                  │
│  17 modelos, 8 migraciones                       │
└──────────────────────────────────────────────────┘

---

🛠️ Stack Tecnológico

Capa	Tecnología
Framework	Next.js 14 (App Router)
Lenguaje	TypeScript 5
UI	React 18, Tailwind CSS 3, Radix UI, shadcn/ui
Animaciones	Framer Motion
ORM	Prisma 5
Base de Datos	PostgreSQL (Neon Serverless)
Auth	JWT (jose)
IA	Groq API (Llama 3.1)
PWA	Service Worker, Web Manifest, Capacitor
Deploy	Vercel
Testing	Vitest (125 tests), Playwright (E2E)
Iconos	Lucide React

---

📂 Estructura del Proyecto

FlixSupport/
├── src/
│   ├── app/
│   │   ├── (auth)/login/register/       # Autenticación
│   │   ├── (dashboard)/                 # Panel usuario/admin/técnico
│   │   │   ├── dashboard/               # Dashboard principal
│   │   │   ├── tickets/                 # CRUD + Kanban + Compras
│   │   │   ├── knowledge/               # Base de conocimiento
│   │   │   └── ...
│   │   ├── (super-admin)/               # Panel SUPER_ADMIN
│   │   ├── kiosk/                       # Kiosko auto-servicio
│   │   ├── api/                         # 40+ endpoints REST API
│   │   ├── layout.tsx                   # Root layout (dark mode)
│   │   └── page.tsx                     # Landing page
│   ├── components/
│   │   ├── ui/                          # shadcn/ui + custom (glass, payment, kanban)
│   │   ├── notifications.tsx            # Bell dropdown
│   │   └── mobile-notification-banner.tsx
│   ├── hooks/
│   │   ├── use-count-up.ts             # Animación numérica
│   │   └── use-push-notifications.ts    # Push nativo + Web
│   ├── lib/
│   │   ├── ai/                          # Groq client, triage, classify
│   │   ├── notifications.ts            # SSE pub/sub + DB persist
│   │   ├── theme.ts                    # Colors centralizados
│   │   └── capacitor.ts                # Platform detection
│   └── middleware.ts                    # Auth + Role guard
├── prisma/
│   ├── schema.prisma                    # 17 modelos
│   └── migrations/                      # 8 migraciones
├── public/
│   ├── screenshots/                     # Capturas reales del producto
│   ├── yape-*.png, plin-*.png          # Logos de pago
│   ├── sw.js                           # Service Worker
│   └── manifest.json                   # PWA manifest
├── __tests__/                           # 125 tests unitarios + API
├── docs/                                # Documentación
└── capacitor.config.ts                  # Config Capacitor

---

🚀 Quick Start

# Clonar
git clone https://github.com/Ludinhosilva/HELPDESK.git
cd HELPDESK

# Instalar dependencias
npm install

# Configurar variables de entorno (.env)
DATABASE_URL="postgresql://..."
GROQ_API_KEY="gsk_..."
JWT_SECRET="tu-secreto"

# Migrar base de datos
npx prisma migrate dev

# Iniciar desarrollo
npm run dev

Abre http://localhost:3000

Credenciales de prueba

Rol	Email	Contraseña
SUPER_ADMIN	super@flixsupport.com	admin123
ADMIN	admin@techcorp.com	admin123
TECHNICIAN	tech@techcorp.com	admin123
END_USER	user@techcorp.com	admin123

---

🧪 Testing

# Unit + API Tests (125 tests)
npm run test

# E2E Tests
npx playwright test

# Lint
npm run lint

---

📄 Licencia

Proyecto Académico — Universidad Nacional de la Amazonía Peruana (UNAP) Ingeniería de Sistemas — 2026

Autor: Ludwing Silva

---

⚡ Flix Support v2.0 — Tu help desk, sin complicaciones.