Gamificación y Misiones

Sistema de misiones, progresión de XP, tablas de clasificación y seguimiento de misiones — motiva a los operadores con mecánicas de juego manteniendo la integridad completa de la pista de auditoría.

Última actualización: 2025-02-18

Gamificación y Misiones

Certexi incluye una capa opcional de gamificación que motiva a los operadores de almacén a través de misiones, progresión de XP y tablas de clasificación — todo mientras mantiene la misma integridad de pista de auditoría que las operaciones estándar.

Encabezado de Gamificación

El encabezado persistente muestra el nivel actual del operador, progreso de XP y racha activa.

<Card className="w-full">
  <CardContent className="p-3">
    <div className="flex items-center gap-4">
      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white font-bold text-sm">12</div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium">Carlos Mendez</span>
          <Badge className="bg-amber-500 text-white text-[10px]">Oro</Badge>
        </div>
        <div className="flex items-center gap-2 mt-1">
          <Progress value={72} className="h-1.5 flex-1" />
          <span className="text-[10px] text-muted-foreground">7,200 / 10,000 XP</span>
        </div>
      </div>
      <div className="text-right">
        <div className="text-lg font-bold">15</div>
        <div className="text-[10px] text-muted-foreground">Días de racha</div>
      </div>
    </div>
  </CardContent>
</Card>

Tarjeta de Misión

Las misiones definen objetivos específicos con recompensas de XP. Los operadores siguen el progreso en tiempo real.

<Card className="w-72">
  <CardHeader className="pb-2">
    <div className="flex items-center justify-between">
      <Badge variant="outline" className="text-[10px]">Misión Diaria</Badge>
      <span className="text-[10px] text-amber-500 font-medium">+500 XP</span>
    </div>
    <CardTitle className="text-sm mt-1">Velocista</CardTitle>
    <CardDescription>Procesa 20 unidades de transporte antes del mediodía</CardDescription>
  </CardHeader>
  <CardContent className="space-y-2">
    <div className="flex justify-between text-xs">
      <span className="text-muted-foreground">Progreso</span>
      <span>14 / 20 unidades</span>
    </div>
    <Progress value={70} className="h-1.5" />
    <div className="flex justify-between text-xs text-muted-foreground">
      <span>Inicio 07:00</span>
      <span>Límite 12:00</span>
    </div>
  </CardContent>
</Card>

Tarjeta de Operativo

Los operativos son objetivos a largo plazo que abarcan múltiples días e involucran coordinación de equipo.

<Card className="w-72">
  <CardHeader className="pb-2">
    <div className="flex items-center justify-between">
      <Badge className="bg-purple-500 text-white text-[10px]">Operativo de Equipo</Badge>
      <span className="text-[10px] text-amber-500 font-medium">+2,000 XP</span>
    </div>
    <CardTitle className="text-sm mt-1">Semana Cero Incidentes</CardTitle>
    <CardDescription>Completar 7 días con cero incidentes de cumplimiento</CardDescription>
  </CardHeader>
  <CardContent className="space-y-2">
    <div className="flex gap-1">
      <div className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center text-[10px]">L</div>
      <div className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center text-[10px]">M</div>
      <div className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center text-[10px]">X</div>
      <div className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center text-[10px]">J</div>
      <div className="w-6 h-6 rounded bg-blue-500 text-white flex items-center justify-center text-[10px]">V</div>
      <div className="w-6 h-6 rounded border border-muted-foreground/30 flex items-center justify-center text-[10px] text-muted-foreground">S</div>
      <div className="w-6 h-6 rounded border border-muted-foreground/30 flex items-center justify-center text-[10px] text-muted-foreground">D</div>
    </div>
    <Progress value={71} className="h-1.5" />
    <div className="text-xs text-muted-foreground">5/7 días completados — 2 días restantes</div>
  </CardContent>
</Card>

Tabla de Clasificación

<Card className="w-80">
  <CardHeader className="pb-2">
    <CardTitle className="text-sm">Tabla de Clasificación Semanal</CardTitle>
    <CardDescription>Mejores operadores por XP ganado</CardDescription>
  </CardHeader>
  <CardContent className="space-y-2">
    <div className="flex items-center gap-3 p-2 rounded bg-amber-500/10">
      <span className="text-sm font-bold w-5">1</span>
      <div className="w-7 h-7 rounded-full bg-amber-500 flex items-center justify-center text-white text-xs font-bold">CM</div>
      <div className="flex-1">
        <div className="text-sm font-medium">Carlos Mendez</div>
        <div className="text-[10px] text-muted-foreground">Nivel 12</div>
      </div>
      <span className="text-sm font-bold">4,250 XP</span>
    </div>
    <div className="flex items-center gap-3 p-2 rounded">
      <span className="text-sm font-bold w-5">2</span>
      <div className="w-7 h-7 rounded-full bg-gray-400 flex items-center justify-center text-white text-xs font-bold">AR</div>
      <div className="flex-1">
        <div className="text-sm font-medium">Ana Rodriguez</div>
        <div className="text-[10px] text-muted-foreground">Nivel 10</div>
      </div>
      <span className="text-sm font-bold">3,890 XP</span>
    </div>
    <div className="flex items-center gap-3 p-2 rounded">
      <span className="text-sm font-bold w-5">3</span>
      <div className="w-7 h-7 rounded-full bg-orange-700 flex items-center justify-center text-white text-xs font-bold">JL</div>
      <div className="flex-1">
        <div className="text-sm font-medium">Jorge Lopez</div>
        <div className="text-[10px] text-muted-foreground">Nivel 9</div>
      </div>
      <span className="text-sm font-bold">3,420 XP</span>
    </div>
  </CardContent>
</Card>

Mecánicas de Juego

MecánicaDescripciónRango de XP
ColocaciónCompletar una colocación con evidencia completa50-100 XP
VerificaciónVerificar la colocación de otro operador25-50 XP
Misión completadaTerminar una misión diaria/semanal200-2,000 XP
Bono de rachaDías consecutivos con actividad1.5x-3x multiplicador
Auditoría perfectaCero discrepancias en un turno500 XP
Bono de velocidadProcesar unidad bajo el tiempo objetivo75 XP

Integración con Pista de Auditoría

ℹ️

Trazabilidad Completa

Los eventos de gamificación se registran en la misma pista de auditoría inmutable que los eventos operacionales. Premios de XP, misiones completadas y cambios en la tabla de clasificación están todos hasheados criptográficamente y son verificables.

Cada acción de gamificación genera un evento de auditoría:

EventoCampos
XP_AWARDEDoperator, amount, source, quest_id
QUEST_STARTEDoperator, quest_id, deadline
QUEST_COMPLETEDoperator, quest_id, xp_earned
LEVEL_UPoperator, new_level, total_xp
STREAK_UPDATEDoperator, streak_days, multiplier

Componentes

ComponenteRutaDescripción
GamificationHeader@/components/whms/GamificationHeaderBarra de XP, nivel, visualización de racha
QuestCard@/components/whms/QuestCardProgreso de misión individual
QuestsTab@/components/whms/QuestsTabLista de misiones y filtros
QuestCreator@/components/whms/QuestCreatorConstructor de misiones para administradores
MissionCard@/components/whms/MissionCardProgreso de operativo de equipo
MissionsTab@/components/whms/MissionsTabLista de operativos en mapa
AdminGameSetup@/components/whms/admin/AdminGameSetupConfigurar juegos y reglas

Configuración

La gamificación se habilita por instalación mediante variable de entorno:

ENABLE_GAMIFICATION=true
GAMIFICATION_XP_MULTIPLIER=1.0
GAMIFICATION_LEADERBOARD_RESET=weekly

Relacionado