diff --git a/apps/api/src/common/jalali.ts b/apps/api/src/common/jalali.ts
new file mode 100644
index 0000000..5da7973
--- /dev/null
+++ b/apps/api/src/common/jalali.ts
@@ -0,0 +1,114 @@
+const MONTH_NAMES = [
+  'فروردین',
+  'اردیبهشت',
+  'خرداد',
+  'تیر',
+  'مرداد',
+  'شهریور',
+  'مهر',
+  'آبان',
+  'آذر',
+  'دی',
+  'بهمن',
+  'اسفند',
+] as const;
+
+function div(a: number, b: number) {
+  return Math.trunc(a / b);
+}
+
+function mod(a: number, b: number) {
+  return a - Math.trunc(a / b) * b;
+}
+
+export function toJalali(gy: number, gm: number, gd: number) {
+  const gdm = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
+  const gy2 = gm > 2 ? gy + 1 : gy;
+  let days =
+    355666 +
+    365 * gy +
+    div(gy2 + 3, 4) -
+    div(gy2 + 99, 100) +
+    div(gy2 + 399, 400) +
+    gd +
+    gdm[gm - 1];
+  let jy = -1595 + 33 * div(days, 12053);
+  days %= 12053;
+  jy += 4 * div(days, 1461);
+  days %= 1461;
+  if (days > 365) {
+    jy += div(days - 1, 365);
+    days = (days - 1) % 365;
+  }
+  const jm = days < 186 ? 1 + div(days, 31) : 7 + div(days - 186, 30);
+  const jd = 1 + (days < 186 ? days % 31 : (days - 186) % 30);
+  return { jy, jm, jd };
+}
+
+export function toGregorian(jy: number, jm: number, jd: number) {
+  const jy2 = jy + 1595;
+  let days =
+    -355668 +
+    365 * jy2 +
+    div(jy2, 33) * 8 +
+    div(mod(jy2, 33) + 3, 4) +
+    jd +
+    (jm < 7 ? (jm - 1) * 31 : (jm - 7) * 30 + 186);
+  let gy = 400 * div(days, 146097);
+  days %= 146097;
+  if (days > 36524) {
+    gy += 100 * div(--days, 36524);
+    days %= 36524;
+    if (days >= 365) days += 1;
+  }
+  gy += 4 * div(days, 1461);
+  days %= 1461;
+  if (days > 365) {
+    gy += div(days - 1, 365);
+    days = (days - 1) % 365;
+  }
+  const gd = days + 1;
+  const salA = [
+    0, 31, (gy % 4 === 0 && gy % 100 !== 0) || gy % 400 === 0 ? 29 : 28,
+    31, 30, 31, 30, 31, 31, 30, 31, 30, 31,
+  ];
+  let gm = 0;
+  let dayAcc = gd;
+  for (gm = 1; gm <= 12 && dayAcc > salA[gm]; gm += 1) {
+    dayAcc -= salA[gm];
+  }
+  return { gy, gm, gd: dayAcc };
+}
+
+export function dateToJalali(d: Date) {
+  return toJalali(d.getFullYear(), d.getMonth() + 1, d.getDate());
+}
+
+export function jalaliToDate(jy: number, jm: number, jd: number): Date {
+  const { gy, gm, gd } = toGregorian(jy, jm, jd);
+  return new Date(gy, gm - 1, gd);
+}
+
+export function addJalaliMonths(jy: number, jm: number, delta: number) {
+  const idx = jy * 12 + (jm - 1) + delta;
+  return { jy: Math.floor(idx / 12), jm: (idx % 12) + 1 };
+}
+
+export function jalaliMonthName(jm: number): string {
+  return MONTH_NAMES[jm - 1] ?? '';
+}
+
+export function jalaliMonthKey(d: Date): string {
+  const { jy, jm } = dateToJalali(d);
+  return `${jy}-${String(jm).padStart(2, '0')}`;
+}
+
+export function startOfJalaliMonth(jy: number, jm: number): Date {
+  return jalaliToDate(jy, jm, 1);
+}
+
+export function endOfJalaliMonth(jy: number, jm: number): Date {
+  const next = addJalaliMonths(jy, jm, 1);
+  const startNext = jalaliToDate(next.jy, next.jm, 1);
+  return new Date(startNext.getTime() - 1);
+}
diff --git a/apps/api/src/reports/reports.controller.ts b/apps/api/src/reports/reports.controller.ts
index 60b13f8..105040a 100644
--- a/apps/api/src/reports/reports.controller.ts
+++ b/apps/api/src/reports/reports.controller.ts
@@ -24,4 +24,16 @@ export class ReportsController {
       { from: query.from, to: query.to },
     );
   }
+
+  @Get('home')
+  home(
+    @CurrentUser()
+    user: { userId: string; organizationId: string; role: string },
+  ) {
+    return this.reportsService.home({
+      userId: user.userId,
+      organizationId: user.organizationId,
+      role: user.role,
+    });
+  }
 }
diff --git a/apps/api/src/reports/reports.service.ts b/apps/api/src/reports/reports.service.ts
index b801fb0..2b1b83e 100644
--- a/apps/api/src/reports/reports.service.ts
+++ b/apps/api/src/reports/reports.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import type { ReportsDashboardDto } from '@mento/shared';
+import type { HomeDashboardDto, ReportsDashboardDto } from '@mento/shared';
 import { Prisma } from '@prisma/client';
 import { PrismaService } from '../prisma/prisma.service';
 import {
@@ -10,6 +10,13 @@ import {
   ticketAccessWhere,
 } from '../common/record-scope';
 import { decimalToBase, loadOrgRates } from '../common/currency';
+import {
+  addJalaliMonths,
+  dateToJalali,
+  endOfJalaliMonth,
+  jalaliMonthName,
+  startOfJalaliMonth,
+} from '../common/jalali';
 
 @Injectable()
 export class ReportsService {
@@ -246,6 +253,303 @@ export class ReportsService {
       peopleCreated,
     };
   }
+
+  async home(actor: Actor): Promise<HomeDashboardDto> {
+    const orgId = actor.organizationId;
+    const dealScope = ownerWhere(actor);
+    const activityScope = assigneeWhere(actor);
+    const personScope = elevated(actor.role) ? {} : { ownerId: actor.userId };
+    const rates = await loadOrgRates(this.prisma, orgId);
+    const now = new Date();
+    const { jy, jm } = dateToJalali(now);
+    const curMonthStart = startOfJalaliMonth(jy, jm);
+    const curMonthEnd = endOfJalaliMonth(jy, jm);
+    const prev = addJalaliMonths(jy, jm, -1);
+    const prevMonthStart = startOfJalaliMonth(prev.jy, prev.jm);
+    const prevMonthEnd = endOfJalaliMonth(prev.jy, prev.jm);
+
+    const todayStart = startOfDay(now);
+    const todayEnd = endOfDay(now);
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const yesterdayStart = startOfDay(yesterday);
+    const yesterdayEnd = endOfDay(yesterday);
+    const weekAgo = new Date(now);
+    weekAgo.setDate(weekAgo.getDate() - 7);
+
+    const [
+      wonDeals,
+      openDeals,
+      staleDeals,
+      peopleCur,
+      peoplePrev,
+      openActivitiesToday,
+      openActivitiesYesterday,
+      openDealsWeekAgo,
+      goals,
+      overdueCount,
+    ] = await Promise.all([
+      this.prisma.deal.findMany({
+        where: {
+          organizationId: orgId,
+          status: 'won',
+          ...dealScope,
+          updatedAt: { gte: addMonthsStart(now, -5) },
+        },
+        select: {
+          amount: true,
+          currency: true,
+          updatedAt: true,
+          source: true,
+          companyId: true,
+          personId: true,
+          company: { select: { id: true, name: true } },
+          person: { select: { id: true, firstName: true, lastName: true } },
+        },
+      }),
+      this.prisma.deal.count({
+        where: { organizationId: orgId, status: 'open', ...dealScope },
+      }),
+      this.prisma.deal.findMany({
+        where: {
+          organizationId: orgId,
+          status: 'open',
+          ...dealScope,
+          OR: [
+            { isStale: true },
+            { isRotten: true },
+            { updatedAt: { lt: daysAgo(5) } },
+          ],
+        },
+        select: {
+          id: true,
+          title: true,
+          company: { select: { name: true } },
+          person: { select: { firstName: true, lastName: true } },
+        },
+        orderBy: { updatedAt: 'asc' },
+        take: 5,
+      }),
+      this.prisma.person.count({
+        where: {
+          organizationId: orgId,
+          ...personScope,
+          createdAt: { gte: curMonthStart, lte: curMonthEnd },
+        },
+      }),
+      this.prisma.person.count({
+        where: {
+          organizationId: orgId,
+          ...personScope,
+          createdAt: { gte: prevMonthStart, lte: prevMonthEnd },
+        },
+      }),
+      this.prisma.activity.count({
+        where: {
+          organizationId: orgId,
+          ...activityScope,
+          status: 'open',
+          dueAt: { gte: todayStart, lte: todayEnd },
+        },
+      }),
+      this.prisma.activity.count({
+        where: {
+          organizationId: orgId,
+          ...activityScope,
+          dueAt: { gte: yesterdayStart, lte: yesterdayEnd },
+        },
+      }),
+      this.prisma.deal.count({
+        where: {
+          organizationId: orgId,
+          status: 'open',
+          ...dealScope,
+          updatedAt: { lte: weekAgo },
+        },
+      }),
+      this.prisma.salesGoal.findMany({
+        where: {
+          organizationId: orgId,
+          periodStart: { lte: curMonthEnd },
+          periodEnd: { gte: curMonthStart },
+        },
+        select: { targetAmount: true },
+      }),
+      this.prisma.activity.count({
+        where: {
+          organizationId: orgId,
+          ...activityScope,
+          status: 'open',
+          dueAt: { lt: now },
+        },
+      }),
+    ]);
+
+    const sumWonInRange = (start: Date, end: Date) =>
+      wonDeals
+        .filter((d) => d.updatedAt >= start && d.updatedAt <= end)
+        .reduce(
+          (acc, d) => acc + decimalToBase(d.amount, d.currency, rates),
+          0,
+        );
+
+    const salesCur = sumWonInRange(curMonthStart, curMonthEnd);
+    const salesPrev = sumWonInRange(prevMonthStart, prevMonthEnd);
+    const targetAmount = goals.reduce(
+      (acc, g) => acc + Number(g.targetAmount),
+      0,
+    );
+
+    const trendMonths: Array<{ key: string; label: string; start: Date; end: Date }> =
+      [];
+    for (let i = 4; i >= 0; i -= 1) {
+      const m = addJalaliMonths(jy, jm, -i);
+      trendMonths.push({
+        key: `${m.jy}-${String(m.jm).padStart(2, '0')}`,
+        label: jalaliMonthName(m.jm),
+        start: startOfJalaliMonth(m.jy, m.jm),
+        end: endOfJalaliMonth(m.jy, m.jm),
+      });
+    }
+
+    const salesTrend = trendMonths.map((m) => ({
+      monthKey: m.key,
+      monthLabel: m.label,
+      amount: Math.round(sumWonInRange(m.start, m.end)),
+    }));
+
+    const sourceMap = new Map<string, number>();
+    for (const d of wonDeals) {
+      const label = normalizeSource(d.source);
+      sourceMap.set(label, (sourceMap.get(label) ?? 0) + 1);
+    }
+    const sourceTotal = [...sourceMap.values()].reduce((a, b) => a + b, 0) || 1;
+    const sources = [...sourceMap.entries()]
+      .map(([label, count]) => ({
+        label,
+        count,
+        percent: Math.round((count / sourceTotal) * 1000) / 10,
+      }))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 6);
+
+    const customerMap = new Map<
+      string,
+      { name: string; dealCount: number }
+    >();
+    for (const d of wonDeals) {
+      if (d.company) {
+        const cur = customerMap.get(`c:${d.company.id}`) ?? {
+          name: d.company.name,
+          dealCount: 0,
+        };
+        cur.dealCount += 1;
+        customerMap.set(`c:${d.company.id}`, cur);
+      } else if (d.person) {
+        const name = `${d.person.firstName} ${d.person.lastName}`.trim();
+        const cur = customerMap.get(`p:${d.person.id}`) ?? {
+          name,
+          dealCount: 0,
+        };
+        cur.dealCount += 1;
+        customerMap.set(`p:${d.person.id}`, cur);
+      }
+    }
+    const topCustomers = [...customerMap.entries()]
+      .map(([id, row]) => ({
+        id: id.slice(2),
+        name: row.name,
+        dealCount: row.dealCount,
+        rank: 0,
+      }))
+      .sort((a, b) => b.dealCount - a.dealCount)
+      .slice(0, 5)
+      .map((row, index) => ({ ...row, rank: index + 1 }));
+
+    const alerts: HomeDashboardDto['alerts'] = [];
+    if (staleDeals.length) {
+      const first = staleDeals[0]!;
+      const who =
+        first.company?.name ??
+        (first.person
+          ? `${first.person.firstName} ${first.person.lastName}`.trim()
+          : first.title);
+      alerts.push({
+        key: 'stale-deal',
+        tone: 'urgent',
+        text: `${who} در مرحله تصمیم‌گیری است — امروز تماس بگیرید`,
+        link: '/pipeline',
+      });
+    }
+    if (staleDeals.length > 1) {
+      alerts.push({
+        key: 'stale-count',
+        tone: 'warning',
+        text: `${staleDeals.length} معامله بیش از ۵ روز پیگیری نشده`,
+        link: '/pipeline',
+      });
+    } else if (overdueCount > 0) {
+      alerts.push({
+        key: 'overdue',
+        tone: 'warning',
+        text: `${overdueCount} پیگیری عقب‌افتاده دارید`,
+        link: '/activities',
+      });
+    }
+    if (targetAmount > 0 && salesCur >= targetAmount) {
+      alerts.push({
+        key: 'target-ahead',
+        tone: 'success',
+        text: 'این ماه از تارگت جلوتر هستید',
+        link: '/sales/forecast',
+      });
+    } else if (targetAmount > 0 && salesCur >= targetAmount * 0.8) {
+      alerts.push({
+        key: 'target-close',
+        tone: 'info',
+        text: 'به تارگت ماه نزدیک شده‌اید',
+        link: '/sales/forecast',
+      });
+    }
+
+    return {
+      currency: rates.baseCurrency,
+      kpis: [
+        {
+          key: 'sales',
+          label: 'فروش این ماه',
+          value: Math.round(salesCur),
+          changePercent: pctChange(salesCur, salesPrev),
+          changeLabel: 'نسبت به ماه قبل',
+        },
+        {
+          key: 'customers',
+          label: 'مشتریان جدید',
+          value: peopleCur,
+          changePercent: pctChange(peopleCur, peoplePrev),
+          changeLabel: 'نسبت به ماه قبل',
+        },
+        {
+          key: 'open-deals',
+          label: 'معاملات باز',
+          value: openDeals,
+          changePercent: pctChange(openDeals, openDealsWeekAgo || openDeals),
+          changeLabel: 'نسبت به هفته قبل',
+        },
+        {
+          key: 'followups',
+          label: 'پیگیری امروز',
+          value: openActivitiesToday,
+          changePercent: pctChange(openActivitiesToday, openActivitiesYesterday),
+          changeLabel: 'نسبت به دیروز',
+        },
+      ],
+      alerts,
+      salesTrend,
+      sources,
+      topCustomers,
+    };
+  }
 }
 
 function resolveRange(from?: string, to?: string): { start: Date; end: Date } {
@@ -269,3 +573,34 @@ function startOfDay(d: Date): Date {
 function endOfDay(d: Date): Date {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
 }
+
+function daysAgo(n: number): Date {
+  const d = new Date();
+  d.setDate(d.getDate() - n);
+  return d;
+}
+
+function addMonthsStart(from: Date, deltaMonths: number): Date {
+  const { jy, jm } = dateToJalali(from);
+  const m = addJalaliMonths(jy, jm, deltaMonths);
+  return startOfJalaliMonth(m.jy, m.jm);
+}
+
+function pctChange(current: number, previous: number): number | null {
+  if (previous <= 0) return current > 0 ? 100 : null;
+  return Math.round(((current - previous) / previous) * 1000) / 10;
+}
+
+function normalizeSource(raw: string | null | undefined): string {
+  const value = raw?.trim();
+  if (!value) return 'سایر';
+  const map: Record<string, string> = {
+    referral: 'معرفی دوستان',
+    website: 'وب‌سایت',
+    social: 'شبکه‌های اجتماعی',
+    ads: 'تبلیغات',
+    instagram: 'شبکه‌های اجتماعی',
+    google: 'تبلیغات',
+  };
+  return map[value.toLowerCase()] ?? value;
+}
diff --git a/apps/web/src/layouts/AppLayout.vue b/apps/web/src/layouts/AppLayout.vue
index 08956f7..abbeb81 100644
--- a/apps/web/src/layouts/AppLayout.vue
+++ b/apps/web/src/layouts/AppLayout.vue
@@ -3,7 +3,12 @@ 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 type { NotificationDto, NotificationsListDto } from '@mento/shared';
+import { formatJalaliLong } from '@/lib/jalali';
+import type {
+  ActivitySummaryDto,
+  NotificationDto,
+  NotificationsListDto,
+} from '@mento/shared';
 import { USER_ROLE_LABELS, canManageSettings, canViewAllRecords } from '@/lib/roles';
 
 const auth = useAuthStore();
@@ -17,23 +22,24 @@ const showOwnRecordsBanner = computed(
 const roleLabel = computed(() =>
   auth.user?.role ? USER_ROLE_LABELS[auth.user.role] : '',
 );
+const userInitials = computed(() => {
+  const parts = auth.user?.fullName?.trim().split(/\s+/) ?? [];
+  if (!parts.length) return 'م';
+  return parts
+    .slice(0, 2)
+    .map((p) => p[0])
+    .join('');
+});
+const todayLabel = computed(() => formatJalaliLong(new Date()));
 
 const salesOpen = ref(false);
 const moreOpen = ref(false);
 const settingsOpen = ref(false);
+const globalSearch = ref('');
+const activityBadge = ref(0);
 
-const salesPaths = [
-  '/quotes',
-  '/invoices',
-  '/sales/forecast',
-  '/reports',
-];
-const morePaths = [
-  '/activities/calendar',
-  '/projects',
-  '/project-cards',
-  '/loyalty',
-];
+const salesPaths = ['/quotes', '/invoices', '/sales/forecast', '/reports'];
+const morePaths = ['/activities/calendar', '/projects', '/project-cards', '/loyalty'];
 const settingsPaths = [
   '/settings/team',
   '/settings/automations',
@@ -64,10 +70,7 @@ watch(
   { immediate: true },
 );
 
-function toggleGroup(
-  key: 'sales' | 'more' | 'settings',
-  event: Event,
-) {
+function toggleGroup(key: 'sales' | 'more' | 'settings', event: Event) {
   event.preventDefault();
   event.stopPropagation();
   if (key === 'sales') salesOpen.value = !salesOpen.value;
@@ -99,7 +102,7 @@ function onLogout() {
   router.push({ name: 'login' });
 }
 
-async function refresh() {
+async function refreshNotifs() {
   if (!auth.isAuthenticated) return;
   loading.value = true;
   try {
@@ -115,6 +118,15 @@ async function refresh() {
   }
 }
 
+async function loadActivityBadge() {
+  try {
+    const { data } = await api.get<ActivitySummaryDto>('/activities/summary');
+    activityBadge.value = data.todayCount + data.overdueCount;
+  } catch {
+    activityBadge.value = 0;
+  }
+}
+
 async function markRead(item: NotificationDto) {
   if (!item.readAt) {
     await api.patch(`/notifications/${item.id}/read`);
@@ -145,7 +157,7 @@ function toggleMenu() {
 function toggleNotif() {
   menuOpen.value = false;
   notifOpen.value = !notifOpen.value;
-  if (notifOpen.value) void refresh();
+  if (notifOpen.value) void refreshNotifs();
 }
 
 function formatTime(iso: string) {
@@ -159,6 +171,12 @@ function formatTime(iso: string) {
   }
 }
 
+function submitSearch() {
+  const q = globalSearch.value.trim();
+  if (!q) return;
+  void router.push({ name: 'contacts', query: { q } });
+}
+
 watch(menuOpen, (open) => {
   document.body.style.overflow = open || notifOpen.value ? 'hidden' : '';
 });
@@ -176,9 +194,10 @@ watch(
 );
 
 onMounted(() => {
-  void refresh();
+  void refreshNotifs();
+  void loadActivityBadge();
   pollTimer = setInterval(() => {
-    void refresh();
+    void refreshNotifs();
   }, 45000);
 });
 
@@ -190,29 +209,6 @@ onUnmounted(() => {
 
 <template>
   <div class="shell" :class="{ 'menu-open': menuOpen }">
-    <header class="topbar">
-      <button
-        class="icon-btn"
-        type="button"
-        :aria-expanded="menuOpen"
-        aria-controls="app-sidebar"
-        aria-label="منو"
-        @click="toggleMenu"
-      >
-        <span class="burger" :class="{ open: menuOpen }" />
-      </button>
-
-      <div class="top-brand">
-        <span class="mark">M</span>
-        <strong>منتو</strong>
-      </div>
-
-      <button class="icon-btn notif-top" type="button" aria-label="اعلان‌ها" @click="toggleNotif">
-        اعلان
-        <span v-if="hasUnread" class="badge">{{ unreadCount }}</span>
-      </button>
-    </header>
-
     <div
       v-if="menuOpen"
       class="backdrop"
@@ -226,18 +222,9 @@ onUnmounted(() => {
           <span class="mark">M</span>
           <div>
             <strong>منتو</strong>
-            <small>Mento CRM</small>
+            <small>by Mentech</small>
           </div>
         </div>
-        <button
-          class="notif-icon-btn"
-          type="button"
-          aria-label="اعلان‌ها"
-          @click="toggleNotif"
-        >
-          <span class="bell" aria-hidden="true" />
-          <span v-if="hasUnread" class="badge">{{ unreadCount }}</span>
-        </button>
       </div>
 
       <div class="drawer-head mobile-only">
@@ -245,7 +232,7 @@ onUnmounted(() => {
           <span class="mark">M</span>
           <div>
             <strong>منتو</strong>
-            <small>Mento CRM</small>
+            <small>by Mentech</small>
           </div>
         </div>
         <button class="icon-btn ghost" type="button" aria-label="بستن منو" @click="closeMenu">
@@ -255,9 +242,21 @@ onUnmounted(() => {
 
       <nav class="side-nav">
         <div class="nav-primary">
-          <RouterLink to="/" @click="closeMenu">خانه امروز</RouterLink>
+          <RouterLink to="/" class="nav-item" @click="closeMenu">
+            <span class="nav-icon" aria-hidden="true">⌂</span>
+            <span>داشبورد</span>
+          </RouterLink>
+          <RouterLink to="/contacts" class="nav-item" @click="closeMenu">
+            <span class="nav-icon" aria-hidden="true">👥</span>
+            <span>مشتریان</span>
+          </RouterLink>
+          <RouterLink to="/pipeline" class="nav-item" @click="closeMenu">
+            <span class="nav-icon" aria-hidden="true">💼</span>
+            <span>معاملات</span>
+          </RouterLink>
           <RouterLink
             to="/activities"
+            class="nav-item"
             active-class=""
             exact-active-class=""
             :class="{
@@ -269,12 +268,18 @@ onUnmounted(() => {
             }"
             @click="closeMenu"
           >
-            فعالیت‌ها
+            <span class="nav-icon" aria-hidden="true">☑</span>
+            <span>فعالیت‌ها</span>
+            <span v-if="activityBadge" class="nav-badge">{{ activityBadge }}</span>
+          </RouterLink>
+          <RouterLink to="/settings/products" class="nav-item" @click="closeMenu">
+            <span class="nav-icon" aria-hidden="true">📦</span>
+            <span>محصولات</span>
+          </RouterLink>
+          <RouterLink to="/reports" class="nav-item" @click="closeMenu">
+            <span class="nav-icon" aria-hidden="true">📊</span>
+            <span>گزارش‌ها</span>
           </RouterLink>
-          <RouterLink to="/pipeline" @click="closeMenu">کاریز فروش</RouterLink>
-          <RouterLink to="/contacts" @click="closeMenu">اشخاص و شرکت‌ها</RouterLink>
-          <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
-          <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
         </div>
 
         <div class="nav-group" :class="{ open: salesOpen, active: salesActive }">
@@ -291,7 +296,8 @@ onUnmounted(() => {
             <RouterLink to="/quotes" @click="closeMenu">پیش‌فاکتورها</RouterLink>
             <RouterLink to="/invoices" @click="closeMenu">فاکتورها</RouterLink>
             <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
-            <RouterLink to="/reports" @click="closeMenu">گزارشات</RouterLink>
+            <RouterLink to="/notes" @click="closeMenu">یادداشت‌ها</RouterLink>
+            <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
           </div>
         </div>
 
@@ -331,7 +337,6 @@ onUnmounted(() => {
             <RouterLink to="/settings/automations" @click="closeMenu">اتوماسیون</RouterLink>
             <RouterLink to="/settings/lead-forms" @click="closeMenu">فرم‌ساز سرنخ</RouterLink>
             <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
-            <RouterLink to="/settings/products" @click="closeMenu">محصولات</RouterLink>
             <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
             <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
           </div>
@@ -343,54 +348,100 @@ onUnmounted(() => {
       </p>
 
       <div class="sidebar-foot">
-        <p class="user-line">
-          <span class="user-name">{{ auth.user?.fullName }}</span>
-          <span v-if="roleLabel" class="role-pill">{{ roleLabel }}</span>
-        </p>
+        <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">
+            <strong>{{ auth.user?.fullName }}</strong>
+            <span>{{ roleLabel || 'کاربر' }}</span>
+          </div>
+          <span class="online-dot" title="آنلاین" />
+        </div>
+
         <button class="btn btn-ghost logout" type="button" @click="onLogout">خروج</button>
       </div>
     </aside>
 
-    <div v-if="notifOpen" class="notif-layer">
-      <div class="notif-backdrop" @click="closeNotif" />
-      <div class="notif-panel" role="dialog" aria-label="اعلان‌ها">
-        <header class="notif-head">
-          <strong>اعلان‌ها</strong>
-          <div class="notif-head-actions">
-            <button
-              v-if="hasUnread"
-              class="linkish"
-              type="button"
-              @click="markAll"
-            >
-              همه خوانده شد
-            </button>
-            <button class="icon-btn ghost" type="button" aria-label="بستن" @click="closeNotif">
-              ✕
-            </button>
-          </div>
-        </header>
-        <p v-if="loading && !items.length" class="muted">در حال بارگذاری…</p>
-        <ul v-else-if="items.length" class="notif-list">
-          <li
-            v-for="item in items"
-            :key="item.id"
-            :class="{ unread: !item.readAt }"
-          >
-            <button type="button" @click="markRead(item)">
-              <span class="title">{{ item.title }}</span>
-              <span v-if="item.body" class="body">{{ item.body }}</span>
-              <span class="time">{{ formatTime(item.createdAt) }}</span>
-            </button>
-          </li>
-        </ul>
-        <p v-else class="muted">اعلانی نیست.</p>
-      </div>
-    </div>
+    <div class="workspace">
+      <header class="topbar mobile-only">
+        <button
+          class="icon-btn"
+          type="button"
+          :aria-expanded="menuOpen"
+          aria-controls="app-sidebar"
+          aria-label="منو"
+          @click="toggleMenu"
+        >
+          <span class="burger" :class="{ open: menuOpen }" />
+        </button>
+        <div class="top-brand">
+          <span class="mark">M</span>
+          <strong>منتو</strong>
+        </div>
+        <button class="icon-btn notif-top" type="button" aria-label="اعلان‌ها" @click="toggleNotif">
+          🔔
+          <span v-if="hasUnread" class="badge">{{ unreadCount }}</span>
+        </button>
+      </header>
 
-    <main class="content">
-      <RouterView />
-    </main>
+      <header class="desktop-topbar desktop-only">
+        <form class="global-search" @submit.prevent="submitSearch">
+          <span class="search-icon" aria-hidden="true">🔍</span>
+          <input
+            v-model="globalSearch"
+            type="search"
+            placeholder="جستجو در مشتریان، معاملات و…"
+          />
+        </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>
+          </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>
+        </div>
+      </header>
+
+      <div v-if="notifOpen" class="notif-layer">
+        <div class="notif-backdrop" @click="closeNotif" />
+        <div class="notif-panel" role="dialog" aria-label="اعلان‌ها">
+          <header class="notif-head">
+            <strong>اعلان‌ها</strong>
+            <div class="notif-head-actions">
+              <button v-if="hasUnread" class="linkish" type="button" @click="markAll">
+                همه خوانده شد
+              </button>
+              <button class="icon-btn ghost" type="button" aria-label="بستن" @click="closeNotif">
+                ✕
+              </button>
+            </div>
+          </header>
+          <p v-if="loading && !items.length" class="muted">در حال بارگذاری…</p>
+          <ul v-else-if="items.length" class="notif-list">
+            <li v-for="item in items" :key="item.id" :class="{ unread: !item.readAt }">
+              <button type="button" @click="markRead(item)">
+                <span class="title">{{ item.title }}</span>
+                <span v-if="item.body" class="body">{{ item.body }}</span>
+                <span class="time">{{ formatTime(item.createdAt) }}</span>
+              </button>
+            </li>
+          </ul>
+          <p v-else class="muted">اعلانی نیست.</p>
+        </div>
+      </div>
+
+      <main class="content">
+        <RouterView />
+      </main>
+    </div>
   </div>
 </template>
 
@@ -400,6 +451,13 @@ onUnmounted(() => {
   grid-template-columns: 260px minmax(0, 1fr);
   min-height: 100vh;
   min-height: 100dvh;
+  background: var(--bg);
+}
+
+.workspace {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .topbar {
@@ -418,152 +476,111 @@ onUnmounted(() => {
   position: sticky;
   top: 0;
   align-self: start;
-  background: #13201b;
-  color: #edf5f1;
-  padding: 1.4rem;
+  background: #fff;
+  color: var(--ink);
+  padding: 1.25rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 1.1rem;
+  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 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
+.brand-row,
+.drawer-head {
+  flex-shrink: 0;
 }
 
 .brand {
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 0.75rem;
   min-width: 0;
 }
 
 .mark {
   width: 42px;
   height: 42px;
-  border-radius: 12px;
+  border-radius: 14px;
   display: grid;
   place-items: center;
-  background: var(--accent);
-  font-weight: 700;
+  background: linear-gradient(135deg, #2eb29b, #0d9488);
+  color: #fff;
+  font-weight: 800;
   flex-shrink: 0;
 }
 
 .brand small {
   display: block;
-  color: #9fb3aa;
+  color: var(--muted);
+  font-size: 0.78rem;
 }
 
-.notif-icon-btn {
-  position: relative;
-  flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.06);
-  border-radius: 10px;
-  cursor: pointer;
-  display: grid;
-  place-items: center;
-  color: #edf5f1;
-  padding: 0;
-}
-
-.notif-icon-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.bell {
-  width: 16px;
-  height: 16px;
-  border: 1.7px solid currentColor;
-  border-radius: 50% 50% 45% 45%;
-  border-bottom: 0;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.bell::before {
-  content: '';
-  position: absolute;
-  top: -3px;
-  left: 50%;
-  width: 4px;
-  height: 4px;
-  border: 1.5px solid currentColor;
-  border-radius: 50%;
-  transform: translateX(-50%);
-  box-sizing: border-box;
-}
-
-.bell::after {
-  content: '';
-  position: absolute;
-  bottom: -3px;
-  left: 50%;
-  width: 10px;
-  height: 2px;
-  background: currentColor;
-  border-radius: 2px;
-  transform: translateX(-50%);
-}
-
-.notif-icon-btn .badge {
-  position: absolute;
-  top: -5px;
-  left: -5px;
-  min-width: 1.15rem;
-  height: 1.15rem;
-  font-size: 0.68rem;
-}
-
-nav,
 .side-nav {
   display: grid;
   gap: 0.35rem;
   overflow-y: auto;
   min-height: 0;
   flex: 1;
-  padding-left: 0.15rem;
-  margin-left: -0.15rem;
   scrollbar-width: none;
-  -ms-overflow-style: none;
 }
 
 .side-nav::-webkit-scrollbar {
-  width: 0;
-  height: 0;
   display: none;
 }
 
 .nav-primary,
 .nav-sub {
   display: grid;
-  gap: 0.28rem;
+  gap: 0.25rem;
 }
 
+.nav-item,
 .side-nav a {
-  padding: 0.65rem 0.85rem;
-  border-radius: 10px;
-  color: #d7e4de;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.72rem 0.85rem;
+  border-radius: 14px;
+  color: #475569;
   text-decoration: none;
+  font-weight: 500;
 }
 
+.nav-icon {
+  width: 1.25rem;
+  text-align: center;
+  opacity: 0.85;
+}
+
+.nav-item.router-link-active,
 .side-nav a.router-link-active {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.nav-badge {
+  margin-inline-start: auto;
+  min-width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 999px;
+  background: var(--accent);
   color: #fff;
+  font-size: 0.72rem;
+  display: grid;
+  place-items: center;
+  padding: 0 0.35rem;
 }
 
 .nav-group {
   display: grid;
-  gap: 0.2rem;
-  margin-top: 0.25rem;
+  gap: 0.15rem;
+  margin-top: 0.35rem;
 }
 
 .nav-group-btn {
@@ -574,24 +591,19 @@ nav,
   gap: 0.5rem;
   border: 0;
   background: transparent;
-  color: #9fb3aa;
+  color: var(--muted);
   font: inherit;
   font-size: 0.82rem;
   font-weight: 600;
-  letter-spacing: 0.01em;
   padding: 0.55rem 0.85rem;
-  border-radius: 10px;
+  border-radius: 12px;
   cursor: pointer;
   text-align: right;
 }
 
 .nav-group-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
-  color: #d7e4de;
-}
-
-.nav-group.active > .nav-group-btn {
-  color: #c5ddd3;
+  background: #f8fafc;
+  color: var(--ink);
 }
 
 .chev {
@@ -601,8 +613,6 @@ nav,
   border-bottom: 1.5px solid currentColor;
   transform: rotate(45deg);
   transition: transform 0.15s ease;
-  flex-shrink: 0;
-  opacity: 0.85;
 }
 
 .nav-group.open .chev {
@@ -611,8 +621,8 @@ nav,
 
 .nav-sub {
   padding: 0.1rem 0 0.25rem 0.35rem;
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
-  margin-right: 0.85rem;
+  border-inline-end: 1px solid var(--line);
+  margin-inline-end: 0.85rem;
 }
 
 .nav-sub a {
@@ -620,83 +630,174 @@ nav,
   font-size: 0.92rem;
 }
 
-nav a {
-  padding: 0.7rem 0.85rem;
-  border-radius: 10px;
-  color: #d7e4de;
-}
-
-nav a.router-link-active {
-  background: rgba(255, 255, 255, 0.08);
-  color: #fff;
-}
-
 .scope-banner {
   margin: 0;
   padding: 0.55rem 0.75rem;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.06);
-  color: #9fb3aa;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: var(--muted);
   font-size: 0.78rem;
-  line-height: 1.45;
 }
 
 .sidebar-foot {
   margin-top: auto;
   display: grid;
-  gap: 0.65rem;
+  gap: 0.75rem;
   flex-shrink: 0;
 }
 
-.brand-row,
-.drawer-head {
-  flex-shrink: 0;
-}
-
-.user-line {
-  margin: 0;
+.promo-card {
   display: flex;
   align-items: center;
-  gap: 0.45rem;
-  flex-wrap: wrap;
-  min-width: 0;
+  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;
 }
 
-.user-name {
-  color: #d7e4de;
-  font-size: 0.92rem;
-  font-weight: 600;
+.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);
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.profile-meta {
+  min-width: 0;
+  display: grid;
+  gap: 0.1rem;
+}
+
+.profile-meta strong {
+  font-size: 0.9rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 0;
 }
 
-.role-pill {
-  flex-shrink: 0;
-  font-size: 0.72rem;
-  color: #9fb3aa;
-  border: 1px solid rgba(255, 255, 255, 0.14);
+.profile-meta span {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.online-dot {
+  margin-inline-start: auto;
+  width: 10px;
+  height: 10px;
   border-radius: 999px;
-  padding: 0.12rem 0.45rem;
-  line-height: 1.3;
+  background: #22c55e;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
+  flex-shrink: 0;
 }
 
 .logout {
-  color: #edf5f1;
-  border-color: rgba(255, 255, 255, 0.18);
+  width: 100%;
+}
+
+.desktop-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.5rem 0.75rem;
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: rgba(244, 247, 248, 0.92);
+  backdrop-filter: blur(8px);
+}
+
+.global-search {
+  flex: 1;
+  max-width: 520px;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0.55rem 1rem;
+  box-shadow: var(--shadow);
+}
+
+.global-search input {
+  border: 0;
+  background: transparent;
+  width: 100%;
+  outline: none;
+}
+
+.search-icon {
+  opacity: 0.55;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.top-icon {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: #fff;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  font-size: 1rem;
+}
+
+.date-chip {
+  padding: 0.55rem 0.85rem;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.85rem;
+  white-space: nowrap;
 }
 
 .badge {
-  min-width: 1.4rem;
-  height: 1.4rem;
+  position: absolute;
+  top: -4px;
+  inset-inline-start: -4px;
+  min-width: 1.15rem;
+  height: 1.15rem;
   border-radius: 999px;
-  background: #e11d48;
+  background: #ef4444;
   color: #fff;
-  font-size: 0.75rem;
+  font-size: 0.68rem;
   display: grid;
   place-items: center;
-  padding: 0 0.35rem;
+  padding: 0 0.3rem;
 }
 
 .notif-layer {
@@ -705,37 +806,35 @@ nav a.router-link-active {
   z-index: 40;
   display: grid;
   place-items: start end;
-  padding: 4.5rem 0.75rem 1rem;
+  padding: 5rem 1rem 1rem;
   pointer-events: none;
 }
 
 .notif-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(10, 18, 15, 0.35);
+  background: rgba(15, 23, 42, 0.25);
   pointer-events: auto;
 }
 
 .notif-panel {
   position: relative;
-  width: min(360px, calc(100vw - 1.5rem));
+  width: min(360px, calc(100vw - 2rem));
   max-height: min(70vh, 480px);
   overflow: auto;
-  background: #1b2a24;
-  color: #edf5f1;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 14px;
+  background: #fff;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 18px;
   padding: 0.85rem;
-  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
   pointer-events: auto;
-  z-index: 1;
 }
 
 .notif-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 0.5rem;
   margin-bottom: 0.55rem;
 }
 
@@ -748,7 +847,7 @@ nav a.router-link-active {
 .linkish {
   border: 0;
   background: transparent;
-  color: #9fd4c0;
+  color: var(--accent);
   cursor: pointer;
   font: inherit;
   font-size: 0.82rem;
@@ -766,9 +865,8 @@ nav a.router-link-active {
   width: 100%;
   text-align: right;
   border: 0;
-  background: rgba(255, 255, 255, 0.04);
-  color: inherit;
-  border-radius: 10px;
+  background: #f8fafc;
+  border-radius: 12px;
   padding: 0.65rem 0.7rem;
   cursor: pointer;
   display: grid;
@@ -777,7 +875,7 @@ nav a.router-link-active {
 }
 
 .notif-list li.unread button {
-  background: rgba(15, 92, 99, 0.35);
+  background: var(--accent-soft);
 }
 
 .title {
@@ -788,35 +886,30 @@ nav a.router-link-active {
 .body,
 .time,
 .muted {
-  color: #9fb3aa;
+  color: var(--muted);
   font-size: 0.8rem;
 }
 
 .content {
-  padding: 1.5rem;
+  padding: 0 1.5rem 1.5rem;
   min-width: 0;
   overflow-x: clip;
 }
 
 .icon-btn {
-  border: 1px solid transparent;
-  background: rgba(255, 255, 255, 0.08);
-  color: inherit;
-  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: #fff;
+  border-radius: 12px;
   min-width: 42px;
   height: 42px;
-  padding: 0 0.65rem;
   cursor: pointer;
-  font: inherit;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.35rem;
 }
 
 .icon-btn.ghost {
   background: transparent;
-  border-color: rgba(255, 255, 255, 0.14);
 }
 
 .burger {
@@ -825,7 +918,6 @@ nav a.router-link-active {
   background: currentColor;
   position: relative;
   display: block;
-  transition: background 0.15s ease;
 }
 
 .burger::before,
@@ -835,7 +927,6 @@ nav a.router-link-active {
   inset-inline: 0;
   height: 2px;
   background: currentColor;
-  transition: transform 0.15s ease;
 }
 
 .burger::before {
@@ -861,7 +952,6 @@ nav a.router-link-active {
 @media (max-width: 900px) {
   .shell {
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto 1fr;
   }
 
   .topbar {
@@ -869,32 +959,18 @@ nav a.router-link-active {
     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;
-    padding: 0.7rem 0.85rem;
-    padding-top: max(0.7rem, env(safe-area-inset-top));
-    background: #13201b;
-    color: #edf5f1;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
 
   .top-brand {
     display: flex;
     align-items: center;
     gap: 0.55rem;
-    min-width: 0;
-  }
-
-  .top-brand .mark {
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
-    font-size: 0.9rem;
-  }
-
-  .notif-top {
-    font-size: 0.85rem;
   }
 
   .desktop-only {
@@ -906,16 +982,16 @@ nav a.router-link-active {
   }
 
   .drawer-head {
+    display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.75rem;
   }
 
   .backdrop {
     display: block;
     position: fixed;
     inset: 0;
-    background: rgba(10, 18, 15, 0.45);
+    background: rgba(15, 23, 42, 0.35);
     z-index: 34;
   }
 
@@ -925,25 +1001,18 @@ nav a.router-link-active {
     bottom: 0;
     inset-inline-start: 0;
     width: min(300px, 86vw);
-    height: 100vh;
-    height: 100dvh;
     z-index: 35;
-    /* پنل RTL است؛ منو از سمت راست می‌آید */
     transform: translateX(110%);
     transition: transform 0.2s ease;
-    box-shadow: none;
-    padding-top: max(1rem, env(safe-area-inset-top));
-    overflow: hidden;
   }
 
   .sidebar.open {
     transform: translateX(0);
-    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
   }
 
   .content {
     padding: 1rem 0.85rem 1.4rem;
-    padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
   }
 
   .notif-layer {
@@ -953,8 +1022,6 @@ nav a.router-link-active {
 
   .notif-panel {
     width: 100%;
-    max-height: min(75vh, 560px);
-    margin-inline: auto;
   }
 }
 </style>
diff --git a/apps/web/src/styles/main.css b/apps/web/src/styles/main.css
index 45855ab..1219427 100644
--- a/apps/web/src/styles/main.css
+++ b/apps/web/src/styles/main.css
@@ -1,14 +1,14 @@
 :root {
-  --bg: #eef2f0;
+  --bg: #f4f7f8;
   --surface: #ffffff;
-  --ink: #17211c;
-  --muted: #5b6b63;
-  --line: #d5ddd8;
-  --accent: #0f6b5c;
-  --accent-soft: #d8efe9;
+  --ink: #0f172a;
+  --muted: #64748b;
+  --line: #e2e8f0;
+  --accent: #0d9488;
+  --accent-soft: #ccfbf1;
   --danger: #b42318;
-  --shadow: 0 10px 30px rgba(23, 33, 28, 0.06);
-  --radius: 14px;
+  --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+  --radius: 18px;
   --font: "Vazirmatn", Tahoma, sans-serif;
 }
 
@@ -31,9 +31,7 @@ body {
   margin: 0;
   font-family: var(--font);
   color: var(--ink);
-  background:
-    radial-gradient(circle at top left, rgba(15, 107, 92, 0.08), transparent 28%),
-    linear-gradient(180deg, #f7faf8 0%, var(--bg) 100%);
+  background: var(--bg);
   overflow-x: clip;
 }
 
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index dbfec15..6f984dd 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -1,336 +1,916 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
-import axios from 'axios';
 import { useAuthStore } from '@/stores/auth';
 import { api } from '@/lib/api';
-import { formatMoney as formatMoneyLib } from '@/lib/money';
+import { formatMoney } from '@/lib/money';
+import { toFaDigits } from '@/lib/jalali';
 import type {
   ActivityDto,
-  ActivitySummaryDto,
-  HealthResponse,
-  OrganizationDto,
-  SalesForecastDto,
+  HomeDashboardDto,
+  PaginatedResponse,
+  PipelineBoardDto,
 } from '@mento/shared';
 
 const auth = useAuthStore();
 const router = useRouter();
-const org = ref<OrganizationDto | null>(null);
-const health = ref<HealthResponse | null>(null);
-const summary = ref<ActivitySummaryDto | null>(null);
-const forecast = ref<SalesForecastDto | null>(null);
-const orgError = ref('');
-const apiError = ref('');
 
-const typeLabel: Record<ActivityDto['type'], string> = {
+const loading = ref(true);
+const home = ref<HomeDashboardDto | null>(null);
+const activities = ref<ActivityDto[]>([]);
+const board = ref<PipelineBoardDto | null>(null);
+const askQuery = ref('');
+
+const firstName = computed(() => {
+  const parts = auth.user?.fullName?.trim().split(/\s+/) ?? [];
+  return parts[0] ?? 'کاربر';
+});
+
+const greeting = computed(() => {
+  const hour = new Date().getHours();
+  if (hour < 12) return 'صبح بخیر';
+  if (hour < 17) return 'ظهر بخیر';
+  return 'عصر بخیر';
+});
+
+const kpiIcons: Record<string, string> = {
+  sales: '💰',
+  customers: '👤',
+  'open-deals': '💎',
+  followups: '📋',
+};
+
+const aiShortcuts = [
+  { label: 'خلاصه مشتری شرکت آریانا را بده', to: '/contacts' },
+  { label: 'متن پیگیری برای مشتری بفرست', to: '/notes' },
+  { label: 'گزارش فروش این هفته را نشان بده', to: '/reports' },
+  { label: 'معاملات در خطر را لیست کن', to: '/pipeline' },
+];
+
+const pipelineStages = computed(() => board.value?.stages.slice(0, 3) ?? []);
+
+const trendPoints = 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) => {
+      const x = pad + (i / Math.max(trend.length - 1, 1)) * (w - pad * 2);
+      const y = h - pad - (p.amount / max) * (h - pad * 2);
+      return `${x},${y}`;
+    })
+    .join(' ');
+});
+
+const trendArea = computed(() => {
+  const pts = trendPoints.value;
+  if (!pts) return '';
+  const first = pts.split(' ')[0]?.split(',');
+  const last = pts.split(' ').slice(-1)[0]?.split(',');
+  if (!first || !last) return '';
+  return `${pts} ${last[0]},132 ${first[0]},132`;
+});
+
+const donutSegments = computed(() => {
+  const sources = home.value?.sources ?? [];
+  if (!sources.length) return [];
+  let offset = 0;
+  const colors = ['#2eb29b', '#38bdf8', '#818cf8', '#fbbf24', '#fb7185', '#94a3b8'];
+  return sources.map((s, i) => {
+    const seg = { ...s, color: colors[i % colors.length], offset };
+    offset += s.percent;
+    return seg;
+  });
+});
+
+const typeLabel: Record<string, string> = {
   call: 'تماس',
   meeting: 'جلسه',
   task: 'وظیفه',
   note: 'یادداشت',
 };
 
-function formatDue(value: string | null) {
-  if (!value) return 'بدون موعد';
+function formatWhen(value: string | null) {
+  if (!value) return '';
   try {
     return new Intl.DateTimeFormat('fa-IR', {
-      hour: '2-digit',
-      minute: '2-digit',
+      dateStyle: 'medium',
+      timeStyle: 'short',
     }).format(new Date(value));
   } catch {
     return value;
   }
 }
 
-function formatMoney(amount: number) {
-  return formatMoneyLib(amount, forecast.value?.currency || 'IRR');
+function activityStatus(act: ActivityDto) {
+  if (act.status === 'done') return { label: 'انجام شد', tone: 'done' };
+  if (act.dueAt && new Date(act.dueAt) < new Date()) {
+    return { label: 'عقب‌افتاده', tone: 'late' };
+  }
+  return { label: 'در انتظار پاسخ', tone: 'pending' };
 }
 
-async function complete(id: string) {
-  try {
-    await api.patch(`/activities/${id}/complete`);
-    const { data } = await api.get<ActivitySummaryDto>('/activities/summary');
-    summary.value = data;
-  } catch {
-    // ignore brief failure on home
+function activityIcon(type: string) {
+  if (type === 'call') return '📞';
+  if (type === 'meeting') return '📅';
+  if (type === 'task') return '✅';
+  return '📝';
+}
+
+function trophy(rank: number) {
+  if (rank === 1) return '🥇';
+  if (rank === 2) return '🥈';
+  if (rank === 3) return '🥉';
+  return `#${toFaDigits(rank)}`;
+}
+
+function alertIcon(tone: string) {
+  if (tone === 'urgent') return '🔥';
+  if (tone === 'warning') return '⚠';
+  if (tone === 'success') return '📈';
+  return 'ℹ';
+}
+
+function formatKpiValue(key: string, value: number) {
+  if (key === 'sales') {
+    return formatMoney(value, home.value?.currency ?? 'IRR');
   }
+  return toFaDigits(value);
+}
+
+function formatChange(value: number | null) {
+  if (value == null) return '';
+  const sign = value >= 0 ? '+' : '';
+  return `${sign}${toFaDigits(value)}٪`;
+}
+
+function submitAsk() {
+  const q = askQuery.value.trim();
+  if (!q) return;
+  void router.push({ name: 'notes', query: { q } });
 }
 
 onMounted(async () => {
+  loading.value = true;
   try {
-    const { data } = await api.get<HealthResponse>('/health');
-    health.value = data;
+    const [homeRes, actRes, boardRes] = await Promise.all([
+      api.get<HomeDashboardDto>('/reports/home'),
+      api.get<PaginatedResponse<ActivityDto>>('/activities', {
+        params: { limit: 5, page: 1 },
+      }),
+      api.get<PipelineBoardDto>('/pipelines/board'),
+    ]);
+    home.value = homeRes.data;
+    activities.value = actRes.data.items;
+    board.value = boardRes.data;
   } catch {
-    apiError.value = 'ارتباط با API برقرار نشد. سرویس Nest را چک کنید.';
-  }
-
-  try {
-    const { data } = await api.get<OrganizationDto>('/organizations/current');
-    org.value = data;
-  } catch (e) {
-    if (axios.isAxiosError(e) && e.response?.status === 401) {
-      auth.logout();
-      await router.replace({ name: 'login', query: { redirect: '/' } });
-      return;
-    }
-    orgError.value = apiError.value
-      ? 'به‌خاطر قطع بودن API بارگذاری نشد.'
-      : 'بارگذاری سازمان ناموفق بود.';
-  }
-
-  try {
-    const { data } = await api.get<ActivitySummaryDto>('/activities/summary');
-    summary.value = data;
-  } catch {
-    // home still works without activities
-  }
-
-  try {
-    const { data } = await api.get<SalesForecastDto>('/sales/forecast');
-    forecast.value = data;
-  } catch {
-    // optional card
+    home.value = null;
+  } finally {
+    loading.value = false;
   }
 });
 </script>
 
 <template>
-  <section class="home">
-    <header>
-      <div>
-        <p class="eyebrow">خانه امروز</p>
-        <h1>سلام {{ auth.user?.fullName }}</h1>
-        <p class="lead">
-          کارهای امروز را ببینید و یادداشت‌های سریع را در Smart Notes ثبت کنید.
-        </p>
+  <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>
+        </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="از منتو بپرس…" />
+          <kbd>⌘K</kbd>
+        </form>
       </div>
-      <div class="actions">
-        <RouterLink class="btn btn-ghost" :to="{ name: 'sales-forecast' }"
-          >هدف و پیش‌بینی</RouterLink
-        >
-        <RouterLink class="btn btn-ghost" :to="{ name: 'activities-calendar' }"
-          >تقویم</RouterLink
-        >
-        <RouterLink class="btn" :to="{ name: 'activity-new' }">فعالیت جدید</RouterLink>
+
+      <div class="hero-bot" aria-hidden="true">
+        <div class="bot-bubble">من دستیار فروش هوشمند سیستم هستم</div>
+        <div class="bot-head">
+          <span class="bot-eye" />
+          <span class="bot-eye" />
+          <span class="bot-badge">AI</span>
+        </div>
       </div>
     </header>
 
-    <div class="grid">
-      <article>
-        <h2>سازمان</h2>
-        <p v-if="org">{{ org.name }} <span>({{ org.slug }})</span></p>
-        <p v-else-if="orgError" class="error">{{ orgError }}</p>
-        <p v-else class="muted">در حال بارگذاری…</p>
-      </article>
-      <article>
-        <h2>وضعیت API</h2>
-        <p v-if="health" class="ok">{{ health.status }} — {{ health.service }}</p>
-        <p v-else-if="apiError" class="error">{{ apiError }}</p>
-        <p v-else class="muted">در حال بررسی…</p>
-      </article>
+    <p v-if="loading" class="muted center">در حال بارگذاری داشبورد…</p>
 
-      <article v-if="forecast" class="wide forecast-card">
-        <div class="section-head">
-          <h2>فروش این ماه</h2>
-          <RouterLink :to="{ name: 'sales-forecast' }">جزئیات ←</RouterLink>
-        </div>
-        <div class="forecast-row">
+    <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>
-            <p class="muted">هدف</p>
-            <strong>{{ formatMoney(forecast.targetAmount) }}</strong>
+            <p class="kpi-label">{{ kpi.label }}</p>
+            <strong class="kpi-value">{{ formatKpiValue(kpi.key, kpi.value) }}</strong>
+            <span
+              v-if="kpi.changePercent != null"
+              class="kpi-change"
+              :class="{ down: kpi.changePercent < 0 }"
+            >
+              {{ formatChange(kpi.changePercent) }} {{ kpi.changeLabel }}
+            </span>
           </div>
-          <div>
-            <p class="muted">تحقق</p>
-            <strong>{{ formatMoney(forecast.wonAmount) }}</strong>
-          </div>
-          <div>
-            <p class="muted">پیش‌بینی</p>
-            <strong>{{ formatMoney(forecast.forecastAmount) }}</strong>
-          </div>
-          <div>
-            <p class="muted">پیشرفت</p>
-            <strong>
-              {{
-                forecast.progressPercent == null
-                  ? '—'
-                  : `${new Intl.NumberFormat('fa-IR').format(forecast.progressPercent)}٪`
-              }}
-            </strong>
-          </div>
-        </div>
-      </article>
+        </article>
+      </div>
 
-      <article class="wide">
-        <div class="section-head">
-          <h2>عقب‌افتاده ({{ summary?.overdueCount ?? 0 }})</h2>
-          <RouterLink :to="{ name: 'activities', query: { filter: 'overdue' } }">همه ←</RouterLink>
-        </div>
-        <div v-if="summary?.overdue.length" class="activity-list">
-          <div v-for="item in summary.overdue.slice(0, 5)" :key="item.id" class="activity-row">
-            <div>
-              <strong>{{ item.title }}</strong>
-              <p class="muted">{{ typeLabel[item.type] }} · {{ item.person?.fullName || '—' }}</p>
+      <div class="mid-grid">
+        <article class="panel chart-panel">
+          <header class="panel-head">
+            <h2>روند فروش</h2>
+          </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" />
+                </linearGradient>
+              </defs>
+              <polygon v-if="trendArea" :points="trendArea" fill="url(#trendFill)" />
+              <polyline
+                v-if="trendPoints"
+                :points="trendPoints"
+                fill="none"
+                stroke="#2eb29b"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+            </svg>
+            <div class="chart-labels">
+              <span v-for="p in home?.salesTrend ?? []" :key="p.monthKey">{{ p.monthLabel }}</span>
             </div>
-            <button class="btn btn-ghost" type="button" @click="complete(item.id)">انجام شد</button>
           </div>
-        </div>
-        <p v-else class="muted">عقب‌افتاده‌ای نیست.</p>
-      </article>
+        </article>
 
-      <article class="wide">
-        <div class="section-head">
-          <h2>امروز ({{ summary?.todayCount ?? 0 }})</h2>
-          <RouterLink :to="{ name: 'activities' }">همه ←</RouterLink>
-        </div>
-        <div v-if="summary?.today.length" class="activity-list">
-          <div v-for="item in summary.today.slice(0, 6)" :key="item.id" class="activity-row">
-            <div>
-              <strong>{{ item.title }}</strong>
-              <p class="muted">
-                {{ typeLabel[item.type] }} · {{ formatDue(item.dueAt) }}
-                <span v-if="item.deal"> · {{ item.deal.title }}</span>
-              </p>
+        <article class="panel donut-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
+                  v-for="seg in donutSegments"
+                  :key="seg.label"
+                  cx="60"
+                  cy="60"
+                  r="42"
+                  fill="none"
+                  :stroke="seg.color"
+                  stroke-width="16"
+                  stroke-linecap="butt"
+                  :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>
+                <span>مشتری</span>
+              </div>
             </div>
-            <button class="btn btn-ghost" type="button" @click="complete(item.id)">انجام شد</button>
+            <ul class="donut-legend">
+              <li v-for="seg in donutSegments" :key="seg.label">
+                <span class="dot" :style="{ background: seg.color }" />
+                {{ seg.label }}
+                <em>{{ toFaDigits(seg.percent) }}٪</em>
+              </li>
+            </ul>
           </div>
-        </div>
-        <p v-else class="muted">برای امروز فعالیتی ثبت نشده.</p>
-      </article>
+        </article>
 
-      <article class="wide">
-        <h2>میانبر</h2>
-        <p>
-          <RouterLink to="/activities">فعالیت‌ها ←</RouterLink>
-          &nbsp;·&nbsp;
-          <RouterLink to="/notes">یادداشت‌ها ←</RouterLink>
-          &nbsp;·&nbsp;
-          <RouterLink to="/pipeline">کاریز فروش ←</RouterLink>
-          &nbsp;·&nbsp;
-          <RouterLink to="/contacts">اشخاص و شرکت‌ها ←</RouterLink>
-        </p>
-      </article>
-    </div>
+        <article class="panel ai-panel">
+          <header class="panel-head">
+            <h2>✨ دستیار هوشمند منتو</h2>
+          </header>
+          <p class="ai-lead">چه کمکی می‌تونم بکنم؟</p>
+          <div class="ai-shortcuts">
+            <RouterLink
+              v-for="item in aiShortcuts"
+              :key="item.label"
+              class="ai-chip"
+              :to="item.to"
+            >
+              {{ item.label }}
+            </RouterLink>
+          </div>
+          <form class="ai-input" @submit.prevent="submitAsk">
+            <input v-model="askQuery" type="search" placeholder="از منتو بپرس…" />
+            <button type="submit" aria-label="ارسال">➤</button>
+          </form>
+        </article>
+      </div>
+
+      <div class="bottom-grid">
+        <article class="panel">
+          <header class="panel-head">
+            <h2>فعالیت‌های اخیر</h2>
+            <RouterLink :to="{ name: 'activities' }">همه</RouterLink>
+          </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>
+              <div class="act-body">
+                <strong>{{ act.title }}</strong>
+                <span>{{ typeLabel[act.type] ?? act.type }} · {{ formatWhen(act.dueAt || act.createdAt) }}</span>
+              </div>
+              <span class="status-pill" :class="activityStatus(act).tone">
+                {{ activityStatus(act).label }}
+              </span>
+            </li>
+          </ul>
+          <p v-else class="muted">فعالیتی ثبت نشده.</p>
+        </article>
+
+        <article class="panel pipeline-panel">
+          <header class="panel-head">
+            <h2>جریان فروش</h2>
+            <RouterLink :to="{ name: 'pipeline' }">کاریز کامل</RouterLink>
+          </header>
+          <div class="mini-pipeline">
+            <div v-for="stage in pipelineStages" :key="stage.id" class="pipe-col">
+              <header>
+                <strong>{{ stage.name }}</strong>
+                <span>{{ toFaDigits(stage.deals.length) }}</span>
+              </header>
+              <div class="pipe-cards">
+                <RouterLink
+                  v-for="deal in stage.deals.slice(0, 3)"
+                  :key="deal.id"
+                  class="pipe-card"
+                  :to="{ name: 'deal-detail', params: { id: deal.id } }"
+                >
+                  <strong>{{ deal.company?.name || deal.person?.fullName || deal.title }}</strong>
+                  <span v-if="deal.amount">{{ formatMoney(deal.amount, deal.currency) }}</span>
+                </RouterLink>
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <article class="panel">
+          <header class="panel-head">
+            <h2>مشتریان برتر</h2>
+          </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>
+              <div>
+                <strong>{{ row.name }}</strong>
+                <span>{{ toFaDigits(row.dealCount) }} معامله</span>
+              </div>
+            </li>
+          </ul>
+          <p v-else class="muted">هنوز داده کافی برای رتبه‌بندی نیست.</p>
+        </article>
+      </div>
+    </template>
   </section>
 </template>
 
 <style scoped>
-.home {
+.dashboard {
   display: grid;
   gap: 1.25rem;
+  padding-bottom: 1rem;
 }
 
-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
-}
-
-h1 {
-  margin: 0.2rem 0;
-  font-size: 2rem;
-}
-
-.lead,
-.muted,
-span {
-  color: var(--muted);
-}
-
-.grid {
+.hero {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  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;
 }
 
-article {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1.1rem 1.2rem;
-  box-shadow: var(--shadow);
+.hero-main {
+  display: grid;
+  gap: 1rem;
+  z-index: 1;
 }
 
-.wide {
-  grid-column: 1 / -1;
-}
-
-h2 {
-  margin: 0 0 0.6rem;
-  font-size: 1.05rem;
-}
-
-.section-head {
+.hero-greet {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.6rem;
+  gap: 0.85rem;
 }
 
-.section-head h2 {
+.hero-avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.18);
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 1.1rem;
+}
+
+.hero h1 {
   margin: 0;
+  font-size: clamp(1.35rem, 2vw, 1.75rem);
 }
 
-.forecast-row {
+.hero p {
+  margin: 0.25rem 0 0;
+  opacity: 0.88;
+}
+
+.hero-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  font-size: 0.82rem;
+  text-decoration: none;
+  backdrop-filter: blur(4px);
+}
+
+.chip-warning {
+  background: rgba(251, 191, 36, 0.22);
+}
+
+.chip-urgent {
+  background: rgba(239, 68, 68, 0.24);
+}
+
+.chip-success {
+  background: rgba(34, 197, 94, 0.22);
+}
+
+.hero-ask {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  background: rgba(255, 255, 255, 0.95);
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 0.65rem 1rem;
+  max-width: 520px;
+}
+
+.hero-ask input {
+  border: 0;
+  background: transparent;
+  flex: 1;
+  outline: none;
+}
+
+.hero-ask kbd {
+  font-size: 0.72rem;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.15rem 0.4rem;
+}
+
+.hero-bot {
+  display: grid;
+  align-content: center;
+  justify-items: end;
+  gap: 0.65rem;
+  z-index: 1;
+}
+
+.bot-bubble {
+  max-width: 180px;
+  padding: 0.55rem 0.75rem;
+  border-radius: 14px 14px 4px 14px;
+  background: rgba(255, 255, 255, 0.16);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.bot-head {
+  width: 88px;
+  height: 88px;
+  border-radius: 22px;
+  background: linear-gradient(180deg, #dbeafe, #93c5fd);
+  position: relative;
+  box-shadow: 0 0 30px rgba(56, 189, 248, 0.45);
+  display: grid;
+  place-items: center;
+}
+
+.bot-eye {
+  position: absolute;
+  top: 34px;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: #0ea5e9;
+  box-shadow: 0 0 12px #38bdf8;
+}
+
+.bot-eye:first-of-type {
+  right: 24px;
+}
+
+.bot-eye:last-of-type {
+  left: 24px;
+}
+
+.bot-badge {
+  position: absolute;
+  bottom: -6px;
+  background: #0ea5e9;
+  color: #fff;
+  font-size: 0.68rem;
+  font-weight: 800;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+}
+
+.kpi-row {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.75rem;
+  gap: 1rem;
 }
 
-.forecast-row p {
-  margin: 0 0 0.2rem;
+.kpi-card {
+  display: flex;
+  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);
+}
+
+.kpi-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: var(--accent-soft);
+  display: grid;
+  place-items: center;
+  font-size: 1.2rem;
+}
+
+.kpi-label {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.kpi-value {
+  display: block;
+  margin-top: 0.2rem;
+  font-size: 1.15rem;
+}
+
+.kpi-change {
+  display: block;
+  margin-top: 0.35rem;
+  color: #16a34a;
+  font-size: 0.78rem;
+}
+
+.kpi-change.down {
+  color: #dc2626;
+}
+
+.mid-grid {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr 0.9fr;
+  gap: 1rem;
+}
+
+.bottom-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr 0.8fr;
+  gap: 1rem;
+}
+
+.panel {
+  background: #fff;
+  border-radius: 20px;
+  padding: 1.1rem 1.15rem;
+  box-shadow: var(--shadow);
+  border: 1px solid rgba(226, 232, 240, 0.9);
+  min-width: 0;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.85rem;
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.panel-head a {
+  color: var(--accent);
   font-size: 0.85rem;
 }
 
-.ok {
-  color: var(--accent);
-  font-weight: 600;
+.chart-wrap {
+  display: grid;
+  gap: 0.5rem;
 }
 
-article a {
-  color: var(--accent);
-  font-weight: 600;
+.line-chart {
+  width: 100%;
+  height: auto;
 }
 
-.activity-list {
+.chart-labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.donut-wrap {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 0.85rem;
+  align-items: center;
+}
+
+.donut-chart-box {
+  position: relative;
+  width: 120px;
+  height: 120px;
+}
+
+.donut-chart {
+  width: 120px;
+  height: 120px;
+}
+
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  gap: 0.1rem;
+  pointer-events: none;
+}
+
+.donut-center strong {
+  font-size: 1rem;
+}
+
+.donut-center span {
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+
+.donut-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.82rem;
+}
+
+.donut-legend li {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.donut-legend em {
+  margin-inline-start: auto;
+  font-style: normal;
+  color: var(--muted);
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.ai-lead {
+  margin: 0 0 0.75rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.ai-shortcuts {
+  display: grid;
+  gap: 0.45rem;
+  margin-bottom: 0.85rem;
+}
+
+.ai-chip {
+  padding: 0.55rem 0.75rem;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid var(--line);
+  color: var(--ink);
+  font-size: 0.82rem;
+  text-decoration: none;
+}
+
+.ai-input {
+  display: flex;
+  gap: 0.45rem;
+}
+
+.ai-input input {
+  flex: 1;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.65rem 0.8rem;
+}
+
+.ai-input button {
+  width: 42px;
+  border: 0;
+  border-radius: 12px;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+}
+
+.activity-list,
+.top-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: grid;
   gap: 0.65rem;
 }
 
-.activity-row {
+.activity-list li,
+.top-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.act-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: #f8fafc;
+  display: grid;
+  place-items: center;
+}
+
+.act-body {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.15rem;
+}
+
+.act-body strong,
+.top-list strong {
+  font-size: 0.92rem;
+}
+
+.act-body span,
+.top-list span {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.status-pill {
+  font-size: 0.72rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.status-pill.done {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.status-pill.pending {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.status-pill.late {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.mini-pipeline {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(140px, 1fr));
+  gap: 0.75rem;
+  overflow-x: auto;
+}
+
+.pipe-col header {
   display: flex;
   justify-content: space-between;
-  gap: 0.8rem;
-  align-items: center;
-  padding: 0.7rem 0;
-  border-top: 1px solid var(--line);
+  gap: 0.5rem;
+  margin-bottom: 0.55rem;
+  font-size: 0.85rem;
 }
 
-.activity-row:first-child {
-  border-top: 0;
-  padding-top: 0;
+.pipe-col header span {
+  color: var(--muted);
 }
 
-.activity-row p {
-  margin: 0.2rem 0 0;
-  font-size: 0.9rem;
+.pipe-cards {
+  display: grid;
+  gap: 0.45rem;
 }
 
-@media (max-width: 800px) {
-  .grid {
+.pipe-card {
+  display: grid;
+  gap: 0.15rem;
+  padding: 0.65rem 0.75rem;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid var(--line);
+  text-decoration: none;
+  color: inherit;
+  font-size: 0.82rem;
+}
+
+.rank {
+  font-size: 1.2rem;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.center {
+  text-align: center;
+}
+
+@media (max-width: 1200px) {
+  .kpi-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .mid-grid,
+  .bottom-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 700px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-bot {
+    display: none;
+  }
+
+  .kpi-row {
+    grid-template-columns: 1fr;
+  }
+
+  .mini-pipeline {
     grid-template-columns: 1fr;
   }
 }
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index b5c0fbc..48b8256 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -1163,6 +1163,49 @@ export interface ReportsDashboardDto {
   peopleCreated: number;
 }
 
+export interface HomeDashboardKpiDto {
+  key: string;
+  label: string;
+  value: number;
+  changePercent: number | null;
+  changeLabel: string;
+}
+
+export interface HomeDashboardAlertDto {
+  key: string;
+  tone: 'urgent' | 'warning' | 'success' | 'info';
+  text: string;
+  link?: string;
+}
+
+export interface HomeDashboardTrendPointDto {
+  monthKey: string;
+  monthLabel: string;
+  amount: number;
+}
+
+export interface HomeDashboardSourceDto {
+  label: string;
+  count: number;
+  percent: number;
+}
+
+export interface HomeDashboardTopCustomerDto {
+  id: string;
+  name: string;
+  dealCount: number;
+  rank: number;
+}
+
+export interface HomeDashboardDto {
+  currency: string;
+  kpis: HomeDashboardKpiDto[];
+  alerts: HomeDashboardAlertDto[];
+  salesTrend: HomeDashboardTrendPointDto[];
+  sources: HomeDashboardSourceDto[];
+  topCustomers: HomeDashboardTopCustomerDto[];
+}
+
 /** برد پروژه / کاریز کارت */
 export interface ProjectBoardStageDto {
   id: string;