Gamification & Quests

Quest system, XP progression, leaderboards, and mission tracking — motivate operators with game mechanics while maintaining full audit trail integrity.

Last updated: 2025-02-18

Gamification & Quests

Certexi includes an optional gamification layer that motivates warehouse operators through quests, XP progression, and leaderboards — all while maintaining the same audit trail integrity as standard operations.

Gamification Header

The persistent header shows the operator's current level, XP progress, and active streak.

<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]">Gold</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">Day streak</div>
      </div>
    </div>
  </CardContent>
</Card>

Quest Card

Quests define specific objectives with XP rewards. Operators track progress in real time.

<Card className="w-72">
  <CardHeader className="pb-2">
    <div className="flex items-center justify-between">
      <Badge variant="outline" className="text-[10px]">Daily Quest</Badge>
      <span className="text-[10px] text-amber-500 font-medium">+500 XP</span>
    </div>
    <CardTitle className="text-sm mt-1">Speed Demon</CardTitle>
    <CardDescription>Process 20 transport units before noon</CardDescription>
  </CardHeader>
  <CardContent className="space-y-2">
    <div className="flex justify-between text-xs">
      <span className="text-muted-foreground">Progress</span>
      <span>14 / 20 units</span>
    </div>
    <Progress value={70} className="h-1.5" />
    <div className="flex justify-between text-xs text-muted-foreground">
      <span>Started 07:00</span>
      <span>Deadline 12:00</span>
    </div>
  </CardContent>
</Card>

Mission Card

Missions are longer-term objectives that span multiple days and involve team coordination.

<Card className="w-72">
  <CardHeader className="pb-2">
    <div className="flex items-center justify-between">
      <Badge className="bg-purple-500 text-white text-[10px]">Team Mission</Badge>
      <span className="text-[10px] text-amber-500 font-medium">+2,000 XP</span>
    </div>
    <CardTitle className="text-sm mt-1">Zero Incidents Week</CardTitle>
    <CardDescription>Complete 7 days with zero compliance incidents</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]">M</div>
      <div className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center text-[10px]">T</div>
      <div className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center text-[10px]">W</div>
      <div className="w-6 h-6 rounded bg-green-500 text-white flex items-center justify-center text-[10px]">T</div>
      <div className="w-6 h-6 rounded bg-blue-500 text-white flex items-center justify-center text-[10px]">F</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">S</div>
    </div>
    <Progress value={71} className="h-1.5" />
    <div className="text-xs text-muted-foreground">5/7 days complete — 2 days remaining</div>
  </CardContent>
</Card>

Leaderboard

<Card className="w-80">
  <CardHeader className="pb-2">
    <CardTitle className="text-sm">Weekly Leaderboard</CardTitle>
    <CardDescription>Top operators by XP earned</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">Level 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">Level 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">Level 9</div>
      </div>
      <span className="text-sm font-bold">3,420 XP</span>
    </div>
  </CardContent>
</Card>

Game Mechanics

Mechanic	Description	XP Range
Placement	Complete a placement with full evidence	50-100 XP
Verification	Verify another operator's placement	25-50 XP
Quest completion	Finish a daily/weekly quest	200-2,000 XP
Streak bonus	Consecutive days with activity	1.5x-3x multiplier
Perfect audit	Zero discrepancies in a shift	500 XP
Speed bonus	Process unit under target time	75 XP

Audit Trail Integration

ℹ️

Full Traceability

Gamification events are recorded in the same immutable audit trail as operational events. XP awards, quest completions, and leaderboard changes are all cryptographically hashed and verifiable.

Every gamification action generates an audit event:

Event	Fields
`XP_AWARDED`	operator, amount, source, quest_id
`QUEST_STARTED`	operator, quest_id, deadline
`QUEST_COMPLETED`	operator, quest_id, xp_earned
`LEVEL_UP`	operator, new_level, total_xp
`STREAK_UPDATED`	operator, streak_days, multiplier

Components

Component	Path	Description
`GamificationHeader`	`@/components/whms/GamificationHeader`	XP bar, level, streak display
`QuestCard`	`@/components/whms/QuestCard`	Individual quest progress
`QuestsTab`	`@/components/whms/QuestsTab`	Quest list and filters
`QuestCreator`	`@/components/whms/QuestCreator`	Admin quest builder
`MissionCard`	`@/components/whms/MissionCard`	Team mission progress
`MissionsTab`	`@/components/whms/MissionsTab`	Mission list on map
`AdminGameSetup`	`@/components/whms/admin/AdminGameSetup`	Configure games and rules

Configuration

Gamification is enabled per facility via environment variable:

ENABLE_GAMIFICATION=true
GAMIFICATION_XP_MULTIPLIER=1.0
GAMIFICATION_LEADERBOARD_RESET=weekly

Gamification & Quests

Gamification Header

Quest Card

Mission Card

Leaderboard

Game Mechanics

Audit Trail Integration

Components

Configuration

Related