feat: باشگاه امتیازات کارکنان (موتور امتیاز، جدول رتبه، فروشگاه پاداش، نشان‌ها، پنل مدیریت و گزارش ROI)

- موتور رویدادمحور با شرط، محدودیت، تأیید مدیر و idempotency - اتصال به لید، مشتری، معامله، فعالیت، روتین، پیش‌فاکتور، فاکتور و تیکت - صفحه /club و /club/admin، اعلان زنده امتیاز، آیتم منو - انتقال فرم‌ساز سرنخ به ابزارها Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-10 21:28:49 +03:30
parent b87ebb22e0
commit 60d797f184
51 changed files with 11298 additions and 806 deletions
@@ -0,0 +1,378 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import type { GamificationLeaderboardDto, GamificationLeaderEntryDto, GamificationPeriod } from '@mento/shared';
+import { GAMIFICATION_PERIOD_LABELS } from '@mento/shared';
+import UiIcon from '@/components/UiIcon.vue';
+import UserAvatar from '@/components/UserAvatar.vue';
+import { api } from '@/lib/api';
+import { toFaDigits } from '@/lib/jalali';
+import { apiError, faNum } from '@/lib/gamification';
+
+const PERIODS: GamificationPeriod[] = ['today', 'week', 'month', 'quarter', 'year', 'all'];
+
+const period = ref<GamificationPeriod>('month');
+const board = ref<GamificationLeaderboardDto | null>(null);
+const loading = ref(false);
+const error = ref('');
+
+async function load() {
+  loading.value = true;
+  try {
+    const { data } = await api.get<GamificationLeaderboardDto>('/gamification/leaderboard', {
+      params: { period: period.value, limit: 50 },
+    });
+    board.value = data;
+    error.value = '';
+  } catch (e) {
+    error.value = apiError(e, 'بارگذاری جدول امتیازات ممکن نشد.');
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(period, load);
+onMounted(() => {
+  void load();
+  window.addEventListener('gamification:updated', load);
+});
+onBeforeUnmount(() => window.removeEventListener('gamification:updated', load));
+
+const top3 = computed(() => (board.value?.items ?? []).slice(0, 3).filter((x) => x.score > 0));
+const rest = computed(() => {
+  const items = board.value?.items ?? [];
+  return top3.value.length ? items.slice(top3.value.length) : items;
+});
+const meOutside = computed(() => {
+  const b = board.value;
+  if (!b?.me) return null;
+  return b.items.some((i) => i.userId === b.me!.userId) ? null : b.me;
+});
+
+function changeLabel(e: GamificationLeaderEntryDto) {
+  if (!e.change) return '';
+  return `${toFaDigits(Math.abs(e.change))}`;
+}
+
+const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
+</script>
+
+<template>
+  <section class="board">
+    <header class="b-head">
+      <div>
+        <h3><UiIcon name="trophy" :size="18" /> جدول امتیازات</h3>
+        <small v-if="board">{{ toFaDigits(board.totalUsers) }} همکار در رقابت</small>
+      </div>
+      <div class="periods" role="tablist">
+        <button
+          v-for="p in PERIODS"
+          :key="p"
+          type="button"
+          role="tab"
+          :aria-selected="period === p"
+          :class="{ on: period === p }"
+          @click="period = p"
+        >
+          {{ GAMIFICATION_PERIOD_LABELS[p] }}
+        </button>
+      </div>
+    </header>
+
+    <p v-if="error" class="err">{{ error }}</p>
+
+    <div v-if="top3.length" class="top3" :class="{ loading }">
+      <div
+        v-for="(e, i) in top3"
+        :key="e.userId"
+        class="t-card"
+        :class="{ me: e.isMe }"
+        :style="{ '--m': MEDALS[i] }"
+      >
+        <span class="t-rank">{{ toFaDigits(e.rank) }}</span>
+        <UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="46" />
+        <strong>{{ e.isMe ? 'شما' : e.fullName }}</strong>
+        <small>{{ e.levelName }}</small>
+        <b>{{ faNum(e.score) }} <span>امتیاز</span></b>
+      </div>
+    </div>
+
+    <ol class="rows" :class="{ loading }">
+      <li v-for="e in rest" :key="e.userId" :class="{ me: e.isMe }">
+        <span class="rank">{{ toFaDigits(e.rank) }}</span>
+        <UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="32" />
+        <span class="who">
+          <b>{{ e.isMe ? 'شما' : e.fullName }}</b>
+          <small>{{ e.levelName }}</small>
+        </span>
+        <span v-if="e.change" class="chg" :class="e.change > 0 ? 'up' : 'down'">
+          {{ e.change > 0 ? '▲' : '▼' }}{{ changeLabel(e) }}
+        </span>
+        <span class="score">{{ faNum(e.score) }}</span>
+      </li>
+      <template v-if="meOutside">
+        <li class="sep" aria-hidden="true">⋯</li>
+        <li class="me">
+          <span class="rank">{{ toFaDigits(meOutside.rank) }}</span>
+          <UserAvatar :user-id="meOutside.userId" :has-avatar="meOutside.hasAvatar" :name="meOutside.fullName" :size="32" />
+          <span class="who">
+            <b>شما</b>
+            <small>{{ meOutside.levelName }}</small>
+          </span>
+          <span v-if="meOutside.change" class="chg" :class="meOutside.change > 0 ? 'up' : 'down'">
+            {{ meOutside.change > 0 ? '▲' : '▼' }}{{ changeLabel(meOutside) }}
+          </span>
+          <span class="score">{{ faNum(meOutside.score) }}</span>
+        </li>
+      </template>
+      <li v-if="board && !board.items.length" class="empty">هنوز کسی در این بازه امتیاز نگرفته است.</li>
+    </ol>
+  </section>
+</template>
+
+<style scoped>
+.board {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) + 4px);
+  padding: var(--sp-4);
+  box-shadow: var(--shadow-xs);
+  display: grid;
+  gap: var(--sp-3);
+  min-width: 0;
+}
+
+.b-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+}
+
+.b-head h3 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-md);
+  color: var(--ink);
+}
+
+.b-head h3 :deep(svg) {
+  color: #f59e0b;
+}
+
+.b-head small {
+  font-size: var(--fs-xs);
+  color: var(--muted);
+}
+
+.periods {
+  display: flex;
+  gap: 4px;
+  background: var(--surface-subtle);
+  border-radius: 999px;
+  padding: 3px;
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.periods::-webkit-scrollbar {
+  display: none;
+}
+
+.periods button {
+  border: 0;
+  background: none;
+  border-radius: 999px;
+  padding: 0.3rem 0.7rem;
+  font: inherit;
+  font-size: var(--fs-xs);
+  font-weight: 700;
+  color: var(--muted);
+  cursor: pointer;
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.periods button.on {
+  background: var(--surface);
+  color: var(--accent-deep);
+  box-shadow: var(--shadow-xs);
+}
+
+.err {
+  margin: 0;
+  color: var(--danger);
+  font-size: var(--fs-sm);
+}
+
+.top3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sp-2);
+}
+
+.t-card {
+  --m: #f59e0b;
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 3px;
+  padding: var(--sp-3) var(--sp-2);
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--m) 35%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--m) 12%, var(--surface)), var(--surface));
+  text-align: center;
+  min-width: 0;
+}
+
+.t-card.me {
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
+.t-rank {
+  position: absolute;
+  top: 8px;
+  inset-inline-start: 8px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--m);
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.t-card strong {
+  font-size: var(--fs-sm);
+  color: var(--ink);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.t-card small {
+  font-size: 0.7rem;
+  color: var(--muted);
+}
+
+.t-card b {
+  font-size: var(--fs-md);
+  font-weight: 800;
+  color: var(--ink);
+}
+
+.t-card b span {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+
+.rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.rows li {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 7px var(--sp-2);
+  border-radius: 10px;
+  transition: background 0.15s ease;
+}
+
+.rows li:hover {
+  background: var(--surface-hover);
+}
+
+.rows li.me {
+  background: var(--accent-subtle);
+  box-shadow: inset 0 0 0 1px var(--accent-soft);
+}
+
+.rows li.sep {
+  justify-content: center;
+  color: var(--muted-light);
+  padding: 0;
+}
+
+.rank {
+  width: 26px;
+  text-align: center;
+  font-weight: 800;
+  color: var(--muted);
+  font-size: var(--fs-sm);
+  flex: 0 0 auto;
+}
+
+.who {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+}
+
+.who b {
+  font-size: var(--fs-sm);
+  color: var(--ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.who small {
+  font-size: 0.68rem;
+  color: var(--muted);
+}
+
+.chg {
+  font-size: 0.7rem;
+  font-weight: 800;
+  flex: 0 0 auto;
+}
+
+.chg.up {
+  color: var(--success-deep);
+}
+
+.chg.down {
+  color: var(--muted-light);
+}
+
+.score {
+  font-weight: 800;
+  color: var(--ink);
+  font-size: var(--fs-sm);
+  min-width: 52px;
+  text-align: end;
+  flex: 0 0 auto;
+}
+
+.loading {
+  opacity: 0.55;
+}
+
+.empty {
+  justify-content: center;
+  color: var(--muted);
+  font-size: var(--fs-sm);
+}
+
+@media (max-width: 520px) {
+  .top3 {
+    gap: 6px;
+  }
+
+  .t-card {
+    padding: var(--sp-2) 4px;
+  }
+}
+</style>