feat(ui): refactor gamification UI for role awareness and remove floaters

This commit is contained in:
Satyam
2026-02-22 01:24:26 +05:30
parent 058b5bb217
commit b8a20144d3
5 changed files with 668 additions and 96 deletions
+42 -27
View File
@@ -13,7 +13,7 @@ const LEVEL_THRESHOLDS = [
{ level: 10, xp: 100000, title: 'Legend' }
];
export const useGamification = (user) => {
export const useGamification = (user, role = 'FIELD_AGENT') => {
return useMemo(() => {
if (!user) return null;
@@ -48,32 +48,47 @@ export const useGamification = (user) => {
}
// --- PHASE 3: CHECKPOINTS & STAGES ---
const STAGES = [
{
id: 1,
title: "Stage 1: Groundwork",
requirement: { type: "doorsKnocked", amount: 20 },
reward: { type: "coupon", name: "$25 Uber Eats Card", icon: "uber" },
progress: Math.min((user.doorsKnocked || 0), 20),
goal: 20
},
{
id: 2,
title: "Stage 2: Connections",
requirement: { type: "appointmentsSet", amount: 10 },
reward: { type: "giftcard", name: "$50 Amazon Card", icon: "amazon" },
progress: Math.min((user.appointmentsSet || 0), 10),
goal: 10
},
{
id: 3,
title: "Stage 3: Rainmaker",
requirement: { type: "leadsGained", amount: 25 },
reward: { type: "cash", name: "$150 Performance Bonus", icon: "cash" },
progress: Math.min((user.leadsGained || 0), 25),
goal: 25
}
];
let STAGES = [];
if (role === 'OWNER') {
STAGES = [
{ id: 1, title: "Q1 Launch", requirement: { type: "onboarding", amount: 3 }, reward: { type: "coupon", name: "Territory Expansion", icon: "map" }, progress: 1, goal: 3 },
{ id: 2, title: "Market Domination", requirement: { type: "revenue", amount: 100 }, reward: { type: "giftcard", name: "Executive Suite Unlock", icon: "star" }, progress: 85, goal: 100 },
{ id: 3, title: "Empire Builder", requirement: { type: "deals", amount: 50 }, reward: { type: "cash", name: "Profit Share Tier 2", icon: "cash" }, progress: 20, goal: 50 }
];
} else if (role === 'ADMIN') {
STAGES = [
{ id: 1, title: "Squad Setup", requirement: { type: "recruits", amount: 5 }, reward: { type: "coupon", name: "Team Bonus Unlock", icon: "users" }, progress: 3, goal: 5 },
{ id: 2, title: "Territory Control", requirement: { type: "regions", amount: 4 }, reward: { type: "giftcard", name: "Admin Power-Up", icon: "zap" }, progress: 4, goal: 4 },
{ id: 3, title: "Regional Manager", requirement: { type: "sales", amount: 20 }, reward: { type: "cash", name: "Override Commission", icon: "cash" }, progress: 12, goal: 20 }
];
} else {
STAGES = [
{
id: 1,
title: "Stage 1: Groundwork",
requirement: { type: "doorsKnocked", amount: 20 },
reward: { type: "coupon", name: "$25 Uber Eats Card", icon: "uber" },
progress: Math.min((user.doorsKnocked || 0), 20),
goal: 20
},
{
id: 2,
title: "Stage 2: Connections",
requirement: { type: "appointmentsSet", amount: 10 },
reward: { type: "giftcard", name: "$50 Amazon Card", icon: "amazon" },
progress: Math.min((user.appointmentsSet || 0), 10),
goal: 10
},
{
id: 3,
title: "Stage 3: Rainmaker",
requirement: { type: "leadsGained", amount: 25 },
reward: { type: "cash", name: "$150 Performance Bonus", icon: "cash" },
progress: Math.min((user.leadsGained || 0), 25),
goal: 25
}
];
}
// Determine lock states
const stages = STAGES.map((s, idx) => {