From f884c60cab2c54863117c97141b9f125a929fff0 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Wed, 2 Sep 2026 21:29:00 +0330
Subject: [PATCH] Add activity detail, Jalali pickers, and customer/user
 profiles.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .gitignore                                    |    1 +
 .../migration.sql                             |   14 +
 .../migration.sql                             |    7 +
 apps/api/prisma/schema.prisma                 |   23 +-
 apps/api/src/activities/activities.service.ts |   16 +
 apps/api/src/activities/dto.ts                |   33 +
 apps/api/tsconfig.json                        |    1 -
 .../src/components/CustomFieldsSection.vue    |   11 +-
 apps/web/src/components/JalaliDateInput.vue   |  575 +++++++
 .../src/components/NoteAiSuggestionPanel.vue  |    4 +-
 apps/web/src/components/UiIcon.vue            |  132 +-
 apps/web/src/components/UserAvatar.vue        |   59 +
 .../activities/ActivityCommentSheet.vue       |  897 ++++++++++
 .../activities/ActivityPostponeSheet.vue      |  458 +++++
 .../person-profile/ProfileEmptyState.vue      |  196 +++
 .../person-profile/ProfileMoreMenu.vue        |  215 +++
 apps/web/src/layouts/AppLayout.vue            |   81 +-
 apps/web/src/lib/jalali.ts                    |   84 +
 apps/web/src/lib/money.ts                     |   17 +
 apps/web/src/lib/person-insights.ts           |   97 ++
 apps/web/src/router/index.ts                  |   19 +-
 apps/web/src/views/ActivitiesView.vue         | 1147 ++++++++++---
 apps/web/src/views/ActivityDetailView.vue     |  616 +++++++
 apps/web/src/views/ActivityFormView.vue       | 1118 ++++++++++--
 apps/web/src/views/DealFormView.vue           |   11 +-
 apps/web/src/views/InvoiceFormView.vue        |   12 +-
 apps/web/src/views/NotesView.vue              |   13 +-
 apps/web/src/views/PersonFormView.vue         |    7 +-
 apps/web/src/views/PersonProfileView.vue      | 1509 +++++++++++++++++
 apps/web/src/views/ProfileView.vue            | 1229 ++++++++++++++
 apps/web/src/views/ProjectCardFormView.vue    |    2 +
 apps/web/src/views/QuoteFormView.vue          |   14 +-
 apps/web/src/views/ReportsView.vue            |   18 +-
 apps/web/src/views/SalesForecastView.vue      |   16 +-
 apps/web/src/views/TicketFormView.vue         |    5 +
 apps/web/tsconfig.json                        |    3 +-
 docs/راهنمای-کاربری.md                        |   20 +-
 docs/وضعیت-پیشرفت.md                          |    5 +-
 packages/shared/src/index.ts                  |   11 +
 39 files changed, 8255 insertions(+), 441 deletions(-)
 create mode 100644 apps/api/prisma/migrations/20260902160000_activity_priority_creator/migration.sql
 create mode 100644 apps/api/prisma/migrations/20260902183000_activity_duration_reminder_priority/migration.sql
 create mode 100644 apps/web/src/components/JalaliDateInput.vue
 create mode 100644 apps/web/src/components/UserAvatar.vue
 create mode 100644 apps/web/src/components/activities/ActivityCommentSheet.vue
 create mode 100644 apps/web/src/components/activities/ActivityPostponeSheet.vue
 create mode 100644 apps/web/src/components/person-profile/ProfileEmptyState.vue
 create mode 100644 apps/web/src/components/person-profile/ProfileMoreMenu.vue
 create mode 100644 apps/web/src/lib/person-insights.ts
 create mode 100644 apps/web/src/views/ActivityDetailView.vue
 create mode 100644 apps/web/src/views/PersonProfileView.vue
 create mode 100644 apps/web/src/views/ProfileView.vue

diff --git a/.gitignore b/.gitignore
index 84ec3bc..90ab536 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ docs/~$*
 ~$*
 .idea/
 .vscode/
+*.tsbuildinfo
diff --git a/apps/api/prisma/migrations/20260902160000_activity_priority_creator/migration.sql b/apps/api/prisma/migrations/20260902160000_activity_priority_creator/migration.sql
new file mode 100644
index 0000000..ca80bfd
--- /dev/null
+++ b/apps/api/prisma/migrations/20260902160000_activity_priority_creator/migration.sql
@@ -0,0 +1,14 @@
+-- CreateEnum
+CREATE TYPE "ActivityPriority" AS ENUM ('low', 'medium', 'high');
+
+-- AlterTable
+ALTER TABLE "Activity" ADD COLUMN "priority" "ActivityPriority" NOT NULL DEFAULT 'medium';
+ALTER TABLE "Activity" ADD COLUMN "createdById" TEXT;
+
+UPDATE "Activity" SET "createdById" = "assigneeId" WHERE "createdById" IS NULL;
+
+-- AddForeignKey
+ALTER TABLE "Activity" ADD CONSTRAINT "Activity_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- CreateIndex
+CREATE INDEX "Activity_organizationId_createdById_idx" ON "Activity"("organizationId", "createdById");
diff --git a/apps/api/prisma/migrations/20260902183000_activity_duration_reminder_priority/migration.sql b/apps/api/prisma/migrations/20260902183000_activity_duration_reminder_priority/migration.sql
new file mode 100644
index 0000000..981313c
--- /dev/null
+++ b/apps/api/prisma/migrations/20260902183000_activity_duration_reminder_priority/migration.sql
@@ -0,0 +1,7 @@
+-- AlterEnum
+ALTER TYPE "ActivityPriority" ADD VALUE 'very_low';
+ALTER TYPE "ActivityPriority" ADD VALUE 'very_high';
+
+-- AlterTable
+ALTER TABLE "Activity" ADD COLUMN "durationMinutes" INTEGER;
+ALTER TABLE "Activity" ADD COLUMN "reminderAt" TIMESTAMP(3);
diff --git a/apps/api/prisma/schema.prisma b/apps/api/prisma/schema.prisma
index a509fe5..3d973d4 100644
--- a/apps/api/prisma/schema.prisma
+++ b/apps/api/prisma/schema.prisma
@@ -33,6 +33,14 @@ enum ActivityStatus {
   canceled
 }
 
+enum ActivityPriority {
+  low
+  medium
+  high
+  very_low
+  very_high
+}
+
 enum CustomFieldEntity {
   person
   company
@@ -165,6 +173,7 @@ model User {
   ownedCompanies Company[]    @relation("CompanyOwner")
   ownedProjectCards ProjectCard[] @relation("ProjectCardOwner")
   activities     Activity[]   @relation("ActivityAssignee")
+  createdActivities Activity[] @relation("ActivityCreator")
   notes          Note[]       @relation("NoteAuthor")
   noteAttachments NoteAttachment[] @relation("NoteAttachmentUploader")
   notifications  Notification[]
@@ -333,10 +342,13 @@ model Activity {
   organization   Organization   @relation(fields: [organizationId], references: [id], onDelete: Cascade)
   type           ActivityType   @default(task)
   status         ActivityStatus @default(open)
-  title          String
-  description    String?
-  dueAt          DateTime?
-  completedAt    DateTime?
+  priority       ActivityPriority @default(medium)
+  title           String
+  description     String?
+  dueAt           DateTime?
+  durationMinutes Int?
+  reminderAt      DateTime?
+  completedAt     DateTime?
   personId       String?
   person         Person?        @relation(fields: [personId], references: [id], onDelete: SetNull)
   companyId      String?
@@ -345,11 +357,14 @@ model Activity {
   deal           Deal?          @relation(fields: [dealId], references: [id], onDelete: SetNull)
   assigneeId     String?
   assignee       User?          @relation("ActivityAssignee", fields: [assigneeId], references: [id], onDelete: SetNull)
+  createdById    String?
+  createdBy      User?          @relation("ActivityCreator", fields: [createdById], references: [id], onDelete: SetNull)
   createdAt      DateTime       @default(now())
   updatedAt      DateTime       @updatedAt
 
   @@index([organizationId, status, dueAt])
   @@index([organizationId, assigneeId])
+  @@index([organizationId, createdById])
   @@index([personId])
   @@index([companyId])
   @@index([dealId])
diff --git a/apps/api/src/activities/activities.service.ts b/apps/api/src/activities/activities.service.ts
index be7f66b..9fe7481 100644
--- a/apps/api/src/activities/activities.service.ts
+++ b/apps/api/src/activities/activities.service.ts
@@ -22,9 +22,12 @@ type ActivityRow = {
   id: string;
   type: ActivityDto['type'];
   status: ActivityDto['status'];
+  priority: ActivityDto['priority'];
   title: string;
   description: string | null;
   dueAt: Date | null;
+  durationMinutes: number | null;
+  reminderAt: Date | null;
   completedAt: Date | null;
   createdAt: Date;
   updatedAt: Date;
@@ -32,6 +35,7 @@ type ActivityRow = {
   company: { id: string; name: string } | null;
   deal: { id: string; title: string } | null;
   assignee: { id: string; fullName: string } | null;
+  createdBy: { id: string; fullName: string } | null;
 };
 
 const include = {
@@ -39,6 +43,7 @@ const include = {
   company: { select: { id: true, name: true } },
   deal: { select: { id: true, title: true } },
   assignee: { select: { id: true, fullName: true } },
+  createdBy: { select: { id: true, fullName: true } },
 } satisfies Prisma.ActivityInclude;
 
 @Injectable()
@@ -173,12 +178,16 @@ export class ActivitiesService {
         organizationId,
         title: dto.title.trim(),
         type: dto.type ?? 'task',
+        priority: dto.priority ?? 'medium',
         description: emptyToNull(dto.description),
         dueAt: dto.dueAt ? new Date(dto.dueAt) : null,
+        durationMinutes: dto.durationMinutes ?? null,
+        reminderAt: dto.reminderAt ? new Date(dto.reminderAt) : null,
         personId: emptyToNull(dto.personId ?? null),
         companyId: emptyToNull(dto.companyId ?? null),
         dealId: emptyToNull(dto.dealId ?? null),
         assigneeId,
+        createdById: userId,
       },
       include,
     });
@@ -211,8 +220,11 @@ export class ActivitiesService {
     const data: Prisma.ActivityUncheckedUpdateInput = {};
     if (dto.title !== undefined) data.title = dto.title.trim();
     if (dto.type !== undefined) data.type = dto.type;
+    if (dto.priority !== undefined) data.priority = dto.priority;
     if ('description' in dto) data.description = emptyToNull(dto.description);
     if ('dueAt' in dto) data.dueAt = dto.dueAt ? new Date(dto.dueAt) : null;
+    if ('durationMinutes' in dto) data.durationMinutes = dto.durationMinutes ?? null;
+    if ('reminderAt' in dto) data.reminderAt = dto.reminderAt ? new Date(dto.reminderAt) : null;
     if ('personId' in dto) data.personId = emptyToNull(dto.personId ?? null);
     if ('companyId' in dto) data.companyId = emptyToNull(dto.companyId ?? null);
     if ('dealId' in dto) data.dealId = emptyToNull(dto.dealId ?? null);
@@ -394,9 +406,12 @@ export class ActivitiesService {
       id: row.id,
       type: row.type,
       status: row.status,
+      priority: row.priority,
       title: row.title,
       description: row.description,
       dueAt: row.dueAt?.toISOString() ?? null,
+      durationMinutes: row.durationMinutes,
+      reminderAt: row.reminderAt?.toISOString() ?? null,
       completedAt: row.completedAt?.toISOString() ?? null,
       person: row.person
         ? {
@@ -407,6 +422,7 @@ export class ActivitiesService {
       company: row.company,
       deal: row.deal,
       assignee: row.assignee,
+      createdBy: row.createdBy,
       createdAt: row.createdAt.toISOString(),
       updatedAt: row.updatedAt.toISOString(),
     };
diff --git a/apps/api/src/activities/dto.ts b/apps/api/src/activities/dto.ts
index a9842ac..a6edd42 100644
--- a/apps/api/src/activities/dto.ts
+++ b/apps/api/src/activities/dto.ts
@@ -14,6 +14,7 @@ import {
 
 const ACTIVITY_TYPES = ['call', 'meeting', 'task', 'note'] as const;
 const ACTIVITY_STATUSES = ['open', 'done', 'canceled'] as const;
+const ACTIVITY_PRIORITIES = ['very_low', 'low', 'medium', 'high', 'very_high'] as const;
 const ACTIVITY_FILTERS = ['today', 'overdue', 'upcoming', 'done', 'all'] as const;
 
 export class ListActivitiesQueryDto {
@@ -71,6 +72,10 @@ export class CreateActivityDto {
   @IsIn(ACTIVITY_TYPES)
   type?: (typeof ACTIVITY_TYPES)[number];
 
+  @IsOptional()
+  @IsIn(ACTIVITY_PRIORITIES)
+  priority?: (typeof ACTIVITY_PRIORITIES)[number];
+
   @IsOptional()
   @IsString()
   @MaxLength(2000)
@@ -81,6 +86,18 @@ export class CreateActivityDto {
   @IsDateString()
   dueAt?: string | null;
 
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(24 * 60)
+  durationMinutes?: number | null;
+
+  @IsOptional()
+  @ValidateIf((_, v) => v !== '' && v != null)
+  @IsDateString()
+  reminderAt?: string | null;
+
   @IsOptional()
   @ValidateIf((_, v) => v !== '' && v != null)
   @IsString()
@@ -117,6 +134,10 @@ export class UpdateActivityDto {
   @IsIn(ACTIVITY_STATUSES)
   status?: (typeof ACTIVITY_STATUSES)[number];
 
+  @IsOptional()
+  @IsIn(ACTIVITY_PRIORITIES)
+  priority?: (typeof ACTIVITY_PRIORITIES)[number];
+
   @IsOptional()
   @IsString()
   @MaxLength(2000)
@@ -127,6 +148,18 @@ export class UpdateActivityDto {
   @IsDateString()
   dueAt?: string | null;
 
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(24 * 60)
+  durationMinutes?: number | null;
+
+  @IsOptional()
+  @ValidateIf((_, v) => v !== '' && v != null)
+  @IsDateString()
+  reminderAt?: string | null;
+
   @IsOptional()
   @ValidateIf((_, v) => v !== '' && v != null)
   @IsString()
diff --git a/apps/api/tsconfig.json b/apps/api/tsconfig.json
index 7d214dd..9d85208 100644
--- a/apps/api/tsconfig.json
+++ b/apps/api/tsconfig.json
@@ -9,7 +9,6 @@
     "target": "ES2021",
     "sourceMap": true,
     "outDir": "./dist",
-    "baseUrl": "./",
     "incremental": true,
     "skipLibCheck": true,
     "strict": true,
diff --git a/apps/web/src/components/CustomFieldsSection.vue b/apps/web/src/components/CustomFieldsSection.vue
index 0b473f6..0da833d 100644
--- a/apps/web/src/components/CustomFieldsSection.vue
+++ b/apps/web/src/components/CustomFieldsSection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
 import { api } from '@/lib/api';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import type {
   CustomFieldDefinitionDto,
   CustomFieldEntity,
@@ -104,12 +105,11 @@ onMounted(load);
           "
         />
 
-        <input
+        <JalaliDateInput
           v-else-if="field.fieldType === 'date'"
           :id="`cf-${field.key}`"
-          type="date"
-          :value="String(displayValue(field.key))"
-          @input="setValue(field.key, ($event.target as HTMLInputElement).value)"
+          :model-value="String(displayValue(field.key))"
+          @update:model-value="setValue(field.key, $event || null)"
         />
 
         <input
@@ -160,8 +160,7 @@ h3 {
 
 select,
 input[type='text'],
-input[type='number'],
-input[type='date'] {
+input[type='number'] {
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 0.8rem 0.95rem;
diff --git a/apps/web/src/components/JalaliDateInput.vue b/apps/web/src/components/JalaliDateInput.vue
new file mode 100644
index 0000000..59352d4
--- /dev/null
+++ b/apps/web/src/components/JalaliDateInput.vue
@@ -0,0 +1,575 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import {
+  addJalaliMonths,
+  dateToJalali,
+  formatJalaliNumeric,
+  formatLocalDateInput,
+  formatLocalDateTimeInput,
+  jalaliMonthLength,
+  jalaliMonthName,
+  jalaliToDate,
+  parseLocalInput,
+  toFaDigits,
+} from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
+
+const model = defineModel<string>({ default: '' });
+const props = withDefaults(
+  defineProps<{
+    mode?: 'date' | 'datetime' | 'time';
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    clearable?: boolean;
+    icon?: 'calendar' | 'clock' | 'bell';
+  }>(),
+  {
+    mode: 'date',
+    required: false,
+    disabled: false,
+    clearable: true,
+    icon: undefined,
+  },
+);
+
+const WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'] as const;
+
+const open = ref(false);
+const triggerRef = ref<HTMLButtonElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const top = ref(0);
+const left = ref(0);
+const cursor = ref(dateToJalali(new Date()));
+const draftHour = ref(9);
+const draftMinute = ref(0);
+
+type Cell = {
+  key: string;
+  jy: number;
+  jm: number;
+  jd: number;
+  inMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+};
+
+const parsed = computed(() => (props.mode === 'time' ? null : parseLocalInput(model.value)));
+
+const triggerIcon = computed(() => {
+  if (props.icon) return props.icon;
+  if (props.mode === 'time') return 'clock';
+  if (props.icon === 'bell') return 'bell';
+  return 'calendar';
+});
+
+const display = computed(() => {
+  if (props.mode === 'time') {
+    const match = /^(\d{1,2}):(\d{2})$/.exec(model.value);
+    if (!match) return '';
+    return `${toFaDigits(match[1].padStart(2, '0'))}:${toFaDigits(match[2])}`;
+  }
+  if (!parsed.value) return '';
+  const date = formatJalaliNumeric(parsed.value);
+  if (props.mode === 'date') return date;
+  const hh = String(parsed.value.getHours()).padStart(2, '0');
+  const mm = String(parsed.value.getMinutes()).padStart(2, '0');
+  return `${date}  ${toFaDigits(hh)}:${toFaDigits(mm)}`;
+});
+
+const emptyLabel = computed(
+  () =>
+    props.placeholder ||
+    (props.mode === 'datetime'
+      ? 'انتخاب تاریخ و ساعت'
+      : props.mode === 'time'
+        ? 'انتخاب ساعت'
+        : 'انتخاب تاریخ'),
+);
+
+const monthTitle = computed(
+  () => `${jalaliMonthName(cursor.value.jm)} ${toFaDigits(cursor.value.jy)}`,
+);
+
+const hours = Array.from({ length: 24 }, (_, i) => i);
+const minutes = computed(() => {
+  const steps = Array.from({ length: 12 }, (_, i) => i * 5);
+  if (!steps.includes(draftMinute.value)) {
+    return [...steps, draftMinute.value].sort((a, b) => a - b);
+  }
+  return steps;
+});
+
+const cells = computed<Cell[]>(() => {
+  const { jy, jm } = cursor.value;
+  const first = jalaliToDate(jy, jm, 1);
+  const firstDow = (first.getDay() + 1) % 7;
+  const today = dateToJalali(new Date());
+  const selected = parsed.value ? dateToJalali(parsed.value) : null;
+  const out: Cell[] = [];
+
+  const prev = addJalaliMonths(jy, jm, -1);
+  const prevLen = jalaliMonthLength(prev.jy, prev.jm);
+  for (let i = 0; i < firstDow; i += 1) {
+    const jd = prevLen - firstDow + i + 1;
+    out.push(makeCell(prev.jy, prev.jm, jd, false, today, selected));
+  }
+
+  const len = jalaliMonthLength(jy, jm);
+  for (let jd = 1; jd <= len; jd += 1) {
+    out.push(makeCell(jy, jm, jd, true, today, selected));
+  }
+
+  const next = addJalaliMonths(jy, jm, 1);
+  let n = 1;
+  while (out.length % 7 !== 0) {
+    out.push(makeCell(next.jy, next.jm, n, false, today, selected));
+    n += 1;
+  }
+  return out;
+});
+
+function makeCell(
+  jy: number,
+  jm: number,
+  jd: number,
+  inMonth: boolean,
+  today: { jy: number; jm: number; jd: number },
+  selected: { jy: number; jm: number; jd: number } | null,
+): Cell {
+  return {
+    key: `${jy}-${jm}-${jd}`,
+    jy,
+    jm,
+    jd,
+    inMonth,
+    isToday: today.jy === jy && today.jm === jm && today.jd === jd,
+    isSelected: Boolean(selected && selected.jy === jy && selected.jm === jm && selected.jd === jd),
+  };
+}
+
+function emitDate(d: Date) {
+  model.value = props.mode === 'datetime' ? formatLocalDateTimeInput(d) : formatLocalDateInput(d);
+}
+
+function emitTime() {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  model.value = `${pad(draftHour.value)}:${pad(draftMinute.value)}`;
+}
+
+function syncDraftFrom(d: Date | null) {
+  if (props.mode === 'time') {
+    const match = /^(\d{1,2}):(\d{2})$/.exec(model.value);
+    draftHour.value = match ? Number(match[1]) : 10;
+    draftMinute.value = match ? Number(match[2]) : 30;
+    return;
+  }
+  const source = d ?? new Date();
+  const j = dateToJalali(source);
+  cursor.value = { jy: j.jy, jm: j.jm };
+  draftHour.value = props.mode === 'datetime' ? source.getHours() : 9;
+  draftMinute.value = props.mode === 'datetime' ? source.getMinutes() : 0;
+}
+
+function place() {
+  const trigger = triggerRef.value;
+  const panel = panelRef.value;
+  if (!trigger) return;
+  const rect = trigger.getBoundingClientRect();
+  const width = panel?.offsetWidth || 320;
+  const height = panel?.offsetHeight || 360;
+  let nextLeft = rect.left;
+  if (getComputedStyle(document.documentElement).direction === 'rtl') {
+    nextLeft = rect.right - width;
+  }
+  nextLeft = Math.min(Math.max(8, nextLeft), window.innerWidth - width - 8);
+  let nextTop = rect.bottom + 8;
+  if (nextTop + height > window.innerHeight - 8) {
+    nextTop = Math.max(8, rect.top - height - 8);
+  }
+  left.value = nextLeft;
+  top.value = nextTop;
+}
+
+function onWindowChange() {
+  if (open.value) place();
+}
+
+async function show() {
+  if (props.disabled) return;
+  syncDraftFrom(parsed.value);
+  open.value = true;
+  await nextTick();
+  place();
+  await nextTick();
+  place();
+}
+
+function hide() {
+  open.value = false;
+}
+
+function toggle() {
+  if (open.value) hide();
+  else void show();
+}
+
+function goMonth(delta: number) {
+  const next = addJalaliMonths(cursor.value.jy, cursor.value.jm, delta);
+  cursor.value = next;
+  void nextTick(place);
+}
+
+function pickDay(cell: Cell) {
+  if (!cell.inMonth) {
+    cursor.value = { jy: cell.jy, jm: cell.jm };
+  }
+  const d = jalaliToDate(cell.jy, cell.jm, cell.jd);
+  if (props.mode === 'datetime') {
+    d.setHours(draftHour.value, draftMinute.value, 0, 0);
+    emitDate(d);
+    return;
+  }
+  emitDate(d);
+  hide();
+}
+
+function applyTime() {
+  if (props.mode === 'time') {
+    emitTime();
+    return;
+  }
+  const source = parsed.value ?? jalaliToDate(cursor.value.jy, cursor.value.jm, 1);
+  const j = dateToJalali(source);
+  const d = jalaliToDate(j.jy, j.jm, j.jd);
+  d.setHours(draftHour.value, draftMinute.value, 0, 0);
+  emitDate(d);
+}
+
+function pickToday() {
+  const d = new Date();
+  if (props.mode === 'time') {
+    draftHour.value = d.getHours();
+    draftMinute.value = d.getMinutes();
+    emitTime();
+    return;
+  }
+  if (props.mode === 'date') {
+    d.setHours(0, 0, 0, 0);
+  }
+  syncDraftFrom(d);
+  emitDate(d);
+  if (props.mode === 'date') hide();
+}
+
+function clear() {
+  model.value = '';
+  hide();
+}
+
+function onDocPointer(ev: PointerEvent) {
+  const target = ev.target as Node | null;
+  if (!target) return;
+  if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) return;
+  hide();
+}
+
+function onKeydown(ev: KeyboardEvent) {
+  if (ev.key === 'Escape' && open.value) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    hide();
+  }
+}
+
+watch(open, (value) => {
+  if (value) {
+    window.addEventListener('resize', onWindowChange);
+    window.addEventListener('scroll', onWindowChange, true);
+    document.addEventListener('pointerdown', onDocPointer, true);
+    window.addEventListener('keydown', onKeydown, true);
+    return;
+  }
+  window.removeEventListener('resize', onWindowChange);
+  window.removeEventListener('scroll', onWindowChange, true);
+  document.removeEventListener('pointerdown', onDocPointer, true);
+  window.removeEventListener('keydown', onKeydown, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onWindowChange);
+  window.removeEventListener('scroll', onWindowChange, true);
+  document.removeEventListener('pointerdown', onDocPointer, true);
+  window.removeEventListener('keydown', onKeydown, true);
+});
+</script>
+
+<template>
+  <div class="wrap" :class="{ disabled }">
+    <button
+      :id="id"
+      ref="triggerRef"
+      class="trigger"
+      type="button"
+      :disabled="disabled"
+      :aria-expanded="open"
+      :aria-required="required || undefined"
+      @click="toggle"
+    >
+      <span :class="{ empty: !display }">{{ display || emptyLabel }}</span>
+      <UiIcon :name="triggerIcon" :size="18" />
+    </button>
+
+    <Teleport to="body">
+      <div
+        v-if="open"
+        id="jalali-picker"
+        ref="panelRef"
+        class="panel"
+        role="dialog"
+        :style="{ top: `${top}px`, left: `${left}px` }"
+      >
+        <header v-if="mode !== 'time'" class="nav">
+          <button type="button" class="nav-btn" aria-label="ماه بعد" @click="goMonth(1)">
+            <UiIcon name="chevron" :size="16" />
+          </button>
+          <strong>{{ monthTitle }}</strong>
+          <button type="button" class="nav-btn next" aria-label="ماه قبل" @click="goMonth(-1)">
+            <UiIcon name="chevron" :size="16" />
+          </button>
+        </header>
+
+        <template v-if="mode !== 'time'">
+          <div class="week">
+            <span v-for="day in WEEKDAYS" :key="day">{{ day }}</span>
+          </div>
+          <div class="grid">
+            <button
+              v-for="cell in cells"
+              :key="cell.key"
+              type="button"
+              class="day"
+              :class="{ mute: !cell.inMonth, today: cell.isToday, on: cell.isSelected }"
+              @click="pickDay(cell)"
+            >
+              {{ toFaDigits(cell.jd) }}
+            </button>
+          </div>
+        </template>
+
+        <div v-if="mode === 'datetime' || mode === 'time'" class="time">
+          <label>
+            ساعت
+            <select v-model.number="draftHour" @change="applyTime">
+              <option v-for="h in hours" :key="h" :value="h">{{ toFaDigits(String(h).padStart(2, '0')) }}</option>
+            </select>
+          </label>
+          <label>
+            دقیقه
+            <select v-model.number="draftMinute" @change="applyTime">
+              <option v-for="m in minutes" :key="m" :value="m">{{ toFaDigits(String(m).padStart(2, '0')) }}</option>
+            </select>
+          </label>
+        </div>
+
+        <footer class="foot">
+          <button type="button" class="link" @click="pickToday">امروز</button>
+          <button
+            v-if="clearable && !required && model"
+            type="button"
+            class="link"
+            @click="clear"
+          >
+            پاک کردن
+          </button>
+          <button type="button" class="done" @click="hide">تأیید</button>
+        </footer>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.wrap {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+.trigger {
+  width: 100%;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  border: 1px solid var(--line, #e2e8f0);
+  border-radius: 12px;
+  padding: 0.7rem 0.85rem;
+  background: #fff;
+  color: #0f172a;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.trigger:focus {
+  outline: 2px solid var(--accent-soft, #ccfbf1);
+  border-color: var(--accent, #0d9488);
+}
+
+.trigger span {
+  min-width: 0;
+}
+
+.trigger .empty {
+  color: #94a3b8;
+}
+
+.trigger :deep(.ico) {
+  color: #0d9488;
+  flex-shrink: 0;
+}
+
+.disabled .trigger {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.panel {
+  position: fixed;
+  z-index: 120;
+  width: min(20.5rem, calc(100vw - 16px));
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
+  padding: 0.75rem 0.8rem 0.7rem;
+  font-family: IRANSans, Tahoma, sans-serif;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.55rem;
+}
+
+.nav strong {
+  font-size: 0.92rem;
+}
+
+.nav-btn {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.nav-btn.next :deep(.ico) {
+  transform: scaleX(-1);
+}
+
+.week,
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.15rem;
+}
+
+.week span {
+  text-align: center;
+  color: #94a3b8;
+  font-size: 0.72rem;
+  padding-bottom: 0.25rem;
+}
+
+.day {
+  height: 34px;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: #0f172a;
+  font: inherit;
+  cursor: pointer;
+}
+
+.day.mute {
+  color: #cbd5e1;
+}
+
+.day.today {
+  box-shadow: inset 0 0 0 1px #99f6e4;
+}
+
+.day.on,
+.day:hover {
+  background: #0d9488;
+  color: #fff;
+}
+
+.day.mute:hover {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.time {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin-top: 0.65rem;
+}
+
+.time label {
+  display: grid;
+  gap: 0.28rem;
+  color: #64748b;
+  font-size: 0.75rem;
+}
+
+.time select {
+  width: 100%;
+  min-height: 38px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 0.3rem 0.5rem;
+  background: #fff;
+  font: inherit;
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin-top: 0.7rem;
+}
+
+.link,
+.done {
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+}
+
+.link {
+  color: #0f766e;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.done {
+  margin-inline-start: auto;
+  background: #14b8a6;
+  color: #fff;
+  border-radius: 10px;
+  padding: 0.4rem 0.8rem;
+  font-weight: 800;
+  font-size: 0.8rem;
+}
+</style>
diff --git a/apps/web/src/components/NoteAiSuggestionPanel.vue b/apps/web/src/components/NoteAiSuggestionPanel.vue
index 6b315ae..bdd0aa9 100644
--- a/apps/web/src/components/NoteAiSuggestionPanel.vue
+++ b/apps/web/src/components/NoteAiSuggestionPanel.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, ref, watch } from 'vue';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import type { NoteAiPayloadDto, NoteAiSuggestionDto } from '@mento/shared';
 
 const props = defineProps<{
@@ -190,7 +191,7 @@ function formatPayloadSummary(value: NoteAiPayloadDto | null) {
           کار بعدی
         </label>
         <input v-model="nextTitle" type="text" placeholder="عنوان کار بعدی" />
-        <input v-model="nextDueAt" type="datetime-local" />
+        <JalaliDateInput v-model="nextDueAt" mode="datetime" />
       </div>
 
       <div v-if="memoryItems.length" class="block">
@@ -275,7 +276,6 @@ header {
 }
 
 input[type='text'],
-input[type='datetime-local'],
 textarea {
   border: 1px solid var(--line);
   border-radius: 10px;
diff --git a/apps/web/src/components/UiIcon.vue b/apps/web/src/components/UiIcon.vue
index 71d29c5..df069a5 100644
--- a/apps/web/src/components/UiIcon.vue
+++ b/apps/web/src/components/UiIcon.vue
@@ -12,6 +12,7 @@ defineProps<{
     | 'sparkle'
     | 'bell'
     | 'calendar'
+    | 'calendar-plus'
     | 'mail'
     | 'megaphone'
     | 'send'
@@ -19,7 +20,31 @@ defineProps<{
     | 'warning'
     | 'trend'
     | 'phone'
-    | 'trophy';
+    | 'trophy'
+    | 'chat'
+    | 'dots'
+    | 'dots-v'
+    | 'document'
+    | 'bag'
+    | 'clock'
+    | 'user-plus'
+    | 'plus'
+    | 'chevron'
+    | 'star'
+    | 'filter'
+    | 'lightbulb'
+    | 'building'
+    | 'user'
+    | 'flag'
+    | 'refresh'
+    | 'x'
+    | 'mic'
+    | 'trash'
+    | 'stop'
+    | 'check-plain'
+    | 'calendar-sun'
+    | 'calendar-edit'
+    | 'minus';
   size?: number;
 }>();
 </script>
@@ -88,6 +113,22 @@ defineProps<{
       <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 === 'calendar-plus'">
+      <rect x="3.5" y="5" width="17" height="15" rx="2" />
+      <path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
+      <path d="M12 13v5M9.5 15.5h5" />
+    </template>
+    <template v-else-if="name === 'calendar-sun'">
+      <rect x="3.5" y="5" width="17" height="15" rx="2" />
+      <path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
+      <circle cx="12" cy="15.2" r="2.1" />
+      <path d="M12 11.4v.7M12 18.3v.7M8.9 15.2h.7M14.4 15.2h.7M9.6 12.8l.5.5M13.9 17.1l.5.5M13.9 12.8l-.5.5M9.6 17.1l-.5.5" />
+    </template>
+    <template v-else-if="name === 'calendar-edit'">
+      <rect x="3.5" y="5" width="17" height="15" rx="2" />
+      <path d="M8 3.5V7M16 3.5V7M3.5 10h17" />
+      <path d="M11.2 18.2 16.6 12.8l1.5 1.5-5.4 5.4H11.2v-1.5Z" />
+    </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" />
@@ -122,6 +163,95 @@ defineProps<{
       <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>
+    <template v-else-if="name === 'chat'">
+      <path d="M5 18.5 6.2 15A7.5 7.5 0 1 1 9 19.2L5 18.5Z" />
+      <path d="M8.5 11h7M8.5 14h4.5" />
+    </template>
+    <template v-else-if="name === 'dots'">
+      <circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none" />
+      <circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none" />
+    </template>
+    <template v-else-if="name === 'dots-v'">
+      <circle cx="12" cy="5" r="1.4" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="19" r="1.4" fill="currentColor" stroke="none" />
+    </template>
+    <template v-else-if="name === 'document'">
+      <path d="M7 4.5h7.5L19 9v10.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 6 19.5v-14A1.5 1.5 0 0 1 7.5 4.5H7Z" />
+      <path d="M14.5 4.5V9H19" />
+      <path d="M9 13h6M9 16.5h4" />
+    </template>
+    <template v-else-if="name === 'bag'">
+      <path d="M6.5 8h11l1 12.5H5.5L6.5 8Z" />
+      <path d="M9 8V6.5A3 3 0 0 1 12 3.5 3 3 0 0 1 15 6.5V8" />
+    </template>
+    <template v-else-if="name === 'clock'">
+      <circle cx="12" cy="12" r="8" />
+      <path d="M12 8v4.2l2.8 1.8" />
+    </template>
+    <template v-else-if="name === 'user-plus'">
+      <circle cx="10" cy="8" r="3" />
+      <path d="M4 19c.7-3 2.6-4.5 6-4.5s5.3 1.5 6 4.5" />
+      <path d="M17 8v5M14.5 10.5h5" />
+    </template>
+    <template v-else-if="name === 'plus'">
+      <path d="M12 6v12M6 12h12" />
+    </template>
+    <template v-else-if="name === 'chevron'">
+      <path d="m9 6 6 6-6 6" />
+    </template>
+    <template v-else-if="name === 'star'">
+      <path d="m12 3.4 2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.8 7.2 18.3l.9-5.4-3.9-3.8 5.4-.8L12 3.4Z" />
+    </template>
+    <template v-else-if="name === 'filter'">
+      <path d="M4 6h16M7 12h10M10 18h4" />
+    </template>
+    <template v-else-if="name === 'lightbulb'">
+      <path d="M9 18h6" />
+      <path d="M10 21h4" />
+      <path d="M8 14.2A5.2 5.2 0 1 1 16 14.2C16 16 14.7 17 14 18H10c-.7-1-2-2-2-3.8Z" />
+    </template>
+    <template v-else-if="name === 'building'">
+      <path d="M5 21V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5V21" />
+      <path d="M15 10h2.5A1.5 1.5 0 0 1 19 11.5V21" />
+      <path d="M8 8h2M8 12h2M8 16h2M12 8h1M12 12h1M12 16h1" />
+      <path d="M4 21h16" />
+    </template>
+    <template v-else-if="name === 'user'">
+      <circle cx="12" cy="8" r="3.2" />
+      <path d="M5 19c.9-3.2 3.2-4.8 7-4.8s6.1 1.6 7 4.8" />
+    </template>
+    <template v-else-if="name === 'flag'">
+      <path d="M6 21V4" />
+      <path d="M6 4h10.5l-1.8 3.4L16.5 11H6" />
+    </template>
+    <template v-else-if="name === 'refresh'">
+      <path d="M20 12a8 8 0 1 1-2.2-5.5" />
+      <path d="M20 4v5h-5" />
+    </template>
+    <template v-else-if="name === 'x'">
+      <path d="M6 6 18 18M18 6 6 18" />
+    </template>
+    <template v-else-if="name === 'mic'">
+      <rect x="9" y="3.5" width="6" height="10" rx="3" />
+      <path d="M7 11.5a5 5 0 0 0 10 0" />
+      <path d="M12 16.5V20M9 20h6" />
+    </template>
+    <template v-else-if="name === 'trash'">
+      <path d="M5 7h14" />
+      <path d="M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7" />
+      <path d="M7.5 7 8.3 19a1.5 1.5 0 0 0 1.5 1.4h4.4a1.5 1.5 0 0 0 1.5-1.4L16.5 7" />
+    </template>
+    <template v-else-if="name === 'stop'">
+      <rect x="7.5" y="7.5" width="9" height="9" rx="1.6" fill="currentColor" stroke="none" />
+    </template>
+    <template v-else-if="name === 'minus'">
+      <path d="M6 12h12" />
+    </template>
+    <template v-else-if="name === 'check-plain'">
+      <path d="m5.5 12.2 4.2 4.3 8.8-9" />
+    </template>
   </svg>
 </template>
 
diff --git a/apps/web/src/components/UserAvatar.vue b/apps/web/src/components/UserAvatar.vue
new file mode 100644
index 0000000..12a3e73
--- /dev/null
+++ b/apps/web/src/components/UserAvatar.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { personInitials } from '@/lib/person-insights';
+
+const props = withDefaults(
+  defineProps<{
+    name?: string | null;
+    src?: string | null;
+    size?: number;
+  }>(),
+  {
+    name: '',
+    src: '/brand/user-avatar.png',
+    size: 28,
+  },
+);
+
+const initials = computed(() => personInitials(props.name));
+const failed = ref(false);
+</script>
+
+<template>
+  <span class="user-avatar" :style="{ width: `${size}px`, height: `${size}px` }" :title="name || undefined">
+    <img
+      v-if="src && !failed"
+      :src="src"
+      :alt="name || 'آواتار'"
+      @error="failed = true"
+    />
+    <em v-else>{{ initials }}</em>
+  </span>
+</template>
+
+<style scoped>
+.user-avatar {
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: linear-gradient(145deg, #5eead4, #0f766e);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ccfbf1;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+em {
+  font-style: normal;
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.62rem;
+  line-height: 1;
+}
+</style>
diff --git a/apps/web/src/components/activities/ActivityCommentSheet.vue b/apps/web/src/components/activities/ActivityCommentSheet.vue
new file mode 100644
index 0000000..df65849
--- /dev/null
+++ b/apps/web/src/components/activities/ActivityCommentSheet.vue
@@ -0,0 +1,897 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { api } from '@/lib/api';
+import {
+  calendarDaysBetween,
+  formatClockFa,
+  formatJalaliDay,
+  toFaDigits,
+} from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
+import type { ActivityDto, ActivityType, OrganizationDto, OrgUserDto } from '@mento/shared';
+
+const props = defineProps<{
+  activity: ActivityDto;
+  saving?: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  submit: [text: string];
+}>();
+
+const typeIcon: Record<ActivityType, 'phone' | 'users' | 'check' | 'chat'> = {
+  call: 'phone',
+  meeting: 'users',
+  task: 'check',
+  note: 'chat',
+};
+
+const comment = ref('');
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+const orgName = ref('سازمان');
+const users = ref<OrgUserDto[]>([]);
+const mentionOpen = ref(false);
+const voiceTip = ref(localStorage.getItem('mento.voiceTipSeen') !== '1');
+const voiceError = ref('');
+const recording = ref(false);
+const seconds = ref(0);
+const pullY = ref(0);
+
+let recognition: SpeechRecognitionLike | null = null;
+let timer: number | null = null;
+let snapshot = '';
+let finals = '';
+let keepOnEnd = true;
+let pendingSubmit = false;
+let pulling = false;
+let pullStart = 0;
+
+type SpeechRecognitionLike = {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start: () => void;
+  stop: () => void;
+  abort: () => void;
+  onresult: ((ev: SpeechRecognitionEventLike) => void) | null;
+  onerror: ((ev: { error?: string }) => void) | null;
+  onend: (() => void) | null;
+};
+
+type SpeechRecognitionEventLike = {
+  resultIndex: number;
+  results: ArrayLike<{ isFinal: boolean; 0: { transcript: string } }>;
+};
+
+const subtitle = computed(() => {
+  const a = props.activity;
+  return a.deal?.title || a.company?.name || a.person?.fullName || '';
+});
+
+const dueLabel = computed(() => {
+  const due = props.activity.dueAt;
+  if (!due) return 'بدون موعد';
+  const d = new Date(due);
+  const days = calendarDaysBetween(d, new Date());
+  const clock = formatClockFa(d);
+  if (days === 0) return `امروز ${clock}`;
+  if (days === 1) return `دیروز ${clock}`;
+  if (days === -1) return `فردا ${clock}`;
+  return `${formatJalaliDay(d)} ${clock}`;
+});
+
+const timerLabel = computed(() => {
+  const m = String(Math.floor(seconds.value / 60)).padStart(2, '0');
+  const s = String(seconds.value % 60).padStart(2, '0');
+  return `${toFaDigits(m)}:${toFaDigits(s)}`;
+});
+
+const canSubmit = computed(() => comment.value.trim().length > 0 && !props.saving);
+
+function speechCtor(): (new () => SpeechRecognitionLike) | null {
+  const w = window as Window & {
+    SpeechRecognition?: new () => SpeechRecognitionLike;
+    webkitSpeechRecognition?: new () => SpeechRecognitionLike;
+  };
+  return w.SpeechRecognition || w.webkitSpeechRecognition || null;
+}
+
+function applyTranscript(interim = '') {
+  const extra = `${finals}${interim}`.trim();
+  comment.value = extra ? `${snapshot}${snapshot && !snapshot.endsWith(' ') ? ' ' : ''}${extra}` : snapshot;
+}
+
+function startTimer() {
+  stopTimer();
+  seconds.value = 0;
+  timer = window.setInterval(() => {
+    seconds.value += 1;
+  }, 1000);
+}
+
+function stopTimer() {
+  if (timer != null) {
+    window.clearInterval(timer);
+    timer = null;
+  }
+}
+
+function stopRecognition(keep: boolean) {
+  keepOnEnd = keep;
+  if (!recognition) {
+    finishRecording(keep);
+    return;
+  }
+  try {
+    if (keep) recognition.stop();
+    else recognition.abort();
+  } catch {
+    finishRecording(keep);
+    return;
+  }
+  window.setTimeout(() => {
+    if (recording.value) finishRecording(keepOnEnd);
+  }, 400);
+}
+
+function finishRecording(keep: boolean) {
+  if (!recording.value && !recognition) return;
+  stopTimer();
+  recording.value = false;
+  pullY.value = 0;
+  recognition = null;
+  if (!keep) {
+    comment.value = snapshot;
+    pendingSubmit = false;
+  } else {
+    applyTranscript('');
+  }
+  finals = '';
+  if (pendingSubmit) {
+    pendingSubmit = false;
+    submit();
+  }
+}
+
+function startRecording() {
+  voiceError.value = '';
+  mentionOpen.value = false;
+  if (voiceTip.value) {
+    voiceTip.value = false;
+    localStorage.setItem('mento.voiceTipSeen', '1');
+  }
+  const Ctor = speechCtor();
+  if (!Ctor) {
+    voiceError.value = 'تایپ صوتی در این مرورگر پشتیبانی نمی‌شود.';
+    return;
+  }
+  snapshot = comment.value;
+  finals = '';
+  keepOnEnd = true;
+  const rec = new Ctor();
+  rec.lang = 'fa-IR';
+  rec.continuous = true;
+  rec.interimResults = true;
+  rec.onresult = (ev) => {
+    let interim = '';
+    for (let i = ev.resultIndex; i < ev.results.length; i += 1) {
+      const piece = ev.results[i];
+      if (!piece) continue;
+      const text = piece[0]?.transcript ?? '';
+      if (piece.isFinal) finals += `${text} `;
+      else interim += text;
+    }
+    applyTranscript(interim);
+  };
+  rec.onerror = (ev) => {
+    if (ev.error === 'aborted' || ev.error === 'no-speech') return;
+    voiceError.value = 'ضبط صدا ناموفق بود. دوباره تلاش کنید.';
+    finishRecording(true);
+  };
+  rec.onend = () => {
+    finishRecording(keepOnEnd);
+  };
+  recognition = rec;
+  recording.value = true;
+  startTimer();
+  try {
+    rec.start();
+  } catch {
+    voiceError.value = 'شروع ضبط صدا ممکن نشد.';
+    finishRecording(false);
+  }
+}
+
+function discardRecording() {
+  pendingSubmit = false;
+  stopRecognition(false);
+}
+
+function keepRecording() {
+  pendingSubmit = false;
+  stopRecognition(true);
+}
+
+function sendRecording() {
+  pendingSubmit = true;
+  stopRecognition(true);
+}
+
+function submit() {
+  if (recording.value) keepRecording();
+  const text = comment.value.trim();
+  if (!text || props.saving) return;
+  emit('submit', text);
+}
+
+function close() {
+  if (recording.value) discardRecording();
+  emit('close');
+}
+
+function insertMention(name: string) {
+  const token = `@${name} `;
+  const el = textareaRef.value;
+  if (!el) {
+    comment.value += token;
+    mentionOpen.value = false;
+    return;
+  }
+  const start = el.selectionStart ?? comment.value.length;
+  const end = el.selectionEnd ?? start;
+  comment.value = `${comment.value.slice(0, start)}${token}${comment.value.slice(end)}`;
+  mentionOpen.value = false;
+  void nextTick(() => {
+    el.focus();
+    const pos = start + token.length;
+    el.setSelectionRange(pos, pos);
+  });
+}
+
+function onKeydown(ev: KeyboardEvent) {
+  if (ev.key === 'Escape') {
+    ev.preventDefault();
+    if (mentionOpen.value) {
+      mentionOpen.value = false;
+      return;
+    }
+    if (recording.value) {
+      discardRecording();
+      return;
+    }
+    close();
+  }
+}
+
+function onPullStart(ev: PointerEvent) {
+  if (!recording.value) return;
+  const target = ev.target as HTMLElement | null;
+  if (target?.closest('button')) return;
+  pulling = true;
+  pullStart = ev.clientY;
+  pullY.value = 0;
+  (ev.currentTarget as HTMLElement | null)?.setPointerCapture?.(ev.pointerId);
+}
+
+function onPullMove(ev: PointerEvent) {
+  if (!pulling) return;
+  pullY.value = Math.max(0, ev.clientY - pullStart);
+}
+
+function onPullEnd() {
+  if (!pulling) return;
+  const shouldCancel = pullY.value > 72;
+  pulling = false;
+  pullY.value = 0;
+  if (shouldCancel) discardRecording();
+}
+
+onMounted(async () => {
+  document.body.style.overflow = 'hidden';
+  window.addEventListener('keydown', onKeydown);
+  await nextTick();
+  textareaRef.value?.focus();
+  try {
+    const [{ data: org }, usersRes] = await Promise.all([
+      api.get<OrganizationDto>('/organizations/current'),
+      api.get<OrgUserDto[]>('/users').catch(() => ({ data: [] as OrgUserDto[] })),
+    ]);
+    if (org.name) orgName.value = org.name;
+    users.value = usersRes.data;
+    if (!users.value.length && props.activity.assignee) {
+      users.value = [
+        {
+          id: props.activity.assignee.id,
+          email: '',
+          fullName: props.activity.assignee.fullName,
+          role: 'sales',
+          createdAt: '',
+        },
+      ];
+    }
+  } catch {
+    orgName.value = 'سازمان';
+  }
+});
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = '';
+  window.removeEventListener('keydown', onKeydown);
+  pendingSubmit = false;
+  stopTimer();
+  if (recognition) {
+    try {
+      recognition.abort();
+    } catch {
+      /* ignore */
+    }
+    recognition = null;
+  }
+  recording.value = false;
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="layer" role="presentation">
+      <button class="backdrop" type="button" aria-label="بستن" @click="close" />
+      <section
+        class="sheet"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="comment-sheet-title"
+      >
+        <div class="handle" aria-hidden="true" />
+
+        <header class="head">
+          <button class="icon" type="button" aria-label="ثبت نظر" :disabled="!canSubmit" @click="submit">
+            <UiIcon name="check-plain" :size="22" />
+          </button>
+          <h2 id="comment-sheet-title">ثبت نظر</h2>
+          <button class="icon" type="button" aria-label="بستن" @click="close">
+            <UiIcon name="x" :size="20" />
+          </button>
+        </header>
+
+        <div class="body">
+          <article class="ctx">
+            <div class="ctx-copy">
+              <h3>{{ activity.title }}</h3>
+              <p v-if="subtitle" class="sub">
+                <UiIcon name="building" :size="14" />
+                {{ subtitle }}
+              </p>
+              <div class="meta">
+                <span>
+                  <UiIcon name="user" :size="14" />
+                  {{ activity.assignee?.fullName || 'بدون مسئول' }}
+                </span>
+                <i />
+                <span>
+                  <UiIcon name="calendar" :size="14" />
+                  {{ dueLabel }}
+                </span>
+              </div>
+            </div>
+            <span class="type" :class="activity.type">
+              <UiIcon :name="typeIcon[activity.type]" :size="22" />
+            </span>
+          </article>
+
+          <div class="editor">
+            <textarea
+              ref="textareaRef"
+              v-model="comment"
+              :disabled="recording"
+              rows="6"
+              placeholder="متن خود را بنویسید..."
+            />
+            <div class="tools">
+              <div class="tool-wrap">
+                <button
+                  class="tool"
+                  type="button"
+                  aria-label="منشن"
+                  :disabled="recording"
+                  @click="mentionOpen = !mentionOpen"
+                >
+                  @
+                </button>
+                <ul v-if="mentionOpen" class="mentions">
+                  <li v-if="!users.length" class="empty">کاربری برای منشن یافت نشد.</li>
+                  <li v-for="user in users" :key="user.id">
+                    <button type="button" @click="insertMention(user.fullName)">
+                      {{ user.fullName }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+              <div class="tool-wrap">
+                <p v-if="voiceTip && !recording" class="tip">تایپ صوتی را امتحان کنید! 🎙️✨</p>
+                <button
+                  class="tool mic"
+                  type="button"
+                  aria-label="تایپ صوتی"
+                  :class="{ on: recording }"
+                  @click="recording ? keepRecording() : startRecording()"
+                >
+                  <UiIcon name="mic" :size="18" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <p v-if="voiceError" class="voice-err">{{ voiceError }}</p>
+
+          <p class="notice">
+            <UiIcon name="lightbulb" :size="18" />
+            یادداشت شما فقط برای اعضای تیم و مدیران {{ orgName }} قابل مشاهده خواهد بود.
+          </p>
+
+          <div v-if="!recording" class="actions">
+            <button class="act primary" type="button" :disabled="!canSubmit" @click="submit">
+              ثبت نظر
+            </button>
+            <button class="act ghost" type="button" :disabled="saving" @click="close">انصراف</button>
+          </div>
+
+          <div
+            v-else
+            class="recorder"
+            :style="{ transform: pullY ? `translateY(${pullY}px)` : undefined }"
+            @pointerdown="onPullStart"
+            @pointermove="onPullMove"
+            @pointerup="onPullEnd"
+            @pointercancel="onPullEnd"
+          >
+            <div class="rec-top">
+              <strong>در حال ضبط صدا...</strong>
+              <span>{{ timerLabel }}</span>
+            </div>
+            <div class="rec-controls">
+              <button class="rec-side" type="button" aria-label="ارسال نظر" @click="sendRecording">
+                <UiIcon name="send" :size="18" />
+              </button>
+              <button class="rec-stop" type="button" aria-label="توقف ضبط" @click="keepRecording">
+                <UiIcon name="stop" :size="22" />
+              </button>
+              <button class="rec-side" type="button" aria-label="حذف ضبط" @click="discardRecording">
+                <UiIcon name="trash" :size="18" />
+              </button>
+            </div>
+            <p class="pull">
+              برای لغو، بیرون بکشید
+              <UiIcon name="chevron" :size="14" />
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.layer {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.backdrop {
+  display: none;
+}
+
+.sheet {
+  width: 100%;
+  height: 100dvh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  font-family: IRANSans, Tahoma, sans-serif;
+}
+
+.handle {
+  width: 42px;
+  height: 4px;
+  margin: 0.55rem auto 0.15rem;
+  border-radius: 999px;
+  background: #d4d4d8;
+}
+
+.head {
+  display: grid;
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
+  padding: 0.15rem 0.7rem 0.45rem;
+}
+
+.head h2 {
+  margin: 0;
+  text-align: center;
+  font-size: 1.05rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: none;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.icon:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.body {
+  flex: 1;
+  overflow: auto;
+  padding: 0.35rem 1rem calc(1rem + env(safe-area-inset-bottom));
+  display: grid;
+  align-content: start;
+  gap: 0.85rem;
+}
+
+.ctx {
+  display: flex;
+  gap: 0.8rem;
+  align-items: flex-start;
+  padding: 0.9rem 0.95rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  background: #fff;
+}
+
+.type {
+  width: 46px;
+  height: 46px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  color: #fff;
+}
+
+.type.call {
+  background: #0d9488;
+}
+
+.type.meeting {
+  background: #7c3aed;
+}
+
+.type.task {
+  background: #ea580c;
+}
+
+.type.note {
+  background: #2563eb;
+}
+
+.ctx-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.ctx-copy h3 {
+  margin: 0.1rem 0 0;
+  font-size: 0.98rem;
+  font-weight: 800;
+  line-height: 1.55;
+}
+
+.sub,
+.meta span {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  color: #64748b;
+  font-size: 0.8rem;
+}
+
+.sub {
+  margin: 0.28rem 0 0;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  margin-top: 0.7rem;
+  padding-top: 0.65rem;
+  border-top: 1px solid #f1f5f9;
+}
+
+.meta i {
+  width: 1px;
+  height: 14px;
+  background: #e2e8f0;
+}
+
+.editor {
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background: #fff;
+  min-height: 11.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor textarea {
+  flex: 1;
+  width: 100%;
+  min-height: 8.5rem;
+  border: 0;
+  resize: none;
+  padding: 0.9rem 0.95rem 0.2rem;
+  font: inherit;
+  font-size: 0.95rem;
+  line-height: 1.9;
+  color: #0f172a;
+  background: transparent;
+}
+
+.editor textarea:focus {
+  outline: none;
+}
+
+.editor textarea::placeholder {
+  color: #94a3b8;
+}
+
+.tools {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 0.35rem 0.5rem 0.5rem;
+}
+
+.tool-wrap {
+  position: relative;
+}
+
+.tool {
+  width: 36px;
+  height: 36px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fff;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.tool.mic {
+  color: #0d9488;
+}
+
+.tool.on,
+.tool.mic:hover {
+  background: #ecfdf5;
+}
+
+.tip {
+  position: absolute;
+  inset-inline-end: 0;
+  bottom: calc(100% + 8px);
+  margin: 0;
+  white-space: nowrap;
+  background: #111827;
+  color: #fff;
+  font-size: 0.74rem;
+  font-weight: 700;
+  padding: 0.42rem 0.65rem;
+  border-radius: 10px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
+}
+
+.tip::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: 14px;
+  top: 100%;
+  border: 6px solid transparent;
+  border-top-color: #111827;
+}
+
+.mentions {
+  position: absolute;
+  inset-inline-start: 0;
+  bottom: calc(100% + 6px);
+  margin: 0;
+  padding: 0.3rem;
+  list-style: none;
+  min-width: 11.5rem;
+  max-height: 12rem;
+  overflow: auto;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
+  z-index: 2;
+}
+
+.mentions button,
+.mentions .empty {
+  width: 100%;
+  border: 0;
+  background: none;
+  text-align: start;
+  font: inherit;
+  padding: 0.55rem 0.65rem;
+  border-radius: 8px;
+  color: #0f172a;
+  cursor: pointer;
+}
+
+.mentions .empty {
+  color: #94a3b8;
+  cursor: default;
+}
+
+.mentions button:hover {
+  background: #f1f5f9;
+}
+
+.voice-err {
+  margin: -0.35rem 0 0;
+  color: #b91c1c;
+  font-size: 0.8rem;
+}
+
+.notice {
+  margin: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.72rem 0.8rem;
+  border-radius: 12px;
+  background: #ecfdf5;
+  color: #0f766e;
+  font-size: 0.8rem;
+  line-height: 1.7;
+}
+
+.notice :deep(.ico) {
+  margin-top: 0.12rem;
+  flex-shrink: 0;
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.65rem;
+}
+
+.act {
+  min-height: 48px;
+  border-radius: 14px;
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.act.primary {
+  border: 0;
+  background: #14b8a6;
+  color: #fff;
+}
+
+.act.ghost {
+  border: 1.5px solid #14b8a6;
+  background: #fff;
+  color: #0f766e;
+}
+
+.act:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.recorder {
+  border: 1.5px dashed #cbd5e1;
+  border-radius: 16px;
+  padding: 0.95rem 0.85rem 0.7rem;
+  text-align: center;
+  touch-action: none;
+}
+
+.rec-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #334155;
+  font-size: 0.92rem;
+}
+
+.rec-top strong {
+  font-weight: 800;
+}
+
+.rec-top span {
+  font-variant-numeric: tabular-nums;
+  color: #64748b;
+}
+
+.rec-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 1rem 1.4rem 0.55rem;
+}
+
+.rec-side {
+  width: 42px;
+  height: 42px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.rec-stop {
+  width: 68px;
+  height: 68px;
+  border: 0;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
+  display: grid;
+  place-items: center;
+  box-shadow: 0 10px 24px rgba(20, 184, 166, 0.35);
+  cursor: pointer;
+}
+
+.pull {
+  margin: 0.35rem 0 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  color: #94a3b8;
+  font-size: 0.78rem;
+}
+
+.pull :deep(.ico) {
+  transform: rotate(90deg);
+}
+
+@media (min-width: 900px) {
+  .layer {
+    background: rgba(15, 23, 42, 0.28);
+    align-items: center;
+    padding: 1.2rem;
+  }
+
+  .backdrop {
+    display: block;
+    position: absolute;
+    inset: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .sheet {
+    position: relative;
+    max-width: 480px;
+    height: min(92dvh, 860px);
+    border-radius: 22px;
+    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
+  }
+}
+</style>
diff --git a/apps/web/src/components/activities/ActivityPostponeSheet.vue b/apps/web/src/components/activities/ActivityPostponeSheet.vue
new file mode 100644
index 0000000..917bb48
--- /dev/null
+++ b/apps/web/src/components/activities/ActivityPostponeSheet.vue
@@ -0,0 +1,458 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import {
+  formatClockFa,
+  formatJalaliDayClock,
+  startOfLocalDay,
+} from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
+
+type PostponeKey = 'm15' | 'm30' | 'h1' | 'tomorrow-am' | 'tomorrow-pm' | 'custom';
+
+const props = defineProps<{
+  dueAt?: string | null;
+  saving?: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  submit: [iso: string];
+}>();
+
+const nowTick = ref(Date.now());
+const selected = ref<PostponeKey | null>(null);
+const customLocal = ref('');
+let tickTimer: number | null = null;
+
+const base = computed(() => {
+  const now = new Date(nowTick.value);
+  const due = props.dueAt ? new Date(props.dueAt) : now;
+  if (Number.isNaN(due.getTime()) || due.getTime() <= now.getTime()) return now;
+  return due;
+});
+
+function addMinutes(mins: number) {
+  return new Date(base.value.getTime() + mins * 60_000);
+}
+
+function tomorrowAt(hour: number, minute = 0) {
+  const d = startOfLocalDay(new Date(nowTick.value));
+  d.setDate(d.getDate() + 1);
+  d.setHours(hour, minute, 0, 0);
+  return d;
+}
+
+const options = computed(() => {
+  const m15 = addMinutes(15);
+  const m30 = addMinutes(30);
+  const h1 = addMinutes(60);
+  const am = tomorrowAt(10);
+  const pm = tomorrowAt(13);
+  return [
+    {
+      key: 'm15' as const,
+      icon: 'refresh' as const,
+      label: 'یک ربع دیرتر',
+      time: formatClockFa(m15),
+      at: m15,
+    },
+    {
+      key: 'm30' as const,
+      icon: 'refresh' as const,
+      label: 'نیم ساعت دیرتر',
+      time: formatClockFa(m30),
+      at: m30,
+    },
+    {
+      key: 'h1' as const,
+      icon: 'refresh' as const,
+      label: 'یک ساعت دیرتر',
+      time: formatClockFa(h1),
+      at: h1,
+    },
+    {
+      key: 'tomorrow-am' as const,
+      icon: 'calendar-sun' as const,
+      label: 'فردا صبح',
+      time: `فردا ${formatClockFa(am)}`,
+      at: am,
+    },
+    {
+      key: 'tomorrow-pm' as const,
+      icon: 'calendar-sun' as const,
+      label: 'فردا بعد از ظهر',
+      time: `فردا ${formatClockFa(pm)}`,
+      at: pm,
+    },
+  ];
+});
+
+function toLocalInput(d: Date) {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+const customDate = computed(() => {
+  if (!customLocal.value) return null;
+  const d = new Date(customLocal.value);
+  return Number.isNaN(d.getTime()) ? null : d;
+});
+
+const customPreview = computed(() =>
+  customDate.value ? formatJalaliDayClock(customDate.value) : 'تاریخ و ساعت را انتخاب کنید',
+);
+
+const canSubmit = computed(() => {
+  if (props.saving || !selected.value) return false;
+  if (selected.value === 'custom') return Boolean(customDate.value);
+  return true;
+});
+
+function chosenDate(): Date | null {
+  if (selected.value === 'custom') return customDate.value;
+  return options.value.find((item) => item.key === selected.value)?.at ?? null;
+}
+
+function pick(key: PostponeKey) {
+  selected.value = key;
+  if (key === 'custom' && !customLocal.value) {
+    customLocal.value = toLocalInput(addMinutes(60));
+  }
+}
+
+function submit() {
+  const at = chosenDate();
+  if (!at || props.saving) return;
+  emit('submit', at.toISOString());
+}
+
+function close() {
+  emit('close');
+}
+
+function onKeydown(ev: KeyboardEvent) {
+  if (ev.key === 'Escape') {
+    ev.preventDefault();
+    close();
+  }
+}
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden';
+  window.addEventListener('keydown', onKeydown);
+  tickTimer = window.setInterval(() => {
+    nowTick.value = Date.now();
+  }, 15_000);
+});
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = '';
+  window.removeEventListener('keydown', onKeydown);
+  if (tickTimer != null) window.clearInterval(tickTimer);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="layer" role="presentation">
+      <button class="backdrop" type="button" aria-label="بستن" @click="close" />
+      <section class="sheet" role="dialog" aria-modal="true" aria-labelledby="postpone-title">
+        <div class="handle" aria-hidden="true" />
+
+        <header class="head">
+          <button class="icon" type="button" aria-label="تأیید تعویق" :disabled="!canSubmit" @click="submit">
+            <UiIcon name="check-plain" :size="22" />
+          </button>
+          <div class="titles">
+            <h2 id="postpone-title">به تعویق انداختن فعالیت</h2>
+          </div>
+          <button class="icon" type="button" aria-label="بستن" @click="close">
+            <UiIcon name="x" :size="20" />
+          </button>
+        </header>
+
+        <p class="lead">زمان جدید برای این فعالیت را انتخاب کنید.</p>
+
+        <div class="body">
+          <button
+            v-for="item in options"
+            :key="item.key"
+            class="card"
+            type="button"
+            :class="{ on: selected === item.key }"
+            :disabled="saving"
+            @click="pick(item.key)"
+          >
+            <span class="label">{{ item.label }}</span>
+            <span class="aside">
+              <span class="ico-box">
+                <UiIcon :name="item.icon" :size="20" />
+              </span>
+              <span class="when">{{ item.time }}</span>
+            </span>
+          </button>
+
+          <button
+            class="card custom"
+            type="button"
+            :class="{ on: selected === 'custom' }"
+            :disabled="saving"
+            @click="pick('custom')"
+          >
+            <span class="copy">
+              <strong>تنظیم زمان دلخواه</strong>
+              <small>انتخاب تاریخ و ساعت</small>
+            </span>
+            <span class="aside">
+              <span class="ico-box">
+                <UiIcon name="calendar-edit" :size="20" />
+              </span>
+            </span>
+          </button>
+
+          <div v-if="selected === 'custom'" class="custom-box">
+            <label class="picker">
+              <span>تاریخ و ساعت جدید</span>
+              <JalaliDateInput v-model="customLocal" mode="datetime" />
+            </label>
+            <p class="preview">{{ customPreview }}</p>
+          </div>
+
+          <p class="notice">
+            <UiIcon name="lightbulb" :size="18" />
+            با تعویق انداختن، این فعالیت در زمان جدید به لیست فعالیت‌های شما منتقل می‌شود.
+          </p>
+        </div>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.layer {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.backdrop {
+  display: none;
+}
+
+.sheet {
+  width: 100%;
+  height: 100dvh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  font-family: IRANSans, Tahoma, sans-serif;
+}
+
+.handle {
+  width: 42px;
+  height: 4px;
+  margin: 0.55rem auto 0.15rem;
+  border-radius: 999px;
+  background: #d4d4d8;
+}
+
+.head {
+  display: grid;
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
+  padding: 0.1rem 0.7rem 0.15rem;
+}
+
+.titles h2,
+.lead {
+  margin: 0;
+  text-align: center;
+}
+
+.titles h2 {
+  font-size: 1.02rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.lead {
+  color: #94a3b8;
+  font-size: 0.82rem;
+  padding: 0 1.2rem 0.55rem;
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: none;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.icon:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.body {
+  flex: 1;
+  overflow: auto;
+  padding: 0.15rem 1rem calc(1rem + env(safe-area-inset-bottom));
+  display: grid;
+  align-content: start;
+  gap: 0.55rem;
+}
+
+.card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  min-height: 72px;
+  padding: 0.7rem 0.9rem;
+  border: 1px solid #e8eef3;
+  border-radius: 16px;
+  background: #fff;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.card.on {
+  border-color: #99f6e4;
+  background: #f0fdfa;
+  box-shadow: 0 0 0 1px #99f6e4;
+}
+
+.card:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.label,
+.copy strong {
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.copy {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.copy small {
+  color: #94a3b8;
+  font-size: 0.78rem;
+}
+
+.aside {
+  display: grid;
+  justify-items: center;
+  gap: 0.28rem;
+  min-width: 3.6rem;
+  flex-shrink: 0;
+}
+
+.ico-box {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: #e6f7f4;
+  color: #0d9488;
+  display: grid;
+  place-items: center;
+}
+
+.when {
+  color: #0d9488;
+  font-size: 0.74rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.custom-box {
+  border: 1px solid #e8eef3;
+  border-radius: 16px;
+  padding: 0.85rem 0.9rem;
+  display: grid;
+  gap: 0.55rem;
+}
+
+.picker {
+  display: grid;
+  gap: 0.4rem;
+  color: #64748b;
+  font-size: 0.8rem;
+}
+
+.picker input {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.45rem 0.7rem;
+  font: inherit;
+  color: #0f172a;
+  background: #fff;
+}
+
+.preview {
+  margin: 0;
+  color: #0f766e;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.notice {
+  margin: 0.35rem 0 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  padding: 0.85rem 0.9rem;
+  border-radius: 14px;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 0.8rem;
+  line-height: 1.75;
+}
+
+.notice :deep(.ico) {
+  margin-top: 0.15rem;
+  color: #0d9488;
+  flex-shrink: 0;
+}
+
+@media (min-width: 900px) {
+  .layer {
+    background: rgba(15, 23, 42, 0.28);
+    align-items: center;
+    padding: 1.2rem;
+  }
+
+  .backdrop {
+    display: block;
+    position: absolute;
+    inset: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .sheet {
+    position: relative;
+    max-width: 480px;
+    height: min(92dvh, 860px);
+    border-radius: 22px;
+    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
+  }
+}
+</style>
diff --git a/apps/web/src/components/person-profile/ProfileEmptyState.vue b/apps/web/src/components/person-profile/ProfileEmptyState.vue
new file mode 100644
index 0000000..bb191c2
--- /dev/null
+++ b/apps/web/src/components/person-profile/ProfileEmptyState.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
+import UiIcon from '@/components/UiIcon.vue';
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    primaryLabel: string;
+    primaryTo: RouteLocationRaw;
+    secondaryLabel?: string;
+    secondaryTo?: RouteLocationRaw;
+    secondaryIcon?: 'calendar' | 'calendar-plus' | 'user-plus';
+  }>(),
+  {
+    title: 'هنوز اطلاعاتی ثبت نشده!',
+    description:
+      'برای شروع، اطلاعات اولیه مشتری را ثبت کنید یا اولین فعالیت خود را اضافه نمایید.',
+    secondaryIcon: 'calendar-plus',
+  },
+);
+</script>
+
+<template>
+  <div class="empty-state">
+    <div class="art" aria-hidden="true">
+      <span class="spark s1">✦</span>
+      <span class="spark s2">✦</span>
+      <span class="spark s3">✦</span>
+      <svg viewBox="0 0 168 132" fill="none">
+        <path
+          d="M26 44c0-7.2 5.8-13 13-13h30l9 9h51c7.2 0 13 5.8 13 13v54c0 7.2-5.8 13-13 13H39c-7.2 0-13-5.8-13-13V44Z"
+          fill="#D9E6E8"
+        />
+        <path
+          d="M26 50h116v47c0 7.2-5.8 13-13 13H39c-7.2 0-13-5.8-13-13V50Z"
+          fill="#E8F1F2"
+        />
+        <rect x="54" y="34" width="60" height="74" rx="11" fill="#fff" />
+        <rect x="54" y="34" width="60" height="74" rx="11" stroke="#E2E8F0" />
+        <circle cx="84" cy="60" r="12" fill="#C5D4DA" />
+        <path
+          d="M66 96c2.2-9.2 8.4-14 18-14s15.8 4.8 18 14"
+          stroke="#C5D4DA"
+          stroke-width="9"
+          stroke-linecap="round"
+        />
+        <circle cx="122" cy="100" r="17" fill="#14b8a6" />
+        <circle cx="122" cy="100" r="17" fill="#14b8a6" stroke="#fff" stroke-width="3" />
+        <path d="M122 92.5v15M114.5 100h15" stroke="#fff" stroke-width="2.8" stroke-linecap="round" />
+      </svg>
+    </div>
+
+    <h3>{{ title }}</h3>
+    <p>{{ description }}</p>
+
+    <div class="actions">
+      <RouterLink class="btn-primary" :to="primaryTo">
+        <span class="plus">+</span>
+        {{ primaryLabel }}
+      </RouterLink>
+      <RouterLink v-if="secondaryLabel && secondaryTo" class="btn-secondary" :to="secondaryTo">
+        <UiIcon :name="secondaryIcon" :size="18" />
+        {{ secondaryLabel }}
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.empty-state {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  text-align: center;
+  width: 100%;
+  padding: 1.4rem 0.8rem 0.6rem;
+}
+
+.art {
+  position: relative;
+  width: 168px;
+  margin-bottom: 1.05rem;
+}
+
+.art svg {
+  width: 168px;
+  height: auto;
+  display: block;
+}
+
+.spark {
+  position: absolute;
+  color: #5eead4;
+  font-size: 0.68rem;
+  line-height: 1;
+}
+
+.s1 {
+  top: 6px;
+  inset-inline-end: 8px;
+}
+
+.s2 {
+  top: 44px;
+  inset-inline-start: 2px;
+  font-size: 0.52rem;
+  color: #99f6e4;
+}
+
+.s3 {
+  bottom: 20px;
+  inset-inline-end: -2px;
+  font-size: 0.46rem;
+  color: #99f6e4;
+}
+
+h3 {
+  margin: 0;
+  font-size: 1.08rem;
+  font-weight: 800;
+  color: #1e2937;
+}
+
+p {
+  margin: 0.5rem 0 1.25rem;
+  max-width: 21.5rem;
+  color: #94a3b8;
+  font-size: 0.84rem;
+  line-height: 1.85;
+}
+
+.actions {
+  display: grid;
+  gap: 0.7rem;
+  width: min(100%, 304px);
+}
+
+.btn-primary,
+.btn-secondary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 48px;
+  border-radius: 16px;
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+
+.btn-primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.26);
+}
+
+.plus {
+  font-size: 1.2rem;
+  line-height: 1;
+  font-weight: 600;
+}
+
+.btn-secondary {
+  background: #fff;
+  color: #0f766e;
+  border: 1px solid #e2e8f0;
+}
+
+@media (max-width: 599px) {
+  .empty-state {
+    padding: 1.2rem 0.2rem 0.4rem;
+  }
+
+  .art,
+  .art svg {
+    width: 152px;
+  }
+
+  h3 {
+    font-size: 1.02rem;
+  }
+
+  p {
+    font-size: 0.8rem;
+    margin-bottom: 1.15rem;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    min-height: 46px;
+    font-size: 0.86rem;
+    border-radius: 14px;
+  }
+}
+</style>
diff --git a/apps/web/src/components/person-profile/ProfileMoreMenu.vue b/apps/web/src/components/person-profile/ProfileMoreMenu.vue
new file mode 100644
index 0000000..cc76c8d
--- /dev/null
+++ b/apps/web/src/components/person-profile/ProfileMoreMenu.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { RouterLink } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
+import UiIcon from '@/components/UiIcon.vue';
+
+export type ProfileMoreItem = {
+  key: string;
+  label: string;
+  to?: RouteLocationRaw;
+  danger?: boolean;
+};
+
+const open = defineModel<boolean>({ default: false });
+defineProps<{ items: ProfileMoreItem[] }>();
+const emit = defineEmits<{ select: [key: string] }>();
+
+const triggerRef = ref<HTMLButtonElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+const top = ref(0);
+const left = ref(0);
+
+function place() {
+  const trigger = triggerRef.value;
+  const panel = panelRef.value;
+  if (!trigger) return;
+  const rect = trigger.getBoundingClientRect();
+  const width = panel?.offsetWidth || 220;
+  const height = panel?.offsetHeight || 0;
+  const rtl = getComputedStyle(document.documentElement).direction === 'rtl';
+  let nextLeft = rtl ? rect.right - width : rect.left;
+  nextLeft = Math.min(Math.max(8, nextLeft), window.innerWidth - width - 8);
+  let nextTop = rect.bottom + 8;
+  if (nextTop + height > window.innerHeight - 8) {
+    nextTop = Math.max(8, rect.top - height - 8);
+  }
+  left.value = nextLeft;
+  top.value = nextTop;
+}
+
+function onWindowChange() {
+  if (open.value) place();
+}
+
+watch(open, async (value) => {
+  if (!value) {
+    window.removeEventListener('resize', onWindowChange);
+    window.removeEventListener('scroll', onWindowChange, true);
+    return;
+  }
+  await nextTick();
+  place();
+  await nextTick();
+  place();
+  window.addEventListener('resize', onWindowChange);
+  window.addEventListener('scroll', onWindowChange, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onWindowChange);
+  window.removeEventListener('scroll', onWindowChange, true);
+});
+
+function toggle() {
+  open.value = !open.value;
+}
+
+function close() {
+  open.value = false;
+}
+
+function onSelect(key: string) {
+  emit('select', key);
+  nextTick(() => {
+    close();
+  });
+}
+</script>
+
+<template>
+  <div class="wrap" @click.stop>
+    <button
+      ref="triggerRef"
+      class="icon-btn"
+      type="button"
+      aria-label="منوی بیشتر"
+      :aria-expanded="open"
+      @click="toggle"
+    >
+      <UiIcon name="dots-v" :size="18" />
+    </button>
+
+    <Teleport to="body">
+      <div v-if="open" class="layer">
+        <button class="backdrop" type="button" aria-label="بستن منو" @click="close" />
+        <ul
+          ref="panelRef"
+          class="panel"
+          role="menu"
+          :style="{ top: `${top}px`, left: `${left}px` }"
+          @click.stop
+        >
+          <li v-for="item in items" :key="item.key" role="none">
+            <RouterLink
+              v-if="item.to"
+              class="item"
+              :class="{ danger: item.danger }"
+              role="menuitem"
+              :to="item.to"
+              @click.stop="close"
+            >
+              {{ item.label }}
+            </RouterLink>
+            <button
+              v-else
+              class="item"
+              :class="{ danger: item.danger }"
+              type="button"
+              role="menuitem"
+              @click.stop.prevent="onSelect(item.key)"
+            >
+              {{ item.label }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.icon-btn {
+  width: 38px;
+  height: 38px;
+  border: 0;
+  background: #fff;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: #334155;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
+  cursor: pointer;
+}
+
+.layer {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+}
+
+.backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.panel {
+  position: absolute;
+  z-index: 1;
+  margin: 0;
+  padding: 0.4rem;
+  list-style: none;
+  width: 220px;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.panel > li {
+  display: block;
+  width: 100%;
+}
+
+.item {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: #0f172a;
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  text-align: start;
+  text-decoration: none;
+  white-space: nowrap;
+  padding: 0.7rem 0.85rem;
+  cursor: pointer;
+}
+
+.item:hover {
+  background: #f0fdfa;
+}
+
+.item.danger {
+  color: #b91c1c;
+}
+
+.item.danger:hover {
+  background: #fef2f2;
+}
+</style>
diff --git a/apps/web/src/layouts/AppLayout.vue b/apps/web/src/layouts/AppLayout.vue
index 8ad0d38..c9dc98c 100644
--- a/apps/web/src/layouts/AppLayout.vue
+++ b/apps/web/src/layouts/AppLayout.vue
@@ -24,14 +24,6 @@ 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(() => formatJalaliShort(new Date()));
 
 const salesOpen = ref(false);
@@ -344,8 +336,14 @@ onUnmounted(() => {
       </p>
 
       <div class="sidebar-foot">
-        <div class="profile-card">
-          <span class="avatar">{{ userInitials }}</span>
+        <RouterLink
+          class="profile-card"
+          :to="{ name: 'profile' }"
+          @click="closeMenu"
+        >
+          <span class="avatar">
+            <img src="/brand/user-avatar.png" :alt="auth.user?.fullName || 'کاربر'" width="48" height="48" />
+          </span>
           <div class="profile-meta">
             <strong>{{ auth.user?.fullName }}</strong>
             <span>{{ roleLabel || 'کاربر' }}</span>
@@ -354,14 +352,17 @@ onUnmounted(() => {
               آنلاین
             </span>
           </div>
-        </div>
+        </RouterLink>
 
         <div class="promo-card">
           <span class="promo-icons" aria-hidden="true">
-            <UiIcon name="send" :size="16" />
-            <UiIcon name="sparkle" :size="14" />
+            <UiIcon name="send" :size="20" />
+            <UiIcon name="sparkle" :size="18" />
           </span>
-          <p>با منتو فروشات را چند برابر کن</p>
+          <p>
+            <span>با منتو فروشات را</span>
+            <span>چند برابر کن</span>
+          </p>
         </div>
 
         <button class="logout-link" type="button" @click="onLogout">خروج از حساب</button>
@@ -689,29 +690,46 @@ onUnmounted(() => {
 
 .profile-card {
   display: flex;
+  flex-direction: row-reverse;
   align-items: center;
   gap: 0.75rem;
   padding: 0.85rem 0.9rem;
   border-radius: 18px;
   background: #f8fafc;
+  color: inherit;
+}
+
+.profile-card:hover {
+  background: #f0fdfa;
+}
+
+.profile-card.router-link-active {
+  background: #ecfdf5;
 }
 
 .avatar {
-  width: 44px;
-  height: 44px;
+  position: relative;
+  width: 48px;
+  height: 48px;
   border-radius: 999px;
-  background: linear-gradient(145deg, #99f6e4, #5eead4);
-  color: #0f766e;
-  display: grid;
-  place-items: center;
-  font-weight: 800;
   flex-shrink: 0;
+  overflow: hidden;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 
 .profile-meta {
   min-width: 0;
+  flex: 1;
   display: grid;
   gap: 0.12rem;
+  text-align: right;
 }
 
 .profile-meta strong {
@@ -729,6 +747,7 @@ onUnmounted(() => {
 .online-label {
   display: inline-flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 0.35rem;
   color: #64748b !important;
   font-size: 0.74rem !important;
@@ -745,7 +764,7 @@ onUnmounted(() => {
 .promo-card {
   display: flex;
   align-items: center;
-  gap: 0.7rem;
+  gap: 0.75rem;
   padding: 1.05rem 1.05rem;
   border-radius: 22px;
   background: linear-gradient(105deg, #c4e84a 0%, #2dd4bf 42%, #1d4ed8 100%);
@@ -755,17 +774,27 @@ onUnmounted(() => {
 
 .promo-icons {
   display: inline-flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.2rem;
+  justify-content: center;
+  gap: 0.35rem;
   flex-shrink: 0;
   opacity: 0.95;
 }
 
 .promo-card p {
   margin: 0;
-  font-size: 0.86rem;
-  font-weight: 700;
-  line-height: 1.45;
+  flex: 1;
+  min-width: 0;
+  font-size: 0.98rem;
+  font-weight: 800;
+  line-height: 1.5;
+  display: grid;
+  gap: 0.1rem;
+}
+
+.promo-card p span {
+  display: block;
 }
 
 .logout-link {
diff --git a/apps/web/src/lib/jalali.ts b/apps/web/src/lib/jalali.ts
index 9897a8e..a8dc92c 100644
--- a/apps/web/src/lib/jalali.ts
+++ b/apps/web/src/lib/jalali.ts
@@ -176,13 +176,97 @@ export function formatJalaliShort(d: Date): string {
   return `${weekdayName(d)} ${toFaDigits(jd)} ${jalaliMonthName(jm)}`;
 }
 
+/** مثل: ۸ شهریور ۱۴۰۵ */
+export function formatJalaliDay(d: Date): string {
+  const { jy, jm, jd } = dateToJalali(d);
+  return `${toFaDigits(jd)} ${jalaliMonthName(jm)} ${toFaDigits(jy)}`;
+}
+
 export function toFaDigits(value: number | string): string {
   return String(value).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[Number(d)]!);
 }
 
+export function startOfLocalDay(d = new Date()): Date {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+
+export function formatClockFa(d: Date): string {
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  return `${toFaDigits(hh)}:${toFaDigits(mm)}`;
+}
+
+/** مثل: ۲۴ مرداد ۱۱:۲۰ */
+export function formatJalaliDayClock(d: Date): string {
+  const { jm, jd } = dateToJalali(d);
+  return `${toFaDigits(jd)} ${jalaliMonthName(jm)} ${formatClockFa(d)}`;
+}
+
+export function calendarDaysBetween(from: Date, to: Date): number {
+  return Math.round(
+    (startOfLocalDay(to).getTime() - startOfLocalDay(from).getTime()) / 86_400_000,
+  );
+}
+
+/** آخرین ارتباط: امروز ۱۶:۳۰ / ۶ روز پیش */
+export function formatRelativeContact(iso: string | null | undefined): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '—';
+  const days = calendarDaysBetween(d, new Date());
+  if (days <= 0) return `امروز ${formatClockFa(d)}`;
+  if (days === 1) return 'دیروز';
+  return `${toFaDigits(days)} روز پیش`;
+}
+
+/** فعالیت بعدی: امروز ۱۶:۳۰ / فردا ۱۰:۰۰ / ۲۴ مرداد ۱۱:۲۰ */
+export function formatNextSlot(iso: string | null | undefined): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '—';
+  const days = calendarDaysBetween(new Date(), d);
+  if (days === 0) return `امروز ${formatClockFa(d)}`;
+  if (days === 1) return `فردا ${formatClockFa(d)}`;
+  if (days === -1) return `دیروز ${formatClockFa(d)}`;
+  return formatJalaliDayClock(d);
+}
+
 export function gregorianDayKey(d: Date): string {
   const y = d.getFullYear();
   const m = String(d.getMonth() + 1).padStart(2, '0');
   const day = String(d.getDate()).padStart(2, '0');
   return `${y}-${m}-${day}`;
 }
+
+export function parseLocalInput(value: string | null | undefined): Date | null {
+  if (!value) return null;
+  const match = /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2}))?/.exec(value);
+  if (match) {
+    return new Date(
+      Number(match[1]),
+      Number(match[2]) - 1,
+      Number(match[3]),
+      match[4] ? Number(match[4]) : 0,
+      match[5] ? Number(match[5]) : 0,
+    );
+  }
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+export function formatLocalDateInput(d: Date): string {
+  return gregorianDayKey(d);
+}
+
+export function formatLocalDateTimeInput(d: Date): string {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${gregorianDayKey(d)}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/** مثل: ۱۴۰۵/۰۶/۱۲ */
+export function formatJalaliNumeric(d: Date): string {
+  const { jy, jm, jd } = dateToJalali(d);
+  return `${toFaDigits(jy)}/${toFaDigits(String(jm).padStart(2, '0'))}/${toFaDigits(String(jd).padStart(2, '0'))}`;
+}
diff --git a/apps/web/src/lib/money.ts b/apps/web/src/lib/money.ts
index c45e9b6..6071d8b 100644
--- a/apps/web/src/lib/money.ts
+++ b/apps/web/src/lib/money.ts
@@ -22,3 +22,20 @@ export function formatMoney(amount: number, currency = 'IRR'): string {
     return `${amount} ${currency}`;
   }
 }
+
+/** مثل ماکاپ: ۲۴۰ میلیون ریال */
+export function formatCompactMoney(amount: number, currency = 'IRR'): string {
+  const suffix = currencySuffix(currency);
+  const abs = Math.abs(amount);
+  if (abs >= 1_000_000_000) {
+    const n = amount / 1_000_000_000;
+    const rounded = Math.abs(n - Math.round(n)) < 0.05 ? Math.round(n) : Math.round(n * 10) / 10;
+    return `${new Intl.NumberFormat('fa-IR', { maximumFractionDigits: 1 }).format(rounded)} میلیارد ${suffix}`;
+  }
+  if (abs >= 1_000_000) {
+    const n = amount / 1_000_000;
+    const rounded = Math.abs(n - Math.round(n)) < 0.05 ? Math.round(n) : Math.round(n * 10) / 10;
+    return `${new Intl.NumberFormat('fa-IR', { maximumFractionDigits: 1 }).format(rounded)} میلیون ${suffix}`;
+  }
+  return formatMoney(amount, currency);
+}
diff --git a/apps/web/src/lib/person-insights.ts b/apps/web/src/lib/person-insights.ts
new file mode 100644
index 0000000..da135ee
--- /dev/null
+++ b/apps/web/src/lib/person-insights.ts
@@ -0,0 +1,97 @@
+import type { MemoryItemDto, NoteDto, PersonDto } from '@mento/shared';
+
+export type ProbabilityBand = 'بالا' | 'متوسط' | 'پایین';
+
+export function personInitials(fullName: string | null | undefined): string {
+  const parts = fullName?.trim().split(/\s+/) ?? [];
+  if (!parts.length) return 'م';
+  return parts
+    .slice(0, 2)
+    .map((p) => p[0])
+    .join('');
+}
+
+export function isVipPerson(person: PersonDto | null): boolean {
+  if (!person) return false;
+  const tier = person.loyaltyTier?.name ?? '';
+  if (/vip|طلا|طلایی|gold|پلاتین|platinum/i.test(tier)) return true;
+  if ((person.loyaltyPoints ?? 0) >= 800) return true;
+  const fields = person.customFields ?? {};
+  for (const [key, value] of Object.entries(fields)) {
+    if (/vip/i.test(key) && (value === true || value === 'true' || value === 1 || value === '1')) {
+      return true;
+    }
+    if (typeof value === 'string' && /^vip$/i.test(value.trim())) return true;
+  }
+  return false;
+}
+
+export function purchaseProbability(input: {
+  daysSinceContact: number | null;
+  openDealCount: number;
+  quoteCount: number;
+  hasUpcoming: boolean;
+  noteCount: number;
+}): { score: number; band: ProbabilityBand } {
+  let score = 38;
+  if (input.openDealCount > 0) score += 16 + Math.min(8, input.openDealCount * 2);
+  if (input.quoteCount > 0) score += 8;
+  if (input.noteCount > 0) score += 4;
+  if (input.hasUpcoming) score += 6;
+  if (input.daysSinceContact != null) {
+    if (input.daysSinceContact <= 2) score += 24;
+    else if (input.daysSinceContact <= 7) score += 18;
+    else if (input.daysSinceContact <= 14) score += 8;
+    else if (input.daysSinceContact <= 30) score += 2;
+    else score -= 10;
+  } else {
+    score -= 6;
+  }
+  score = Math.max(8, Math.min(95, Math.round(score)));
+  const band: ProbabilityBand = score >= 70 ? 'بالا' : score >= 45 ? 'متوسط' : 'پایین';
+  return { score, band };
+}
+
+export function buildSmartSummary(input: {
+  memories: MemoryItemDto[];
+  notes: NoteDto[];
+  lastQuoteLabel: string | null;
+  daysSinceCall: number | null;
+  probabilityBand: ProbabilityBand;
+}): { text: string; cta: string; ctaKind: 'call' | 'activity' } {
+  const parts: string[] = [];
+  const memoryBits = input.memories
+    .map((m) => m.content.trim())
+    .filter(Boolean)
+    .slice(0, 2);
+  if (memoryBits.length) {
+    parts.push(memoryBits.join(' '));
+  } else {
+    const note = input.notes.find((n) => n.body.trim());
+    if (note?.body) {
+      const snippet = note.body.replace(/\s+/g, ' ').trim();
+      parts.push(snippet.length > 90 ? `${snippet.slice(0, 90)}…` : snippet);
+    }
+  }
+  if (input.lastQuoteLabel) {
+    parts.push(`آخرین پیشنهاد ${input.lastQuoteLabel} بوده.`);
+  }
+  if (input.daysSinceCall != null) {
+    if (input.daysSinceCall <= 0) parts.push('امروز با مشتری تماس گرفته شده.');
+    else parts.push(`${input.daysSinceCall} روز از آخرین تماس گذشته`);
+  }
+  parts.push(`و احتمال خرید ${input.probabilityBand} است.`);
+
+  const hasSignal = memoryBits.length > 0 || input.notes.length > 0 || input.lastQuoteLabel;
+  const text = hasSignal
+    ? parts.join(' ').replace(/\s+/g, ' ').trim()
+    : 'هنوز خلاصهٔ پایداری از این مشتری ثبت نشده. با یادداشت یا حافظهٔ منتو، پیشنهاد هوشمند اینجا ظاهر می‌شود.';
+
+  let cta = 'پیشنهاد منتو: امروز با مشتری تماس بگیر';
+  let ctaKind: 'call' | 'activity' = 'call';
+  if (input.daysSinceCall != null && input.daysSinceCall <= 1) {
+    cta = 'پیشنهاد منتو: پیگیری بعدی را ثبت کن';
+    ctaKind = 'activity';
+  }
+  return { text, cta, ctaKind };
+}
diff --git a/apps/web/src/router/index.ts b/apps/web/src/router/index.ts
index 9881d4e..88b0304 100644
--- a/apps/web/src/router/index.ts
+++ b/apps/web/src/router/index.ts
@@ -38,6 +38,11 @@ export const router = createRouter({
           name: 'home',
           component: () => import('@/views/HomeView.vue'),
         },
+        {
+          path: 'profile',
+          name: 'profile',
+          component: () => import('@/views/ProfileView.vue'),
+        },
         {
           path: 'reports',
           name: 'reports',
@@ -78,10 +83,15 @@ export const router = createRouter({
           name: 'activity-new',
           component: () => import('@/views/ActivityFormView.vue'),
         },
+        {
+          path: 'activities/:id/edit',
+          name: 'activity-edit',
+          component: () => import('@/views/ActivityFormView.vue'),
+        },
         {
           path: 'activities/:id',
           name: 'activity-detail',
-          component: () => import('@/views/ActivityFormView.vue'),
+          component: () => import('@/views/ActivityDetailView.vue'),
         },
         {
           path: 'quotes',
@@ -205,10 +215,15 @@ export const router = createRouter({
           name: 'person-new',
           component: () => import('@/views/PersonFormView.vue'),
         },
+        {
+          path: 'contacts/people/:id/edit',
+          name: 'person-edit',
+          component: () => import('@/views/PersonFormView.vue'),
+        },
         {
           path: 'contacts/people/:id',
           name: 'person-detail',
-          component: () => import('@/views/PersonFormView.vue'),
+          component: () => import('@/views/PersonProfileView.vue'),
         },
         {
           path: 'contacts/companies/new',
diff --git a/apps/web/src/views/ActivitiesView.vue b/apps/web/src/views/ActivitiesView.vue
index 2207bdd..dda8a0c 100644
--- a/apps/web/src/views/ActivitiesView.vue
+++ b/apps/web/src/views/ActivitiesView.vue
@@ -3,7 +3,41 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
-import type { ActivityDto, ActivityFilter, PaginatedResponse } from '@mento/shared';
+import {
+  calendarDaysBetween,
+  formatClockFa,
+  formatJalaliDay,
+  startOfLocalDay,
+  toFaDigits,
+} from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
+import type {
+  ActivityDto,
+  ActivityFilter,
+  ActivityType,
+  PaginatedResponse,
+} from '@mento/shared';
+
+type TypeFilter = 'all' | ActivityType;
+type UiStatus = 'done' | 'progress' | 'planned' | 'overdue' | 'canceled';
+
+const TABS: Array<{ key: ActivityFilter; label: string }> = [
+  { key: 'today', label: 'امروز' },
+  { key: 'overdue', label: 'عقب‌افتاده' },
+  { key: 'upcoming', label: 'بعداً' },
+  { key: 'done', label: 'انجام‌شده' },
+  { key: 'all', label: 'همه' },
+];
+
+const TYPE_FILTERS: Array<{ key: TypeFilter; label: string }> = [
+  { key: 'all', label: 'همه انواع' },
+  { key: 'call', label: 'تماس' },
+  { key: 'meeting', label: 'جلسه' },
+  { key: 'task', label: 'وظیفه' },
+  { key: 'note', label: 'پیام' },
+];
+
+const PAGE_SIZE = 6;
 
 const route = useRoute();
 const router = useRouter();
@@ -16,36 +50,137 @@ const filter = computed<ActivityFilter>(() => {
   return 'today';
 });
 
+const page = computed(() => {
+  const raw = Number(route.query.page);
+  return Number.isFinite(raw) && raw > 0 ? raw : 1;
+});
+
 const loading = ref(false);
 const error = ref('');
 const data = ref<PaginatedResponse<ActivityDto> | null>(null);
 const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
+const typeFilter = ref<TypeFilter>('all');
+const filterOpen = ref(false);
+const ideasOpen = ref(false);
+const menuId = ref<string | null>(null);
+const counts = ref<Record<ActivityFilter, number>>({
+  today: 0,
+  overdue: 0,
+  upcoming: 0,
+  done: 0,
+  all: 0,
+});
 
-const typeLabel: Record<ActivityDto['type'], string> = {
+const typeLabel: Record<ActivityType, string> = {
   call: 'تماس',
   meeting: 'جلسه',
   task: 'وظیفه',
-  note: 'یادداشت',
+  note: 'پیام',
 };
 
-function formatDue(value: string | null) {
-  if (!value) return 'بدون موعد';
-  try {
-    return new Intl.DateTimeFormat('fa-IR', {
-      dateStyle: 'medium',
-      timeStyle: 'short',
-    }).format(new Date(value));
-  } catch {
-    return value;
+const typeIcon: Record<ActivityType, 'phone' | 'users' | 'check' | 'chat'> = {
+  call: 'phone',
+  meeting: 'users',
+  task: 'check',
+  note: 'chat',
+};
+
+const statusLabel: Record<UiStatus, string> = {
+  done: 'انجام شد',
+  progress: 'در حال انجام',
+  planned: 'برنامه‌ریزی شده',
+  overdue: 'عقب‌افتاده',
+  canceled: 'لغو شده',
+};
+
+const statusIcon: Record<UiStatus, 'check' | 'clock' | 'calendar' | 'warning'> = {
+  done: 'check',
+  progress: 'clock',
+  planned: 'calendar',
+  overdue: 'warning',
+  canceled: 'warning',
+};
+
+const items = computed(() => {
+  const rows = data.value?.items ?? [];
+  if (typeFilter.value === 'all') return rows;
+  return rows.filter((row) => row.type === typeFilter.value);
+});
+
+const total = computed(() => data.value?.total ?? 0);
+const pageCount = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)));
+const filterLabel = computed(() => TABS.find((t) => t.key === filter.value)?.label ?? 'امروز');
+const trulyEmpty = computed(() => !loading.value && counts.value.all === 0 && !q.value.trim());
+const listEmpty = computed(() => !loading.value && !items.value.length);
+const rangeFrom = computed(() => (total.value ? (page.value - 1) * PAGE_SIZE + 1 : 0));
+const rangeTo = computed(() => Math.min(page.value * PAGE_SIZE, total.value));
+
+function isOverdue(item: ActivityDto) {
+  if (item.status !== 'open' || !item.dueAt) return false;
+  return startOfLocalDay(new Date(item.dueAt)).getTime() < startOfLocalDay().getTime();
+}
+
+function uiStatus(item: ActivityDto): UiStatus {
+  if (item.status === 'done') return 'done';
+  if (item.status === 'canceled') return 'canceled';
+  if (isOverdue(item)) return 'overdue';
+  if (item.dueAt && calendarDaysBetween(new Date(item.dueAt), new Date()) === 0) {
+    return 'progress';
   }
+  return 'planned';
+}
+
+function clockText(item: ActivityDto) {
+  if (!item.dueAt) return '—';
+  return formatClockFa(new Date(item.dueAt));
+}
+
+function dayText(item: ActivityDto) {
+  if (!item.dueAt) return 'بدون موعد';
+  const days = calendarDaysBetween(new Date(item.dueAt), new Date());
+  if (days === 0) return 'امروز';
+  if (days === 1) return 'دیروز';
+  if (days === -1) return 'فردا';
+  return formatJalaliDay(new Date(item.dueAt));
+}
+
+function dateText(item: ActivityDto) {
+  if (!item.dueAt) return 'بدون موعد';
+  return formatJalaliDay(new Date(item.dueAt));
+}
+
+function subtitle(item: ActivityDto) {
+  return item.deal?.title || item.description || '';
+}
+
+async function loadCounts() {
+  const keys: ActivityFilter[] = ['today', 'overdue', 'upcoming', 'done', 'all'];
+  const results = await Promise.all(
+    keys.map((key) =>
+      api.get<PaginatedResponse<ActivityDto>>('/activities', {
+        params: { filter: key, limit: 1 },
+      }),
+    ),
+  );
+  const next = { ...counts.value };
+  keys.forEach((key, i) => {
+    next[key] = results[i]?.data.total ?? 0;
+  });
+  counts.value = next;
 }
 
 async function load() {
   loading.value = true;
   error.value = '';
+  menuId.value = null;
   try {
     const { data: res } = await api.get<PaginatedResponse<ActivityDto>>('/activities', {
-      params: { filter: filter.value, q: q.value || undefined, limit: 50 },
+      params: {
+        filter: filter.value,
+        q: q.value || undefined,
+        page: page.value,
+        limit: PAGE_SIZE,
+      },
     });
     data.value = res;
   } catch (e) {
@@ -60,47 +195,81 @@ async function load() {
 }
 
 function setFilter(next: ActivityFilter) {
-  router.replace({
+  filterOpen.value = false;
+  void router.replace({
     name: 'activities',
     query: {
       ...route.query,
       filter: next === 'today' ? undefined : next,
+      page: undefined,
+    },
+  });
+}
+
+function setPage(next: number) {
+  const safe = Math.min(Math.max(1, next), pageCount.value);
+  void router.replace({
+    name: 'activities',
+    query: {
+      ...route.query,
+      page: safe === 1 ? undefined : String(safe),
     },
   });
 }
 
 function onSearch() {
-  router.replace({
+  void router.replace({
     name: 'activities',
     query: {
       ...route.query,
       q: q.value.trim() || undefined,
+      page: undefined,
     },
   });
 }
 
+function setTypeFilter(next: TypeFilter) {
+  typeFilter.value = next;
+  filterOpen.value = false;
+}
+
 async function complete(id: string) {
+  menuId.value = null;
   try {
     await api.patch(`/activities/${id}/complete`);
-    await load();
+    await Promise.all([load(), loadCounts()]);
   } catch {
     error.value = 'ثبت انجام‌شدن ناموفق بود.';
   }
 }
 
+function closePopovers() {
+  filterOpen.value = false;
+  menuId.value = null;
+}
+
 watch(
-  () => [route.query.filter, route.query.q],
+  () => [route.query.filter, route.query.q, route.query.page],
   () => {
     q.value = typeof route.query.q === 'string' ? route.query.q : '';
     void load();
   },
 );
 
-onMounted(load);
+onMounted(() => {
+  void load();
+  void loadCounts();
+});
 </script>
 
 <template>
-  <section class="page">
+  <section class="page" @click="closePopovers">
+    <nav class="crumbs" aria-label="مسیر">
+      <RouterLink :to="{ name: 'home' }">خانه</RouterLink>
+      <span>‹</span>
+      <span>فعالیت‌ها</span>
+    </nav>
+
     <header class="page-head">
       <div>
         <p class="eyebrow">پیگیری</p>
@@ -108,240 +277,828 @@ onMounted(load);
         <p class="lead">تماس، جلسه و وظیفه — امروز و عقب‌افتاده‌ها یکجا.</p>
       </div>
       <div class="head-actions">
-        <RouterLink class="btn btn-ghost" :to="{ name: 'activities-calendar' }">تقویم</RouterLink>
-        <RouterLink class="btn" :to="{ name: 'activity-new' }">فعالیت جدید</RouterLink>
+        <RouterLink class="btn primary" :to="{ name: 'activity-new' }">
+          <span>+</span>
+          فعالیت جدید
+        </RouterLink>
+        <RouterLink class="btn ghost" :to="{ name: 'activities-calendar' }">
+          <UiIcon name="calendar" :size="18" />
+          تقویم
+        </RouterLink>
       </div>
     </header>
 
-    <div class="toolbar">
-      <div class="tabs">
-        <button type="button" :class="{ active: filter === 'today' }" @click="setFilter('today')">
-          امروز
-        </button>
-        <button
-          type="button"
-          :class="{ active: filter === 'overdue' }"
-          @click="setFilter('overdue')"
-        >
-          عقب‌افتاده
-        </button>
-        <button
-          type="button"
-          :class="{ active: filter === 'upcoming' }"
-          @click="setFilter('upcoming')"
-        >
-          بعداً
-        </button>
-        <button type="button" :class="{ active: filter === 'done' }" @click="setFilter('done')">
-          انجام‌شده
-        </button>
-        <button type="button" :class="{ active: filter === 'all' }" @click="setFilter('all')">
-          همه
-        </button>
-      </div>
+    <div class="tabs" role="tablist" aria-label="فیلتر فعالیت">
+      <button
+        v-for="tab in TABS"
+        :key="tab.key"
+        type="button"
+        role="tab"
+        :class="{ on: filter === tab.key }"
+        :aria-selected="filter === tab.key"
+        @click="setFilter(tab.key)"
+      >
+        <span>{{ tab.label }}</span>
+        <em>{{ toFaDigits(counts[tab.key]) }}</em>
+      </button>
+    </div>
+
+    <div class="tools">
       <form class="search" @submit.prevent="onSearch">
-        <input v-model="q" type="search" placeholder="جستجو در عنوان…" />
-        <button class="btn btn-ghost" type="submit">جستجو</button>
+        <UiIcon name="search" :size="18" />
+        <input
+          v-model="q"
+          type="search"
+          placeholder="جستجو در عنوان، مشتری، نوع فعالیت..."
+        />
       </form>
+      <div class="filter-wrap" @click.stop>
+        <button class="btn ghost filter-btn" type="button" @click="filterOpen = !filterOpen">
+          <UiIcon name="filter" :size="16" />
+          فیلتر
+          <UiIcon name="chevron" :size="14" class="chev" />
+        </button>
+        <div v-if="filterOpen" class="popover">
+          <button
+            v-for="opt in TYPE_FILTERS"
+            :key="opt.key"
+            type="button"
+            :class="{ on: typeFilter === opt.key }"
+            @click="setTypeFilter(opt.key)"
+          >
+            {{ opt.label }}
+          </button>
+        </div>
+      </div>
     </div>
 
     <p v-if="error" class="error">{{ error }}</p>
     <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <div v-else class="list">
-      <article v-for="item in data?.items || []" :key="item.id" class="item">
-        <div class="main">
-          <p class="type">{{ typeLabel[item.type] }}</p>
-          <RouterLink :to="{ name: 'activity-detail', params: { id: item.id } }">
-            <h2>{{ item.title }}</h2>
-          </RouterLink>
-          <p class="meta">
-            <span>{{ formatDue(item.dueAt) }}</span>
-            <span v-if="item.person"> · {{ item.person.fullName }}</span>
-            <span v-if="item.deal"> · {{ item.deal.title }}</span>
-          </p>
-        </div>
-        <div class="actions">
-          <button
-            v-if="item.status === 'open'"
-            class="btn btn-ghost"
-            type="button"
-            @click="complete(item.id)"
-          >
-            انجام شد
-          </button>
-          <span v-else class="done">انجام‌شده</span>
-        </div>
-      </article>
-      <p v-if="!data?.items.length" class="empty">فعالیتی در این فهرست نیست.</p>
+    <div v-else-if="listEmpty" class="empty-card">
+      <div class="art" aria-hidden="true">
+        <svg viewBox="0 0 168 148" fill="none">
+          <rect x="38" y="18" width="92" height="112" rx="16" fill="#E7F6F3" />
+          <rect x="50" y="32" width="68" height="84" rx="10" fill="#fff" />
+          <path d="M62 52h28" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 68h36" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 84h22" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <circle cx="118" cy="112" r="20" fill="#14b8a6" />
+          <path d="M118 104v16M110 112h16" stroke="#fff" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </div>
+      <h2>{{ trulyEmpty ? 'هنوز فعالیتی ثبت نشده!' : 'فعالیتی در این فهرست نیست' }}</h2>
+      <p>
+        {{
+          trulyEmpty
+            ? 'اولین تماس، جلسه یا وظیفه‌ات رو ثبت کن تا همه‌چیز رو منظم دنبال کنی.'
+            : 'فیلتر یا جستجو را عوض کنید، یا یک فعالیت جدید بسازید.'
+        }}
+      </p>
+      <RouterLink class="btn primary wide" :to="{ name: 'activity-new' }">
+        <span>+</span>
+        {{ trulyEmpty ? 'اولین فعالیتت رو ثبت کن' : 'فعالیت جدید' }}
+      </RouterLink>
+      <button class="btn ghost wide" type="button" @click="ideasOpen = !ideasOpen">
+        <UiIcon name="lightbulb" :size="18" />
+        ایده‌هایی برای شروع
+      </button>
+      <div v-if="ideasOpen" class="idea-list">
+        <RouterLink :to="{ name: 'activity-new', query: { type: 'call', title: 'تماس پیگیری' } }">
+          تماس پیگیری
+        </RouterLink>
+        <RouterLink :to="{ name: 'activity-new', query: { type: 'meeting', title: 'جلسه دمو' } }">
+          جلسه دمو
+        </RouterLink>
+        <RouterLink :to="{ name: 'activity-new', query: { type: 'task', title: 'وظیفه یادآوری' } }">
+          وظیفه یادآوری
+        </RouterLink>
+      </div>
     </div>
+
+    <template v-else>
+      <div class="list-head">
+        <strong>{{ filterLabel }} — {{ toFaDigits(items.length) }} فعالیت</strong>
+        <RouterLink class="cal-mini" :to="{ name: 'activities-calendar' }" aria-label="تقویم">
+          <UiIcon name="calendar" :size="16" />
+        </RouterLink>
+      </div>
+
+      <div class="table desktop-only" role="table">
+        <div class="thead" role="row">
+          <span>مشتری / عنوان فعالیت</span>
+          <span>نوع فعالیت</span>
+          <span>زمان شروع</span>
+          <span>کارشناس</span>
+          <span>وضعیت</span>
+          <span />
+        </div>
+        <article v-for="item in items" :key="item.id" class="trow" role="row">
+          <div class="title-cell">
+            <UiIcon name="star" :size="16" class="star" />
+            <div>
+              <RouterLink class="title" :to="{ name: 'activity-detail', params: { id: item.id } }">
+                {{ item.title }}
+              </RouterLink>
+              <p v-if="subtitle(item)" class="sub">{{ subtitle(item) }}</p>
+            </div>
+          </div>
+          <div class="type-cell">
+            <span class="type-pill" :class="item.type">
+              <UiIcon :name="typeIcon[item.type]" :size="13" />
+              {{ typeLabel[item.type] }}
+            </span>
+          </div>
+          <div class="when" :class="{ late: uiStatus(item) === 'overdue' }">
+            <strong>{{ clockText(item) }}</strong>
+            <span>{{ dayText(item) }}</span>
+          </div>
+          <div class="who">
+            <strong>{{ item.assignee?.fullName || '—' }}</strong>
+            <span v-if="item.company || item.person">
+              <UiIcon name="building" :size="12" />
+              {{ item.company?.name || item.person?.fullName }}
+            </span>
+          </div>
+          <div>
+            <span class="status" :class="uiStatus(item)">
+              <UiIcon :name="statusIcon[uiStatus(item)]" :size="13" />
+              {{ statusLabel[uiStatus(item)] }}
+            </span>
+          </div>
+          <div class="row-more" @click.stop>
+            <button
+              class="icon-more"
+              type="button"
+              aria-label="عملیات"
+              @click="menuId = menuId === item.id ? null : item.id"
+            >
+              <UiIcon name="dots-v" :size="16" />
+            </button>
+            <div v-if="menuId === item.id" class="popover">
+              <RouterLink :to="{ name: 'activity-detail', params: { id: item.id } }" @click="menuId = null">
+                مشاهده
+              </RouterLink>
+              <RouterLink :to="{ name: 'activity-edit', params: { id: item.id } }" @click="menuId = null">
+                ویرایش
+              </RouterLink>
+              <button v-if="item.status === 'open'" type="button" @click="complete(item.id)">
+                انجام شد
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+
+      <div class="cards mobile-only">
+        <article v-for="item in items" :key="item.id" class="card">
+          <div class="card-top">
+            <div class="card-main">
+              <time :class="item.type">{{ clockText(item) }}</time>
+              <RouterLink class="title" :to="{ name: 'activity-detail', params: { id: item.id } }">
+                {{ item.title }}
+                <UiIcon name="star" :size="14" class="star" />
+              </RouterLink>
+              <p v-if="subtitle(item)" class="sub">{{ subtitle(item) }}</p>
+              <p class="meta-line">
+                <span v-if="item.person">
+                  <UiIcon name="user" :size="13" />
+                  {{ item.person.fullName }}
+                </span>
+                <span v-if="item.company">
+                  <UiIcon name="building" :size="13" />
+                  {{ item.company.name }}
+                </span>
+              </p>
+            </div>
+            <div class="card-side">
+              <button
+                class="icon-more"
+                type="button"
+                aria-label="عملیات"
+                @click.stop="menuId = menuId === item.id ? null : item.id"
+              >
+                <UiIcon name="dots-v" :size="16" />
+              </button>
+              <span class="type-ico" :class="item.type">
+                <UiIcon :name="typeIcon[item.type]" :size="18" />
+              </span>
+              <span class="type-pill" :class="item.type">{{ typeLabel[item.type] }}</span>
+              <div v-if="menuId === item.id" class="popover" @click.stop>
+                <RouterLink :to="{ name: 'activity-detail', params: { id: item.id } }" @click="menuId = null">
+                  مشاهده
+                </RouterLink>
+                <button v-if="item.status === 'open'" type="button" @click="complete(item.id)">
+                  انجام شد
+                </button>
+              </div>
+            </div>
+          </div>
+          <footer class="card-foot">
+            <span>
+              <UiIcon name="calendar" :size="14" />
+              {{ dateText(item) }}
+            </span>
+            <button
+              v-if="item.status === 'open'"
+              class="done-btn"
+              type="button"
+              @click="complete(item.id)"
+            >
+              <UiIcon name="check" :size="14" />
+              انجام شد
+            </button>
+            <span v-else class="status" :class="uiStatus(item)">
+              {{ statusLabel[uiStatus(item)] }}
+            </span>
+          </footer>
+        </article>
+      </div>
+
+      <footer v-if="total" class="pager">
+        <p>نمایش {{ toFaDigits(rangeFrom) }} تا {{ toFaDigits(rangeTo) }} از {{ toFaDigits(total) }} فعالیت</p>
+        <div class="pages">
+          <button type="button" :disabled="page <= 1" @click="setPage(page - 1)">‹</button>
+          <button
+            v-for="n in pageCount"
+            :key="n"
+            type="button"
+            :class="{ on: n === page }"
+            @click="setPage(n)"
+          >
+            {{ toFaDigits(n) }}
+          </button>
+          <button type="button" :disabled="page >= pageCount" @click="setPage(page + 1)">›</button>
+        </div>
+        <p class="per">نمایش {{ toFaDigits(PAGE_SIZE) }} در هر صفحه</p>
+      </footer>
+    </template>
   </section>
 </template>
 
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   min-width: 0;
 }
 
+.crumbs {
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+  color: #94a3b8;
+  font-size: 0.78rem;
+}
+
+.crumbs a {
+  color: inherit;
+}
+
 .page-head {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.head-actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
 }
 
 .eyebrow {
   margin: 0;
-  color: var(--accent);
+  color: #0f766e;
   font-weight: 700;
+  font-size: 0.8rem;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0.15rem 0 0.3rem;
   font-size: 1.85rem;
 }
 
 .lead,
 .muted,
-.meta,
-.empty,
-.done {
-  color: var(--muted);
-}
-
-.lead {
+.sub,
+.error {
   margin: 0;
 }
 
-.toolbar {
+.lead,
+.muted,
+.sub {
+  color: #64748b;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.head-actions,
+.tools {
   display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
+  gap: 0.55rem;
   align-items: center;
-  min-width: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
+.btn.wide {
+  width: min(100%, 320px);
 }
 
 .tabs {
   display: flex;
-  gap: 0.35rem;
-  flex-wrap: wrap;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.25rem;
-  max-width: 100%;
+  gap: 0.2rem;
+  overflow-x: auto;
+  border-bottom: 1px solid #e2e8f0;
 }
 
 .tabs button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
   border: 0;
-  background: transparent;
-  padding: 0.55rem 0.85rem;
-  border-radius: 10px;
-  cursor: pointer;
-  color: var(--muted);
+  background: none;
+  padding: 0.7rem 0.85rem;
+  color: #64748b;
+  font-weight: 700;
   white-space: nowrap;
-  flex: 0 0 auto;
+  cursor: pointer;
+  box-shadow: inset 0 -2px 0 transparent;
 }
 
-.tabs button.active {
-  background: var(--accent-soft);
-  color: var(--accent);
-  font-weight: 700;
+.tabs button em {
+  font-style: normal;
+  font-size: 0.72rem;
+  background: #f1f5f9;
+  border-radius: 999px;
+  padding: 0.05rem 0.4rem;
+}
+
+.tabs button.on {
+  color: #0f766e;
+  box-shadow: inset 0 -2px 0 #14b8a6;
+}
+
+.tabs button.on em {
+  background: #ccfbf1;
 }
 
 .search {
-  display: flex;
-  gap: 0.5rem;
-  flex: 1 1 200px;
+  flex: 1;
   min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0 0.85rem;
+  color: #94a3b8;
 }
 
 .search input {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.7rem 0.9rem;
-  min-width: 0;
   flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.75rem 0;
+  font: inherit;
+}
+
+.filter-wrap,
+.row-more,
+.card-side {
+  position: relative;
+}
+
+.filter-btn .chev {
+  transform: rotate(90deg);
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-end: 0;
+  min-width: 11rem;
   background: #fff;
-}
-
-.list {
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  padding: 0.35rem;
   display: grid;
+  z-index: 8;
+}
+
+.popover a,
+.popover button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border: 0;
+  background: none;
+  padding: 0.6rem 0.7rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.popover a:hover,
+.popover button:hover,
+.popover button.on {
+  background: #f0fdfa;
+  color: #0f766e;
+}
+
+.empty-card {
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
+  padding: 2.4rem 1.2rem 2rem;
+  display: grid;
+  justify-items: center;
+  text-align: center;
   gap: 0.7rem;
-  min-width: 0;
 }
 
-.item {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: center;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem 1.1rem;
-  box-shadow: var(--shadow);
-  min-width: 0;
+.art svg {
+  width: 148px;
+  height: auto;
+  display: block;
 }
 
-.main {
-  min-width: 0;
-  flex: 1;
+.empty-card h2 {
+  margin: 0.2rem 0 0;
+  font-size: 1.15rem;
 }
 
-.type {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--accent);
+.empty-card > p {
+  max-width: 22rem;
+  color: #94a3b8;
+  line-height: 1.8;
+}
+
+.idea-list {
+  display: grid;
+  gap: 0.4rem;
+  width: min(100%, 320px);
+}
+
+.idea-list a {
+  background: #f8fafc;
+  border-radius: 10px;
+  padding: 0.65rem 0.8rem;
+  color: #0f766e;
   font-weight: 700;
 }
 
-h2 {
-  margin: 0.2rem 0;
-  font-size: 1.05rem;
-  overflow-wrap: anywhere;
+.list-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #0f766e;
 }
 
-.meta {
-  margin: 0.2rem 0 0;
-  font-size: 0.9rem;
-  overflow-wrap: anywhere;
+.cal-mini {
+  color: #0f766e;
 }
 
-.main a {
+.table {
+  background: #fff;
+  border-radius: 18px;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+}
+
+.thead,
+.trow {
+  display: grid;
+  grid-template-columns: minmax(0, 2.2fr) 7.6rem 7.2rem 8.4rem 8.6rem 2.4rem;
+  gap: 0.8rem;
+  align-items: center;
+  padding: 0.95rem 1.1rem;
+}
+
+.thead {
+  color: #94a3b8;
+  font-size: 0.78rem;
+  font-weight: 700;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.trow {
+  border-bottom: 1px solid #f8fafc;
+}
+
+.title-cell {
+  display: flex;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.star {
+  color: #cbd5e1;
+  margin-top: 0.2rem;
+}
+
+.title {
   color: inherit;
+  font-weight: 800;
+  overflow-wrap: anywhere;
 }
 
-.actions {
+.sub {
+  margin: 0.2rem 0 0;
+  font-size: 0.8rem;
+}
+
+.type-cell {
+  min-width: 0;
+}
+
+.type-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  border-radius: 999px;
+  padding: 0.12rem 0.5rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.type-pill.call,
+.type-ico.call,
+time.call {
+  background: #ecfdf5;
+  color: #0f766e;
+}
+
+.type-pill.meeting,
+.type-ico.meeting,
+time.meeting {
+  background: #f5f3ff;
+  color: #6d28d9;
+}
+
+.type-pill.task,
+.type-ico.task,
+time.task {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.type-pill.note,
+.type-ico.note,
+time.note {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.when,
+.who {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.when strong,
+.who strong {
+  font-size: 0.9rem;
+}
+
+.when span,
+.who span {
+  color: #94a3b8;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.when.late {
+  color: #dc2626;
+}
+
+.when.late span {
+  color: #ef4444;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  border-radius: 999px;
+  padding: 0.28rem 0.55rem;
+  font-size: 0.74rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.status.done {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.status.progress {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.status.planned {
+  background: #ffedd5;
+  color: #c2410c;
+}
+
+.status.overdue,
+.status.canceled {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.icon-more {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  background: none;
+  color: #64748b;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.cards {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #eef2f6;
+  border-radius: 18px;
+  padding: 0.9rem 0.95rem 0.75rem;
+}
+
+.card-top {
+  display: flex;
+  gap: 0.7rem;
+  justify-content: space-between;
+}
+
+.card-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.card-main time {
+  display: inline-block;
+  background: none;
+  font-weight: 800;
+  font-size: 0.95rem;
+  margin-bottom: 0.2rem;
+}
+
+.card-main .title {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.3rem;
+}
+
+.meta-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem;
+  margin: 0.45rem 0 0;
+  color: #64748b;
+  font-size: 0.78rem;
+}
+
+.meta-line span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.card-side {
+  display: grid;
+  justify-items: center;
+  gap: 0.35rem;
   flex-shrink: 0;
 }
 
-.empty {
-  margin: 0;
-  padding: 1.2rem;
-  background: var(--surface);
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
+.type-ico {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
 }
 
-@media (max-width: 700px) {
-  h1 {
-    font-size: 1.45rem;
+.card-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.75rem;
+  padding-top: 0.7rem;
+  border-top: 1px solid #f1f5f9;
+  color: #64748b;
+  font-size: 0.78rem;
+}
+
+.card-foot span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.done-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 0;
+  background: #ecfdf5;
+  color: #0f766e;
+  border-radius: 999px;
+  padding: 0.38rem 0.7rem;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.pager {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+  color: #64748b;
+  font-size: 0.8rem;
+}
+
+.pages {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.pages button {
+  min-width: 32px;
+  height: 32px;
+  border: 0;
+  background: #fff;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.pages button.on {
+  background: #14b8a6;
+  color: #fff;
+}
+
+.pages button:disabled {
+  opacity: 0.4;
+}
+
+.mobile-only {
+  display: none;
+}
+
+@media (max-width: 899px) {
+  .crumbs,
+  .desktop-only,
+  .tabs button em,
+  .pager .per {
+    display: none;
+  }
+
+  .mobile-only {
+    display: grid;
   }
 
   .page-head {
     flex-direction: column;
-    align-items: stretch;
   }
 
   .head-actions {
@@ -349,59 +1106,47 @@ h2 {
   }
 
   .head-actions .btn {
-    flex: 1 1 auto;
-    text-align: center;
+    flex: 1;
   }
 
-  .lead {
-    font-size: 0.92rem;
-  }
-
-  .toolbar {
-    flex-direction: column;
-    align-items: stretch;
+  h1 {
+    font-size: 1.55rem;
   }
 
   .tabs {
-    width: 100%;
-    overflow-x: auto;
-    flex-wrap: nowrap;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: thin;
+    border-bottom: 0;
+    gap: 0.4rem;
   }
 
   .tabs button {
-    padding: 0.5rem 0.7rem;
-    font-size: 0.9rem;
+    background: #fff;
+    border-radius: 999px;
+    box-shadow: none;
+    padding: 0.48rem 0.8rem;
   }
 
-  .search {
-    width: 100%;
-    flex: 0 0 auto;
-    flex-direction: row;
-    align-items: center;
+  .tabs button.on {
+    background: #ccfbf1;
+    box-shadow: none;
   }
 
-  .search input {
-    flex: 1 1 auto;
-    height: 2.75rem;
-    min-height: 2.75rem;
-    max-height: 2.75rem;
-    padding: 0 0.9rem;
-  }
-
-  .search .btn {
-    flex: 0 0 auto;
-    white-space: nowrap;
-  }
-
-  .item {
-    flex-direction: column;
+  .tools {
     align-items: stretch;
   }
 
-  .item .actions .btn {
-    width: 100%;
+  .search {
+    flex: 1 1 auto;
+  }
+
+  .list-head {
+    padding-top: 0.2rem;
+  }
+}
+
+@media (max-width: 599px) {
+  .thead,
+  .trow {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/apps/web/src/views/ActivityDetailView.vue b/apps/web/src/views/ActivityDetailView.vue
new file mode 100644
index 0000000..979eaf3
--- /dev/null
+++ b/apps/web/src/views/ActivityDetailView.vue
@@ -0,0 +1,616 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { api } from '@/lib/api';
+import {
+  calendarDaysBetween,
+  formatClockFa,
+  formatJalaliDay,
+} from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
+import UserAvatar from '@/components/UserAvatar.vue';
+import ActivityCommentSheet from '@/components/activities/ActivityCommentSheet.vue';
+import ActivityPostponeSheet from '@/components/activities/ActivityPostponeSheet.vue';
+import type { ActivityDto, ActivityPriority, ActivityType } from '@mento/shared';
+
+const route = useRoute();
+const router = useRouter();
+const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
+
+const loading = ref(true);
+const saving = ref(false);
+const error = ref('');
+const activity = ref<ActivityDto | null>(null);
+const moreOpen = ref(false);
+const commentOpen = ref(false);
+const postponeOpen = ref(false);
+const noteOpen = ref(true);
+
+const typeLabel: Record<ActivityType, string> = {
+  call: 'تماس',
+  meeting: 'جلسه',
+  task: 'وظیفه',
+  note: 'پیام',
+};
+
+const typeIcon: Record<ActivityType, 'phone' | 'users' | 'check' | 'chat'> = {
+  call: 'phone',
+  meeting: 'users',
+  task: 'check',
+  note: 'chat',
+};
+
+const priorityLabel: Record<ActivityPriority, string> = {
+  very_low: 'خیلی کم',
+  low: 'کم',
+  medium: 'متوسط',
+  high: 'زیاد',
+  very_high: 'خیلی زیاد',
+};
+
+const subtitle = computed(() => {
+  const a = activity.value;
+  if (!a) return '';
+  return a.deal?.title || a.company?.name || a.person?.fullName || '';
+});
+
+const dueLabel = computed(() => {
+  const due = activity.value?.dueAt;
+  if (!due) return 'بدون موعد';
+  const d = new Date(due);
+  const days = calendarDaysBetween(d, new Date());
+  const clock = formatClockFa(d);
+  if (days === 0) return `امروز - ${clock}`;
+  if (days === 1) return `دیروز - ${clock}`;
+  if (days === -1) return `فردا - ${clock}`;
+  return `${formatJalaliDay(d)} - ${clock}`;
+});
+
+const createdLabel = computed(() => {
+  const raw = activity.value?.createdAt;
+  if (!raw) return '—';
+  const d = new Date(raw);
+  return `${formatJalaliDay(d)} - ${formatClockFa(d)}`;
+});
+
+const isDone = computed(() => activity.value?.status === 'done');
+const statusText = computed(() => {
+  if (!activity.value) return '—';
+  if (activity.value.status === 'done') return 'انجام شد';
+  if (activity.value.status === 'canceled') return 'لغو شده';
+  return 'انجام نشده';
+});
+
+async function load() {
+  if (!id.value) return;
+  loading.value = true;
+  error.value = '';
+  moreOpen.value = false;
+  try {
+    const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
+    activity.value = data;
+  } catch {
+    error.value = 'بارگذاری جزئیات فعالیت ناموفق بود.';
+    activity.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function complete() {
+  if (!id.value || isDone.value) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    await api.patch(`/activities/${id.value}/complete`);
+    await router.push({ name: 'activities' });
+  } catch {
+    error.value = 'ثبت انجام‌شدن ناموفق بود.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function postponeTo(iso: string) {
+  if (!id.value || !activity.value || isDone.value) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    await api.patch(`/activities/${id.value}`, { dueAt: iso });
+    postponeOpen.value = false;
+    await load();
+  } catch {
+    error.value = 'تعویق فعالیت ناموفق بود.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function submitComment(text: string) {
+  const body = text.trim();
+  if (!id.value || !activity.value || !body) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    const prev = activity.value.description?.trim();
+    const next = prev ? `${prev}\n${body}` : body;
+    await api.patch(`/activities/${id.value}`, { description: next });
+    commentOpen.value = false;
+    await load();
+  } catch {
+    error.value = 'ثبت نظر ناموفق بود.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function remove() {
+  moreOpen.value = false;
+  if (!id.value || !confirm('این فعالیت حذف شود؟')) return;
+  try {
+    await api.delete(`/activities/${id.value}`);
+    await router.push({ name: 'activities' });
+  } catch {
+    error.value = 'حذف ناموفق بود.';
+  }
+}
+
+watch(id, () => {
+  commentOpen.value = false;
+  postponeOpen.value = false;
+  void load();
+});
+onMounted(load);
+</script>
+
+<template>
+  <section class="page" @click="moreOpen = false">
+    <header class="nav">
+      <RouterLink class="icon-btn back" :to="{ name: 'activities' }" aria-label="بازگشت">
+        <UiIcon name="chevron" :size="18" />
+      </RouterLink>
+      <span class="brand">mento</span>
+      <div class="more" @click.stop>
+        <button class="icon-btn" type="button" aria-label="منوی بیشتر" @click="moreOpen = !moreOpen">
+          <UiIcon name="dots-v" :size="18" />
+        </button>
+        <div v-if="moreOpen && activity" class="menu">
+          <RouterLink :to="{ name: 'activity-edit', params: { id } }">ویرایش</RouterLink>
+          <button type="button" class="danger" @click="remove">حذف</button>
+        </div>
+      </div>
+    </header>
+
+    <h1>جزئیات فعالیت</h1>
+    <p v-if="loading" class="muted">در حال بارگذاری…</p>
+    <p v-else-if="error && !activity" class="error">{{ error }}</p>
+
+    <template v-else-if="activity">
+      <article class="card">
+        <header class="hero">
+          <div>
+            <h2>
+              {{ activity.title }}
+              <UiIcon name="star" :size="16" class="star" />
+            </h2>
+            <p v-if="subtitle" class="sub">
+              <UiIcon name="building" :size="14" />
+              {{ subtitle }}
+            </p>
+          </div>
+          <span class="type-ico" :class="activity.type">
+            <UiIcon :name="typeIcon[activity.type]" :size="22" />
+          </span>
+        </header>
+
+        <dl>
+          <div>
+            <dt>
+              <UiIcon :name="typeIcon[activity.type]" :size="15" />
+              نوع فعالیت
+            </dt>
+            <dd>{{ typeLabel[activity.type] }}</dd>
+          </div>
+          <div>
+            <dt>
+              <UiIcon name="calendar" :size="15" />
+              تاریخ و زمان
+            </dt>
+            <dd>{{ dueLabel }}</dd>
+          </div>
+          <div>
+            <dt>
+              <UiIcon name="user" :size="15" />
+              مسئول
+            </dt>
+            <dd class="person">
+              <UserAvatar v-if="activity.assignee" :name="activity.assignee.fullName" :size="28" />
+              {{ activity.assignee?.fullName || '—' }}
+            </dd>
+          </div>
+          <div>
+            <dt>
+              <UiIcon name="flag" :size="15" class="flag" :class="activity.priority || 'medium'" />
+              اولویت
+            </dt>
+            <dd class="priority" :class="activity.priority || 'medium'">
+              {{ priorityLabel[activity.priority || 'medium'] }}
+            </dd>
+          </div>
+          <div>
+            <dt>وضعیت</dt>
+            <dd>
+              <span class="status" :class="{ done: isDone }">{{ statusText }}</span>
+            </dd>
+          </div>
+          <div>
+            <dt>
+              <UiIcon name="user" :size="15" />
+              ایجاد شده توسط
+            </dt>
+            <dd class="person">
+              <UserAvatar v-if="activity.createdBy" :name="activity.createdBy.fullName" :size="28" />
+              {{ activity.createdBy?.fullName || '—' }}
+            </dd>
+          </div>
+          <div>
+            <dt>
+              <UiIcon name="calendar" :size="15" />
+              تاریخ ایجاد
+            </dt>
+            <dd>{{ createdLabel }}</dd>
+          </div>
+        </dl>
+      </article>
+
+      <article class="card note">
+        <button class="note-head" type="button" @click="noteOpen = !noteOpen">
+          <strong>
+            <UiIcon name="document" :size="16" />
+            یادداشت
+          </strong>
+          <UiIcon name="chevron" :size="16" :class="{ open: noteOpen }" />
+        </button>
+        <p v-show="noteOpen" :class="{ empty: !activity.description?.trim() }">
+          {{ activity.description?.trim() || 'یادداشتی ثبت نشده.' }}
+        </p>
+      </article>
+
+      <p v-if="error" class="error">{{ error }}</p>
+
+      <ActivityCommentSheet
+        v-if="commentOpen"
+        :activity="activity"
+        :saving="saving"
+        @close="commentOpen = false"
+        @submit="submitComment"
+      />
+      <ActivityPostponeSheet
+        v-if="postponeOpen"
+        :due-at="activity.dueAt"
+        :saving="saving"
+        @close="postponeOpen = false"
+        @submit="postponeTo"
+      />
+    </template>
+
+    <footer v-if="activity && !commentOpen && !postponeOpen" class="dock">
+      <button class="act primary" type="button" :disabled="saving || isDone" @click="complete">
+        <UiIcon name="check" :size="16" />
+        انجام شد
+      </button>
+      <button class="act ghost" type="button" :disabled="saving || isDone" @click="postponeOpen = true">
+        <UiIcon name="refresh" :size="16" />
+        تعویق
+      </button>
+      <button class="act ghost" type="button" :disabled="saving" @click="commentOpen = true">
+        <UiIcon name="chat" :size="16" />
+        ثبت نظر
+      </button>
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.page {
+  max-width: 640px;
+  width: 100%;
+  min-width: 0;
+  margin: 0 auto;
+  display: grid;
+  gap: 0.9rem;
+  padding-bottom: 5.8rem;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 4;
+}
+
+.brand {
+  font-weight: 800;
+  color: #0f766e;
+  letter-spacing: -0.04em;
+}
+
+.icon-btn {
+  width: 38px;
+  height: 38px;
+  border: 0;
+  background: #fff;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: #334155;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
+}
+
+.back :deep(.ico) {
+  transform: scaleX(-1);
+}
+
+.more {
+  position: relative;
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-end: 0;
+  min-width: 10rem;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  padding: 0.35rem;
+  display: grid;
+  z-index: 6;
+}
+
+.menu a,
+.menu button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border: 0;
+  background: none;
+  padding: 0.62rem 0.75rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.menu .danger {
+  color: #b91c1c;
+}
+
+h1 {
+  margin: 0.1rem 0 0;
+  font-size: 1.35rem;
+}
+
+.muted,
+.error {
+  margin: 0;
+}
+
+.muted {
+  color: #64748b;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.card {
+  background: #fff;
+  border-radius: 20px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  padding: 1rem 1.05rem;
+}
+
+.hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  align-items: flex-start;
+  padding-bottom: 0.85rem;
+}
+
+.hero h2 {
+  margin: 0;
+  font-size: 1.05rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.35rem;
+}
+
+.star {
+  color: #cbd5e1;
+  margin-top: 0.15rem;
+}
+
+.sub {
+  margin: 0.4rem 0 0;
+  color: #64748b;
+  font-size: 0.84rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.type-ico {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.type-ico.call {
+  background: #ecfdf5;
+  color: #0f766e;
+}
+
+.type-ico.meeting {
+  background: #f5f3ff;
+  color: #6d28d9;
+}
+
+.type-ico.task {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.type-ico.note {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+dl {
+  margin: 0;
+}
+
+dl > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  align-items: center;
+  padding: 0.78rem 0;
+  border-top: 1px solid #f1f5f9;
+}
+
+dt,
+dd {
+  margin: 0;
+}
+
+dt {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #64748b;
+  font-size: 0.86rem;
+}
+
+dd {
+  font-weight: 700;
+  text-align: start;
+}
+
+.person {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.flag.low,
+.priority.low {
+  color: #64748b;
+}
+
+.flag.medium,
+.priority.medium {
+  color: #ea580c;
+}
+
+.flag.high,
+.priority.high {
+  color: #dc2626;
+}
+
+.status {
+  display: inline-flex;
+  border-radius: 999px;
+  padding: 0.22rem 0.65rem;
+  background: #ecfdf5;
+  color: #0f766e;
+  font-size: 0.8rem;
+}
+
+.status.done {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.note-head {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: #0f766e;
+  cursor: pointer;
+}
+
+.note-head :deep(.ico:last-child) {
+  transform: rotate(90deg);
+  color: #94a3b8;
+}
+
+.note-head :deep(.ico.open) {
+  transform: rotate(-90deg);
+}
+
+.note p {
+  margin: 0.75rem 0 0;
+  color: #334155;
+  line-height: 1.9;
+  font-size: 0.9rem;
+}
+
+.note p.empty {
+  color: #94a3b8;
+}
+
+.dock {
+  position: fixed;
+  inset-inline: 0.85rem;
+  bottom: calc(0.55rem + env(safe-area-inset-bottom));
+  display: grid;
+  grid-template-columns: 1.15fr 1fr 1fr;
+  gap: 0.5rem;
+  z-index: 8;
+}
+
+.act {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  min-height: 46px;
+  border-radius: 14px;
+  border: 1px solid #99f6e4;
+  background: #fff;
+  color: #0f766e;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.act.primary {
+  background: #14b8a6;
+  border-color: #14b8a6;
+  color: #fff;
+}
+
+.act:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+@media (min-width: 900px) {
+  .dock {
+    position: sticky;
+    inset-inline: auto;
+    bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web/src/views/ActivityFormView.vue b/apps/web/src/views/ActivityFormView.vue
index ebe9589..a105d05 100644
--- a/apps/web/src/views/ActivityFormView.vue
+++ b/apps/web/src/views/ActivityFormView.vue
@@ -1,13 +1,26 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import { useAuthStore } from '@/stores/auth';
+import {
+  formatJalaliNumeric,
+  formatLocalDateInput,
+  formatLocalDateTimeInput,
+  parseLocalInput,
+  toFaDigits,
+} from '@/lib/jalali';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
+import UiIcon from '@/components/UiIcon.vue';
+import UserAvatar from '@/components/UserAvatar.vue';
 import type {
   ActivityDto,
+  ActivityPriority,
   ActivityType,
   CreateActivityRequest,
   DealDto,
+  OrgUserDto,
   PaginatedResponse,
   PersonDto,
   PipelineBoardDto,
@@ -15,61 +28,180 @@ import type {
 
 const route = useRoute();
 const router = useRouter();
+const auth = useAuthStore();
 const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
 const isNew = computed(() => route.name === 'activity-new');
 
 const loading = ref(false);
 const saving = ref(false);
 const error = ref('');
+const tab = ref<'main' | 'notes'>('main');
 const people = ref<PersonDto[]>([]);
 const deals = ref<DealDto[]>([]);
+const users = ref<OrgUserDto[]>([]);
 
 const title = ref('');
-const type = ref<ActivityType>('task');
+const type = ref<ActivityType | ''>('');
+const priority = ref<ActivityPriority>('medium');
 const description = ref('');
-const dueAt = ref('');
+const dueDate = ref('');
+const dueTime = ref('10:30');
+const durationMinutes = ref(30);
 const personId = ref('');
 const dealId = ref('');
+const assigneeId = ref('');
+const isDone = ref(false);
+const needsNote = ref(false);
+const reminderAt = ref('');
 
-const typeOptions: Array<{ value: ActivityType; label: string }> = [
-  { value: 'call', label: 'تماس' },
-  { value: 'meeting', label: 'جلسه' },
-  { value: 'task', label: 'وظیفه' },
-  { value: 'note', label: 'یادداشت' },
+const typeOpen = ref(false);
+const assigneeOpen = ref(false);
+const personOpen = ref(false);
+
+const typeOptions: Array<{
+  value: ActivityType;
+  label: string;
+  icon: 'phone' | 'users' | 'check' | 'chat';
+}> = [
+  { value: 'call', label: 'تماس', icon: 'phone' },
+  { value: 'meeting', label: 'جلسه', icon: 'users' },
+  { value: 'task', label: 'وظیفه', icon: 'check' },
+  { value: 'note', label: 'یادداشت', icon: 'chat' },
 ];
 
-function toLocalInput(iso: string | null) {
-  if (!iso) return '';
-  const d = new Date(iso);
-  const pad = (n: number) => String(n).padStart(2, '0');
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+const priorityOptions: Array<{ value: ActivityPriority; label: string; tone: string }> = [
+  { value: 'very_high', label: 'خیلی زیاد', tone: 'very-high' },
+  { value: 'high', label: 'زیاد', tone: 'high' },
+  { value: 'medium', label: 'متوسط', tone: 'medium' },
+  { value: 'low', label: 'کم', tone: 'low' },
+  { value: 'very_low', label: 'خیلی کم', tone: 'very-low' },
+];
+
+const typeMeta = computed(() => typeOptions.find((o) => o.value === type.value));
+const selectedPerson = computed(() => people.value.find((p) => p.id === personId.value) ?? null);
+const selectedAssignee = computed(() => users.value.find((u) => u.id === assigneeId.value) ?? null);
+const selectedDeal = computed(() => deals.value.find((d) => d.id === dealId.value) ?? null);
+const personDeals = computed(() =>
+  deals.value.filter((d) => !personId.value || d.person?.id === personId.value),
+);
+const personSub = computed(
+  () => selectedDeal.value?.title || selectedPerson.value?.company?.name || '',
+);
+
+const duePreview = computed(() => {
+  if (!dueDate.value) return '—';
+  const d = parseLocalInput(`${dueDate.value}T${dueTime.value || '00:00'}`);
+  if (!d) return '—';
+  return `${formatJalaliNumeric(d)}  ${toFaDigits((dueTime.value || '00:00').replace(':', ':'))}`;
+});
+
+const reminderLabel = computed(() => {
+  if (!reminderAt.value) return 'یادآوری تنظیم نشده است';
+  const d = parseLocalInput(reminderAt.value);
+  return d ? `${formatJalaliNumeric(d)}  ${toFaDigits(String(d.getHours()).padStart(2, '0'))}:${toFaDigits(String(d.getMinutes()).padStart(2, '0'))}` : 'یادآوری تنظیم نشده است';
+});
+
+const statusText = computed(() => (isDone.value ? 'انجام شده' : 'انجام نشده'));
+const priorityText = computed(
+  () => priorityOptions.find((p) => p.value === priority.value)?.label || '—',
+);
+const pageTitle = computed(() => (isNew.value ? 'ایجاد فعالیت جدید' : 'ویرایش فعالیت'));
+const summaryReady = computed(() => Boolean(title.value.trim() || type.value || selectedPerson.value));
+
+function pad(n: number) {
+  return String(n).padStart(2, '0');
 }
 
+function splitDue(iso: string | null) {
+  if (!iso) return;
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return;
+  dueDate.value = formatLocalDateInput(d);
+  dueTime.value = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function defaultDue() {
+  const d = new Date();
+  d.setHours(10, 30, 0, 0);
+  dueDate.value = formatLocalDateInput(d);
+  dueTime.value = '10:30';
+}
+
+function resetForm() {
+  title.value = '';
+  type.value = '';
+  priority.value = 'medium';
+  description.value = '';
+  defaultDue();
+  durationMinutes.value = 30;
+  personId.value = '';
+  dealId.value = '';
+  assigneeId.value = auth.user?.id ?? '';
+  isDone.value = false;
+  needsNote.value = false;
+  reminderAt.value = '';
+  tab.value = 'main';
+  error.value = '';
+}
+
+watch(personId, () => {
+  if (dealId.value && !personDeals.value.some((d) => d.id === dealId.value)) {
+    dealId.value = personDeals.value[0]?.id ?? '';
+  } else if (!dealId.value && personDeals.value.length === 1) {
+    dealId.value = personDeals.value[0].id;
+  }
+});
+
+watch(needsNote, (on) => {
+  if (on) tab.value = 'notes';
+});
+
 async function load() {
   loading.value = true;
   error.value = '';
   try {
-    const [peopleRes, boardRes] = await Promise.all([
+    const [peopleRes, boardRes, usersRes] = await Promise.all([
       api.get<PaginatedResponse<PersonDto>>('/people', { params: { limit: 100 } }),
       api.get<PipelineBoardDto>('/pipelines/board'),
+      api.get<OrgUserDto[]>('/users').catch(() => ({ data: [] as OrgUserDto[] })),
     ]);
     people.value = peopleRes.data.items;
     deals.value = boardRes.data.stages.flatMap((s) => s.deals);
+    users.value = usersRes.data;
 
     if (!isNew.value && id.value) {
       const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
       title.value = data.title;
       type.value = data.type;
+      priority.value = data.priority ?? 'medium';
       description.value = data.description ?? '';
-      dueAt.value = toLocalInput(data.dueAt);
+      needsNote.value = Boolean(data.description?.trim());
+      splitDue(data.dueAt);
+      durationMinutes.value = data.durationMinutes ?? 30;
+      reminderAt.value = data.reminderAt
+        ? formatLocalDateTimeInput(new Date(data.reminderAt))
+        : '';
       personId.value = data.person?.id ?? '';
       dealId.value = data.deal?.id ?? '';
-    } else if (typeof route.query.dueAt === 'string' && route.query.dueAt) {
-      dueAt.value = toLocalInput(new Date(route.query.dueAt).toISOString());
+      assigneeId.value = data.assignee?.id ?? auth.user?.id ?? '';
+      isDone.value = data.status === 'done';
     } else {
-      const tomorrow = new Date();
-      tomorrow.setHours(10, 0, 0, 0);
-      dueAt.value = toLocalInput(tomorrow.toISOString());
+      resetForm();
+      if (typeof route.query.personId === 'string' && route.query.personId) {
+        personId.value = route.query.personId;
+      }
+      if (
+        typeof route.query.type === 'string' &&
+        typeOptions.some((o) => o.value === route.query.type)
+      ) {
+        type.value = route.query.type as ActivityType;
+      }
+      if (typeof route.query.title === 'string' && route.query.title) {
+        title.value = route.query.title;
+      }
+      if (typeof route.query.dueAt === 'string' && route.query.dueAt) {
+        splitDue(new Date(route.query.dueAt).toISOString());
+      }
     }
   } catch {
     error.value = 'بارگذاری فرم فعالیت ناموفق بود.';
@@ -79,32 +211,70 @@ async function load() {
 }
 
 function payload(): CreateActivityRequest {
+  const due =
+    dueDate.value && dueTime.value ? new Date(`${dueDate.value}T${dueTime.value}:00`) : null;
+  const reminder = reminderAt.value ? new Date(reminderAt.value) : null;
   return {
     title: title.value,
-    type: type.value,
+    type: type.value || 'task',
+    priority: priority.value,
     description: description.value || undefined,
-    dueAt: dueAt.value ? new Date(dueAt.value).toISOString() : null,
+    dueAt: due && !Number.isNaN(due.getTime()) ? due.toISOString() : null,
+    durationMinutes: durationMinutes.value || null,
+    reminderAt: reminder && !Number.isNaN(reminder.getTime()) ? reminder.toISOString() : null,
     personId: personId.value || null,
+    companyId: selectedPerson.value?.company?.id ?? null,
     dealId: dealId.value || null,
+    assigneeId: assigneeId.value || null,
   };
 }
 
-async function submit() {
+function validate() {
+  if (!type.value) return 'نوع فعالیت را انتخاب کنید.';
+  if (title.value.trim().length < 2) return 'عنوان فعالیت را بنویسید.';
+  if (!dueDate.value || !dueTime.value) return 'تاریخ و ساعت را مشخص کنید.';
+  if (!assigneeId.value) return 'مسئول فعالیت را انتخاب کنید.';
+  if (isNew.value && !personId.value) return 'شخص یا مشتری مرتبط را انتخاب کنید.';
+  if (needsNote.value && !description.value.trim()) return 'توضیح این فعالیت را بنویسید.';
+  return '';
+}
+
+async function submit(next: 'detail' | 'new' = 'detail') {
+  const message = validate();
+  if (message) {
+    error.value = message;
+    if (needsNote.value && !description.value.trim()) tab.value = 'notes';
+    else tab.value = 'main';
+    return;
+  }
   saving.value = true;
   error.value = '';
   try {
+    let savedId = id.value;
     if (isNew.value) {
       const { data } = await api.post<ActivityDto>('/activities', payload());
-      await router.replace({ name: 'activity-detail', params: { id: data.id } });
+      savedId = data.id;
+      if (isDone.value) {
+        await api.patch(`/activities/${savedId}/complete`);
+      }
     } else {
-      await api.patch(`/activities/${id.value}`, payload());
-      await router.push({ name: 'activities' });
+      await api.patch(`/activities/${id.value}`, {
+        ...payload(),
+        status: isDone.value ? 'done' : 'open',
+      });
     }
+    if (next === 'new') {
+      if (!isNew.value) {
+        await router.push({ name: 'activity-new' });
+      }
+      resetForm();
+      return;
+    }
+    await router.replace({ name: 'activity-detail', params: { id: savedId } });
   } catch (e) {
     if (axios.isAxiosError(e)) {
-      if (!e.response) {
-        error.value = 'اتصال به سرور برقرار نشد.';
-      } else {
+      if (!e.response) error.value = 'اتصال به سرور برقرار نشد.';
+      else {
         const msg = (e.response.data as { message?: string | string[] })?.message;
         error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره ناموفق بود');
       }
@@ -116,164 +286,802 @@ async function submit() {
   }
 }
 
-async function complete() {
-  if (!id.value) return;
-  try {
-    await api.patch(`/activities/${id.value}/complete`);
-    await router.push({ name: 'activities' });
-  } catch {
-    error.value = 'ثبت انجام‌شدن ناموفق بود';
-  }
+function bumpDuration(delta: number) {
+  durationMinutes.value = Math.min(24 * 60, Math.max(5, durationMinutes.value + delta));
 }
 
-async function remove() {
-  if (!id.value || !confirm('این فعالیت حذف شود؟')) return;
-  try {
-    await api.delete(`/activities/${id.value}`);
-    await router.push({ name: 'activities' });
-  } catch {
-    error.value = 'حذف ناموفق بود';
+function cancel() {
+  if (!isNew.value && id.value) {
+    void router.push({ name: 'activity-detail', params: { id: id.value } });
+    return;
   }
+  void router.push({ name: 'activities' });
 }
 
-onMounted(load);
+watch([id, isNew], () => void load(), { immediate: true });
 </script>
 
 <template>
-  <section class="page">
-    <header class="page-head">
-      <div>
-        <p class="eyebrow">فعالیت</p>
-        <h1>{{ isNew ? 'فعالیت جدید' : 'ویرایش فعالیت' }}</h1>
+  <section class="page" @click="typeOpen = assigneeOpen = personOpen = false">
+    <header class="desktop-head">
+      <p class="crumb">
+        <RouterLink :to="{ name: 'activities' }">فعالیت‌ها</RouterLink>
+        <span>‹</span>
+        <strong>{{ pageTitle }}</strong>
+      </p>
+      <div class="desk-actions">
+        <button class="btn primary" type="button" :disabled="saving" @click="submit('detail')">
+          <UiIcon name="check-plain" :size="16" />
+          {{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
+        </button>
+        <button class="btn outline" type="button" :disabled="saving" @click="submit('new')">
+          <UiIcon name="plus" :size="16" />
+          ذخیره و ایجاد جدید
+        </button>
+        <button class="btn cancel" type="button" :disabled="saving" @click="cancel">
+          <UiIcon name="x" :size="16" />
+          انصراف
+        </button>
       </div>
-      <RouterLink class="btn btn-ghost" :to="{ name: 'activities' }">بازگشت</RouterLink>
     </header>
 
-    <p v-if="loading" class="muted">در حال بارگذاری…</p>
-    <form v-else class="form-card" @submit.prevent="submit">
-      <div class="grid">
-        <div class="field wide">
-          <label for="title">عنوان</label>
-          <input id="title" v-model="title" required minlength="2" placeholder="مثلاً تماس پیگیری پیشنهاد" />
-        </div>
-        <div class="field">
-          <label for="type">نوع</label>
-          <select id="type" v-model="type">
-            <option v-for="opt in typeOptions" :key="opt.value" :value="opt.value">
-              {{ opt.label }}
-            </option>
-          </select>
-        </div>
-        <div class="field">
-          <label for="dueAt">موعد</label>
-          <input id="dueAt" v-model="dueAt" type="datetime-local" />
-        </div>
-        <div class="field">
-          <label for="personId">شخص مرتبط</label>
-          <select id="personId" v-model="personId">
-            <option value="">بدون شخص</option>
-            <option v-for="p in people" :key="p.id" :value="p.id">{{ p.fullName }}</option>
-          </select>
-        </div>
-        <div class="field">
-          <label for="dealId">معامله مرتبط</label>
-          <select id="dealId" v-model="dealId">
-            <option value="">بدون معامله</option>
-            <option v-for="d in deals" :key="d.id" :value="d.id">{{ d.title }}</option>
-          </select>
-        </div>
-        <div class="field wide">
-          <label for="description">توضیح</label>
-          <textarea id="description" v-model="description" rows="4" />
-        </div>
-      </div>
+    <header class="mobile-head">
+      <button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit('detail')">
+        <UiIcon name="check-plain" :size="22" />
+      </button>
+      <h1>{{ pageTitle }}</h1>
+      <button class="icon-btn" type="button" aria-label="بستن" @click="cancel">
+        <UiIcon name="x" :size="20" />
+      </button>
+    </header>
 
-      <p v-if="error" class="error">{{ error }}</p>
-      <div class="form-actions">
-        <button class="btn" type="submit" :disabled="saving">
-          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-        </button>
-        <button
-          v-if="!isNew"
-          class="btn btn-ghost"
-          type="button"
-          :disabled="saving"
-          @click="complete"
-        >
-          انجام شد
-        </button>
-        <button
-          v-if="!isNew"
-          class="btn btn-danger"
-          type="button"
-          :disabled="saving"
-          @click="remove"
-        >
-          حذف
-        </button>
-      </div>
-    </form>
+    <nav class="tabs">
+      <button type="button" :class="{ on: tab === 'main' }" @click="tab = 'main'">اطلاعات اصلی</button>
+      <button type="button" :class="{ on: tab === 'notes' }" @click="tab = 'notes'">توضیحات و یادداشت</button>
+    </nav>
+
+    <p v-if="loading" class="muted">در حال بارگذاری…</p>
+
+    <div v-else class="layout">
+      <form class="form" @submit.prevent="submit('detail')">
+        <div v-show="tab === 'main'" class="stack">
+          <div class="card pair">
+            <div class="field">
+              <label>نوع فعالیت <i>*</i></label>
+              <button class="picker type-pick" type="button" @click.stop="typeOpen = !typeOpen">
+                <span class="type-ico" :class="type || 'empty'">
+                  <UiIcon :name="typeMeta?.icon || 'phone'" :size="16" />
+                </span>
+                <span :class="{ ghost: !typeMeta }">{{ typeMeta?.label || 'انتخاب کنید' }}</span>
+                <UiIcon name="chevron" :size="16" />
+              </button>
+              <ul v-if="typeOpen" class="menu">
+                <li v-for="opt in typeOptions" :key="opt.value">
+                  <button type="button" @click="type = opt.value; typeOpen = false">
+                    <span class="type-ico" :class="opt.value">
+                      <UiIcon :name="opt.icon" :size="14" />
+                    </span>
+                    {{ opt.label }}
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div class="field">
+              <label for="title">عنوان فعالیت <i>*</i></label>
+              <input
+                id="title"
+                v-model="title"
+                required
+                minlength="2"
+                placeholder="مثلاً: تماس پیگیری جهت ارائه پیش‌فاکتور"
+              />
+            </div>
+          </div>
+
+          <div class="card toggles">
+            <label class="switch">
+              <span>این فعالیت انجام شده</span>
+              <input v-model="isDone" type="checkbox" />
+              <i />
+            </label>
+            <label class="switch">
+              <span>این فعالیت نیاز به توضیح دارد</span>
+              <input v-model="needsNote" type="checkbox" />
+              <i />
+            </label>
+          </div>
+
+          <div class="card trio">
+            <div class="field">
+              <label>تاریخ <i>*</i></label>
+              <JalaliDateInput v-model="dueDate" required />
+            </div>
+            <div class="field">
+              <label>ساعت <i>*</i></label>
+              <JalaliDateInput v-model="dueTime" mode="time" required />
+            </div>
+            <div class="field">
+              <label>مدت فعالیت (دقیقه) <i>*</i></label>
+              <div class="stepper">
+                <button type="button" aria-label="افزایش" @click="bumpDuration(5)">
+                  <UiIcon name="plus" :size="16" />
+                </button>
+                <strong>{{ toFaDigits(durationMinutes) }}</strong>
+                <button type="button" aria-label="کاهش" @click="bumpDuration(-5)">
+                  <UiIcon name="minus" :size="16" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="field">
+              <label>مسئول انجام این فعالیت <i>*</i></label>
+              <button class="picker person-pick" type="button" @click.stop="assigneeOpen = !assigneeOpen">
+                <UserAvatar :name="selectedAssignee?.fullName || 'مسئول'" :size="32" />
+                <span :class="{ ghost: !selectedAssignee }">
+                  {{ selectedAssignee?.fullName || 'انتخاب مسئول' }}
+                </span>
+                <UiIcon name="chevron" :size="16" />
+              </button>
+              <ul v-if="assigneeOpen" class="menu">
+                <li v-for="user in users" :key="user.id">
+                  <button type="button" @click="assigneeId = user.id; assigneeOpen = false">
+                    <UserAvatar :name="user.fullName" :size="28" />
+                    {{ user.fullName }}
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="field">
+              <label>شخص / مشتری مرتبط <i>*</i></label>
+              <button class="picker person-pick" type="button" @click.stop="personOpen = !personOpen">
+                <UserAvatar :name="selectedPerson?.fullName || 'مشتری'" src="" :size="32" />
+                <span class="who">
+                  <b :class="{ ghost: !selectedPerson }">{{ selectedPerson?.fullName || 'انتخاب کنید' }}</b>
+                  <small v-if="personSub">{{ personSub }}</small>
+                </span>
+                <UiIcon name="chevron" :size="16" />
+              </button>
+              <ul v-if="personOpen" class="menu">
+                <li v-for="p in people" :key="p.id">
+                  <button type="button" @click="personId = p.id; personOpen = false">
+                    <UserAvatar :name="p.fullName" src="" :size="28" />
+                    <span class="who">
+                      <b>{{ p.fullName }}</b>
+                      <small>{{ p.company?.name || '' }}</small>
+                    </span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div v-if="personDeals.length > 1" class="field deal-field">
+              <label>فرصت مرتبط</label>
+              <select v-model="dealId">
+                <option value="">بدون معامله</option>
+                <option v-for="d in personDeals" :key="d.id" :value="d.id">{{ d.title }}</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="card">
+            <p class="pri-label">اولویت</p>
+            <div class="priorities">
+              <label v-for="opt in priorityOptions" :key="opt.value" :class="['pri', opt.tone, { on: priority === opt.value }]">
+                <input v-model="priority" type="radio" :value="opt.value" />
+                <UiIcon name="flag" :size="16" />
+                <span>{{ opt.label }}</span>
+              </label>
+            </div>
+          </div>
+
+          <div class="card reminder">
+            <JalaliDateInput
+              v-model="reminderAt"
+              mode="datetime"
+              icon="bell"
+              placeholder="یادآوری تنظیم نشده است"
+            />
+          </div>
+        </div>
+
+        <div v-show="tab === 'notes'" class="card note-card">
+          <label for="description">توضیحات و یادداشت</label>
+          <textarea
+            id="description"
+            v-model="description"
+            rows="8"
+            placeholder="جزئیات تماس، نتیجه جلسه یا یادداشت مرتبط را بنویسید…"
+          />
+        </div>
+
+        <p v-if="error" class="error">{{ error }}</p>
+      </form>
+
+      <aside class="summary">
+        <h2>
+          <UiIcon name="document" :size="18" />
+          خلاصه فعالیت
+        </h2>
+        <div v-if="!summaryReady" class="empty">
+          <UiIcon name="calendar" :size="28" />
+          <p>با تکمیل اطلاعات، خلاصه فعالیت در اینجا نمایش داده می‌شود.</p>
+        </div>
+        <dl>
+          <div>
+            <dt>نوع فعالیت</dt>
+            <dd>{{ typeMeta?.label || '—' }}</dd>
+          </div>
+          <div>
+            <dt>تاریخ و ساعت</dt>
+            <dd>{{ duePreview }}</dd>
+          </div>
+          <div>
+            <dt>مدت فعالیت</dt>
+            <dd>{{ toFaDigits(durationMinutes) }} دقیقه</dd>
+          </div>
+          <div>
+            <dt>مسئول</dt>
+            <dd>{{ selectedAssignee?.fullName || '—' }}</dd>
+          </div>
+          <div>
+            <dt>مشتری مرتبط</dt>
+            <dd>{{ selectedPerson?.fullName || '—' }}</dd>
+          </div>
+          <div>
+            <dt>وضعیت انجام</dt>
+            <dd>{{ statusText }}</dd>
+          </div>
+          <div>
+            <dt>اولویت</dt>
+            <dd>{{ priorityText }}</dd>
+          </div>
+        </dl>
+      </aside>
+    </div>
+
+    <footer class="mobile-save">
+      <button class="btn primary" type="button" :disabled="saving || loading" @click="submit('detail')">
+        {{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
+      </button>
+    </footer>
   </section>
 </template>
 
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
-  max-width: 820px;
+  gap: 0.85rem;
+  padding-bottom: 5.5rem;
 }
 
-.page-head {
-  display: flex;
+.desktop-head {
+  display: none;
   justify-content: space-between;
   gap: 1rem;
-  align-items: flex-start;
+  align-items: center;
 }
 
-.eyebrow {
+.crumb {
   margin: 0;
-  color: var(--accent);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #64748b;
+}
+
+.crumb a {
+  color: #0f766e;
   font-weight: 700;
 }
 
-h1 {
-  margin: 0.2rem 0 0;
-  font-size: 1.7rem;
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.form-card {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 1.2rem;
-  display: grid;
-  gap: 1rem;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.9rem;
-}
-
-.wide {
-  grid-column: 1 / -1;
-}
-
-.form-actions {
+.desk-actions {
   display: flex;
-  gap: 0.6rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
-@media (max-width: 700px) {
-  .grid {
-    grid-template-columns: 1fr;
+.mobile-head {
+  display: grid;
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
+}
+
+.mobile-head h1 {
+  margin: 0;
+  text-align: center;
+  font-size: 1.05rem;
+}
+
+.icon-btn {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: none;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.tabs {
+  display: flex;
+  gap: 1.2rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.tabs button {
+  border: 0;
+  background: none;
+  padding: 0.55rem 0;
+  font: inherit;
+  color: #94a3b8;
+  cursor: pointer;
+}
+
+.tabs .on {
+  color: #0f766e;
+  font-weight: 800;
+  box-shadow: inset 0 -2px 0 #14b8a6;
+}
+
+.layout {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.summary {
+  display: none;
+}
+
+.form,
+.stack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.card {
+  position: relative;
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.95rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
+
+.field {
+  display: grid;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.field label,
+.pri-label {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.82rem;
+}
+
+.field i {
+  color: #dc2626;
+  font-style: normal;
+}
+
+.field input,
+.field select,
+.field textarea,
+.note-card textarea {
+  width: 100%;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.75rem 0.85rem;
+  font: inherit;
+  background: #fff;
+}
+
+.picker {
+  width: 100%;
+  min-height: 48px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.4rem 0.7rem;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.picker .ghost,
+.who .ghost {
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.picker :deep(.ico:last-child) {
+  margin-inline-start: auto;
+  color: #94a3b8;
+  transform: rotate(90deg);
+}
+
+.type-ico {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: #ecfdf5;
+  color: #0d9488;
+  flex-shrink: 0;
+}
+
+.type-ico.meeting {
+  background: #f5f3ff;
+  color: #7c3aed;
+}
+
+.type-ico.task {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.type-ico.note {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.who {
+  display: grid;
+  min-width: 0;
+  text-align: start;
+}
+
+.who b {
+  font-weight: 800;
+}
+
+.who small {
+  color: #94a3b8;
+  font-size: 0.75rem;
+}
+
+.menu {
+  position: absolute;
+  inset-inline: 0.95rem;
+  top: calc(100% - 0.35rem);
+  z-index: 5;
+  margin: 0;
+  padding: 0.35rem;
+  list-style: none;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  max-height: 16rem;
+  overflow: auto;
+}
+
+.menu button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  border: 0;
+  background: none;
+  padding: 0.55rem 0.5rem;
+  border-radius: 8px;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.menu button:hover {
+  background: #f8fafc;
+}
+
+.toggles {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  cursor: pointer;
+}
+
+.switch input {
+  display: none;
+}
+
+.switch i {
+  width: 44px;
+  height: 26px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.switch i::after {
+  content: '';
+  position: absolute;
+  inset-inline-start: 3px;
+  top: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: #fff;
+  transition: 0.18s;
+}
+
+.switch input:checked + i {
+  background: #14b8a6;
+}
+
+.switch input:checked + i::after {
+  inset-inline-start: 21px;
+}
+
+.trio {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.2rem;
+}
+
+.stepper button {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: 10px;
+  background: #f0fdfa;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.stepper strong {
+  font-size: 1.05rem;
+}
+
+.deal-field {
+  margin-top: 0.75rem;
+}
+
+.priorities {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.25rem;
+  margin-top: 0.45rem;
+}
+
+.pri {
+  display: grid;
+  justify-items: center;
+  gap: 0.2rem;
+  font-size: 0.68rem;
+  color: #64748b;
+  cursor: pointer;
+}
+
+.pri input {
+  accent-color: #14b8a6;
+}
+
+.pri.very-high {
+  color: #dc2626;
+}
+
+.pri.high {
+  color: #ea580c;
+}
+
+.pri.medium {
+  color: #0d9488;
+}
+
+.pri.low {
+  color: #2563eb;
+}
+
+.pri.very-low {
+  color: #94a3b8;
+}
+
+.pri.on span {
+  font-weight: 800;
+}
+
+.reminder :deep(.trigger) {
+  border: 0;
+  min-height: 48px;
+  padding-inline: 0.15rem;
+}
+
+.note-card {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.note-card textarea {
+  min-height: 12rem;
+  resize: vertical;
+}
+
+.muted,
+.error {
+  margin: 0;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 44px;
+  border-radius: 12px;
+  padding: 0.55rem 0.95rem;
+  font: inherit;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.btn.primary {
+  border: 0;
+  background: #14b8a6;
+  color: #fff;
+}
+
+.btn.outline {
+  border: 1.5px solid #14b8a6;
+  background: #fff;
+  color: #0f766e;
+}
+
+.btn.cancel {
+  border: 1.5px solid #f87171;
+  background: #fff;
+  color: #dc2626;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mobile-save {
+  position: fixed;
+  inset-inline: 0.85rem;
+  bottom: calc(0.55rem + env(safe-area-inset-bottom));
+  z-index: 8;
+}
+
+.mobile-save .btn {
+  width: 100%;
+  min-height: 50px;
+  border-radius: 14px;
+}
+
+@media (min-width: 960px) {
+  .page {
+    padding-bottom: 1rem;
+    gap: 1rem;
+  }
+
+  .desktop-head {
+    display: flex;
+  }
+
+  .mobile-head,
+  .mobile-save {
+    display: none;
+  }
+
+  .layout {
+    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
+    align-items: start;
+    gap: 1rem;
+  }
+
+  .summary {
+    display: block;
+    position: sticky;
+    top: 0.8rem;
+    background: #fff;
+    border-radius: 20px;
+    padding: 1rem 1.05rem 0.7rem;
+    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  }
+
+  .summary h2 {
+    margin: 0 0 0.8rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.95rem;
+    color: #0f766e;
+  }
+
+  .empty {
+    display: grid;
+    justify-items: center;
+    gap: 0.45rem;
+    padding: 1rem 0.6rem;
+    border-radius: 14px;
+    background: #f8fafc;
+    color: #94a3b8;
+    text-align: center;
+    font-size: 0.78rem;
+    margin-bottom: 0.7rem;
+  }
+
+  .empty p {
+    margin: 0;
+  }
+
+  .summary dl {
+    margin: 0;
+  }
+
+  .summary dl > div {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.6rem;
+    padding: 0.62rem 0;
+    border-top: 1px solid #f1f5f9;
+    font-size: 0.8rem;
+  }
+
+  .summary dt {
+    color: #94a3b8;
+  }
+
+  .summary dd {
+    margin: 0;
+    font-weight: 700;
+  }
+
+  .pair,
+  .toggles,
+  .trio {
+    grid-template-columns: 1fr 1fr;
+    align-items: end;
+  }
+
+  .trio {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .toggles {
+    align-items: center;
+  }
+
+  .toggles .switch {
+    justify-content: flex-start;
+  }
+
+  .priorities {
+    justify-content: flex-start;
+    gap: 1.1rem;
   }
 }
 </style>
diff --git a/apps/web/src/views/DealFormView.vue b/apps/web/src/views/DealFormView.vue
index b061f04..16dccc9 100644
--- a/apps/web/src/views/DealFormView.vue
+++ b/apps/web/src/views/DealFormView.vue
@@ -4,6 +4,7 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import EntityTimeline from '@/components/EntityTimeline.vue';
 import { formatMoney } from '@/lib/money';
 import type {
@@ -167,6 +168,14 @@ async function load() {
     } else {
       const firstOpen = stages.value.find((s) => !s.isWon && !s.isLost);
       stageId.value = firstOpen?.id ?? stages.value[0]?.id ?? '';
+      if (typeof route.query.personId === 'string' && route.query.personId) {
+        personId.value = route.query.personId;
+        const person = people.value.find((p) => p.id === personId.value);
+        if (person?.company?.id) companyId.value = person.company.id;
+      }
+      if (typeof route.query.companyId === 'string' && route.query.companyId) {
+        companyId.value = route.query.companyId;
+      }
     }
   } catch {
     error.value = 'بارگذاری فرم معامله ناموفق بود.';
@@ -310,7 +319,7 @@ onMounted(load);
         </div>
         <div class="field">
           <label for="expectedCloseAt">تاریخ بسته‌شدن مورد انتظار</label>
-          <input id="expectedCloseAt" v-model="expectedCloseAt" type="date" />
+          <JalaliDateInput id="expectedCloseAt" v-model="expectedCloseAt" />
         </div>
         <div class="field wide">
           <label for="tags">برچسب‌ها (با کاما جدا کنید)</label>
diff --git a/apps/web/src/views/InvoiceFormView.vue b/apps/web/src/views/InvoiceFormView.vue
index 797cd5f..1f89d65 100644
--- a/apps/web/src/views/InvoiceFormView.vue
+++ b/apps/web/src/views/InvoiceFormView.vue
@@ -4,6 +4,8 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatMoney as formatMoneyLib } from '@/lib/money';
+import { formatLocalDateInput } from '@/lib/jalali';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import type {
   CompanyDto,
   CreateInvoiceRequest,
@@ -66,7 +68,7 @@ const payAmount = ref('');
 const payMethod = ref<PaymentMethod>('transfer');
 const payNotes = ref('');
 const payInstallmentId = ref('');
-const payDate = ref(new Date().toISOString().slice(0, 10));
+const payDate = ref(formatLocalDateInput(new Date()));
 
 const statusLabel: Record<InvoiceStatus, string> = {
   draft: 'پیش‌نویس',
@@ -137,7 +139,7 @@ function splitInstallments(count: number) {
     d.setMonth(d.getMonth() + i + 1);
     return {
       key: `split-${i}-${Date.now()}`,
-      dueDate: d.toISOString().slice(0, 10),
+      dueDate: formatLocalDateInput(d),
       amount: String(base + (i === count - 1 ? remainder : 0)),
     };
   });
@@ -414,7 +416,7 @@ onMounted(load);
         </div>
         <div class="field">
           <label>سررسید</label>
-          <input v-model="dueDate" type="date" />
+          <JalaliDateInput v-model="dueDate" />
         </div>
         <div class="field">
           <label>ارز</label>
@@ -512,7 +514,7 @@ onMounted(load);
           :key="item.key"
           class="installment-row"
         >
-          <input v-model="item.dueDate" type="date" />
+          <JalaliDateInput v-model="item.dueDate" />
           <input
             v-model="item.amount"
             type="number"
@@ -561,7 +563,7 @@ onMounted(load);
             {{ label }}
           </option>
         </select>
-        <input v-model="payDate" type="date" />
+        <JalaliDateInput v-model="payDate" />
         <select v-model="payInstallmentId">
           <option value="">بدون اتصال به قسط</option>
           <option
diff --git a/apps/web/src/views/NotesView.vue b/apps/web/src/views/NotesView.vue
index 24319f8..d960da2 100644
--- a/apps/web/src/views/NotesView.vue
+++ b/apps/web/src/views/NotesView.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import NoteAiSuggestionPanel from '@/components/NoteAiSuggestionPanel.vue';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import type {
   DealDto,
   NoteAttachmentDto,
@@ -15,6 +16,7 @@ import type {
 } from '@mento/shared';
 
 const router = useRouter();
+const route = useRoute();
 const loading = ref(false);
 const saving = ref(false);
 const error = ref('');
@@ -72,6 +74,13 @@ async function load() {
     notes.value = notesRes.data.items;
     people.value = peopleRes.data.items;
     deals.value = boardRes.data.stages.flatMap((s) => s.deals);
+    if (typeof route.query.personId === 'string' && route.query.personId) {
+      draftPersonId.value = route.query.personId;
+      showExtras.value = true;
+    }
+    if (typeof route.query.q === 'string' && route.query.q && !q.value) {
+      q.value = route.query.q;
+    }
   } catch (e) {
     if (axios.isAxiosError(e) && !e.response) {
       error.value = 'اتصال به API برقرار نشد.';
@@ -372,7 +381,7 @@ onMounted(load);
         </div>
         <div class="field">
           <label>یادآوری</label>
-          <input v-model="draftReminder" type="datetime-local" />
+          <JalaliDateInput v-model="draftReminder" mode="datetime" />
         </div>
       </div>
     </form>
diff --git a/apps/web/src/views/PersonFormView.vue b/apps/web/src/views/PersonFormView.vue
index 145360f..27bd1ea 100644
--- a/apps/web/src/views/PersonFormView.vue
+++ b/apps/web/src/views/PersonFormView.vue
@@ -165,7 +165,7 @@ async function submit() {
 
       await api.patch(`/people/${id.value}`, payload());
 
-      await router.push({ name: 'contacts', query: { tab: undefined } });
+      await router.push({ name: 'person-detail', params: { id: id.value } });
 
     }
 
@@ -241,7 +241,10 @@ onMounted(load);
 
       </div>
 
-      <RouterLink class="btn btn-ghost" :to="{ name: 'contacts' }">بازگشت</RouterLink>
+      <RouterLink
+        class="btn btn-ghost"
+        :to="isNew ? { name: 'contacts' } : { name: 'person-detail', params: { id } }"
+      >بازگشت</RouterLink>
 
     </header>
 
diff --git a/apps/web/src/views/PersonProfileView.vue b/apps/web/src/views/PersonProfileView.vue
new file mode 100644
index 0000000..3f6727d
--- /dev/null
+++ b/apps/web/src/views/PersonProfileView.vue
@@ -0,0 +1,1509 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { api } from '@/lib/api';
+import { formatCompactMoney, formatMoney } from '@/lib/money';
+import {
+  calendarDaysBetween,
+  formatJalaliDayClock,
+  formatNextSlot,
+  formatRelativeContact,
+  toFaDigits,
+} from '@/lib/jalali';
+import {
+  buildSmartSummary,
+  isVipPerson,
+  personInitials,
+  purchaseProbability,
+} from '@/lib/person-insights';
+import UiIcon from '@/components/UiIcon.vue';
+import MentoAiAvatar from '@/components/brand/MentoAiAvatar.vue';
+import MentoMemoryPanel from '@/components/MentoMemoryPanel.vue';
+import ProfileEmptyState from '@/components/person-profile/ProfileEmptyState.vue';
+import ProfileMoreMenu from '@/components/person-profile/ProfileMoreMenu.vue';
+import type { ProfileMoreItem } from '@/components/person-profile/ProfileMoreMenu.vue';
+import type {
+  ActivityDto,
+  DealDto,
+  InvoiceDto,
+  MemoryItemDto,
+  NoteDto,
+  PaginatedResponse,
+  PersonDto,
+  PipelineBoardDto,
+  ProjectBoardBoardDto,
+  ProjectCardDto,
+  QuoteDto,
+  TicketDto,
+} from '@mento/shared';
+
+type TabKey = 'summary' | 'activities' | 'deals' | 'cards' | 'info';
+type TimelineTone = 'call' | 'quote' | 'note' | 'meeting' | 'task';
+
+type TimelineRow = {
+  key: string;
+  title: string;
+  body?: string | null;
+  when: string;
+  badge?: string;
+  badgeTone?: 'ok' | 'warn' | 'muted';
+  tone: TimelineTone;
+  href: string;
+  at: number;
+};
+
+const TABS: Array<{ key: TabKey; label: string }> = [
+  { key: 'summary', label: 'خلاصه' },
+  { key: 'activities', label: 'فعالیت‌ها' },
+  { key: 'deals', label: 'معاملات' },
+  { key: 'cards', label: 'کارت‌ها' },
+  { key: 'info', label: 'اطلاعات' },
+];
+
+const route = useRoute();
+const router = useRouter();
+const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
+
+const loading = ref(true);
+const error = ref('');
+const person = ref<PersonDto | null>(null);
+const activities = ref<ActivityDto[]>([]);
+const notes = ref<NoteDto[]>([]);
+const quotes = ref<QuoteDto[]>([]);
+const invoices = ref<InvoiceDto[]>([]);
+const tickets = ref<TicketDto[]>([]);
+const memories = ref<MemoryItemDto[]>([]);
+const deals = ref<DealDto[]>([]);
+const cards = ref<ProjectCardDto[]>([]);
+
+const moreOpen = ref(false);
+const fabOpen = ref(false);
+const tab = ref<TabKey>('summary');
+
+const moreItems = computed<ProfileMoreItem[]>(() => [
+  { key: 'edit', label: 'ویرایش اطلاعات', to: { name: 'person-edit', params: { id: id.value } } },
+  { key: 'deal', label: 'معامله جدید', to: { name: 'deal-new', query: { personId: id.value } } },
+  { key: 'quote', label: 'پیش‌فاکتور جدید', to: { name: 'quote-new', query: { personId: id.value } } },
+  { key: 'ticket', label: 'تیکت جدید', to: { name: 'ticket-new', query: { personId: id.value } } },
+  { key: 'delete', label: 'حذف شخص', danger: true },
+]);
+
+function onMoreSelect(key: string) {
+  if (key === 'delete') void removePerson();
+}
+
+const fullName = computed(() => person.value?.fullName ?? 'مشتری');
+const initials = computed(() => personInitials(fullName.value));
+const subtitle = computed(() => {
+  const bits = [person.value?.position, person.value?.company?.name].filter(Boolean);
+  return bits.join(' · ');
+});
+const vip = computed(() => isVipPerson(person.value));
+const phoneNumber = computed(() => person.value?.mobile || person.value?.phone || '');
+const telHref = computed(() => (phoneNumber.value ? `tel:${phoneNumber.value}` : ''));
+const smsHref = computed(() => (phoneNumber.value ? `sms:${phoneNumber.value}` : ''));
+
+const lastCallAt = computed(() => {
+  const calls = activities.value
+    .filter((a) => a.type === 'call')
+    .map((a) =>
+      a.status === 'done' ? a.completedAt || a.dueAt || a.createdAt : a.createdAt,
+    )
+    .filter(Boolean)
+    .sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
+  return calls[0] ?? null;
+});
+
+const lastTouchAt = computed(() => {
+  const stamps = [
+    ...activities.value.map((a) => a.completedAt || a.dueAt || a.createdAt),
+    ...notes.value.map((n) => n.createdAt),
+    ...quotes.value.map((q) => q.createdAt),
+  ]
+    .filter(Boolean)
+    .sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
+  return stamps[0] ?? person.value?.updatedAt ?? null;
+});
+
+const daysSinceCall = computed(() =>
+  lastCallAt.value ? calendarDaysBetween(new Date(lastCallAt.value), new Date()) : null,
+);
+
+const nextActivity = computed(() => {
+  const now = Date.now();
+  return activities.value
+    .filter((a) => a.status === 'open' && a.dueAt)
+    .sort((a, b) => new Date(a.dueAt!).getTime() - new Date(b.dueAt!).getTime())
+    .find((a) => new Date(a.dueAt!).getTime() >= now - 60 * 60 * 1000) ??
+    activities.value
+      .filter((a) => a.status === 'open' && a.dueAt)
+      .sort((a, b) => new Date(a.dueAt!).getTime() - new Date(b.dueAt!).getTime())[0] ??
+    null;
+});
+
+const openDeals = computed(() => deals.value.filter((d) => d.status === 'open'));
+const dealTotal = computed(() =>
+  deals.value.reduce((sum, d) => sum + (d.amount ?? 0), 0),
+);
+const dealCurrency = computed(() => deals.value[0]?.currency ?? quotes.value[0]?.currency ?? 'IRR');
+
+const lastQuote = computed(() =>
+  [...quotes.value].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+  )[0] ?? null,
+);
+
+const probability = computed(() =>
+  purchaseProbability({
+    daysSinceContact: daysSinceCall.value,
+    openDealCount: openDeals.value.length,
+    quoteCount: quotes.value.length,
+    hasUpcoming: Boolean(nextActivity.value),
+    noteCount: notes.value.length,
+  }),
+);
+
+const isActiveCustomer = computed(() => {
+  if (openDeals.value.length) return true;
+  if (daysSinceCall.value != null && daysSinceCall.value <= 30) return true;
+  return false;
+});
+const isOnlineish = computed(
+  () => daysSinceCall.value != null && daysSinceCall.value <= 2,
+);
+
+const smart = computed(() =>
+  buildSmartSummary({
+    memories: memories.value,
+    notes: notes.value,
+    lastQuoteLabel: lastQuote.value
+      ? formatCompactMoney(lastQuote.value.totalAmount, lastQuote.value.currency)
+      : null,
+    daysSinceCall: daysSinceCall.value,
+    probabilityBand: probability.value.band,
+  }),
+);
+
+const kpis = computed(() => [
+  {
+    key: 'prob',
+    label: 'احتمال خرید',
+    value: `${toFaDigits(probability.value.score)}٪`,
+    hint: probability.value.band,
+    icon: 'fire' as const,
+    tone: 'fire',
+  },
+  {
+    key: 'next',
+    label: 'فعالیت بعدی',
+    value: formatNextSlot(nextActivity.value?.dueAt),
+    icon: 'clock' as const,
+    tone: 'clock',
+  },
+  {
+    key: 'value',
+    label: 'ارزش کل معاملات',
+    value: deals.value.length
+      ? formatCompactMoney(dealTotal.value, dealCurrency.value)
+      : '—',
+    icon: 'chart' as const,
+    tone: 'chart',
+  },
+  {
+    key: 'deals',
+    label: 'معاملات',
+    value: deals.value.length ? `${toFaDigits(deals.value.length)} معامله` : 'بدون معامله',
+    icon: 'bag' as const,
+    tone: 'bag',
+  },
+  {
+    key: 'last',
+    label: 'آخرین ارتباط',
+    value: formatRelativeContact(lastTouchAt.value),
+    icon: 'calendar' as const,
+    tone: 'cal',
+  },
+]);
+
+function activityTitle(a: ActivityDto) {
+  if (a.title?.trim()) return a.title;
+  if (a.type === 'call') return 'پیگیری تلفنی';
+  if (a.type === 'meeting') return 'جلسه حضوری';
+  if (a.type === 'task') return 'پیگیری';
+  return 'یادداشت';
+}
+
+function activityTone(a: ActivityDto): TimelineTone {
+  if (a.type === 'call') return 'call';
+  if (a.type === 'meeting') return 'meeting';
+  if (a.type === 'note') return 'note';
+  return 'task';
+}
+
+function activityBadge(a: ActivityDto): { label: string; tone: 'ok' | 'warn' | 'muted' } | null {
+  if (a.status === 'done') return { label: 'انجام شد', tone: 'muted' };
+  if (a.status === 'canceled') return { label: 'لغو شده', tone: 'muted' };
+  if (a.dueAt && new Date(a.dueAt).getTime() < Date.now()) {
+    return { label: 'عقب‌افتاده', tone: 'warn' };
+  }
+  return { label: 'برنامه‌ریزی شده', tone: 'ok' };
+}
+
+const timeline = computed<TimelineRow[]>(() => {
+  const rows: TimelineRow[] = [];
+  for (const a of activities.value) {
+    const badge = activityBadge(a);
+    const at = new Date(a.dueAt || a.createdAt).getTime();
+    rows.push({
+      key: `a-${a.id}`,
+      title: activityTitle(a),
+      body: a.description,
+      when: a.dueAt ? formatNextSlot(a.dueAt) : formatJalaliDayClock(new Date(a.createdAt)),
+      badge: badge?.label,
+      badgeTone: badge?.tone,
+      tone: activityTone(a),
+      href: `/activities/${a.id}`,
+      at,
+    });
+  }
+  for (const n of notes.value) {
+    rows.push({
+      key: `n-${n.id}`,
+      title: n.title?.trim() || 'یادداشت',
+      body: n.body,
+      when: formatJalaliDayClock(new Date(n.createdAt)),
+      tone: 'note',
+      href: '/notes',
+      at: new Date(n.createdAt).getTime(),
+    });
+  }
+  for (const q of quotes.value) {
+    rows.push({
+      key: `q-${q.id}`,
+      title: 'پیشنهاد ارسال شد',
+      body: `پیشنهاد شماره ${q.number} با مبلغ ${formatMoney(q.totalAmount, q.currency)} ارسال شد`,
+      when: formatJalaliDayClock(new Date(q.createdAt)),
+      tone: 'quote',
+      href: `/quotes/${q.id}`,
+      at: new Date(q.createdAt).getTime(),
+    });
+  }
+  return rows.sort((a, b) => b.at - a.at);
+});
+
+const summaryTimeline = computed(() => timeline.value.slice(0, 6));
+
+const summaryEmpty = computed(
+  () =>
+    !activities.value.length &&
+    !notes.value.length &&
+    !quotes.value.length &&
+    !deals.value.length,
+);
+const activitiesEmpty = computed(() => !timeline.value.length);
+const dealsEmpty = computed(() => !deals.value.length && !invoices.value.length);
+const cardsEmpty = computed(() => !cards.value.length);
+const infoEmpty = computed(() => {
+  const p = person.value;
+  if (!p) return true;
+  return (
+    !p.mobile &&
+    !p.phone &&
+    !p.email &&
+    !p.position &&
+    !p.company &&
+    !p.notes?.trim() &&
+    !tickets.value.length
+  );
+});
+
+const dealStatusLabel: Record<string, string> = {
+  open: 'باز',
+  won: 'برنده',
+  lost: 'باخته',
+};
+
+function readTab() {
+  const q = route.query.tab;
+  if (q === 'activities' || q === 'deals' || q === 'cards' || q === 'info' || q === 'summary') {
+    tab.value = q;
+  } else {
+    tab.value = 'summary';
+  }
+}
+
+function setTab(next: TabKey) {
+  tab.value = next;
+  void router.replace({ query: { ...route.query, tab: next === 'summary' ? undefined : next } });
+}
+
+async function load() {
+  if (!id.value) return;
+  loading.value = true;
+  error.value = '';
+  moreOpen.value = false;
+  fabOpen.value = false;
+  try {
+    const [personRes, actRes, noteRes, quoteRes, memRes, boardRes] = await Promise.all([
+      api.get<PersonDto>(`/people/${id.value}`),
+      api.get<PaginatedResponse<ActivityDto>>('/activities', {
+        params: { filter: 'all', personId: id.value, limit: 80 },
+      }),
+      api.get<PaginatedResponse<NoteDto>>('/notes', {
+        params: { personId: id.value, limit: 80 },
+      }),
+      api.get<PaginatedResponse<QuoteDto>>('/quotes', {
+        params: { personId: id.value, limit: 50 },
+      }),
+      api.get<PaginatedResponse<MemoryItemDto>>('/memory', {
+        params: { personId: id.value, limit: 50 },
+      }),
+      api.get<PipelineBoardDto>('/pipelines/board'),
+    ]);
+    person.value = personRes.data;
+    activities.value = actRes.data.items;
+    notes.value = noteRes.data.items;
+    quotes.value = quoteRes.data.items;
+    memories.value = memRes.data.items;
+    deals.value = boardRes.data.stages
+      .flatMap((s) => s.deals)
+      .filter((d) => d.person?.id === id.value);
+
+    const extras = await Promise.allSettled([
+      api.get<PaginatedResponse<InvoiceDto>>('/invoices', {
+        params: { personId: id.value, limit: 50 },
+      }),
+      api.get<PaginatedResponse<TicketDto>>('/tickets', {
+        params: { personId: id.value, limit: 50 },
+      }),
+      api.get<ProjectBoardBoardDto>('/project-boards/board'),
+    ]);
+    invoices.value =
+      extras[0].status === 'fulfilled' ? extras[0].value.data.items : [];
+    tickets.value =
+      extras[1].status === 'fulfilled' ? extras[1].value.data.items : [];
+    cards.value =
+      extras[2].status === 'fulfilled'
+        ? extras[2].value.data.stages
+            .flatMap((s) => s.cards)
+            .filter((c) => c.person?.id === id.value)
+        : [];
+  } catch {
+    error.value = 'بارگذاری پرونده مشتری ناموفق بود.';
+    person.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function closeMenus() {
+  moreOpen.value = false;
+  fabOpen.value = false;
+}
+
+function goCall() {
+  closeMenus();
+  if (telHref.value) window.location.href = telHref.value;
+}
+
+function goMessage() {
+  closeMenus();
+  if (smsHref.value) {
+    window.location.href = smsHref.value;
+    return;
+  }
+  void router.push({ name: 'notes', query: { personId: id.value } });
+}
+
+function goFollowup() {
+  closeMenus();
+  void router.push({
+    name: 'activity-new',
+    query: { personId: id.value, type: 'task', title: 'پیگیری' },
+  });
+}
+
+function onSmartCta() {
+  if (smart.value.ctaKind === 'call' && telHref.value) {
+    goCall();
+    return;
+  }
+  void router.push({
+    name: 'activity-new',
+    query: {
+      personId: id.value,
+      type: 'call',
+      title: `تماس با ${fullName.value}`,
+    },
+  });
+}
+
+async function removePerson() {
+  closeMenus();
+  if (!id.value || !confirm('این شخص حذف شود؟')) return;
+  try {
+    await api.delete(`/people/${id.value}`);
+    await router.push({ name: 'contacts' });
+  } catch {
+    error.value = 'حذف ناموفق بود.';
+  }
+}
+
+watch(id, () => void load(), { immediate: true });
+watch(() => route.query.tab, readTab, { immediate: true });
+</script>
+
+<template>
+  <section class="profile" @click="closeMenus">
+    <header class="nav">
+      <RouterLink class="icon-btn back-btn" :to="{ name: 'contacts' }" aria-label="بازگشت" @click.stop>
+        <UiIcon name="chevron" :size="18" />
+      </RouterLink>
+      <span class="nav-brand">mento</span>
+      <ProfileMoreMenu v-model="moreOpen" :items="moreItems" @select="onMoreSelect" />
+    </header>
+
+    <p v-if="loading" class="muted pad">در حال بارگذاری پرونده…</p>
+    <p v-else-if="error" class="error pad">{{ error }}</p>
+
+    <template v-else-if="person">
+      <div class="identity">
+        <div class="avatar" :class="{ online: isOnlineish }">
+          <span>{{ initials }}</span>
+        </div>
+        <div class="who">
+          <h1>
+            {{ fullName }}
+            <span v-if="vip" class="crown" title="VIP" aria-label="VIP">♛</span>
+          </h1>
+          <p v-if="subtitle" class="sub">{{ subtitle }}</p>
+          <div class="badges">
+            <span v-if="vip" class="pill vip">VIP</span>
+            <span class="pill" :class="isActiveCustomer ? 'active' : 'idle'">
+              {{ isActiveCustomer ? 'مشتری فعال' : 'غیرفعال' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="qa">
+        <a v-if="telHref" class="qa-card" :href="telHref">
+          <span class="qa-ico call"><UiIcon name="phone" :size="18" /></span>
+          <span>تماس</span>
+        </a>
+        <button v-else class="qa-card" type="button" disabled>
+          <span class="qa-ico call"><UiIcon name="phone" :size="18" /></span>
+          <span>تماس</span>
+        </button>
+        <button class="qa-card" type="button" @click.stop="goMessage">
+          <span class="qa-ico msg"><UiIcon name="chat" :size="18" /></span>
+          <span>پیام</span>
+        </button>
+        <button class="qa-card" type="button" @click.stop="goFollowup">
+          <span class="qa-ico follow"><UiIcon name="check" :size="18" /></span>
+          <span>پیگیری</span>
+        </button>
+        <button class="qa-card" type="button" @click.stop="moreOpen = !moreOpen">
+          <span class="qa-ico more"><UiIcon name="dots" :size="18" /></span>
+          <span>بیشتر</span>
+        </button>
+      </div>
+
+      <article class="smart">
+        <header class="smart-head">
+          <MentoAiAvatar :size="54" :show-bubble="false" />
+          <div>
+            <h2>
+              <UiIcon name="sparkle" :size="14" />
+              خلاصه هوشمند منتو
+            </h2>
+            <p>{{ smart.text }}</p>
+          </div>
+        </header>
+        <button class="smart-cta" type="button" @click="onSmartCta">
+          <span>{{ smart.cta }}</span>
+          <UiIcon name="chevron" :size="16" />
+        </button>
+      </article>
+
+      <nav class="tabs" aria-label="بخش‌های پرونده">
+        <button
+          v-for="item in TABS"
+          :key="item.key"
+          type="button"
+          :class="{ on: tab === item.key }"
+          @click="setTab(item.key)"
+        >
+          {{ item.label }}
+        </button>
+      </nav>
+
+      <div v-show="tab === 'summary'" class="panel" :class="{ 'is-empty': summaryEmpty }">
+        <ProfileEmptyState
+          v-if="summaryEmpty"
+          primary-label="افزودن اطلاعات مشتری"
+          :primary-to="{ name: 'person-edit', params: { id } }"
+          secondary-label="افزودن اولین فعالیت"
+          :secondary-to="{ name: 'activity-new', query: { personId: id } }"
+        ></ProfileEmptyState>
+        <div v-if="!summaryEmpty">
+          <div class="kpis">
+            <article v-for="kpi in kpis" :key="kpi.key" class="kpi" :class="kpi.tone">
+              <span class="kpi-ico"><UiIcon :name="kpi.icon" :size="16" /></span>
+              <p>{{ kpi.label }}</p>
+              <strong>{{ kpi.value }}</strong>
+              <em v-if="kpi.hint">{{ kpi.hint }}</em>
+            </article>
+          </div>
+
+          <div class="tl-head">
+            <h3>آخرین فعالیت‌ها</h3>
+            <button type="button" @click="setTab('activities')">مشاهده همه</button>
+          </div>
+          <ol v-if="summaryTimeline.length" class="tl">
+            <li v-for="row in summaryTimeline" :key="row.key">
+              <RouterLink :to="row.href">
+                <span class="dot" :class="row.tone">
+                  <UiIcon
+                    :name="
+                      row.tone === 'call'
+                        ? 'phone'
+                        : row.tone === 'quote'
+                          ? 'document'
+                          : row.tone === 'meeting'
+                            ? 'user-plus'
+                            : row.tone === 'task'
+                              ? 'check'
+                              : 'document'
+                    "
+                    :size="14"
+                  />
+                </span>
+                <div>
+                  <strong>
+                    {{ row.title }}
+                    <span v-if="row.badge" class="tl-badge" :class="row.badgeTone">{{ row.badge }}</span>
+                  </strong>
+                  <p v-if="row.body">{{ row.body }}</p>
+                  <time>{{ row.when }}</time>
+                </div>
+              </RouterLink>
+            </li>
+          </ol>
+          <p v-else class="empty">هنوز فعالیتی روی این پرونده نیست.</p>
+        </div>
+      </div>
+
+      <div v-show="tab === 'activities'" class="panel" :class="{ 'is-empty': activitiesEmpty }">
+        <ProfileEmptyState
+          v-if="activitiesEmpty"
+          title="هنوز فعالیتی ثبت نشده!"
+          description="برای شروع، اولین تماس، جلسه یا پیگیری این مشتری را ثبت کنید."
+          primary-label="افزودن اولین فعالیت"
+          :primary-to="{ name: 'activity-new', query: { personId: id } }"
+          secondary-label="افزودن اطلاعات مشتری"
+          :secondary-to="{ name: 'person-edit', params: { id } }"
+          secondary-icon="user-plus"
+        ></ProfileEmptyState>
+        <div v-if="!activitiesEmpty">
+          <ol class="tl">
+            <li v-for="row in timeline" :key="row.key">
+              <RouterLink :to="row.href">
+                <span class="dot" :class="row.tone">
+                  <UiIcon
+                    :name="
+                      row.tone === 'call'
+                        ? 'phone'
+                        : row.tone === 'quote'
+                          ? 'document'
+                          : row.tone === 'meeting'
+                            ? 'user-plus'
+                            : row.tone === 'task'
+                              ? 'check'
+                              : 'document'
+                    "
+                    :size="14"
+                  />
+                </span>
+                <div>
+                  <strong>
+                    {{ row.title }}
+                    <span v-if="row.badge" class="tl-badge" :class="row.badgeTone">{{ row.badge }}</span>
+                  </strong>
+                  <p v-if="row.body">{{ row.body }}</p>
+                  <time>{{ row.when }}</time>
+                </div>
+              </RouterLink>
+            </li>
+          </ol>
+          <RouterLink class="ghost-link" :to="{ name: 'activity-new', query: { personId: id } }">
+            فعالیت جدید
+          </RouterLink>
+        </div>
+      </div>
+
+      <div v-show="tab === 'deals'" class="panel list-panel" :class="{ 'is-empty': dealsEmpty }">
+        <ProfileEmptyState
+          v-if="dealsEmpty"
+          title="هنوز معامله‌ای ثبت نشده!"
+          description="اولین معامله این مشتری را در کاریز ثبت کنید یا یک فعالیت پیگیری بسازید."
+          primary-label="افزودن معامله"
+          :primary-to="{ name: 'deal-new', query: { personId: id } }"
+          secondary-label="افزودن اولین فعالیت"
+          :secondary-to="{ name: 'activity-new', query: { personId: id } }"
+        ></ProfileEmptyState>
+        <div v-if="!dealsEmpty">
+          <RouterLink
+            v-for="deal in deals"
+            :key="deal.id"
+            class="row-card"
+            :to="{ name: 'deal-detail', params: { id: deal.id } }"
+          >
+            <strong>{{ deal.title }}</strong>
+            <span>{{ deal.amount != null ? formatCompactMoney(deal.amount, deal.currency) : 'بدون مبلغ' }}</span>
+            <em>{{ dealStatusLabel[deal.status] ?? deal.status }}</em>
+          </RouterLink>
+          <div v-if="invoices.length" class="subblock">
+            <h3>فاکتورها</h3>
+            <RouterLink
+              v-for="inv in invoices"
+              :key="inv.id"
+              class="row-card"
+              :to="{ name: 'invoice-detail', params: { id: inv.id } }"
+            >
+              <strong>{{ inv.number }} · {{ inv.title }}</strong>
+              <span>{{ formatMoney(inv.totalAmount, inv.currency) }}</span>
+            </RouterLink>
+          </div>
+          <RouterLink class="ghost-link" :to="{ name: 'deal-new', query: { personId: id } }">
+            معامله جدید
+          </RouterLink>
+        </div>
+      </div>
+
+      <div v-show="tab === 'cards'" class="panel list-panel" :class="{ 'is-empty': cardsEmpty }">
+        <ProfileEmptyState
+          v-if="cardsEmpty"
+          title="هنوز کارتی ثبت نشده!"
+          description="یک کارت پروژه برای پیگیری کار این مشتری بسازید."
+          primary-label="افزودن کارت"
+          :primary-to="{ name: 'project-card-new', query: { personId: id } }"
+          secondary-label="افزودن اولین فعالیت"
+          :secondary-to="{ name: 'activity-new', query: { personId: id } }"
+        ></ProfileEmptyState>
+        <div v-if="!cardsEmpty">
+          <RouterLink
+            v-for="card in cards"
+            :key="card.id"
+            class="row-card"
+            :to="{ name: 'project-card-detail', params: { id: card.id } }"
+          >
+            <strong>{{ card.title }}</strong>
+            <span v-if="card.notes">{{ card.notes }}</span>
+          </RouterLink>
+          <RouterLink class="ghost-link" :to="{ name: 'project-card-new', query: { personId: id } }">
+            کارت جدید
+          </RouterLink>
+        </div>
+      </div>
+
+      <div v-show="tab === 'info'" class="panel info-panel" :class="{ 'is-empty': infoEmpty }">
+        <ProfileEmptyState
+          v-if="infoEmpty"
+          primary-label="افزودن اطلاعات مشتری"
+          :primary-to="{ name: 'person-edit', params: { id } }"
+          secondary-label="افزودن اولین فعالیت"
+          :secondary-to="{ name: 'activity-new', query: { personId: id } }"
+        ></ProfileEmptyState>
+        <div v-if="!infoEmpty">
+          <dl>
+            <div><dt>موبایل</dt><dd>{{ person.mobile || '—' }}</dd></div>
+            <div><dt>تلفن</dt><dd>{{ person.phone || '—' }}</dd></div>
+            <div><dt>ایمیل</dt><dd>{{ person.email || '—' }}</dd></div>
+            <div><dt>سمت</dt><dd>{{ person.position || '—' }}</dd></div>
+            <div><dt>شرکت</dt><dd>{{ person.company?.name || '—' }}</dd></div>
+            <div><dt>مسئول</dt><dd>{{ person.owner?.fullName || '—' }}</dd></div>
+            <div>
+              <dt>باشگاه</dt>
+              <dd>
+                {{ toFaDigits(person.loyaltyPoints) }} امتیاز
+                <span v-if="person.loyaltyTier"> · {{ person.loyaltyTier.name }}</span>
+              </dd>
+            </div>
+            <div v-if="person.notes" class="wide"><dt>یادداشت</dt><dd>{{ person.notes }}</dd></div>
+          </dl>
+          <div v-if="tickets.length" class="subblock">
+            <h3>تیکت‌ها</h3>
+            <RouterLink
+              v-for="ticket in tickets"
+              :key="ticket.id"
+              class="row-card"
+              :to="{ name: 'ticket-detail', params: { id: ticket.id } }"
+            >
+              <strong>{{ ticket.number }} · {{ ticket.subject }}</strong>
+              <span>{{ ticket.status }}</span>
+            </RouterLink>
+          </div>
+          <MentoMemoryPanel :person-id="id" />
+          <RouterLink class="ghost-link" :to="{ name: 'person-edit', params: { id } }">
+            ویرایش اطلاعات
+          </RouterLink>
+        </div>
+      </div>
+    </template>
+
+    <footer v-if="person" class="dock">
+      <RouterLink :to="{ name: 'activity-new', query: { personId: id, type: 'task' } }">
+        <UiIcon name="calendar" :size="18" />
+        فعالیت جدید
+      </RouterLink>
+      <div class="fab-wrap" @click.stop>
+        <button class="fab" type="button" aria-label="ایجاد" @click="fabOpen = !fabOpen">
+          <UiIcon name="plus" :size="22" />
+        </button>
+        <div v-if="fabOpen" class="menu fab-menu">
+          <RouterLink :to="{ name: 'activity-new', query: { personId: id } }">فعالیت</RouterLink>
+          <RouterLink :to="{ name: 'notes', query: { personId: id } }">یادداشت</RouterLink>
+          <RouterLink :to="{ name: 'deal-new', query: { personId: id } }">معامله</RouterLink>
+          <RouterLink :to="{ name: 'quote-new', query: { personId: id } }">پیشنهاد</RouterLink>
+        </div>
+      </div>
+      <button type="button" :disabled="!telHref" @click="goCall">
+        <UiIcon name="phone" :size="18" />
+        تماس سریع
+      </button>
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.profile {
+  max-width: 760px;
+  width: 100%;
+  min-width: 0;
+  margin: 0 auto;
+  padding-bottom: 5.6rem;
+  display: grid;
+  gap: 1rem;
+  overflow: visible;
+
+
+.profile > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.panel {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.panel.is-empty {
+  display: grid;
+  place-items: center;
+  min-height: min(52vh, 460px);
+  gap: 0;
+}
+
+.nav {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.15rem 0.1rem;
+  position: relative;
+  z-index: 20;
+  overflow: visible;
+}
+
+.nav-brand {
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  color: #0f766e;
+  font-size: 1.15rem;
+}
+
+.icon-btn {
+  width: 38px;
+  height: 38px;
+  border: 0;
+  background: #fff;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: #334155;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
+}
+
+.back-btn :deep(.ico) {
+  transform: scaleX(-1);
+}
+
+.more-wrap,
+.fab-wrap {
+  position: relative;
+  z-index: 30;
+  overflow: visible;
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  inset-inline-end: 0;
+  min-width: 12.75rem;
+  width: max-content;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
+  padding: 0.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  z-index: 40;
+}
+
+.menu a,
+.menu button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  text-align: start;
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  padding: 0.68rem 0.8rem;
+  border-radius: 10px;
+  color: #0f172a;
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.menu a:hover,
+.menu button:hover {
+  background: #f0fdfa;
+}
+
+.menu .danger {
+  color: #b91c1c;
+}
+
+.identity {
+  display: flex;
+  gap: 0.95rem;
+  align-items: center;
+  min-width: 0;
+}
+
+.avatar {
+  position: relative;
+  width: 76px;
+  height: 76px;
+  border-radius: 999px;
+  background: linear-gradient(145deg, #5eead4, #0d9488);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 1.35rem;
+  flex-shrink: 0;
+  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28);
+}
+
+.avatar.online::after {
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: #22c55e;
+  border: 3px solid #eef2f6;
+  border-radius: 999px;
+  inset-inline-start: 4px;
+  bottom: 4px;
+}
+
+.who {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.45rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.crown {
+  color: #7c3aed;
+  font-size: 1.05rem;
+}
+
+.sub {
+  margin: 0.2rem 0 0.55rem;
+  color: #64748b;
+  font-size: 0.88rem;
+}
+
+.badges {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.pill {
+  border-radius: 999px;
+  padding: 0.18rem 0.62rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.pill.vip {
+  background: #ede9fe;
+  color: #6d28d9;
+}
+
+.pill.active {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.pill.idle {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.qa {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.65rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.qa-card {
+  background: #fff;
+  border: 0;
+  border-radius: 16px;
+  padding: 0.85rem 0.4rem 0.75rem;
+  display: grid;
+  justify-items: center;
+  gap: 0.4rem;
+  color: #334155;
+  font-size: 0.78rem;
+  font-weight: 700;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
+  cursor: pointer;
+}
+
+.qa-card:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.qa-ico {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+}
+
+.qa-ico.call { background: #ecfdf5; color: #0f766e; }
+.qa-ico.msg { background: #eff6ff; color: #2563eb; }
+.qa-ico.follow { background: #fff7ed; color: #ea580c; }
+.qa-ico.more { background: #f1f5f9; color: #64748b; }
+
+.smart {
+  background: linear-gradient(135deg, #ecfeff, #f5f3ff);
+  border: 1px solid #e0e7ff;
+  border-radius: 20px;
+  padding: 0.95rem 1rem 0.85rem;
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.smart-head {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.smart-head h2 {
+  margin: 0 0 0.4rem;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #6d28d9;
+}
+
+.smart-head p {
+  margin: 0;
+  color: #334155;
+  font-size: 0.86rem;
+  line-height: 1.75;
+}
+
+.smart-cta {
+  width: 100%;
+  border: 0;
+  border-radius: 12px;
+  background: #ccfbf1;
+  color: #0f766e;
+  font-weight: 700;
+  padding: 0.72rem 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.smart-cta :deep(.ico) {
+  transform: scaleX(-1);
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  gap: 0;
+  overflow-x: auto;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0;
+}
+
+.tabs button {
+  flex: 1 1 0;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.55rem 0.2rem 0.7rem;
+  color: #64748b;
+  font-weight: 700;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+  box-shadow: inset 0 -2px 0 transparent;
+}
+
+.tabs button.on {
+  color: #0f766e;
+  box-shadow: inset 0 -2px 0 #14b8a6;
+}
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.55rem;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: clip;
+}
+
+.kpi {
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.7rem 0.65rem 0.75rem;
+  min-width: 0;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
+  display: grid;
+  gap: 0.22rem;
+}
+
+.kpi p {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.7rem;
+}
+
+.kpi strong {
+  font-size: 0.86rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.kpi em {
+  font-style: normal;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: #16a34a;
+  background: #dcfce7;
+  width: fit-content;
+  border-radius: 999px;
+  padding: 0.05rem 0.4rem;
+}
+
+.kpi-ico {
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 0.15rem;
+}
+
+.kpi.fire .kpi-ico { background: #fff1f2; color: #e11d48; }
+.kpi.clock .kpi-ico { background: #eff6ff; color: #2563eb; }
+.kpi.chart .kpi-ico { background: #fefce8; color: #ca8a04; }
+.kpi.bag .kpi-ico { background: #ecfdf5; color: #0f766e; }
+.kpi.cal .kpi-ico { background: #f5f3ff; color: #7c3aed; }
+
+.tl-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1rem 0 0.55rem;
+}
+
+.tl-head h3,
+.subblock h3 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.tl-head button,
+.ghost-link {
+  color: #0f766e;
+  background: none;
+  border: 0;
+  font-weight: 700;
+  cursor: pointer;
+  font: inherit;
+}
+
+.ghost-link {
+  display: inline-block;
+  margin-top: 0.7rem;
+}
+
+.tl {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+
+.tl li {
+  position: relative;
+  padding-inline-end: 0.2rem;
+}
+
+.tl li:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: 34px;
+  bottom: -8px;
+  inset-inline-start: 15px;
+  width: 2px;
+  background: #e2e8f0;
+}
+
+.tl a {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.55rem 0;
+  color: inherit;
+}
+
+.dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.dot.call { background: #dcfce7; color: #15803d; }
+.dot.quote { background: #ffedd5; color: #c2410c; }
+.dot.note { background: #ede9fe; color: #6d28d9; }
+.dot.meeting { background: #dbeafe; color: #1d4ed8; }
+.dot.task { background: #ccfbf1; color: #0f766e; }
+
+.tl strong {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  font-size: 0.9rem;
+}
+
+.tl p {
+  margin: 0.2rem 0 0;
+  color: #64748b;
+  font-size: 0.8rem;
+  line-height: 1.55;
+}
+
+.tl time {
+  display: block;
+  margin-top: 0.2rem;
+  color: #94a3b8;
+  font-size: 0.75rem;
+}
+
+.tl-badge {
+  font-size: 0.68rem;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 0.08rem 0.45rem;
+}
+
+.tl-badge.ok { background: #dcfce7; color: #166534; }
+.tl-badge.warn { background: #fee2e2; color: #b91c1c; }
+.tl-badge.muted { background: #f1f5f9; color: #64748b; }
+
+.row-card {
+  display: grid;
+  gap: 0.15rem;
+  background: #fff;
+  border-radius: 14px;
+  padding: 0.85rem 0.95rem;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
+}
+
+.row-card span,
+.row-card em {
+  color: #64748b;
+  font-size: 0.8rem;
+  font-style: normal;
+}
+
+.list-panel,
+.info-panel {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.info-panel dl {
+  margin: 0;
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.4rem 1rem;
+  display: grid;
+  gap: 0;
+}
+
+.info-panel dl > div {
+  display: grid;
+  grid-template-columns: 7.5rem 1fr;
+  gap: 0.6rem;
+  padding: 0.7rem 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.info-panel dt {
+  color: #94a3b8;
+  font-size: 0.8rem;
+}
+
+.info-panel dd {
+  margin: 0;
+}
+
+.subblock {
+  display: grid;
+  gap: 0.5rem;
+  margin-top: 0.4rem;
+}
+
+.empty,
+.muted {
+  color: #64748b;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.pad {
+  padding: 0.4rem 0;
+}
+
+.dock {
+  position: sticky;
+  bottom: 0.6rem;
+  margin-top: 0.4rem;
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 0.55rem 0.7rem 0.65rem;
+  gap: 0.4rem;
+  z-index: 6;
+}
+
+.dock > a,
+.dock > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  background: none;
+  border: 0;
+  color: #0f766e;
+  font-weight: 700;
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.dock > button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.fab {
+  width: 58px;
+  height: 58px;
+  border: 0;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
+  display: grid;
+  place-items: center;
+  box-shadow: 0 10px 20px rgba(20, 184, 166, 0.4);
+  cursor: pointer;
+  margin-top: -1.35rem;
+}
+
+.fab-menu {
+  inset-inline: auto;
+  left: 50%;
+  right: auto;
+  top: auto;
+  bottom: calc(100% + 10px);
+  transform: translateX(-50%);
+}
+
+@media (max-width: 900px) {
+  .dock {
+    position: fixed;
+    inset-inline: 0.85rem;
+    bottom: calc(0.55rem + env(safe-area-inset-bottom));
+    width: auto;
+  }
+
+  .dock > a,
+  .dock > button {
+    font-size: 0.78rem;
+    gap: 0.28rem;
+  }
+
+  .profile {
+    padding-bottom: 6.2rem;
+  }
+
+  .kpis {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 0.45rem;
+  }
+
+  .kpi {
+    padding: 0.6rem 0.5rem 0.65rem;
+  }
+
+  .kpi strong {
+    font-size: 0.78rem;
+  }
+
+  .tabs button {
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 599px) {
+  .dock > a,
+  .dock > button {
+    font-size: 0.72rem;
+    gap: 0.2rem;
+  }
+
+  .avatar {
+    width: 64px;
+    height: 64px;
+    font-size: 1.1rem;
+  }
+
+  .qa {
+    gap: 0.45rem;
+  }
+
+  .qa-card {
+    padding: 0.7rem 0.2rem 0.6rem;
+    font-size: 0.72rem;
+    border-radius: 14px;
+  }
+
+  .qa-ico {
+    width: 34px;
+    height: 34px;
+  }
+
+  .smart {
+    padding: 0.8rem 0.8rem 0.75rem;
+  }
+
+  .smart-head {
+    gap: 0.55rem;
+  }
+
+  .smart-cta {
+    font-size: 0.78rem;
+    padding: 0.62rem 0.7rem;
+  }
+
+  .tabs button {
+    font-size: 0.72rem;
+    padding: 0.5rem 0.1rem 0.62rem;
+  }
+
+  .kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+  }
+
+  .kpi {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    column-gap: 0.5rem;
+    row-gap: 0.12rem;
+    padding: 0.65rem 0.7rem;
+  }
+
+  .kpi-ico {
+    grid-row: 1 / span 3;
+    margin-bottom: 0;
+  }
+
+  .kpi p,
+  .kpi strong,
+  .kpi em {
+    grid-column: 2;
+  }
+
+  .kpi strong {
+    font-size: 0.8rem;
+  }
+
+  .info-panel dl > div {
+    grid-template-columns: 1fr;
+    gap: 0.12rem;
+  }
+
+  h1 {
+    font-size: 1.22rem;
+  }
+}
+</style>
diff --git a/apps/web/src/views/ProfileView.vue b/apps/web/src/views/ProfileView.vue
new file mode 100644
index 0000000..f452914
--- /dev/null
+++ b/apps/web/src/views/ProfileView.vue
@@ -0,0 +1,1229 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { useAuthStore } from '@/stores/auth';
+import { api } from '@/lib/api';
+import { formatCompactMoney } from '@/lib/money';
+import {
+  calendarDaysBetween,
+  formatJalaliDayClock,
+  formatNextSlot,
+  formatRelativeContact,
+  toFaDigits,
+} from '@/lib/jalali';
+import { purchaseProbability } from '@/lib/person-insights';
+import { USER_ROLE_LABELS } from '@/lib/roles';
+import UiIcon from '@/components/UiIcon.vue';
+import MentoAiAvatar from '@/components/brand/MentoAiAvatar.vue';
+import ProfileEmptyState from '@/components/person-profile/ProfileEmptyState.vue';
+import ProfileMoreMenu from '@/components/person-profile/ProfileMoreMenu.vue';
+import type { ProfileMoreItem } from '@/components/person-profile/ProfileMoreMenu.vue';
+import type {
+  ActivityDto,
+  DealDto,
+  PaginatedResponse,
+  PipelineBoardDto,
+  ProjectBoardBoardDto,
+  ProjectCardDto,
+} from '@mento/shared';
+
+type TabKey = 'summary' | 'activities' | 'deals' | 'cards' | 'info';
+type TimelineTone = 'call' | 'quote' | 'note' | 'meeting' | 'task';
+
+type TimelineRow = {
+  key: string;
+  title: string;
+  body?: string | null;
+  when: string;
+  badge?: string;
+  badgeTone?: 'ok' | 'warn' | 'muted';
+  tone: TimelineTone;
+  href: string;
+  at: number;
+};
+
+const TABS: Array<{ key: TabKey; label: string }> = [
+  { key: 'summary', label: 'خلاصه' },
+  { key: 'activities', label: 'فعالیت‌ها' },
+  { key: 'deals', label: 'معاملات' },
+  { key: 'cards', label: 'کارت‌ها' },
+  { key: 'info', label: 'اطلاعات' },
+];
+
+const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(true);
+const error = ref('');
+const activities = ref<ActivityDto[]>([]);
+const deals = ref<DealDto[]>([]);
+const cards = ref<ProjectCardDto[]>([]);
+const moreOpen = ref(false);
+const fabOpen = ref(false);
+const tab = ref<TabKey>('summary');
+
+const moreItems: ProfileMoreItem[] = [
+  { key: 'info', label: 'ویرایش اطلاعات', to: { name: 'profile', query: { tab: 'info' } } },
+  { key: 'activity', label: 'فعالیت جدید', to: { name: 'activity-new' } },
+  { key: 'deal', label: 'معامله جدید', to: { name: 'deal-new' } },
+  { key: 'quote', label: 'پیش‌فاکتور جدید', to: { name: 'quote-new' } },
+  { key: 'ticket', label: 'تیکت جدید', to: { name: 'ticket-new' } },
+];
+
+const name = computed(() => auth.user?.fullName || 'کاربر');
+const roleLabel = computed(() =>
+  auth.user?.role ? USER_ROLE_LABELS[auth.user.role] : 'کاربر',
+);
+const myId = computed(() => auth.user?.id ?? '');
+
+const myDeals = computed(() =>
+  deals.value.filter((d) => d.owner?.id === myId.value),
+);
+const openDeals = computed(() => myDeals.value.filter((d) => d.status === 'open'));
+const dealTotal = computed(() =>
+  myDeals.value.reduce((sum, d) => sum + (d.amount ?? 0), 0),
+);
+const dealCurrency = computed(() => myDeals.value[0]?.currency ?? 'IRR');
+const myCards = computed(() =>
+  cards.value.filter((c) => c.owner?.id === myId.value),
+);
+
+const nextActivity = computed(() => {
+  const now = Date.now();
+  return (
+    activities.value
+      .filter((a) => a.status === 'open' && a.dueAt)
+      .sort((a, b) => new Date(a.dueAt!).getTime() - new Date(b.dueAt!).getTime())
+      .find((a) => new Date(a.dueAt!).getTime() >= now - 60 * 60 * 1000) ??
+    activities.value
+      .filter((a) => a.status === 'open' && a.dueAt)
+      .sort((a, b) => new Date(a.dueAt!).getTime() - new Date(b.dueAt!).getTime())[0] ??
+    null
+  );
+});
+
+const lastTouchAt = computed(() => {
+  const stamps = activities.value
+    .map((a) => a.completedAt || a.dueAt || a.createdAt)
+    .filter(Boolean)
+    .sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
+  return stamps[0] ?? null;
+});
+
+const daysSinceContact = computed(() =>
+  lastTouchAt.value ? calendarDaysBetween(new Date(lastTouchAt.value), new Date()) : null,
+);
+
+const probability = computed(() =>
+  purchaseProbability({
+    daysSinceContact: daysSinceContact.value,
+    openDealCount: openDeals.value.length,
+    quoteCount: 0,
+    hasUpcoming: Boolean(nextActivity.value),
+    noteCount: 0,
+  }),
+);
+
+const smartText = computed(() => {
+  const overdue = activities.value.filter(
+    (a) => a.status === 'open' && a.dueAt && new Date(a.dueAt).getTime() < Date.now(),
+  ).length;
+  const bits: string[] = [];
+  if (openDeals.value.length) bits.push(`${toFaDigits(openDeals.value.length)} معامله باز`);
+  if (overdue) bits.push(`${toFaDigits(overdue)} پیگیری عقب‌افتاده`);
+  if (nextActivity.value) bits.push(`فعالیت بعدی ${formatNextSlot(nextActivity.value.dueAt)}`);
+  if (!bits.length) {
+    return 'برنامهٔ امروز خالی است. با ثبت فعالیت یا معامله، خلاصهٔ هوشمند اینجا پر می‌شود.';
+  }
+  return `${bits.join('، ')}. احتمال بستن کارها ${probability.value.band} است.`;
+});
+
+const smartCta = computed(() => {
+  if (daysSinceContact.value != null && daysSinceContact.value <= 1) {
+    return 'پیشنهاد منتو: پیگیری بعدی را ثبت کن';
+  }
+  return 'پیشنهاد منتو: امروز با مشتری تماس بگیر';
+});
+
+const kpis = computed(() => [
+  {
+    key: 'prob',
+    label: 'احتمال خرید',
+    value: `${toFaDigits(probability.value.score)}٪`,
+    hint: probability.value.band,
+    icon: 'fire' as const,
+    tone: 'fire',
+  },
+  {
+    key: 'next',
+    label: 'فعالیت بعدی',
+    value: formatNextSlot(nextActivity.value?.dueAt),
+    icon: 'clock' as const,
+    tone: 'clock',
+  },
+  {
+    key: 'value',
+    label: 'ارزش کل معاملات',
+    value: myDeals.value.length
+      ? formatCompactMoney(dealTotal.value, dealCurrency.value)
+      : '—',
+    icon: 'chart' as const,
+    tone: 'chart',
+  },
+  {
+    key: 'deals',
+    label: 'معاملات',
+    value: myDeals.value.length
+      ? `${toFaDigits(myDeals.value.length)} معامله`
+      : 'بدون معامله',
+    icon: 'bag' as const,
+    tone: 'bag',
+  },
+  {
+    key: 'last',
+    label: 'آخرین ارتباط',
+    value: formatRelativeContact(lastTouchAt.value),
+    icon: 'calendar' as const,
+    tone: 'cal',
+  },
+]);
+
+const dealStatusLabel: Record<string, string> = {
+  open: 'باز',
+  won: 'برنده',
+  lost: 'باخته',
+};
+
+function activityTitle(a: ActivityDto) {
+  if (a.title?.trim()) return a.title;
+  if (a.type === 'call') return 'پیگیری تلفنی';
+  if (a.type === 'meeting') return 'جلسه حضوری';
+  if (a.type === 'task') return 'پیگیری';
+  return 'یادداشت';
+}
+
+function activityTone(a: ActivityDto): TimelineTone {
+  if (a.type === 'call') return 'call';
+  if (a.type === 'meeting') return 'meeting';
+  if (a.type === 'note') return 'note';
+  return 'task';
+}
+
+function activityBadge(a: ActivityDto): { label: string; tone: 'ok' | 'warn' | 'muted' } {
+  if (a.status === 'done') return { label: 'انجام شد', tone: 'muted' };
+  if (a.status === 'canceled') return { label: 'لغو شده', tone: 'muted' };
+  if (a.dueAt && new Date(a.dueAt).getTime() < Date.now()) {
+    return { label: 'عقب‌افتاده', tone: 'warn' };
+  }
+  return { label: 'برنامه‌ریزی شده', tone: 'ok' };
+}
+
+function timelineIcon(tone: TimelineTone) {
+  if (tone === 'call') return 'phone' as const;
+  if (tone === 'quote') return 'document' as const;
+  if (tone === 'meeting') return 'user-plus' as const;
+  if (tone === 'task') return 'check' as const;
+  return 'document' as const;
+}
+
+const timeline = computed<TimelineRow[]>(() =>
+  activities.value
+    .map((a) => {
+      const badge = activityBadge(a);
+      return {
+        key: `a-${a.id}`,
+        title: activityTitle(a),
+        body: a.description,
+        when: a.dueAt ? formatNextSlot(a.dueAt) : formatJalaliDayClock(new Date(a.createdAt)),
+        badge: badge.label,
+        badgeTone: badge.tone,
+        tone: activityTone(a),
+        href: `/activities/${a.id}`,
+        at: new Date(a.dueAt || a.createdAt).getTime(),
+      };
+    })
+    .sort((a, b) => b.at - a.at),
+);
+
+const summaryTimeline = computed(() => timeline.value.slice(0, 6));
+
+const summaryEmpty = computed(() => !activities.value.length && !myDeals.value.length);
+const activitiesEmpty = computed(() => !timeline.value.length);
+const dealsEmpty = computed(() => !myDeals.value.length);
+const cardsEmpty = computed(() => !myCards.value.length);
+
+function readTab() {
+  const q = route.query.tab;
+  if (q === 'activities' || q === 'deals' || q === 'cards' || q === 'info' || q === 'summary') {
+    tab.value = q;
+  } else {
+    tab.value = 'summary';
+  }
+}
+
+function setTab(next: TabKey) {
+  tab.value = next;
+  moreOpen.value = false;
+  void router.replace({ query: { ...route.query, tab: next === 'summary' ? undefined : next } });
+}
+
+function closeMenus() {
+  moreOpen.value = false;
+  fabOpen.value = false;
+}
+
+function onSmartCta() {
+  closeMenus();
+  void router.push({ name: 'activity-new', query: { type: 'call' } });
+}
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const [actRes, boardRes] = await Promise.all([
+      api.get<PaginatedResponse<ActivityDto>>('/activities', {
+        params: { filter: 'all', limit: 80 },
+      }),
+      api.get<PipelineBoardDto>('/pipelines/board'),
+    ]);
+    activities.value = actRes.data.items;
+    deals.value = boardRes.data.stages.flatMap((s) => s.deals);
+    try {
+      const { data } = await api.get<ProjectBoardBoardDto>('/project-boards/board');
+      cards.value = data.stages.flatMap((s) => s.cards);
+    } catch {
+      cards.value = [];
+    }
+  } catch {
+    error.value = 'بارگذاری پروفایل ناموفق بود.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(() => route.query.tab, readTab, { immediate: true });
+watch(() => auth.user?.id, () => void load(), { immediate: true });
+</script>
+
+<template>
+  <section class="profile" @click="closeMenus">
+    <header class="nav">
+      <RouterLink class="icon-btn back-btn" :to="{ name: 'home' }" aria-label="بازگشت" @click.stop>
+        <UiIcon name="chevron" :size="18" />
+      </RouterLink>
+      <span class="nav-brand">mento</span>
+      <ProfileMoreMenu v-model="moreOpen" :items="moreItems" />
+    </header>
+
+    <p v-if="loading" class="muted pad">در حال بارگذاری…</p>
+    <p v-else-if="error" class="error pad">{{ error }}</p>
+
+    <template v-else>
+      <div class="identity">
+        <div class="avatar online">
+          <img src="/brand/user-avatar.png" :alt="name" width="76" height="76" />
+        </div>
+        <div class="who">
+          <h1>{{ name }}</h1>
+          <p class="sub">{{ roleLabel }} · {{ auth.user?.email }}</p>
+          <div class="badges">
+            <span class="pill active">آنلاین</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="qa">
+        <RouterLink class="qa-card" :to="{ name: 'activity-new', query: { type: 'call' } }">
+          <span class="qa-ico call"><UiIcon name="phone" :size="18" /></span>
+          <span>تماس</span>
+        </RouterLink>
+        <RouterLink class="qa-card" :to="{ name: 'notes' }">
+          <span class="qa-ico msg"><UiIcon name="chat" :size="18" /></span>
+          <span>پیام</span>
+        </RouterLink>
+        <RouterLink class="qa-card" :to="{ name: 'activity-new', query: { type: 'task' } }">
+          <span class="qa-ico follow"><UiIcon name="check" :size="18" /></span>
+          <span>پیگیری</span>
+        </RouterLink>
+        <button class="qa-card" type="button" @click.stop="moreOpen = !moreOpen">
+          <span class="qa-ico more"><UiIcon name="dots" :size="18" /></span>
+          <span>بیشتر</span>
+        </button>
+      </div>
+
+      <article class="smart">
+        <header class="smart-head">
+          <MentoAiAvatar :size="54" :show-bubble="false" />
+          <div>
+            <h2>
+              <UiIcon name="sparkle" :size="14" />
+              خلاصه هوشمند منتو
+            </h2>
+            <p>{{ smartText }}</p>
+          </div>
+        </header>
+        <button class="smart-cta" type="button" @click="onSmartCta">
+          <span>{{ smartCta }}</span>
+          <UiIcon name="chevron" :size="16" />
+        </button>
+      </article>
+
+      <nav class="tabs" aria-label="بخش‌های پروفایل">
+        <button
+          v-for="item in TABS"
+          :key="item.key"
+          type="button"
+          :class="{ on: tab === item.key }"
+          @click="setTab(item.key)"
+        >
+          {{ item.label }}
+        </button>
+      </nav>
+
+      <div v-show="tab === 'summary'" class="panel" :class="{ 'is-empty': summaryEmpty }">
+        <ProfileEmptyState
+          v-if="summaryEmpty"
+          title="هنوز اطلاعاتی ثبت نشده!"
+          description="برای شروع، اطلاعات اولیه را تکمیل کنید یا اولین فعالیت خود را اضافه نمایید."
+          primary-label="افزودن اطلاعات"
+          :primary-to="{ name: 'profile', query: { tab: 'info' } }"
+          secondary-label="افزودن اولین فعالیت"
+          :secondary-to="{ name: 'activity-new' }"
+        ></ProfileEmptyState>
+        <div v-if="!summaryEmpty">
+          <div class="kpis">
+            <article v-for="kpi in kpis" :key="kpi.key" class="kpi" :class="kpi.tone">
+              <span class="kpi-ico"><UiIcon :name="kpi.icon" :size="16" /></span>
+              <p>{{ kpi.label }}</p>
+              <strong>{{ kpi.value }}</strong>
+              <em v-if="kpi.hint">{{ kpi.hint }}</em>
+            </article>
+          </div>
+
+          <div class="tl-head">
+            <h3>آخرین فعالیت‌ها</h3>
+            <button type="button" @click="setTab('activities')">مشاهده همه</button>
+          </div>
+          <ol v-if="summaryTimeline.length" class="tl">
+            <li v-for="row in summaryTimeline" :key="row.key">
+              <RouterLink :to="row.href">
+                <span class="dot" :class="row.tone">
+                  <UiIcon :name="timelineIcon(row.tone)" :size="14" />
+                </span>
+                <div>
+                  <strong>
+                    {{ row.title }}
+                    <span v-if="row.badge" class="tl-badge" :class="row.badgeTone">{{ row.badge }}</span>
+                  </strong>
+                  <p v-if="row.body">{{ row.body }}</p>
+                  <time>{{ row.when }}</time>
+                </div>
+              </RouterLink>
+            </li>
+          </ol>
+          <p v-else class="empty">هنوز فعالیتی ثبت نشده.</p>
+        </div>
+      </div>
+
+      <div v-show="tab === 'activities'" class="panel" :class="{ 'is-empty': activitiesEmpty }">
+        <ProfileEmptyState
+          v-if="activitiesEmpty"
+          title="هنوز فعالیتی ثبت نشده!"
+          description="برای شروع، اولین تماس، جلسه یا پیگیری را ثبت کنید."
+          primary-label="افزودن اولین فعالیت"
+          :primary-to="{ name: 'activity-new' }"
+          secondary-label="افزودن معامله"
+          :secondary-to="{ name: 'deal-new' }"
+        ></ProfileEmptyState>
+        <div v-if="!activitiesEmpty">
+          <ol class="tl">
+            <li v-for="row in timeline" :key="row.key">
+              <RouterLink :to="row.href">
+                <span class="dot" :class="row.tone">
+                  <UiIcon :name="timelineIcon(row.tone)" :size="14" />
+                </span>
+                <div>
+                  <strong>
+                    {{ row.title }}
+                    <span v-if="row.badge" class="tl-badge" :class="row.badgeTone">{{ row.badge }}</span>
+                  </strong>
+                  <p v-if="row.body">{{ row.body }}</p>
+                  <time>{{ row.when }}</time>
+                </div>
+              </RouterLink>
+            </li>
+          </ol>
+          <RouterLink class="ghost-link" :to="{ name: 'activity-new' }">فعالیت جدید</RouterLink>
+        </div>
+      </div>
+
+      <div v-show="tab === 'deals'" class="panel list-panel" :class="{ 'is-empty': dealsEmpty }">
+        <ProfileEmptyState
+          v-if="dealsEmpty"
+          title="هنوز معامله‌ای ثبت نشده!"
+          description="اولین معامله را در کاریز ثبت کنید یا یک فعالیت پیگیری بسازید."
+          primary-label="افزودن معامله"
+          :primary-to="{ name: 'deal-new' }"
+          secondary-label="افزودن اولین فعالیت"
+          :secondary-to="{ name: 'activity-new' }"
+        ></ProfileEmptyState>
+        <div v-if="!dealsEmpty" class="list-body">
+          <RouterLink
+            v-for="deal in myDeals"
+            :key="deal.id"
+            class="row-card"
+            :to="{ name: 'deal-detail', params: { id: deal.id } }"
+          >
+            <strong>{{ deal.title }}</strong>
+            <span>{{
+              deal.amount != null ? formatCompactMoney(deal.amount, deal.currency) : 'بدون مبلغ'
+            }}</span>
+            <em>{{ dealStatusLabel[deal.status] ?? deal.status }}</em>
+          </RouterLink>
+          <RouterLink class="ghost-link" :to="{ name: 'deal-new' }">معامله جدید</RouterLink>
+        </div>
+      </div>
+
+      <div v-show="tab === 'cards'" class="panel list-panel" :class="{ 'is-empty': cardsEmpty }">
+        <ProfileEmptyState
+          v-if="cardsEmpty"
+          title="هنوز کارتی ثبت نشده!"
+          description="یک کارت پروژه برای پیگیری کار بسازید."
+          primary-label="افزودن کارت"
+          :primary-to="{ name: 'project-card-new' }"
+          secondary-label="افزودن اولین فعالیت"
+          :secondary-to="{ name: 'activity-new' }"
+        ></ProfileEmptyState>
+        <div v-if="!cardsEmpty" class="list-body">
+          <RouterLink
+            v-for="card in myCards"
+            :key="card.id"
+            class="row-card"
+            :to="{ name: 'project-card-detail', params: { id: card.id } }"
+          >
+            <strong>{{ card.title }}</strong>
+            <span v-if="card.notes">{{ card.notes }}</span>
+          </RouterLink>
+          <RouterLink class="ghost-link" :to="{ name: 'project-card-new' }">کارت جدید</RouterLink>
+        </div>
+      </div>
+
+      <div v-show="tab === 'info'" class="panel info-panel">
+        <dl>
+          <div><dt>نام</dt><dd>{{ name }}</dd></div>
+          <div><dt>ایمیل</dt><dd>{{ auth.user?.email || '—' }}</dd></div>
+          <div><dt>نقش</dt><dd>{{ roleLabel }}</dd></div>
+        </dl>
+      </div>
+    </template>
+
+    <footer v-if="!loading && !error" class="dock">
+      <RouterLink :to="{ name: 'activity-new', query: { type: 'task' } }">
+        <UiIcon name="calendar" :size="18" />
+        فعالیت جدید
+      </RouterLink>
+      <div class="fab-wrap" @click.stop>
+        <button class="fab" type="button" aria-label="ایجاد" @click="fabOpen = !fabOpen">
+          <UiIcon name="plus" :size="22" />
+        </button>
+        <div v-if="fabOpen" class="menu fab-menu">
+          <RouterLink :to="{ name: 'activity-new' }">فعالیت</RouterLink>
+          <RouterLink :to="{ name: 'notes' }">یادداشت</RouterLink>
+          <RouterLink :to="{ name: 'deal-new' }">معامله</RouterLink>
+          <RouterLink :to="{ name: 'quote-new' }">پیشنهاد</RouterLink>
+        </div>
+      </div>
+      <RouterLink :to="{ name: 'activity-new', query: { type: 'call' } }">
+        <UiIcon name="phone" :size="18" />
+        تماس سریع
+      </RouterLink>
+    </footer>
+  </section>
+</template>
+
+<style scoped>
+.profile {
+  max-width: 760px;
+  width: 100%;
+  min-width: 0;
+  margin: 0 auto;
+  padding-bottom: 5.6rem;
+  display: grid;
+  gap: 1rem;
+  overflow: visible;
+}
+
+.profile > * {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.panel {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.panel.is-empty {
+  display: grid;
+  place-items: center;
+  min-height: min(52vh, 460px);
+  gap: 0;
+}
+
+.nav {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.15rem 0.1rem;
+  position: relative;
+  z-index: 20;
+  overflow: visible;
+}
+
+.nav-brand {
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  color: #0f766e;
+  font-size: 1.15rem;
+}
+
+.icon-btn {
+  width: 38px;
+  height: 38px;
+  border: 0;
+  background: #fff;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+  color: #334155;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
+}
+
+.back-btn :deep(.ico) {
+  transform: scaleX(-1);
+}
+
+.more-wrap,
+.fab-wrap {
+  position: relative;
+  z-index: 30;
+  overflow: visible;
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  inset-inline-end: 0;
+  min-width: 12.75rem;
+  width: max-content;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
+  padding: 0.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  z-index: 40;
+}
+
+.menu a,
+.menu button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  text-align: start;
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  padding: 0.68rem 0.8rem;
+  border-radius: 10px;
+  color: #0f172a;
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.menu a:hover,
+.menu button:hover {
+  background: #f0fdfa;
+}
+
+.identity {
+  display: flex;
+  gap: 0.95rem;
+  align-items: center;
+  min-width: 0;
+}
+
+.avatar {
+  position: relative;
+  width: 76px;
+  height: 76px;
+  border-radius: 999px;
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.28);
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.avatar.online::after {
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: #22c55e;
+  border: 3px solid #eef2f6;
+  border-radius: 999px;
+  inset-inline-start: 4px;
+  bottom: 4px;
+}
+
+.who {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.45rem;
+}
+
+.sub {
+  margin: 0.2rem 0 0.55rem;
+  color: #64748b;
+  font-size: 0.88rem;
+}
+
+.badges {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.pill {
+  border-radius: 999px;
+  padding: 0.18rem 0.62rem;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.pill.active {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.qa {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.65rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.qa-card {
+  background: #fff;
+  border: 0;
+  border-radius: 16px;
+  padding: 0.85rem 0.4rem 0.75rem;
+  display: grid;
+  justify-items: center;
+  gap: 0.4rem;
+  color: #334155;
+  font-size: 0.78rem;
+  font-weight: 700;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
+  cursor: pointer;
+}
+
+.qa-ico {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  display: grid;
+  place-items: center;
+}
+
+.qa-ico.call { background: #ecfdf5; color: #0f766e; }
+.qa-ico.msg { background: #eff6ff; color: #2563eb; }
+.qa-ico.follow { background: #fff7ed; color: #ea580c; }
+.qa-ico.more { background: #f1f5f9; color: #64748b; }
+
+.smart {
+  background: linear-gradient(135deg, #ecfeff, #f5f3ff);
+  border: 1px solid #e0e7ff;
+  border-radius: 20px;
+  padding: 0.95rem 1rem 0.85rem;
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.smart-head {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.smart-head h2 {
+  margin: 0 0 0.4rem;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #6d28d9;
+}
+
+.smart-head p {
+  margin: 0;
+  color: #334155;
+  font-size: 0.86rem;
+  line-height: 1.75;
+}
+
+.smart-cta {
+  width: 100%;
+  border: 0;
+  border-radius: 12px;
+  background: #ccfbf1;
+  color: #0f766e;
+  font-weight: 700;
+  padding: 0.72rem 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.smart-cta :deep(.ico) {
+  transform: scaleX(-1);
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 0;
+  gap: 0;
+  overflow-x: auto;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0;
+}
+
+.tabs button {
+  flex: 1 1 0;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.55rem 0.2rem 0.7rem;
+  color: #64748b;
+  font-weight: 700;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+  box-shadow: inset 0 -2px 0 transparent;
+}
+
+.tabs button.on {
+  color: #0f766e;
+  box-shadow: inset 0 -2px 0 #14b8a6;
+}
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.55rem;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: clip;
+}
+
+.kpi {
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.7rem 0.65rem 0.75rem;
+  min-width: 0;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
+  display: grid;
+  gap: 0.22rem;
+}
+
+.kpi p {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.7rem;
+}
+
+.kpi strong {
+  font-size: 0.86rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.kpi em {
+  font-style: normal;
+  font-size: 0.68rem;
+  font-weight: 700;
+  color: #16a34a;
+  background: #dcfce7;
+  width: fit-content;
+  border-radius: 999px;
+  padding: 0.05rem 0.4rem;
+}
+
+.kpi-ico {
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  margin-bottom: 0.15rem;
+}
+
+.kpi.fire .kpi-ico { background: #fff1f2; color: #e11d48; }
+.kpi.clock .kpi-ico { background: #eff6ff; color: #2563eb; }
+.kpi.chart .kpi-ico { background: #fefce8; color: #ca8a04; }
+.kpi.bag .kpi-ico { background: #ecfdf5; color: #0f766e; }
+.kpi.cal .kpi-ico { background: #f5f3ff; color: #7c3aed; }
+
+.tl-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1rem 0 0.55rem;
+}
+
+.tl-head h3 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.tl-head button,
+.ghost-link {
+  color: #0f766e;
+  background: none;
+  border: 0;
+  font-weight: 700;
+  cursor: pointer;
+  font: inherit;
+}
+
+.ghost-link {
+  display: inline-block;
+  margin-top: 0.7rem;
+}
+
+.tl {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+
+.tl li {
+  position: relative;
+}
+
+.tl li:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: 34px;
+  bottom: -8px;
+  inset-inline-start: 15px;
+  width: 2px;
+  background: #e2e8f0;
+}
+
+.tl a {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.55rem 0;
+  color: inherit;
+}
+
+.dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.dot.call { background: #dcfce7; color: #15803d; }
+.dot.quote { background: #ffedd5; color: #c2410c; }
+.dot.note { background: #ede9fe; color: #6d28d9; }
+.dot.meeting { background: #dbeafe; color: #1d4ed8; }
+.dot.task { background: #ccfbf1; color: #0f766e; }
+
+.tl strong {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  font-size: 0.9rem;
+}
+
+.tl p {
+  margin: 0.2rem 0 0;
+  color: #64748b;
+  font-size: 0.8rem;
+  line-height: 1.55;
+}
+
+.tl time {
+  display: block;
+  margin-top: 0.2rem;
+  color: #94a3b8;
+  font-size: 0.75rem;
+}
+
+.tl-badge {
+  font-size: 0.68rem;
+  font-weight: 700;
+  border-radius: 999px;
+  padding: 0.08rem 0.45rem;
+}
+
+.tl-badge.ok { background: #dcfce7; color: #166534; }
+.tl-badge.warn { background: #fee2e2; color: #b91c1c; }
+.tl-badge.muted { background: #f1f5f9; color: #64748b; }
+
+.row-card {
+  display: grid;
+  gap: 0.15rem;
+  background: #fff;
+  border-radius: 14px;
+  padding: 0.85rem 0.95rem;
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
+}
+
+.row-card span,
+.row-card em {
+  color: #64748b;
+  font-size: 0.8rem;
+  font-style: normal;
+}
+
+.list-panel,
+.info-panel {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.info-panel dl {
+  margin: 0;
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.4rem 1rem;
+}
+
+.info-panel dl > div {
+  display: grid;
+  grid-template-columns: 7.5rem 1fr;
+  gap: 0.6rem;
+  padding: 0.7rem 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.info-panel dt {
+  color: #94a3b8;
+  font-size: 0.8rem;
+}
+
+.info-panel dd {
+  margin: 0;
+}
+
+.empty,
+.muted {
+  color: #64748b;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.pad {
+  padding: 0.4rem 0;
+}
+
+.dock {
+  position: sticky;
+  bottom: 0.6rem;
+  margin-top: 0.4rem;
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 0.55rem 0.7rem 0.65rem;
+  gap: 0.4rem;
+  z-index: 6;
+}
+
+.dock > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  color: #0f766e;
+  font-weight: 700;
+  font-size: 0.82rem;
+}
+
+.fab {
+  width: 58px;
+  height: 58px;
+  border: 0;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
+  display: grid;
+  place-items: center;
+  box-shadow: 0 10px 20px rgba(20, 184, 166, 0.4);
+  cursor: pointer;
+  margin-top: -1.35rem;
+}
+
+.fab-menu {
+  inset-inline: auto;
+  left: 50%;
+  right: auto;
+  top: auto;
+  bottom: calc(100% + 10px);
+  transform: translateX(-50%);
+}
+
+@media (max-width: 900px) {
+  .dock {
+    position: fixed;
+    inset-inline: 0.85rem;
+    bottom: calc(0.55rem + env(safe-area-inset-bottom));
+    width: auto;
+  }
+
+  .dock > a {
+    font-size: 0.78rem;
+    gap: 0.28rem;
+  }
+
+  .profile {
+    padding-bottom: 6.2rem;
+  }
+
+  .kpis {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 0.45rem;
+  }
+
+  .kpi {
+    padding: 0.6rem 0.5rem 0.65rem;
+  }
+
+  .kpi strong {
+    font-size: 0.78rem;
+  }
+
+  .tabs button {
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 599px) {
+  .dock > a {
+    font-size: 0.72rem;
+    gap: 0.2rem;
+  }
+
+  .avatar {
+    width: 64px;
+    height: 64px;
+  }
+
+  .qa {
+    gap: 0.45rem;
+  }
+
+  .qa-card {
+    padding: 0.7rem 0.2rem 0.6rem;
+    font-size: 0.72rem;
+    border-radius: 14px;
+  }
+
+  .qa-ico {
+    width: 34px;
+    height: 34px;
+  }
+
+  .smart {
+    padding: 0.8rem 0.8rem 0.75rem;
+  }
+
+  .smart-head {
+    gap: 0.55rem;
+  }
+
+  .smart-cta {
+    font-size: 0.78rem;
+    padding: 0.62rem 0.7rem;
+  }
+
+  .tabs button {
+    font-size: 0.72rem;
+    padding: 0.5rem 0.1rem 0.62rem;
+  }
+
+  .kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+  }
+
+  .kpi {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    column-gap: 0.5rem;
+    row-gap: 0.12rem;
+    padding: 0.65rem 0.7rem;
+  }
+
+  .kpi-ico {
+    grid-row: 1 / span 3;
+    margin-bottom: 0;
+  }
+
+  .kpi p,
+  .kpi strong,
+  .kpi em {
+    grid-column: 2;
+  }
+
+  .kpi strong {
+    font-size: 0.8rem;
+  }
+
+  .info-panel dl > div {
+    grid-template-columns: 1fr;
+    gap: 0.12rem;
+  }
+
+  h1 {
+    font-size: 1.22rem;
+  }
+}
+</style>
diff --git a/apps/web/src/views/ProjectCardFormView.vue b/apps/web/src/views/ProjectCardFormView.vue
index 004a12b..d0797e0 100644
--- a/apps/web/src/views/ProjectCardFormView.vue
+++ b/apps/web/src/views/ProjectCardFormView.vue
@@ -50,6 +50,8 @@ async function save() {
         title: title.value.trim(),
         notes: notes.value.trim() || undefined,
         boardId,
+        personId:
+          typeof route.query.personId === 'string' ? route.query.personId : undefined,
       });
       await router.replace({ name: 'project-card-detail', params: { id: data.id } });
     } else {
diff --git a/apps/web/src/views/QuoteFormView.vue b/apps/web/src/views/QuoteFormView.vue
index a315ff7..eae1607 100644
--- a/apps/web/src/views/QuoteFormView.vue
+++ b/apps/web/src/views/QuoteFormView.vue
@@ -4,6 +4,7 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatMoney as formatMoneyLib } from '@/lib/money';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import type {
   CompanyDto,
   CreateQuoteRequest,
@@ -148,8 +149,15 @@ async function load() {
     } else if (fromDealId) {
       dealId.value = fromDealId;
       title.value = 'پیش‌فاکتور';
-    } else if (!lines.value.length) {
-      lines.value = [newLine()];
+    } else {
+      if (typeof route.query.personId === 'string' && route.query.personId) {
+        personId.value = route.query.personId;
+        const person = people.value.find((p) => p.id === personId.value);
+        if (person?.company?.id) companyId.value = person.company.id;
+      }
+      if (!lines.value.length) {
+        lines.value = [newLine()];
+      }
     }
   } catch {
     error.value = 'بارگذاری فرم پیش‌فاکتور ناموفق بود.';
@@ -257,7 +265,7 @@ onMounted(load);
         </div>
         <div class="field">
           <label>اعتبار تا</label>
-          <input v-model="validUntil" type="date" />
+          <JalaliDateInput v-model="validUntil" />
         </div>
         <div class="field">
           <label>ارز</label>
diff --git a/apps/web/src/views/ReportsView.vue b/apps/web/src/views/ReportsView.vue
index 364e8cb..fcaa773 100644
--- a/apps/web/src/views/ReportsView.vue
+++ b/apps/web/src/views/ReportsView.vue
@@ -3,6 +3,8 @@ import { onMounted, ref } from 'vue';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatMoney } from '@/lib/money';
+import { formatLocalDateInput } from '@/lib/jalali';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import type { OrganizationDto, ReportsDashboardDto } from '@mento/shared';
 
 const loading = ref(false);
@@ -23,8 +25,8 @@ const typeLabel: Record<string, string> = {
 function defaultRange() {
   const now = new Date();
   const start = new Date(now.getFullYear(), now.getMonth(), 1);
-  from.value = start.toISOString().slice(0, 10);
-  to.value = now.toISOString().slice(0, 10);
+  from.value = formatLocalDateInput(start);
+  to.value = formatLocalDateInput(now);
 }
 
 function money(n: number) {
@@ -76,11 +78,11 @@ onMounted(() => {
     <form class="toolbar" @submit.prevent="load">
       <label>
         از
-        <input v-model="from" type="date" />
+        <JalaliDateInput v-model="from" />
       </label>
       <label>
         تا
-        <input v-model="to" type="date" />
+        <JalaliDateInput v-model="to" />
       </label>
       <button class="btn" type="submit" :disabled="loading">اعمال</button>
       <a
@@ -242,12 +244,8 @@ h1 {
   color: var(--muted);
 }
 
-.toolbar input {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.55rem 0.7rem;
-  font: inherit;
-  background: #fff;
+.toolbar :deep(.trigger) {
+  min-width: 11.5rem;
 }
 
 .portal-link {
diff --git a/apps/web/src/views/SalesForecastView.vue b/apps/web/src/views/SalesForecastView.vue
index a009869..705897e 100644
--- a/apps/web/src/views/SalesForecastView.vue
+++ b/apps/web/src/views/SalesForecastView.vue
@@ -6,6 +6,8 @@ import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
 import { canReassignRecords, canViewAllRecords } from '@/lib/roles';
 import { formatMoney as formatMoneyLib } from '@/lib/money';
+import { formatLocalDateInput } from '@/lib/jalali';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import type {
   CreateSalesGoalRequest,
   OrgUserDto,
@@ -32,13 +34,11 @@ const showAllHint = computed(() => canViewAllRecords(auth.user?.role));
 
 function monthBounds() {
   const now = new Date();
-  const start = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1));
-  const end = new Date(
-    Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 0),
-  );
+  const start = new Date(now.getFullYear(), now.getMonth(), 1);
+  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
   return {
-    start: start.toISOString().slice(0, 10),
-    end: end.toISOString().slice(0, 10),
+    start: formatLocalDateInput(start),
+    end: formatLocalDateInput(end),
   };
 }
 
@@ -222,11 +222,11 @@ onMounted(() => {
         </div>
         <div class="field">
           <label>از تاریخ</label>
-          <input v-model="periodStart" type="date" required />
+          <JalaliDateInput v-model="periodStart" required />
         </div>
         <div class="field">
           <label>تا تاریخ</label>
-          <input v-model="periodEnd" type="date" required />
+          <JalaliDateInput v-model="periodEnd" required />
         </div>
         <div class="field wide">
           <label>یادداشت</label>
diff --git a/apps/web/src/views/TicketFormView.vue b/apps/web/src/views/TicketFormView.vue
index 67beb36..cfb0c34 100644
--- a/apps/web/src/views/TicketFormView.vue
+++ b/apps/web/src/views/TicketFormView.vue
@@ -150,6 +150,11 @@ async function load() {
       assigneeId.value = auth.user?.id ?? '';
       csatScore.value = null;
       csatComment.value = '';
+      if (typeof route.query.personId === 'string' && route.query.personId) {
+        personId.value = route.query.personId;
+        const person = people.value.find((p) => p.id === personId.value);
+        if (person?.company?.id) companyId.value = person.company.id;
+      }
       void loadFaqHints();
     }
   } catch {
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index b2e538d..6d8a6a4 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -17,8 +17,7 @@
     "noFallthroughCasesInSwitch": true,
     "paths": {
       "@/*": ["./src/*"]
-    },
-    "baseUrl": "."
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/docs/راهنمای-کاربری.md b/docs/راهنمای-کاربری.md
index 4877a56..c538ad5 100644
--- a/docs/راهنمای-کاربری.md
+++ b/docs/راهنمای-کاربری.md
@@ -187,7 +187,7 @@
 ### بالای منو و پایین منو
 
 - **کنار برند منتو:** آیکون اعلان + شمارنده خوانده‌نشده  
-- **پایین منو:** نام کاربر و نقش در یک ردیف + دکمه **خروج**
+- **پایین منو:** کارت پروفایل (نام، نقش، آنلاین) — با کلیک، پروفایل خودتان باز می‌شود + دکمه **خروج**
 
 اگر نقش شما فروش یا پشتیبانی باشد، ممکن است ببینید: «فقط پرونده‌های خودتان را می‌بینید.»
 
@@ -273,16 +273,20 @@
 5. اگر فیلد سفارشی تعریف شده، پایین فرم پر کنید.  
 6. **ذخیره** را بزنید.
 
-روی پرونده ذخیره‌شده:
+روی نام شخص در لیست، **پروفایل مشتری** باز می‌شود (خلاصه هوشمند، تب‌ها، معاملات و تایم‌لاین). برای ویرایش فیلدها از منوی سه‌نقطه → **ویرایش اطلاعات** استفاده کنید.
 
-- بخش **باشگاه مشتریان** امتیاز و سطح را نشان می‌دهد (لینک به مدیریت باشگاه).  
-- پایین صفحه **تایم‌لاین** ظاهر می‌شود.
+روی پرونده:
+
+- تماس / پیام / پیگیری از ردیف اکشن‌ها
+- تب‌های خلاصه، فعالیت‌ها، معاملات، کارت‌ها، اطلاعات
+- پایین صفحه: فعالیت جدید، ایجاد سریع، تماس سریع
+- بخش **باشگاه مشتریان** در تب اطلاعات (لینک به مدیریت باشگاه)
 
 ### ویرایش یا حذف شخص
 
-1. در لیست روی نام کلیک کنید.  
-2. ویرایش → **ذخیره**.  
-3. برای حذف: **حذف** و تأیید (مراقب باشید؛ ارتباط‌ها تحت تأثیر قرار می‌گیرند).
+1. در لیست روی نام کلیک کنید تا پروفایل باز شود.  
+2. منوی سه‌نقطه → **ویرایش اطلاعات** → ذخیره.  
+3. برای حذف: همان منو → **حذف شخص** و تأیید (مراقب باشید؛ ارتباط‌ها تحت تأثیر قرار می‌گیرند).
 
 ### ثبت و ویرایش شرکت
 
@@ -413,7 +417,7 @@
 
 ## ۷) تایم‌لاین پرونده
 
-روی پرونده **ذخیره‌شده** شخص، شرکت یا معامله، پایین فرم بخش **تایم‌لاین** هست.
+روی پروفایل **شخص** تایم‌لاین در تب خلاصه و فعالیت‌هاست. روی پرونده **شرکت** یا **معامله**، پایین فرم بخش **تایم‌لاین** هست.
 
 نشان می‌دهد:
 
diff --git a/docs/وضعیت-پیشرفت.md b/docs/وضعیت-پیشرفت.md
index 33be4c4..f4cda8a 100644
--- a/docs/وضعیت-پیشرفت.md
+++ b/docs/وضعیت-پیشرفت.md
@@ -1,7 +1,7 @@
 # وضعیت پیشرفت منتو (Mento CRM)
 
 سند زندهٔ کارها — با هر قابلیت جدید همین فایل به‌روز می‌شود.  
-آخرین به‌روزرسانی: ۸ شهریور ۱۴۰۵
+آخرین به‌روزرسانی: ۱۱ شهریور ۱۴۰۵
 
 **راهنما:**  
 - `[x]` انجام شده  
@@ -14,6 +14,7 @@
 
 | تاریخ | مورد |
 |---|---|
+| ۱۴۰۵/۶/۱۱ | پروفایل مشتری مطابق ماکاپ (خلاصه هوشمند، تب‌ها، KPI، تایم‌لاین) + پروفایل کاربر از کارت سایدبار |
 | ۱۴۰۵/۶/۸ | تکمیل کامل راهنمای کاربری (همه ماژول‌ها، منوی جدید، پرتال/SMS، پروژه، باشگاه، اتوماسیون) |
 | ۱۴۰۵/۶/۸ | کاریز پروژه + باشگاه مشتریان + اتوماسیون اگر/آنگاه |
 | ۱۴۰۵/۶/۸ | تکمیل `deploy/DEPLOY.md`: پورت DB ۱۵۴۳۲، Prisma از `apps/api`، symlink `@mento/shared`، SMS ترِز، تله‌های tarball/nginx |
@@ -44,7 +45,7 @@
 | وضعیت | مورد | توضیح |
 |---|---|---|
 | [x] | ورود / نشست / سازمان | حساب دمو و JWT |
-| [x] | اشخاص و شرکت‌ها | جستجو + جلوگیری از تکراری |
+| [x] | اشخاص و شرکت‌ها | جستجو + جلوگیری از تکراری؛ پروفایل مشتری با خلاصه هوشمند |
 | [x] | فیلد سفارشی | تعریف + مقدار روی شخص/شرکت/معامله |
 | [x] | کاریز کانبان | کشیدن معامله بین مراحل |
 | [x] | چند کاریز | انتخاب کاریز + ساخت کاریز جدید |
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 48b8256..b9c6aab 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -318,6 +318,7 @@ export interface MoveDealRequest {
 
 export type ActivityType = "call" | "meeting" | "task" | "note";
 export type ActivityStatus = "open" | "done" | "canceled";
+export type ActivityPriority = "very_low" | "low" | "medium" | "high" | "very_high";
 export type ActivityFilter = "today" | "overdue" | "upcoming" | "done" | "all";
 
 export type CustomFieldEntity = "person" | "company" | "deal";
@@ -366,14 +367,18 @@ export interface ActivityDto {
   id: string;
   type: ActivityType;
   status: ActivityStatus;
+  priority: ActivityPriority;
   title: string;
   description: string | null;
   dueAt: string | null;
+  durationMinutes: number | null;
+  reminderAt: string | null;
   completedAt: string | null;
   person: PersonSummaryDto | null;
   company: CompanySummaryDto | null;
   deal: DealSummaryDto | null;
   assignee: UserSummaryDto | null;
+  createdBy: UserSummaryDto | null;
   createdAt: string;
   updatedAt: string;
 }
@@ -381,8 +386,11 @@ export interface ActivityDto {
 export interface CreateActivityRequest {
   title: string;
   type?: ActivityType;
+  priority?: ActivityPriority;
   description?: string;
   dueAt?: string | null;
+  durationMinutes?: number | null;
+  reminderAt?: string | null;
   personId?: string | null;
   companyId?: string | null;
   dealId?: string | null;
@@ -393,8 +401,11 @@ export interface UpdateActivityRequest {
   title?: string;
   type?: ActivityType;
   status?: ActivityStatus;
+  priority?: ActivityPriority;
   description?: string | null;
   dueAt?: string | null;
+  durationMinutes?: number | null;
+  reminderAt?: string | null;
   personId?: string | null;
   companyId?: string | null;
   dealId?: string | null;