club home redesign; deal card menu: delete with confirmation

apps/web/src/components/gamification/ClubHome.vue

@@ -8,23 +8,68 @@ import { toFaDigits } from '@/lib/jalali';
 import { faNum, signedFa, timeAgo, txIcon } from '@/lib/gamification';
 import ClubLeaderboard from './ClubLeaderboard.vue';
 import { useClub } from './club-context';
+import medalImg from '@/assets/club/medal.png';
+import boltImg from '@/assets/club/bolt.png';
+import coinImg from '@/assets/club/coin.png';
+import giftImg from '@/assets/club/gift.png';
+import starImg from '@/assets/club/star.png';
+import trophyImg from '@/assets/club/trophy.png';
+import crownImg from '@/assets/club/crown.png';
+import chestImg from '@/assets/club/chest.png';
+import fireImg from '@/assets/club/fire.png';
 
 const emit = defineEmits<{ go: ['store' | 'history' | 'badges' | 'teams'] }>();
 
 const { me } = useClub();
 const rewards = ref<GamificationRewardDto[]>([]);
-const feed = ref<GamificationTxDto[]>([]);
 
 onMounted(async () => {
-  const [r, f] = await Promise.allSettled([
-    api.get<GamificationRewardDto[]>('/gamification/rewards'),
-    api.get<GamificationTxDto[]>('/gamification/feed'),
-  ]);
-  if (r.status === 'fulfilled') rewards.value = r.value.data.slice(0, 3);
-  if (f.status === 'fulfilled') feed.value = f.value.data.slice(0, 8);
+  try {
+    const { data } = await api.get<GamificationRewardDto[]>('/gamification/rewards');
+    rewards.value = data.slice(0, 3);
+  } catch {
+    rewards.value = [];
+  }
 });
 
 const level = computed(() => me.value?.level ?? null);
+const recent = computed(() => (me.value?.recent ?? []).slice(0, 5));
+
+const REWARD_IMAGES: Record<string, string> = {
+  gift: giftImg,
+  star: starImg,
+  trophy: trophyImg,
+  medal: medalImg,
+  crown: crownImg,
+  bag: chestImg,
+  fire: fireImg,
+};
+const REWARD_TINTS = ['#fef3c7', '#ffedd5', '#f3e8ff'];
+
+function rewardImage(r: GamificationRewardDto): string | null {
+  return REWARD_IMAGES[r.icon] ?? null;
+}
+
+const TX_TINTS: Record<string, string> = {
+  trophy: '#f97316',
+  dollar: '#f97316',
+  briefcase: '#f97316',
+  'user-plus': '#14b8a6',
+  building: '#14b8a6',
+  phone: '#14b8a6',
+  funnel: '#f59e0b',
+  trend: '#f59e0b',
+  chat: '#f59e0b',
+  document: '#8b5cf6',
+  calendar: '#8b5cf6',
+  check: '#8b5cf6',
+  refresh: '#8b5cf6',
+};
+
+function txTint(tx: GamificationTxDto): string {
+  if (tx.score < 0) return '#ef4444';
+  return TX_TINTS[txIcon(tx)] ?? '#6366f1';
+}
 
 /** پیام انگیزشی؛ همیشه مثبت و بدون مقایسهٔ تحقیرآمیز */
 const motivation = computed(() => {
@@ -33,94 +78,94 @@ const motivation = computed(() => {
   if (m.rank === 1 && m.periodScore > 0) {
     return { title: 'عالی!', text: 'تو صدرنشین این ماهی. جایگاهت را حفظ کن!' };
   }
+  if (m.gapToNext != null && m.gapToNext > 0 && m.rank) {
+    return {
+      title: 'عالی!',
+      text: `فقط ${faNum(m.gapToNext)} امتیاز تا رتبهٔ ${toFaDigits(m.rank - 1)} فاصله داری.`,
+    };
+  }
   if (m.periodScore > 0 && m.periodScore >= m.personalBest) {
     return { title: 'رکورد جدید!', text: `${faNum(m.periodScore)} امتیاز — بهترین ماه تو تا امروز.` };
   }
   if (m.streakDays >= 2) {
     return { title: 'عالی!', text: `${toFaDigits(m.streakDays)} روز پیاپی همهٔ کارهای روتین را کامل کردی.` };
   }
-  if (m.gapToNext != null && m.gapToNext > 0 && m.rank) {
-    return {
-      title: 'نزدیکی!',
-      text: `فقط ${faNum(m.gapToNext)} امتیاز تا رتبهٔ ${toFaDigits(m.rank - 1)} فاصله داری.`,
-    };
-  }
   if (m.todayScore > 0) {
     return { title: 'آفرین!', text: `امروز ${faNum(m.todayScore)} امتیاز گرفتی. ادامه بده!` };
   }
   return { title: 'شروع کن!', text: 'با ثبت تماس، پیگیری یا یک لید جدید اولین امتیاز امروز را بگیر.' };
 });
 
-function rewardProgress(r: GamificationRewardDto) {
-  const coins = me.value?.coins ?? 0;
-  return Math.min(100, Math.round((coins / Math.max(1, r.cost)) * 100));
-}
+const cheerProgress = computed(() => {
+  const m = me.value;
+  if (!m) return 0;
+  if (m.rank === 1 && m.periodScore > 0) return 100;
+  if (m.gapToNext != null && m.gapToNext > 0) {
+    return Math.round((m.periodScore / (m.periodScore + m.gapToNext)) * 100);
+  }
+  return m.periodScore > 0 ? 100 : 0;
+});
 </script>
 
 <template>
   <div class="home">
-    <aside class="col side">
+    <aside class="col">
       <section class="card level-card">
-        <header class="card-h">
-          <h3>سطح و پیشرفت شما</h3>
-          <button type="button" class="link" @click="emit('go', 'badges')">نشان‌ها</button>
-        </header>
+        <h3 class="card-t">سطح و پیشرفت شما</h3>
         <div v-if="level" class="level">
-          <div class="ring" :style="{ '--p': `${level.progress}` }">
-            <span>
-              <small>سطح</small>
-              <b>{{ toFaDigits(level.level) }}</b>
-            </span>
-          </div>
+          <img :src="medalImg" alt="" class="medal" />
           <div class="level-info">
-            <strong>{{ level.name }}</strong>
-            <span>{{ toFaDigits(level.progress) }}٪ تا سطح بعد</span>
-            <small v-if="level.toNext != null">
-              تا «{{ level.nextName }}»: {{ faNum(level.toNext) }} امتیاز
-            </small>
-            <small v-else>بالاترین سطح باشگاه!</small>
+            <b>سطح {{ toFaDigits(level.level) }}</b>
+            <span>{{ level.name }}</span>
           </div>
         </div>
-        <div class="mini-stats">
-          <div>
-            <b>{{ faNum(me?.personalBest ?? 0) }}</b>
-            <span>رکورد ماهانه</span>
-          </div>
-          <div>
-            <b>{{ toFaDigits(me?.streakDays ?? 0) }}</b>
-            <span>روز پیاپی</span>
-          </div>
-          <div>
-            <b>{{ toFaDigits(me?.badgesEarned ?? 0) }}</b>
-            <span>نشان</span>
-          </div>
+        <div v-if="level" class="lv-bar">
+          <span class="bar"><i :style="{ width: `${level.progress}%` }" /></span>
+          <em>{{ toFaDigits(level.progress) }}٪</em>
         </div>
+        <p v-if="level" class="lv-next">
+          <template v-if="level.toNext != null">تا سطح بعدی: <b>{{ faNum(level.toNext) }} امتیاز</b></template>
+          <template v-else>بالاترین سطح باشگاه!</template>
+        </p>
       </section>
 
       <section class="card">
         <header class="card-h">
-          <h3>پاداش‌های قابل دریافت</h3>
-          <button type="button" class="link" @click="emit('go', 'store')">همه</button>
+          <h3 class="card-t">پاداش‌های قابل دریافت</h3>
+          <button type="button" class="link" @click="emit('go', 'store')">
+            مشاهده همه <UiIcon name="chevron-left" :size="13" />
+          </button>
         </header>
         <ul class="rewards">
-          <li v-for="r in rewards" :key="r.id" :style="{ '--c': r.color }">
-            <span class="r-ic"><UiIcon :name="r.icon as never" :size="18" /></span>
-            <span class="r-body">
-              <b>{{ r.name }}</b>
-              <span class="r-bar"><i :style="{ width: `${rewardProgress(r)}%` }" /></span>
+          <li
+            v-for="(r, i) in rewards"
+            :key="r.id"
+            :style="{ '--tint': REWARD_TINTS[i % REWARD_TINTS.length], '--c': r.color }"
+            role="button"
+            tabindex="0"
+            @click="emit('go', 'store')"
+            @keydown.enter="emit('go', 'store')"
+          >
+            <span class="r-art">
+              <img v-if="rewardImage(r)" :src="rewardImage(r)!" alt="" />
+              <span v-else class="r-ic"><UiIcon :name="r.icon as never" :size="22" /></span>
             </span>
-            <em>{{ faNum(r.cost) }}<small>سکه</small></em>
+            <b>{{ r.name }}</b>
+            <small>{{ faNum(r.cost) }} سکه</small>
           </li>
           <li v-if="!rewards.length" class="empty">هنوز پاداشی تعریف نشده است.</li>
         </ul>
       </section>
 
       <section v-if="motivation" class="card cheer">
-        <UiIcon name="sparkle" :size="22" />
-        <div>
-          <strong>{{ motivation.title }}</strong>
-          <p>{{ motivation.text }}</p>
+        <div class="cheer-top">
+          <img :src="boltImg" alt="" />
+          <div>
+            <strong>{{ motivation.title }}</strong>
+            <p>{{ motivation.text }}</p>
+          </div>
         </div>
+        <span class="bar gold"><i :style="{ width: `${cheerProgress}%` }" /></span>
       </section>
     </aside>
 
@@ -128,51 +173,37 @@ function rewardProgress(r: GamificationRewardDto) {
       <ClubLeaderboard />
     </div>
 
-    <aside class="col side">
+    <aside class="col">
       <section class="card">
         <header class="card-h">
-          <h3>آخرین امتیازات شما</h3>
-          <button type="button" class="link" @click="emit('go', 'history')">تاریخچه</button>
+          <h3 class="card-t">آخرین امتیازات شما</h3>
+          <button type="button" class="link" @click="emit('go', 'history')">
+            مشاهده همه <UiIcon name="chevron-left" :size="13" />
+          </button>
         </header>
         <ul class="feed">
-          <li v-for="tx in me?.recent ?? []" :key="tx.id" :class="{ pending: tx.status === 'pending' }">
-            <span class="f-ic" :class="tx.kind"><UiIcon :name="txIcon(tx)" :size="15" /></span>
+          <li v-for="tx in recent" :key="tx.id" :class="{ pending: tx.status === 'pending' }">
+            <span class="f-ic" :style="{ '--c': txTint(tx) }"><UiIcon :name="txIcon(tx)" :size="17" /></span>
             <span class="f-body">
               <b>{{ tx.title }}</b>
-              <small>
+              <small v-if="tx.entityTitle || tx.status === 'pending'">
                 <RouterLink v-if="tx.link && tx.entityTitle" :to="tx.link">{{ tx.entityTitle }}</RouterLink>
                 <template v-else-if="tx.entityTitle">{{ tx.entityTitle }}</template>
-                <template v-if="tx.entityTitle"> · </template>{{ timeAgo(tx.createdAt) }}
-                <template v-if="tx.status === 'pending'"> · در انتظار تأیید</template>
+                <template v-if="tx.status === 'pending'">{{ tx.entityTitle ? ' · ' : '' }}در انتظار تأیید</template>
               </small>
             </span>
             <span class="f-pts">
-              <b v-if="tx.score" :class="{ neg: tx.score < 0 }">{{ signedFa(tx.score) }}</b>
-              <small v-if="tx.coins" class="coin" :class="{ neg: tx.coins < 0 }">{{ signedFa(tx.coins) }} سکه</small>
+              <span class="pts" :class="{ neg: tx.score < 0 }">
+                <img :src="coinImg" alt="" />{{ signedFa(tx.score || tx.coins) }}
+              </span>
+              <small>{{ timeAgo(tx.createdAt) }}</small>
             </span>
           </li>
-          <li v-if="!me?.recent.length" class="empty">
+          <li v-if="!recent.length" class="empty">
             هنوز امتیازی نگرفته‌ای. ثبت لید، تماس یا انجام کارهای روتین امتیاز دارد.
           </li>
         </ul>
       </section>
-
-      <section class="card">
-        <header class="card-h">
-          <h3>فعالیت همکاران</h3>
-        </header>
-        <ul class="feed compact">
-          <li v-for="tx in feed" :key="tx.id">
-            <span class="f-ic" :class="tx.kind"><UiIcon :name="txIcon(tx)" :size="14" /></span>
-            <span class="f-body">
-              <b>{{ tx.userName }}</b>
-              <small>{{ tx.title }} · {{ timeAgo(tx.createdAt) }}</small>
-            </span>
-            <span class="f-pts"><b>{{ signedFa(tx.score) }}</b></span>
-          </li>
-          <li v-if="!feed.length" class="empty">هنوز فعالیتی ثبت نشده است.</li>
-        </ul>
-      </section>
     </aside>
   </div>
 </template>
@@ -180,7 +211,7 @@ function rewardProgress(r: GamificationRewardDto) {
 <style scoped>
 .home {
   display: grid;
-  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 320px);
+  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px);
   gap: var(--sp-4);
   align-items: start;
 }
@@ -194,11 +225,9 @@ function rewardProgress(r: GamificationRewardDto) {
 .card {
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: calc(var(--radius) + 4px);
-  padding: var(--sp-4);
+  border-radius: 16px;
+  padding: 1rem 1.05rem;
   box-shadow: var(--shadow-xs);
-  display: grid;
-  gap: var(--sp-3);
   min-width: 0;
 }
 
@@ -206,214 +235,250 @@ function rewardProgress(r: GamificationRewardDto) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sp-2);
+  gap: 0.5rem;
+  margin-bottom: 0.85rem;
 }
 
-.card-h h3 {
+.card-t {
   margin: 0;
-  font-size: var(--fs-md);
-  font-weight: var(--fw-bold);
-  color: var(--ink);
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.level-card .card-t {
+  margin-bottom: 0.6rem;
 }
 
 .link {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   border: 0;
   background: none;
-  color: var(--accent-hover);
+  padding: 0;
   font: inherit;
-  font-size: var(--fs-xs);
-  font-weight: 700;
+  font-size: 0.76rem;
+  font-weight: 600;
+  color: #64748b;
   cursor: pointer;
+  white-space: nowrap;
 }
 
+.link:hover {
+  color: var(--accent);
+}
+
+/* سطح */
 .level {
   display: flex;
   align-items: center;
-  gap: var(--sp-3);
+  gap: 0.85rem;
 }
 
-.ring {
-  --p: 0;
-  width: 84px;
-  height: 84px;
-  border-radius: 50%;
+.medal {
+  width: 76px;
+  height: 76px;
+  object-fit: contain;
   flex: 0 0 auto;
-  display: grid;
-  place-items: center;
-  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--accent-soft) 0);
-}
-
-.ring span {
-  width: 66px;
-  height: 66px;
-  border-radius: 50%;
-  background: var(--surface);
-  display: grid;
-  place-items: center;
-  align-content: center;
-  line-height: 1.1;
-}
-
-.ring small {
-  font-size: 0.68rem;
-  color: var(--muted);
-}
-
-.ring b {
-  font-size: 1.4rem;
-  font-weight: 800;
-  color: var(--accent-deep);
+  filter: drop-shadow(0 6px 10px rgb(245 158 11 / 0.25));
 }
 
 .level-info {
   display: grid;
   gap: 2px;
-  min-width: 0;
 }
 
-.level-info strong {
-  font-size: 1.05rem;
-  color: var(--ink);
+.level-info b {
+  font-size: 1.35rem;
+  font-weight: 900;
+  color: #0f172a;
+  line-height: 1.2;
 }
 
 .level-info span {
-  font-size: var(--fs-sm);
-  color: var(--accent-deep);
-  font-weight: 700;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #475569;
 }
 
-.level-info small {
-  font-size: var(--fs-xs);
-  color: var(--muted);
+.bar {
+  display: block;
+  flex: 1;
+  height: 8px;
+  border-radius: 999px;
+  background: #ede9fe;
+  overflow: hidden;
 }
 
-.mini-stats {
+.bar i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #a78bfa, #7c3aed);
+  transition: width 0.5s ease;
+}
+
+.lv-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.9rem;
+}
+
+.lv-bar em {
+  font-style: normal;
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: #7c3aed;
+}
+
+.lv-next {
+  margin: 0.55rem 0 0;
+  font-size: 0.78rem;
+  color: #64748b;
+}
+
+.lv-next b {
+  color: #0f172a;
+}
+
+/* پاداش‌ها */
+.rewards {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--sp-2);
-  border-top: 1px solid var(--line-light);
-  padding-top: var(--sp-3);
-  text-align: center;
+  gap: 0.5rem;
 }
 
-.mini-stats div {
+.rewards li {
   display: grid;
+  justify-items: center;
+  gap: 2px;
+  text-align: center;
+  cursor: pointer;
+  min-width: 0;
 }
 
-.mini-stats b {
-  font-size: var(--fs-md);
-  color: var(--ink);
+.r-art {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  background: var(--tint);
+  display: grid;
+  place-items: center;
+  margin-bottom: 0.35rem;
+  transition: transform 0.15s ease;
 }
 
-.mini-stats span {
+.rewards li:hover .r-art {
+  transform: translateY(-2px);
+}
+
+.r-art img {
+  width: 72%;
+  height: 72%;
+  object-fit: contain;
+}
+
+.r-ic {
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: var(--c, var(--accent));
+}
+
+.rewards b {
+  font-size: 0.76rem;
+  font-weight: 700;
+  color: #0f172a;
+  max-width: 100%;
+  line-height: 1.5;
+}
+
+.rewards small {
   font-size: 0.7rem;
-  color: var(--muted);
+  color: #64748b;
 }
 
-.rewards,
+.rewards .empty {
+  grid-column: 1 / -1;
+  cursor: default;
+}
+
+/* انگیزشی */
+.cheer {
+  background: #eef2ff;
+  border-color: #e0e7ff;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.cheer-top {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.cheer-top img {
+  width: 52px;
+  height: 52px;
+  object-fit: contain;
+  flex: 0 0 auto;
+}
+
+.cheer strong {
+  display: block;
+  font-size: 1rem;
+  font-weight: 900;
+  color: #1e1b4b;
+}
+
+.cheer p {
+  margin: 2px 0 0;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: #475569;
+}
+
+.bar.gold {
+  flex: none;
+  background: #fff;
+}
+
+.bar.gold i {
+  background: linear-gradient(90deg, #fcd34d, #f59e0b);
+}
+
+/* آخرین امتیازات */
 .feed {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
-  gap: var(--sp-2);
-}
-
-.rewards li {
-  --c: var(--accent);
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  padding: var(--sp-2);
-  border-radius: 10px;
-  border: 1px solid var(--line-light);
-  background: color-mix(in srgb, var(--c) 6%, var(--surface));
-}
-
-.r-ic {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  display: grid;
-  place-items: center;
-  flex: 0 0 auto;
-  color: var(--c);
-  background: color-mix(in srgb, var(--c) 16%, transparent);
-}
-
-.r-body {
-  flex: 1;
-  min-width: 0;
-  display: grid;
-  gap: 5px;
-}
-
-.r-body b {
-  font-size: var(--fs-sm);
-  color: var(--ink);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.r-bar {
-  height: 5px;
-  border-radius: 999px;
-  background: var(--line-light);
-  overflow: hidden;
-}
-
-.r-bar i {
-  display: block;
-  height: 100%;
-  background: var(--c);
-  border-radius: inherit;
-}
-
-.rewards em {
-  font-style: normal;
-  font-weight: 800;
-  font-size: var(--fs-sm);
-  color: #b45309;
-  display: grid;
-  text-align: center;
-  line-height: 1.1;
-}
-
-.rewards em small {
-  font-size: 0.65rem;
-  font-weight: 600;
-  color: var(--muted);
-}
-
-.cheer {
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  background: linear-gradient(145deg, #ecfdf5, #ccfbf1);
-  border-color: #99f6e4;
-  color: var(--accent-deep);
-}
-
-.cheer strong {
-  font-size: var(--fs-md);
-}
-
-.cheer p {
-  margin: 2px 0 0;
-  font-size: var(--fs-sm);
-  color: #115e59;
 }
 
 .feed li {
   display: flex;
   align-items: center;
-  gap: var(--sp-2);
-  padding: var(--sp-2) 0;
-  border-bottom: 1px dashed var(--line-light);
+  gap: 0.7rem;
+  padding: 0.7rem 0;
+  border-bottom: 1px solid #f1f5f9;
+  min-width: 0;
+}
+
+.feed li:first-child {
+  padding-top: 0;
 }
 
 .feed li:last-child {
   border-bottom: 0;
+  padding-bottom: 0;
 }
 
 .feed li.pending {
@@ -421,42 +486,27 @@ function rewardProgress(r: GamificationRewardDto) {
 }
 
 .f-ic {
-  width: 30px;
-  height: 30px;
-  border-radius: 9px;
+  width: 2.4rem;
+  height: 2.4rem;
+  border-radius: 12px;
+  flex: 0 0 auto;
   display: grid;
   place-items: center;
-  flex: 0 0 auto;
-  background: var(--accent-subtle);
-  color: var(--accent-deep);
-}
-
-.f-ic.bonus,
-.f-ic.achievement {
-  background: #fef3c7;
-  color: #b45309;
-}
-
-.f-ic.redeem,
-.f-ic.refund {
-  background: #ede9fe;
-  color: #6d28d9;
-}
-
-.f-ic.adjust {
-  background: var(--surface-subtle);
-  color: var(--ink-secondary);
+  color: var(--c);
+  background: color-mix(in srgb, var(--c) 14%, #fff);
 }
 
 .f-body {
   flex: 1;
   min-width: 0;
   display: grid;
+  gap: 2px;
 }
 
 .f-body b {
-  font-size: var(--fs-sm);
-  color: var(--ink);
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: #0f172a;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -464,59 +514,69 @@ function rewardProgress(r: GamificationRewardDto) {
 
 .f-body small {
   font-size: 0.72rem;
-  color: var(--muted);
+  color: #64748b;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.f-body a {
-  color: var(--accent-hover);
+.f-body small a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.f-body small a:hover {
+  color: var(--accent);
 }
 
 .f-pts {
   display: grid;
-  text-align: end;
+  justify-items: end;
+  gap: 2px;
   flex: 0 0 auto;
 }
 
-.f-pts b {
+.pts {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  direction: ltr;
+  font-size: 0.86rem;
   font-weight: 800;
-  color: var(--success-deep);
-  font-size: var(--fs-sm);
+  color: #16a34a;
 }
 
-.f-pts .coin {
+.pts.neg {
+  color: #ef4444;
+}
+
+.pts img {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.f-pts small {
   font-size: 0.68rem;
-  color: #b45309;
-  font-weight: 700;
-}
-
-.f-pts .neg {
-  color: var(--danger);
-}
-
-.feed.compact li {
-  padding: 6px 0;
+  color: #94a3b8;
+  white-space: nowrap;
 }
 
 .empty {
   color: var(--muted);
   font-size: var(--fs-sm);
-  justify-content: center;
   text-align: center;
+  padding: 0.6rem 0;
   border: 0 !important;
-  background: none !important;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 1100px) {
   .home {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
   }
 
-  .center {
+  .home > .col:last-child {
     grid-column: 1 / -1;
-    order: -1;
   }
 }
 
@@ -524,5 +584,9 @@ function rewardProgress(r: GamificationRewardDto) {
   .home {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .center {
+    order: -1;
+  }
 }
 </style>

apps/web/src/components/gamification/ClubLeaderboard.vue

@@ -1,14 +1,17 @@
 <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';
+import crownImg from '@/assets/club/crown.png';
 
-const PERIODS: GamificationPeriod[] = ['today', 'week', 'month', 'quarter', 'year', 'all'];
+const PERIODS: Array<{ value: GamificationPeriod; label: string }> = [
+  { value: 'today', label: 'امروز' },
+  { value: 'month', label: 'این ماه' },
+  { value: 'all', label: 'همه زمان‌ها' },
+];
 
 const period = ref<GamificationPeriod>('month');
 const board = ref<GamificationLeaderboardDto | null>(null);
@@ -38,90 +41,82 @@ onMounted(() => {
 onBeforeUnmount(() => window.removeEventListener('gamification:updated', load));
 
 const top3 = computed(() => (board.value?.items ?? []).slice(0, 3).filter((x) => x.score > 0));
+/** ترتیب نمایش از راست: سوم، اول، دوم */
+const podium = computed(() => {
+  const [a, b, c] = top3.value;
+  return [c, a, b].filter((x): x is GamificationLeaderEntryDto => !!x);
+});
 const rest = computed(() => {
   const items = board.value?.items ?? [];
   return top3.value.length ? items.slice(top3.value.length) : items;
 });
+function chgClass(change: number | null) {
+  return change && change > 0 ? 'up' : change && change < 0 ? 'down' : '';
+}
+
 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>
+    <div class="periods" role="tablist" aria-label="بازهٔ جدول امتیازات">
+      <button
+        v-for="p in PERIODS"
+        :key="p.value"
+        type="button"
+        role="tab"
+        :aria-selected="period === p.value"
+        :class="{ on: period === p.value }"
+        @click="period = p.value"
+      >
+        {{ p.label }}
+      </button>
+    </div>
 
     <p v-if="error" class="err">{{ error }}</p>
 
-    <div v-if="top3.length" class="top3" :class="{ loading }">
+    <div v-if="podium.length" class="top3" :class="{ loading }">
       <div
-        v-for="(e, i) in top3"
+        v-for="e in podium"
         :key="e.userId"
         class="t-card"
-        :class="{ me: e.isMe }"
-        :style="{ '--m': MEDALS[i] }"
+        :class="[`r${e.rank}`, { me: e.isMe }]"
       >
-        <span class="t-rank">{{ toFaDigits(e.rank) }}</span>
-        <UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="46" />
+        <img v-if="e.rank === 1" :src="crownImg" alt="" class="t-crown" />
+        <span class="t-ava">
+          <UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="e.rank === 1 ? 50 : 46" />
+        </span>
         <strong>{{ e.isMe ? 'شما' : e.fullName }}</strong>
-        <small>{{ e.levelName }}</small>
-        <b>{{ faNum(e.score) }} <span>امتیاز</span></b>
+        <small>{{ faNum(e.score) }} امتیاز</small>
       </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 class="chg" :class="chgClass(e.change)">
+          <template v-if="e.change">{{ e.change > 0 ? '▲' : '▼' }} {{ toFaDigits(Math.abs(e.change)) }}</template>
         </span>
         <span class="score">{{ faNum(e.score) }}</span>
+        <b class="who">{{ e.isMe ? 'شما' : e.fullName }}</b>
+        <UserAvatar :user-id="e.userId" :has-avatar="e.hasAvatar" :name="e.fullName" :size="28" />
+        <span class="rank">{{ toFaDigits(e.rank) }}</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 class="chg" :class="chgClass(meOutside.change)">
+            <template v-if="meOutside.change">
+              {{ meOutside.change > 0 ? '▲' : '▼' }} {{ toFaDigits(Math.abs(meOutside.change)) }}
+            </template>
           </span>
           <span class="score">{{ faNum(meOutside.score) }}</span>
+          <b class="who">شما</b>
+          <UserAvatar :user-id="meOutside.userId" :has-avatar="meOutside.hasAvatar" :name="meOutside.fullName" :size="28" />
+          <span class="rank">{{ toFaDigits(meOutside.rank) }}</span>
         </li>
       </template>
       <li v-if="board && !board.items.length" class="empty">هنوز کسی در این بازه امتیاز نگرفته است.</li>
@@ -133,73 +128,40 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
 .board {
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: calc(var(--radius) + 4px);
-  padding: var(--sp-4);
+  border-radius: 16px;
+  padding: 0.75rem 0.9rem 0.5rem;
   box-shadow: var(--shadow-xs);
   display: grid;
-  gap: var(--sp-3);
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.9rem;
   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;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   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;
+  border-radius: 12px;
+  background: #f8fafc;
 }
 
 .periods button {
   border: 0;
   background: none;
-  border-radius: 999px;
-  padding: 0.3rem 0.7rem;
+  border-radius: 10px;
+  padding: 0.5rem 0.6rem;
   font: inherit;
-  font-size: var(--fs-xs);
+  font-size: 0.82rem;
   font-weight: 700;
-  color: var(--muted);
+  color: #64748b;
   cursor: pointer;
   white-space: nowrap;
-  flex: 0 0 auto;
 }
 
 .periods button.on {
-  background: var(--surface);
-  color: var(--accent-deep);
-  box-shadow: var(--shadow-xs);
+  background: #e0e7ff;
+  color: #1e1b4b;
 }
 
 .err {
@@ -211,45 +173,69 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
 .top3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--sp-2);
+  gap: 0.6rem;
+  align-items: end;
+  padding-top: 0.8rem;
 }
 
 .t-card {
-  --m: #f59e0b;
+  --bg: #e0e7ff;
+  --ring: #a5b4fc;
   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));
+  gap: 4px;
+  padding: 0 0.4rem 0.7rem;
+  border-radius: 14px;
+  background: var(--bg);
   text-align: center;
   min-width: 0;
+  margin-top: 1.6rem;
+}
+
+.t-card.r1 {
+  --bg: #fef3c7;
+  --ring: #f59e0b;
+  padding-bottom: 1rem;
+  margin-top: 0;
+}
+
+.t-card.r3 {
+  --bg: #ffedd5;
+  --ring: #fb923c;
 }
 
 .t-card.me {
   box-shadow: 0 0 0 2px var(--accent);
 }
 
-.t-rank {
+.t-crown {
   position: absolute;
-  top: 8px;
-  inset-inline-start: 8px;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
+  top: -1.55rem;
+  width: 30px;
+  height: 30px;
+  object-fit: contain;
+  z-index: 1;
+}
+
+.t-ava {
+  margin-top: -1.4rem;
+  padding: 3px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 0 0 3px var(--ring);
   display: grid;
-  place-items: center;
-  background: var(--m);
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: 800;
+}
+
+.t-card.r1 .t-ava {
+  margin-top: -0.4rem;
 }
 
 .t-card strong {
-  font-size: var(--fs-sm);
-  color: var(--ink);
+  margin-top: 0.3rem;
+  font-size: 0.92rem;
+  font-weight: 800;
+  color: #0f172a;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -257,20 +243,13 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
 }
 
 .t-card small {
-  font-size: 0.7rem;
-  color: var(--muted);
+  font-size: 0.76rem;
+  color: #475569;
 }
 
-.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);
+.t-card.r1 small {
+  color: #b45309;
+  font-weight: 700;
 }
 
 .rows {
@@ -278,81 +257,78 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
   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;
+  gap: 0.6rem;
+  padding: 0.6rem 0.7rem;
+  border-bottom: 1px solid #f1f5f9;
 }
 
-.rows li:hover {
-  background: var(--surface-hover);
+.rows li:last-child {
+  border-bottom: 0;
 }
 
 .rows li.me {
-  background: var(--accent-subtle);
-  box-shadow: inset 0 0 0 1px var(--accent-soft);
+  background: #fef9e7;
+  border-radius: 10px;
+  border-bottom-color: transparent;
+}
+
+.rows li.me .score,
+.rows li.me .who {
+  font-weight: 800;
 }
 
 .rows li.sep {
   justify-content: center;
   color: var(--muted-light);
   padding: 0;
+  border: 0;
 }
 
-.rank {
-  width: 26px;
-  text-align: center;
+.chg {
+  min-width: 1.8rem;
+  font-size: 0.74rem;
   font-weight: 800;
-  color: var(--muted);
-  font-size: var(--fs-sm);
+  flex: 0 0 auto;
+}
+
+.chg.up {
+  color: #16a34a;
+}
+
+.chg.down {
+  color: #ef4444;
+}
+
+.score {
+  min-width: 2.8rem;
+  font-size: 0.84rem;
+  font-weight: 600;
+  color: #0f172a;
   flex: 0 0 auto;
 }
 
 .who {
   flex: 1;
   min-width: 0;
-  display: grid;
-}
-
-.who b {
-  font-size: var(--fs-sm);
-  color: var(--ink);
+  text-align: end;
+  font-size: 0.84rem;
+  font-weight: 600;
+  color: #0f172a;
   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;
+.rank {
+  width: 1.6rem;
+  text-align: center;
+  font-size: 0.82rem;
+  color: #64748b;
   flex: 0 0 auto;
 }
 
@@ -364,6 +340,7 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
   justify-content: center;
   color: var(--muted);
   font-size: var(--fs-sm);
+  border: 0 !important;
 }
 
 @media (max-width: 520px) {
@@ -371,8 +348,8 @@ const MEDALS = ['#f59e0b', '#94a3b8', '#c2410c'];
     gap: 6px;
   }
 
-  .t-card {
-    padding: var(--sp-2) 4px;
+  .t-card strong {
+    font-size: 0.8rem;
   }
 }
 </style>

apps/web/src/views/PipelineBoardView.vue

@@ -406,6 +406,39 @@ async function confirmDeleteStage() {
   }
 }
 
+const deleteDealId = ref<string | null>(null);
+const dealDeleting = ref(false);
+
+const deleteDealTitle = computed(() => {
+  const id = deleteDealId.value;
+  for (const s of stages.value) {
+    const d = s.deals.find((x) => x.id === id);
+    if (d) return d.title;
+  }
+  return '';
+});
+
+function askDeleteDeal(dealId: string) {
+  menuOpenId.value = null;
+  deleteDealId.value = dealId;
+}
+
+async function confirmDeleteDeal() {
+  const id = deleteDealId.value;
+  if (!id || dealDeleting.value) return;
+  dealDeleting.value = true;
+  error.value = '';
+  try {
+    await api.delete(`/deals/${id}`);
+    deleteDealId.value = null;
+    await load();
+  } catch (e) {
+    error.value = apiMessage(e, 'حذف معامله ناموفق بود.');
+  } finally {
+    dealDeleting.value = false;
+  }
+}
+
 async function onDealSaved() {
   dealModal.value = null;
   await load();
@@ -597,6 +630,9 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
       >
         ویرایش
       </button>
+      <button type="button" role="menuitem" class="danger" @click="askDeleteDeal(menuOpenId)">
+        حذف
+      </button>
       <button type="button" role="menuitem" @click="menuOpenId = null">بستن</button>
     </div>
 
@@ -654,6 +690,24 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
       </template>
     </UiModal>
 
+    <UiModal
+      :open="Boolean(deleteDealId)"
+      title="حذف معامله"
+      @close="deleteDealId = null"
+    >
+      <p class="delete-copy">
+        معاملهٔ «{{ deleteDealTitle }}» حذف شود؟ این کار قابل بازگشت نیست.
+      </p>
+      <template #footer>
+        <UiButton type="button" :disabled="dealDeleting" @click="confirmDeleteDeal">
+          {{ dealDeleting ? 'در حال حذف…' : 'حذف' }}
+        </UiButton>
+        <UiButton variant="ghost" type="button" @click="deleteDealId = null">
+          انصراف
+        </UiButton>
+      </template>
+    </UiModal>
+
     <UiModal
       :open="Boolean(dealModal)"
       :title="dealModal?.dealId ? 'ویرایش معامله' : 'ایجاد معامله جدید'"
@@ -737,4 +791,8 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
   color: var(--ink);
   text-align: right;
 }
+
+.menu-pop button.danger {
+  color: var(--danger);
+}
 </style>