From da6c494fcb757be1dc6d06351b297b397e173b31 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Tue, 1 Sep 2026 15:39:18 +0330
Subject: [PATCH] Match dashboard header and shell layout to the Mento mockup.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/UiIcon.vue | 133 ++++++
 apps/web/src/layouts/AppLayout.vue | 550 +++++++++++++------------
 apps/web/src/lib/jalali.ts         |   6 +
 apps/web/src/views/HomeView.vue    | 630 +++++++++++++++++++----------
 4 files changed, 867 insertions(+), 452 deletions(-)
 create mode 100644 apps/web/src/components/UiIcon.vue

diff --git a/apps/web/src/components/UiIcon.vue b/apps/web/src/components/UiIcon.vue
new file mode 100644
index 0000000..71d29c5
--- /dev/null
+++ b/apps/web/src/components/UiIcon.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+defineProps<{
+  name:
+    | 'home'
+    | 'users'
+    | 'briefcase'
+    | 'check'
+    | 'box'
+    | 'chart'
+    | 'settings'
+    | 'search'
+    | 'sparkle'
+    | 'bell'
+    | 'calendar'
+    | 'mail'
+    | 'megaphone'
+    | 'send'
+    | 'fire'
+    | 'warning'
+    | 'trend'
+    | 'phone'
+    | 'trophy';
+  size?: number;
+}>();
+</script>
+
+<template>
+  <svg
+    class="ico"
+    :width="size ?? 20"
+    :height="size ?? 20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.8"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <template v-if="name === 'home'">
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9.5V21h14V9.5" />
+      <path d="M10 21v-6h4v6" />
+    </template>
+    <template v-else-if="name === 'users'">
+      <circle cx="9" cy="8" r="3.2" />
+      <path d="M2.5 19c.8-3 2.9-4.5 6.5-4.5s5.7 1.5 6.5 4.5" />
+      <circle cx="17" cy="9" r="2.4" />
+      <path d="M15.2 14.2c2.3.3 3.9 1.5 4.8 3.8" />
+    </template>
+    <template v-else-if="name === 'briefcase'">
+      <rect x="3" y="7" width="18" height="13" rx="2" />
+      <path d="M8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7" />
+      <path d="M3 12h18" />
+    </template>
+    <template v-else-if="name === 'check'">
+      <circle cx="12" cy="12" r="9" />
+      <path d="m8.5 12.5 2.4 2.4 4.6-5" />
+    </template>
+    <template v-else-if="name === 'box'">
+      <path d="M12 3 3.5 7.5v9L12 21l8.5-4.5v-9L12 3Z" />
+      <path d="M12 12 3.5 7.5M12 12l8.5-4.5M12 12v9" />
+    </template>
+    <template v-else-if="name === 'chart'">
+      <path d="M4 19h16" />
+      <path d="M7 16V10" />
+      <path d="M12 16V6" />
+      <path d="M17 16v-4" />
+    </template>
+    <template v-else-if="name === 'settings'">
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.3.6.9 1 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" />
+    </template>
+    <template v-else-if="name === 'search'">
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.5-3.5" />
+    </template>
+    <template v-else-if="name === 'sparkle'">
+      <path d="M12 3v4M12 17v4M3 12h4M17 12h4" />
+      <path d="m6.5 6.5 2.5 2.5M15 15l2.5 2.5M17.5 6.5 15 9M9 15l-2.5 2.5" />
+      <circle cx="12" cy="12" r="2.2" />
+    </template>
+    <template v-else-if="name === 'bell'">
+      <path d="M6 9a6 6 0 1 1 12 0c0 4 1.5 5.5 1.5 5.5H4.5S6 13 6 9Z" />
+      <path d="M10 19a2 2 0 0 0 4 0" />
+    </template>
+    <template v-else-if="name === 'calendar'">
+      <rect x="3.5" y="5" width="17" height="15" rx="2" />
+      <path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
+    </template>
+    <template v-else-if="name === 'mail'">
+      <rect x="3" y="5" width="18" height="14" rx="2" />
+      <path d="m4 7 8 6 8-6" />
+    </template>
+    <template v-else-if="name === 'megaphone'">
+      <path d="M3 11v2a2 2 0 0 0 2 2h1l4 4V5L6 9H5a2 2 0 0 0-2 2Z" />
+      <path d="M14 8.5c2 .8 3.5 2.3 3.5 3.5s-1.5 2.7-3.5 3.5" />
+      <path d="M10 15v3a2 2 0 0 1-2 2" />
+    </template>
+    <template v-else-if="name === 'send'">
+      <path d="m4 12 16-8-6 16-2.5-6.5L4 12Z" />
+    </template>
+    <template v-else-if="name === 'fire'">
+      <path d="M12 3c2 3-1 4 1 7 1.5 2.2 4 2.5 4 6a5 5 0 1 1-10 0c0-3.5 2-5 3-7 1-2-1-4 2-6Z" />
+    </template>
+    <template v-else-if="name === 'warning'">
+      <path d="m12 4 9 16H3L12 4Z" />
+      <path d="M12 10v4" />
+      <path d="M12 17h.01" />
+    </template>
+    <template v-else-if="name === 'trend'">
+      <path d="M4 17 10 11l4 4 6-8" />
+      <path d="M15 7h5v5" />
+    </template>
+    <template v-else-if="name === 'phone'">
+      <path d="M8 3.5h2.5l1 4-2 1.2a12 12 0 0 0 5.8 5.8L16.5 12.5l4 1V16a2 2 0 0 1-2.2 2A16 16 0 0 1 4 6.2 2 2 0 0 1 6 4Z" />
+    </template>
+    <template v-else-if="name === 'trophy'">
+      <path d="M8 21h8" />
+      <path d="M12 17v4" />
+      <path d="M7 4h10v4a5 5 0 0 1-10 0V4Z" />
+      <path d="M7 6H4.5A2.5 2.5 0 0 0 7 8.5" />
+      <path d="M17 6h2.5A2.5 2.5 0 0 1 17 8.5" />
+    </template>
+  </svg>
+</template>
+
+<style scoped>
+.ico {
+  display: block;
+  flex-shrink: 0;
+}
+</style>
diff --git a/apps/web/src/layouts/AppLayout.vue b/apps/web/src/layouts/AppLayout.vue
index abbeb81..a57a400 100644
--- a/apps/web/src/layouts/AppLayout.vue
+++ b/apps/web/src/layouts/AppLayout.vue
@@ -3,7 +3,8 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '@/stores/auth';
 import { api } from '@/lib/api';
-import { formatJalaliLong } from '@/lib/jalali';
+import { formatJalaliShort, toFaDigits } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
 import type {
   ActivitySummaryDto,
   NotificationDto,
@@ -30,7 +31,7 @@ const userInitials = computed(() => {
     .map((p) => p[0])
     .join('');
 });
-const todayLabel = computed(() => formatJalaliLong(new Date()));
+const todayLabel = computed(() => formatJalaliShort(new Date()));
 
 const salesOpen = ref(false);
 const moreOpen = ref(false);
@@ -38,7 +39,7 @@ const settingsOpen = ref(false);
 const globalSearch = ref('');
 const activityBadge = ref(0);
 
-const salesPaths = ['/quotes', '/invoices', '/sales/forecast', '/reports'];
+const salesPaths = ['/quotes', '/invoices', '/sales/forecast', '/reports', '/notes', '/tickets'];
 const morePaths = ['/activities/calendar', '/projects', '/project-cards', '/loyalty'];
 const settingsPaths = [
   '/settings/team',
@@ -59,6 +60,7 @@ function pathIn(prefixes: string[]) {
 const salesActive = computed(() => pathIn(salesPaths));
 const moreActive = computed(() => pathIn(morePaths));
 const settingsActive = computed(() => pathIn(settingsPaths));
+const productsActive = computed(() => route.path.startsWith('/settings/products'));
 
 watch(
   () => route.path,
@@ -135,9 +137,7 @@ async function markRead(item: NotificationDto) {
   }
   closeNotif();
   closeMenu();
-  if (item.link) {
-    await router.push(item.link);
-  }
+  if (item.link) await router.push(item.link);
 }
 
 async function markAll() {
@@ -180,11 +180,9 @@ function submitSearch() {
 watch(menuOpen, (open) => {
   document.body.style.overflow = open || notifOpen.value ? 'hidden' : '';
 });
-
 watch(notifOpen, (open) => {
   document.body.style.overflow = open || menuOpen.value ? 'hidden' : '';
 });
-
 watch(
   () => route.fullPath,
   () => {
@@ -196,9 +194,7 @@ watch(
 onMounted(() => {
   void refreshNotifs();
   void loadActivityBadge();
-  pollTimer = setInterval(() => {
-    void refreshNotifs();
-  }, 45000);
+  pollTimer = setInterval(() => void refreshNotifs(), 45000);
 });
 
 onUnmounted(() => {
@@ -209,33 +205,23 @@ onUnmounted(() => {
 
 <template>
   <div class="shell" :class="{ 'menu-open': menuOpen }">
-    <div
-      v-if="menuOpen"
-      class="backdrop"
-      aria-hidden="true"
-      @click="closeMenu"
-    />
+    <div v-if="menuOpen" class="backdrop" aria-hidden="true" @click="closeMenu" />
 
     <aside id="app-sidebar" class="sidebar" :class="{ open: menuOpen }">
-      <div class="brand-row desktop-only">
+      <div class="brand-row">
         <div class="brand">
           <span class="mark">M</span>
           <div>
-            <strong>منتو</strong>
+            <strong>Mento</strong>
             <small>by Mentech</small>
           </div>
         </div>
-      </div>
-
-      <div class="drawer-head mobile-only">
-        <div class="brand">
-          <span class="mark">M</span>
-          <div>
-            <strong>منتو</strong>
-            <small>by Mentech</small>
-          </div>
-        </div>
-        <button class="icon-btn ghost" type="button" aria-label="بستن منو" @click="closeMenu">
+        <button
+          class="icon-btn ghost mobile-only"
+          type="button"
+          aria-label="بستن منو"
+          @click="closeMenu"
+        >
           ✕
         </button>
       </div>
@@ -243,15 +229,15 @@ onUnmounted(() => {
       <nav class="side-nav">
         <div class="nav-primary">
           <RouterLink to="/" class="nav-item" @click="closeMenu">
-            <span class="nav-icon" aria-hidden="true">⌂</span>
+            <UiIcon name="home" :size="18" />
             <span>داشبورد</span>
           </RouterLink>
           <RouterLink to="/contacts" class="nav-item" @click="closeMenu">
-            <span class="nav-icon" aria-hidden="true">👥</span>
+            <UiIcon name="users" :size="18" />
             <span>مشتریان</span>
           </RouterLink>
           <RouterLink to="/pipeline" class="nav-item" @click="closeMenu">
-            <span class="nav-icon" aria-hidden="true">💼</span>
+            <UiIcon name="briefcase" :size="18" />
             <span>معاملات</span>
           </RouterLink>
           <RouterLink
@@ -268,18 +254,33 @@ onUnmounted(() => {
             }"
             @click="closeMenu"
           >
-            <span class="nav-icon" aria-hidden="true">☑</span>
+            <UiIcon name="check" :size="18" />
             <span>فعالیت‌ها</span>
-            <span v-if="activityBadge" class="nav-badge">{{ activityBadge }}</span>
+            <span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
           </RouterLink>
-          <RouterLink to="/settings/products" class="nav-item" @click="closeMenu">
-            <span class="nav-icon" aria-hidden="true">📦</span>
+          <RouterLink
+            to="/settings/products"
+            class="nav-item"
+            :class="{ 'router-link-active': productsActive }"
+            @click="closeMenu"
+          >
+            <UiIcon name="box" :size="18" />
             <span>محصولات</span>
           </RouterLink>
           <RouterLink to="/reports" class="nav-item" @click="closeMenu">
-            <span class="nav-icon" aria-hidden="true">📊</span>
+            <UiIcon name="chart" :size="18" />
             <span>گزارش‌ها</span>
           </RouterLink>
+          <RouterLink
+            v-if="canSettings"
+            to="/settings/team"
+            class="nav-item"
+            :class="{ 'router-link-active': settingsActive && !productsActive }"
+            @click="closeMenu"
+          >
+            <UiIcon name="settings" :size="18" />
+            <span>تنظیمات</span>
+          </RouterLink>
         </div>
 
         <div class="nav-group" :class="{ open: salesOpen, active: salesActive }">
@@ -329,7 +330,7 @@ onUnmounted(() => {
             :aria-expanded="settingsOpen"
             @click="toggleGroup('settings', $event)"
           >
-            <span>تنظیمات</span>
+            <span>جزئیات تنظیمات</span>
             <span class="chev" aria-hidden="true" />
           </button>
           <div v-show="settingsOpen" class="nav-sub">
@@ -348,11 +349,6 @@ onUnmounted(() => {
       </p>
 
       <div class="sidebar-foot">
-        <div class="promo-card">
-          <span class="promo-icon" aria-hidden="true">🚀</span>
-          <p>با منتو فروشات رو چند برابر کن</p>
-        </div>
-
         <div class="profile-card">
           <span class="avatar">{{ userInitials }}</span>
           <div class="profile-meta">
@@ -362,14 +358,19 @@ onUnmounted(() => {
           <span class="online-dot" title="آنلاین" />
         </div>
 
-        <button class="btn btn-ghost logout" type="button" @click="onLogout">خروج</button>
+        <div class="promo-card">
+          <span class="promo-icon"><UiIcon name="megaphone" :size="18" /></span>
+          <p>با منتو فروشات رو چند برابر کن</p>
+        </div>
+
+        <button class="logout-link" type="button" @click="onLogout">خروج از حساب</button>
       </div>
     </aside>
 
     <div class="workspace">
-      <header class="topbar mobile-only">
+      <header class="mobile-topbar mobile-only">
         <button
-          class="icon-btn"
+          class="round-btn"
           type="button"
           :aria-expanded="menuOpen"
           aria-controls="app-sidebar"
@@ -379,34 +380,44 @@ onUnmounted(() => {
           <span class="burger" :class="{ open: menuOpen }" />
         </button>
         <div class="top-brand">
-          <span class="mark">M</span>
-          <strong>منتو</strong>
+          <span class="mark sm">M</span>
+          <strong>Mento</strong>
         </div>
-        <button class="icon-btn notif-top" type="button" aria-label="اعلان‌ها" @click="toggleNotif">
-          🔔
-          <span v-if="hasUnread" class="badge">{{ unreadCount }}</span>
+        <button class="round-btn" type="button" aria-label="اعلان‌ها" @click="toggleNotif">
+          <UiIcon name="bell" :size="18" />
+          <span v-if="hasUnread" class="badge">{{ toFaDigits(unreadCount) }}</span>
         </button>
       </header>
 
       <header class="desktop-topbar desktop-only">
         <form class="global-search" @submit.prevent="submitSearch">
-          <span class="search-icon" aria-hidden="true">🔍</span>
+          <UiIcon name="search" :size="18" class="search-leading" />
           <input
             v-model="globalSearch"
             type="search"
-            placeholder="جستجو در مشتریان، معاملات و…"
+            placeholder="جستجو در مشتریان، معاملات و..."
           />
+          <kbd>⌘K</kbd>
         </form>
 
         <div class="topbar-actions">
-          <RouterLink class="top-icon" :to="{ name: 'notes' }" title="هوش مصنوعی">✨</RouterLink>
-          <button class="top-icon" type="button" aria-label="اعلان‌ها" @click="toggleNotif">
-            🔔
-            <span v-if="hasUnread" class="badge">{{ unreadCount }}</span>
+          <RouterLink class="round-btn accent" :to="{ name: 'notes' }" title="هوش مصنوعی">
+            <UiIcon name="sparkle" :size="18" />
+          </RouterLink>
+          <button class="round-btn" type="button" aria-label="اعلان‌ها" @click="toggleNotif">
+            <UiIcon name="bell" :size="18" />
+            <span v-if="hasUnread" class="badge">{{ toFaDigits(unreadCount) }}</span>
           </button>
-          <RouterLink class="top-icon" :to="{ name: 'activities-calendar' }" title="تقویم">📅</RouterLink>
-          <RouterLink class="top-icon" :to="{ name: 'tickets' }" title="پیام‌ها">✉</RouterLink>
-          <span class="date-chip">{{ todayLabel }}</span>
+          <RouterLink class="round-btn" :to="{ name: 'activities-calendar' }" title="تقویم">
+            <UiIcon name="calendar" :size="18" />
+          </RouterLink>
+          <RouterLink class="round-btn" :to="{ name: 'tickets' }" title="پیام‌ها">
+            <UiIcon name="mail" :size="18" />
+          </RouterLink>
+          <div class="date-chip">
+            <UiIcon name="calendar" :size="16" />
+            <span>{{ todayLabel }}</span>
+          </div>
         </div>
       </header>
 
@@ -419,7 +430,7 @@ onUnmounted(() => {
               <button v-if="hasUnread" class="linkish" type="button" @click="markAll">
                 همه خوانده شد
               </button>
-              <button class="icon-btn ghost" type="button" aria-label="بستن" @click="closeNotif">
+              <button class="round-btn sm" type="button" aria-label="بستن" @click="closeNotif">
                 ✕
               </button>
             </div>
@@ -448,10 +459,10 @@ onUnmounted(() => {
 <style scoped>
 .shell {
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr);
+  grid-template-columns: 248px minmax(0, 1fr);
   min-height: 100vh;
   min-height: 100dvh;
-  background: var(--bg);
+  background: #f5f7fa;
 }
 
 .workspace {
@@ -460,64 +471,77 @@ onUnmounted(() => {
   flex-direction: column;
 }
 
-.topbar {
-  display: none;
-}
-
-.backdrop {
-  display: none;
-}
-
+.backdrop,
 .mobile-only {
   display: none;
 }
 
+.desktop-only {
+  display: flex;
+}
+
 .sidebar {
   position: sticky;
   top: 0;
   align-self: start;
+  height: 100vh;
+  height: 100dvh;
   background: #fff;
-  color: var(--ink);
-  padding: 1.25rem 1rem;
+  border-inline-start: 1px solid #e8eef3;
+  padding: 1.15rem 0.9rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  height: 100vh;
-  height: 100dvh;
   overflow: hidden;
   box-sizing: border-box;
-  border-inline-start: 1px solid var(--line);
-  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.04);
 }
 
-.brand-row,
-.drawer-head {
+.brand-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0 0.35rem;
   flex-shrink: 0;
 }
 
 .brand {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  min-width: 0;
+  gap: 0.7rem;
 }
 
 .mark {
-  width: 42px;
-  height: 42px;
-  border-radius: 14px;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
   display: grid;
   place-items: center;
-  background: linear-gradient(135deg, #2eb29b, #0d9488);
+  background: linear-gradient(145deg, #2ec4a8, #14b8a6);
   color: #fff;
   font-weight: 800;
-  flex-shrink: 0;
+  font-size: 1.05rem;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
+}
+
+.mark.sm {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  font-size: 0.9rem;
+}
+
+.brand strong {
+  display: block;
+  font-size: 1.05rem;
+  letter-spacing: -0.01em;
 }
 
 .brand small {
   display: block;
-  color: var(--muted);
-  font-size: 0.78rem;
+  color: #94a3b8;
+  font-size: 0.72rem;
+  margin-top: 0.05rem;
 }
 
 .side-nav {
@@ -536,32 +560,31 @@ onUnmounted(() => {
 .nav-primary,
 .nav-sub {
   display: grid;
-  gap: 0.25rem;
+  gap: 0.22rem;
 }
 
-.nav-item,
-.side-nav a {
+.nav-item {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
-  padding: 0.72rem 0.85rem;
+  gap: 0.7rem;
+  padding: 0.78rem 0.9rem;
   border-radius: 14px;
-  color: #475569;
+  color: #64748b;
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 0.92rem;
+  transition: background 0.15s ease, color 0.15s ease;
 }
 
-.nav-icon {
-  width: 1.25rem;
-  text-align: center;
-  opacity: 0.85;
+.nav-item:hover {
+  background: #f8fafc;
+  color: #0f172a;
 }
 
-.nav-item.router-link-active,
-.side-nav a.router-link-active {
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-weight: 700;
+.nav-item.router-link-active {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.28);
 }
 
 .nav-badge {
@@ -569,17 +592,19 @@ onUnmounted(() => {
   min-width: 1.35rem;
   height: 1.35rem;
   border-radius: 999px;
-  background: var(--accent);
+  background: #14b8a6;
   color: #fff;
-  font-size: 0.72rem;
+  font-size: 0.7rem;
   display: grid;
   place-items: center;
-  padding: 0 0.35rem;
+  padding: 0 0.3rem;
+}
+
+.nav-item.router-link-active .nav-badge {
+  background: rgba(255, 255, 255, 0.25);
 }
 
 .nav-group {
-  display: grid;
-  gap: 0.15rem;
   margin-top: 0.35rem;
 }
 
@@ -588,29 +613,23 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
   border: 0;
   background: transparent;
-  color: var(--muted);
+  color: #94a3b8;
   font: inherit;
-  font-size: 0.82rem;
-  font-weight: 600;
-  padding: 0.55rem 0.85rem;
-  border-radius: 12px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  padding: 0.5rem 0.9rem;
+  border-radius: 10px;
   cursor: pointer;
   text-align: right;
 }
 
-.nav-group-btn:hover {
-  background: #f8fafc;
-  color: var(--ink);
-}
-
 .chev {
-  width: 0.45rem;
-  height: 0.45rem;
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
+  width: 0.42rem;
+  height: 0.42rem;
+  border-right: 1.6px solid currentColor;
+  border-bottom: 1.6px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.15s ease;
 }
@@ -620,127 +639,155 @@ onUnmounted(() => {
 }
 
 .nav-sub {
-  padding: 0.1rem 0 0.25rem 0.35rem;
-  border-inline-end: 1px solid var(--line);
-  margin-inline-end: 0.85rem;
+  margin-inline-end: 0.75rem;
+  padding-inline-end: 0.35rem;
+  border-inline-end: 1px solid #eef2f7;
 }
 
 .nav-sub a {
-  padding: 0.55rem 0.75rem;
-  font-size: 0.92rem;
+  display: block;
+  padding: 0.55rem 0.8rem;
+  border-radius: 10px;
+  color: #64748b;
+  text-decoration: none;
+  font-size: 0.88rem;
+}
+
+.nav-sub a.router-link-active {
+  background: #ecfdf8;
+  color: #0f766e;
+  font-weight: 700;
 }
 
 .scope-banner {
   margin: 0;
   padding: 0.55rem 0.75rem;
-  border-radius: 10px;
+  border-radius: 12px;
   background: #f8fafc;
-  color: var(--muted);
-  font-size: 0.78rem;
+  color: #94a3b8;
+  font-size: 0.75rem;
 }
 
 .sidebar-foot {
   margin-top: auto;
   display: grid;
-  gap: 0.75rem;
+  gap: 0.7rem;
   flex-shrink: 0;
 }
 
-.promo-card {
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-  padding: 0.85rem 1rem;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #0f766e, #134e4a);
-  color: #ecfdf5;
-  font-size: 0.88rem;
-  font-weight: 600;
-  line-height: 1.45;
-}
-
-.promo-card p {
-  margin: 0;
-}
-
 .profile-card {
   display: flex;
   align-items: center;
   gap: 0.65rem;
-  padding: 0.65rem 0.75rem;
-  border-radius: 14px;
-  background: #f8fafc;
-  border: 1px solid var(--line);
+  padding: 0.55rem 0.65rem;
 }
 
 .avatar {
-  width: 40px;
-  height: 40px;
+  width: 42px;
+  height: 42px;
   border-radius: 999px;
-  background: var(--accent-soft);
-  color: var(--accent);
+  background: linear-gradient(145deg, #99f6e4, #5eead4);
+  color: #0f766e;
   display: grid;
   place-items: center;
-  font-weight: 700;
+  font-weight: 800;
   flex-shrink: 0;
 }
 
 .profile-meta {
   min-width: 0;
   display: grid;
-  gap: 0.1rem;
+  gap: 0.08rem;
 }
 
 .profile-meta strong {
-  font-size: 0.9rem;
+  font-size: 0.88rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .profile-meta span {
-  color: var(--muted);
-  font-size: 0.78rem;
+  color: #94a3b8;
+  font-size: 0.75rem;
 }
 
 .online-dot {
   margin-inline-start: auto;
-  width: 10px;
-  height: 10px;
+  width: 9px;
+  height: 9px;
   border-radius: 999px;
   background: #22c55e;
   box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+}
+
+.promo-card {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.95rem 1rem;
+  border-radius: 18px;
+  background: linear-gradient(145deg, #0f766e, #115e59 55%, #134e4a);
+  color: #ecfdf5;
+  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.25);
+}
+
+.promo-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.14);
+  display: grid;
+  place-items: center;
   flex-shrink: 0;
 }
 
-.logout {
-  width: 100%;
+.promo-card p {
+  margin: 0;
+  font-size: 0.84rem;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.logout-link {
+  border: 0;
+  background: transparent;
+  color: #94a3b8;
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  text-align: right;
+  padding: 0 0.35rem;
 }
 
 .desktop-topbar {
-  display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 1rem 1.5rem 0.75rem;
+  padding: 1.05rem 1.5rem 0.85rem;
   position: sticky;
   top: 0;
   z-index: 20;
-  background: rgba(244, 247, 248, 0.92);
-  backdrop-filter: blur(8px);
+  background: rgba(245, 247, 250, 0.9);
+  backdrop-filter: blur(10px);
 }
 
 .global-search {
   flex: 1;
-  max-width: 520px;
+  max-width: 560px;
   display: flex;
   align-items: center;
-  gap: 0.65rem;
-  background: #fff;
-  border: 1px solid var(--line);
+  gap: 0.7rem;
+  background: #eef2f6;
   border-radius: 999px;
-  padding: 0.55rem 1rem;
-  box-shadow: var(--shadow);
+  padding: 0.72rem 1rem;
+  border: 1px solid transparent;
+}
+
+.global-search:focus-within {
+  background: #fff;
+  border-color: #cbd5e1;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
 }
 
 .global-search input {
@@ -748,56 +795,87 @@ onUnmounted(() => {
   background: transparent;
   width: 100%;
   outline: none;
+  font-size: 0.92rem;
+  color: #0f172a;
 }
 
-.search-icon {
-  opacity: 0.55;
+.global-search input::placeholder {
+  color: #94a3b8;
+}
+
+.search-leading {
+  color: #94a3b8;
+}
+
+.global-search kbd {
+  flex-shrink: 0;
+  font-size: 0.72rem;
+  color: #94a3b8;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 0.18rem 0.45rem;
 }
 
 .topbar-actions {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.5rem;
 }
 
-.top-icon {
+.round-btn {
   position: relative;
   width: 42px;
   height: 42px;
-  border-radius: 12px;
-  border: 1px solid var(--line);
+  border-radius: 999px;
+  border: 0;
   background: #fff;
+  color: #64748b;
   display: grid;
   place-items: center;
   cursor: pointer;
   text-decoration: none;
-  color: inherit;
-  font-size: 1rem;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.round-btn.accent {
+  color: #14b8a6;
+  background: #ecfdf8;
+}
+
+.round-btn.sm {
+  width: 34px;
+  height: 34px;
 }
 
 .date-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
   padding: 0.55rem 0.85rem;
-  border-radius: 12px;
+  border-radius: 999px;
   background: #fff;
-  border: 1px solid var(--line);
-  color: var(--muted);
-  font-size: 0.85rem;
+  color: #64748b;
+  font-size: 0.84rem;
+  font-weight: 600;
   white-space: nowrap;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
 }
 
 .badge {
   position: absolute;
-  top: -4px;
-  inset-inline-start: -4px;
-  min-width: 1.15rem;
-  height: 1.15rem;
+  top: -2px;
+  inset-inline-start: -2px;
+  min-width: 1.05rem;
+  height: 1.05rem;
   border-radius: 999px;
   background: #ef4444;
   color: #fff;
-  font-size: 0.68rem;
+  font-size: 0.65rem;
   display: grid;
   place-items: center;
-  padding: 0 0.3rem;
+  padding: 0 0.22rem;
+  border: 2px solid #fff;
 }
 
 .notif-layer {
@@ -813,7 +891,7 @@ onUnmounted(() => {
 .notif-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 23, 42, 0.25);
+  background: rgba(15, 23, 42, 0.22);
   pointer-events: auto;
 }
 
@@ -823,8 +901,7 @@ onUnmounted(() => {
   max-height: min(70vh, 480px);
   overflow: auto;
   background: #fff;
-  color: var(--ink);
-  border: 1px solid var(--line);
+  border: 1px solid #e8eef3;
   border-radius: 18px;
   padding: 0.85rem;
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
@@ -847,7 +924,7 @@ onUnmounted(() => {
 .linkish {
   border: 0;
   background: transparent;
-  color: var(--accent);
+  color: #14b8a6;
   cursor: pointer;
   font: inherit;
   font-size: 0.82rem;
@@ -875,7 +952,7 @@ onUnmounted(() => {
 }
 
 .notif-list li.unread button {
-  background: var(--accent-soft);
+  background: #ecfdf8;
 }
 
 .title {
@@ -886,7 +963,7 @@ onUnmounted(() => {
 .body,
 .time,
 .muted {
-  color: var(--muted);
+  color: #94a3b8;
   font-size: 0.8rem;
 }
 
@@ -896,24 +973,8 @@ onUnmounted(() => {
   overflow-x: clip;
 }
 
-.icon-btn {
-  border: 1px solid var(--line);
-  background: #fff;
-  border-radius: 12px;
-  min-width: 42px;
-  height: 42px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-btn.ghost {
-  background: transparent;
-}
-
 .burger {
-  width: 18px;
+  width: 16px;
   height: 2px;
   background: currentColor;
   position: relative;
@@ -930,11 +991,11 @@ onUnmounted(() => {
 }
 
 .burger::before {
-  top: -6px;
+  top: -5px;
 }
 
 .burger::after {
-  top: 6px;
+  top: 5px;
 }
 
 .burger.open {
@@ -942,11 +1003,29 @@ onUnmounted(() => {
 }
 
 .burger.open::before {
-  transform: translateY(6px) rotate(45deg);
+  transform: translateY(5px) rotate(45deg);
 }
 
 .burger.open::after {
-  transform: translateY(-6px) rotate(-45deg);
+  transform: translateY(-5px) rotate(-45deg);
+}
+
+.mobile-topbar {
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 0.9rem;
+  background: #fff;
+  border-bottom: 1px solid #e8eef3;
+  position: sticky;
+  top: 0;
+  z-index: 30;
+}
+
+.top-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 @media (max-width: 900px) {
@@ -954,25 +1033,6 @@ onUnmounted(() => {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .topbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-    padding: 0.7rem 0.85rem;
-    background: #fff;
-    border-bottom: 1px solid var(--line);
-    position: sticky;
-    top: 0;
-    z-index: 30;
-  }
-
-  .top-brand {
-    display: flex;
-    align-items: center;
-    gap: 0.55rem;
-  }
-
   .desktop-only {
     display: none !important;
   }
@@ -981,12 +1041,6 @@ onUnmounted(() => {
     display: flex;
   }
 
-  .drawer-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
   .backdrop {
     display: block;
     position: fixed;
diff --git a/apps/web/src/lib/jalali.ts b/apps/web/src/lib/jalali.ts
index 8c7efaa..9897a8e 100644
--- a/apps/web/src/lib/jalali.ts
+++ b/apps/web/src/lib/jalali.ts
@@ -170,6 +170,12 @@ export function formatJalaliLong(d: Date): string {
   return `${weekdayName(d)} ${toFaDigits(jd)} ${jalaliMonthName(jm)} ${toFaDigits(jy)}`;
 }
 
+/** مثل: دوشنبه ۲۶ مرداد */
+export function formatJalaliShort(d: Date): string {
+  const { jm, jd } = dateToJalali(d);
+  return `${weekdayName(d)} ${toFaDigits(jd)} ${jalaliMonthName(jm)}`;
+}
+
 export function toFaDigits(value: number | string): string {
   return String(value).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[Number(d)]!);
 }
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 6f984dd..ac8c311 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -5,6 +5,7 @@ import { useAuthStore } from '@/stores/auth';
 import { api } from '@/lib/api';
 import { formatMoney } from '@/lib/money';
 import { toFaDigits } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
 import type {
   ActivityDto,
   HomeDashboardDto,
@@ -26,6 +27,8 @@ const firstName = computed(() => {
   return parts[0] ?? 'کاربر';
 });
 
+const userInitial = computed(() => firstName.value.slice(0, 1));
+
 const greeting = computed(() => {
   const hour = new Date().getHours();
   if (hour < 12) return 'صبح بخیر';
@@ -33,18 +36,18 @@ const greeting = computed(() => {
   return 'عصر بخیر';
 });
 
-const kpiIcons: Record<string, string> = {
-  sales: '💰',
-  customers: '👤',
-  'open-deals': '💎',
-  followups: '📋',
+const kpiMeta: Record<string, { icon: 'chart' | 'users' | 'briefcase' | 'check'; label?: string }> = {
+  sales: { icon: 'chart' },
+  customers: { icon: 'users' },
+  'open-deals': { icon: 'briefcase' },
+  followups: { icon: 'check' },
 };
 
 const aiShortcuts = [
-  { label: 'خلاصه مشتری شرکت آریانا را بده', to: '/contacts' },
-  { label: 'متن پیگیری برای مشتری بفرست', to: '/notes' },
-  { label: 'گزارش فروش این هفته را نشان بده', to: '/reports' },
-  { label: 'معاملات در خطر را لیست کن', to: '/pipeline' },
+  { label: 'خلاصه مشتری شرکت آریانا را بده', to: '/contacts', icon: 'users' as const },
+  { label: 'متن پیگیری برای مشتری بفرست', to: '/notes', icon: 'send' as const },
+  { label: 'گزارش فروش این هفته را نشان بده', to: '/reports', icon: 'chart' as const },
+  { label: 'معاملات در خطر را لیست کن', to: '/pipeline', icon: 'warning' as const },
 ];
 
 const pipelineStages = computed(() => board.value?.stages.slice(0, 3) ?? []);
@@ -74,11 +77,25 @@ const trendArea = computed(() => {
   return `${pts} ${last[0]},132 ${first[0]},132`;
 });
 
+const trendDots = computed(() => {
+  const trend = home.value?.salesTrend ?? [];
+  if (!trend.length) return [];
+  const max = Math.max(...trend.map((p) => p.amount), 1);
+  const w = 320;
+  const h = 120;
+  const pad = 12;
+  return trend.map((p, i) => ({
+    x: pad + (i / Math.max(trend.length - 1, 1)) * (w - pad * 2),
+    y: h - pad - (p.amount / max) * (h - pad * 2),
+    label: p.monthLabel,
+  }));
+});
+
 const donutSegments = computed(() => {
   const sources = home.value?.sources ?? [];
   if (!sources.length) return [];
   let offset = 0;
-  const colors = ['#2eb29b', '#38bdf8', '#818cf8', '#fbbf24', '#fb7185', '#94a3b8'];
+  const colors = ['#14b8a6', '#5eead4', '#38bdf8', '#a78bfa', '#fbbf24', '#94a3b8'];
   return sources.map((s, i) => {
     const seg = { ...s, color: colors[i % colors.length], offset };
     offset += s.percent;
@@ -86,6 +103,10 @@ const donutSegments = computed(() => {
   });
 });
 
+const sourceTotal = computed(
+  () => home.value?.sources.reduce((a, s) => a + s.count, 0) ?? 0,
+);
+
 const typeLabel: Record<string, string> = {
   call: 'تماس',
   meeting: 'جلسه',
@@ -114,10 +135,10 @@ function activityStatus(act: ActivityDto) {
 }
 
 function activityIcon(type: string) {
-  if (type === 'call') return '📞';
-  if (type === 'meeting') return '📅';
-  if (type === 'task') return '✅';
-  return '📝';
+  if (type === 'call') return 'phone' as const;
+  if (type === 'meeting') return 'calendar' as const;
+  if (type === 'task') return 'check' as const;
+  return 'mail' as const;
 }
 
 function trophy(rank: number) {
@@ -128,10 +149,10 @@ function trophy(rank: number) {
 }
 
 function alertIcon(tone: string) {
-  if (tone === 'urgent') return '🔥';
-  if (tone === 'warning') return '⚠';
-  if (tone === 'success') return '📈';
-  return 'ℹ';
+  if (tone === 'urgent') return 'fire' as const;
+  if (tone === 'warning') return 'warning' as const;
+  if (tone === 'success') return 'trend' as const;
+  return 'sparkle' as const;
 }
 
 function formatKpiValue(key: string, value: number) {
@@ -177,40 +198,59 @@ onMounted(async () => {
 <template>
   <section class="dashboard">
     <header class="hero">
-      <div class="hero-main">
-        <div class="hero-greet">
-          <span class="hero-avatar">{{ firstName.slice(0, 1) }}</span>
-          <div>
-            <h1>{{ greeting }} {{ firstName }}</h1>
-            <p>منتو اینها رو برات پیدا کرده</p>
+      <div class="hero-glow a" />
+      <div class="hero-glow b" />
+
+      <div class="hero-body">
+        <div class="hero-top">
+          <div class="hero-greet">
+            <span class="hero-avatar">
+              {{ userInitial }}
+              <i class="online" />
+            </span>
+            <div>
+              <h1>{{ greeting }} {{ firstName }}</h1>
+              <p>منتو اینها رو برات پیدا کرده</p>
+            </div>
+          </div>
+
+          <div class="hero-chips">
+            <RouterLink
+              v-for="alert in (home?.alerts ?? []).slice(0, 3)"
+              :key="alert.key"
+              class="chip"
+              :class="`chip-${alert.tone}`"
+              :to="alert.link || '/'"
+            >
+              <span class="chip-ico"><UiIcon :name="alertIcon(alert.tone)" :size="14" /></span>
+              <span>{{ alert.text }}</span>
+            </RouterLink>
+            <template v-if="!home?.alerts?.length && !loading">
+              <span class="chip chip-success">
+                <span class="chip-ico"><UiIcon name="trend" :size="14" /></span>
+                امروز آماده‌اید برای فروش بیشتر
+              </span>
+            </template>
           </div>
         </div>
 
-        <div v-if="home?.alerts?.length" class="hero-chips">
-          <RouterLink
-            v-for="alert in home.alerts.slice(0, 3)"
-            :key="alert.key"
-            class="chip"
-            :class="`chip-${alert.tone}`"
-            :to="alert.link || '/'"
-          >
-            <span aria-hidden="true">{{ alertIcon(alert.tone) }}</span>
-            {{ alert.text }}
-          </RouterLink>
-        </div>
-
         <form class="hero-ask" @submit.prevent="submitAsk">
-          <span class="ask-icon" aria-hidden="true">✨</span>
-          <input v-model="askQuery" type="search" placeholder="از منتو بپرس…" />
+          <UiIcon name="sparkle" :size="16" />
+          <input v-model="askQuery" type="search" placeholder="از منتو بپرس..." />
           <kbd>⌘K</kbd>
         </form>
       </div>
 
       <div class="hero-bot" aria-hidden="true">
         <div class="bot-bubble">من دستیار فروش هوشمند سیستم هستم</div>
-        <div class="bot-head">
-          <span class="bot-eye" />
-          <span class="bot-eye" />
+        <div class="bot-figure">
+          <div class="bot-head">
+            <span class="eye" />
+            <span class="eye" />
+            <span class="mouth" />
+          </div>
+          <div class="bot-body" />
+          <div class="bot-glow" />
           <span class="bot-badge">AI</span>
         </div>
       </div>
@@ -221,8 +261,10 @@ onMounted(async () => {
     <template v-else>
       <div class="kpi-row">
         <article v-for="kpi in home?.kpis ?? []" :key="kpi.key" class="kpi-card">
-          <div class="kpi-icon">{{ kpiIcons[kpi.key] ?? '📊' }}</div>
-          <div>
+          <div class="kpi-icon">
+            <UiIcon :name="kpiMeta[kpi.key]?.icon ?? 'chart'" :size="20" />
+          </div>
+          <div class="kpi-text">
             <p class="kpi-label">{{ kpi.label }}</p>
             <strong class="kpi-value">{{ formatKpiValue(kpi.key, kpi.value) }}</strong>
             <span
@@ -237,16 +279,23 @@ onMounted(async () => {
       </div>
 
       <div class="mid-grid">
-        <article class="panel chart-panel">
+        <article class="panel">
           <header class="panel-head">
             <h2>روند فروش</h2>
+            <span
+              v-if="home?.kpis?.[0]?.changePercent != null"
+              class="mini-badge"
+              :class="{ down: (home.kpis[0].changePercent ?? 0) < 0 }"
+            >
+              {{ formatChange(home.kpis[0].changePercent) }} نسبت به ماه قبل
+            </span>
           </header>
           <div class="chart-wrap">
             <svg viewBox="0 0 320 140" class="line-chart" aria-hidden="true">
               <defs>
                 <linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stop-color="#2eb29b" stop-opacity="0.35" />
-                  <stop offset="100%" stop-color="#2eb29b" stop-opacity="0" />
+                  <stop offset="0%" stop-color="#14b8a6" stop-opacity="0.28" />
+                  <stop offset="100%" stop-color="#14b8a6" stop-opacity="0" />
                 </linearGradient>
               </defs>
               <polygon v-if="trendArea" :points="trendArea" fill="url(#trendFill)" />
@@ -254,9 +303,20 @@ onMounted(async () => {
                 v-if="trendPoints"
                 :points="trendPoints"
                 fill="none"
-                stroke="#2eb29b"
-                stroke-width="3"
+                stroke="#14b8a6"
+                stroke-width="3.2"
                 stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <circle
+                v-for="(d, i) in trendDots"
+                :key="i"
+                :cx="d.x"
+                :cy="d.y"
+                r="4.5"
+                fill="#fff"
+                stroke="#14b8a6"
+                stroke-width="2.5"
               />
             </svg>
             <div class="chart-labels">
@@ -265,14 +325,14 @@ onMounted(async () => {
           </div>
         </article>
 
-        <article class="panel donut-panel">
+        <article class="panel">
           <header class="panel-head">
             <h2>منابع مشتریان</h2>
           </header>
           <div class="donut-wrap">
             <div class="donut-chart-box">
               <svg viewBox="0 0 120 120" class="donut-chart" aria-hidden="true">
-                <circle cx="60" cy="60" r="42" fill="none" stroke="#eef2f7" stroke-width="16" />
+                <circle cx="60" cy="60" r="42" fill="none" stroke="#eef2f7" stroke-width="14" />
                 <circle
                   v-for="seg in donutSegments"
                   :key="seg.label"
@@ -281,22 +341,21 @@ onMounted(async () => {
                   r="42"
                   fill="none"
                   :stroke="seg.color"
-                  stroke-width="16"
-                  stroke-linecap="butt"
+                  stroke-width="14"
                   :stroke-dasharray="`${seg.percent * 2.64} 264`"
                   :stroke-dashoffset="`${-seg.offset * 2.64}`"
                   transform="rotate(-90 60 60)"
                 />
               </svg>
               <div class="donut-center">
-                <strong>{{ toFaDigits(home?.sources.reduce((a, s) => a + s.count, 0) ?? 0) }}</strong>
+                <strong>{{ toFaDigits(sourceTotal) }}</strong>
                 <span>مشتری</span>
               </div>
             </div>
             <ul class="donut-legend">
               <li v-for="seg in donutSegments" :key="seg.label">
                 <span class="dot" :style="{ background: seg.color }" />
-                {{ seg.label }}
+                <span class="lbl">{{ seg.label }}</span>
                 <em>{{ toFaDigits(seg.percent) }}٪</em>
               </li>
             </ul>
@@ -305,7 +364,10 @@ onMounted(async () => {
 
         <article class="panel ai-panel">
           <header class="panel-head">
-            <h2>✨ دستیار هوشمند منتو</h2>
+            <h2>
+              <UiIcon name="sparkle" :size="16" />
+              دستیار هوشمند منتو
+            </h2>
           </header>
           <p class="ai-lead">چه کمکی می‌تونم بکنم؟</p>
           <div class="ai-shortcuts">
@@ -315,12 +377,15 @@ onMounted(async () => {
               class="ai-chip"
               :to="item.to"
             >
+              <UiIcon :name="item.icon" :size="15" />
               {{ item.label }}
             </RouterLink>
           </div>
           <form class="ai-input" @submit.prevent="submitAsk">
-            <input v-model="askQuery" type="search" placeholder="از منتو بپرس…" />
-            <button type="submit" aria-label="ارسال">➤</button>
+            <input v-model="askQuery" type="search" placeholder="از منتو بپرس..." />
+            <button type="submit" aria-label="ارسال">
+              <UiIcon name="send" :size="16" />
+            </button>
           </form>
         </article>
       </div>
@@ -333,7 +398,9 @@ onMounted(async () => {
           </header>
           <ul v-if="activities.length" class="activity-list">
             <li v-for="act in activities" :key="act.id">
-              <span class="act-icon">{{ activityIcon(act.type) }}</span>
+              <span class="act-icon">
+                <UiIcon :name="activityIcon(act.type)" :size="16" />
+              </span>
               <div class="act-body">
                 <strong>{{ act.title }}</strong>
                 <span>{{ typeLabel[act.type] ?? act.type }} · {{ formatWhen(act.dueAt || act.createdAt) }}</span>
@@ -346,7 +413,7 @@ onMounted(async () => {
           <p v-else class="muted">فعالیتی ثبت نشده.</p>
         </article>
 
-        <article class="panel pipeline-panel">
+        <article class="panel">
           <header class="panel-head">
             <h2>جریان فروش</h2>
             <RouterLink :to="{ name: 'pipeline' }">کاریز کامل</RouterLink>
@@ -378,11 +445,12 @@ onMounted(async () => {
           </header>
           <ul v-if="home?.topCustomers?.length" class="top-list">
             <li v-for="row in home.topCustomers" :key="row.id">
-              <span class="rank">{{ trophy(row.rank) }}</span>
+              <span class="cust-avatar">{{ row.name.slice(0, 1) }}</span>
               <div>
                 <strong>{{ row.name }}</strong>
                 <span>{{ toFaDigits(row.dealCount) }} معامله</span>
               </div>
+              <span class="rank">{{ trophy(row.rank) }}</span>
             </li>
           </ul>
           <p v-else class="muted">هنوز داده کافی برای رتبه‌بندی نیست.</p>
@@ -395,28 +463,55 @@ onMounted(async () => {
 <style scoped>
 .dashboard {
   display: grid;
-  gap: 1.25rem;
-  padding-bottom: 1rem;
+  gap: 1.15rem;
 }
 
 .hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 1rem;
-  align-items: stretch;
-  padding: 1.35rem 1.5rem;
-  border-radius: 24px;
-  background: linear-gradient(135deg, #2eb29b 0%, #0f766e 45%, #1e3a5f 100%);
-  color: #fff;
-  box-shadow: 0 18px 40px rgba(15, 118, 110, 0.22);
-  overflow: hidden;
   position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 200px;
+  gap: 1rem;
+  align-items: center;
+  min-height: 180px;
+  padding: 1.35rem 1.5rem;
+  border-radius: 28px;
+  overflow: hidden;
+  color: #fff;
+  background: linear-gradient(105deg, #5eead4 0%, #14b8a6 28%, #0f766e 58%, #1e3a5f 100%);
+  box-shadow: 0 18px 40px rgba(15, 118, 110, 0.22);
 }
 
-.hero-main {
+.hero-glow {
+  position: absolute;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+}
+
+.hero-glow.a {
+  width: 220px;
+  height: 220px;
+  top: -80px;
+  inset-inline-end: 180px;
+}
+
+.hero-glow.b {
+  width: 140px;
+  height: 140px;
+  bottom: -50px;
+  inset-inline-start: 40px;
+}
+
+.hero-body {
+  position: relative;
+  z-index: 1;
   display: grid;
   gap: 1rem;
-  z-index: 1;
+}
+
+.hero-top {
+  display: grid;
+  gap: 0.85rem;
 }
 
 .hero-greet {
@@ -426,66 +521,98 @@ onMounted(async () => {
 }
 
 .hero-avatar {
-  width: 48px;
-  height: 48px;
+  position: relative;
+  width: 52px;
+  height: 52px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.22);
+  border: 2px solid rgba(255, 255, 255, 0.45);
   display: grid;
   place-items: center;
   font-weight: 800;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+.hero-avatar .online {
+  position: absolute;
+  bottom: 2px;
+  inset-inline-start: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #22c55e;
+  border: 2px solid #fff;
 }
 
 .hero h1 {
   margin: 0;
-  font-size: clamp(1.35rem, 2vw, 1.75rem);
+  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
+  font-weight: 800;
 }
 
 .hero p {
-  margin: 0.25rem 0 0;
-  opacity: 0.88;
+  margin: 0.2rem 0 0;
+  opacity: 0.9;
+  font-size: 0.92rem;
 }
 
 .hero-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.55rem;
+  gap: 0.5rem;
 }
 
 .chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
-  padding: 0.45rem 0.75rem;
+  gap: 0.4rem;
+  max-width: 100%;
+  padding: 0.48rem 0.75rem;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.14);
-  color: #fff;
-  font-size: 0.82rem;
+  background: #fff;
+  color: #0f172a;
+  font-size: 0.78rem;
+  font-weight: 600;
   text-decoration: none;
-  backdrop-filter: blur(4px);
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
 }
 
-.chip-warning {
-  background: rgba(251, 191, 36, 0.22);
+.chip-ico {
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
 }
 
-.chip-urgent {
-  background: rgba(239, 68, 68, 0.24);
+.chip-urgent .chip-ico {
+  background: #fee2e2;
+  color: #ef4444;
 }
 
-.chip-success {
-  background: rgba(34, 197, 94, 0.22);
+.chip-warning .chip-ico {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.chip-success .chip-ico,
+.chip-info .chip-ico {
+  background: #dcfce7;
+  color: #16a34a;
 }
 
 .hero-ask {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
-  background: rgba(255, 255, 255, 0.95);
-  color: var(--ink);
+  gap: 0.55rem;
+  max-width: 420px;
+  background: rgba(255, 255, 255, 0.96);
+  color: #0f172a;
   border-radius: 999px;
-  padding: 0.65rem 1rem;
-  max-width: 520px;
+  padding: 0.55rem 0.85rem;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
 }
 
 .hero-ask input {
@@ -493,77 +620,120 @@ onMounted(async () => {
   background: transparent;
   flex: 1;
   outline: none;
+  font-size: 0.9rem;
 }
 
 .hero-ask kbd {
-  font-size: 0.72rem;
-  color: var(--muted);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 0.15rem 0.4rem;
+  font-size: 0.68rem;
+  color: #94a3b8;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  padding: 0.12rem 0.35rem;
 }
 
 .hero-bot {
-  display: grid;
-  align-content: center;
-  justify-items: end;
-  gap: 0.65rem;
+  position: relative;
   z-index: 1;
+  display: grid;
+  justify-items: center;
+  gap: 0.55rem;
 }
 
 .bot-bubble {
-  max-width: 180px;
-  padding: 0.55rem 0.75rem;
+  max-width: 170px;
+  padding: 0.55rem 0.7rem;
   border-radius: 14px 14px 4px 14px;
   background: rgba(255, 255, 255, 0.16);
-  font-size: 0.82rem;
+  backdrop-filter: blur(6px);
+  font-size: 0.78rem;
   line-height: 1.45;
+  text-align: center;
 }
 
-.bot-head {
-  width: 88px;
-  height: 88px;
-  border-radius: 22px;
-  background: linear-gradient(180deg, #dbeafe, #93c5fd);
+.bot-figure {
   position: relative;
-  box-shadow: 0 0 30px rgba(56, 189, 248, 0.45);
+  width: 110px;
+  height: 120px;
   display: grid;
   place-items: center;
 }
 
-.bot-eye {
+.bot-head {
+  position: relative;
+  width: 72px;
+  height: 64px;
+  border-radius: 22px;
+  background: linear-gradient(180deg, #f8fafc, #dbeafe);
+  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.18), 0 12px 30px rgba(14, 165, 233, 0.35);
+  z-index: 2;
+}
+
+.eye {
   position: absolute;
-  top: 34px;
-  width: 12px;
-  height: 12px;
+  top: 24px;
+  width: 10px;
+  height: 10px;
   border-radius: 999px;
   background: #0ea5e9;
-  box-shadow: 0 0 12px #38bdf8;
+  box-shadow: 0 0 10px #38bdf8;
 }
 
-.bot-eye:first-of-type {
-  right: 24px;
+.eye:first-of-type {
+  right: 18px;
 }
 
-.bot-eye:last-of-type {
-  left: 24px;
+.eye:last-of-type {
+  left: 18px;
+}
+
+.mouth {
+  position: absolute;
+  bottom: 14px;
+  left: 50%;
+  width: 16px;
+  height: 6px;
+  border-radius: 999px;
+  background: #94a3b8;
+  transform: translateX(-50%);
+}
+
+.bot-body {
+  position: absolute;
+  bottom: 18px;
+  width: 54px;
+  height: 36px;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
+  z-index: 1;
+}
+
+.bot-glow {
+  position: absolute;
+  bottom: 0;
+  width: 70px;
+  height: 14px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.7), transparent 70%);
+  filter: blur(2px);
 }
 
 .bot-badge {
   position: absolute;
-  bottom: -6px;
+  top: 8px;
+  inset-inline-end: 4px;
   background: #0ea5e9;
   color: #fff;
-  font-size: 0.68rem;
+  font-size: 0.65rem;
   font-weight: 800;
-  padding: 0.15rem 0.45rem;
+  padding: 0.12rem 0.4rem;
   border-radius: 999px;
+  z-index: 3;
 }
 
 .kpi-row {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1rem;
+  gap: 0.9rem;
 }
 
 .kpi-card {
@@ -571,63 +741,70 @@ onMounted(async () => {
   gap: 0.85rem;
   align-items: flex-start;
   background: #fff;
-  border-radius: 20px;
-  padding: 1.1rem 1.15rem;
-  box-shadow: var(--shadow);
-  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 22px;
+  padding: 1.05rem 1.1rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
 }
 
 .kpi-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 14px;
-  background: var(--accent-soft);
+  width: 46px;
+  height: 46px;
+  border-radius: 999px;
+  background: #ecfdf8;
+  color: #14b8a6;
   display: grid;
   place-items: center;
-  font-size: 1.2rem;
+  flex-shrink: 0;
 }
 
 .kpi-label {
   margin: 0;
-  color: var(--muted);
-  font-size: 0.88rem;
+  color: #94a3b8;
+  font-size: 0.84rem;
 }
 
 .kpi-value {
   display: block;
   margin-top: 0.2rem;
-  font-size: 1.15rem;
+  font-size: 1.12rem;
+  color: #0f172a;
 }
 
 .kpi-change {
-  display: block;
-  margin-top: 0.35rem;
+  display: inline-block;
+  margin-top: 0.4rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+  background: #dcfce7;
   color: #16a34a;
-  font-size: 0.78rem;
+  font-size: 0.72rem;
+  font-weight: 700;
 }
 
 .kpi-change.down {
+  background: #fee2e2;
   color: #dc2626;
 }
 
 .mid-grid {
   display: grid;
-  grid-template-columns: 1.2fr 1fr 0.9fr;
-  gap: 1rem;
+  grid-template-columns: 1.25fr 1fr 0.95fr;
+  gap: 0.9rem;
 }
 
 .bottom-grid {
   display: grid;
-  grid-template-columns: 1fr 1.4fr 0.8fr;
-  gap: 1rem;
+  grid-template-columns: 1fr 1.35fr 0.85fr;
+  gap: 0.9rem;
 }
 
 .panel {
   background: #fff;
-  border-radius: 20px;
-  padding: 1.1rem 1.15rem;
-  box-shadow: var(--shadow);
-  border: 1px solid rgba(226, 232, 240, 0.9);
+  border-radius: 22px;
+  padding: 1.05rem 1.1rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
   min-width: 0;
 }
 
@@ -641,17 +818,36 @@ onMounted(async () => {
 
 .panel-head h2 {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.98rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #0f172a;
 }
 
 .panel-head a {
-  color: var(--accent);
-  font-size: 0.85rem;
+  color: #14b8a6;
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.mini-badge {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #16a34a;
+  background: #dcfce7;
+  border-radius: 999px;
+  padding: 0.2rem 0.55rem;
+}
+
+.mini-badge.down {
+  color: #dc2626;
+  background: #fee2e2;
 }
 
 .chart-wrap {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .line-chart {
@@ -662,8 +858,8 @@ onMounted(async () => {
 .chart-labels {
   display: flex;
   justify-content: space-between;
-  color: var(--muted);
-  font-size: 0.78rem;
+  color: #94a3b8;
+  font-size: 0.74rem;
 }
 
 .donut-wrap {
@@ -690,17 +886,17 @@ onMounted(async () => {
   display: grid;
   place-content: center;
   text-align: center;
-  gap: 0.1rem;
+  gap: 0.05rem;
   pointer-events: none;
 }
 
 .donut-center strong {
-  font-size: 1rem;
+  font-size: 1.05rem;
 }
 
 .donut-center span {
-  font-size: 0.72rem;
-  color: var(--muted);
+  font-size: 0.7rem;
+  color: #94a3b8;
 }
 
 .donut-legend {
@@ -708,8 +904,8 @@ onMounted(async () => {
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 0.35rem;
-  font-size: 0.82rem;
+  gap: 0.4rem;
+  font-size: 0.8rem;
 }
 
 .donut-legend li {
@@ -718,40 +914,53 @@ onMounted(async () => {
   gap: 0.4rem;
 }
 
+.donut-legend .lbl {
+  flex: 1;
+  color: #475569;
+}
+
 .donut-legend em {
-  margin-inline-start: auto;
   font-style: normal;
-  color: var(--muted);
+  color: #94a3b8;
+  font-weight: 700;
 }
 
 .dot {
   width: 8px;
   height: 8px;
   border-radius: 999px;
+  flex-shrink: 0;
 }
 
 .ai-lead {
   margin: 0 0 0.75rem;
-  color: var(--muted);
-  font-size: 0.9rem;
+  color: #94a3b8;
+  font-size: 0.88rem;
 }
 
 .ai-shortcuts {
   display: grid;
-  gap: 0.45rem;
+  gap: 0.4rem;
   margin-bottom: 0.85rem;
 }
 
 .ai-chip {
-  padding: 0.55rem 0.75rem;
-  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.6rem 0.75rem;
+  border-radius: 14px;
   background: #f8fafc;
-  border: 1px solid var(--line);
-  color: var(--ink);
-  font-size: 0.82rem;
+  border: 1px solid #eef2f7;
+  color: #334155;
+  font-size: 0.8rem;
   text-decoration: none;
 }
 
+.ai-chip :deep(.ico) {
+  color: #14b8a6;
+}
+
 .ai-input {
   display: flex;
   gap: 0.45rem;
@@ -759,18 +968,21 @@ onMounted(async () => {
 
 .ai-input input {
   flex: 1;
-  border: 1px solid var(--line);
-  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
   padding: 0.65rem 0.8rem;
+  background: #f8fafc;
 }
 
 .ai-input button {
   width: 42px;
   border: 0;
-  border-radius: 12px;
-  background: var(--accent);
+  border-radius: 14px;
+  background: #14b8a6;
   color: #fff;
   cursor: pointer;
+  display: grid;
+  place-items: center;
 }
 
 .activity-list,
@@ -779,7 +991,7 @@ onMounted(async () => {
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 0.65rem;
+  gap: 0.7rem;
 }
 
 .activity-list li,
@@ -789,36 +1001,42 @@ onMounted(async () => {
   gap: 0.65rem;
 }
 
-.act-icon {
-  width: 36px;
-  height: 36px;
+.act-icon,
+.cust-avatar {
+  width: 38px;
+  height: 38px;
   border-radius: 12px;
-  background: #f8fafc;
+  background: #ecfdf8;
+  color: #14b8a6;
   display: grid;
   place-items: center;
+  flex-shrink: 0;
+  font-weight: 800;
 }
 
-.act-body {
+.act-body,
+.top-list div {
   flex: 1;
   min-width: 0;
   display: grid;
-  gap: 0.15rem;
+  gap: 0.12rem;
 }
 
 .act-body strong,
 .top-list strong {
-  font-size: 0.92rem;
+  font-size: 0.88rem;
 }
 
 .act-body span,
 .top-list span {
-  color: var(--muted);
-  font-size: 0.78rem;
+  color: #94a3b8;
+  font-size: 0.74rem;
 }
 
 .status-pill {
-  font-size: 0.72rem;
-  padding: 0.2rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 0.22rem 0.5rem;
   border-radius: 999px;
   white-space: nowrap;
 }
@@ -840,8 +1058,8 @@ onMounted(async () => {
 
 .mini-pipeline {
   display: grid;
-  grid-template-columns: repeat(3, minmax(140px, 1fr));
-  gap: 0.75rem;
+  grid-template-columns: repeat(3, minmax(130px, 1fr));
+  gap: 0.7rem;
   overflow-x: auto;
 }
 
@@ -849,37 +1067,41 @@ onMounted(async () => {
   display: flex;
   justify-content: space-between;
   gap: 0.5rem;
-  margin-bottom: 0.55rem;
-  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.82rem;
 }
 
 .pipe-col header span {
-  color: var(--muted);
+  color: #94a3b8;
+  background: #f1f5f9;
+  border-radius: 999px;
+  padding: 0.05rem 0.4rem;
+  font-size: 0.72rem;
 }
 
 .pipe-cards {
   display: grid;
-  gap: 0.45rem;
+  gap: 0.4rem;
 }
 
 .pipe-card {
   display: grid;
   gap: 0.15rem;
-  padding: 0.65rem 0.75rem;
-  border-radius: 12px;
+  padding: 0.65rem 0.7rem;
+  border-radius: 14px;
   background: #f8fafc;
-  border: 1px solid var(--line);
+  border: 1px solid #eef2f7;
   text-decoration: none;
   color: inherit;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
 }
 
 .rank {
-  font-size: 1.2rem;
+  font-size: 1.15rem;
 }
 
 .muted {
-  color: var(--muted);
+  color: #94a3b8;
 }
 
 .center {