Fix change build level for test docker build

A Tahesab import now updates the person who already has that mobile instead of creating another, and the boot merge runs once more so existing pairs collapse.

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/rules/antd-strict-governance.mdc

@@ -41,19 +41,11 @@ Legacy CRM UI (`components/ui/*`, `.crm-*`, `.btn` / `.field` in `styles/`) rema
 6. **24-column grid only**  
    Page layout on migrated screens uses Ant Grid: `a-row` / `a-col` with the **24-column** system (`:span`, `:xs`, `:sm`, `:md`, `:lg`, `:xl`). Do not invent parallel flex/grid CSS layouts for page chrome.
 
-7. **RTL + locale + StyleProvider**  
-   App root in `App.vue` **must** wrap ConfigProvider with `<a-style-provider hash-priority="high">` so legacy `main.css` cannot override Ant controls via higher specificity:
-   ```vue
-   <a-style-provider hash-priority="high">
-     <a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">
-       <RouterView />
-     </a-config-provider>
-   </a-style-provider>
-   ```
-   Do not override direction to LTR on whole pages; use local `direction="ltr"` only for inherently LTR fragments (e.g. phone numbers, codes).
+7. **RTL + locale**  
+   App root is wrapped with `<a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">`. Do not override direction to LTR on whole pages; use local `direction="ltr"` only for inherently LTR fragments (e.g. phone numbers, codes).
 
 8. **Auto-import**  
-   `<a-*>` components are resolved via `unplugin-vue-components` + `AntDesignVueResolver({ importStyle: false })`. Do not add blanket `app.use(antd)` unless there is a documented exception. Do not per-component CSS imports (`importStyle` stays `false`; CSS-in-JS + theme). Prefer **explicit** `import { Button as AButton, … } from 'ant-design-vue'` in migrated files when the Vite resolver is missing or unreliable.
+   `<a-*>` components are resolved via `unplugin-vue-components` + `AntDesignVueResolver({ importStyle: false })`. Do not add blanket `app.use(antd)` unless there is a documented exception. Do not per-component CSS imports (`importStyle` stays `false`; CSS-in-JS + theme).
 
 9. **Theme is central**  
    Visual tokens (primary, radius, `controlHeight`, padding/margin scale, shadows, Form/Card overrides) live only in `antdTheme.ts`. Do not fork theme objects inside views.

.cursor/settings.json

@@ -1,7 +0,0 @@
-{
-  "plugins": {
-    "hex": {
-      "enabled": true
-    }
-  }
-}

.cursor/skills/antd-system-architect/SKILL.md

@@ -38,13 +38,9 @@ Also read and obey [`.cursor/rules/antd-strict-governance.mdc`](../../rules/antd
 | Dependency | `ant-design-vue` ^4, `@ant-design/icons-vue`, `unplugin-vue-components` in `@mento/web` |
 | Vite plugin | `apps/web/vite.config.ts` — `Components` + `AntDesignVueResolver` |
 | Theme | `apps/web/src/theme/antdTheme.ts` (`controlHeight: 36`) |
-| RTL + locale + theme + StyleProvider | `apps/web/src/App.vue` — `<a-style-provider hash-priority="high">` wrapping `<a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">` (mandatory so legacy `main.css` cannot override Ant) |
+| RTL + locale + theme | `apps/web/src/App.vue` — `<a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">` |
 | Legacy kit (do not touch) | `apps/web/src/components/ui/*`, `styles/main.css` utilities |
 
-### Mandatory child-control conversion (same pass)
-
-هنگام بازنویسی یک صفحه (View)، ایجنت موظف است علاوه بر خود فایل View، تمام کامپوننت‌های فرزندی را که در آن View ایمپورت شده‌اند و حاوی اینپوت/سلکت/دکمه هستند نیز بازبینی کرده و درون آن‌ها را به کامپوننت‌های رسمی `ant-design-vue` تبدیل کند. هیچ تگ `<input>`, `<select>`, `<textarea>`, `<button>` خامی نباید در صفحه یا کامپوننت‌های فرزندِ مصرفی آن باقی بماند.
-
 ## Migration workflow
 
 1. Confirm the **single** route/view the user named.

.dockerignore

@@ -0,0 +1,15 @@
+.git
+node_modules
+**/dist
+**/.env
+**/.env.*
+apps/stt/.venv
+uploads
+docs
+e2e
+test-results
+playwright-report
+graphify-out
+.worktrees
+*.md
+crm-node_modules.tgz

.gitea/workflows/build.yml

@@ -0,0 +1,131 @@
+name: Build & Push Docker Image
+
+on:
+  push:
+    tags:
+      - "*"
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Start time
+        run: echo "BUILD_STARTED=$(date +%s)" >> "$GITHUB_ENV"
+
+      - name: Free disk space
+        id: prune
+        run: |
+          df -h / /workspace /var/lib/containerd 2>/dev/null || df -h /
+          docker builder prune -af || true
+          docker image prune -af || true
+          docker system prune -af --volumes || true
+          df -h / /workspace /var/lib/containerd 2>/dev/null || df -h /
+
+      - name: Checkout code
+        id: checkout
+        uses: actions/checkout@v4
+
+      - name: Resolve image tag
+        id: meta
+        run: |
+          if [ "${GITHUB_REF_TYPE}" = "tag" ]; then
+            TAG="${GITHUB_REF_NAME}"
+          else
+            TAG="$(git rev-parse --short HEAD)"
+          fi
+          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+          echo "registry=dock.monsys.ir" >> "$GITHUB_OUTPUT"
+
+      - name: Build Docker images
+        id: build
+        run: |
+          set -eu
+          tag="${{ steps.meta.outputs.tag }}"
+          reg="${{ steps.meta.outputs.registry }}"
+          docker build -f Dockerfile.api -t "$reg/montact-api:$tag" -t "$reg/montact-api:latest" .
+          docker build -f Dockerfile.web -t "$reg/montact-web:$tag" -t "$reg/montact-web:latest" .
+          docker build -f Dockerfile.stt -t "$reg/montact-stt:$tag" -t "$reg/montact-stt:latest" .
+
+      # Registry login is unsolved. These two steps stay off so a tag run
+      # only proves the three images build. Remove `if: false` on both when
+      # dock.monsys.ir accepts the runner.
+      - name: Login to registry
+        id: login
+        if: false
+        env:
+          REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
+          REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
+        run: |
+          USER_NAME="${REGISTRY_USERNAME:-admin}"
+          printf '%s\n' "$REGISTRY_PASSWORD" | docker login "dock.monsys.ir" -u "$USER_NAME" --password-stdin
+
+      - name: Push Docker images
+        id: push
+        if: false
+        run: |
+          set -eu
+          tag="${{ steps.meta.outputs.tag }}"
+          reg="${{ steps.meta.outputs.registry }}"
+          for name in montact-api montact-web montact-stt; do
+            docker push "$reg/$name:$tag"
+            docker push "$reg/$name:latest"
+          done
+
+      - name: Notify Bale
+        if: always()
+        continue-on-error: true
+        env:
+          BALE_TOKEN: ${{ secrets.BALE_BOT_TOKEN || vars.BALE_BOT_TOKEN }}
+          BALE_CHAT_ID: ${{ vars.BALE_CHAT_ID }}
+          TAG: ${{ steps.meta.outputs.tag }}
+          REG: ${{ steps.meta.outputs.registry }}
+          RUN_URL: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_number }}
+          STEP_OUTCOMES: |
+            Checkout code=${{ steps.checkout.outcome }}
+            Resolve image tag=${{ steps.meta.outcome }}
+            Build Docker images=${{ steps.build.outcome }}
+            Login to registry=${{ steps.login.outcome }}
+            Push Docker images=${{ steps.push.outcome }}
+        run: |
+          if [ -z "$BALE_TOKEN" ] || [ -z "$BALE_CHAT_ID" ]; then
+            echo "BALE_BOT_TOKEN / BALE_CHAT_ID not set in Gitea — skipping notification"
+            exit 0
+          fi
+
+          failed_step=$(printf '%s\n' "$STEP_OUTCOMES" | grep -E '=(failure|cancelled)$' | head -n1 | cut -d= -f1)
+          if [ -n "$failed_step" ]; then
+            title="❌ بیلد ناموفق"
+          elif printf '%s\n' "$STEP_OUTCOMES" | grep -q '^Push Docker images=success$'; then
+            title="✅ بیلد موفق"
+          elif printf '%s\n' "$STEP_OUTCOMES" | grep -q '^Build Docker images=success$'; then
+            title="✅ بیلد موفق؛ پوش رجیستری هنوز خاموش است"
+          else
+            title="⚠️ بیلد کامل نشد"
+          fi
+
+          commit=$(git log -1 --pretty='%h — %s' 2>/dev/null || echo "${GITHUB_SHA:0:7}")
+          elapsed=$(( $(date +%s) - ${BUILD_STARTED:-$(date +%s)} ))
+
+          text="${title}
+          پروژه: ${GITHUB_REPOSITORY}
+          تگ: ${TAG:-${GITHUB_REF_NAME}}"
+          if [ -z "$failed_step" ] && [ -n "$TAG" ]; then
+            text="${text}
+          image: ${REG}/montact-api:${TAG}
+          image: ${REG}/montact-web:${TAG}
+          image: ${REG}/montact-stt:${TAG}"
+          fi
+          [ -n "$failed_step" ] && text="${text}
+          مرحلهٔ خطا: ${failed_step}"
+          text="${text}
+          کامیت: ${commit}
+          توسط: ${GITHUB_ACTOR}
+          مدت: $((elapsed / 60))m$((elapsed % 60))s
+          لاگ: ${RUN_URL}"
+          msg_file=$(mktemp)
+          printf '%s\n' "$text" | sed 's/^[[:space:]]*//' > "$msg_file"
+
+          curl -sS -m 20 -X POST "https://tapi.bale.ai/bot${BALE_TOKEN}/sendMessage" \
+            --data-urlencode "chat_id=${BALE_CHAT_ID}" \
+            --data-urlencode "text@${msg_file}"

Dockerfile.api

@@ -0,0 +1,29 @@
+# NestJS API + Prisma. Build context is the monorepo root.
+FROM node:20-bookworm-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+COPY apps/api/package.json apps/api/package.json
+COPY apps/web/package.json apps/web/package.json
+COPY packages/shared/package.json packages/shared/package.json
+RUN npm ci
+COPY apps/api apps/api
+COPY packages/shared packages/shared
+RUN npm run build -w @mento/shared \
+ && npm run prisma:generate -w @mento/api \
+ && npm run build -w @mento/api
+
+FROM node:20-bookworm-slim
+WORKDIR /app
+RUN apt-get update \
+ && apt-get install -y --no-install-recommends openssl ca-certificates \
+ && rm -rf /var/lib/apt/lists/*
+COPY --from=build /app/package.json /app/package-lock.json ./
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/packages/shared ./packages/shared
+COPY --from=build /app/apps/api/package.json ./apps/api/package.json
+COPY --from=build /app/apps/api/dist ./apps/api/dist
+COPY --from=build /app/apps/api/prisma ./apps/api/prisma
+WORKDIR /app/apps/api
+ENV NODE_ENV=production
+EXPOSE 3000
+CMD ["node", "dist/src/main.js"]

Dockerfile.stt

@@ -0,0 +1,15 @@
+# Local Faster-Whisper. Not published on Ingress.
+FROM python:3.11-slim-bookworm
+RUN apt-get update \
+ && apt-get install -y --no-install-recommends ffmpeg \
+ && rm -rf /var/lib/apt/lists/*
+WORKDIR /app
+COPY apps/stt/requirements.txt ./requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+COPY apps/stt/main.py ./main.py
+ENV STT_MODEL=small \
+    STT_DEVICE=cpu \
+    STT_COMPUTE_TYPE=int8 \
+    HF_HOME=/models
+EXPOSE 3040
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "3040"]

Dockerfile.web

@@ -0,0 +1,16 @@
+# Vue panel. The built app calls /api on the same host; Traefik sends that to the API.
+FROM node:20-bookworm-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+COPY apps/api/package.json apps/api/package.json
+COPY apps/web/package.json apps/web/package.json
+COPY packages/shared/package.json packages/shared/package.json
+RUN npm ci
+COPY apps/web apps/web
+COPY packages/shared packages/shared
+RUN npm run build -w @mento/shared && npm run build -w @mento/web
+
+FROM nginx:1.27-alpine
+COPY docker/web.nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/apps/web/dist /usr/share/nginx/html
+EXPOSE 80

antd-strict-governance.mdc.md

@@ -1,65 +0,0 @@
----
-description: حاکمیت مطلق معماری رابط کاربری بر پایه Ant Design Vue v4، قفل مهاجرت صفحه به صفحه، ممنوعیت کامل CSS دستی و استاندارد ریاضی چیدمان
-globs: apps/web/src/**/*.{vue,ts,tsx,css}
-alwaysApply: true
----
-
-# قرارداد حاکمیتی و غیرقابل‌مذاکرهٔ رابط کاربری (Ant Design Vue v4 Strict Contract)
-
-تنها منبع مجاز برای ساخت و بازنویسی عناصر رابط کاربری در این پروژه `ant-design-vue` (نسخه ۴) است. هرگونه تخطی از قوانین زیر خطای معماری محسوب می‌شود:
-
-## ۱. قفل ایزولاسیون و مهاجرت صفحه به صفحه (Single-Page Blast Radius Lock)
-1. **ممنوعیت ویرایش دسته‌جمعی:** تو فقط و فقط مجاز به ویرایش صفحه (View) یا کامپوننتی هستی که کاربر صراحتاً در همان نوبت نام برده است. دست زدن به سایر صفحات پروژه مطلقاً ممنوع است.
-2. **حفظ لایهٔ قدیمی برای صفحات مهاجرت‌نکرده:** فایل‌های داخل `apps/web/src/components/ui/Ui*.vue` و استایل‌های سراسری `main.css` / `tokens.css` نباید حذف یا ویرایش شوند تا صفحات قدیمی پروژه بدون خطا به کار خود ادامه دهند.
-3. **قطع کامل وابستگی در صفحهٔ هدف:** در صفحه‌ای که کاربر دستور بازنویسی آن را می‌دهد، تمام ایمپورت‌های `@/components/ui` و کلاس‌های قدیمی باید از آن فایل حذف شوند و ۱۰۰٪ با کامپوننت‌های رسمی `<a-...>` جایگزین گردند.
-4. **کامپوننت‌های تخصصی تاریخ شمسی و مبالغ:** در صفحات بازنویسی‌شده، اگر از `JalaliDateInput` یا `MoneyInput` استفاده شده است، منطق آن‌ها را حفظ کن اما مطمئن شو ظاهر ورودی آن‌ها با ارتفاع `40px`، ردیوس `10px` و عرض `style="width: 100%"` کاملاً هم‌تراز با فیلدهای Ant Design نمایش داده می‌شود.
-
-## ۲. لیست سیاه سینتکس و تگ‌های ممنوعه در صفحات بازنویسی‌شده (Banned Syntax)
-در هر فایلی که بازنویسی یا ایجاد می‌کنی، وجود موارد زیر خطای بحرانی است و باید فوراً حذف شوند:
-- **تگ‌های خام HTML برای فرم و جدول:** `<button>`, `<input>`, `<select>`, `<textarea>`, `<label>`, `<form>`, `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<td>`.
-- **کلاس‌های لگسی پروژه:** `.btn`, `.btn-primary`, `.btn-ghost`, `.btn-danger`, `.btn-save`, `.field`, `.crm-page`, `.crm-page-header`, `.crm-card`, `.crm-table`, `.crm-empty-state`.
-- **کلاس‌های Tailwind (پروژه فاقد Tailwind است):** استفاده از کلاس‌های ناموجود مانند `w-full`, `flex`, `gap-4`, `p-4`, `mb-4` مطلقاً ممنوع است. برای عرض کامل کنترل‌ها فقط از `style="width: 100%"` یا پراپ `block` استفاده کن.
-
-## ۳. قوانین ریاضی چیدمان، گرید و ریتم فضایی (Spatial & Layout Mathematics)
-1. **ممنوعیت تکه‌تکه کردن فرم به کارت‌های متعدد (Anti-Card-Fragmentation):**
-   - خرد کردن یک فرم به چندین باکس یا کارت مجزا زیر هم ممنوع است.
-   - کل فیلدهای یک فرم اصلی باید در **حداکثر ۱ `<a-card :bordered="false">`** تجمیع شوند.
-   - برای تفکیک بخش‌های منطقی در داخل آن کارت واحد، فقط از `<a-divider orientation="right">عنوان بخش</a-divider>` استفاده کن.
-2. **چیدمان استاندارد دو ستونه (فرم اصلی + پنل خلاصه):**
-   - ردیف اصلی صفحه: `<a-row :gutter="[24, 24]">`
-   - ستون اصلی (فرم/محتوا): `<a-col :xs="24" :lg="17" :xl="18">`
-   - ستون کناری (خلاصه وضعیت): `<a-col :xs="24" :lg="7" :xl="6">` همراه با `<a-affix :offset-top="24">`.
-   - محتوای پنل خلاصه باید الزاماً با `<a-descriptions :column="1" size="small" bordered>` داخل `<a-card title="..." :bordered="false">` پیاده‌سازی شود، نه با `div` و `span` دستی.
-3. **قانون عرض فیلدها در فرم (Form Grid Allocation):**
-   - تمام فرم‌ها باید `<a-form layout="vertical" :model="...">` باشند و تمام فیلدها بدون استثنا داخل `<a-form-item label="..." name="...">` قرار گیرند.
-   - رها کردن فیلدهای کوتاه در عرض ۱۰۰٪ (`span="24"`) ممنوع است. چیدمان درون فرم باید با `<a-row :gutter="[16, 0]">` به شکل زیر باشد:
-     - **فیلدهای کوتاه** (تاریخ، ساعت، مدت زمان، مبلغ، وضعیت، نوع، کد): `<a-col :xs="24" :sm="12" :md="8">` (۳ ستونه).
-     - **فیلدهای متوسط** (انتخاب مشتری، مسئول انجام، فرصت مرتبط، دسته‌بندی، عنوان): `<a-col :xs="24" :md="12">` (۲ ستونه).
-     - **فیلدهای تمام‌عرض** (توضیحات، یادداشت، چک‌لیست، برچسب‌ها): `<a-col :span="24">`.
-     - **سوییچ‌ها و چک‌باکس‌های هم‌خانواده:** قرارگیری در یک ردیف با `<a-space :size="24" wrap>`.
-4. **مدیریت Margin و Padding بدون CSS دستی:**
-   - فاصلهٔ عمودی فیلدها فقط توسط `itemMarginBottom` در کانفیگ تم `<a-form-item>` کنترل می‌شود.
-   - فاصلهٔ افقی/عمودی دکمه‌ها و المان‌ها فقط با `<a-space :size="8 | 12 | 16">` یا `<a-flex gap="small | middle | large" align="center" justify="space-between">` کنترل می‌شود.
-
-## ۴. قفل سینتکس اختصاصی Ant Design Vue v4
-- **بایندینگ مقدار (`v-model`):** استفاده از `v-model="..."` بدون آرگومان روی کامپوننت‌های Ant Design Vue خطاست:
-  - برای `a-input`, `a-textarea`, `a-input-number`, `a-select`, `a-radio-group`, `a-segmented`, `a-date-picker`, `a-time-picker`: الزاماً `v-model:value="..."`.
-  - برای `a-checkbox`, `a-switch`: الزاماً `v-model:checked="..."`.
-  - برای `a-modal`, `a-drawer`, `a-dropdown`, `a-popover`, `a-tooltip`: الزاماً `v-model:open="..."` (پراپ `:visible` منسوخ و ممنوع است).
-- **الزام عرض ۱۰۰٪ روی کنترل‌های خاص:** کامپوننت‌های `<a-input-number>`, `<a-date-picker>`, `<a-time-picker>` و `<a-select>` در داخل `<a-form-item>` باید دارای `style="width: 100%"` باشند.
-- **فیدبک و پیام‌ها:** برای نمایش پیام از `import { message, notification, Modal } from 'ant-design-vue'` استفاده کن.
-
-## ۵. حاکمیت مطلق توکن‌ها و ممنوعیت CSS دستی (Zero Manual Styling & RTL Lock)
-1. نوشتن کد رنگ (`#hex`, `rgb`, `rgba`, `hsl`)، سایه (`box-shadow`)، ردیوس (`border-radius`) و فاصله‌های دستی (`margin`, `padding` با `px`/`rem`) در `<style scoped>` ممنوع است.
-2. تمام تنظیمات ظاهری (ردیوس، شدو، ارتفاع کنترل‌ها، پدینگ و رنگ‌ها) فقط در فایل مرکزی `apps/web/src/theme/antdTheme.ts` تعریف می‌شوند.
-3. در صورت نیاز ضروری به خواندن توکن در یک کانتینر، فقط از هوک `const { token } = theme.useToken()` در `ant-design-vue` استفاده کن.
-4. استفاده از `:deep(.ant-...)` برای دست‌کاری ظاهر کامپوننت‌های انت ممنوع است.
-5. در RTL، استفاده از `left`, `right`, `margin-left`, `margin-right`, `padding-left`, `padding-right` ممنوع است؛ فقط از خواص منطقی (`inset-inline-start`, `inset-inline-end`, `margin-inline`, `padding-inline`) استفاده شود.
-
-## ۶. گیت خودارزیابی پیش از تحویل کد (Self-Verification Gate)
-قبل از اتمام کار روی فایلِ درخواستی، این ۵ شرط را بررسی کن:
-- [ ] آیا فقط فایل درخواستی کاربر ویرایش شده و سایر صفحات دست‌نخورده مانده‌اند؟
-- [ ] آیا تمام تگ‌های خام فرم، کامپوننت‌های `Ui*`، کلاس‌های `.btn`/`.field`/`.crm-*` و کلاس‌های ناموجود مثل `w-full` از این صفحه حذف شده‌اند؟
-- [ ] آیا فرم در ۱ کارت واحد با `<a-divider>` و گرید `<a-row :gutter="[16, 0]">` چیده شده و فیلدهای کوتاه از حالت تمام‌عرض خارج شده‌اند؟
-- [ ] آیا تمام بایندینگ‌ها از `v-model:value`، `v-model:checked` و `v-model:open` به همراه `style="width: 100%"` روی سلکت‌ها و شمارنده‌ها استفاده می‌کنند؟
-- [ ] آیا `<style scoped>` کاملاً از رنگ‌های Hex، مارجین/پدینگ دستی، ردیوس، شدو و `:deep(.ant-*)` پاک‌سازی شده است؟

apps/api/prisma/migrations/20261103210000_activity_board_position/migration.sql

@@ -0,0 +1,3 @@
+ALTER TABLE "Activity" ADD COLUMN "boardPosition" INTEGER NOT NULL DEFAULT 0;
+
+CREATE INDEX "Activity_stageId_boardPosition_idx" ON "Activity"("stageId", "boardPosition");

apps/api/prisma/migrations/20261104090000_role_treasury_accounts/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE "OrgRole" ADD COLUMN "treasuryAccountIds" TEXT[] NOT NULL DEFAULT ARRAY[]::TEXT[];

apps/api/prisma/migrations/20261104110000_role_treasury_own_accounts/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE "OrgRole" ADD COLUMN "treasuryOwnAccounts" BOOLEAN NOT NULL DEFAULT false;

apps/api/prisma/migrations/20261104120000_user_treasury_access/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE "Membership" ADD COLUMN "treasuryAccessOverride" JSONB;

apps/api/prisma/migrations/20261104140000_financial_document_party/migration.sql

@@ -0,0 +1,9 @@
+ALTER TABLE "FinancialDocument" ADD COLUMN "companyId" TEXT;
+ALTER TABLE "FinancialDocument" ADD COLUMN "userId" TEXT;
+ALTER TABLE "FinancialDocument" ADD COLUMN "partyKind" TEXT;
+
+CREATE INDEX "FinancialDocument_companyId_idx" ON "FinancialDocument"("companyId");
+CREATE INDEX "FinancialDocument_userId_idx" ON "FinancialDocument"("userId");
+
+ALTER TABLE "FinancialDocument" ADD CONSTRAINT "FinancialDocument_companyId_fkey" FOREIGN KEY ("companyId") REFERENCES "Company"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "FinancialDocument" ADD CONSTRAINT "FinancialDocument_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

apps/api/prisma/migrations/20261105103000_data_fix_flag/migration.sql

@@ -0,0 +1,6 @@
+CREATE TABLE "DataFix" (
+    "key" TEXT NOT NULL,
+    "doneAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "DataFix_pkey" PRIMARY KEY ("key")
+);

apps/api/prisma/migrations/20261105140000_tahesab_customer_sync_hours/migration.sql

@@ -0,0 +1,6 @@
+ALTER TABLE "AccountingConnection"
+  ADD COLUMN "customerSyncHours" INTEGER[] NOT NULL DEFAULT ARRAY[]::INTEGER[],
+  ADD COLUMN "customerSyncLastSlot" TEXT,
+  ADD COLUMN "customerSyncLastRunAt" TIMESTAMP(3),
+  ADD COLUMN "customerSyncLastSummary" TEXT,
+  ADD COLUMN "customerSyncLastError" TEXT;

apps/api/prisma/schema.prisma

@@ -295,6 +295,7 @@ model User {
   ownedInvoices          Invoice[]                @relation("InvoiceOwner")
   ownedPeople            Person[]                 @relation("PersonOwner")
   ownedCompanies         Company[]                @relation("CompanyOwner")
+  financialPartyDocuments FinancialDocument[]     @relation("FinancialDocumentParty")
   ownedProjectCards      ProjectCard[]            @relation("ProjectCardOwner")
   activities             Activity[]               @relation("ActivityAssignee")
   assignedActivities     Activity[]               @relation("ActivityAssignees")
@@ -353,6 +354,10 @@ model OrgRole {
   permissions    String[]     @default([])
   /// عمق داده به‌ازای بخش، مثلاً {"customers":{"mode":"rules","rules":[{"owners":["self"]}]}}
   dataAccessPolicy Json       @default("{}")
+  /// حساب‌های مالی اضافی این نقش؛ همراه با حساب‌هایی که خودش مسئول است
+  treasuryAccountIds String[] @default([])
+  /// اعضای نقش، حساب‌هایی را ببینند که نام خودشان مسئول آن است
+  treasuryOwnAccounts Boolean @default(false)
   /// owner | admin | sales | support — نقش‌های سیستمی قابل حذف نیستند
   systemKey      String?
   /// نقش والد برای سلسله‌مراتب زیرنقش‌ها
@@ -387,6 +392,8 @@ model Membership {
   dataVisibilityScopes Json         @default("{}")
   /// Override عمق داده نسبت به نقش؛ کلید غایب = ارث از OrgRole.dataAccessPolicy
   dataAccessOverride   Json         @default("{}")
+  /// null = دسترسی مالی از نقش؛ وگرنه جایگزین بخش‌ها و حساب‌های مالی همین کاربر
+  treasuryAccessOverride Json?
   /// سوئیچ «بایگانی اطلاعات قبل» برای این عضو؛ فقط وقتی ماژول محیط روشن است اثر دارد
   priorArchiveEnabled  Boolean      @default(false)
   /// current | archive
@@ -518,6 +525,7 @@ model Company {
   customFields       Json          @default("{}")
   groupLinks         CompanyGroupLink[]
   people             Person[]
+  financialDocuments FinancialDocument[]
   deals              Deal[]
   activities         Activity[]
   smartNotes         Note[]
@@ -896,6 +904,8 @@ model Activity {
   /// مرحله (ستون کانبان)؛ null یا مرحلهٔ ناهم‌نوع با status → اولین مرحلهٔ هم‌نوع
   stageId           String?
   stage             ActivityStage?   @relation(fields: [stageId], references: [id], onDelete: SetNull)
+  /// ترتیب کارت داخل همان ستون کانبان
+  boardPosition     Int              @default(0)
   /// نوع سفارشی؛ null → نوع اصلیِ همان type
   typeDefId         String?
   typeDef           ActivityTypeDef? @relation(fields: [typeDefId], references: [id], onDelete: SetNull)
@@ -911,6 +921,7 @@ model Activity {
   updatedAt         DateTime         @updatedAt
 
   @@index([stageId])
+  @@index([stageId, boardPosition])
   @@index([boardId])
   @@index([typeDefId])
   @@index([leadId])
@@ -1832,6 +1843,13 @@ model AccountingConnection {
   lastHealthAt     DateTime?
   lastHealthOk     Boolean?
   lastError        String?
+  /// ساعت‌های بروزرسانی خودکار مشتریان (۰ تا ۲۳، وقت تهران). خالی یعنی خاموش.
+  customerSyncHours       Int[]     @default([])
+  /// نوبت claimشده، مثل 2026-11-05-08، تا در همان ساعت دو بار اجرا نشود
+  customerSyncLastSlot    String?
+  customerSyncLastRunAt   DateTime?
+  customerSyncLastSummary String?
+  customerSyncLastError   String?
   createdAt        DateTime                 @default(now())
   updatedAt        DateTime                 @updatedAt
   personLinks      PersonAccountingLink[]
@@ -2321,6 +2339,12 @@ model FinancialDocument {
   category       FinancialCategory?   @relation(fields: [categoryId], references: [id], onDelete: SetNull)
   personId       String?
   person         Person?              @relation(fields: [personId], references: [id], onDelete: SetNull)
+  companyId      String?
+  company        Company?             @relation(fields: [companyId], references: [id], onDelete: SetNull)
+  userId         String?
+  partyUser      User?                @relation("FinancialDocumentParty", fields: [userId], references: [id], onDelete: SetNull)
+  /// person | company | user | other
+  partyKind      String?
   partyName      String?
   accountId      String?
   account        FinancialAccount?    @relation("DocumentAccount", fields: [accountId], references: [id], onDelete: SetNull)
@@ -2341,6 +2365,8 @@ model FinancialDocument {
   @@index([organizationId, kind, bookedAt])
   @@index([organizationId, status])
   @@index([personId])
+  @@index([companyId])
+  @@index([userId])
 }
 
 /// گردش قطعی حساب. افتتاحیه، دریافت، پرداخت، انتقال.
@@ -3760,3 +3786,9 @@ model AttendanceEvent {
   @@index([organizationId, userId, at])
   @@unique([organizationId, userId, kind, sessionStartedAt])
 }
+
+/// علامت یک‌بار اجرای اصلاح داده
+model DataFix {
+  key    String   @id
+  doneAt DateTime @default(now())
+}

apps/api/src/activities/activities-excel.service.ts

@@ -3,7 +3,7 @@ import type { ActivityType, ImportContactsResult } from '@mento/shared';
 import { PrismaService } from '../prisma/prisma.service';
 import type { Actor } from '../common/record-scope';
 import { assigneeWhere } from '../common/record-scope';
-import { normalizePhone } from '../contacts/normalize';
+import { phoneIdentityKeys, storedPhoneNumber } from '../contacts/normalize';
 import {
   excelFieldsFromColumns,
   formatClock,
@@ -357,7 +357,7 @@ export class ActivitiesExcelService {
       return id;
     };
     const resolvePerson = async (row: Record<string, string>) => {
-      const mobile = normalizePhone(row.personMobile);
+      const mobile = storedPhoneNumber(row.personMobile);
       const name = (row.personName ?? '').trim().toLowerCase();
       const key = mobile ? `m:${mobile}` : name ? `n:${name}` : '';
       if (!key) return null;
@@ -478,10 +478,13 @@ export class ActivitiesExcelService {
   }
 
   private async findPersonId(organizationId: string, row: Record<string, string>) {
-    const mobile = normalizePhone(row.personMobile);
-    if (mobile) {
+    const mobileKeys = phoneIdentityKeys(storedPhoneNumber(row.personMobile));
+    if (mobileKeys.length) {
       const byMobile = await this.prisma.person.findFirst({
-        where: { organizationId, mobile: { contains: mobile.replace(/^\+98|^98|^0/, '') } },
+        where: {
+          organizationId,
+          OR: [{ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } }],
+        },
         select: { id: true },
       });
       if (byMobile) return byMobile.id;

apps/api/src/activities/activities.controller.ts

@@ -428,7 +428,13 @@ export class ActivitiesController {
     @Param('id') id: string,
     @Body() dto: MoveActivityStageDto,
   ) {
-    return this.activitiesService.moveToStage(user.organizationId, id, user, dto.stageId);
+    return this.activitiesService.moveToStage(
+      user.organizationId,
+      id,
+      user,
+      dto.stageId,
+      dto.position,
+    );
   }
 
   @Patch(':id/complete')

apps/api/src/activities/activities.service.ts

@@ -31,6 +31,7 @@ import {
   ownerWhere,
 } from '../common/record-scope';
 import { assertAssigneeSet } from '../common/assign-access';
+import { placeId, sameIds, writePositions } from '../common/column-order';
 import { normalizeTags } from '../common/tags';
 import { GamificationService } from '../gamification/gamification.service';
 import { tehranDayKey } from '../routines/routine-dates';
@@ -329,9 +330,7 @@ export class ActivitiesService {
         where,
         include,
         // روی پروندهٔ لید، تازه‌ترین (از جمله پیگیری آینده) اول بیاید تا از سقف صفحه نیفتد
-        orderBy: entity?.leadId
-          ? [{ createdAt: 'desc' }]
-          : [{ dueAt: 'asc' }, { createdAt: 'desc' }],
+        orderBy: this.listOrder(entity, stageScope),
         skip: (page - 1) * take,
         take,
       }),
@@ -385,7 +384,7 @@ export class ActivitiesService {
       this.prisma.activity.findMany({
         where,
         select: { id: true },
-        orderBy: [{ dueAt: 'asc' }, { createdAt: 'desc' }],
+        orderBy: this.listOrder(entity, stageScope),
         take: cap,
       }),
       this.prisma.activity.count({ where }),
@@ -490,11 +489,46 @@ export class ActivitiesService {
     return { counts, total };
   }
 
+  private listOrder(
+    entity?: { leadId?: string },
+    stageScope?: StageScope,
+  ): Prisma.ActivityOrderByWithRelationInput[] {
+    if (entity?.leadId) return [{ createdAt: 'desc' }];
+    if (stageScope && stageScope.stageId !== 'all') {
+      return [{ boardPosition: 'asc' }, { dueAt: 'asc' }, { createdAt: 'desc' }];
+    }
+    return [{ dueAt: 'asc' }, { createdAt: 'desc' }];
+  }
+
+  private async reorderStage(
+    organizationId: string,
+    stageId: string,
+    activityId: string,
+    index: number,
+  ) {
+    const where = await this.stages.whereForStage(organizationId, stageId);
+    const rows = await this.prisma.activity.findMany({
+      where,
+      select: { id: true },
+      orderBy: [{ boardPosition: 'asc' }, { dueAt: 'asc' }, { createdAt: 'desc' }],
+    });
+    const currentIds = rows.map((row) => row.id);
+    const placed = placeId(currentIds, activityId, index);
+    if (sameIds(currentIds, placed)) return;
+    await writePositions(
+      (ops) => this.prisma.$transaction(ops),
+      placed,
+      (id, boardPosition) =>
+        this.prisma.activity.update({ where: { id }, data: { boardPosition } }),
+    );
+  }
+
   async moveToStage(
     organizationId: string,
     id: string,
     actor: ActivityActor,
     stageId: string,
+    position?: number,
   ): Promise<ActivityDto> {
     await this.ensureExists(organizationId, id, actor);
     const stage = await this.stages.get(organizationId, stageId);
@@ -519,6 +553,7 @@ export class ActivitiesService {
       },
       include,
     });
+    if (position != null) await this.reorderStage(organizationId, stage.id, id, position);
     if (stage.kind === 'done' && existing?.status !== 'done') {
       await this.fireDone(organizationId, row);
     }

apps/api/src/activities/dto.ts

@@ -219,6 +219,12 @@ export class ReorderActivityStagesDto {
 export class MoveActivityStageDto {
   @IsString()
   stageId!: string;
+
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(0)
+  position?: number;
 }
 
 /** محتوای fields در سرویس بر اساس تعریف نوع اعتبارسنجی می‌شود */
@@ -316,7 +322,7 @@ export class CreateActivityDto {
 
   @IsOptional()
   @IsString()
-  @MaxLength(2000)
+  @MaxLength(20000)
   description?: string;
 
   @IsOptional()
@@ -416,7 +422,7 @@ export class UpdateActivityDto {
 
   @IsOptional()
   @IsString()
-  @MaxLength(2000)
+  @MaxLength(20000)
   description?: string | null;
 
   @IsOptional()

apps/api/src/common/column-order.ts

@@ -0,0 +1,28 @@
+import type { Prisma } from '@prisma/client';
+
+type PositionUpdate = Prisma.PrismaPromise<unknown>;
+
+/** کارت را در ایندکس خواسته‌شده می‌گذارد. ایندکس نسبت به فهرست بدون خود کارت است. */
+export function placeId(ids: string[], movingId: string, index: number): string[] {
+  const next = ids.filter((id) => id !== movingId);
+  const at = Math.max(0, Math.min(Math.trunc(index), next.length));
+  next.splice(at, 0, movingId);
+  return next;
+}
+
+export function sameIds(left: string[], right: string[]): boolean {
+  return left.length === right.length && left.every((id, index) => id === right[index]);
+}
+
+/** ترتیب ستون را ۰ تا n ذخیره می‌کند. */
+export async function writePositions(
+  transaction: (ops: PositionUpdate[]) => Promise<unknown>,
+  ids: string[],
+  update: (id: string, position: number) => PositionUpdate,
+) {
+  const size = 60;
+  for (let start = 0; start < ids.length; start += size) {
+    const slice = ids.slice(start, start + size);
+    await transaction(slice.map((id, offset) => update(id, start + offset)));
+  }
+}

apps/api/src/contacts/contacts.module.ts

@@ -8,6 +8,7 @@ import { CompaniesService } from './companies.service';
 import { PeopleController } from './people.controller';
 import { PeopleService } from './people.service';
 import { ContactsExcelService } from './contacts-excel.service';
+import { SameMobileMergeService } from './same-mobile-merge.service';
 import { BehaviorModule } from '../behavior/behavior.module';
 import { CustomerGroupsModule } from '../customer-groups/customer-groups.module';
 
@@ -21,7 +22,7 @@ import { CustomerGroupsModule } from '../customer-groups/customer-groups.module'
     CustomerGroupsModule,
   ],
   controllers: [PeopleController, CompaniesController],
-  providers: [PeopleService, CompaniesService, ContactsExcelService],
+  providers: [PeopleService, CompaniesService, ContactsExcelService, SameMobileMergeService],
   exports: [PeopleService, CompaniesService],
 })
 export class ContactsModule {}

apps/api/src/contacts/merge-same-mobile.ts

@@ -0,0 +1,367 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { Prisma, PrismaClient } from '@prisma/client';
+import { canonicalIranMobile, storedPhoneNumber } from './normalize';
+
+const personSelect = {
+  id: true,
+  createdAt: true,
+  firstName: true,
+  lastName: true,
+  gender: true,
+  showGenderInName: true,
+  previousFirstName: true,
+  previousLastName: true,
+  email: true,
+  phone: true,
+  mobile: true,
+  position: true,
+  website: true,
+  instagram: true,
+  birthDate: true,
+  referrer: true,
+  addresses: true,
+  notes: true,
+  tags: true,
+  companyId: true,
+  customFields: true,
+  importSource: true,
+  sourceRef: true,
+  previousImportSource: true,
+  previousSourceRef: true,
+  loyaltyPoints: true,
+  discLabel: true,
+  discReliable: true,
+  discAssessedAt: true,
+} satisfies Prisma.PersonSelect;
+
+type PersonRow = Prisma.PersonGetPayload<{ select: typeof personSelect }>;
+
+function blank(value: string | null | undefined) {
+  return !value?.trim();
+}
+
+function asStrings(value: Prisma.JsonValue): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.map((item) => String(item)).filter(Boolean);
+}
+
+function asObject(value: Prisma.JsonValue): Record<string, unknown> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+  return { ...(value as Record<string, unknown>) };
+}
+
+function mergedFields(keeper: PersonRow, extras: PersonRow[], canon: string): Prisma.PersonUncheckedUpdateInput {
+  const notes = [keeper.notes?.trim() || ''];
+  let email = keeper.email;
+  let phone = storedPhoneNumber(keeper.phone);
+  let position = keeper.position;
+  let website = keeper.website;
+  let instagram = keeper.instagram;
+  let birthDate = keeper.birthDate;
+  let referrer = keeper.referrer;
+  let companyId = keeper.companyId;
+  let gender = keeper.gender;
+  let showGenderInName = keeper.showGenderInName;
+  let previousFirstName = keeper.previousFirstName;
+  let previousLastName = keeper.previousLastName;
+  let previousImportSource = keeper.previousImportSource;
+  let previousSourceRef = keeper.previousSourceRef;
+  let discLabel = keeper.discLabel;
+  let discReliable = keeper.discReliable;
+  let discAssessedAt = keeper.discAssessedAt;
+  let loyaltyPoints = keeper.loyaltyPoints;
+  const addresses = asStrings(keeper.addresses);
+  const tags = new Set(keeper.tags);
+  const customFields = asObject(keeper.customFields);
+
+  for (const extra of extras) {
+    const name = `${extra.firstName} ${extra.lastName}`.trim();
+    notes.push(
+      `ادغام شماره تکراری: ${name || 'بدون نام'} (${extra.mobile || 'بدون موبایل'})`,
+    );
+    if (blank(email) && extra.email) email = extra.email;
+    if (blank(phone)) phone = storedPhoneNumber(extra.phone);
+    if (blank(position) && extra.position) position = extra.position;
+    if (blank(website) && extra.website) website = extra.website;
+    if (blank(instagram) && extra.instagram) instagram = extra.instagram;
+    if (!birthDate && extra.birthDate) birthDate = extra.birthDate;
+    if (blank(referrer) && extra.referrer) referrer = extra.referrer;
+    if (!companyId && extra.companyId) companyId = extra.companyId;
+    if (gender === 'none' && extra.gender !== 'none') {
+      gender = extra.gender;
+      showGenderInName = extra.showGenderInName;
+    }
+    if (blank(previousFirstName) && extra.previousFirstName) {
+      previousFirstName = extra.previousFirstName;
+    }
+    if (blank(previousLastName) && extra.previousLastName) {
+      previousLastName = extra.previousLastName;
+    }
+    if (
+      blank(previousImportSource) &&
+      extra.importSource &&
+      extra.importSource !== keeper.importSource
+    ) {
+      previousImportSource = extra.importSource;
+      previousSourceRef = extra.sourceRef;
+    }
+    if (
+      keeper.importSource === 'tahesab' &&
+      blank(previousFirstName) &&
+      blank(previousLastName)
+    ) {
+      const extraName = `${extra.firstName} ${extra.lastName}`.trim();
+      const keeperName = `${keeper.firstName} ${keeper.lastName}`.trim();
+      if (extraName && extraName !== keeperName) {
+        previousFirstName = extra.firstName || null;
+        previousLastName = extra.lastName || null;
+      }
+    }
+    if (!discLabel && extra.discLabel) {
+      discLabel = extra.discLabel;
+      discReliable = extra.discReliable;
+      discAssessedAt = extra.discAssessedAt;
+    }
+    loyaltyPoints = Math.max(loyaltyPoints, extra.loyaltyPoints);
+    for (const address of asStrings(extra.addresses)) {
+      if (!addresses.includes(address)) addresses.push(address);
+    }
+    for (const tag of extra.tags) tags.add(tag);
+    for (const [key, value] of Object.entries(asObject(extra.customFields))) {
+      if (customFields[key] == null || customFields[key] === '') customFields[key] = value;
+    }
+  }
+
+  return {
+    mobile: canon,
+    email,
+    phone,
+    position,
+    website,
+    instagram,
+    birthDate,
+    referrer,
+    companyId,
+    gender,
+    showGenderInName,
+    previousFirstName,
+    previousLastName,
+    previousImportSource,
+    previousSourceRef,
+    discLabel,
+    discReliable,
+    discAssessedAt,
+    loyaltyPoints,
+    addresses,
+    tags: [...tags],
+    customFields: customFields as Prisma.InputJsonValue,
+    notes: notes.filter(Boolean).join('\n') || null,
+  };
+}
+
+async function personIdTables(prisma: PrismaClient | Prisma.TransactionClient) {
+  const rows = await prisma.$queryRaw<{ table_name: string }[]>`
+    SELECT table_name
+    FROM information_schema.columns
+    WHERE table_schema = 'public' AND column_name = 'personId'
+  `;
+  return rows
+    .map((row) => row.table_name)
+    .filter((name) => /^[A-Za-z0-9_]+$/.test(name) && name !== 'Person');
+}
+
+async function moveLinks(
+  tx: Prisma.TransactionClient,
+  tables: string[],
+  keeperId: string,
+  dupId: string,
+) {
+  await tx.$executeRaw`
+    DELETE FROM "PersonGroupLink" AS d
+    USING "PersonGroupLink" AS k
+    WHERE d."personId" = ${dupId}
+      AND k."personId" = ${keeperId}
+      AND d."groupId" = k."groupId"
+  `;
+  await tx.$executeRaw`
+    DELETE FROM "PersonAccountingLink" AS d
+    USING "PersonAccountingLink" AS k
+    WHERE d."personId" = ${dupId}
+      AND k."personId" = ${keeperId}
+      AND d."connectionId" = k."connectionId"
+  `;
+  await tx.$executeRaw`
+    DELETE FROM "PartyOpeningBalance"
+    WHERE "personId" = ${dupId}
+      AND EXISTS (
+        SELECT 1 FROM "PartyOpeningBalance" AS k WHERE k."personId" = ${keeperId}
+      )
+  `;
+
+  for (const table of tables) {
+    await tx.$executeRawUnsafe(
+      `UPDATE "${table}" SET "personId" = $1 WHERE "personId" = $2`,
+      keeperId,
+      dupId,
+    );
+  }
+
+  await tx.$executeRaw`
+    UPDATE "Lead" SET "convertedPersonId" = ${keeperId} WHERE "convertedPersonId" = ${dupId}
+  `;
+  await tx.$executeRaw`
+    UPDATE "MontifyLink"
+    SET "entityId" = ${keeperId}
+    WHERE "entityType" = 'customer' AND "entityId" = ${dupId}
+  `;
+  await tx.$executeRaw`
+    UPDATE "Notification"
+    SET "entityId" = ${keeperId}
+    WHERE "entityType" = 'person' AND "entityId" = ${dupId}
+  `;
+  await tx.$executeRaw`
+    UPDATE "GamificationTransaction"
+    SET "entityId" = ${keeperId}
+    WHERE "entityType" = 'person' AND "entityId" = ${dupId}
+  `;
+  await tx.$executeRaw`
+    UPDATE "FinancialAuditLog"
+    SET "entityId" = ${keeperId}
+    WHERE "entityType" = 'person' AND "entityId" = ${dupId}
+  `;
+}
+
+export async function mergeSameMobilePeople(
+  prisma: PrismaClient,
+  organizationId: string,
+  apply: boolean,
+) {
+  const people = await prisma.person.findMany({
+    where: { organizationId },
+    select: personSelect,
+    orderBy: { createdAt: 'asc' },
+  });
+  const groups = new Map<string, PersonRow[]>();
+  for (const person of people) {
+    const key = canonicalIranMobile(person.mobile) ?? canonicalIranMobile(person.phone);
+    if (!key) continue;
+    const list = groups.get(key) ?? [];
+    list.push(person);
+    groups.set(key, list);
+  }
+
+  const duplicateGroups = [...groups.entries()].filter(([, list]) => list.length > 1);
+  const preview = duplicateGroups.map(([mobile, list]) => ({
+    mobile,
+    people: list.map((person) => ({
+      id: person.id,
+      stored: person.mobile,
+      name: `${person.firstName} ${person.lastName}`.trim(),
+    })),
+  }));
+
+  if (!apply) {
+    const needsRewrite = people.filter((person) => {
+      const canon = canonicalIranMobile(person.mobile) ?? canonicalIranMobile(person.phone);
+      return Boolean(canon && (person.mobile !== canon || canonicalIranMobile(person.phone)));
+    }).length;
+    return { merged: 0, rewritten: 0, needsRewrite, failed: 0, groups: preview };
+  }
+
+  const tables = await personIdTables(prisma);
+  let merged = 0;
+  let rewritten = 0;
+  let failed = 0;
+
+  for (const [canon, list] of groups) {
+    const ordered = [...list].sort((a, b) => {
+      const aTahesab = a.importSource === 'tahesab' ? 0 : 1;
+      const bTahesab = b.importSource === 'tahesab' ? 0 : 1;
+      if (aTahesab !== bTahesab) return aTahesab - bTahesab;
+      return a.createdAt.getTime() - b.createdAt.getTime() || a.id.localeCompare(b.id);
+    });
+    const [keeper, ...extras] = ordered;
+    if (!keeper) continue;
+    if (!extras.length) {
+      const phoneCanon = canonicalIranMobile(keeper.phone);
+      const data: Prisma.PersonUpdateInput = {};
+      if (keeper.mobile !== canon) data.mobile = canon;
+      if (phoneCanon && keeper.phone !== phoneCanon) data.phone = phoneCanon;
+      if (Object.keys(data).length) {
+        await prisma.person.update({ where: { id: keeper.id }, data });
+        rewritten += 1;
+      }
+      continue;
+    }
+
+    try {
+      await prisma.$transaction(
+        async (tx) => {
+          await tx.person.update({
+            where: { id: keeper.id },
+            data: mergedFields(keeper, extras, canon),
+          });
+          for (const extra of extras) {
+            await moveLinks(tx, tables, keeper.id, extra.id);
+            await tx.person.delete({ where: { id: extra.id } });
+            merged += 1;
+          }
+        },
+        { timeout: 60_000 },
+      );
+    } catch (error) {
+      failed += 1;
+      console.error(
+        `merge mobile ${canon} failed`,
+        error instanceof Error ? error.message : error,
+      );
+    }
+  }
+
+  return { merged, rewritten, needsRewrite: 0, failed, groups: preview };
+}
+
+function loadEnv(file: string) {
+  const text = readFileSync(file, 'utf8');
+  for (const line of text.split(/\r?\n/)) {
+    const match = line.match(/^([A-Za-z0-9_]+)=(.*)$/);
+    if (!match || process.env[match[1]]) continue;
+    let value = match[2].trim();
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    process.env[match[1]] = value;
+  }
+}
+
+const direct = process.argv[1]?.replace(/\\/g, '/').includes('merge-same-mobile');
+if (direct) {
+  loadEnv(resolve(__dirname, '../../.env'));
+  const orgId = process.argv.find((arg) => arg.startsWith('--org='))?.slice(6);
+  const apply = process.argv.includes('--apply');
+  if (!orgId) {
+    console.error('org id required: --org=<id>');
+    process.exit(1);
+  }
+  const prisma = new PrismaClient();
+  mergeSameMobilePeople(prisma, orgId, apply)
+    .then((result) => {
+      console.log(JSON.stringify({
+        apply,
+        merged: result.merged,
+        rewritten: result.rewritten,
+        needsRewrite: result.needsRewrite,
+        groupCount: result.groups.length,
+        groups: result.groups,
+      }, null, 2));
+    })
+    .catch((error) => {
+      console.error(error);
+      process.exitCode = 1;
+    })
+    .finally(() => prisma.$disconnect());
+}

apps/api/src/contacts/normalize.ts

@@ -27,3 +27,36 @@ export function normalizePhone(value?: string | null): string | null {
   const cleaned = latinDigits(v).replace(/[^\d+]/g, '');
   return cleaned.length ? cleaned : null;
 }
+
+/** موبایل ایران به شکل 09xxxxxxxxx. 912… و 98912… و +98912… همان شماره‌اند. */
+export function canonicalIranMobile(value?: string | null): string | null {
+  const n = normalizePhone(value);
+  if (!n) return null;
+  let d = n.replace(/\D/g, '');
+  if (!d) return null;
+  if (d.startsWith('0098') && d.length >= 14) d = d.slice(4);
+  else if (d.startsWith('98') && d.length >= 12) d = d.slice(2);
+  if (d.length === 10 && d.startsWith('9')) d = `0${d}`;
+  return /^09\d{9}$/.test(d) ? d : null;
+}
+
+/** شکل‌هایی که ممکن است همین موبایل با آن‌ها ذخیره شده باشد. */
+export function iranMobileLookupKeys(value?: string | null): string[] {
+  const canon = canonicalIranMobile(value);
+  if (!canon) return [];
+  const core = canon.slice(1);
+  return [canon, core, `98${core}`, `+98${core}`, `0098${core}`];
+}
+
+/** برای تطبیق: اگر موبایل ایران است همه شکل‌ها، وگرنه همان متن نرمال‌شده. */
+export function phoneIdentityKeys(value?: string | null): string[] {
+  const keys = iranMobileLookupKeys(value);
+  if (keys.length) return keys;
+  const n = normalizePhone(value);
+  return n ? [n] : [];
+}
+
+/** ذخیره: موبایل ایران همیشه 09… ؛ بقیه شماره‌ها فقط تمیز می‌شوند. */
+export function storedPhoneNumber(value?: string | null): string | null {
+  return canonicalIranMobile(value) ?? normalizePhone(value);
+}

apps/api/src/contacts/people.service.ts

@@ -28,7 +28,12 @@ import { Prisma } from '@prisma/client';
 import { PrismaService } from '../prisma/prisma.service';
 import { OutboundSmsLogService } from '../outbound-sms/outbound-sms-log.service';
 import { CompaniesService } from './companies.service';
-import { emptyToNull, normalizeEmail, normalizePhone } from './normalize';
+import {
+  emptyToNull,
+  normalizeEmail,
+  phoneIdentityKeys,
+  storedPhoneNumber,
+} from './normalize';
 import {
   asAddresses,
   asCustomFields,
@@ -399,7 +404,10 @@ export class PeopleService implements OnModuleInit {
     input: { mobile?: string | null; email?: string | null; birthDate: Date },
   ) {
     const or: Prisma.PersonWhereInput[] = [];
-    if (input.mobile) or.push({ mobile: input.mobile });
+    const mobileKeys = phoneIdentityKeys(input.mobile);
+    if (mobileKeys.length) {
+      or.push({ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } });
+    }
     if (input.email) or.push({ email: input.email });
     if (!or.length) return;
     await this.prisma.person.updateMany({
@@ -441,8 +449,8 @@ export class PeopleService implements OnModuleInit {
       importSource: normalizePersonImportSource(dto.importSource),
       sourceRef: emptyToNull(dto.sourceRef),
       email: normalizeEmail(dto.email),
-      phone: normalizePhone(dto.phone),
-      mobile: normalizePhone(dto.mobile),
+      phone: storedPhoneNumber(dto.phone),
+      mobile: storedPhoneNumber(dto.mobile),
       position: emptyToNull(dto.position),
       website: emptyToNull(dto.website),
       instagram: emptyToNull(dto.instagram),
@@ -553,8 +561,8 @@ export class PeopleService implements OnModuleInit {
     }
     if ('sourceRef' in dto) data.sourceRef = emptyToNull(dto.sourceRef);
     if ('email' in dto) data.email = normalizeEmail(dto.email);
-    if ('phone' in dto) data.phone = normalizePhone(dto.phone);
-    if ('mobile' in dto) data.mobile = normalizePhone(dto.mobile);
+    if ('phone' in dto) data.phone = storedPhoneNumber(dto.phone);
+    if ('mobile' in dto) data.mobile = storedPhoneNumber(dto.mobile);
     if ('position' in dto) data.position = emptyToNull(dto.position);
     if ('website' in dto) data.website = emptyToNull(dto.website);
     if ('instagram' in dto) data.instagram = emptyToNull(dto.instagram);
@@ -641,10 +649,13 @@ export class PeopleService implements OnModuleInit {
   ) {
     const email = typeof data.email === 'string' ? data.email : null;
     const mobile = typeof data.mobile === 'string' ? data.mobile : null;
+    const mobileKeys = phoneIdentityKeys(mobile);
 
     const or: Prisma.PersonWhereInput[] = [];
     if (email) or.push({ email });
-    if (mobile) or.push({ mobile });
+    if (mobileKeys.length) {
+      or.push({ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } });
+    }
     if (!or.length) return;
 
     const clash = await this.prisma.person.findFirst({

apps/api/src/contacts/same-mobile-merge.service.ts

@@ -0,0 +1,85 @@
+import { Injectable, Logger, type OnApplicationBootstrap } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { mergeSameMobilePeople } from './merge-same-mobile';
+
+const FIX_KEY = 'person-mobile-canonical-v3';
+
+@Injectable()
+export class SameMobileMergeService implements OnApplicationBootstrap {
+  private readonly logger = new Logger(SameMobileMergeService.name);
+
+  constructor(private readonly prisma: PrismaService) {}
+
+  onApplicationBootstrap() {
+    if (process.env.NODE_ENV === 'test') return;
+    void this.run();
+  }
+
+  private async run() {
+    try {
+      const ready = await this.prisma.$queryRaw<{ ok: number }[]>`
+        SELECT 1 AS ok
+        FROM information_schema.columns
+        WHERE table_schema = 'public'
+          AND lower(table_name) = 'person'
+          AND lower(column_name) = 'gender'
+      `;
+      if (!ready.length) {
+        this.logger.warn('یکسان‌سازی موبایل رد شد: ستون gender هنوز نیست');
+        return;
+      }
+
+      await this.prisma.$executeRaw`
+        CREATE TABLE IF NOT EXISTS "DataFix" (
+          "key" TEXT PRIMARY KEY,
+          "doneAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP
+        )
+      `;
+
+      const done = await this.prisma.$queryRaw<{ key: string }[]>`
+        SELECT "key" FROM "DataFix" WHERE "key" = ${FIX_KEY}
+      `;
+      if (done.length) return;
+
+      await this.prisma.$executeRaw`SELECT pg_advisory_lock(86051205)`;
+      try {
+        const again = await this.prisma.$queryRaw<{ key: string }[]>`
+          SELECT "key" FROM "DataFix" WHERE "key" = ${FIX_KEY}
+        `;
+        if (again.length) return;
+
+        const orgs = await this.prisma.organization.findMany({ select: { id: true } });
+        let merged = 0;
+        let rewritten = 0;
+        let failed = 0;
+        for (const org of orgs) {
+          try {
+            const result = await mergeSameMobilePeople(this.prisma, org.id, true);
+            merged += result.merged;
+            rewritten += result.rewritten;
+            failed += result.failed;
+          } catch (error) {
+            failed += 1;
+            this.logger.error(
+              `یکسان‌سازی موبایل برای محیط ${org.id} انجام نشد`,
+              error instanceof Error ? error.message : String(error),
+            );
+          }
+        }
+        if (failed) return;
+        await this.prisma.$executeRaw`
+          INSERT INTO "DataFix" ("key") VALUES (${FIX_KEY})
+          ON CONFLICT ("key") DO NOTHING
+        `;
+        this.logger.log(`شماره‌های تکراری یکی شد: ${merged} ادغام، ${rewritten} بازنویسی`);
+      } finally {
+        await this.prisma.$executeRaw`SELECT pg_advisory_unlock(86051205)`;
+      }
+    } catch (error) {
+      this.logger.error(
+        'یکسان‌سازی موبایل مشتری‌ها انجام نشد',
+        error instanceof Error ? error.stack : String(error),
+      );
+    }
+  }
+}

apps/api/src/integrations/montify/sync.service.ts

@@ -17,7 +17,11 @@ import type {
 } from '@mento/shared';
 import { parseBirthDate } from '../../common/excel';
 import { PrismaService } from '../../prisma/prisma.service';
-import { normalizeEmail, normalizePhone } from '../../contacts/normalize';
+import {
+  normalizeEmail,
+  phoneIdentityKeys,
+  storedPhoneNumber,
+} from '../../contacts/normalize';
 import { carryPreviousSource } from '../../contacts/person-source';
 import { ownerWhere, type Actor } from '../../common/record-scope';
 import { MontifyConnectionsService } from './connections.service';
@@ -100,13 +104,7 @@ function arr(v: unknown): unknown[] {
 }
 
 function mobileVariants(mobile: string): string[] {
-  const digits = mobile.replace(/\D/g, '');
-  let core = digits;
-  if (core.startsWith('0098')) core = core.slice(4);
-  else if (core.startsWith('98') && core.length === 12) core = core.slice(2);
-  else if (core.startsWith('0')) core = core.slice(1);
-  if (!core) return [mobile];
-  return [...new Set([mobile, core, `0${core}`, `98${core}`, `+98${core}`])];
+  return phoneIdentityKeys(mobile);
 }
 
 function formatAddress(a: MontifyAddress): string | null {
@@ -417,7 +415,7 @@ export class MontifySyncService {
   }> {
     const externalId = String(c.id);
     const { firstName, lastName } = splitName(c);
-    const mobile = normalizePhone(c.phone ?? null);
+    const mobile = storedPhoneNumber(c.phone ?? null);
     const email = normalizeEmail(c.email ?? null);
     const addressLines = addresses.map(formatAddress).filter((a): a is string => Boolean(a));
     const profile: CustomerProfile = {

apps/api/src/integrations/tahesab/connections.service.ts

@@ -43,6 +43,10 @@ export class TahesabConnectionsService {
     lastHealthAt: Date | null;
     lastHealthOk: boolean | null;
     lastError: string | null;
+    customerSyncHours: number[];
+    customerSyncLastRunAt: Date | null;
+    customerSyncLastSummary: string | null;
+    customerSyncLastError: string | null;
     createdAt: Date;
     updatedAt: Date;
   }) {
@@ -60,6 +64,10 @@ export class TahesabConnectionsService {
       lastHealthAt: row.lastHealthAt?.toISOString() ?? null,
       lastHealthOk: row.lastHealthOk,
       lastError: row.lastError,
+      customerSyncHours: [...row.customerSyncHours].sort((a, b) => a - b),
+      customerSyncLastRunAt: row.customerSyncLastRunAt?.toISOString() ?? null,
+      customerSyncLastSummary: row.customerSyncLastSummary,
+      customerSyncLastError: row.customerSyncLastError,
       createdAt: row.createdAt.toISOString(),
       updatedAt: row.updatedAt.toISOString(),
     };
@@ -201,6 +209,15 @@ export class TahesabConnectionsService {
 
     if (dto.isDefault === true) await this.clearOtherDefaults(organizationId, id);
 
+    let customerSyncHours: number[] | undefined;
+    if (dto.customerSyncHours !== undefined) {
+      const hours = dto.customerSyncHours.map((hour) => Math.trunc(hour));
+      if (new Set(hours).size !== hours.length) {
+        throw new BadRequestException('ساعت‌های بروزرسانی نباید تکراری باشند.');
+      }
+      customerSyncHours = [...hours].sort((a, b) => a - b);
+    }
+
     let enc = {
       ciphertext: row.tokenCiphertext,
       iv: row.tokenIv,
@@ -225,6 +242,7 @@ export class TahesabConnectionsService {
         enabled: dto.enabled ?? row.enabled,
         isDefault: dto.isDefault === true ? true : dto.isDefault === false ? false : row.isDefault,
         allowInsecureTls: dto.allowInsecureTls ?? row.allowInsecureTls,
+        ...(customerSyncHours !== undefined ? { customerSyncHours } : {}),
       },
     });
     return this.toDto(updated);

apps/api/src/integrations/tahesab/customer-sync.scheduler.ts

@@ -0,0 +1,99 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { Cron } from '@nestjs/schedule';
+import { PrismaService } from '../../prisma/prisma.service';
+import { TahesabPersonLinkService } from './person-link.service';
+
+/** ساعت و تاریخ امروز به وقت تهران، برای نوبت یک‌بار در هر ساعت. */
+export function tehranSyncSlot(now = new Date()): { hour: number; slot: string } {
+  const parts = new Intl.DateTimeFormat('en-GB', {
+    timeZone: 'Asia/Tehran',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    hourCycle: 'h23',
+  }).formatToParts(now);
+  const read = (type: Intl.DateTimeFormatPartTypes) =>
+    parts.find((part) => part.type === type)?.value ?? '';
+  let hour = Number(read('hour'));
+  if (!Number.isFinite(hour) || hour === 24) hour = 0;
+  const slot = `${read('year')}-${read('month')}-${read('day')}-${String(hour).padStart(2, '0')}`;
+  return { hour, slot };
+}
+
+@Injectable()
+export class TahesabCustomerSyncScheduler {
+  private readonly logger = new Logger(TahesabCustomerSyncScheduler.name);
+  private busy = false;
+
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly links: TahesabPersonLinkService,
+  ) {}
+
+  @Cron('* * * * *', { timeZone: 'Asia/Tehran' })
+  async tick() {
+    if (process.env.NODE_ENV === 'test' || this.busy) return;
+    this.busy = true;
+    try {
+      const { hour, slot } = tehranSyncSlot();
+      const connections = await this.prisma.accountingConnection.findMany({
+        where: {
+          provider: 'tahesab',
+          enabled: true,
+          customerSyncHours: { has: hour },
+        },
+        select: { id: true, organizationId: true, label: true, customerSyncLastSlot: true },
+      });
+      for (const connection of connections) {
+        if (connection.customerSyncLastSlot === slot) continue;
+        const claimed = await this.prisma.accountingConnection.updateMany({
+          where: {
+            id: connection.id,
+            OR: [
+              { customerSyncLastSlot: null },
+              { customerSyncLastSlot: { not: slot } },
+            ],
+          },
+          data: { customerSyncLastSlot: slot },
+        });
+        if (claimed.count !== 1) continue;
+        await this.run(connection.organizationId, connection.id, connection.label);
+      }
+    } catch (err) {
+      this.logger.warn(
+        `بررسی زمان‌بندی مشتریان ته‌حساب ناموفق بود: ${
+          err instanceof Error ? err.message : err
+        }`,
+      );
+    } finally {
+      this.busy = false;
+    }
+  }
+
+  private async run(organizationId: string, connectionId: string, label: string) {
+    try {
+      const result = await this.links.syncAllCustomers(organizationId, connectionId);
+      await this.prisma.accountingConnection.update({
+        where: { id: connectionId },
+        data: {
+          customerSyncLastRunAt: new Date(),
+          customerSyncLastSummary: result.summary,
+          customerSyncLastError: result.error,
+        },
+      });
+      this.logger.log(`بروزرسانی خودکار «${label}»: ${result.summary}`);
+    } catch (err) {
+      const message = (err instanceof Error ? err.message : 'همگام‌سازی ناموفق بود').slice(0, 500);
+      await this.prisma.accountingConnection.update({
+        where: { id: connectionId },
+        data: {
+          customerSyncLastRunAt: new Date(),
+          customerSyncLastSummary: null,
+          customerSyncLastError: message,
+        },
+      });
+      this.logger.warn(`بروزرسانی خودکار «${label}» ناموفق بود: ${message}`);
+    }
+  }
+}

apps/api/src/integrations/tahesab/dto.ts

@@ -86,6 +86,16 @@ export class UpdateTahesabConnectionDto {
   @IsOptional()
   @IsBoolean()
   allowInsecureTls?: boolean;
+
+  /** ساعت‌های ۰ تا ۲۳. آرایهٔ خالی یعنی خاموش. */
+  @IsOptional()
+  @IsArray()
+  @ArrayMaxSize(6)
+  @Type(() => Number)
+  @IsInt({ each: true })
+  @Min(0, { each: true })
+  @Max(23, { each: true })
+  customerSyncHours?: number[];
 }
 
 export class ManualLinkDto {

apps/api/src/integrations/tahesab/person-link.service.ts

@@ -8,7 +8,12 @@ import {
 } from '@nestjs/common';
 import { Prisma } from '@prisma/client';
 import { PrismaService } from '../../prisma/prisma.service';
-import { carryPreviousSource } from '../../contacts/person-source';
+import { carryPreviousSource, namesDiffer } from '../../contacts/person-source';
+import {
+  canonicalIranMobile,
+  phoneIdentityKeys,
+  storedPhoneNumber,
+} from '../../contacts/normalize';
 import { applyPersonGenderTitle } from '@mento/shared';
 import { TahesabConnectionsService } from './connections.service';
 import {
@@ -25,6 +30,20 @@ import { formatJalaliDate, parseBirthDate } from '../../common/excel';
 import { CustomerGroupsService } from '../../customer-groups/customer-groups.service';
 import { normalizeIranMobile, SanadBuilders, type TahesabApi } from './tahesab-methods';
 
+/** موبایل ته‌حساب را به شکل 0912… ذخیره می‌کند، حتی اگر قبلاً 912… یا +98912… بوده باشد. */
+function canonicalMobileUpdate(
+  incoming: string | null,
+  current: { mobile: string | null; phone: string | null },
+): { mobile?: string; phone?: string } {
+  const mobile =
+    canonicalIranMobile(incoming) ??
+    canonicalIranMobile(current.mobile) ??
+    canonicalIranMobile(current.phone);
+  if (!mobile) return {};
+  const phone = canonicalIranMobile(current.phone);
+  return phone ? { mobile, phone } : { mobile };
+}
+
 /** اندازهٔ هر صفحهٔ «همه» (بازهٔ کد) — امن برای پروکسی/nginx */
 const LIST_PAGE_SIZE = 2000;
 const LIST_TIMEOUT_MS = 55_000;
@@ -539,6 +558,7 @@ export class TahesabPersonLinkService {
     organizationId: string,
     dto: ImportFromTahesabDto,
     prefetched?: { api: TahesabApi; row?: Record<string, unknown> },
+    options?: { skipJob?: boolean },
   ) {
     const clash = await this.prisma.personAccountingLink.findFirst({
       where: {
@@ -577,10 +597,11 @@ export class TahesabPersonLinkService {
     const named = applyPersonGenderTitle({ firstName: name, lastName: '' });
     const firstName = named.firstName;
     const lastName = named.lastName;
-    const mobile = tel || null;
+    const mobile = storedPhoneNumber(tel);
     const sourceRef = String(dto.moshtariCode);
 
     let personId = dto.personId;
+    let preserveExistingLink = false;
     if (personId) {
       const existing = await this.getPerson(organizationId, personId);
       const prevFirst = existing.firstName;
@@ -604,28 +625,33 @@ export class TahesabPersonLinkService {
           importSource: 'tahesab',
           sourceRef,
           ...(!existing.birthDate && pickBirthDate(row) ? { birthDate: pickBirthDate(row) } : {}),
-          ...(mobile
-            ? {
-                mobile: existing.mobile || mobile,
-                phone: existing.phone || mobile,
-              }
-            : {}),
+          ...canonicalMobileUpdate(mobile, existing),
         },
       });
     } else {
       // اگر موبایل تکراری است → همان شخص؛ نام قبلی حفظ و نام ته‌حساب جایگزین.
-      // شخصی که روی همین اتصال به کد دیگری لینک است کنار گذاشته می‌شود؛
-      // وگرنه upsert لینک، کد قبلی را جابه‌جا و آن مشتری را دوباره «واردنشده» می‌کند.
-      const byMobile = mobile
-        ? await this.prisma.person.findFirst({
+      // اگر همان شخص قبلاً به کد دیگری از این اتصال لینک شده، لینک جابه‌جا نمی‌شود
+      // تا کد قبلی دوباره «واردنشده» نشود و مشتری تکراری ساخته نشود.
+      const mobileKeys = phoneIdentityKeys(mobile);
+      const matches = mobileKeys.length
+        ? await this.prisma.person.findMany({
             where: {
               organizationId,
-              OR: [{ mobile }, { phone: mobile }],
-              accountingLinks: { none: { connectionId: dto.connectionId } },
+              OR: [{ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } }],
             },
+            include: {
+              accountingLinks: {
+                where: { connectionId: dto.connectionId },
+                select: { moshtariCode: true },
+              },
+            },
+            orderBy: { createdAt: 'asc' },
           })
-        : null;
+        : [];
+      const byMobile = matches.find((person) => person.importSource === 'tahesab') ?? matches[0] ?? null;
       if (byMobile) {
+        const linkedCode = byMobile.accountingLinks[0]?.moshtariCode;
+        preserveExistingLink = linkedCode != null && linkedCode !== dto.moshtariCode;
         const nameChanged =
           `${byMobile.firstName} ${byMobile.lastName}`.trim() !==
           `${firstName} ${lastName}`.trim();
@@ -644,8 +670,9 @@ export class TahesabPersonLinkService {
               : {}),
             ...carryPreviousSource(byMobile, 'tahesab'),
             importSource: 'tahesab',
-            sourceRef,
+            sourceRef: preserveExistingLink ? String(linkedCode) : sourceRef,
             ...(!byMobile.birthDate && pickBirthDate(row) ? { birthDate: pickBirthDate(row) } : {}),
+            ...canonicalMobileUpdate(mobile, byMobile),
           },
         });
         personId = byMobile.id;
@@ -669,6 +696,32 @@ export class TahesabPersonLinkService {
       }
     }
 
+    if (preserveExistingLink) {
+      await this.applyTahesabGroup(organizationId, dto.connectionId, personId, row);
+      const existing = await this.prisma.personAccountingLink.findFirst({
+        where: { personId, connectionId: dto.connectionId },
+        include: {
+          connection: { select: { label: true, dbName: true, isDefault: true } },
+        },
+      });
+      if (!existing) {
+        throw new NotFoundException('لینک ته‌حساب این مشتری یافت نشد.');
+      }
+      if (!options?.skipJob) {
+        await this.prisma.accountingSyncJob.create({
+          data: {
+            organizationId,
+            connectionId: dto.connectionId,
+            kind: 'import',
+            status: 'success',
+            request: dto as unknown as Prisma.InputJsonValue,
+            result: { personId, linkId: existing.id, keptLink: true } as Prisma.InputJsonValue,
+          },
+        });
+      }
+      return { personId, link: this.linkDto(existing) };
+    }
+
     const link = await this.prisma.personAccountingLink.upsert({
       where: {
         personId_connectionId: {
@@ -693,18 +746,169 @@ export class TahesabPersonLinkService {
     });
     await this.applyTahesabGroup(organizationId, dto.connectionId, personId, row);
 
+    if (!options?.skipJob) {
+      await this.prisma.accountingSyncJob.create({
+        data: {
+          organizationId,
+          connectionId: dto.connectionId,
+          kind: 'import',
+          status: 'success',
+          request: dto as unknown as Prisma.InputJsonValue,
+          result: { personId, linkId: link.id } as Prisma.InputJsonValue,
+        },
+      });
+    }
+
+    return { personId, link: this.linkDto(link) };
+  }
+
+  /** نام، موبایل و گروه مشتریِ از قبل لینک‌شده را با ردیف ته‌حساب تازه می‌کند. */
+  private async refreshLinkedCustomer(
+    organizationId: string,
+    connectionId: string,
+    personId: string,
+    moshtariCode: number,
+    row: Record<string, unknown>,
+  ) {
+    const existing = await this.getPerson(organizationId, personId);
+    const picked = pickName(row).trim();
+    const named = picked
+      ? applyPersonGenderTitle({ firstName: picked, lastName: '' })
+      : null;
+    const nameChanged =
+      named != null &&
+      namesDiffer(
+        existing.firstName,
+        existing.lastName,
+        named.firstName,
+        named.lastName,
+      );
+    await this.prisma.person.update({
+      where: { id: personId },
+      data: {
+        ...(named
+          ? {
+              firstName: named.firstName,
+              lastName: named.lastName,
+              gender: named.gender,
+              showGenderInName: named.showGenderInName,
+            }
+          : {}),
+        ...(nameChanged
+          ? {
+              previousFirstName: existing.firstName || null,
+              previousLastName: existing.lastName || null,
+            }
+          : {}),
+        ...carryPreviousSource(existing, 'tahesab'),
+        importSource: 'tahesab',
+        sourceRef: String(moshtariCode),
+        ...(!existing.birthDate && pickBirthDate(row)
+          ? { birthDate: pickBirthDate(row) }
+          : {}),
+        ...canonicalMobileUpdate(storedPhoneNumber(pickTel(row)), existing),
+      },
+    });
+    await this.applyTahesabGroup(organizationId, connectionId, personId, row);
+  }
+
+  /**
+   * همهٔ مشتریان ته‌حساب را صفحه به صفحه می‌خواند.
+   * کد تازه وارد می‌شود؛ کد لینک‌شده نام و شماره و گروهش تازه می‌شود.
+   */
+  async syncAllCustomers(organizationId: string, connectionId: string) {
+    const { api } = await this.connections.getApi(organizationId, connectionId);
+    let page = 1;
+    let emptyStreak = 0;
+    let imported = 0;
+    let updated = 0;
+    let failed = 0;
+    const errors: string[] = [];
+    const maxPages = 300;
+
+    while (emptyStreak < 2 && page <= maxPages) {
+      let listed: Awaited<ReturnType<typeof this.listMoshtariPage>>;
+      try {
+        listed = await this.listMoshtariPage(api, page, LIST_PAGE_SIZE);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'خواندن ته‌حساب ناموفق بود';
+        errors.push(message);
+        break;
+      }
+      if (!listed.rows.length) {
+        emptyStreak += 1;
+        page += 1;
+        continue;
+      }
+      emptyStreak = 0;
+      const rowsByCode = new Map<number, Record<string, unknown>>();
+      for (const row of listed.rows) {
+        const code = pickCode(row);
+        if (code != null && code >= 1) rowsByCode.set(code, row);
+      }
+      const links = rowsByCode.size
+        ? await this.prisma.personAccountingLink.findMany({
+            where: {
+              connectionId,
+              moshtariCode: { in: [...rowsByCode.keys()] },
+            },
+            select: { moshtariCode: true, personId: true },
+          })
+        : [];
+      const linkedByCode = new Map(links.map((link) => [link.moshtariCode, link.personId]));
+      for (const [code, row] of rowsByCode) {
+        try {
+          const personId = linkedByCode.get(code);
+          if (personId) {
+            await this.refreshLinkedCustomer(
+              organizationId,
+              connectionId,
+              personId,
+              code,
+              row,
+            );
+            updated += 1;
+          } else {
+            await this.importFromTahesab(
+              organizationId,
+              { connectionId, moshtariCode: code },
+              { api, row },
+              { skipJob: true },
+            );
+            imported += 1;
+          }
+        } catch (err) {
+          failed += 1;
+          if (errors.length < 5) {
+            errors.push(err instanceof Error ? err.message : 'خطا');
+          }
+        }
+      }
+      page += 1;
+    }
+
+    if (page > maxPages && emptyStreak < 2) {
+      errors.push('فهرست مشتریان از سقف خواندن خودکار بیشتر بود.');
+    }
+
+    const summary = `${imported} وارد شد، ${updated} به‌روز شد، ${failed} خطا`;
     await this.prisma.accountingSyncJob.create({
       data: {
         organizationId,
-        connectionId: dto.connectionId,
-        kind: 'import',
-        status: 'success',
-        request: dto as unknown as Prisma.InputJsonValue,
-        result: { personId, linkId: link.id } as Prisma.InputJsonValue,
+        connectionId,
+        kind: 'customer-sync',
+        status: !imported && !updated && (failed > 0 || errors.length > 0) ? 'error' : 'success',
+        result: { imported, updated, failed, pages: page - 1 } as Prisma.InputJsonValue,
       },
     });
-
-    return { personId, link: this.linkDto(link) };
+    this.logger.log(`همگام‌سازی مشتریان ته‌حساب ${connectionId}: ${summary}`);
+    return {
+      imported,
+      updated,
+      failed,
+      summary,
+      error: errors.length ? errors.join('؛ ') : null,
+    };
   }
 
   async importBulk(organizationId: string, dto: ImportBulkFromTahesabDto) {

apps/api/src/integrations/tahesab/tahesab.module.ts

@@ -12,6 +12,7 @@ import { TahesabBalanceService } from './balance.service';
 import { TahesabDocumentsService } from './documents.service';
 import { TahesabAsnadReportService } from './asnad-report.service';
 import { TahesabInvoiceSettingsService } from './invoice-settings.service';
+import { TahesabCustomerSyncScheduler } from './customer-sync.scheduler';
 import { TahesabController } from './tahesab.controller';
 import { CustomerGroupsModule } from '../../customer-groups/customer-groups.module';
 
@@ -29,6 +30,7 @@ import { CustomerGroupsModule } from '../../customer-groups/customer-groups.modu
     TahesabDocumentsService,
     TahesabAsnadReportService,
     TahesabInvoiceSettingsService,
+    TahesabCustomerSyncScheduler,
   ],
   exports: [
     TahesabCryptoService,

apps/api/src/integrations/voip/calls.service.ts

@@ -11,7 +11,7 @@ import type {
 } from '@mento/shared';
 import { PrismaService } from '../../prisma/prisma.service';
 import { NotificationsService } from '../../notifications/notifications.service';
-import { normalizePhone } from '../../contacts/normalize';
+import { iranMobileLookupKeys, normalizePhone } from '../../contacts/normalize';
 import { VoipConnectionsService } from './connections.service';
 
 function digitsOnly(value: string | null | undefined): string {
@@ -35,6 +35,7 @@ function phoneVariants(raw: string | null | undefined): string[] {
     variants.add(`0${d}`);
     variants.add(`98${d}`);
   }
+  for (const key of iranMobileLookupKeys(raw)) variants.add(key);
   return [...variants];
 }
 

apps/api/src/integrations/woocommerce/sync.service.ts

@@ -6,7 +6,11 @@ import type {
   WooCommerceSyncResultDto,
 } from '@mento/shared';
 import { PrismaService } from '../../prisma/prisma.service';
-import { normalizeEmail, normalizePhone } from '../../contacts/normalize';
+import {
+  normalizeEmail,
+  phoneIdentityKeys,
+  storedPhoneNumber,
+} from '../../contacts/normalize';
 import { WooConnectionsService } from './connections.service';
 import type { WooOrder } from './woo-client';
 
@@ -374,7 +378,8 @@ export class WooSyncService {
   ): Promise<string | null> {
     const billing = order.billing ?? {};
     const email = normalizeEmail(billing.email ?? null);
-    const mobile = normalizePhone(billing.phone ?? null);
+    const mobile = storedPhoneNumber(billing.phone ?? null);
+    const mobileKeys = phoneIdentityKeys(mobile);
     const firstName = (billing.first_name ?? '').trim() || 'مشتری';
     const lastName = (billing.last_name ?? '').trim() || 'ووکامرس';
 
@@ -387,7 +392,9 @@ export class WooSyncService {
         organizationId,
         OR: [
           ...(email ? [{ email }] : []),
-          ...(mobile ? [{ mobile }, { phone: mobile }] : []),
+          ...(mobileKeys.length
+            ? [{ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } }]
+            : []),
         ],
       },
       select: { id: true },

apps/api/src/lead-forms/lead-forms.service.ts

@@ -21,9 +21,12 @@ import { StorageQuotaService } from '../billing/storage-quota.service';
 import { AutomationsService } from '../automations/automations.service';
 import { MessageAutomationsService } from '../message-automations/message-automations.service';
 import {
+  canonicalIranMobile,
   emptyToNull,
   normalizeEmail,
   normalizePhone,
+  phoneIdentityKeys,
+  storedPhoneNumber,
 } from '../contacts/normalize';
 import { LeadStagesService } from '../leads/lead-stages.service';
 
@@ -458,7 +461,10 @@ export class LeadFormsService {
       ? await this.prisma.person.findFirst({
           where: {
             organizationId: form.organizationId,
-            OR: [{ mobile }, { phone: mobile }],
+            OR: [
+              { mobile: { in: phoneIdentityKeys(mobile) } },
+              { phone: { in: phoneIdentityKeys(mobile) } },
+            ],
           },
           select: { id: true, firstName: true, lastName: true },
         })
@@ -641,13 +647,16 @@ export class LeadFormsService {
     ownerId: string,
   ): Promise<string> {
     const email = normalizeEmail(mapped.email);
-    const mobile = normalizePhone(mapped.mobile);
-    const phone = normalizePhone(mapped.phone);
+    const mobile = storedPhoneNumber(mapped.mobile);
+    const phone = storedPhoneNumber(mapped.phone);
 
     const or: Prisma.PersonWhereInput[] = [];
     if (email) or.push({ email });
-    if (mobile) or.push({ mobile });
 
+    const mobileKeys = phoneIdentityKeys(mobile);
+    if (mobileKeys.length) {
+      or.push({ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } });
+    }
     const existing = or.length
       ? await this.prisma.person.findFirst({
           where: { organizationId, OR: or },
@@ -1115,13 +1124,12 @@ function slugKey(label: string): string {
 }
 
 function mobileKey(raw: string | null | undefined): string | null {
+  const canon = canonicalIranMobile(raw);
+  if (canon) return canon;
   const n = normalizePhone(raw);
   if (!n) return null;
   const d = n.replace(/\D/g, '');
-  if (!d) return null;
-  if (d.startsWith('98') && d.length >= 12) return `0${d.slice(2)}`;
-  if (d.length === 10 && d.startsWith('9')) return `0${d}`;
-  return d.startsWith('0') ? d : d;
+  return d || null;
 }
 
 function normalizeDuplicateMode(raw?: string | null): string {

apps/api/src/leads/leads.service.ts

@@ -32,12 +32,18 @@ import {
   forScope,
 } from '../common/record-scope';
 import { actorCanAssignToOthers, assertAssigneeSet } from '../common/assign-access';
+import { placeId, sameIds, writePositions } from '../common/column-order';
 import {
   asAddresses,
   collectAddresses,
   toJsonAddresses,
 } from '../common/custom-fields';
-import { emptyToNull, normalizePhone } from '../contacts/normalize';
+import {
+  canonicalIranMobile,
+  emptyToNull,
+  normalizePhone,
+  phoneIdentityKeys,
+} from '../contacts/normalize';
 import { LocalFileStorage } from '../storage/local-file.storage';
 import { StorageQuotaService } from '../billing/storage-quota.service';
 import { LeadStagesService } from './lead-stages.service';
@@ -54,13 +60,20 @@ const LOGO_EXT: Record<string, string> = {
 };
 
 function mobileKey(raw: string | null | undefined): string | null {
+  const canon = canonicalIranMobile(raw);
+  if (canon) return canon;
   const n = normalizePhone(raw);
   if (!n) return null;
   const d = n.replace(/\D/g, '');
-  if (!d) return null;
-  if (d.startsWith('98') && d.length >= 12) return `0${d.slice(2)}`;
-  if (d.length === 10 && d.startsWith('9')) return `0${d}`;
-  return d.startsWith('0') ? d : d;
+  return d || null;
+}
+
+function personWithMobile(organizationId: string, mobile: string): Prisma.PersonWhereInput {
+  const keys = phoneIdentityKeys(mobile);
+  return {
+    organizationId,
+    OR: [{ mobile: { in: keys } }, { phone: { in: keys } }],
+  };
 }
 
 function leadAccessWhere(actor: Actor): Prisma.LeadWhereInput {
@@ -322,10 +335,7 @@ export class LeadsService {
       };
     }
     const person = await this.prisma.person.findFirst({
-      where: {
-        organizationId: actor.organizationId,
-        OR: [{ mobile }, { phone: mobile }],
-      },
+      where: personWithMobile(actor.organizationId, mobile),
       select: { id: true, firstName: true, lastName: true },
     });
     if (person) {
@@ -613,24 +623,43 @@ export class LeadsService {
     });
     if (!stage) throw new NotFoundException('مرحله پیدا نشد');
 
+    let placedIds: string[] | null = null;
+    let nextPosition = position ?? 0;
+    if (position != null) {
+      const rows = await this.prisma.lead.findMany({
+        where: { organizationId: actor.organizationId, stageId, archivedAt: null },
+        select: { id: true },
+        orderBy: [{ position: 'asc' }, { updatedAt: 'desc' }],
+      });
+      const currentIds = rows.map((row) => row.id);
+      placedIds = placeId(currentIds, id, position);
+      nextPosition = Math.max(0, placedIds.indexOf(id));
+      if (sameIds(currentIds, placedIds)) placedIds = null;
+    }
+
     const row = await this.prisma.lead.update({
       where: { id },
       data: {
         stageId,
-        position: position ?? 0,
-        ...(stage.isConverted
-          ? {}
-          : {}),
+        position: nextPosition,
       },
       include: leadInclude,
     });
-    await this.addEvent(
-      actor,
-      id,
-      'stage_changed',
-      `به مرحله «${stage.name}» منتقل شد`,
-    );
+    if (placedIds) {
+      await writePositions(
+        (ops) => this.prisma.$transaction(ops),
+        placedIds,
+        (leadId, leadPosition) =>
+          this.prisma.lead.update({ where: { id: leadId }, data: { position: leadPosition } }),
+      );
+    }
     if (before.stageId !== stageId) {
+      await this.addEvent(
+        actor,
+        id,
+        'stage_changed',
+        `به مرحله «${stage.name}» منتقل شد`,
+      );
       this.gameEvent(actor, 'LEAD_STAGE_CHANGED', row, {
         eventKey: `${id}:${stageId}`,
         facts: { stageName: stage.name, source: row.source },
@@ -946,10 +975,7 @@ export class LeadsService {
     }
 
     let person = await this.prisma.person.findFirst({
-      where: {
-        organizationId: actor.organizationId,
-        OR: [{ mobile: lead.mobile }, { phone: lead.mobile }],
-      },
+      where: personWithMobile(actor.organizationId, lead.mobile),
     });
     let createdPerson = false;
 
@@ -976,7 +1002,7 @@ export class LeadsService {
           lastName: named.lastName,
           gender: named.gender,
           showGenderInName: named.showGenderInName,
-          mobile: lead.mobile,
+          mobile: canonicalIranMobile(lead.mobile) ?? lead.mobile,
           phone: lead.phone,
           instagram: lead.instagram,
           birthDate: lead.birthDate,
@@ -1150,6 +1176,95 @@ export class LeadsService {
     };
   }
 
+  async createFromExternal(input: {
+    organizationId: string;
+    siteName: string;
+    firstName?: string | null;
+    lastName?: string | null;
+    mobile: string;
+    storeName?: string | null;
+    source?: string | null;
+  }): Promise<{
+    ok: true;
+    created: boolean;
+    duplicate: boolean;
+    leadId: string | null;
+  }> {
+    const mobile = mobileKey(input.mobile);
+    if (!mobile || !/^09\d{9}$/.test(mobile)) {
+      throw new BadRequestException('شماره موبایل معتبر نیست');
+    }
+
+    const contactName =
+      `${input.firstName?.trim() ?? ''} ${input.lastName?.trim() ?? ''}`.trim() || null;
+    const storeName = input.storeName?.trim() ?? '';
+    const source = emptyToNull(input.source);
+    const title = storeName || contactName || mobile;
+    const siteName = input.siteName.trim() || 'سایت بیرونی';
+
+    const existing = await this.prisma.lead.findFirst({
+      where: { organizationId: input.organizationId, mobile, archivedAt: null },
+      select: { id: true, source: true, contactName: true },
+    });
+    if (existing) {
+      const patch: Prisma.LeadUpdateInput = {};
+      if (!existing.source && source) patch.source = source;
+      if (!existing.contactName && contactName) patch.contactName = contactName;
+      if (Object.keys(patch).length) {
+        await this.prisma.lead.update({ where: { id: existing.id }, data: patch });
+      }
+      await this.prisma.leadEvent.create({
+        data: {
+          organizationId: input.organizationId,
+          leadId: existing.id,
+          type: 'note',
+          title: 'درخواست دوباره از سایت',
+          body: [`سایت: ${siteName}`, source ? `منبع: ${source}` : null]
+            .filter(Boolean)
+            .join('\n'),
+        },
+      });
+      return { ok: true, created: false, duplicate: true, leadId: existing.id };
+    }
+
+    const person = await this.prisma.person.findFirst({
+      where: personWithMobile(input.organizationId, mobile),
+      select: { id: true },
+    });
+    if (person) {
+      return { ok: true, created: false, duplicate: true, leadId: null };
+    }
+
+    await this.stages.ensureDefaults(input.organizationId);
+    const stages = await this.stages.list(input.organizationId);
+    const stageId = stages[0]?.id;
+    if (!stageId) throw new BadRequestException('مرحله‌ای تعریف نشده');
+
+    const lead = await this.prisma.lead.create({
+      data: {
+        organizationId: input.organizationId,
+        title,
+        contactName,
+        mobile,
+        source,
+        notes: `ثبت از سایت: ${siteName}`,
+        stageId,
+      },
+    });
+    await this.prisma.leadEvent.create({
+      data: {
+        organizationId: input.organizationId,
+        leadId: lead.id,
+        type: 'created',
+        title: 'لید از سایت ثبت شد',
+        body: [`سایت: ${siteName}`, source ? `منبع: ${source}` : null]
+          .filter(Boolean)
+          .join('\n'),
+      },
+    });
+    return { ok: true, created: true, duplicate: false, leadId: lead.id };
+  }
+
   async createFromImportRow(
     organizationId: string,
     createdById: string | null,
@@ -1192,10 +1307,7 @@ export class LeadsService {
     }
 
     const existingPerson = await this.prisma.person.findFirst({
-      where: {
-        organizationId,
-        OR: [{ mobile }, { phone: mobile }],
-      },
+      where: personWithMobile(organizationId, mobile),
       select: { id: true },
     });
     if (existingPerson) {

apps/api/src/org-roles/dto.ts

@@ -2,6 +2,7 @@ import { Type } from 'class-transformer';
 import {
   ArrayUnique,
   IsArray,
+  IsBoolean,
   IsIn,
   IsObject,
   IsOptional,
@@ -45,6 +46,16 @@ export class CreateOrgRoleDto {
   @ValidateIf((_, v) => v !== null)
   @IsString()
   parentId?: string | null;
+
+  @IsOptional()
+  @IsArray()
+  @ArrayUnique()
+  @IsString({ each: true })
+  treasuryAccountIds?: string[];
+
+  @IsOptional()
+  @IsBoolean()
+  treasuryOwnAccounts?: boolean;
 }
 
 export class UpdateOrgRoleDto {
@@ -77,6 +88,16 @@ export class UpdateOrgRoleDto {
   @ValidateIf((_, v) => v !== null)
   @IsString()
   parentId?: string | null;
+
+  @IsOptional()
+  @IsArray()
+  @ArrayUnique()
+  @IsString({ each: true })
+  treasuryAccountIds?: string[];
+
+  @IsOptional()
+  @IsBoolean()
+  treasuryOwnAccounts?: boolean;
 }
 
 export class RolePermissionPatchItemDto {

apps/api/src/org-roles/org-roles.service.ts

@@ -32,6 +32,8 @@ type RoleRow = {
   color: string;
   permissions: string[];
   dataAccessPolicy?: unknown;
+  treasuryAccountIds?: string[];
+  treasuryOwnAccounts?: boolean;
   systemKey: string | null;
   parentId: string | null;
   createdAt: Date;
@@ -79,6 +81,8 @@ export class OrgRolesService {
       permissions?: RolePermissionKey[];
       dataAccessPolicy?: DataAccessPolicy;
       parentId?: string | null;
+      treasuryAccountIds?: string[];
+      treasuryOwnAccounts?: boolean;
     },
   ): Promise<OrgRoleDto> {
     this.assertManager(actorRole);
@@ -108,6 +112,8 @@ export class OrgRolesService {
           description: (dto.description ?? '').trim(),
           color: dto.color ?? parent?.color ?? 'teal',
           permissions,
+          treasuryAccountIds: dto.treasuryAccountIds ?? [],
+          treasuryOwnAccounts: dto.treasuryOwnAccounts ?? false,
           parentId,
           ...(dto.dataAccessPolicy
             ? { dataAccessPolicy: parseDataAccessPolicy(dto.dataAccessPolicy) }
@@ -135,6 +141,8 @@ export class OrgRolesService {
       permissions?: RolePermissionKey[];
       dataAccessPolicy?: DataAccessPolicy;
       parentId?: string | null;
+      treasuryAccountIds?: string[];
+      treasuryOwnAccounts?: boolean;
     },
   ): Promise<OrgRoleDto> {
     this.assertManager(actorRole);
@@ -159,6 +167,12 @@ export class OrgRolesService {
     if (dto.dataAccessPolicy !== undefined) {
       data.dataAccessPolicy = parseDataAccessPolicy(dto.dataAccessPolicy);
     }
+    if (dto.treasuryAccountIds !== undefined) {
+      data.treasuryAccountIds = [...new Set(dto.treasuryAccountIds.map((id) => id.trim()).filter(Boolean))];
+    }
+    if (dto.treasuryOwnAccounts !== undefined) {
+      data.treasuryOwnAccounts = dto.treasuryOwnAccounts;
+    }
 
     if (dto.parentId !== undefined) {
       const nextParentId =
@@ -426,6 +440,8 @@ export class OrgRolesService {
       color: row.color,
       permissions: sanitizePermissions(row.permissions),
       dataAccessPolicy: parseDataAccessPolicy(row.dataAccessPolicy),
+      treasuryAccountIds: row.treasuryAccountIds ?? [],
+      treasuryOwnAccounts: row.treasuryOwnAccounts ?? false,
       systemKey,
       parentId: row.parentId,
       parentName: row.parentId ? (nameById.get(row.parentId) ?? null) : null,

apps/api/src/pipelines/deals-excel.service.ts

@@ -14,7 +14,7 @@ import type { Actor } from '../common/record-scope';
 import { dealAccessWhere, resolveOwnerId } from '../common/record-scope';
 import { dealPriorWhere } from '../common/prior-archive';
 import { asCustomFields, toJsonCustomFields } from '../common/custom-fields';
-import { normalizePhone } from '../contacts/normalize';
+import { phoneIdentityKeys, storedPhoneNumber } from '../contacts/normalize';
 import {
   excelFieldsFromColumns,
   formatJalaliDate,
@@ -708,9 +708,9 @@ export class DealsExcelService {
   ): Promise<string | null> {
     const orgId = actor.organizationId;
     const code = cleanCode(row.personCode);
-    const mobile = normalizePhone(row.personMobile);
-    const mobileCore = mobile ? mobile.replace(/^\+98|^98|^0/, '') : '';
-    const validMobile = mobileCore.length >= 8 ? mobile : null;
+    const mobile = storedPhoneNumber(row.personMobile);
+    const mobileKeys = phoneIdentityKeys(mobile);
+    const validMobile = (mobile ?? '').replace(/\D/g, '').length >= 8 ? mobile : null;
     const first = (row.personFirstName ?? '').trim();
     const last = (row.personName ?? '').trim();
     const fullName = [first, last].filter(Boolean).join(' ');
@@ -731,7 +731,10 @@ export class DealsExcelService {
     }
     if (!found && validMobile) {
       found = await this.prisma.person.findFirst({
-        where: { organizationId: orgId, mobile: { contains: mobileCore } },
+        where: {
+          organizationId: orgId,
+          OR: [{ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } }],
+        },
         select: { id: true },
       });
     }

apps/api/src/pipelines/deals.service.ts

@@ -27,6 +27,7 @@ import {
   resolveOwnerId,
 } from '../common/record-scope';
 import { actorCanAssignToOthers, assertAssigneeSet } from '../common/assign-access';
+import { placeId, sameIds, writePositions } from '../common/column-order';
 
 const dealInclude = {
   person: { select: { id: true, firstName: true, lastName: true } },
@@ -379,7 +380,8 @@ export class DealsService {
     }
 
     const status = stage.isWon ? 'won' : stage.isLost ? 'lost' : 'open';
-    const position =
+    let placedIds: string[] | null = null;
+    let position =
       dto.position ??
       ((
         await this.prisma.deal.aggregate({
@@ -387,6 +389,17 @@ export class DealsService {
           _max: { position: true },
         })
       )._max.position ?? -1) + 1;
+    if (dto.position != null) {
+      const rows = await this.prisma.deal.findMany({
+        where: { organizationId, stageId: stage.id },
+        select: { id: true },
+        orderBy: [{ position: 'asc' }, { updatedAt: 'desc' }],
+      });
+      const currentIds = rows.map((row) => row.id);
+      placedIds = placeId(currentIds, deal.id, dto.position);
+      position = Math.max(0, placedIds.indexOf(deal.id));
+      if (sameIds(currentIds, placedIds)) placedIds = null;
+    }
 
     const row = await this.prisma.deal.update({
       where: { id },
@@ -402,6 +415,15 @@ export class DealsService {
       include: dealInclude,
     });
 
+    if (placedIds) {
+      await writePositions(
+        (ops) => this.prisma.$transaction(ops),
+        placedIds,
+        (dealId, nextPosition) =>
+          this.prisma.deal.update({ where: { id: dealId }, data: { position: nextPosition } }),
+      );
+    }
+
     if (deal.ownerId && deal.stageId !== stage.id) {
       await this.notifications.create({
         organizationId,

apps/api/src/portal/portal.service.ts

@@ -19,6 +19,7 @@ import type {
 } from '@mento/shared';
 import { TICKET_SLA_HOURS } from '@mento/shared';
 import { PrismaService } from '../prisma/prisma.service';
+import { canonicalIranMobile, phoneIdentityKeys } from '../contacts/normalize';
 import { SmsGatewayService } from '../sms-billing/sms-gateway.service';
 import type { PortalActor } from './portal-auth';
 
@@ -62,7 +63,7 @@ export class PortalService {
     mobileRaw: string,
   ): Promise<PortalRequestOtpResponse> {
     const org = await this.findOrg(slug);
-    const mobile = normalizeMobile(mobileRaw);
+    const mobile = canonicalIranMobile(mobileRaw) ?? normalizeMobile(mobileRaw);
     if (!mobile) {
       throw new BadRequestException('شماره موبایل معتبر نیست');
     }
@@ -123,7 +124,8 @@ export class PortalService {
     codeRaw: string,
   ): Promise<PortalLoginResponse> {
     const org = await this.findOrg(slug);
-    const mobile = normalizeMobile(mobileRaw);
+    const mobile = canonicalIranMobile(mobileRaw) ?? normalizeMobile(mobileRaw);
+    const mobileKeys = phoneIdentityKeys(mobile);
     const code = codeRaw.trim();
     if (!mobile || !code) {
       throw new BadRequestException('موبایل یا کد ناقص است');
@@ -148,10 +150,15 @@ export class PortalService {
       data: { consumedAt: new Date() },
     });
 
-    let person = await this.prisma.person.findFirst({
-      where: { organizationId: org.id, mobile },
-      orderBy: { createdAt: 'asc' },
-    });
+    let person = mobileKeys.length
+      ? await this.prisma.person.findFirst({
+          where: {
+            organizationId: org.id,
+            OR: [{ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } }],
+          },
+          orderBy: { createdAt: 'asc' },
+        })
+      : null;
     if (!person) {
       person = await this.prisma.person.create({
         data: {

apps/api/src/project-boards/project-cards-excel.service.ts

@@ -3,7 +3,7 @@ import type { ImportContactsResult } from '@mento/shared';
 import { PrismaService } from '../prisma/prisma.service';
 import type { Actor } from '../common/record-scope';
 import { projectCardAccessWhere } from '../common/record-scope';
-import { normalizePhone } from '../contacts/normalize';
+import { phoneIdentityKeys, storedPhoneNumber } from '../contacts/normalize';
 import {
   excelFieldsFromColumns,
   formatJalaliDate,
@@ -256,11 +256,13 @@ export class ProjectCardsExcelService {
   }
 
   private async findPersonId(organizationId: string, row: Record<string, string>) {
-    const mobile = normalizePhone(row.personMobile);
-    if (mobile) {
-      const needle = mobile.replace(/^\+98|^98|^0/, '');
+    const mobileKeys = phoneIdentityKeys(storedPhoneNumber(row.personMobile));
+    if (mobileKeys.length) {
       const byMobile = await this.prisma.person.findFirst({
-        where: { organizationId, mobile: { contains: needle } },
+        where: {
+          organizationId,
+          OR: [{ mobile: { in: mobileKeys } }, { phone: { in: mobileKeys } }],
+        },
         select: { id: true },
       });
       if (byMobile) return byMobile.id;

apps/api/src/public-api/api-key-auth.guard.ts

@@ -22,6 +22,7 @@ export class ApiKeyAuthGuard implements CanActivate {
         organizationId: string;
         role: string;
         apiKeyId?: string;
+        apiKeyName?: string;
       };
     }>();
 
@@ -44,6 +45,7 @@ export class ApiKeyAuthGuard implements CanActivate {
       organizationId: auth.organizationId,
       role: auth.role,
       apiKeyId: auth.apiKeyId,
+      apiKeyName: auth.name,
     };
     return true;
   }

apps/api/src/public-api/api-keys.service.ts

@@ -63,7 +63,7 @@ export class ApiKeysService {
 
   async authenticate(
     rawKey: string,
-  ): Promise<{ organizationId: string; apiKeyId: string; role: 'owner' }> {
+  ): Promise<{ organizationId: string; apiKeyId: string; name: string; role: 'owner' }> {
     const key = rawKey.trim();
     if (!key.startsWith('mk_') || key.length < 20) {
       throw new UnauthorizedException('کلید API نامعتبر است');
@@ -71,7 +71,7 @@ export class ApiKeysService {
     const keyHash = this.hashKey(key);
     const row = await this.prisma.organizationApiKey.findFirst({
       where: { keyHash, revokedAt: null },
-      select: { id: true, organizationId: true },
+      select: { id: true, organizationId: true, name: true },
     });
     if (!row) throw new UnauthorizedException('کلید API نامعتبر است');
 
@@ -83,6 +83,7 @@ export class ApiKeysService {
     return {
       organizationId: row.organizationId,
       apiKeyId: row.id,
+      name: row.name,
       role: 'owner',
     };
   }

apps/api/src/public-api/public-api-v1.controller.ts

@@ -1,18 +1,55 @@
 import {
+  Body,
   Controller,
   Get,
+  HttpCode,
+  HttpException,
+  HttpStatus,
   Param,
+  Post,
   Query,
   UseGuards,
 } from '@nestjs/common';
-import { IsInt, IsOptional, IsString, Max, Min } from 'class-validator';
+import { IsInt, IsOptional, IsString, Max, MaxLength, Min, MinLength } from 'class-validator';
 import { Type } from 'class-transformer';
 import { CurrentUser } from '../auth/current-user.decorator';
 import type { Prisma } from '@prisma/client';
 import { PrismaService } from '../prisma/prisma.service';
 import { buildSearchWhere, ci } from '../common/search';
+import { LeadsService } from '../leads/leads.service';
 import { ApiKeyAuthGuard } from './api-key-auth.guard';
 
+class CreateExternalLeadDto {
+  @IsOptional()
+  @IsString()
+  @MaxLength(80)
+  firstName?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(80)
+  lastName?: string;
+
+  @IsString()
+  @MinLength(8)
+  @MaxLength(20)
+  mobile!: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(200)
+  storeName?: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(200)
+  source?: string;
+}
+
+const LEAD_RATE_WINDOW_MS = 60_000;
+const LEAD_RATE_MAX = 60;
+const leadHits = new Map<string, number[]>();
+
 class ListQueryDto {
   @IsOptional()
   @IsString()
@@ -35,7 +72,36 @@ class ListQueryDto {
 @Controller('public/v1')
 @UseGuards(ApiKeyAuthGuard)
 export class PublicApiV1Controller {
-  constructor(private readonly prisma: PrismaService) {}
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly leads: LeadsService,
+  ) {}
+
+  @Post('leads')
+  @HttpCode(200)
+  createLead(
+    @CurrentUser()
+    user: { organizationId: string; apiKeyId?: string; apiKeyName?: string },
+    @Body() body: CreateExternalLeadDto,
+  ) {
+    const bucket = user.apiKeyId || user.organizationId;
+    const now = Date.now();
+    const prev = (leadHits.get(bucket) ?? []).filter((t) => now - t < LEAD_RATE_WINDOW_MS);
+    if (prev.length >= LEAD_RATE_MAX) {
+      throw new HttpException('تعداد ارسال بیش از حد مجاز است. کمی بعد دوباره تلاش کنید.', HttpStatus.TOO_MANY_REQUESTS);
+    }
+    prev.push(now);
+    leadHits.set(bucket, prev);
+    return this.leads.createFromExternal({
+      organizationId: user.organizationId,
+      siteName: user.apiKeyName?.trim() || 'سایت بیرونی',
+      firstName: body.firstName,
+      lastName: body.lastName,
+      mobile: body.mobile,
+      storeName: body.storeName,
+      source: body.source,
+    });
+  }
 
   @Get('people')
   async listPeople(

apps/api/src/public-api/public-api.module.ts

@@ -1,6 +1,7 @@
 import { Module } from '@nestjs/common';
 import { AuthModule } from '../auth/auth.module';
 import { BillingModule } from '../billing/billing.module';
+import { LeadsModule } from '../leads/leads.module';
 import { ApiKeyAuthGuard } from './api-key-auth.guard';
 import { ApiKeysController } from './api-keys.controller';
 import { ApiKeysService } from './api-keys.service';
@@ -9,7 +10,7 @@ import { WebhooksController } from './webhooks.controller';
 import { WebhooksService } from './webhooks.service';
 
 @Module({
-  imports: [AuthModule, BillingModule],
+  imports: [AuthModule, BillingModule, LeadsModule],
   controllers: [ApiKeysController, WebhooksController, PublicApiV1Controller],
   providers: [ApiKeysService, ApiKeyAuthGuard, WebhooksService],
   exports: [ApiKeysService, WebhooksService],

apps/api/src/reports/reports.service.ts

@@ -1533,7 +1533,6 @@ export class ReportsService {
   async home(actor: Actor): Promise<HomeDashboardDto> {
     const orgId = actor.organizationId;
     const dealScope = ownerWhere(actor, 'deals');
-    const invoiceScope = ownerWhere(actor, 'finance');
     const activityScope = assigneeWhere(actor);
     const personScope = elevated(actor.role) ? {} : { ownerId: actor.userId };
     const rates = await loadOrgRates(this.prisma, orgId);
@@ -1544,7 +1543,6 @@ export class ReportsService {
     const prev = addJalaliMonths(jy, jm, -1);
     const prevMonthStart = startOfJalaliMonth(prev.jy, prev.jm);
     const prevMonthEnd = endOfJalaliMonth(prev.jy, prev.jm);
-    const trendWindowStart = addMonthsStart(now, -12);
 
     const todayStart = startOfDay(now);
     const todayEnd = endOfDay(now);
@@ -1557,25 +1555,17 @@ export class ReportsService {
     const dealsPrior = dealPriorWhere(actor.priorLens, actor.priorCutoff);
     const activitiesPrior = activityPriorWhere(actor.priorLens, actor.priorCutoff);
 
-    const invoiceStatuses: Array<'issued' | 'partially_paid' | 'paid'> = [
-      'issued',
-      'partially_paid',
-      'paid',
-    ];
-
     const [
       wonDeals,
-      openDealRows,
-      lostDeals,
+      openDeals,
       staleDeals,
-      peopleRecent,
+      peopleCur,
+      peoplePrev,
       openActivitiesToday,
       openActivitiesYesterday,
       openDealsWeekAgo,
       goals,
       overdueCount,
-      invoices,
-      activityTypeGroups,
     ] = await Promise.all([
       this.prisma.deal.findMany({
         where: {
@@ -1583,7 +1573,7 @@ export class ReportsService {
             {
               organizationId: orgId,
               status: 'won',
-              updatedAt: { gte: trendWindowStart },
+              updatedAt: { gte: addMonthsStart(now, -5) },
             },
             dealScope,
             dealsPrior,
@@ -1600,7 +1590,7 @@ export class ReportsService {
           person: { select: { id: true, firstName: true, lastName: true } },
         },
       }),
-      this.prisma.deal.findMany({
+      this.prisma.deal.count({
         where: {
           AND: [
             { organizationId: orgId, status: 'open' },
@@ -1608,30 +1598,6 @@ export class ReportsService {
             dealsPrior,
           ],
         },
-        select: {
-          amount: true,
-          currency: true,
-          stageId: true,
-          stage: { select: { id: true, name: true, position: true } },
-        },
-      }),
-      this.prisma.deal.findMany({
-        where: {
-          AND: [
-            {
-              organizationId: orgId,
-              status: 'lost',
-              updatedAt: { gte: trendWindowStart },
-            },
-            dealScope,
-            dealsPrior,
-          ],
-        },
-        select: {
-          amount: true,
-          currency: true,
-          lostReason: true,
-        },
       }),
       this.prisma.deal.findMany({
         where: {
@@ -1658,13 +1624,19 @@ export class ReportsService {
         orderBy: { updatedAt: 'asc' },
         take: 5,
       }),
-      this.prisma.person.findMany({
+      this.prisma.person.count({
         where: {
           organizationId: orgId,
           ...personScope,
-          createdAt: { gte: trendWindowStart, lte: curMonthEnd },
+          createdAt: { gte: curMonthStart, lte: curMonthEnd },
+        },
+      }),
+      this.prisma.person.count({
+        where: {
+          organizationId: orgId,
+          ...personScope,
+          createdAt: { gte: prevMonthStart, lte: prevMonthEnd },
         },
-        select: { createdAt: true, importSource: true },
       }),
       this.prisma.activity.count({
         where: {
@@ -1684,7 +1656,6 @@ export class ReportsService {
           AND: [
             {
               organizationId: orgId,
-              status: 'open',
               dueAt: { gte: yesterdayStart, lte: yesterdayEnd },
             },
             activityScope,
@@ -1726,67 +1697,8 @@ export class ReportsService {
           ],
         },
       }),
-      this.prisma.invoice.findMany({
-        where: {
-          organizationId: orgId,
-          ...invoiceScope,
-          status: { in: invoiceStatuses },
-          OR: [
-            { issuedAt: { gte: trendWindowStart, lte: curMonthEnd } },
-            { createdAt: { gte: trendWindowStart, lte: curMonthEnd } },
-          ],
-        },
-        select: {
-          issuedAt: true,
-          createdAt: true,
-          lineItems: {
-            select: {
-              quantity: true,
-              unitPrice: true,
-              currency: true,
-            },
-          },
-        },
-      }),
-      this.prisma.activity.groupBy({
-        by: ['type'],
-        where: {
-          AND: [
-            {
-              organizationId: orgId,
-              status: 'open',
-            },
-            activityScope,
-            activitiesPrior,
-          ],
-        },
-        _count: { _all: true },
-      }),
     ]);
 
-    const openDeals = openDealRows.length;
-
-    const invoiceInRange = (
-      inv: { issuedAt: Date | null; createdAt: Date },
-      from: Date,
-      to: Date,
-    ) => {
-      const anchor = inv.issuedAt ?? inv.createdAt;
-      return anchor >= from && anchor <= to;
-    };
-
-    const sumInvoiceInRange = (from: Date, to: Date) => {
-      let amount = 0;
-      for (const inv of invoices) {
-        if (!invoiceInRange(inv, from, to)) continue;
-        for (const line of inv.lineItems) {
-          const lineTotal = Number(line.quantity) * Number(line.unitPrice);
-          amount += toBaseAmount(lineTotal, line.currency, rates);
-        }
-      }
-      return amount;
-    };
-
     const sumWonInRange = (start: Date, end: Date) =>
       wonDeals
         .filter((d) => d.updatedAt >= start && d.updatedAt <= end)
@@ -1795,21 +1707,8 @@ export class ReportsService {
           0,
         );
 
-    const salesInRange = (start: Date, end: Date) => {
-      const inv = sumInvoiceInRange(start, end);
-      const won = sumWonInRange(start, end);
-      return Math.round(inv > 0 ? inv : won);
-    };
-
-    const peopleCur = peopleRecent.filter(
-      (p) => p.createdAt >= curMonthStart && p.createdAt <= curMonthEnd,
-    ).length;
-    const peoplePrev = peopleRecent.filter(
-      (p) => p.createdAt >= prevMonthStart && p.createdAt <= prevMonthEnd,
-    ).length;
-
-    const salesCur = salesInRange(curMonthStart, curMonthEnd);
-    const salesPrev = salesInRange(prevMonthStart, prevMonthEnd);
+    const salesCur = sumWonInRange(curMonthStart, curMonthEnd);
+    const salesPrev = sumWonInRange(prevMonthStart, prevMonthEnd);
     const targetAmount = goals.reduce(
       (acc, g) => acc + Number(g.targetAmount),
       0,
@@ -1817,7 +1716,7 @@ export class ReportsService {
 
     const trendMonths: Array<{ key: string; label: string; start: Date; end: Date }> =
       [];
-    for (let i = 11; i >= 0; i -= 1) {
+    for (let i = 4; i >= 0; i -= 1) {
       const m = addJalaliMonths(jy, jm, -i);
       trendMonths.push({
         key: `${m.jy}-${String(m.jm).padStart(2, '0')}`,
@@ -1830,28 +1729,14 @@ export class ReportsService {
     const salesTrend = trendMonths.map((m) => ({
       monthKey: m.key,
       monthLabel: m.label,
-      amount: salesInRange(m.start, m.end),
-    }));
-
-    const customerGrowth = trendMonths.map((m) => ({
-      monthKey: m.key,
-      monthLabel: m.label,
-      value: peopleRecent.filter(
-        (p) => p.createdAt >= m.start && p.createdAt <= m.end,
-      ).length,
+      amount: Math.round(sumWonInRange(m.start, m.end)),
     }));
 
     const sourceMap = new Map<string, number>();
-    for (const p of peopleRecent) {
-      const label = normalizeImportSource(p.importSource);
+    for (const d of wonDeals) {
+      const label = normalizeSource(d.source);
       sourceMap.set(label, (sourceMap.get(label) ?? 0) + 1);
     }
-    if (sourceMap.size === 0) {
-      for (const d of wonDeals) {
-        const label = normalizeSource(d.source);
-        sourceMap.set(label, (sourceMap.get(label) ?? 0) + 1);
-      }
-    }
     const sourceTotal = [...sourceMap.values()].reduce((a, b) => a + b, 0) || 1;
     const sources = [...sourceMap.entries()]
       .map(([label, count]) => ({
@@ -1895,101 +1780,6 @@ export class ReportsService {
       .slice(0, 5)
       .map((row, index) => ({ ...row, rank: index + 1 }));
 
-    const wonAmountAll = Math.round(
-      wonDeals.reduce(
-        (acc, d) => acc + decimalToBase(d.amount, d.currency, rates),
-        0,
-      ),
-    );
-    const lostAmountAll = Math.round(
-      lostDeals.reduce(
-        (acc, d) => acc + decimalToBase(d.amount, d.currency, rates),
-        0,
-      ),
-    );
-    const openAmountAll = Math.round(
-      openDealRows.reduce(
-        (acc, d) => acc + decimalToBase(d.amount, d.currency, rates),
-        0,
-      ),
-    );
-    const closedCount = wonDeals.length + lostDeals.length;
-    const winRate = closedCount
-      ? Math.round((wonDeals.length / closedCount) * 1000) / 10
-      : 0;
-    const salesSummary: HomeDashboardDto['salesSummary'] = {
-      openCount: openDeals,
-      wonCount: wonDeals.length,
-      lostCount: lostDeals.length,
-      openAmount: openAmountAll,
-      wonAmount: wonAmountAll,
-      lostAmount: lostAmountAll,
-      winRate,
-    };
-
-    const funnelMap = new Map<
-      string,
-      { stageId: string; stageName: string; position: number; count: number; amount: number }
-    >();
-    for (const d of openDealRows) {
-      const stageId = d.stage?.id ?? d.stageId ?? 'unknown';
-      const stageName = d.stage?.name ?? 'بدون مرحله';
-      const position = d.stage?.position ?? 999;
-      const cur = funnelMap.get(stageId) ?? {
-        stageId,
-        stageName,
-        position,
-        count: 0,
-        amount: 0,
-      };
-      cur.count += 1;
-      cur.amount += decimalToBase(d.amount, d.currency, rates);
-      funnelMap.set(stageId, cur);
-    }
-    const funnel = [...funnelMap.values()]
-      .sort((a, b) => a.position - b.position)
-      .slice(0, 8)
-      .map((row) => ({
-        stageId: row.stageId,
-        stageName: row.stageName,
-        count: row.count,
-        amount: Math.round(row.amount),
-      }));
-
-    const lostReasonMap = new Map<string, { count: number; amount: number }>();
-    for (const d of lostDeals) {
-      const label = normalizeLostReason(d.lostReason);
-      const prevRow = lostReasonMap.get(label) ?? { count: 0, amount: 0 };
-      prevRow.count += 1;
-      prevRow.amount += decimalToBase(d.amount, d.currency, rates);
-      lostReasonMap.set(label, prevRow);
-    }
-    const lostReasonTotal =
-      [...lostReasonMap.values()].reduce((a, b) => a + b.count, 0) || 1;
-    const lostReasons = [...lostReasonMap.entries()]
-      .map(([label, row]) => ({
-        label,
-        count: row.count,
-        amount: Math.round(row.amount),
-        percent: Math.round((row.count / lostReasonTotal) * 1000) / 10,
-      }))
-      .sort((a, b) => b.count - a.count)
-      .slice(0, 6);
-
-    const activityTypeLabel: Record<string, string> = {
-      call: 'تماس',
-      meeting: 'جلسه',
-      task: 'کار',
-      note: 'یادداشت',
-    };
-    const activityByType = activityTypeGroups
-      .map((row) => ({
-        type: row.type,
-        label: activityTypeLabel[row.type] ?? row.type,
-        count: row._count._all,
-      }))
-      .sort((a, b) => b.count - a.count);
-
     const alerts: HomeDashboardDto['alerts'] = [];
     if (staleDeals.length) {
       const first = staleDeals[0]!;
@@ -2067,30 +1857,11 @@ export class ReportsService {
           changePercent: pctChange(openActivitiesToday, openActivitiesYesterday),
           changeLabel: 'نسبت به دیروز',
         },
-        {
-          key: 'win-rate',
-          label: 'نرخ برد',
-          value: winRate,
-          changePercent: null,
-          changeLabel: '۱۲ ماه اخیر',
-        },
-        {
-          key: 'overdue',
-          label: 'عقب‌افتاده',
-          value: overdueCount,
-          changePercent: null,
-          changeLabel: 'فعالیت باز',
-        },
       ],
       alerts,
       salesTrend,
-      customerGrowth,
       sources,
       topCustomers,
-      salesSummary,
-      funnel,
-      lostReasons,
-      activityByType,
     };
   }
 }
@@ -2148,21 +1919,6 @@ function normalizeSource(raw: string | null | undefined): string {
   return map[value.toLowerCase()] ?? value;
 }
 
-function normalizeImportSource(raw: string | null | undefined): string {
-  const value = raw?.trim().toLowerCase();
-  if (!value) return 'سایر';
-  const map: Record<string, string> = {
-    manual: 'دستی',
-    tahesab: 'ته‌حساب',
-    didar: 'دیدار',
-    excel: 'اکسل',
-    phone: 'تلفن',
-    lead_form: 'فرم لید',
-    other: 'سایر',
-  };
-  return map[value] ?? normalizeSource(raw);
-}
-
 function normalizeLostReason(raw: string | null | undefined): string {
   const value = raw?.trim();
   if (!value) return 'بدون دلیل ثبت‌شده';

apps/api/src/routines/routine-mapper.ts

@@ -185,6 +185,7 @@ export function toRoutineDto(
     entityLink: normalizeEntityLink(row.entityLink),
     reminderMinutesBefore: row.reminderMinutesBefore,
     isActive: row.isActive,
+    createdById: row.createdById,
     recurrenceLabel: describeRecurrence(rule),
     executionRate: execution.total ? Math.round((execution.done / execution.total) * 100) : null,
     executionTotal: execution.total,

apps/api/src/routines/routines.service.ts

@@ -200,8 +200,7 @@ export class RoutinesService {
 
   async create(actor: Actor, dto: SaveRoutineDto): Promise<RoutineDto> {
     const scope = await this.scope(actor);
-    assertManager(scope);
-    const data = await this.buildData(actor, scope, dto);
+    const data = await this.buildData(actor, scope, this.ownRoutineInput(actor, scope, dto));
     const row = await this.prisma.routine.create({
       data: {
         ...data,
@@ -216,10 +215,9 @@ export class RoutinesService {
 
   async update(actor: Actor, id: string, dto: SaveRoutineDto): Promise<RoutineDto> {
     const scope = await this.scope(actor);
-    assertManager(scope);
     const existing = await this.findRoutine(actor.organizationId, id);
-    this.assertCanManageRoutine(scope, existing);
-    const data = await this.buildData(actor, scope, dto);
+    this.assertCanWriteRoutine(scope, existing);
+    const data = await this.buildData(actor, scope, this.ownRoutineInput(actor, scope, dto));
     const row = await this.prisma.routine.update({
       where: { id },
       data: data as Prisma.RoutineUncheckedUpdateInput,
@@ -232,9 +230,8 @@ export class RoutinesService {
 
   async toggle(actor: Actor, id: string, isActive: boolean): Promise<RoutineDto> {
     const scope = await this.scope(actor);
-    assertManager(scope);
     const existing = await this.findRoutine(actor.organizationId, id);
-    this.assertCanManageRoutine(scope, existing);
+    this.assertCanWriteRoutine(scope, existing);
     const row = await this.prisma.routine.update({
       where: { id },
       data: { isActive },
@@ -251,9 +248,8 @@ export class RoutinesService {
     dto: ChangeRoutineAssigneeDto,
   ): Promise<RoutineDto> {
     const scope = await this.scope(actor);
-    assertManager(scope);
     const existing = await this.findRoutine(actor.organizationId, id);
-    this.assertCanManageRoutine(scope, existing);
+    this.assertCanWriteRoutine(scope, existing);
     const target = await this.resolveTarget(actor, scope, dto.assigneeId, dto.teamId);
     await this.cancelTodayPending(id, 'تغییر مسئول روتین');
     const row = await this.prisma.routine.update({
@@ -268,9 +264,8 @@ export class RoutinesService {
 
   async duplicate(actor: Actor, id: string): Promise<RoutineDto> {
     const scope = await this.scope(actor);
-    assertManager(scope);
     const src = await this.findRoutine(actor.organizationId, id);
-    this.assertCanManageRoutine(scope, src);
+    this.assertCanWriteRoutine(scope, src);
     const {
       id: _id,
       createdAt: _c,
@@ -295,9 +290,8 @@ export class RoutinesService {
 
   async remove(actor: Actor, id: string) {
     const scope = await this.scope(actor);
-    assertManager(scope);
     const existing = await this.findRoutine(actor.organizationId, id);
-    this.assertCanManageRoutine(scope, existing);
+    this.assertCanWriteRoutine(scope, existing);
     await this.prisma.routine.update({
       where: { id },
       data: { deletedAt: new Date(), isActive: false },
@@ -345,6 +339,27 @@ export class RoutinesService {
     return row;
   }
 
+  /** عضو عادی فقط روتینی را می‌نویسد که خودش برای خودش ساخته است. */
+  private ownRoutineInput(actor: Actor, scope: RoutineScope, dto: SaveRoutineDto): SaveRoutineDto {
+    if (scope.isManager) return dto;
+    if (dto.teamId || (dto.assigneeId && dto.assigneeId !== actor.userId)) {
+      throw new ForbiddenException('فقط می‌توانید برای خودتان روتین بسازید');
+    }
+    return { ...dto, assigneeId: actor.userId, teamId: null };
+  }
+
+  private assertCanWriteRoutine(
+    scope: RoutineScope,
+    row: { assigneeId: string | null; teamId: string | null; createdById: string | null },
+  ) {
+    if (scope.isManager) {
+      this.assertCanManageRoutine(scope, row);
+      return;
+    }
+    if (row.createdById === scope.userId && row.assigneeId === scope.userId && !row.teamId) return;
+    throw new ForbiddenException('فقط روتینی که برای خودتان ساخته‌اید را می‌توانید تغییر دهید');
+  }
+
   private assertCanManageRoutine(
     scope: RoutineScope,
     row: { assigneeId: string | null; teamId: string | null; createdById: string | null },

apps/api/src/treasury/treasury-access.guard.ts

@@ -1,7 +1,16 @@
 import { CanActivate, ExecutionContext, ForbiddenException, Injectable } from '@nestjs/common';
-import { PrismaService } from '../prisma/prisma.service';
+import {
+  parseUserTreasuryAccess,
+  treasurySectionAllowed,
+  type TreasurySectionKey,
+} from '@mento/shared';
 import type { Actor } from '../common/record-scope';
+import { PrismaService } from '../prisma/prisma.service';
 
+/**
+ * حقوق فقط با treasury_payroll.
+ * بقیه مسیرها با treasury باز می‌شوند؛ اگر بخش ریز انتخاب شده باشد فقط همان‌ها.
+ */
 @Injectable()
 export class TreasuryAccessGuard implements CanActivate {
   constructor(private readonly prisma: PrismaService) {}
@@ -10,20 +19,56 @@ export class TreasuryAccessGuard implements CanActivate {
     const req = context.switchToHttp().getRequest<{ user?: Actor; originalUrl?: string; url?: string }>();
     const actor = req.user;
     if (!actor) throw new ForbiddenException('دسترسی مالی مجاز نیست.');
-    const url = req.originalUrl || req.url || '';
-    const payroll = url.includes('/treasury/payroll');
     if (actor.role === 'owner' || actor.role === 'admin') return true;
     const membership = await this.prisma.membership.findFirst({
       where: { userId: actor.userId, organizationId: actor.organizationId, isActive: true },
-      select: { orgRole: { select: { permissions: true } } },
+      select: {
+        orgRole: { select: { permissions: true } },
+        treasuryAccessOverride: true,
+      },
     });
-    const permissions = Array.isArray(membership?.orgRole?.permissions)
+    const rolePermissions = Array.isArray(membership?.orgRole?.permissions)
       ? membership.orgRole.permissions.map(String)
       : [];
-    const allowed = payroll
-      ? permissions.includes('treasury_payroll')
-      : permissions.includes('treasury') || permissions.includes('treasury_payroll');
-    if (!allowed) throw new ForbiddenException('دسترسی مالی برای نقش شما مجاز نیست.');
+    const permissions = permissionsForTreasury(
+      rolePermissions,
+      parseUserTreasuryAccess(membership?.treasuryAccessOverride),
+    );
+    const url = req.originalUrl || req.url || '';
+    if (!treasurySectionAllowed(actor.role, permissions, sectionForUrl(url))) {
+      throw new ForbiddenException('به این بخش مدیریت مالی دسترسی ندارید.');
+    }
     return true;
   }
 }
+
+function permissionsForTreasury(
+  rolePermissions: string[],
+  override: ReturnType<typeof parseUserTreasuryAccess>,
+): string[] {
+  if (!override) return rolePermissions;
+  const rest = rolePermissions.filter((key) => key !== 'treasury' && !key.startsWith('treasury_'));
+  if (!override.enabled) return rest;
+  return ['treasury', ...override.sections, ...rest];
+}
+
+function sectionForUrl(url: string): TreasurySectionKey | 'treasury_documents' {
+  if (url.includes('/treasury/payroll')) return 'treasury_payroll';
+  if (url.includes('/treasury/receivables') || url.includes('/treasury/installments')) {
+    return 'treasury_receivables';
+  }
+  if (url.includes('/treasury/recurring')) return 'treasury_recurring';
+  if (url.includes('/treasury/reports')) return 'treasury_reports';
+  if (url.includes('/treasury/audit')) return 'treasury_audit';
+  if (url.includes('/treasury/categories')) return 'treasury_categories';
+  if (
+    url.includes('/treasury/accounts') ||
+    url.includes('/treasury/transfers') ||
+    url.includes('/treasury/reconciliations') ||
+    url.includes('/treasury/adjustments')
+  ) {
+    return 'treasury_accounts';
+  }
+  if (url.includes('/treasury/dashboard')) return 'treasury_dashboard';
+  return 'treasury_documents';
+}

apps/api/src/treasury/treasury-ops.service.ts

@@ -2,6 +2,7 @@ import { BadRequestException, Injectable, Logger, NotFoundException } from '@nes
 import { Cron } from '@nestjs/schedule';
 import { Prisma } from '@prisma/client';
 import ExcelJS from 'exceljs';
+import type { TreasuryPartyBalanceDto } from '@mento/shared';
 import { PrismaService } from '../prisma/prisma.service';
 import type { Actor } from '../common/record-scope';
 
@@ -314,7 +315,12 @@ export class TreasuryOpsService {
     return { from: from.toISOString(), to: to.toISOString(), current, previous, ...breakdown };
   }
 
-  async reportExcel(actor: Actor, from?: string, to?: string) {
+  async reportExcel(
+    actor: Actor,
+    from?: string,
+    to?: string,
+    parties?: { debtors: TreasuryPartyBalanceDto[]; creditors: TreasuryPartyBalanceDto[] },
+  ) {
     const data = await this.report(actor, from, to);
     const book = new ExcelJS.Workbook();
     const sheet = book.addWorksheet('گزارش مالی');
@@ -331,10 +337,41 @@ export class TreasuryOpsService {
     sheet.addRow([]);
     sheet.addRow(['دسته هزینه', 'مبلغ', 'سهم']);
     data.current.expenseCategories.forEach((row) => sheet.addRow([row.name, row.amount, row.share]));
+    if (parties) {
+      this.addPartySheet(book, 'بدهکاران', parties.debtors, 'دریافت‌شده');
+      this.addPartySheet(book, 'بستانکاران', parties.creditors, 'پرداخت‌شده');
+    }
     const buffer = await book.xlsx.writeBuffer();
     return Buffer.from(buffer);
   }
 
+  private addPartySheet(
+    book: ExcelJS.Workbook,
+    title: string,
+    rows: TreasuryPartyBalanceDto[],
+    settledLabel: string,
+  ) {
+    const sheet = book.addWorksheet(title);
+    const kindLabel: Record<string, string> = { person: 'مشتری', company: 'شرکت', user: 'کاربر' };
+    sheet.addRow(['طرف حساب', 'نوع', 'مبلغ کل', settledLabel, 'مانده']);
+    let amount = new Prisma.Decimal(0);
+    let settled = new Prisma.Decimal(0);
+    let remaining = new Prisma.Decimal(0);
+    for (const row of rows) {
+      sheet.addRow([
+        row.partyName,
+        (row.partyKind && kindLabel[row.partyKind]) || 'ثبت قبلی',
+        row.amount,
+        row.settledAmount,
+        row.remaining,
+      ]);
+      amount = amount.plus(row.amount);
+      settled = settled.plus(row.settledAmount);
+      remaining = remaining.plus(row.remaining);
+    }
+    sheet.addRow(['جمع', '', money(amount), money(settled), money(remaining)]);
+  }
+
   private async period(organizationId: string, from: Date, to: Date) {
     const docs = await this.prisma.financialDocument.findMany({
       where: {

apps/api/src/treasury/treasury.controller.ts

@@ -1,4 +1,4 @@
-import { Body, Controller, Get, Param, Patch, Post, Query, StreamableFile, UploadedFile, UseGuards, UseInterceptors } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Param, Patch, Post, Query, StreamableFile, UploadedFile, UseGuards, UseInterceptors } from '@nestjs/common';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { memoryStorage } from 'multer';
 import { JwtAuthGuard } from '../auth/jwt-auth.guard';
@@ -43,6 +43,20 @@ export class TreasuryController {
     return this.treasury.createCategory(user, body);
   }
 
+  @Patch('categories/:id')
+  updateCategory(
+    @CurrentUser() user: Actor,
+    @Param('id') id: string,
+    @Body() body: { name?: string; isActive?: boolean },
+  ) {
+    return this.treasury.updateCategory(user, id, body);
+  }
+
+  @Delete('categories/:id')
+  deleteCategory(@CurrentUser() user: Actor, @Param('id') id: string) {
+    return this.treasury.deleteCategory(user, id);
+  }
+
   @Get('accounts')
   accounts(
     @CurrentUser() user: Actor,
@@ -61,7 +75,18 @@ export class TreasuryController {
   updateAccount(
     @CurrentUser() user: Actor,
     @Param('id') id: string,
-    @Body() body: { name?: string; notes?: string | null; isActive?: boolean; responsibleName?: string | null },
+    @Body()
+    body: {
+      name?: string;
+      type?: 'bank' | 'cash' | 'petty';
+      bankName?: string | null;
+      accountRef?: string | null;
+      notes?: string | null;
+      isActive?: boolean;
+      responsibleName?: string | null;
+      openingBalance?: string | number;
+      openingDate?: string;
+    },
   ) {
     return this.treasury.updateAccount(user, id, body);
   }
@@ -81,6 +106,29 @@ export class TreasuryController {
     return this.treasury.transfer(user, body);
   }
 
+  @Get('parties')
+  parties(@CurrentUser() user: Actor, @Query('q') q?: string) {
+    return this.treasury.searchParties(user, q);
+  }
+
+  @Post('parties/person')
+  createPartyPerson(
+    @CurrentUser() user: Actor,
+    @Body() body: { firstName?: string; lastName?: string },
+  ) {
+    return this.treasury.createPartyPerson(user, body);
+  }
+
+  @Post('parties/company')
+  createPartyCompany(@CurrentUser() user: Actor, @Body() body: { name?: string }) {
+    return this.treasury.createPartyCompany(user, body);
+  }
+
+  @Get('party-balances')
+  partyBalances(@CurrentUser() user: Actor, @Query('kind') kind?: string) {
+    return this.treasury.partyBalances(user, kind === 'expense' ? 'expense' : 'income');
+  }
+
   @Get('documents')
   documents(
     @CurrentUser() user: Actor,
@@ -221,7 +269,11 @@ export class TreasuryController {
     @Query('from') from?: string,
     @Query('to') to?: string,
   ) {
-    const buffer = await this.ops.reportExcel(user, from, to);
+    const [debtors, creditors] = await Promise.all([
+      this.treasury.partyBalances(user, 'income'),
+      this.treasury.partyBalances(user, 'expense'),
+    ]);
+    const buffer = await this.ops.reportExcel(user, from, to, { debtors, creditors });
     return new StreamableFile(buffer, {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
       disposition: 'attachment; filename="treasury-report.xlsx"',

apps/api/src/treasury/treasury.module.ts

@@ -1,5 +1,6 @@
 import { Module } from '@nestjs/common';
 import { AuthModule } from '../auth/auth.module';
+import { ContactsModule } from '../contacts/contacts.module';
 import { NotificationsModule } from '../notifications/notifications.module';
 import { TreasuryController } from './treasury.controller';
 import { TreasuryAccessGuard } from './treasury-access.guard';
@@ -9,7 +10,7 @@ import { TreasuryReceivablesService } from './treasury-receivables.service';
 import { TreasuryService } from './treasury.service';
 
 @Module({
-  imports: [AuthModule, NotificationsModule],
+  imports: [AuthModule, NotificationsModule, ContactsModule],
   controllers: [TreasuryController],
   providers: [
     TreasuryService,

apps/api/src/treasury/treasury.service.ts

@@ -1,8 +1,10 @@
 import {
   BadRequestException,
+  ForbiddenException,
   Injectable,
   NotFoundException,
 } from '@nestjs/common';
+import { parseUserTreasuryAccess } from '@mento/shared';
 import { randomUUID } from 'node:crypto';
 import { Prisma } from '@prisma/client';
 import ExcelJS from 'exceljs';
@@ -11,8 +13,14 @@ import type {
   FinancialCategoryDto,
   FinancialDocumentDto,
   FinancialMovementDto,
+  FinancialPartyKind,
   TreasuryDashboardDto,
+  TreasuryPartyBalanceDto,
+  TreasuryPartySearchDto,
 } from '@mento/shared';
+import { CompaniesService } from '../contacts/companies.service';
+import { PeopleService } from '../contacts/people.service';
+import { dateToJalali } from '../common/jalali';
 import { PrismaService } from '../prisma/prisma.service';
 import { LocalFileStorage } from '../storage/local-file.storage';
 import { StorageQuotaService } from '../billing/storage-quota.service';
@@ -63,6 +71,8 @@ export class TreasuryService {
     private readonly receivables: TreasuryReceivablesService,
     private readonly files: LocalFileStorage,
     private readonly storage: StorageQuotaService,
+    private readonly people: PeopleService,
+    private readonly companies: CompaniesService,
   ) {}
 
   async ensureCategories(organizationId: string) {
@@ -110,27 +120,80 @@ export class TreasuryService {
   ): Promise<FinancialCategoryDto> {
     const name = input.name.trim();
     if (name.length < 2) throw new BadRequestException('نام دسته‌بندی کوتاه است.');
-    const row = await this.prisma.financialCategory.create({
-      data: {
-        organizationId: actor.organizationId,
-        name,
-        kind: input.kind,
-      },
+    try {
+      const row = await this.prisma.financialCategory.create({
+        data: {
+          organizationId: actor.organizationId,
+          name,
+          kind: input.kind,
+        },
+      });
+      return {
+        id: row.id,
+        name: row.name,
+        kind: row.kind as FinancialCategoryDto['kind'],
+        isActive: row.isActive,
+      };
+    } catch (e) {
+      if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === 'P2002') {
+        throw new BadRequestException('این نام برای همین نوع دسته قبلاً ثبت شده است.');
+      }
+      throw e;
+    }
+  }
+
+  async updateCategory(
+    actor: Actor,
+    id: string,
+    input: { name?: string; isActive?: boolean },
+  ): Promise<FinancialCategoryDto> {
+    const current = await this.prisma.financialCategory.findFirst({
+      where: { id, organizationId: actor.organizationId },
     });
-    return {
-      id: row.id,
-      name: row.name,
-      kind: row.kind as FinancialCategoryDto['kind'],
-      isActive: row.isActive,
-    };
+    if (!current) throw new NotFoundException('دسته‌بندی پیدا نشد.');
+    const name = input.name == null ? current.name : input.name.trim();
+    if (name.length < 2) throw new BadRequestException('نام دسته‌بندی کوتاه است.');
+    try {
+      const row = await this.prisma.financialCategory.update({
+        where: { id: current.id },
+        data: {
+          name,
+          ...(input.isActive == null ? {} : { isActive: input.isActive }),
+        },
+      });
+      return {
+        id: row.id,
+        name: row.name,
+        kind: row.kind as FinancialCategoryDto['kind'],
+        isActive: row.isActive,
+      };
+    } catch (e) {
+      if (e instanceof Prisma.PrismaClientKnownRequestError && e.code === 'P2002') {
+        throw new BadRequestException('این نام برای همین نوع دسته قبلاً ثبت شده است.');
+      }
+      throw e;
+    }
+  }
+
+  async deleteCategory(actor: Actor, id: string): Promise<{ ok: true }> {
+    const current = await this.prisma.financialCategory.findFirst({
+      where: { id, organizationId: actor.organizationId },
+    });
+    if (!current) throw new NotFoundException('دسته‌بندی پیدا نشد.');
+    await this.prisma.financialCategory.delete({ where: { id: current.id } });
+    return { ok: true };
   }
 
   async listAccounts(
     actor: Actor,
     range?: { from?: string; to?: string },
   ): Promise<FinancialAccountDto[]> {
+    const scope = await this.accountScope(actor);
     const accounts = await this.prisma.financialAccount.findMany({
-      where: { organizationId: actor.organizationId },
+      where: {
+        organizationId: actor.organizationId,
+        ...(scope ? { id: { in: scope } } : {}),
+      },
       orderBy: [{ isActive: 'desc' }, { name: 'asc' }],
     });
     return Promise.all(accounts.map((account) => this.toAccountDto(account, range)));
@@ -196,19 +259,89 @@ export class TreasuryService {
   async updateAccount(
     actor: Actor,
     id: string,
-    input: { name?: string; notes?: string | null; isActive?: boolean; responsibleName?: string | null },
+    input: {
+      name?: string;
+      type?: 'bank' | 'cash' | 'petty';
+      bankName?: string | null;
+      accountRef?: string | null;
+      notes?: string | null;
+      isActive?: boolean;
+      responsibleName?: string | null;
+      openingBalance?: string | number;
+      openingDate?: string;
+    },
   ): Promise<FinancialAccountDto> {
-    const existing = await this.requireAccount(actor.organizationId, id);
-    const row = await this.prisma.financialAccount.update({
-      where: { id: existing.id },
-      data: {
-        ...(input.name?.trim() ? { name: input.name.trim() } : {}),
-        ...(input.notes !== undefined ? { notes: input.notes?.trim() || null } : {}),
-        ...(input.responsibleName !== undefined
-          ? { responsibleName: input.responsibleName?.trim() || null }
-          : {}),
-        ...(input.isActive !== undefined ? { isActive: input.isActive } : {}),
-      },
+    const existing = await this.requireAccount(actor.organizationId, id, actor);
+    if (input.type && !['bank', 'cash', 'petty'].includes(input.type)) {
+      throw new BadRequestException('نوع حساب نامعتبر است.');
+    }
+    const opening = input.openingBalance !== undefined ? dec(input.openingBalance) : null;
+    if (opening?.isNegative()) {
+      throw new BadRequestException('موجودی اولیه نمی‌تواند منفی باشد.');
+    }
+    const openingDate =
+      input.openingDate !== undefined
+        ? (startOfDay(input.openingDate) ?? existing.openingDate)
+        : null;
+    const row = await this.prisma.$transaction(async (tx) => {
+      const updated = await tx.financialAccount.update({
+        where: { id: existing.id },
+        data: {
+          ...(input.name?.trim() ? { name: input.name.trim() } : {}),
+          ...(input.type ? { type: input.type } : {}),
+          ...(input.bankName !== undefined ? { bankName: input.bankName?.trim() || null } : {}),
+          ...(input.accountRef !== undefined ? { accountRef: input.accountRef?.trim() || null } : {}),
+          ...(input.notes !== undefined ? { notes: input.notes?.trim() || null } : {}),
+          ...(input.responsibleName !== undefined
+            ? { responsibleName: input.responsibleName?.trim() || null }
+            : {}),
+          ...(input.isActive !== undefined ? { isActive: input.isActive } : {}),
+          ...(opening ? { openingBalance: opening } : {}),
+          ...(openingDate ? { openingDate } : {}),
+        },
+      });
+      if (opening || openingDate) {
+        const nextAmount = opening ?? existing.openingBalance;
+        const nextDate = openingDate ?? existing.openingDate;
+        const openings = await tx.financialMovement.findMany({
+          where: { accountId: existing.id, kind: 'opening', voidedAt: null },
+          orderBy: { createdAt: 'asc' },
+        });
+        if (nextAmount.isZero()) {
+          if (openings.length) {
+            await tx.financialMovement.updateMany({
+              where: { id: { in: openings.map((row) => row.id) } },
+              data: { voidedAt: new Date() },
+            });
+          }
+        } else if (openings[0]) {
+          await tx.financialMovement.update({
+            where: { id: openings[0].id },
+            data: { amount: nextAmount, occurredAt: nextDate, direction: 'in' },
+          });
+          const extra = openings.slice(1).map((row) => row.id);
+          if (extra.length) {
+            await tx.financialMovement.updateMany({
+              where: { id: { in: extra } },
+              data: { voidedAt: new Date() },
+            });
+          }
+        } else {
+          await tx.financialMovement.create({
+            data: {
+              organizationId: actor.organizationId,
+              accountId: existing.id,
+              direction: 'in',
+              amount: nextAmount,
+              kind: 'opening',
+              occurredAt: nextDate,
+              memo: 'مانده افتتاحیه',
+              createdById: actor.userId,
+            },
+          });
+        }
+      }
+      return updated;
     });
     return this.toAccountDto(row);
   }
@@ -218,7 +351,7 @@ export class TreasuryService {
     accountId: string,
     range?: { from?: string; to?: string },
   ): Promise<{ account: FinancialAccountDto; items: FinancialMovementDto[] }> {
-    const account = await this.requireAccount(actor.organizationId, accountId);
+    const account = await this.requireAccount(actor.organizationId, accountId, actor);
     const from = startOfDay(range?.from);
     const to = startOfDay(range?.to);
     const rows = await this.prisma.financialMovement.findMany({
@@ -303,8 +436,8 @@ export class TreasuryService {
       if (dup) throw new BadRequestException('این انتقال قبلاً ثبت شده است.');
     }
     const [source, target] = await Promise.all([
-      this.requireAccount(actor.organizationId, input.fromAccountId),
-      this.requireAccount(actor.organizationId, input.toAccountId),
+      this.requireAccount(actor.organizationId, input.fromAccountId, actor),
+      this.requireAccount(actor.organizationId, input.toAccountId, actor),
     ]);
     if (!source.isActive || !target.isActive) {
       throw new BadRequestException('حساب غیرفعال در انتقال قابل استفاده نیست.');
@@ -354,10 +487,12 @@ export class TreasuryService {
     kind: 'income' | 'expense',
     q?: string,
   ): Promise<FinancialDocumentDto[]> {
+    const scope = await this.accountScope(actor);
     const rows = await this.prisma.financialDocument.findMany({
       where: {
         organizationId: actor.organizationId,
         kind,
+        ...(scope ? { OR: [{ accountId: null }, { accountId: { in: scope } }] } : {}),
         ...(q?.trim()
           ? {
               OR: [
@@ -384,7 +519,10 @@ export class TreasuryService {
       bookedAt?: string;
       dueAt?: string | null;
       categoryId?: string | null;
+      partyKind?: FinancialPartyKind | null;
       personId?: string | null;
+      companyId?: string | null;
+      userId?: string | null;
       partyName?: string | null;
       method?: string | null;
       reference?: string | null;
@@ -398,9 +536,13 @@ export class TreasuryService {
     const amount = dec(input.amount);
     if (title.length < 2) throw new BadRequestException('عنوان را وارد کنید.');
     if (!amount.greaterThan(0)) throw new BadRequestException('مبلغ باید بزرگ‌تر از صفر باشد.');
+    const party = await this.resolveParty(actor, input);
     const settle = input.settleAmount == null || input.settleAmount === ''
       ? new Prisma.Decimal(0)
       : dec(input.settleAmount);
+    if (party.partyKind === 'other' && !settle.equals(amount)) {
+      throw new BadRequestException('برای سایر، مبلغ دریافت یا پرداخت باید با مبلغ کل یکی باشد.');
+    }
     if (settle.isNegative() || settle.greaterThan(amount)) {
       throw new BadRequestException('مبلغ دریافت/پرداخت از مبلغ سند بیشتر است.');
     }
@@ -408,7 +550,7 @@ export class TreasuryService {
       throw new BadRequestException('برای ثبت وجه قطعی، حساب را انتخاب کنید.');
     }
     if (input.accountId) {
-      const account = await this.requireAccount(actor.organizationId, input.accountId);
+      const account = await this.requireAccount(actor.organizationId, input.accountId, actor);
       if (!account.isActive) throw new BadRequestException('حساب غیرفعال است.');
       if (input.kind === 'expense' && settle.greaterThan(0)) {
         const balance = await this.accountBalance(account.id);
@@ -419,6 +561,13 @@ export class TreasuryService {
     }
     const bookedAt = startOfDay(input.bookedAt) ?? new Date();
     const doc = await this.prisma.$transaction(async (tx) => {
+      const reference = await this.nextDocumentReference(
+        tx,
+        actor.organizationId,
+        input.kind,
+        input.bookedAt,
+        bookedAt,
+      );
       const created = await tx.financialDocument.create({
         data: {
           organizationId: actor.organizationId,
@@ -428,12 +577,15 @@ export class TreasuryService {
           bookedAt,
           dueAt: input.dueAt ? startOfDay(input.dueAt) : null,
           categoryId: input.categoryId || null,
-          personId: input.personId || null,
-          partyName: input.partyName?.trim() || null,
+          personId: party.personId,
+          companyId: party.companyId,
+          userId: party.userId,
+          partyKind: party.partyKind,
+          partyName: party.partyName,
           accountId: input.accountId || null,
           method: input.method || null,
           status: settle.equals(0) ? 'open' : settle.equals(amount) ? 'settled' : 'partial',
-          reference: input.reference?.trim() || null,
+          reference,
           notes: input.notes?.trim() || null,
           createdById: actor.userId,
         },
@@ -449,7 +601,7 @@ export class TreasuryService {
             kind: input.kind === 'income' ? 'receipt' : 'payment',
             occurredAt: startOfDay(input.settledAt ?? undefined) ?? bookedAt,
             memo: title,
-            reference: input.reference?.trim() || null,
+            reference,
             createdById: actor.userId,
           },
         });
@@ -462,6 +614,221 @@ export class TreasuryService {
     return this.toDocumentDto(doc);
   }
 
+  /** شماره پیگیری روزانه: DR-14050813-0001 برای درآمد و PD-… برای هزینه. */
+  private async nextDocumentReference(
+    tx: Prisma.TransactionClient,
+    organizationId: string,
+    kind: 'income' | 'expense',
+    bookedAtInput: string | undefined,
+    bookedAt: Date,
+  ) {
+    const match = bookedAtInput?.match(/^(\d{4})-(\d{2})-(\d{2})/);
+    const when = match
+      ? new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+      : bookedAt;
+    const { jy, jm, jd } = dateToJalali(when);
+    const ymd = `${jy}${String(jm).padStart(2, '0')}${String(jd).padStart(2, '0')}`;
+    const prefix = `${kind === 'income' ? 'DR' : 'PD'}-${ymd}-`;
+    await tx.$executeRaw`SELECT pg_advisory_xact_lock(hashtext(${`finref:${organizationId}:${prefix}`})::bigint)`;
+    const latest = await tx.financialDocument.findFirst({
+      where: { organizationId, reference: { startsWith: prefix } },
+      orderBy: { reference: 'desc' },
+      select: { reference: true },
+    });
+    const current = Number(latest?.reference?.slice(prefix.length));
+    const next = Number.isFinite(current) && current > 0 ? current + 1 : 1;
+    return `${prefix}${String(next).padStart(4, '0')}`;
+  }
+
+  async searchParties(actor: Actor, q?: string): Promise<TreasuryPartySearchDto> {
+    const term = q?.trim() ?? '';
+    const contains = term ? { contains: term, mode: 'insensitive' as const } : undefined;
+    const [people, companies, users] = await Promise.all([
+      this.prisma.person.findMany({
+        where: {
+          organizationId: actor.organizationId,
+          ...(contains ? { OR: [{ firstName: contains }, { lastName: contains }] } : {}),
+        },
+        select: { id: true, firstName: true, lastName: true },
+        orderBy: { updatedAt: 'desc' },
+        take: 20,
+      }),
+      this.prisma.company.findMany({
+        where: {
+          organizationId: actor.organizationId,
+          ...(contains ? { name: contains } : {}),
+        },
+        select: { id: true, name: true },
+        orderBy: { updatedAt: 'desc' },
+        take: 20,
+      }),
+      this.prisma.user.findMany({
+        where: {
+          organizationId: actor.organizationId,
+          isActive: true,
+          ...(contains ? { fullName: contains } : {}),
+        },
+        select: { id: true, fullName: true },
+        orderBy: { fullName: 'asc' },
+        take: 20,
+      }),
+    ]);
+    return {
+      people: people.map((row) => ({
+        id: row.id,
+        name: `${row.firstName} ${row.lastName}`.trim() || 'مشتری',
+      })),
+      companies,
+      users: users.map((row) => ({ id: row.id, name: row.fullName })),
+    };
+  }
+
+  async createPartyPerson(actor: Actor, input: { firstName?: string; lastName?: string }) {
+    const firstName = input.firstName?.trim() ?? '';
+    const lastName = input.lastName?.trim() ?? '';
+    if (`${firstName} ${lastName}`.trim().length < 2) {
+      throw new BadRequestException('نام شخص را وارد کنید.');
+    }
+    const person = await this.people.create(actor, { firstName, lastName });
+    return { id: person.id, name: person.fullName, kind: 'person' as const };
+  }
+
+  async createPartyCompany(actor: Actor, input: { name?: string }) {
+    const name = input.name?.trim() ?? '';
+    if (name.length < 2) throw new BadRequestException('نام شرکت را وارد کنید.');
+    const company = await this.companies.create(actor, { name });
+    return { id: company.id, name: company.name, kind: 'company' as const };
+  }
+
+  async partyBalances(actor: Actor, kind: 'income' | 'expense'): Promise<TreasuryPartyBalanceDto[]> {
+    const scope = await this.accountScope(actor);
+    const rows = await this.prisma.financialDocument.findMany({
+      where: {
+        organizationId: actor.organizationId,
+        kind,
+        voidedAt: null,
+        status: { in: ['open', 'partial'] },
+        ...(scope ? { OR: [{ accountId: null }, { accountId: { in: scope } }] } : {}),
+      },
+      select: {
+        amount: true,
+        partyKind: true,
+        personId: true,
+        companyId: true,
+        userId: true,
+        partyName: true,
+        movements: { select: { amount: true, voidedAt: true } },
+      },
+    });
+    const buckets = new Map<string, {
+      key: string;
+      partyKind: FinancialPartyKind | null;
+      partyName: string;
+      amount: Prisma.Decimal;
+      settled: Prisma.Decimal;
+      remaining: Prisma.Decimal;
+    }>();
+    for (const row of rows) {
+      if (row.partyKind === 'other') continue;
+      const settled = this.settledOf(row.movements);
+      const rawRemaining = row.amount.minus(settled);
+      if (!rawRemaining.greaterThan(0)) continue;
+      const linkedId = row.personId || row.companyId || row.userId;
+      const partyKind = row.partyKind === 'person' || row.partyKind === 'company' || row.partyKind === 'user'
+        ? row.partyKind
+        : null;
+      const key = partyKind && linkedId
+        ? `${partyKind}:${linkedId}`
+        : `legacy:${(row.partyName || '').trim() || 'بدون طرف حساب'}`;
+      const current = buckets.get(key) ?? {
+        key,
+        partyKind,
+        partyName: row.partyName?.trim() || 'بدون طرف حساب',
+        amount: new Prisma.Decimal(0),
+        settled: new Prisma.Decimal(0),
+        remaining: new Prisma.Decimal(0),
+      };
+      current.amount = current.amount.plus(row.amount);
+      current.settled = current.settled.plus(settled);
+      current.remaining = current.remaining.plus(rawRemaining);
+      buckets.set(key, current);
+    }
+    return [...buckets.values()]
+      .sort((a, b) => b.remaining.comparedTo(a.remaining))
+      .map((row) => ({
+        key: row.key,
+        partyKind: row.partyKind,
+        partyName: row.partyName,
+        amount: money(row.amount),
+        settledAmount: money(row.settled),
+        remaining: money(row.remaining),
+      }));
+  }
+
+  private async resolveParty(
+    actor: Actor,
+    input: {
+      partyKind?: FinancialPartyKind | null;
+      personId?: string | null;
+      companyId?: string | null;
+      userId?: string | null;
+    },
+  ) {
+    const kind = input.partyKind;
+    if (kind === 'other') {
+      return { partyKind: 'other' as const, personId: null, companyId: null, userId: null, partyName: 'سایر' };
+    }
+    if (kind === 'person') {
+      const id = input.personId?.trim();
+      if (!id) throw new BadRequestException('مشتری را انتخاب کنید.');
+      const person = await this.prisma.person.findFirst({
+        where: { id, organizationId: actor.organizationId },
+        select: { id: true, firstName: true, lastName: true },
+      });
+      if (!person) throw new BadRequestException('مشتری پیدا نشد.');
+      return {
+        partyKind: 'person' as const,
+        personId: person.id,
+        companyId: null,
+        userId: null,
+        partyName: `${person.firstName} ${person.lastName}`.trim() || 'مشتری',
+      };
+    }
+    if (kind === 'company') {
+      const id = input.companyId?.trim();
+      if (!id) throw new BadRequestException('شرکت را انتخاب کنید.');
+      const company = await this.prisma.company.findFirst({
+        where: { id, organizationId: actor.organizationId },
+        select: { id: true, name: true },
+      });
+      if (!company) throw new BadRequestException('شرکت پیدا نشد.');
+      return {
+        partyKind: 'company' as const,
+        personId: null,
+        companyId: company.id,
+        userId: null,
+        partyName: company.name,
+      };
+    }
+    if (kind === 'user') {
+      const id = input.userId?.trim();
+      if (!id) throw new BadRequestException('کاربر را انتخاب کنید.');
+      const user = await this.prisma.user.findFirst({
+        where: { id, organizationId: actor.organizationId },
+        select: { id: true, fullName: true },
+      });
+      if (!user) throw new BadRequestException('کاربر پیدا نشد.');
+      return {
+        partyKind: 'user' as const,
+        personId: null,
+        companyId: null,
+        userId: user.id,
+        partyName: user.fullName,
+      };
+    }
+    throw new BadRequestException('طرف حساب را انتخاب کنید.');
+  }
+
   async settleDocument(
     actor: Actor,
     id: string,
@@ -482,7 +849,7 @@ export class TreasuryService {
     if (amount.greaterThan(remaining)) {
       throw new BadRequestException('مبلغ از مانده سند بیشتر است.');
     }
-    const account = await this.requireAccount(actor.organizationId, input.accountId);
+    const account = await this.requireAccount(actor.organizationId, input.accountId, actor);
     if (!account.isActive) throw new BadRequestException('حساب غیرفعال است.');
     if (doc.kind === 'expense') {
       const balance = await this.accountBalance(account.id);
@@ -644,9 +1011,14 @@ export class TreasuryService {
   ): Promise<TreasuryDashboardDto> {
     const from = startOfDay(range?.from);
     const to = startOfDay(range?.to);
+    const scope = await this.accountScope(actor);
+    const accountFilter = scope
+      ? { OR: [{ accountId: null }, { accountId: { in: scope } }] }
+      : {};
     const bookedWhere = {
       organizationId: actor.organizationId,
       status: { not: 'void' },
+      ...accountFilter,
       ...(from || to
         ? { bookedAt: { ...(from ? { gte: from } : {}), ...(to ? { lte: to } : {}) } }
         : {}),
@@ -654,6 +1026,7 @@ export class TreasuryService {
     const cashWhere = {
       organizationId: actor.organizationId,
       voidedAt: null,
+      ...(scope ? { accountId: { in: scope } } : {}),
       ...(from || to
         ? { occurredAt: { ...(from ? { gte: from } : {}), ...(to ? { lte: to } : {}) } }
         : {}),
@@ -680,12 +1053,13 @@ export class TreasuryService {
         where: {
           organizationId: actor.organizationId,
           status: { in: ['open', 'partial'] },
+          ...accountFilter,
         },
         include: { movements: true },
       }),
       this.listAccounts(actor),
       this.prisma.financialDocument.findMany({
-        where: { organizationId: actor.organizationId },
+        where: { organizationId: actor.organizationId, ...accountFilter },
         include: { category: true, account: true, movements: true },
         orderBy: { createdAt: 'desc' },
         take: 8,
@@ -754,11 +1128,50 @@ export class TreasuryService {
     );
   }
 
-  private async requireAccount(organizationId: string, id: string) {
+  private async accountScope(actor: Actor): Promise<string[] | null> {
+    if (actor.role === 'owner' || actor.role === 'admin') return null;
+    const membership = await this.prisma.membership.findFirst({
+      where: { userId: actor.userId, organizationId: actor.organizationId, isActive: true },
+      select: {
+        user: { select: { fullName: true } },
+        orgRole: { select: { treasuryAccountIds: true, treasuryOwnAccounts: true } },
+        treasuryAccessOverride: true,
+      },
+    });
+    const override = parseUserTreasuryAccess(membership?.treasuryAccessOverride);
+    if (override && !override.enabled) return [];
+    const extra = override
+      ? override.accountIds
+      : (membership?.orgRole?.treasuryAccountIds ?? []);
+    const own = override
+      ? override.ownAccounts
+      : Boolean(membership?.orgRole?.treasuryOwnAccounts);
+    if (!own && extra.length === 0) return null;
+    const ids = new Set(extra);
+    const name = membership?.user.fullName?.trim();
+    if (own && name) {
+      const rows = await this.prisma.financialAccount.findMany({
+        where: { organizationId: actor.organizationId, responsibleName: { not: null } },
+        select: { id: true, responsibleName: true },
+      });
+      for (const row of rows) {
+        if (row.responsibleName?.trim() === name) ids.add(row.id);
+      }
+    }
+    return [...ids];
+  }
+
+  private async requireAccount(organizationId: string, id: string, actor?: Actor) {
     const row = await this.prisma.financialAccount.findFirst({
       where: { id, organizationId },
     });
     if (!row) throw new NotFoundException('حساب پیدا نشد.');
+    if (actor) {
+      const scope = await this.accountScope(actor);
+      if (scope && !scope.includes(row.id)) {
+        throw new ForbiddenException('به این حساب دسترسی ندارید.');
+      }
+    }
     return row;
   }
 
@@ -824,7 +1237,10 @@ export class TreasuryService {
     bookedAt: Date;
     dueAt: Date | null;
     categoryId: string | null;
+    partyKind?: string | null;
     personId: string | null;
+    companyId?: string | null;
+    userId?: string | null;
     partyName: string | null;
     accountId: string | null;
     method: string | null;
@@ -851,7 +1267,10 @@ export class TreasuryService {
       dueAt: row.dueAt ? row.dueAt.toISOString() : null,
       categoryId: row.categoryId,
       categoryName: row.category?.name ?? null,
+      partyKind: (row.partyKind as FinancialDocumentDto['partyKind']) ?? null,
       personId: row.personId,
+      companyId: row.companyId ?? null,
+      userId: row.userId ?? null,
       partyName: row.partyName,
       accountId: row.accountId,
       accountName: row.account?.name ?? null,

apps/api/src/users/dto.ts

@@ -128,4 +128,10 @@ export class UpdateUserDataAccessDto {
   @IsOptional()
   @IsObject()
   dataAccessOverride?: Record<string, unknown> | null;
+
+  /** null = ارث از نقش */
+  @ValidateIf((_, v) => v !== null)
+  @IsOptional()
+  @IsObject()
+  treasuryAccessOverride?: Record<string, unknown> | null;
 }

apps/api/src/users/users.service.ts

@@ -14,7 +14,12 @@ import type {
   UpdateUserVisibilityRequest,
   UserRole,
 } from '@mento/shared';
-import { DATA_SCOPES, DATA_VISIBILITIES, parseDataAccessPolicy } from '@mento/shared';
+import {
+  DATA_SCOPES,
+  DATA_VISIBILITIES,
+  parseDataAccessPolicy,
+  parseUserTreasuryAccess,
+} from '@mento/shared';
 import { resolveAllSectionAccess } from '../common/data-access';
 import { parseVisibilityScopes } from '../common/record-scope';
 import * as bcrypt from 'bcryptjs';
@@ -47,6 +52,7 @@ type MembershipRow = {
   dataVisibility?: string | null;
   dataVisibilityScopes?: unknown;
   dataAccessOverride?: unknown;
+  treasuryAccessOverride?: unknown;
   priorArchiveEnabled?: boolean;
   logoutTime?: string | null;
   blockLoginAfterLogout?: boolean;
@@ -370,23 +376,35 @@ export class UsersService {
     organizationId: string,
     actorRole: UserRole,
     targetId: string,
-    dto: { dataAccessOverride?: Record<string, unknown> | null },
+    dto: {
+      dataAccessOverride?: Record<string, unknown> | null;
+      treasuryAccessOverride?: Record<string, unknown> | null;
+    },
   ): Promise<OrgUserDto> {
     if (actorRole !== 'owner' && actorRole !== 'admin') {
       throw new ForbiddenException('اجازه تغییر محدوده داده را ندارید');
     }
-    if (dto.dataAccessOverride === undefined) {
+    if (dto.dataAccessOverride === undefined && dto.treasuryAccessOverride === undefined) {
       throw new BadRequestException('تغییری ارسال نشده است');
     }
     const target = await this.memberships.findUserInOrgById(organizationId, targetId);
     if (target.role === 'owner' || target.role === 'admin') {
       throw new BadRequestException('مالک و مدیر محدودیت عمق داده ندارند');
     }
-    const next =
-      dto.dataAccessOverride === null ? {} : parseDataAccessPolicy(dto.dataAccessOverride);
+    const data: Prisma.MembershipUpdateInput = {};
+    if (dto.dataAccessOverride !== undefined) {
+      data.dataAccessOverride =
+        dto.dataAccessOverride === null ? {} : parseDataAccessPolicy(dto.dataAccessOverride);
+    }
+    if (dto.treasuryAccessOverride !== undefined) {
+      data.treasuryAccessOverride =
+        dto.treasuryAccessOverride === null
+          ? Prisma.DbNull
+          : (parseUserTreasuryAccess(dto.treasuryAccessOverride) ?? Prisma.DbNull);
+    }
     await this.prisma.membership.update({
       where: { id: target.id },
-      data: { dataAccessOverride: next },
+      data,
     });
     return this.dtoOf(organizationId, targetId);
   }
@@ -606,6 +624,10 @@ export class UsersService {
         row.role === 'owner' || row.role === 'admin'
           ? {}
           : parseDataAccessPolicy(row.dataAccessOverride),
+      treasuryAccessOverride:
+        row.role === 'owner' || row.role === 'admin'
+          ? null
+          : parseUserTreasuryAccess(row.treasuryAccessOverride),
       ...(() => {
         const effectiveDataAccess = resolveAllSectionAccess({
           role: row.role,

apps/web/package.json

@@ -22,9 +22,7 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.3.3",
     "@vitejs/plugin-vue": "^5.2.3",
-    "tailwindcss": "^4.3.3",
     "typescript": "^5.8.2",
     "vite": "^6.2.2",
     "vue-tsc": "^2.2.8"

apps/web/src/components/AskMentoPanel.vue

@@ -4,20 +4,8 @@ import { RouterLink } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { rewriteGregorianDates } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
 import { brand, type AskMentoResponse, type AskMentoSourceDto } from '@mento/shared';
-import {
-  Alert as AAlert,
-  Button as AButton,
-  Card as ACard,
-  Flex as AFlex,
-  Input as AInput,
-  Space as ASpace,
-  Tag as ATag,
-  Typography,
-} from 'ant-design-vue';
-import { ThunderboltOutlined } from '@ant-design/icons-vue';
-
-const { Paragraph: ATypographyParagraph } = Typography;
 
 const props = defineProps<{
   personId?: string;
@@ -77,53 +65,127 @@ function insertAnswer() {
 </script>
 
 <template>
-  <a-flex vertical :gap="8" :style="{ minWidth: 0 }">
-    <a-flex :gap="8" align="center" :style="{ width: '100%' }">
-      <a-input
-        v-model:value="question"
-        allow-clear
+  <section class="ask">
+    <form @submit.prevent="submit">
+      <UiIcon name="sparkle" :size="16" class="ico" />
+      <input
+        v-model="question"
+        type="search"
         :placeholder="placeholder || brand.askPlaceholderFa"
-        :style="{ flex: 1, minWidth: 0 }"
-        @pressEnter="submit"
-      >
-        <template #prefix>
-          <ThunderboltOutlined />
-        </template>
-      </a-input>
-      <a-button
-        type="primary"
-        :disabled="asking || question.trim().length < 2"
-        :loading="asking"
-        @click="submit"
-      >
-        بپرس
-      </a-button>
-    </a-flex>
-
-    <a-alert v-if="error" type="error" show-icon :message="error" />
-
-    <a-card v-else-if="result" :bordered="false">
-      <a-typography-paragraph :style="{ marginBottom: 0 }">
-        {{ result.answer }}
-      </a-typography-paragraph>
-      <a-space v-if="result.sources.length" wrap :size="6" :style="{ marginTop: '8px' }">
+      />
+      <button type="submit" :disabled="asking || question.trim().length < 2">
+        {{ asking ? '…' : 'بپرس' }}
+      </button>
+    </form>
+    <p v-if="error" class="error">{{ error }}</p>
+    <div v-else-if="result" class="answer">
+      <p>{{ result.answer }}</p>
+      <div v-if="result.sources.length" class="sources">
         <RouterLink
           v-for="source in result.sources"
           :key="`${source.type}-${source.id}`"
           :to="sourceTo(source)"
         >
-          <a-tag color="cyan" :bordered="false">{{ source.label }}</a-tag>
+          {{ source.label }}
         </RouterLink>
-      </a-space>
-      <a-button
+      </div>
+      <button
         v-if="allowInsert && result.answer.trim()"
-        type="primary"
-        block
-        :style="{ marginTop: '8px' }"
+        type="button"
+        class="insert-btn"
         @click="insertAnswer"
       >
         درج در پیام
-      </a-button>
-    </a-card>
-  </a-flex>
+      </button>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+.ask {
+  display: grid;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+form {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  padding: 0.35rem 0.4rem 0.35rem 0.7rem;
+}
+
+.ico {
+  color: #0f766e;
+  flex-shrink: 0;
+}
+
+input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  padding: 0.45rem 0;
+}
+
+button {
+  border: 0;
+  border-radius: var(--radius);
+  background: #14b8a6;
+  color: #fff;
+  font: inherit;
+  font-weight: 700;
+  padding: 0.45rem 0.8rem;
+  cursor: pointer;
+}
+
+button:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.answer {
+  background: #f0fdfa;
+  border-radius: var(--radius);
+  padding: 0.7rem 0.85rem;
+}
+
+.answer p {
+  margin: 0;
+  color: #134e4a;
+  font-size: 0.88rem;
+  line-height: 1.7;
+}
+
+.sources {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.55rem;
+}
+
+.sources a {
+  font-size: 0.74rem;
+  font-weight: 700;
+  color: #0f766e;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.18rem 0.55rem;
+}
+
+.insert-btn {
+  margin-top: 0.65rem;
+  width: 100%;
+  background: #0f766e;
+}
+
+.error {
+  margin: 0;
+  color: #b91c1c;
+  font-size: 0.84rem;
+}
+</style>

apps/web/src/components/DataAccessEditor.vue

@@ -1,17 +1,6 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue';
-import {
-  Alert as AAlert,
-  Card as ACard,
-  Checkbox as ACheckbox,
-  Flex as AFlex,
-  FormItem as AFormItem,
-  Radio as ARadio,
-  RadioGroup as ARadioGroup,
-  Select as ASelect,
-  Space as ASpace,
-  Typography,
-} from 'ant-design-vue';
+import { Select as ASelect } from 'ant-design-vue';
 import type {
   DataAccessOwnerKind,
   DataAccessRule,
@@ -26,12 +15,9 @@ import {
   PERSON_MOODS,
   sectionHasDataAccessLimits,
 } from '@mento/shared';
-
 export type IdOption = { id: string; name: string };
 type Choice = { value: string; label: string };
 
-const { Text: ATypographyText } = Typography;
-
 const props = withDefaults(
   defineProps<{
     modelValue: SectionDataAccess;
@@ -443,59 +429,53 @@ const filterSummary = computed(() => {
 </script>
 
 <template>
-  <a-flex vertical :gap="compact ? 8 : 12">
-    <a-radio-group v-model:value="mode" :disabled="disabled">
-      <a-flex vertical :gap="4">
-        <a-radio value="all">همهٔ {{ sectionLabel }}</a-radio>
-        <a-radio value="rules">محدود با فیلتر</a-radio>
-      </a-flex>
-    </a-radio-group>
+  <div class="dae" :class="{ compact }">
+    <div class="dae-mode">
+      <label>
+        <input v-model="mode" type="radio" value="all" :disabled="disabled" />
+        همهٔ {{ sectionLabel }}
+      </label>
+      <label>
+        <input v-model="mode" type="radio" value="rules" :disabled="disabled" />
+        محدود با فیلتر
+      </label>
+    </div>
 
     <template v-if="mode === 'rules'">
-      <a-typography-text type="secondary">
+      <p class="hint">
         فقط رکوردهایی دیده می‌شوند که با
         <strong>همهٔ فیلترهای پرشده</strong>
         جور باشند. در هر فهرست، چند انتخاب یعنی هر کدام کافی است. خالی یعنی بدون محدودیت.
-      </a-typography-text>
-      <a-alert
-        v-if="hadMultipleRules"
-        type="warning"
-        show-icon
-        message="تنظیم قبلی چندتکه بود؛ اینجا در یک فیلتر ادغام شده. با ذخیره به همین شکل ساده ثبت می‌شود."
-      />
-      <a-typography-text strong>{{ filterSummary }}</a-typography-text>
+      </p>
+      <p v-if="hadMultipleRules" class="hint warn">
+        تنظیم قبلی چندتکه بود؛ اینجا در یک فیلتر ادغام شده. با ذخیره به همین شکل ساده ثبت می‌شود.
+      </p>
+      <p class="summary">{{ filterSummary }}</p>
 
-      <a-card size="small" title="مالک / مسئول" :bordered="true">
-        <a-flex vertical :gap="8">
-          <a-typography-text type="secondary">خالی = بدون محدودیت مالک</a-typography-text>
-          <a-space wrap :size="8">
-            <a-checkbox
-              :checked="filter.owners?.includes('self')"
-              :disabled="disabled"
-              @change="toggleOwner('self')"
-            >
-              {{ ownerSelfLabel }}
-            </a-checkbox>
-            <a-checkbox
-              :checked="filter.owners?.includes('team')"
-              :disabled="disabled"
-              @change="toggleOwner('team')"
-            >
-              تیم‌های عضو
-            </a-checkbox>
-          </a-space>
-        </a-flex>
-      </a-card>
+      <fieldset :disabled="disabled">
+        <legend>مالک / مسئول</legend>
+        <p class="muted">خالی = بدون محدودیت مالک</p>
+        <label class="chip">
+          <input
+            type="checkbox"
+            :checked="filter.owners?.includes('self')"
+            @change="toggleOwner('self')"
+          />
+          {{ ownerSelfLabel }}
+        </label>
+        <label class="chip">
+          <input
+            type="checkbox"
+            :checked="filter.owners?.includes('team')"
+            @change="toggleOwner('team')"
+          />
+          تیم‌های عضو
+        </label>
+      </fieldset>
 
-      <a-form-item
-        v-for="picker in pickers"
-        :key="picker.legend"
-        :label="picker.legend"
-        :style="{ marginBottom: 0 }"
-      >
-        <a-typography-text v-if="picker.loading" type="secondary">
-          در حال بارگذاری منبع‌ها…
-        </a-typography-text>
+      <label v-for="picker in pickers" :key="picker.legend" class="pick">
+        <span>{{ picker.legend }}</span>
+        <p v-if="picker.loading" class="muted">در حال بارگذاری منبع‌ها…</p>
         <a-select
           v-else
           :value="pickerValue(picker)"
@@ -510,14 +490,70 @@ const filterSummary = computed(() => {
           style="width: 100%"
           @update:value="setList(picker.key, $event)"
         />
-        <a-typography-text v-if="picker.hint" type="secondary">
-          {{ picker.hint }}
-        </a-typography-text>
-      </a-form-item>
+        <p v-if="picker.hint" class="muted">{{ picker.hint }}</p>
+      </label>
     </template>
 
-    <a-typography-text v-else-if="!hasLimits" type="secondary">
+    <p v-else-if="!hasLimits" class="hint">
       بدون محدودیت — همهٔ {{ sectionLabel }} قابل مشاهده‌اند.
-    </a-typography-text>
-  </a-flex>
+    </p>
+  </div>
 </template>
+
+<style scoped>
+.dae {
+  display: grid;
+  gap: 0.75rem;
+}
+.dae-mode {
+  display: grid;
+  gap: 0.35rem;
+}
+.dae-mode label,
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.88rem;
+  margin-inline-end: 0.55rem;
+  margin-bottom: 0.25rem;
+}
+.hint,
+.muted,
+.summary {
+  color: #64748b;
+  font-size: 0.82rem;
+  margin: 0;
+}
+.hint.warn {
+  color: #b45309;
+}
+.summary {
+  font-weight: 600;
+  color: #334155;
+}
+fieldset {
+  border: 1px dashed #e2e8f0;
+  border-radius: 8px;
+  padding: 0.5rem 0.65rem;
+  margin: 0;
+}
+legend {
+  padding-inline: 0.25rem;
+  font-size: 0.8rem;
+  color: #475569;
+  font-weight: 600;
+}
+.pick {
+  display: grid;
+  gap: 0.35rem;
+}
+.pick > span {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #475569;
+}
+.compact fieldset {
+  padding: 0.45rem 0.55rem;
+}
+</style>

apps/web/src/components/DataAccessPolicyPanel.vue

@@ -1,34 +1,39 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
-import { Tabs as ATabs, TabPane as ATabPane, Typography } from 'ant-design-vue';
 import type {
   DataAccessPolicy,
   DataAccessSection,
+  FinancialAccountDto,
   PersonImportSourceStatDto,
   RolePermissionKey,
   SectionDataAccess,
+  UserTreasuryAccess,
 } from '@mento/shared';
 import {
   DATA_ACCESS_SECTION_LABELS,
   DATA_ACCESS_SECTIONS,
+  ROLE_PERMISSION_ITEMS,
   emptySectionDataAccess,
 } from '@mento/shared';
 import { api } from '@/lib/api';
 import { useCustomerGroups } from '@/lib/customer-groups';
 import DataAccessEditor, { type IdOption } from '@/components/DataAccessEditor.vue';
 
-const { Text: ATypographyText } = Typography;
-
 const props = defineProps<{
   modelValue: DataAccessPolicy;
   /** فقط بخش‌هایی که این مجوزها را دارند نشان بده؛ خالی = همه */
   enabledPermissions?: RolePermissionKey[];
   disabled?: boolean;
+  /** تب‌های عمق داده قفل شوند؛ تب مدیریت مالی جدا می‌ماند */
+  dataLocked?: boolean;
+  showTreasury?: boolean;
+  treasuryAccess?: UserTreasuryAccess | null;
   compact?: boolean;
 }>();
 
 const emit = defineEmits<{
   'update:modelValue': [DataAccessPolicy];
+  'update:treasuryAccess': [UserTreasuryAccess | null];
 }>();
 
 /** بخش‌هایی که به RolePermissionKey وصل‌اند؛ بقیه (روتین/پروژه/تیکت) همیشه دیده می‌شوند */
@@ -50,12 +55,13 @@ const visibleSections = computed(() => {
   });
 });
 
-const active = ref<DataAccessSection>('customers');
+const treasurySections = ROLE_PERMISSION_ITEMS.filter((item) => item.key.startsWith('treasury_'));
+const active = ref<DataAccessSection | 'treasury'>('customers');
 
 watch(
   visibleSections,
   (list) => {
-    if (!list.includes(active.value) && list[0]) active.value = list[0];
+    if (active.value !== 'treasury' && !list.includes(active.value) && list[0]) active.value = list[0];
   },
   { immediate: true },
 );
@@ -92,6 +98,48 @@ const activityTypes = ref<IdOption[]>([]);
 const projectBoards = ref<IdOption[]>([]);
 const projectStages = ref<IdOption[]>([]);
 const routineCategories = ref<IdOption[]>([]);
+const treasuryAccounts = ref<FinancialAccountDto[]>([]);
+const treasuryAccountQuery = ref('');
+
+const filteredTreasuryAccounts = computed(() => {
+  const query = treasuryAccountQuery.value.trim();
+  if (!query) return treasuryAccounts.value;
+  return treasuryAccounts.value.filter((account) => account.name.includes(query));
+});
+
+function emptyTreasuryAccess(): UserTreasuryAccess {
+  return { enabled: true, sections: [], ownAccounts: false, accountIds: [] };
+}
+
+function patchTreasury(next: UserTreasuryAccess | null) {
+  emit('update:treasuryAccess', next);
+}
+
+function toggleTreasurySection(key: RolePermissionKey) {
+  const current = props.treasuryAccess ?? emptyTreasuryAccess();
+  const sections = current.sections.includes(key)
+    ? current.sections.filter((item) => item !== key)
+    : [...current.sections, key];
+  patchTreasury({ ...current, enabled: true, sections });
+}
+
+function toggleTreasuryAccount(id: string) {
+  const current = props.treasuryAccess ?? emptyTreasuryAccess();
+  const accountIds = current.accountIds.includes(id)
+    ? current.accountIds.filter((item) => item !== id)
+    : [...current.accountIds, id];
+  patchTreasury({ ...current, enabled: true, accountIds });
+}
+
+async function loadTreasuryAccounts() {
+  if (!props.showTreasury) return;
+  try {
+    const { data } = await api.get<FinancialAccountDto[]>('/treasury/accounts');
+    treasuryAccounts.value = data;
+  } catch {
+    treasuryAccounts.value = [];
+  }
+}
 
 async function loadOptions() {
   await loadCustomerGroups().catch(() => undefined);
@@ -179,36 +227,197 @@ async function loadOptions() {
 
 onMounted(() => {
   void loadOptions();
+  void loadTreasuryAccounts();
+});
+
+const editorSection = computed<DataAccessSection>(() =>
+  active.value === 'treasury' ? 'customers' : active.value,
+);
+
+const stagesForActive = computed(() => {
+  if (active.value === 'leads') return leadStages.value;
+  if (active.value === 'sales') return dealStages.value;
+  if (active.value === 'activities') return activityStages.value;
+  if (active.value === 'projects') return projectStages.value;
+  return [];
+});
+
+const boardsForActive = computed(() => {
+  if (active.value === 'activities') return activityBoards.value;
+  if (active.value === 'projects') return projectBoards.value;
+  return [];
+});
+
+const typesForActive = computed(() => {
+  if (active.value === 'activities') return activityTypes.value;
+  if (active.value === 'routines') return routineCategories.value;
+  return [];
 });
 </script>
 
 <template>
-  <div>
-    <a-typography-text v-if="!visibleSections.length" type="secondary">
+  <div class="dap">
+    <p v-if="!visibleSections.length" class="muted">
       برای تنظیم محدوده، ابتدا مجوز بخش مربوط را روشن کنید.
-    </a-typography-text>
-    <a-tabs v-else v-model:activeKey="active">
-      <a-tab-pane
-        v-for="s in visibleSections"
-        :key="s"
-        :tab="DATA_ACCESS_SECTION_LABELS[s]"
-      >
-        <DataAccessEditor
-          :section="s"
-          :model-value="sectionValue(s)"
-          :groups="customerGroups"
-          :stages="s === 'leads' ? leadStages : s === 'sales' ? dealStages : s === 'activities' ? activityStages : s === 'projects' ? projectStages : []"
-          :pipelines="pipelines"
-          :boards="s === 'activities' ? activityBoards : s === 'projects' ? projectBoards : []"
-          :activity-types="s === 'activities' ? activityTypes : s === 'routines' ? routineCategories : []"
-          :import-sources="importSources"
-          :import-sources-ready="importSourcesReady"
-          :import-sources-failed="importSourcesFailed"
-          :disabled="disabled"
-          :compact="compact"
-          @update:model-value="setSection(s, $event)"
-        />
-      </a-tab-pane>
-    </a-tabs>
+    </p>
+    <template v-else>
+      <div class="tabs" role="tablist">
+        <button
+          v-for="s in visibleSections"
+          :key="s"
+          type="button"
+          class="tab"
+          :class="{ on: active === s }"
+          role="tab"
+          :aria-selected="active === s"
+          @click="active = s"
+        >
+          {{ DATA_ACCESS_SECTION_LABELS[s] }}
+        </button>
+        <button
+          v-if="showTreasury"
+          type="button"
+          class="tab"
+          :class="{ on: active === 'treasury' }"
+          role="tab"
+          :aria-selected="active === 'treasury'"
+          @click="active = 'treasury'"
+        >
+          مدیریت مالی
+        </button>
+      </div>
+      <div v-if="active === 'treasury'" class="treasury">
+        <p class="muted">
+          این برگه فقط برای همین کاربر است. «مثل نقش» یعنی همان دسترسی مالی نقش بماند.
+          در حالت سفارشی، اگر هیچ بخش ریزی تیک نخورد همه بخش‌ها به‌جز حقوق باز می‌مانند و حقوق جداست.
+          اگر هیچ حسابی انتخاب نشود همه حساب‌ها باز است.
+        </p>
+        <label class="choice">
+          <input
+            type="radio"
+            name="user-treasury"
+            :checked="treasuryAccess == null"
+            :disabled="disabled"
+            @change="patchTreasury(null)"
+          />
+          مثل نقش
+        </label>
+        <label class="choice">
+          <input
+            type="radio"
+            name="user-treasury"
+            :checked="treasuryAccess != null"
+            :disabled="disabled"
+            @change="patchTreasury(treasuryAccess ?? emptyTreasuryAccess())"
+          />
+          سفارشی برای این کاربر
+        </label>
+        <template v-if="treasuryAccess">
+          <label class="choice">
+            <input
+              type="checkbox"
+              :checked="treasuryAccess.enabled"
+              :disabled="disabled"
+              @change="patchTreasury({ ...treasuryAccess, enabled: !treasuryAccess.enabled })"
+            />
+            دسترسی به مدیریت مالی
+          </label>
+          <template v-if="treasuryAccess.enabled">
+            <label v-for="perm in treasurySections" :key="perm.key" class="choice sub">
+              <input
+                type="checkbox"
+                :checked="treasuryAccess.sections.includes(perm.key)"
+                :disabled="disabled"
+                @change="toggleTreasurySection(perm.key)"
+              />
+              {{ perm.label }}
+            </label>
+            <label class="choice">
+              <input
+                type="checkbox"
+                :checked="treasuryAccess.ownAccounts"
+                :disabled="disabled"
+                @change="patchTreasury({ ...treasuryAccess, ownAccounts: !treasuryAccess.ownAccounts })"
+              />
+              حساب‌هایی که خودش مسئول آن‌هاست
+            </label>
+            <p class="muted">حساب‌های دیگر</p>
+            <input v-model="treasuryAccountQuery" placeholder="جستجوی حساب" :disabled="disabled" />
+            <label v-for="account in filteredTreasuryAccounts" :key="account.id" class="choice">
+              <input
+                type="checkbox"
+                :checked="treasuryAccess.accountIds.includes(account.id)"
+                :disabled="disabled"
+                @change="toggleTreasuryAccount(account.id)"
+              />
+              {{ account.name }}
+              <template v-if="account.responsibleName"> — مسئول: {{ account.responsibleName }}</template>
+            </label>
+            <p v-if="!treasuryAccounts.length" class="muted">حسابی برای انتخاب نیست.</p>
+          </template>
+        </template>
+      </div>
+      <DataAccessEditor
+        v-else
+        :key="active"
+        :section="editorSection"
+        :model-value="sectionValue(editorSection)"
+        :groups="customerGroups"
+        :stages="stagesForActive"
+        :pipelines="pipelines"
+        :boards="boardsForActive"
+        :activity-types="typesForActive"
+        :import-sources="importSources"
+        :import-sources-ready="importSourcesReady"
+        :import-sources-failed="importSourcesFailed"
+        :disabled="disabled || dataLocked"
+        :compact="compact"
+        @update:model-value="setSection(editorSection, $event)"
+      />
+    </template>
   </div>
 </template>
+
+<style scoped>
+.dap {
+  display: grid;
+  gap: 0.75rem;
+}
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+.tab {
+  font: inherit;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.3rem 0.7rem;
+  cursor: pointer;
+  color: #475569;
+}
+.tab.on {
+  border-color: #0f766e;
+  background: #f0fdfa;
+  color: #0f766e;
+  font-weight: 600;
+}
+.muted {
+  color: #64748b;
+  font-size: 0.85rem;
+}
+.treasury {
+  display: grid;
+  gap: 0.45rem;
+}
+.choice {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.4rem;
+  align-items: center;
+}
+.choice.sub {
+  padding-inline-start: 1.2rem;
+}
+</style>

apps/web/src/components/ExcelImportFlow.vue.bak

@@ -1,568 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
-import axios from 'axios';
-import { api } from '@/lib/api';
-import type {
-  ExcelFieldOption,
-  ExcelImportPrepareStatus,
-  ExcelPreviewResult,
-  ImportContactsResult,
-} from '@mento/shared';
-import {
-  previewExcelClient,
-  readMappedRowsClient,
-  type ClientExcelReadOptions,
-} from '@/lib/excel-client';
-import { UiBusyOverlay, UiButton, UiModal, UiSelect } from '@/components/ui';
-
-const props = defineProps<{
-  previewPath: string;
-  importPath: string;
-  /** اگر باشد: ابتدا فقط فایل خوانده می‌شود، بعد تکه‌تکه وارد می‌شود (برای فایل‌های خیلی بزرگ) */
-  preparePath?: string;
-  /**
-   * ایمپورت مرورگرگرا: اکسل در مرورگر خوانده می‌شود و فقط JSON کوچک به API می‌رود.
-   * برای فایل‌های ده‌ها هزار ردیفی (جلوگیری از ۵۰۲ nginx).
-   */
-  rowsImportPath?: string;
-  clientAliases?: Record<string, string>;
-  clientFields?: ExcelFieldOption[];
-  /** تشخیص خروجی بدون‌هدر (مثل فعالیت دیدار) */
-  clientReadOptions?: ClientExcelReadOptions;
-  disabled?: boolean;
-}>();
-
-const useClientImport = computed(
-  () =>
-    Boolean(
-      props.rowsImportPath &&
-        props.clientAliases &&
-        props.clientFields?.length,
-    ),
-);
-
-const emit = defineEmits<{
-  start: [];
-  done: [result: ImportContactsResult];
-  fail: [message: string];
-  settled: [];
-}>();
-
-const input = ref<HTMLInputElement | null>(null);
-const pending = ref<File | null>(null);
-const preview = ref<ExcelPreviewResult | null>(null);
-const mapping = reactive<Record<string, string>>({});
-const submitting = ref(false);
-const phase = ref<'idle' | 'preview' | 'import'>('idle');
-const progressLabel = ref('');
-/** درصد ۰–۱۰۰؛ در مرحلهٔ خواندن فایل null */
-const progressPct = ref<number | null>(null);
-
-const requiredKeys = computed(
-  () => preview.value?.fields.filter((f) => f.required).map((f) => f.key) ?? [],
-);
-
-const mappedFields = computed(() => new Set(Object.values(mapping).filter(Boolean)));
-
-const canImport = computed(() => requiredKeys.value.every((key) => mappedFields.value.has(key)));
-
-const busyOpen = computed(() => submitting.value && phase.value !== 'idle');
-const busyMessage = computed(() => {
-  if (phase.value === 'import') {
-    return progressLabel.value || 'در حال ورود اطلاعات از اکسل…';
-  }
-  return 'در حال خواندن و بررسی فایل اکسل…';
-});
-const busyProgress = computed(() =>
-  phase.value === 'import' ? progressPct.value : null,
-);
-
-function pick() {
-  if (props.disabled || submitting.value) return;
-  input.value?.click();
-}
-
-function reset() {
-  pending.value = null;
-  preview.value = null;
-  submitting.value = false;
-  phase.value = 'idle';
-  progressLabel.value = '';
-  progressPct.value = null;
-  for (const key of Object.keys(mapping)) delete mapping[key];
-}
-
-function closeMapper() {
-  if (submitting.value) return;
-  reset();
-  emit('settled');
-}
-
-function setColumnField(header: string, field: string) {
-  if (field) {
-    for (const [col, current] of Object.entries(mapping)) {
-      if (col !== header && current === field) mapping[col] = '';
-    }
-  }
-  mapping[header] = field;
-}
-
-function mergeImportResults(
-  acc: ImportContactsResult,
-  part: ImportContactsResult,
-): ImportContactsResult {
-  const errors = [...acc.errors, ...(part.errors ?? [])];
-  return {
-    created: acc.created + (part.created ?? 0),
-    skipped: acc.skipped + (part.skipped ?? 0),
-    errors: errors.slice(0, 200),
-    boardId: part.boardId ?? acc.boardId,
-    boards: part.boards?.length ? part.boards : acc.boards,
-    sessionId: part.sessionId,
-    total: part.total ?? acc.total,
-    processed: part.processed ?? acc.processed,
-    hasMore: part.hasMore,
-    nextOffset: part.nextOffset,
-  };
-}
-
-async function postImportChunk(opts: {
-  file?: File;
-  map?: Record<string, string>;
-  sessionId?: string;
-  offset?: number;
-}) {
-  const form = new FormData();
-  if (opts.file) form.append('file', opts.file);
-  if (opts.map && Object.values(opts.map).some(Boolean)) {
-    form.append('mapping', JSON.stringify(opts.map));
-  }
-  if (opts.sessionId) form.append('sessionId', opts.sessionId);
-  if (opts.offset != null) form.append('offset', String(opts.offset));
-  form.append('limit', '250');
-  const { data } = await api.post<ImportContactsResult>(props.importPath, form, {
-    headers: { 'Content-Type': undefined },
-    // خواندن فایل‌های خیلی بزرگ در مرحلهٔ اول ممکن است طول بکشد
-    timeout: opts.file ? 10 * 60 * 1000 : 3 * 60 * 1000,
-  });
-  return data;
-}
-
-function updateImportProgress(processed: number, total: number) {
-  if (total <= 0) {
-    progressPct.value = null;
-    progressLabel.value = 'در حال ورود اطلاعات از اکسل…';
-    return;
-  }
-  const pct = Math.max(0, Math.min(100, Math.round((processed / total) * 100)));
-  progressPct.value = pct;
-  progressLabel.value = `ورود فایل: ${processed.toLocaleString('fa-IR')} از ${total.toLocaleString('fa-IR')} ردیف`;
-}
-
-function sleep(ms: number) {
-  return new Promise((r) => setTimeout(r, ms));
-}
-
-async function postPrepare(file: File, map?: Record<string, string>) {
-  if (!props.preparePath) {
-    throw new Error('preparePath تنظیم نشده');
-  }
-  const form = new FormData();
-  form.append('file', file);
-  if (map && Object.values(map).some(Boolean)) {
-    form.append('mapping', JSON.stringify(map));
-  }
-  // فقط آپلود — پارس روی سرور ناهمگام است؛ تایم‌اوت کوتاه کافی است
-  const { data } = await api.post<ImportContactsResult>(props.preparePath, form, {
-    headers: { 'Content-Type': undefined },
-    timeout: 3 * 60 * 1000,
-  });
-  return data;
-}
-
-async function waitPrepareReady(sessionId: string) {
-  if (!props.preparePath) throw new Error('preparePath تنظیم نشده');
-  const statusUrl = `${props.preparePath}/${sessionId}`;
-  const started = Date.now();
-  const maxMs = 15 * 60 * 1000;
-  while (Date.now() - started < maxMs) {
-    const { data } = await api.get<ExcelImportPrepareStatus>(statusUrl, {
-      timeout: 30_000,
-    });
-    if (data.status === 'ready') {
-      progressLabel.value = `فایل آماده شد — ${data.total.toLocaleString('fa-IR')} ردیف`;
-      return data;
-    }
-    if (data.status === 'error') {
-      throw new Error(data.error || 'آماده‌سازی فایل اکسل ناموفق بود');
-    }
-    const parsed = data.parsed || 0;
-    progressPct.value = null;
-    progressLabel.value = parsed
-      ? `در حال خواندن فایل روی سرور… ${parsed.toLocaleString('fa-IR')} ردیف`
-      : 'در حال خواندن فایل روی سرور… لطفاً صبر کنید';
-    await sleep(1200);
-  }
-  throw new Error('آماده‌سازی فایل بیش از حد طول کشید. دوباره تلاش کنید.');
-}
-
-async function runClientRowsImport(file: File, map?: Record<string, string>) {
-  if (!props.rowsImportPath || !props.clientAliases) {
-    throw new Error('پیکربندی ایمپورت مرورگر ناقص است');
-  }
-  phase.value = 'import';
-  progressLabel.value = 'در حال خواندن فایل در مرورگر…';
-  progressPct.value = 0;
-
-  const rows = await readMappedRowsClient(
-    file,
-    props.clientAliases,
-    map,
-    props.clientReadOptions,
-  );
-  const total = rows.length;
-  if (total > 100_000) {
-    return {
-      created: 0,
-      skipped: 0,
-      errors: [{ row: 1, message: 'فایل بیش از ۱۰۰۰۰۰ ردیف دارد. فایل را تقسیم کنید.' }],
-      total,
-      processed: 0,
-      hasMore: false,
-    };
-  }
-
-  updateImportProgress(0, total);
-  let acc: ImportContactsResult = { created: 0, skipped: 0, errors: [] };
-  let sessionId: string | undefined;
-  const chunkSize = 60;
-
-  for (let offset = 0; offset < total; offset += chunkSize) {
-    const slice = rows.slice(offset, offset + chunkSize);
-    const { data: part } = await api.post<ImportContactsResult>(
-      props.rowsImportPath,
-      {
-        rows: slice,
-        offset,
-        total,
-        sessionId,
-      },
-      { timeout: 120_000 },
-    );
-    acc = mergeImportResults(acc, part);
-    updateImportProgress(part.processed ?? offset + slice.length, total);
-    if (part.errors?.some((e) => e.row === 1 && /حداکثر|بیش از/.test(e.message))) {
-      break;
-    }
-    sessionId = part.sessionId;
-    if (!part.hasMore) break;
-  }
-
-  updateImportProgress(total, total);
-  return acc;
-}
-
-async function runChunkedImport(file: File, map?: Record<string, string>) {
-  if (useClientImport.value) {
-    return runClientRowsImport(file, map);
-  }
-
-  phase.value = 'import';
-  progressLabel.value = 'در حال ارسال فایل…';
-  progressPct.value = 0;
-
-  let acc: ImportContactsResult = { created: 0, skipped: 0, errors: [] };
-  let sessionId: string | undefined;
-  let offset = 0;
-  let guard = 0;
-  const maxChunks = 2000;
-
-  if (props.preparePath) {
-    const prep = await postPrepare(file, map);
-    if (!prep.sessionId) {
-      throw new Error(prep.errors[0]?.message || 'آماده‌سازی فایل ناموفق بود');
-    }
-    sessionId = prep.sessionId;
-    progressLabel.value = 'در حال خواندن فایل روی سرور…';
-    const ready = await waitPrepareReady(sessionId);
-    if (!ready.total) {
-      return {
-        ...acc,
-        total: 0,
-        processed: 0,
-        hasMore: false,
-        errors: ready.error
-          ? [{ row: 1, message: ready.error }]
-          : [{ row: 1, message: 'هیچ ردیف داده‌ای در فایل نیست' }],
-      };
-    }
-    updateImportProgress(0, ready.total);
-  }
-
-  while (guard < maxChunks) {
-    guard += 1;
-    const part = await postImportChunk({
-      file: sessionId ? undefined : file,
-      map: sessionId ? undefined : map,
-      sessionId,
-      offset: sessionId ? offset : undefined,
-    });
-    acc = mergeImportResults(acc, part);
-
-    const total = part.total ?? 0;
-    const processed = part.processed ?? 0;
-    updateImportProgress(processed, total);
-
-    if (
-      part.errors?.some((e) => e.row === 1 && /بیش از .* ردیف/.test(e.message))
-    ) {
-      break;
-    }
-
-    if (!part.hasMore || !part.sessionId) {
-      if (total > 0) updateImportProgress(total, total);
-      break;
-    }
-    sessionId = part.sessionId;
-    offset = part.nextOffset ?? processed;
-  }
-
-  if (guard >= maxChunks && acc.hasMore) {
-    acc.errors = [
-      ...acc.errors,
-      {
-        row: 1,
-        message: 'ورود به‌خاطر تعداد مراحل زیاد متوقف شد. از جایی که مانده ادامه دهید یا فایل را تقسیم کنید.',
-      },
-    ];
-  }
-
-  return acc;
-}
-
-function apiMessage(e: unknown, fallback: string) {
-  if (!axios.isAxiosError(e)) {
-    return e instanceof Error && e.message ? e.message : fallback;
-  }
-  if (e.code === 'ECONNABORTED' || /timeout/i.test(e.message)) {
-    return 'مهلت درخواست تمام شد — فایل خیلی بزرگ است یا سرور دیر جواب داد. دوباره تلاش کنید.';
-  }
-  if (!e.response) {
-    return 'ارتباط با سرور برقرار نشد. اتصال را بررسی کنید و دوباره تلاش کنید.';
-  }
-  const status = e.response.status;
-  const data = e.response.data as { message?: string | string[] } | string | undefined;
-  let msg: string | undefined;
-  if (typeof data === 'string' && data.trim() && !data.trim().startsWith('<')) {
-    msg = data.trim().slice(0, 280);
-  } else if (data && typeof data === 'object') {
-    const m = data.message;
-    msg = Array.isArray(m) ? m.join('، ') : m;
-  }
-  if (msg) return msg;
-  if (status === 413) return 'حجم فایل بیش از حد مجاز سرور است.';
-  if (status === 502 || status === 504) {
-    return 'سرور میانی قطع شد (معمولاً به‌خاطر حجم/زمان فایل). چند دقیقه بعد دوباره تلاش کنید.';
-  }
-  return `${fallback} (کد ${status})`;
-}
-
-async function onFile(ev: Event) {
-  const el = ev.target as HTMLInputElement;
-  const file = el.files?.[0];
-  el.value = '';
-  if (!file) return;
-  emit('start');
-  submitting.value = true;
-  phase.value = 'preview';
-  try {
-    let data: ExcelPreviewResult;
-    if (useClientImport.value && props.clientAliases && props.clientFields) {
-      progressLabel.value = 'در حال خواندن فایل در مرورگر…';
-      data = await previewExcelClient(
-        file,
-        props.clientAliases,
-        props.clientFields,
-        props.clientReadOptions,
-      );
-    } else {
-      const form = new FormData();
-      form.append('file', file);
-      const res = await api.post<ExcelPreviewResult>(props.previewPath, form, {
-        headers: { 'Content-Type': undefined },
-        timeout: 5 * 60 * 1000,
-      });
-      data = res.data;
-    }
-    if (!data.needsMapping) {
-      try {
-        emit('done', await runChunkedImport(file));
-        reset();
-        emit('settled');
-      } catch (impErr) {
-        emit('fail', apiMessage(impErr, 'ایمپورت ناموفق بود'));
-        reset();
-        emit('settled');
-      }
-      return;
-    }
-    pending.value = file;
-    preview.value = data;
-    for (const col of data.columns) {
-      mapping[col.header] = data.suggested[col.header] ?? '';
-    }
-    phase.value = 'idle';
-    submitting.value = false;
-    // Allow parent toolbar while user maps columns.
-    emit('settled');
-  } catch (e) {
-    emit('fail', apiMessage(e, 'خواندن فایل اکسل ناموفق بود'));
-    reset();
-    emit('settled');
-  }
-}
-
-async function confirmMapping() {
-  if (!pending.value || !canImport.value || submitting.value) return;
-  emit('start');
-  submitting.value = true;
-  phase.value = 'import';
-  try {
-    emit('done', await runChunkedImport(pending.value, { ...mapping }));
-    reset();
-    emit('settled');
-  } catch (e) {
-    emit('fail', apiMessage(e, 'ایمپورت ناموفق بود'));
-    phase.value = 'idle';
-    submitting.value = false;
-    progressLabel.value = '';
-    progressPct.value = null;
-    emit('settled');
-  }
-}
-</script>
-
-<template>
-  <span class="excel-import" :class="{ isBusy: submitting }" @click.stop="pick">
-    <slot :loading="submitting" :disabled="disabled || submitting" />
-    <input
-      ref="input"
-      type="file"
-      accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-      hidden
-      :disabled="disabled || submitting"
-      @change="onFile"
-      @click.stop
-    />
-  </span>
-
-  <UiBusyOverlay
-    :open="busyOpen"
-    :message="busyMessage"
-    :progress="busyProgress"
-    nest
-  />
-
-  <UiModal :open="!!preview" title="تطبیق ستون‌های اکسل" @close="closeMapper">
-    <p class="lead">
-      ستون‌های این فایل با قالب سیستم یکی نیست. مشخص کنید هر ستون فایل در کدام فیلد ریخته شود.
-    </p>
-    <p v-if="preview?.largeFile" class="large-hint">
-      فایل بزرگ است ({{ (preview.rowCount ?? 0).toLocaleString('fa-IR') }} ردیف) — ورود به‌صورت چندمرحله‌ای انجام می‌شود.
-    </p>
-    <div class="rows">
-      <div v-for="col in preview?.columns ?? []" :key="col.header" class="row">
-        <div class="source">
-          <strong>{{ col.header }}</strong>
-          <small v-if="col.samples.length">نمونه: {{ col.samples.join('، ') }}</small>
-        </div>
-        <UiSelect
-          :model-value="mapping[col.header] ?? ''"
-          :disabled="submitting"
-          @update:model-value="setColumnField(col.header, $event)"
-        >
-          <option value="">نادیده بگیر</option>
-          <option v-for="field in preview?.fields ?? []" :key="field.key" :value="field.key">
-            {{ field.label }}{{ field.required ? ' *' : '' }}
-          </option>
-        </UiSelect>
-      </div>
-    </div>
-    <p v-if="!canImport" class="hint">فیلدهای ستاره‌دار را حتماً به یک ستون وصل کنید.</p>
-    <template #footer>
-      <UiButton variant="ghost" :disabled="submitting" @click="closeMapper">انصراف</UiButton>
-      <UiButton :disabled="!canImport" :loading="submitting" @click="confirmMapping">
-        ورود فایل
-      </UiButton>
-    </template>
-  </UiModal>
-</template>
-
-<style scoped>
-.excel-import {
-  display: inline-flex;
-}
-
-.excel-import.isBusy {
-  pointer-events: none;
-  opacity: 0.7;
-}
-
-.lead {
-  margin: 0 0 1rem;
-  color: var(--muted);
-  line-height: 1.7;
-}
-
-.large-hint {
-  margin: -0.35rem 0 1rem;
-  padding: 0.55rem 0.75rem;
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
-  color: var(--fg, inherit);
-  font-size: 0.88rem;
-  line-height: 1.6;
-}
-
-.rows {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.row {
-  display: grid;
-  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.source {
-  display: grid;
-  gap: 0.2rem;
-  min-width: 0;
-}
-
-.source strong {
-  font-size: 0.95rem;
-}
-
-.source small {
-  color: var(--muted);
-  font-size: 0.78rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hint {
-  margin: 0.85rem 0 0;
-  color: var(--danger);
-  font-size: 0.85rem;
-}
-
-@media (max-width: 700px) {
-  .row {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

apps/web/src/components/JalaliDateInput.vue

@@ -52,6 +52,8 @@ const hourColRef = ref<HTMLElement | null>(null);
 const minuteColRef = ref<HTMLElement | null>(null);
 const top = ref(0);
 const left = ref(0);
+/** بالای مودال Ant (حدود ۱۰۰۰) تا تقویم پشت پنجره نماند */
+const popupZ = ref(120);
 const todayJ = dateToJalali(new Date());
 const cursor = ref<{ jy: number; jm: number }>({ jy: todayJ.jy, jm: todayJ.jm });
 const draftHour = ref(9);
@@ -318,21 +320,46 @@ function place() {
   const panel = panelRef.value;
   if (!trigger) return;
   const rect = trigger.getBoundingClientRect();
-  const width = panel?.offsetWidth || (props.mode === 'time' ? (isMobile.value ? 340 : 280) : 320);
-  const height = panel?.offsetHeight || (props.mode === 'time' ? (isMobile.value ? 460 : 320) : 360);
+  const width =
+    panel?.offsetWidth ||
+    (props.mode === 'time' ? (isMobile.value ? 340 : 280) : 328);
+  const height =
+    panel?.offsetHeight ||
+    (props.mode === 'time' ? (isMobile.value ? 460 : 320) : 340);
+  const margin = 8;
   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);
+  nextLeft = Math.min(
+    Math.max(margin, nextLeft),
+    Math.max(margin, window.innerWidth - width - margin),
+  );
+  const spaceBelow = window.innerHeight - rect.bottom - margin * 2;
+  const spaceAbove = rect.top - margin * 2;
+  let nextTop: number;
+  if (height <= spaceBelow) {
+    nextTop = rect.bottom + margin;
+  } else if (height <= spaceAbove) {
+    nextTop = rect.top - height - margin;
+  } else if (spaceBelow >= spaceAbove) {
+    nextTop = Math.max(margin, window.innerHeight - height - margin);
+  } else {
+    nextTop = margin;
   }
   left.value = nextLeft;
   top.value = nextTop;
 }
 
+function liftAboveOverlays() {
+  let z = 120;
+  for (const el of document.querySelectorAll('.ant-modal-wrap, .ant-drawer')) {
+    const zi = Number.parseInt(window.getComputedStyle(el).zIndex, 10);
+    if (Number.isFinite(zi)) z = Math.max(z, zi + 20);
+  }
+  popupZ.value = z;
+}
+
 function onWindowChange() {
   syncViewport();
   if (open.value) place();
@@ -344,6 +371,7 @@ async function show() {
   calView.value = 'days';
   clockFace.value = 'hour';
   syncViewport();
+  liftAboveOverlays();
   open.value = true;
   await nextTick();
   place();
@@ -538,7 +566,7 @@ onBeforeUnmount(() => {
           'is-desktop': !isMobile,
         }"
         role="dialog"
-        :style="{ top: `${top}px`, left: `${left}px` }"
+        :style="{ top: `${top}px`, left: `${left}px`, zIndex: popupZ }"
       >
         <header v-if="mode !== 'time'" class="nav">
           <a-button type="text" class="nav-btn" :aria-label="navLabels.forward" @click="navStep(1)">
@@ -726,7 +754,7 @@ onBeforeUnmount(() => {
           >
             پاک کردن
           </a-button>
-          <a-button type="primary" class="done" @click="hide">تأیید</a-button>
+          <a-button type="primary" @click="hide">تأیید</a-button>
         </footer>
       </div>
     </Teleport>
@@ -851,10 +879,11 @@ onBeforeUnmount(() => {
 .panel {
   position: fixed;
   z-index: 120;
+  box-sizing: border-box;
   width: min(20.5rem, calc(100vw - 16px));
-  max-height: calc(100vh - 16px);
-  overflow-x: hidden;
-  overflow-y: auto;
+  /* تقویم باید یکجا دیده شود؛ اسکرول داخل پنل گیج‌کننده است */
+  max-height: none;
+  overflow: hidden;
   background: #fff;
   border-radius: var(--radius);
   box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
@@ -862,6 +891,13 @@ onBeforeUnmount(() => {
   font-family: IRANSans, Tahoma, sans-serif;
 }
 
+@media (max-height: 420px) {
+  .panel {
+    max-height: calc(100vh - 16px);
+    overflow: auto;
+  }
+}
+
 .panel-time {
   width: min(22.5rem, calc(100vw - 16px));
 }
@@ -893,45 +929,40 @@ onBeforeUnmount(() => {
 
 .pick-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 0.35rem;
   padding: 0.25rem 0;
 }
 
-.panel :deep(.ant-btn.pick-cell) {
-  width: 100%;
-  min-width: 0;
-  height: 44px;
-  margin: 0;
-  padding: 0 4px;
+.panel :deep(.pick-cell.ant-btn) {
+  width: 100% !important;
+  min-width: 0 !important;
+  height: 44px !important;
+  padding-inline: 0 !important;
   border-radius: var(--radius);
   color: #0f172a;
   font-size: 0.85rem;
 }
 
-.panel :deep(.ant-btn.pick-cell.today) {
+.panel :deep(.pick-cell.today) {
   box-shadow: inset 0 0 0 1px #99f6e4;
 }
 
-.panel :deep(.ant-btn.pick-cell.on),
-.panel :deep(.ant-btn.pick-cell:hover) {
+.panel :deep(.pick-cell.on),
+.panel :deep(.pick-cell.ant-btn:hover) {
   background: #0d9488;
   color: #fff;
 }
 
-.panel :deep(.ant-btn.nav-btn) {
+.nav-btn {
   width: 32px;
-  min-width: 32px;
   height: 32px;
-  margin: 0;
-  padding: 0;
   border: 0;
   border-radius: var(--radius);
   background: #f1f5f9;
   color: #0f766e;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  place-items: center;
   cursor: pointer;
 }
 
@@ -944,6 +975,7 @@ onBeforeUnmount(() => {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 0.15rem;
+  width: 100%;
   min-width: 0;
 }
 
@@ -954,40 +986,43 @@ onBeforeUnmount(() => {
   padding-bottom: 0.25rem;
 }
 
-.panel :deep(.ant-btn.day) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-  height: 34px;
-  margin: 0;
-  padding: 0;
-  line-height: 1;
+.panel :deep(.day.ant-btn) {
+  width: 100% !important;
+  min-width: 0 !important;
+  height: 34px !important;
+  padding: 0 !important;
   border: 0;
   border-radius: var(--radius);
   background: none;
   color: #0f172a;
   font: inherit;
+  font-size: 0.82rem;
+  line-height: 1;
   cursor: pointer;
-  box-shadow: none;
 }
 
-.panel :deep(.ant-btn.day.mute) {
+.panel :deep(.day.ant-btn > span) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.panel :deep(.day.mute) {
   color: #cbd5e1;
 }
 
-.panel :deep(.ant-btn.day.today) {
+.panel :deep(.day.today) {
   box-shadow: inset 0 0 0 1px #99f6e4;
 }
 
-.panel :deep(.ant-btn.day.on),
-.panel :deep(.ant-btn.day:hover) {
+.panel :deep(.day.on),
+.panel :deep(.day.ant-btn:hover) {
   background: #0d9488;
   color: #fff;
 }
 
-.panel :deep(.ant-btn.day.mute:hover) {
+.panel :deep(.day.mute:hover) {
   background: #f1f5f9;
   color: #64748b;
 }
@@ -1017,11 +1052,9 @@ onBeforeUnmount(() => {
   margin-bottom: 0.85rem;
 }
 
-.panel :deep(.ant-btn.md-chip) {
+.md-chip {
   min-width: 5.1rem;
   height: 4.1rem;
-  margin: 0;
-  padding: 0;
   border: 0;
   border-radius: var(--radius);
   background: #f1f5f9;
@@ -1034,7 +1067,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
-.panel :deep(.ant-btn.md-chip.on) {
+.md-chip.on {
   background: #ccfbf1;
   color: #0f766e;
   box-shadow: inset 0 0 0 2px #99f6e4;
@@ -1108,11 +1141,10 @@ onBeforeUnmount(() => {
   pointer-events: none;
 }
 
-.panel :deep(.ant-btn.md-tick) {
+.md-tick {
   position: absolute;
   z-index: 2;
   width: 36px;
-  min-width: 36px;
   height: 36px;
   margin: 0;
   border: 0;
@@ -1129,12 +1161,12 @@ onBeforeUnmount(() => {
   padding: 0;
 }
 
-.panel :deep(.ant-btn.md-tick.inner) {
+.md-tick.inner {
   font-size: 0.74rem;
   color: #64748b;
 }
 
-.panel :deep(.ant-btn.md-tick.on) {
+.md-tick.on {
   background: transparent;
   color: #fff;
 }
@@ -1183,12 +1215,9 @@ onBeforeUnmount(() => {
   overscroll-behavior: contain;
 }
 
-.panel :deep(.ant-btn.col-item) {
+.col-item {
   width: 100%;
-  min-width: 0;
   height: 36px;
-  margin: 0;
-  padding: 0;
   border: 0;
   border-radius: var(--radius);
   background: transparent;
@@ -1199,11 +1228,11 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
-.panel :deep(.ant-btn.col-item:hover) {
+.col-item:hover {
   background: #e2e8f0;
 }
 
-.panel :deep(.ant-btn.col-item.on) {
+.col-item.on {
   background: #0d9488;
   color: #fff;
 }
@@ -1215,8 +1244,28 @@ onBeforeUnmount(() => {
   margin-top: 0.7rem;
 }
 
-.panel :deep(.ant-btn.done) {
+.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: var(--radius);
+  padding: 0.4rem 0.8rem;
+  font-weight: 600;
+  font-size: 0.8rem;
 }
 
 .panel.is-mobile .time-box {

apps/web/src/components/NoteAiSuggestionPanel.vue

@@ -5,20 +5,6 @@ import { api } from '@/lib/api';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import { brand, type NoteAiPayloadDto, type NoteAiSuggestionDto } from '@mento/shared';
 import { rewriteGregorianDates } from '@/lib/jalali';
-import {
-  Alert as AAlert,
-  Button as AButton,
-  Card as ACard,
-  Checkbox as ACheckbox,
-  Flex as AFlex,
-  Input as AInput,
-  Space as ASpace,
-  Textarea as ATextarea,
-  Typography,
-} from 'ant-design-vue';
-
-const { Text: ATypographyText, Paragraph: ATypographyParagraph, Title: ATypographyTitle } =
-  Typography;
 
 const props = defineProps<{
   noteId: string;
@@ -162,108 +148,193 @@ function formatPayloadSummary(value: NoteAiPayloadDto | null) {
 </script>
 
 <template>
-  <a-card :bordered="true" :style="{ marginTop: '12px' }">
-    <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
-      <a-typography-text strong>پیشنهاد {{ brand.aiName }}</a-typography-text>
-      <a-button
+  <section class="ai-panel">
+    <header>
+      <strong>پیشنهاد {{ brand.aiName }}</strong>
+      <button
         v-if="!isPending"
-        type="link"
+        type="button"
+        class="link"
         :disabled="loading"
         @click="analyze"
       >
         {{ loading ? '…' : 'تحلیل مجدد' }}
-      </a-button>
-      <a-button
+      </button>
+      <button
         v-else-if="!suggestion"
-        type="link"
+        type="button"
+        class="link"
         :disabled="loading"
         @click="analyze"
       >
         {{ loading ? 'در حال تحلیل…' : 'تحلیل با AI' }}
-      </a-button>
-    </a-flex>
+      </button>
+    </header>
 
-    <a-alert v-if="error" type="error" show-icon :message="error" :style="{ marginTop: '8px' }" />
-    <a-typography-text v-else-if="loading && !suggestion" type="secondary">
-      در حال تحلیل یادداشت…
-    </a-typography-text>
-    <a-flex v-else-if="suggestion?.status === 'failed'" vertical :gap="4">
-      <a-alert
-        type="error"
-        show-icon
-        :message="suggestion.errorMessage || 'تحلیل ناموفق بود'"
-      />
-      <a-button type="link" @click="analyze">تلاش دوباره</a-button>
-    </a-flex>
-    <a-button
-      v-else-if="!suggestion"
-      type="link"
-      :disabled="loading"
-      @click="analyze"
-    >
-      تحلیل این یادداشت با AI
-    </a-button>
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading && !suggestion" class="muted">در حال تحلیل یادداشت…</p>
+    <p v-else-if="suggestion?.status === 'failed'" class="error">
+      {{ suggestion.errorMessage || 'تحلیل ناموفق بود' }}
+      <button type="button" class="link" @click="analyze">تلاش دوباره</button>
+    </p>
+    <p v-else-if="!suggestion" class="muted">
+      <button type="button" class="link" :disabled="loading" @click="analyze">
+        تحلیل این یادداشت با AI
+      </button>
+    </p>
 
     <template v-else-if="isPending && payload">
-      <a-typography-paragraph
-        v-if="formatPayloadSummary(payload)"
-        type="secondary"
-        :style="{ marginTop: '8px' }"
-      >
-        {{ formatPayloadSummary(payload) }}
-      </a-typography-paragraph>
+      <p v-if="formatPayloadSummary(payload)" class="summary">{{ formatPayloadSummary(payload) }}</p>
 
-      <a-flex v-if="payload.nextAction" vertical :gap="8" :style="{ marginTop: '8px' }">
-        <a-checkbox v-model:checked="applyNextAction">کار بعدی</a-checkbox>
-        <a-input v-model:value="nextTitle" placeholder="عنوان کار بعدی" style="width: 100%" />
-        <JalaliDateInput v-model="nextDueAt" mode="datetime" style="width: 100%" />
-      </a-flex>
+      <div v-if="payload.nextAction" class="block">
+        <label class="check">
+          <input v-model="applyNextAction" type="checkbox" />
+          کار بعدی
+        </label>
+        <input v-model="nextTitle" type="text" placeholder="عنوان کار بعدی" />
+        <JalaliDateInput v-model="nextDueAt" mode="datetime" />
+      </div>
 
-      <a-flex v-if="memoryItems.length" vertical :gap="8" :style="{ marginTop: '12px' }">
-        <a-typography-title :level="5" :style="{ margin: 0 }">
-          حافظه مشتری (با تأیید شما ذخیره می‌شود)
-        </a-typography-title>
-        <a-alert
-          v-if="!hasPerson"
-          type="warning"
-          show-icon
-          message="برای ذخیره حافظه، یادداشت باید به یک شخص متصل باشد."
-        />
-        <a-flex
+      <div v-if="memoryItems.length" class="block">
+        <p class="block-title">حافظه مشتری (با تأیید شما ذخیره می‌شود)</p>
+        <p v-if="!hasPerson" class="warn">برای ذخیره حافظه، یادداشت باید به یک شخص متصل باشد.</p>
+        <label
           v-for="(_, index) in memoryItems"
           :key="index"
-          :gap="8"
-          align="flex-start"
+          class="memory-row"
         >
-          <a-checkbox
-            v-model:checked="selectedMemory[index]"
+          <input
+            v-model="selectedMemory[index]"
+            type="checkbox"
             :disabled="!hasPerson"
           />
-          <a-textarea v-model:value="memoryEdits[index]" :rows="2" style="width: 100%" />
-        </a-flex>
-      </a-flex>
+          <textarea v-model="memoryEdits[index]" rows="2" />
+        </label>
+      </div>
 
-      <a-space :size="8" wrap :style="{ marginTop: '12px' }">
-        <a-button type="primary" :disabled="applying" :loading="applying" @click="apply">
-          اعمال انتخاب‌شده
-        </a-button>
-        <a-button :disabled="applying" @click="dismiss">رد کردن</a-button>
-      </a-space>
+      <div class="actions">
+        <button type="button" class="btn" :disabled="applying" @click="apply">
+          {{ applying ? '…' : 'اعمال انتخاب‌شده' }}
+        </button>
+        <button type="button" class="btn btn-ghost" :disabled="applying" @click="dismiss">
+          رد کردن
+        </button>
+      </div>
     </template>
 
-    <a-typography-text
-      v-else-if="suggestion?.status === 'applied'"
-      type="success"
-      :style="{ display: 'block', marginTop: '8px' }"
-    >
-      پیشنهاد اعمال شد.
-    </a-typography-text>
-    <a-typography-text
-      v-else-if="suggestion?.status === 'dismissed'"
-      type="secondary"
-      :style="{ display: 'block', marginTop: '8px' }"
-    >
-      پیشنهاد رد شد.
-    </a-typography-text>
-  </a-card>
+    <p v-else-if="suggestion?.status === 'applied'" class="muted ok">پیشنهاد اعمال شد.</p>
+    <p v-else-if="suggestion?.status === 'dismissed'" class="muted">پیشنهاد رد شد.</p>
+  </section>
 </template>
+
+<style scoped>
+.ai-panel {
+  margin-top: 0.75rem;
+  padding: 0.75rem 0.85rem;
+  border: 1px dashed var(--accent);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.65);
+  display: grid;
+  gap: 0.6rem;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.link {
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+}
+
+.block {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.block-title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.check {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.memory-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.45rem;
+  align-items: start;
+}
+
+input[type='text'],
+textarea {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.actions .btn {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+@media (max-width: 520px) {
+  .actions {
+    flex-direction: column;
+  }
+
+  .actions .btn,
+  .actions .btn-ghost {
+    width: 100%;
+  }
+}
+
+.summary {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.muted {
+  margin: 0;
+  color: var(--muted);
+}
+
+.ok {
+  color: #067647;
+}
+
+.warn {
+  margin: 0;
+  color: #b54708;
+  font-size: 0.88rem;
+}
+
+.error {
+  margin: 0;
+  color: #b42318;
+}
+</style>

apps/web/src/components/RoleDetailPanel.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { toFaDigits } from '@/lib/jalali';
-import type { OrgRoleDto, RolePermissionKey } from '@mento/shared';
-import {
-  Avatar as AAvatar,
-  Descriptions as ADescriptions,
-  DescriptionsItem as ADescriptionsItem,
-  Empty as AEmpty,
-  Flex as AFlex,
-  List as AList,
-  ListItem as AListItem,
-  ListItemMeta as AListItemMeta,
-  Space as ASpace,
-  TabPane as ATabPane,
-  Tabs as ATabs,
-  Tag as ATag,
-  Typography,
-} from 'ant-design-vue';
-import { UserOutlined } from '@ant-design/icons-vue';
-
-const { Text: ATypographyText, Link: ATypographyLink } = Typography;
-const emptySimple = AEmpty.PRESENTED_IMAGE_SIMPLE;
-
-const props = defineProps<{
-  role: OrgRoleDto;
-  childRoles: OrgRoleDto[];
-  permissionItems: Array<{ key: RolePermissionKey; label: string }>;
-  avatarOf: (id: string) => string;
-  tagColor: (color: string | null | undefined) => string;
-}>();
-
-const emit = defineEmits<{
-  'pick-role': [id: string];
-}>();
-
-const innerTab = ref('summary');
-
-watch(
-  () => props.role.id,
-  () => {
-    innerTab.value = 'summary';
-  },
-);
-
-const grantedPermissions = computed(() =>
-  props.permissionItems.filter((item) => props.role.permissions.includes(item.key)),
-);
-
-const permSummary = computed(
-  () =>
-    `${toFaDigits(grantedPermissions.value.length)} از ${toFaDigits(props.permissionItems.length)}`,
-);
-</script>
-
-<template>
-  <a-flex vertical :gap="16">
-    <a-space direction="vertical" :size="4">
-      <a-space wrap>
-        <a-tag v-if="role.systemKey" :bordered="false">سیستمی</a-tag>
-        <a-typography-text v-if="role.parentName" type="secondary">
-          زیرمجموعهٔ
-          <a-typography-link @click="emit('pick-role', role.parentId!)">
-            {{ role.parentName }}
-          </a-typography-link>
-        </a-typography-text>
-      </a-space>
-      <a-typography-text v-if="role.description" type="secondary">
-        {{ role.description }}
-      </a-typography-text>
-    </a-space>
-
-    <a-tabs v-model:activeKey="innerTab">
-      <a-tab-pane key="summary" tab="خلاصه">
-        <a-flex vertical :gap="16">
-          <a-descriptions :column="1" bordered>
-            <a-descriptions-item label="کاربران">
-              {{ toFaDigits(role.userCount) }} نفر
-            </a-descriptions-item>
-            <a-descriptions-item label="مجوزها">
-              {{ permSummary }}
-            </a-descriptions-item>
-            <a-descriptions-item label="زیرنقش‌ها">
-              {{ toFaDigits(childRoles.length) }} مورد
-            </a-descriptions-item>
-          </a-descriptions>
-
-          <a-flex vertical :gap="8">
-            <a-typography-text strong>زیرنقش‌ها</a-typography-text>
-            <a-space v-if="childRoles.length" wrap>
-              <a-tag
-                v-for="child in childRoles"
-                :key="child.id"
-                :color="tagColor(child.color)"
-                :bordered="false"
-                style="cursor: pointer"
-                @click="emit('pick-role', child.id)"
-              >
-                {{ child.name }} · {{ toFaDigits(child.userCount) }}
-              </a-tag>
-            </a-space>
-            <a-empty v-else description="زیرنقشی تعریف نشده" :image="emptySimple" />
-          </a-flex>
-        </a-flex>
-      </a-tab-pane>
-
-      <a-tab-pane key="perms" :tab="`مجوزها (${permSummary})`">
-        <a-flex vertical :gap="12">
-          <a-typography-text type="secondary">
-            فقط مجوزهای فعال نمایش داده می‌شود. برای تغییر، ویرایش نقش را بزنید.
-          </a-typography-text>
-          <a-space v-if="grantedPermissions.length" wrap>
-            <a-tag
-              v-for="perm in grantedPermissions"
-              :key="perm.key"
-              color="success"
-              :bordered="false"
-            >
-              {{ perm.label }}
-            </a-tag>
-          </a-space>
-          <a-empty v-else description="هیچ مجوزی فعال نیست" :image="emptySimple" />
-        </a-flex>
-      </a-tab-pane>
-
-      <a-tab-pane key="members" :tab="`کاربران (${toFaDigits(role.userCount)})`">
-        <a-list v-if="role.members.length" :data-source="role.members">
-          <template #renderItem="{ item }">
-            <a-list-item>
-              <a-list-item-meta :title="item.fullName">
-                <template #avatar>
-                  <a-avatar :src="avatarOf(item.id)">
-                    <template #icon><UserOutlined /></template>
-                  </a-avatar>
-                </template>
-              </a-list-item-meta>
-            </a-list-item>
-          </template>
-        </a-list>
-        <a-empty v-else description="کاربری با این نقش نیست" :image="emptySimple" />
-      </a-tab-pane>
-    </a-tabs>
-  </a-flex>
-</template>

apps/web/src/components/SmsHeaderWallet.vue

@@ -118,82 +118,77 @@ defineExpose({ refresh: load });
   <div v-if="visible" class="sms-wallet">
     <div
       class="chip"
-      :class="[toneClass, (summary?.balanceRials ?? 0) < 0 ? 'is-debt' : '']"
-      role="button"
-      tabindex="0"
+      :class="toneClass"
       :title="loading ? '…' : `اعتبار پیامک: ${balanceLabel} ریال`"
-      aria-label="شارژ اعتبار پیامک"
-      @click="chargeOpen = true"
-      @keydown.enter.prevent="chargeOpen = true"
-      @keydown.space.prevent="chargeOpen = true"
     >
       <span class="label">پیامک</span>
       <span class="amount">{{ balanceLabel }}</span>
+      <button type="button" class="charge" @click="chargeOpen = true">شارژ</button>
     </div>
 
     <Teleport to="body">
-      <div v-if="chargeOpen" class="layer">
-        <div class="backdrop" @click="closeCharge" />
-        <div class="modal charge-modal" role="dialog" aria-label="شارژ پیامک">
-          <header>
-            <strong>شارژ اعتبار پیامک</strong>
-            <button type="button" class="x" @click="closeCharge">×</button>
-          </header>
+    <div v-if="chargeOpen" class="layer">
+      <div class="backdrop" @click="closeCharge" />
+      <div class="modal charge-modal" role="dialog" aria-label="شارژ پیامک">
+        <header>
+          <strong>شارژ اعتبار پیامک</strong>
+          <button type="button" class="x" @click="closeCharge">×</button>
+        </header>
 
-          <div v-if="chargeInfo" class="charge-body">
-            <div class="instruction-box">
-              <p>{{ chargeInfo.instruction }}</p>
-            </div>
-
-            <div class="info-card">
-              <div class="info-head">
-                <span>شماره کارت</span>
-                <button type="button" class="copy violet" @click="copyValue('شماره کارت', chargeInfo.card)">
-                  کپی
-                </button>
-              </div>
-              <p class="mono" dir="ltr">{{ formatCardDisplay(chargeInfo.card) }}</p>
-            </div>
-
-            <div class="info-card">
-              <div class="info-head">
-                <span>شماره شبا</span>
-                <button type="button" class="copy emerald" @click="copyValue('شماره شبا', chargeInfo.iban)">
-                  کپی
-                </button>
-              </div>
-              <p class="mono" dir="ltr">{{ chargeInfo.iban || '—' }}</p>
-            </div>
-
-            <div class="info-card muted-card">
-              <span class="small">به نام</span>
-              <p class="holder">{{ chargeInfo.accountHolder || '—' }}</p>
-            </div>
-
-            <p v-if="copyHint" class="copy-hint">{{ copyHint }}</p>
+        <div v-if="chargeInfo" class="charge-body">
+          <div class="instruction-box">
+            <p>{{ chargeInfo.instruction }}</p>
           </div>
 
-          <p v-else class="muted">اطلاعات واریز در دسترس نیست.</p>
+          <div class="info-card">
+            <div class="info-head">
+              <span>شماره کارت</span>
+              <button type="button" class="copy violet" @click="copyValue('شماره کارت', chargeInfo.card)">
+                کپی
+              </button>
+            </div>
+            <p class="mono" dir="ltr">{{ formatCardDisplay(chargeInfo.card) }}</p>
+          </div>
+
+          <div class="info-card">
+            <div class="info-head">
+              <span>شماره شبا</span>
+              <button type="button" class="copy emerald" @click="copyValue('شماره شبا', chargeInfo.iban)">
+                کپی
+              </button>
+            </div>
+            <p class="mono" dir="ltr">{{ chargeInfo.iban || '—' }}</p>
+          </div>
+
+          <div class="info-card muted-card">
+            <span class="small">به نام</span>
+            <p class="holder">{{ chargeInfo.accountHolder || '—' }}</p>
+          </div>
+
+          <p v-if="copyHint" class="copy-hint">{{ copyHint }}</p>
         </div>
+
+        <p v-else class="muted">اطلاعات واریز در دسترس نیست.</p>
       </div>
+    </div>
     </Teleport>
 
     <Teleport to="body">
-      <div v-if="warnOpen" class="layer">
-        <div class="backdrop" @click="warnOpen = false" />
-        <div class="modal warn" role="dialog" aria-label="هشدار موجودی منفی">
-          <header>
-            <strong>موجودی پیامک منفی است</strong>
-            <button type="button" class="x" @click="warnOpen = false">×</button>
-          </header>
-          <p>
-            اعتبار پیامک محیط شما منفی شده
-            ({{ balanceLabel }} ریال). ارسال تا رسیدن به آستانه قطع یا مسدودسازی دستی ادامه دارد؛ لطفاً
-            شارژ کنید.
-          </p>
-          <button type="button" class="ok" @click="warnOpen = false">متوجه شدم</button>
-        </div>
+    <div v-if="warnOpen" class="layer">
+      <div class="backdrop" @click="warnOpen = false" />
+      <div class="modal warn" role="dialog" aria-label="هشدار موجودی منفی">
+        <header>
+          <strong>موجودی پیامک منفی است</strong>
+          <button type="button" class="x" @click="warnOpen = false">×</button>
+        </header>
+        <p>
+          اعتبار پیامک محیط شما منفی شده
+          ({{ balanceLabel }} ریال). ارسال تا رسیدن به آستانه قطع یا مسدودسازی دستی ادامه دارد؛ لطفاً
+          شارژ کنید.
+        </p>
+        <button type="button" class="ok" @click="warnOpen = false">متوجه شدم</button>
       </div>
+    </div>
     </Teleport>
   </div>
 </template>
@@ -205,15 +200,15 @@ defineExpose({ refresh: load });
   flex-shrink: 0;
 }
 
-/* چیپ جمع‌وجور؛ کلیک کل سطح، پنجرهٔ شارژ را باز می‌کند */
+/* چیپ جمع‌وجور؛ دکمه شارژ سمت چپ، برچسب سمت راست */
 .chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  height: var(--control-h);
+  height: 31px;
   box-sizing: border-box;
   margin: 0;
-  padding: 0 8px;
+  padding: 0 4px 0 2px;
   border: 1px solid #c3ead6;
   border-radius: 10px;
   background: #f2fbf6;
@@ -222,7 +217,6 @@ defineExpose({ refresh: load });
   line-height: 1;
   white-space: nowrap;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-  cursor: pointer;
 }
 
 .chip.warning {
@@ -238,17 +232,6 @@ defineExpose({ refresh: load });
   color: #991b1b;
 }
 
-.chip.is-debt {
-  border-color: var(--danger);
-  background: var(--danger);
-  color: #fff;
-}
-
-.chip.is-debt .label {
-  color: inherit;
-  opacity: 0.92;
-}
-
 .label {
   font-weight: 600;
   font-size: 0.7rem;
@@ -256,19 +239,52 @@ defineExpose({ refresh: load });
 }
 
 .amount {
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
+  font-weight: 800;
   letter-spacing: -0.01em;
 }
 
+.charge {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 23px;
+  margin: 0;
+  padding: 0 6px;
+  border: 1px solid #e2e8f0;
+  border-radius: 7px;
+  background: #fff;
+  color: #334155;
+  font: inherit;
+  font-size: 0.7rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.charge:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+  color: #0f172a;
+}
+
+.charge:active {
+  background: #f1f5f9;
+}
+
 .layer {
   position: fixed;
   inset: 0;
-  z-index: 80;
-  display: grid;
-  place-items: center;
+  z-index: 120;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 1rem;
-  box-sizing: border-box;
+  overflow: auto;
 }
 
 .backdrop {
@@ -279,8 +295,9 @@ defineExpose({ refresh: load });
 
 .modal {
   position: relative;
-  width: min(420px, 100%);
-  max-height: min(90vh, 640px);
+  width: min(420px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  margin: auto;
   overflow: auto;
   background: #fff;
   border-radius: 16px;
@@ -288,7 +305,6 @@ defineExpose({ refresh: load });
   display: grid;
   gap: 0.75rem;
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
-  box-sizing: border-box;
 }
 
 .modal header {

apps/web/src/components/TeamsSettingsPanel.vue

@@ -11,6 +11,7 @@ import type {
   TeamDto,
   TeamMemberRole,
   UpdatePriorArchiveCutoffRequest,
+  UserTreasuryAccess,
 } from '@mento/shared';
 import {
   DATA_ACCESS_SECTION_LABELS,
@@ -18,36 +19,9 @@ import {
   emptySectionDataAccess,
   sectionHasDataAccessLimits,
 } from '@mento/shared';
+import { UiButton, UiEmptyState, UiField, UiInput } from '@/components/ui';
 import DataAccessPolicyPanel from '@/components/DataAccessPolicyPanel.vue';
 import { formatLocalDateInput, parseLocalInput, toFaDigits } from '@/lib/jalali';
-import {
-  Alert as AAlert,
-  Button as AButton,
-  Card as ACard,
-  Checkbox as ACheckbox,
-  Col as ACol,
-  Collapse as ACollapse,
-  CollapsePanel as ACollapsePanel,
-  Divider as ADivider,
-  Empty as AEmpty,
-  Flex as AFlex,
-  Form as AForm,
-  FormItem as AFormItem,
-  Input as AInput,
-  List as AList,
-  ListItem as AListItem,
-  ListItemMeta as AListItemMeta,
-  Radio as ARadio,
-  RadioGroup as ARadioGroup,
-  Row as ARow,
-  Select as ASelect,
-  Space as ASpace,
-  Spin as ASpin,
-  Tag as ATag,
-  Typography,
-} from 'ant-design-vue';
-
-const { Text: ATypographyText } = Typography;
 
 const props = defineProps<{
   users: OrgUserDto[];
@@ -63,7 +37,7 @@ const showPriorArchive = computed(
 const priorUsers = computed(() => props.users.filter((u) => u.isActive !== false));
 const selectedPriorUsers = computed(() => priorUsers.value.filter((u) => u.priorArchiveEnabled));
 const priorSearch = ref('');
-const priorPick = ref<string | undefined>(undefined);
+const priorPick = ref('');
 const priorSavingId = ref('');
 const cutoffLocal = ref('');
 const cutoffSaving = ref(false);
@@ -74,16 +48,10 @@ const availablePriorUsers = computed(() => {
   return priorUsers.value.filter((u) => {
     if (u.priorArchiveEnabled) return false;
     if (!q) return true;
-    return [u.fullName, u.email, u.mobile]
-      .filter(Boolean)
-      .some((v) => String(v).toLowerCase().includes(q));
+    return [u.fullName, u.email, u.mobile].filter(Boolean).some((v) => String(v).toLowerCase().includes(q));
   });
 });
 
-const availablePriorOptions = computed(() =>
-  availablePriorUsers.value.map((u) => ({ value: u.id, label: u.fullName })),
-);
-
 const emit = defineEmits<{
   refreshUsers: [];
 }>();
@@ -106,14 +74,9 @@ const editableUsers = computed(() =>
   props.users.filter((u) => u.isActive !== false && u.role !== 'owner' && u.role !== 'admin'),
 );
 
-const memberRoleOptions = [
-  { value: 'member', label: 'عضو' },
-  { value: 'manager', label: 'سرپرست' },
-];
-
 async function setPriorArchive(userId: string, enabled: boolean) {
   priorSavingId.value = userId;
-  priorPick.value = undefined;
+  priorPick.value = '';
   error.value = '';
   ok.value = '';
   try {
@@ -151,10 +114,7 @@ async function loadPriorArchiveCutoff() {
     applyCutoffFromOrg(data);
   } catch (e) {
     error.value = axios.isAxiosError(e)
-      ? String(
-          (e.response?.data as { message?: string })?.message ??
-            'بارگذاری تاریخ بایگانی ناموفق بود.',
-        )
+      ? String((e.response?.data as { message?: string })?.message ?? 'بارگذاری تاریخ بایگانی ناموفق بود.')
       : 'بارگذاری تاریخ بایگانی ناموفق بود.';
   } finally {
     cutoffLoading.value = false;
@@ -176,10 +136,7 @@ async function onCutoffChange(value: string) {
     await auth.hydrate();
   } catch (e) {
     error.value = axios.isAxiosError(e)
-      ? String(
-          (e.response?.data as { message?: string })?.message ??
-            'ذخیره تاریخ بایگانی ناموفق بود.',
-        )
+      ? String((e.response?.data as { message?: string })?.message ?? 'ذخیره تاریخ بایگانی ناموفق بود.')
       : 'ذخیره تاریخ بایگانی ناموفق بود.';
     await loadPriorArchiveCutoff();
   } finally {
@@ -187,10 +144,9 @@ async function onCutoffChange(value: string) {
   }
 }
 
-function pickPriorUser(userId: unknown) {
-  const id = userId == null ? '' : String(userId);
-  if (!id) return;
-  void setPriorArchive(id, true);
+function pickPriorUser(userId: string) {
+  if (!userId) return;
+  void setPriorArchive(userId, true);
 }
 
 async function load() {
@@ -287,19 +243,9 @@ function toggleMember(userId: string) {
   }
 }
 
-function setRole(userId: string, role: unknown) {
+function setRole(userId: string, role: TeamMemberRole) {
   if (!memberDraft.value[userId]) return;
-  memberDraft.value = {
-    ...memberDraft.value,
-    [userId]: String(role) as TeamMemberRole,
-  };
-}
-
-function teamMembersLabel(team: TeamDto) {
-  if (!team.members.length) return 'بدون عضو';
-  return team.members
-    .map((m) => `${m.fullName}${m.role === 'manager' ? ' (سرپرست)' : ''}`)
-    .join('، ');
+  memberDraft.value = { ...memberDraft.value, [userId]: role };
 }
 
 async function saveMembers() {
@@ -334,8 +280,13 @@ async function removeTeam(id: string) {
   }
 }
 
+const showTreasury = computed(() => {
+  const modules = auth.user?.enabledModules;
+  return !modules || modules.includes('treasury');
+});
 const expandedAccess = ref<string | null>(null);
 const draftAccess = ref<DataAccessPolicy>({});
+const draftTreasury = ref<UserTreasuryAccess | null>(null);
 const accessMode = ref<'inherit' | 'custom'>('inherit');
 const accessSaving = ref(false);
 
@@ -378,6 +329,7 @@ function openAccessEditor(u: OrgUserDto) {
   draftAccess.value = hasOverride
     ? { ...clonePolicy(u.effectiveDataAccess), ...clonePolicy(override) }
     : clonePolicy(u.effectiveDataAccess);
+  draftTreasury.value = u.treasuryAccessOverride ?? null;
   expandedAccess.value = u.id;
 }
 
@@ -388,8 +340,8 @@ async function saveUserAccess(userId: string) {
   try {
     const payload =
       accessMode.value === 'inherit'
-        ? { dataAccessOverride: null }
-        : { dataAccessOverride: draftAccess.value };
+        ? { dataAccessOverride: null, treasuryAccessOverride: draftTreasury.value }
+        : { dataAccessOverride: draftAccess.value, treasuryAccessOverride: draftTreasury.value };
     await api.patch(`/users/${userId}/data-access`, payload);
     ok.value = 'محدوده داده به‌روز شد.';
     expandedAccess.value = null;
@@ -413,222 +365,362 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-flex vertical :gap="12">
-    <a-alert v-if="error" type="error" show-icon :message="error" closable @close="error = ''" />
-    <a-alert v-if="ok" type="success" show-icon :message="ok" closable @close="ok = ''" />
+  <div class="teams-panel">
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="ok" class="ok">{{ ok }}</p>
 
-    <a-card :bordered="false">
-      <a-form v-if="canEdit" layout="vertical" @finish="createTeam">
-        <a-divider orientation="right">تیم جدید</a-divider>
-        <a-row :gutter="[16, 0]" align="bottom">
-          <a-col :xs="24" :md="8">
-            <a-form-item label="نام تیم">
-              <a-input v-model:value="newName" placeholder="مثلاً فروش تهران" style="width: 100%" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="10">
-            <a-form-item label="توضیح">
-              <a-input v-model:value="newDesc" placeholder="اختیاری" style="width: 100%" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="6">
-            <a-form-item label=" ">
-              <a-button type="primary" html-type="submit" :loading="saving" block>افزودن</a-button>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
+    <section v-if="canEdit" class="card">
+      <h3>تیم جدید</h3>
+      <div class="row">
+        <UiField label="نام تیم">
+          <UiInput v-model="newName" placeholder="مثلاً فروش تهران" />
+        </UiField>
+        <UiField label="توضیح">
+          <UiInput v-model="newDesc" placeholder="اختیاری" />
+        </UiField>
+        <UiButton :loading="saving" @click="createTeam">افزودن</UiButton>
+      </div>
+    </section>
 
-      <a-divider orientation="right">تیم‌ها</a-divider>
-      <a-spin :spinning="loading">
-        <a-empty
-          v-if="!loading && !teams.length"
-          description="تیمی تعریف نشده. تیم بسازید تا اعضای فروش پرونده‌های هم‌تیمی را ببینند."
+    <section class="card">
+      <h3>تیم‌ها</h3>
+      <UiEmptyState
+        v-if="!loading && !teams.length"
+        title="تیمی تعریف نشده"
+        description="تیم بسازید تا اعضای فروش پرونده‌های هم‌تیمی را ببینند."
+      />
+      <div v-else class="team-list">
+        <article v-for="t in teams" :key="t.id" class="team">
+          <header>
+            <div>
+              <strong>{{ t.name }}</strong>
+              <p class="muted">
+                {{ t.description || '—' }}
+                · {{ toFaDigits(t.memberCount) }} عضو
+              </p>
+            </div>
+            <div v-if="canEdit" class="actions">
+              <UiButton variant="secondary" @click="startMetaEdit(t)">ویرایش</UiButton>
+              <UiButton variant="secondary" @click="startEdit(t)">اعضا</UiButton>
+              <UiButton variant="secondary" @click="removeTeam(t.id)">حذف</UiButton>
+            </div>
+          </header>
+          <p class="members">
+            {{
+              t.members.length
+                ? t.members
+                    .map((m) => `${m.fullName}${m.role === 'manager' ? ' (سرپرست)' : ''}`)
+                    .join('، ')
+                : 'بدون عضو'
+            }}
+          </p>
+
+          <div v-if="editingMetaId === t.id" class="editor">
+            <div class="row">
+              <UiField label="نام تیم">
+                <UiInput v-model="editName" />
+              </UiField>
+              <UiField label="توضیح">
+                <UiInput v-model="editDesc" />
+              </UiField>
+            </div>
+            <div class="actions">
+              <UiButton :loading="saving" @click="saveMeta">ذخیره</UiButton>
+              <UiButton variant="secondary" @click="editingMetaId = null">انصراف</UiButton>
+            </div>
+          </div>
+
+          <div v-if="editingId === t.id" class="editor">
+            <p class="hint">اعضا را انتخاب کنید؛ سرپرست همان عضو تیم است.</p>
+            <label v-for="u in users.filter((x) => x.isActive !== false)" :key="u.id" class="person">
+              <input
+                type="checkbox"
+                :checked="Boolean(memberDraft[u.id])"
+                @change="toggleMember(u.id)"
+              />
+              <span>{{ u.fullName }}</span>
+              <select
+                v-if="memberDraft[u.id]"
+                :value="memberDraft[u.id]"
+                @change="setRole(u.id, ($event.target as HTMLSelectElement).value as TeamMemberRole)"
+              >
+                <option value="member">عضو</option>
+                <option value="manager">سرپرست</option>
+              </select>
+            </label>
+            <div class="actions">
+              <UiButton :loading="saving" @click="saveMembers">ذخیره اعضا</UiButton>
+              <UiButton variant="secondary" @click="editingId = null">انصراف</UiButton>
+            </div>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <section v-if="showPriorArchive" class="card">
+      <header class="prior-head">
+        <h3>بایگانی اطلاعات قبل</h3>
+        <JalaliDateInput
+          :model-value="cutoffLocal"
+          mode="date"
+          placeholder="تاریخ برش"
+          :disabled="cutoffSaving || cutoffLoading"
+          @update:model-value="onCutoffChange"
         />
-        <a-list v-else item-layout="vertical" :data-source="teams">
-          <template #renderItem="{ item: t }">
-            <a-list-item>
-              <template v-if="canEdit" #actions>
-                <a-button type="link" @click="startMetaEdit(t)">ویرایش</a-button>
-                <a-button type="link" @click="startEdit(t)">اعضا</a-button>
-                <a-button type="link" danger @click="removeTeam(t.id)">حذف</a-button>
-              </template>
-              <a-list-item-meta>
-                <template #title>
-                  <a-space wrap>
-                    <a-typography-text strong>{{ t.name }}</a-typography-text>
-                    <a-tag :bordered="false">{{ toFaDigits(t.memberCount) }} عضو</a-tag>
-                  </a-space>
-                </template>
-                <template #description>
-                  <a-typography-text type="secondary">
-                    {{ t.description || 'بدون توضیح' }} · {{ teamMembersLabel(t) }}
-                  </a-typography-text>
-                </template>
-              </a-list-item-meta>
+      </header>
+      <p class="hint">
+        فقط کاربرانی که تیک می‌خورند سوئیچ کار جاری و بایگانی را می‌بینند. بقیهٔ محیط مثل قبل همهٔ
+        رکوردها را مطابق سطح دسترسی خودشان می‌بینند.
+      </p>
+      <div class="prior-picker">
+        <UiInput v-model="priorSearch" placeholder="جستجوی کاربر…" />
+        <select
+          v-model="priorPick"
+          :disabled="!availablePriorUsers.length || Boolean(priorSavingId)"
+          @change="pickPriorUser(($event.target as HTMLSelectElement).value)"
+        >
+          <option value="">
+            {{ availablePriorUsers.length ? 'انتخاب کاربر برای فعال‌سازی' : 'کاربر دیگری پیدا نشد' }}
+          </option>
+          <option v-for="u in availablePriorUsers" :key="u.id" :value="u.id">
+            {{ u.fullName }}
+          </option>
+        </select>
+      </div>
+      <div v-if="selectedPriorUsers.length" class="prior-chips">
+        <span v-for="u in selectedPriorUsers" :key="u.id" class="prior-chip">
+          {{ u.fullName }}
+          <button
+            type="button"
+            :disabled="priorSavingId === u.id"
+            :aria-label="`حذف ${u.fullName}`"
+            @click="setPriorArchive(u.id, false)"
+          >
+            ×
+          </button>
+        </span>
+      </div>
+      <p v-else class="hint">هنوز کاربری برای دیدن سوئیچ بایگانی انتخاب نشده است.</p>
+    </section>
 
-              <a-form
-                v-if="editingMetaId === t.id"
-                layout="vertical"
-                style="width: 100%"
-                @finish="saveMeta"
-              >
-                <a-row :gutter="[16, 0]">
-                  <a-col :xs="24" :md="12">
-                    <a-form-item label="نام تیم">
-                      <a-input v-model:value="editName" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :xs="24" :md="12">
-                    <a-form-item label="توضیح">
-                      <a-input v-model:value="editDesc" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                </a-row>
-                <a-space>
-                  <a-button type="primary" html-type="submit" :loading="saving">ذخیره</a-button>
-                  <a-button @click="editingMetaId = null">انصراف</a-button>
-                </a-space>
-              </a-form>
-
-              <a-flex v-if="editingId === t.id" vertical :gap="8" style="width: 100%">
-                <a-typography-text type="secondary">
-                  اعضا را انتخاب کنید؛ سرپرست همان عضو تیم است.
-                </a-typography-text>
-                <a-row :gutter="[12, 8]">
-                  <a-col
-                    v-for="u in users.filter((x) => x.isActive !== false)"
-                    :key="u.id"
-                    :xs="24"
-                    :sm="12"
-                    :lg="8"
-                  >
-                    <a-space>
-                      <a-checkbox
-                        :checked="Boolean(memberDraft[u.id])"
-                        @change="toggleMember(u.id)"
-                      >
-                        {{ u.fullName }}
-                      </a-checkbox>
-                      <a-select
-                        v-if="memberDraft[u.id]"
-                        :value="memberDraft[u.id]"
-                        :options="memberRoleOptions"
-                        style="width: 120px"
-                        @update:value="setRole(u.id, $event)"
-                      />
-                    </a-space>
-                  </a-col>
-                </a-row>
-                <a-space>
-                  <a-button type="primary" :loading="saving" @click="saveMembers">ذخیره اعضا</a-button>
-                  <a-button @click="editingId = null">انصراف</a-button>
-                </a-space>
-              </a-flex>
-            </a-list-item>
-          </template>
-        </a-list>
-      </a-spin>
-
-      <a-collapse :bordered="false" ghost>
-        <a-collapse-panel v-if="showPriorArchive" key="prior" header="بایگانی اطلاعات قبل">
-          <a-row :gutter="[16, 12]" align="middle">
-            <a-col :xs="24" :lg="8">
-              <JalaliDateInput
-                :model-value="cutoffLocal"
-                mode="date"
-                placeholder="تاریخ برش"
-                :disabled="cutoffSaving || cutoffLoading"
-                @update:model-value="onCutoffChange"
-              />
-            </a-col>
-            <a-col :xs="24" :lg="8">
-              <a-input v-model:value="priorSearch" placeholder="جستجوی کاربر…" style="width: 100%" />
-            </a-col>
-            <a-col :xs="24" :lg="8">
-              <a-select
-                :value="priorPick"
-                :options="availablePriorOptions"
-                :disabled="!availablePriorUsers.length || Boolean(priorSavingId)"
-                allow-clear
-                show-search
-                option-filter-prop="label"
-                :placeholder="
-                  availablePriorUsers.length ? 'فعال‌سازی کاربر' : 'کاربر دیگری پیدا نشد'
-                "
-                style="width: 100%"
-                @update:value="pickPriorUser"
-              />
-            </a-col>
-          </a-row>
-          <a-flex vertical :gap="8">
-            <a-typography-text type="secondary">
-              فقط این کاربران سوئیچ کار جاری / بایگانی را می‌بینند.
-            </a-typography-text>
-            <a-space v-if="selectedPriorUsers.length" wrap>
-              <a-tag
-                v-for="u in selectedPriorUsers"
-                :key="u.id"
-                closable
-                :disabled="priorSavingId === u.id"
-                @close.prevent="setPriorArchive(u.id, false)"
-              >
-                {{ u.fullName }}
-              </a-tag>
-            </a-space>
-            <a-typography-text v-else type="secondary">
-              هنوز کاربری انتخاب نشده است.
-            </a-typography-text>
-          </a-flex>
-        </a-collapse-panel>
-
-        <a-collapse-panel key="access" header="محدوده داده کاربران">
-          <a-flex vertical :gap="8">
-            <a-typography-text type="secondary">
-              پیش‌فرض از نقش است؛ برای کاربر خاص می‌توانید فیلتر جدا بگذارید.
-            </a-typography-text>
-            <a-empty
-              v-if="!editableUsers.length"
-              description="فقط نقش‌های فروش و پشتیبانی محدوده داده جدا دارند."
+    <section class="card">
+      <h3>محدوده داده</h3>
+      <p class="hint">
+        مالک و مدیر همیشه همه را می‌بینند. پیش‌فرض از نقش می‌آید؛ برای کاربر خاص می‌توانید فیلتر
+        جدا بگذارید.
+      </p>
+      <UiEmptyState
+        v-if="!editableUsers.length"
+        title="کاربر قابل تنظیم نیست"
+        description="فقط نقش‌های فروش و پشتیبانی محدوده داده جدا دارند."
+      />
+      <div v-else class="vis-table">
+        <div v-for="u in editableUsers" :key="u.id" class="vis-user">
+          <div class="vis-row">
+            <span>
+              {{ u.fullName }}
+              <small class="vis-badge">{{ accessSummary(u) }}</small>
+            </span>
+            <UiButton v-if="canEdit" variant="secondary" @click="openAccessEditor(u)">
+              {{ expandedAccess === u.id ? 'بستن' : 'تنظیم محدوده' }}
+            </UiButton>
+          </div>
+          <div v-if="expandedAccess === u.id" class="vis-scopes">
+            <label class="chip-row">
+              <input v-model="accessMode" type="radio" value="inherit" />
+              مثل نقش (بدون override)
+            </label>
+            <label class="chip-row">
+              <input v-model="accessMode" type="radio" value="custom" />
+              سفارشی برای این کاربر
+            </label>
+            <DataAccessPolicyPanel
+              v-model="draftAccess"
+              v-model:treasury-access="draftTreasury"
+              :show-treasury="showTreasury"
+              :data-locked="accessMode === 'inherit'"
+              compact
             />
-            <a-list v-else item-layout="vertical" :data-source="editableUsers">
-              <template #renderItem="{ item: u }">
-                <a-list-item>
-                  <template v-if="canEdit" #actions>
-                    <a-button type="link" @click="openAccessEditor(u)">
-                      {{ expandedAccess === u.id ? 'بستن' : 'تنظیم' }}
-                    </a-button>
-                  </template>
-                  <a-list-item-meta :description="accessSummary(u)">
-                    <template #title>
-                      <a-typography-text strong>{{ u.fullName }}</a-typography-text>
-                    </template>
-                  </a-list-item-meta>
-                  <a-flex v-if="expandedAccess === u.id" vertical :gap="8" style="width: 100%">
-                    <a-radio-group v-model:value="accessMode">
-                      <a-space wrap>
-                        <a-radio value="inherit">مثل نقش</a-radio>
-                        <a-radio value="custom">سفارشی</a-radio>
-                      </a-space>
-                    </a-radio-group>
-                    <DataAccessPolicyPanel
-                      v-if="accessMode === 'custom'"
-                      v-model="draftAccess"
-                      compact
-                    />
-                    <a-space>
-                      <a-button type="primary" :loading="accessSaving" @click="saveUserAccess(u.id)">
-                        ذخیره
-                      </a-button>
-                      <a-button @click="expandedAccess = null">انصراف</a-button>
-                    </a-space>
-                  </a-flex>
-                </a-list-item>
-              </template>
-            </a-list>
-          </a-flex>
-        </a-collapse-panel>
-      </a-collapse>
-    </a-card>
-  </a-flex>
+            <div class="actions">
+              <UiButton :loading="accessSaving" @click="saveUserAccess(u.id)">ذخیره</UiButton>
+              <UiButton variant="secondary" @click="expandedAccess = null">انصراف</UiButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
+
+<style scoped>
+.teams-panel {
+  display: grid;
+  gap: 1rem;
+}
+.card {
+  background: #fff;
+  border: 1px solid #eef2f7;
+  border-radius: var(--radius, 12px);
+  padding: 1rem;
+}
+.card h3 {
+  margin: 0 0 0.75rem;
+  font-size: 1rem;
+}
+.prior-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.75rem;
+}
+.prior-head h3 {
+  margin: 0;
+}
+.prior-head :deep(.trigger) {
+  min-width: 12rem;
+}
+.prior-picker {
+  display: grid;
+  grid-template-columns: minmax(10rem, 1fr) minmax(13rem, 1fr);
+  gap: 0.6rem;
+  margin-top: 0.75rem;
+}
+.prior-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-top: 0.75rem;
+}
+.prior-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid #ccfbf1;
+  border-radius: 999px;
+  background: #f0fdfa;
+  color: #0f766e;
+  padding: 0.25rem 0.6rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+.prior-chip button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  padding: 0;
+}
+.prior-chip button:disabled {
+  opacity: 0.45;
+  cursor: wait;
+}
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 0.75rem;
+  align-items: end;
+}
+.team-list {
+  display: grid;
+  gap: 0.75rem;
+}
+.team {
+  border: 1px solid #eef2f7;
+  border-radius: var(--radius, 12px);
+  padding: 0.75rem;
+}
+.team header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: start;
+}
+.actions {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+.muted,
+.hint,
+.members {
+  color: #64748b;
+  font-size: 0.85rem;
+  margin: 0.25rem 0 0;
+}
+.editor {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #eef2f7;
+  display: grid;
+  gap: 0.45rem;
+}
+.person {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.35rem 0;
+}
+.vis-table {
+  display: grid;
+  gap: 0.5rem;
+}
+.vis-user {
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 0.45rem;
+}
+.vis-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.45rem 0;
+}
+.vis-badge {
+  margin-inline-start: 0.4rem;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  background: #eef2ff;
+  color: #4338ca;
+  font-size: 0.72rem;
+}
+.vis-scopes {
+  display: grid;
+  gap: 0.55rem;
+  padding: 0.6rem 0.75rem;
+  background: #f8fafc;
+  border-radius: 10px;
+}
+.chip-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.88rem;
+}
+select {
+  font: inherit;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 0.4rem 0.55rem;
+  background: #fff;
+}
+.error {
+  color: #b91c1c;
+  font-weight: 600;
+}
+.ok {
+  color: #0f766e;
+  font-weight: 600;
+}
+@media (max-width: 800px) {
+  .row,
+  .vis-row,
+  .prior-picker {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

apps/web/src/components/activities/ActivitiesKanban.vue

@@ -10,7 +10,6 @@ import type {
 import { api } from '@/lib/api';
 import { activityTypeView } from '@/lib/activity-types';
 import { calendarDaysBetween, formatClockFa, formatJalaliDay, startOfLocalDay, toFaDigits } from '@/lib/jalali';
-import { Spin as ASpin } from 'ant-design-vue';
 import PipelineBoard from '@/components/pipeline/PipelineBoard.vue';
 import DealCardOverlay from '@/components/pipeline/DealCardOverlay.vue';
 import {
@@ -121,6 +120,7 @@ function toCard(item: ActivityDto, stageId: string): PipelineDeal {
     assigneeNames,
     ownerId: item.assignee?.id ?? null,
     assigneeIds: (item.assignees ?? []).map((a) => a.id),
+    priority: item.priority,
   };
 }
 
@@ -254,40 +254,54 @@ function onDragOver(stageId: string, event: DragEvent) {
 
 async function moveCard(activityId: string, toStageId: string, index?: number) {
   const fromStageId = findStageOf(activityId);
-  if (!fromStageId || fromStageId === toStageId) return;
+  if (!fromStageId) return;
   const from = columns.value[fromStageId]!;
   const to = columns.value[toStageId];
   if (!to) return;
-  const item = from.items.find((i) => i.id === activityId)!;
+  const fromIndex = from.items.findIndex((i) => i.id === activityId);
+  const item = from.items[fromIndex];
+  if (!item) return;
   const toStage = props.stages.find((s) => s.id === toStageId)!;
+  const same = fromStageId === toStageId;
+  const without = (same ? from.items : to.items).filter((i) => i.id !== activityId);
+  if (same && index == null) return;
+  let insertAt = index == null || index < 0 ? 0 : index;
+  if (same && index != null && index > fromIndex) insertAt -= 1;
+  insertAt = Math.max(0, Math.min(insertAt, without.length));
+  if (same && insertAt === fromIndex) return;
 
-  const snapshot = {
-    fromItems: from.items,
-    fromTotal: from.total,
-    toItems: to.items,
-    toTotal: to.total,
-  };
+  const prevFrom = from.items;
+  const prevTo = to.items;
+  const prevFromTotal = from.total;
+  const prevToTotal = to.total;
   const optimistic: ActivityDto = { ...item, status: toStage.kind, stageId: toStageId };
-  from.items = from.items.filter((i) => i.id !== activityId);
-  from.total = Math.max(0, from.total - 1);
-  const nextTo = [...to.items];
-  const at = index == null || index < 0 || index > nextTo.length ? 0 : index;
-  nextTo.splice(at, 0, optimistic);
-  to.items = nextTo;
-  to.total += 1;
+  const nextTo = [...without];
+  nextTo.splice(insertAt, 0, optimistic);
+  if (same) {
+    from.items = nextTo;
+  } else {
+    from.items = from.items.filter((i) => i.id !== activityId);
+    from.total = Math.max(0, from.total - 1);
+    to.items = nextTo;
+    to.total += 1;
+  }
 
   moving.value = true;
   try {
     const { data } = await api.patch<ActivityDto>(`/activities/${activityId}/stage`, {
       stageId: toStageId,
+      position: insertAt,
     });
-    to.items = to.items.map((i) => (i.id === activityId ? data : i));
+    const column = same ? from : to;
+    column.items = column.items.map((i) => (i.id === activityId ? data : i));
     emit('changed');
   } catch (e) {
-    from.items = snapshot.fromItems;
-    from.total = snapshot.fromTotal;
-    to.items = snapshot.toItems;
-    to.total = snapshot.toTotal;
+    from.items = prevFrom;
+    from.total = prevFromTotal;
+    if (!same) {
+      to.items = prevTo;
+      to.total = prevToTotal;
+    }
     emit('error', apiMessage(e, 'جابه‌جایی فعالیت ناموفق بود.'));
   } finally {
     moving.value = false;
@@ -415,21 +429,8 @@ function openActivity(id: string) {
 </script>
 
 <template>
-  <div
-    class="kanban-wrap"
-    :style="{
-      flex: '1 1 auto',
-      minHeight: 0,
-      height: '100%',
-      minWidth: 0,
-      display: 'flex',
-      flexDirection: 'column',
-    }"
-  >
-    <a-spin
-      v-if="initialLoading && !Object.keys(columns).length"
-      tip="در حال بارگذاری ستون‌ها…"
-    />
+  <div class="kanban-wrap">
+    <p v-if="initialLoading && !Object.keys(columns).length" class="muted">در حال بارگذاری ستون‌ها…</p>
     <PipelineBoard
       v-else
       :stages="boardStages"
@@ -479,4 +480,9 @@ function openActivity(id: string) {
   display: flex;
   flex-direction: column;
 }
+
+.muted {
+  margin: 0;
+  color: #64748b;
+}
 </style>

apps/web/src/components/activities/ActivityFieldsEditor.vue

@@ -11,34 +11,12 @@ import type {
   PersonDto,
 } from '@mento/shared';
 import { api } from '@/lib/api';
+import { canAssignToOthers } from '@/lib/assign-access';
+import { useAuthStore } from '@/stores/auth';
 import { toFaDigits } from '@/lib/jalali';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import UserMultiSelect from '@/components/UserMultiSelect.vue';
-import {
-  Button as AButton,
-  Checkbox as ACheckbox,
-  Col as ACol,
-  Flex as AFlex,
-  FormItem as AFormItem,
-  Input as AInput,
-  InputNumber as AInputNumber,
-  Row as ARow,
-  Select as ASelect,
-  Space as ASpace,
-  Switch as ASwitch,
-  Tag as ATag,
-  Textarea as ATextarea,
-  Typography,
-} from 'ant-design-vue';
-import {
-  CloseOutlined,
-  DownOutlined,
-  PlusOutlined,
-  UpOutlined,
-  UserOutlined,
-} from '@ant-design/icons-vue';
-
-const { Text: ATypographyText } = Typography;
+import UiIcon from '@/components/UiIcon.vue';
 
 const props = defineProps<{
   fields: ActivityFieldDef[];
@@ -46,6 +24,8 @@ const props = defineProps<{
 }>();
 
 const model = defineModel<ActivityFieldValues>({ required: true });
+const auth = useAuthStore();
+const canAssignOthers = computed(() => canAssignToOthers(auth.user, 'activities'));
 
 function get<T extends ActivityFieldValue>(key: string, fallback: T): T {
   const v = model.value[key];
@@ -66,20 +46,9 @@ function multi(key: string): string[] {
   return Array.isArray(v) && v.every((x) => typeof x === 'string') ? (v as string[]) : [];
 }
 
-function fieldSpan(type: ActivityFieldDef['type']): number {
-  return ['textarea', 'checklist', 'participants', 'multiselect'].includes(type) ? 24 : 12;
-}
-
-function selectOptions(f: ActivityFieldDef) {
-  return (f.options ?? []).map((opt) => ({ value: opt, label: opt }));
-}
-
-function onNumberUpdate(key: string, value: number | string | null) {
-  if (value == null || value === '') {
-    set(key, null);
-    return;
-  }
-  set(key, Number(value));
+function toggleMulti(key: string, opt: string) {
+  const list = multi(key);
+  set(key, list.includes(opt) ? list.filter((x) => x !== opt) : [...list, opt]);
 }
 
 /* ---------- چک‌لیست ---------- */
@@ -87,9 +56,7 @@ const checklistDraft = ref<Record<string, string>>({});
 
 function checklist(key: string): ActivityChecklistItem[] {
   const v = model.value[key];
-  return Array.isArray(v)
-    ? (v as ActivityChecklistItem[]).filter((x) => x && typeof x === 'object')
-    : [];
+  return Array.isArray(v) ? (v as ActivityChecklistItem[]).filter((x) => x && typeof x === 'object') : [];
 }
 
 function addChecklistItem(key: string) {
@@ -148,82 +115,39 @@ function addGuest(key: string) {
 
 const personQuery = ref<Record<string, string>>({});
 const personResults = ref<Record<string, PersonDto[]>>({});
-const personSearching = ref<Record<string, boolean>>({});
+const personOpenKey = ref('');
 let personTimer: ReturnType<typeof setTimeout> | undefined;
 let personSeq = 0;
 
-function searchPeople(key: string, raw: string) {
-  personQuery.value = { ...personQuery.value, [key]: raw };
+function searchPeople(key: string) {
+  personOpenKey.value = key;
   if (personTimer) clearTimeout(personTimer);
-  const q = raw.trim();
+  const q = (personQuery.value[key] ?? '').trim();
   if (!q) {
     personResults.value = { ...personResults.value, [key]: [] };
-    personSearching.value = { ...personSearching.value, [key]: false };
     return;
   }
-  personSearching.value = { ...personSearching.value, [key]: true };
   const seq = ++personSeq;
   personTimer = setTimeout(async () => {
     try {
       const { data } = await api.get<PaginatedResponse<PersonDto>>('/people', {
         params: { q, limit: 8 },
       });
-      if (seq === personSeq) {
-        personResults.value = { ...personResults.value, [key]: data.items };
-      }
+      if (seq === personSeq) personResults.value = { ...personResults.value, [key]: data.items };
     } catch {
-      if (seq === personSeq) {
-        personResults.value = { ...personResults.value, [key]: [] };
-      }
-    } finally {
-      if (seq === personSeq) {
-        personSearching.value = { ...personSearching.value, [key]: false };
-      }
+      if (seq === personSeq) personResults.value = { ...personResults.value, [key]: [] };
     }
   }, 280);
 }
 
-const personSelectOptions = computed(() => {
-  const map: Record<string, Array<{ value: string; label: string; company: string }>> = {};
-  for (const f of props.fields) {
-    if (f.type !== 'participants') continue;
-    const selectedIds = new Set(participants(f.key).people.map((p) => p.id));
-    map[f.key] = (personResults.value[f.key] ?? [])
-      .filter((p) => !selectedIds.has(p.id))
-      .map((p) => ({
-        value: p.id,
-        label: p.fullName,
-        company: p.company?.name ?? '',
-      }));
-  }
-  return map;
-});
-
-function onPersonPick(key: string, value: unknown) {
-  const id = value == null ? '' : String(value);
-  if (!id) return;
-  const hit =
-    (personResults.value[key] ?? []).find((p) => p.id === id) ??
-    null;
-  if (!hit) return;
+function addPerson(key: string, p: PersonDto) {
   const cur = participants(key);
-  if (!cur.people.some((x) => x.id === hit.id)) {
-    patchParticipants(key, { people: [...cur.people, { id: hit.id, name: hit.fullName }] });
+  if (!cur.people.some((x) => x.id === p.id)) {
+    patchParticipants(key, { people: [...cur.people, { id: p.id, name: p.fullName }] });
   }
   personQuery.value = { ...personQuery.value, [key]: '' };
   personResults.value = { ...personResults.value, [key]: [] };
-}
-
-function removePerson(key: string, id: string) {
-  patchParticipants(key, {
-    people: participants(key).people.filter((x) => x.id !== id),
-  });
-}
-
-function removeGuest(key: string, name: string) {
-  patchParticipants(key, {
-    guests: participants(key).guests.filter((x) => x !== name),
-  });
+  personOpenKey.value = '';
 }
 
 watch(
@@ -233,237 +157,523 @@ watch(
     guestDraft.value = {};
     personQuery.value = {};
     personResults.value = {};
-    personSearching.value = {};
   },
 );
 </script>
 
 <template>
-  <a-row :gutter="[16, 0]">
-    <a-col
+  <div class="fields-grid">
+    <div
       v-for="f in fields"
       :key="f.key"
-      :xs="24"
-      :md="fieldSpan(f.type)"
+      class="cf"
+      :class="{ wide: ['textarea', 'checklist', 'participants', 'multiselect'].includes(f.type) }"
     >
-      <a-form-item :required="f.required">
-        <template #label>
-          {{ f.label }}
-        </template>
+      <label :for="`cf-${f.key}`">
+        {{ f.label }}
+        <i v-if="f.required">*</i>
+      </label>
 
-        <a-input
-          v-if="f.type === 'text' || f.type === 'url'"
-          :value="str(f.key)"
-          :type="f.type === 'url' ? 'url' : 'text'"
-          :dir="f.type === 'url' ? 'ltr' : undefined"
-          :placeholder="f.placeholder || ''"
-          :maxlength="1000"
-          style="width: 100%"
-          @update:value="(v: string) => set(f.key, v)"
+      <input
+        v-if="f.type === 'text' || f.type === 'url'"
+        :id="`cf-${f.key}`"
+        :type="f.type === 'url' ? 'url' : 'text'"
+        :dir="f.type === 'url' ? 'ltr' : undefined"
+        :value="str(f.key)"
+        :placeholder="f.placeholder || ''"
+        maxlength="1000"
+        @input="set(f.key, ($event.target as HTMLInputElement).value)"
+      />
+
+      <textarea
+        v-else-if="f.type === 'textarea'"
+        :id="`cf-${f.key}`"
+        :value="str(f.key)"
+        :placeholder="f.placeholder || ''"
+        rows="3"
+        @input="set(f.key, ($event.target as HTMLTextAreaElement).value)"
+      />
+
+      <input
+        v-else-if="f.type === 'number'"
+        :id="`cf-${f.key}`"
+        type="number"
+        inputmode="decimal"
+        dir="ltr"
+        :value="str(f.key)"
+        :placeholder="f.placeholder || ''"
+        @input="
+          set(
+            f.key,
+            ($event.target as HTMLInputElement).value === ''
+              ? null
+              : Number(($event.target as HTMLInputElement).value),
+          )
+        "
+      />
+
+      <JalaliDateInput
+        v-else-if="f.type === 'date'"
+        :id="`cf-${f.key}`"
+        :model-value="str(f.key)"
+        @update:model-value="(v: string) => set(f.key, v || null)"
+      />
+
+      <select
+        v-else-if="f.type === 'select'"
+        :id="`cf-${f.key}`"
+        :value="str(f.key)"
+        @change="set(f.key, ($event.target as HTMLSelectElement).value || null)"
+      >
+        <option value="">— انتخاب کنید —</option>
+        <option v-for="opt in f.options ?? []" :key="opt" :value="opt">{{ opt }}</option>
+      </select>
+
+      <div v-else-if="f.type === 'multiselect'" class="chips">
+        <button
+          v-for="opt in f.options ?? []"
+          :key="opt"
+          type="button"
+          class="chip-opt"
+          :class="{ on: multi(f.key).includes(opt) }"
+          @click="toggleMulti(f.key, opt)"
+        >
+          <UiIcon v-if="multi(f.key).includes(opt)" name="check-plain" :size="12" />
+          {{ opt }}
+        </button>
+      </div>
+
+      <label v-else-if="f.type === 'checkbox'" class="switch">
+        <input
+          :id="`cf-${f.key}`"
+          type="checkbox"
+          :checked="get<boolean>(f.key, false) === true"
+          @change="set(f.key, ($event.target as HTMLInputElement).checked)"
         />
+        <i />
+        <span>{{ get<boolean>(f.key, false) === true ? 'بله' : 'خیر' }}</span>
+      </label>
 
-        <a-textarea
-          v-else-if="f.type === 'textarea'"
-          :value="str(f.key)"
-          :placeholder="f.placeholder || ''"
-          :rows="3"
-          style="width: 100%"
-          @update:value="(v: string) => set(f.key, v)"
-        />
-
-        <a-input-number
-          v-else-if="f.type === 'number'"
-          :value="str(f.key) === '' ? undefined : Number(str(f.key))"
-          :placeholder="f.placeholder || ''"
-          style="width: 100%"
-          @update:value="(v: number | string | null) => onNumberUpdate(f.key, v)"
-        />
-
-        <JalaliDateInput
-          v-else-if="f.type === 'date'"
-          :model-value="str(f.key)"
-          style="width: 100%"
-          @update:model-value="(v: string) => set(f.key, v || null)"
-        />
-
-        <a-select
-          v-else-if="f.type === 'select'"
-          :value="str(f.key) || undefined"
-          :options="selectOptions(f)"
-          allow-clear
-          placeholder="— انتخاب کنید —"
-          style="width: 100%"
-          @update:value="(v: unknown) => set(f.key, v == null || v === '' ? null : String(v))"
-        />
-
-        <a-select
-          v-else-if="f.type === 'multiselect'"
-          mode="multiple"
-          :value="multi(f.key)"
-          :options="selectOptions(f)"
-          :placeholder="f.placeholder || 'انتخاب کنید'"
-          style="width: 100%"
-          @update:value="(v: unknown) => set(f.key, Array.isArray(v) ? v.map(String) : [])"
-        />
-
-        <a-space v-else-if="f.type === 'checkbox'" :size="8">
-          <a-switch
-            :checked="get<boolean>(f.key, false) === true"
-            @update:checked="(v) => set(f.key, v === true)"
-          />
-          <a-typography-text>
-            {{ get<boolean>(f.key, false) === true ? 'بله' : 'خیر' }}
-          </a-typography-text>
-        </a-space>
-
-        <a-flex v-else-if="f.type === 'checklist'" vertical :gap="8">
-          <a-typography-text v-if="checklist(f.key).length" type="success">
-            {{ toFaDigits(checklist(f.key).filter((x) => x.done).length) }} از
-            {{ toFaDigits(checklist(f.key).length) }} انجام شده
-          </a-typography-text>
-          <a-flex
-            v-for="(it, idx) in checklist(f.key)"
-            :key="it.id"
-            align="center"
-            :gap="8"
-          >
-            <a-checkbox
+      <div v-else-if="f.type === 'checklist'" class="checklist">
+        <p v-if="checklist(f.key).length" class="progress">
+          {{ toFaDigits(checklist(f.key).filter((x) => x.done).length) }} از
+          {{ toFaDigits(checklist(f.key).length) }} انجام شده
+        </p>
+        <ul>
+          <li v-for="(it, idx) in checklist(f.key)" :key="it.id" :class="{ done: it.done }">
+            <input
+              type="checkbox"
               :checked="it.done"
-              @update:checked="(v: boolean) => updateChecklistItem(f.key, it.id, { done: v })"
+              aria-label="انجام شد"
+              @change="updateChecklistItem(f.key, it.id, { done: ($event.target as HTMLInputElement).checked })"
             />
-            <a-input
+            <input
+              class="item-text"
               :value="it.text"
-              :maxlength="300"
-              :style="{
-                flex: 1,
-                textDecoration: it.done ? 'line-through' : undefined,
-              }"
-              @update:value="(v: string) => updateChecklistItem(f.key, it.id, { text: v })"
+              maxlength="300"
+              @input="updateChecklistItem(f.key, it.id, { text: ($event.target as HTMLInputElement).value })"
             />
-            <a-button
-              :disabled="idx === 0"
-              aria-label="بالا"
-              @click="moveChecklistItem(f.key, idx, -1)"
-            >
-              <template #icon><UpOutlined /></template>
-            </a-button>
-            <a-button
+            <button type="button" class="mini" :disabled="idx === 0" aria-label="بالا" @click="moveChecklistItem(f.key, idx, -1)">▲</button>
+            <button
+              type="button"
+              class="mini"
               :disabled="idx === checklist(f.key).length - 1"
               aria-label="پایین"
               @click="moveChecklistItem(f.key, idx, 1)"
             >
-              <template #icon><DownOutlined /></template>
-            </a-button>
-            <a-button
-              danger
-              aria-label="حذف"
-              @click="removeChecklistItem(f.key, it.id)"
-            >
-              <template #icon><CloseOutlined /></template>
-            </a-button>
-          </a-flex>
-          <a-space :size="8" style="width: 100%">
-            <a-input
-              :value="checklistDraft[f.key] ?? ''"
-              :maxlength="300"
-              :placeholder="f.placeholder || 'مورد جدید را بنویسید و Enter بزنید'"
-              style="width: 100%"
-              @update:value="(v: string) => (checklistDraft[f.key] = v)"
-              @pressEnter="addChecklistItem(f.key)"
-            />
-            <a-button type="dashed" @click="addChecklistItem(f.key)">
-              <template #icon><PlusOutlined /></template>
-              افزودن
-            </a-button>
-          </a-space>
-        </a-flex>
+              ▼
+            </button>
+            <button type="button" class="mini danger" aria-label="حذف" @click="removeChecklistItem(f.key, it.id)">
+              <UiIcon name="x" :size="13" />
+            </button>
+          </li>
+        </ul>
+        <div class="add-row">
+          <input
+            v-model="checklistDraft[f.key]"
+            maxlength="300"
+            :placeholder="f.placeholder || 'مورد جدید را بنویسید و Enter بزنید'"
+            @keydown.enter.prevent="addChecklistItem(f.key)"
+          />
+          <button type="button" class="add-btn" @click="addChecklistItem(f.key)">
+            <UiIcon name="plus" :size="14" />
+            افزودن
+          </button>
+        </div>
+      </div>
 
-        <a-flex v-else-if="f.type === 'participants'" vertical :gap="16">
-          <a-flex vertical :gap="4">
-            <a-typography-text type="secondary">
-              همکاران (فعالیت در لیست آن‌ها هم نمایش داده می‌شود)
-            </a-typography-text>
-            <UserMultiSelect
-              :model-value="participants(f.key).userIds"
-              :users="users"
-              add-label="افزودن همکار"
-              empty-label="همکاری انتخاب نشده"
-              @update:model-value="(ids: string[]) => patchParticipants(f.key, { userIds: ids })"
-            />
-          </a-flex>
-
-          <a-flex vertical :gap="8">
-            <a-typography-text type="secondary">اشخاص / مشتریان</a-typography-text>
-            <a-space v-if="participants(f.key).people.length" :size="6" wrap>
-              <a-tag
-                v-for="p in participants(f.key).people"
-                :key="p.id"
-                closable
-                color="cyan"
-                :bordered="false"
-                @close="removePerson(f.key, p.id)"
+      <div v-else-if="f.type === 'participants'" class="participants">
+        <div class="p-block">
+          <small>همکاران (فعالیت در لیست آن‌ها هم نمایش داده می‌شود)</small>
+          <UserMultiSelect
+            :model-value="participants(f.key).userIds"
+            :users="users"
+            :disabled="!canAssignOthers"
+            add-label="افزودن همکار"
+            empty-label="همکاری انتخاب نشده"
+            @update:model-value="(ids: string[]) => patchParticipants(f.key, { userIds: ids })"
+          />
+        </div>
+        <div class="p-block">
+          <small>اشخاص / مشتریان</small>
+          <div class="tags">
+            <span v-for="p in participants(f.key).people" :key="p.id" class="tag">
+              <UiIcon name="user" :size="12" />
+              {{ p.name }}
+              <button
+                type="button"
+                aria-label="حذف"
+                @click="patchParticipants(f.key, { people: participants(f.key).people.filter((x) => x.id !== p.id) })"
               >
-                <UserOutlined />
-                {{ p.name }}
-              </a-tag>
-            </a-space>
-            <a-select
-              show-search
-              allow-clear
-              :filter-option="false"
-              :value="undefined"
-              :options="personSelectOptions[f.key] ?? []"
-              :not-found-content="
-                personSearching[f.key]
-                  ? 'در حال جستجو…'
-                  : (personQuery[f.key] || '').trim()
-                    ? 'شخصی پیدا نشد.'
-                    : 'نام یا موبایل را جستجو کنید'
-              "
+                ×
+              </button>
+            </span>
+          </div>
+          <div class="person-search">
+            <input
+              v-model="personQuery[f.key]"
+              type="search"
               placeholder="جستجوی نام یا موبایل شخص…"
-              style="width: 100%"
-              @search="(q: string) => searchPeople(f.key, q)"
-              @update:value="(v: unknown) => onPersonPick(f.key, v)"
-            >
-              <template #option="{ label, company }">
-                <a-flex vertical :gap="0">
-                  <a-typography-text>{{ label }}</a-typography-text>
-                  <a-typography-text v-if="company" type="secondary">{{ company }}</a-typography-text>
-                </a-flex>
-              </template>
-            </a-select>
-          </a-flex>
-
-          <a-flex vertical :gap="8">
-            <a-typography-text type="secondary">مهمانان دیگر (نام آزاد)</a-typography-text>
-            <a-space v-if="participants(f.key).guests.length" :size="6" wrap>
-              <a-tag
-                v-for="g in participants(f.key).guests"
-                :key="g"
-                closable
-                :bordered="false"
-                @close="removeGuest(f.key, g)"
+              @input="searchPeople(f.key)"
+              @focus="personOpenKey = f.key"
+            />
+            <ul v-if="personOpenKey === f.key && (personResults[f.key]?.length ?? 0) > 0" class="results">
+              <li v-for="p in personResults[f.key]" :key="p.id">
+                <button type="button" @click="addPerson(f.key, p)">
+                  <b>{{ p.fullName }}</b>
+                  <small v-if="p.company?.name">{{ p.company.name }}</small>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="p-block">
+          <small>مهمانان دیگر (نام آزاد)</small>
+          <div class="tags">
+            <span v-for="g in participants(f.key).guests" :key="g" class="tag guest">
+              {{ g }}
+              <button
+                type="button"
+                aria-label="حذف"
+                @click="patchParticipants(f.key, { guests: participants(f.key).guests.filter((x) => x !== g) })"
               >
-                {{ g }}
-              </a-tag>
-            </a-space>
-            <a-space :size="8" style="width: 100%">
-              <a-input
-                :value="guestDraft[f.key] ?? ''"
-                :maxlength="120"
-                placeholder="نام مهمان و Enter"
-                style="width: 100%"
-                @update:value="(v: string) => (guestDraft[f.key] = v)"
-                @pressEnter="addGuest(f.key)"
-              />
-              <a-button type="dashed" @click="addGuest(f.key)">
-                <template #icon><PlusOutlined /></template>
-                افزودن
-              </a-button>
-            </a-space>
-          </a-flex>
-        </a-flex>
-      </a-form-item>
-    </a-col>
-  </a-row>
+                ×
+              </button>
+            </span>
+          </div>
+          <div class="add-row">
+            <input
+              v-model="guestDraft[f.key]"
+              maxlength="120"
+              placeholder="نام مهمان و Enter"
+              @keydown.enter.prevent="addGuest(f.key)"
+            />
+            <button type="button" class="add-btn" @click="addGuest(f.key)">
+              <UiIcon name="plus" :size="14" />
+              افزودن
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.fields-grid {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.cf {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.cf > label {
+  margin: 0;
+  color: var(--color-text-muted, #64748b);
+  font-size: var(--fs-xs, 0.78rem);
+  font-weight: 600;
+}
+
+.cf > label i {
+  color: var(--color-danger, #dc2626);
+  font-style: normal;
+}
+
+.cf input:not([type='checkbox']),
+.cf select,
+.cf textarea {
+  width: 100%;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  min-height: var(--control-h);
+  padding: 0 0.85rem;
+  font: inherit;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.cf textarea {
+  min-height: 5rem;
+  padding: 0.6rem 0.85rem;
+  resize: vertical;
+}
+
+.chips,
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.chip-opt {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.3rem 0.75rem;
+  font: inherit;
+  font-size: 0.82rem;
+  cursor: pointer;
+}
+
+.chip-opt.on {
+  border-color: #5eead4;
+  background: #f0fdfa;
+  color: #0f766e;
+  font-weight: 600;
+}
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+}
+
+.switch input {
+  display: none;
+}
+
+.switch i {
+  width: 44px;
+  height: 26px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  position: relative;
+}
+
+.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;
+}
+
+.checklist ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.checklist li {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.checklist li input[type='checkbox'] {
+  width: 18px;
+  height: 18px;
+  accent-color: #14b8a6;
+  flex-shrink: 0;
+}
+
+.checklist .item-text {
+  flex: 1;
+  min-height: 2.2rem !important;
+}
+
+.checklist li.done .item-text {
+  text-decoration: line-through;
+  color: #94a3b8;
+}
+
+.progress {
+  margin: 0;
+  font-size: 0.78rem;
+  color: #0f766e;
+  font-weight: 600;
+}
+
+.mini {
+  width: 1.9rem;
+  height: 1.9rem;
+  flex-shrink: 0;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  font-size: 0.65rem;
+  color: #64748b;
+  cursor: pointer;
+}
+
+.mini:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.mini.danger {
+  color: #dc2626;
+}
+
+.add-row {
+  display: flex;
+  gap: 0.4rem;
+  margin-top: 0.35rem;
+}
+
+.add-row input {
+  flex: 1;
+}
+
+.add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 1px dashed #5eead4;
+  background: #f0fdfa;
+  color: #0f766e;
+  border-radius: var(--radius);
+  padding: 0 0.8rem;
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.participants {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px dashed #e2e8f0;
+  border-radius: var(--radius);
+}
+
+.p-block {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.p-block > small {
+  color: #94a3b8;
+  font-size: 0.74rem;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: #f0fdfa;
+  color: #0f766e;
+  border-radius: 999px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.tag.guest {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.tag button {
+  border: 0;
+  background: transparent;
+  color: #64748b;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  padding: 0 0.1rem;
+}
+
+.person-search {
+  position: relative;
+}
+
+.results {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + 4px);
+  z-index: 20;
+  list-style: none;
+  margin: 0;
+  padding: 0.3rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  max-height: 14rem;
+  overflow: auto;
+}
+
+.results button {
+  width: 100%;
+  display: grid;
+  gap: 0.1rem;
+  text-align: start;
+  border: 0;
+  background: none;
+  padding: 0.45rem 0.55rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.results button:hover {
+  background: #f8fafc;
+}
+
+.results b {
+  font-size: 0.86rem;
+  font-weight: 600;
+}
+
+.results small {
+  color: #94a3b8;
+  font-size: 0.74rem;
+}
+
+@media (min-width: 960px) {
+  .fields-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .cf.wide {
+    grid-column: 1 / -1;
+  }
+}
+</style>

apps/web/src/components/activities/ActivityStagesManager.vue

@@ -12,25 +12,10 @@ import {
   ACTIVITY_STAGE_COLORS,
   ACTIVITY_STAGE_KIND_LABELS,
 } from '@mento/shared';
-import {
-  ArrowDownOutlined,
-  ArrowUpOutlined,
-  DeleteOutlined,
-} from '@ant-design/icons-vue';
-import {
-  Alert as AAlert,
-  Button as AButton,
-  Col as ACol,
-  Divider as ADivider,
-  Flex as AFlex,
-  Input as AInput,
-  Modal as AModal,
-  Row as ARow,
-  Select as ASelect,
-} from 'ant-design-vue';
-import { Modal } from 'ant-design-vue';
 import { api } from '@/lib/api';
 import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
+import { UiButton, UiModal } from '@/components/ui';
+import UiIcon from '@/components/UiIcon.vue';
 
 const props = defineProps<{
   open: boolean;
@@ -77,19 +62,6 @@ function apiMessage(e: unknown, fallback: string) {
   return fallback;
 }
 
-function confirmAsync(content: string, title = 'تأیید'): Promise<boolean> {
-  return new Promise((resolve) => {
-    Modal.confirm({
-      title,
-      content,
-      okText: 'ادامه',
-      cancelText: 'انصراف',
-      onOk: () => resolve(true),
-      onCancel: () => resolve(false),
-    });
-  });
-}
-
 function isDirty(stage: ActivityStageDto) {
   const d = drafts.value[stage.id];
   return Boolean(
@@ -106,9 +78,9 @@ async function save(stage: ActivityStageDto) {
   }
   if (
     d.kind !== stage.kind &&
-    !(await confirmAsync(
+    !window.confirm(
       'با تغییر نوع ستون، فعالیت‌های فعلی آن وضعیتشان را نگه می‌دارند و به اولین ستون هم‌وضعیت خودشان منتقل می‌شوند. ادامه می‌دهید؟',
-    ))
+    )
   ) {
     return;
   }
@@ -147,25 +119,23 @@ async function move(index: number, dir: -1 | 1) {
 }
 
 async function remove(stage: ActivityStageDto) {
-  Modal.confirm({
-    title: 'حذف ستون',
-    content: `ستون «${stage.name}» حذف شود؟ فعالیت‌های آن به اولین ستون هم‌وضعیت منتقل می‌شوند.`,
-    okText: 'حذف',
-    cancelText: 'انصراف',
-    okButtonProps: { danger: true },
-    async onOk() {
-      busyId.value = stage.id;
-      error.value = '';
-      try {
-        await api.delete(`/activities/stages/${stage.id}`);
-        emit('changed');
-      } catch (e) {
-        error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
-      } finally {
-        busyId.value = '';
-      }
-    },
-  });
+  if (
+    !window.confirm(
+      `ستون «${stage.name}» حذف شود؟ فعالیت‌های آن به اولین ستون هم‌وضعیت منتقل می‌شوند.`,
+    )
+  ) {
+    return;
+  }
+  busyId.value = stage.id;
+  error.value = '';
+  try {
+    await api.delete(`/activities/stages/${stage.id}`);
+    emit('changed');
+  } catch (e) {
+    error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
+  } finally {
+    busyId.value = '';
+  }
 }
 
 async function create() {
@@ -186,163 +156,226 @@ async function create() {
     busyId.value = '';
   }
 }
-
-function dotColor(stage: ActivityStageDto) {
-  const color = drafts.value[stage.id]?.color ?? stage.color;
-  return PIPELINE_ACCENT[color].solid;
-}
 </script>
 
 <template>
-  <a-modal
+  <UiModal
     :open="open"
     :title="boardName ? `مدیریت ستون‌های گروه «${boardName}»` : 'مدیریت ستون‌ها و تب‌های فعالیت'"
-    :footer="null"
-    @cancel="emit('close')"
+    @close="emit('close')"
   >
-    <a-flex vertical gap="middle">
-      <a-typography-text type="secondary">
-        هر ستون یک «نوع» دارد: فعالیتی که به ستون <strong>انجام‌شده</strong> کشیده شود خودکار انجام‌شده ثبت
-        می‌شود و در ستون <strong>لغو شده</strong> لغو می‌شود. از هر نوع حداقل یک ستون لازم است.
-      </a-typography-text>
+    <div class="manager">
+      <p class="hint">
+        هر ستون یک «نوع» دارد: فعالیتی که به ستون <b>انجام‌شده</b> کشیده شود خودکار انجام‌شده ثبت
+        می‌شود و در ستون <b>لغو شده</b> لغو می‌شود. از هر نوع حداقل یک ستون لازم است.
+      </p>
 
-      <a-alert v-if="error" type="error" :message="error" show-icon />
+      <p v-if="error" class="error">{{ error }}</p>
 
-      <a-flex vertical gap="small">
-        <a-row
+      <div class="rows">
+        <div
           v-for="(stage, index) in stages"
           :key="stage.id"
-          :gutter="[8, 8]"
-          align="middle"
+          class="row"
+          :style="{ '--dot': PIPELINE_ACCENT[drafts[stage.id]?.color ?? stage.color].solid }"
         >
-          <a-col flex="none">
-            <span
-              aria-hidden="true"
-              :style="{
-                display: 'inline-block',
-                width: '0.65rem',
-                height: '0.65rem',
-                borderRadius: '999px',
-                background: dotColor(stage),
-              }"
-            />
-          </a-col>
-          <a-col :xs="24" :sm="8">
-            <a-input
-              v-if="drafts[stage.id]"
-              v-model:value="drafts[stage.id]!.name"
-              :maxlength="80"
-              aria-label="نام ستون"
-              @keydown.enter.prevent="save(stage)"
-            />
-          </a-col>
-          <a-col :xs="12" :sm="6">
-            <a-select
-              v-if="drafts[stage.id]"
-              v-model:value="drafts[stage.id]!.kind"
-              aria-label="نوع ستون"
-              style="width: 100%"
+          <span class="dot" aria-hidden="true" />
+          <input
+            v-if="drafts[stage.id]"
+            v-model="drafts[stage.id]!.name"
+            class="name"
+            maxlength="80"
+            aria-label="نام ستون"
+            @keydown.enter.prevent="save(stage)"
+          />
+          <select v-if="drafts[stage.id]" v-model="drafts[stage.id]!.kind" aria-label="نوع ستون">
+            <option v-for="k in KINDS" :key="k" :value="k">{{ ACTIVITY_STAGE_KIND_LABELS[k] }}</option>
+          </select>
+          <select v-if="drafts[stage.id]" v-model="drafts[stage.id]!.color" aria-label="رنگ ستون">
+            <option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
+              {{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
+            </option>
+          </select>
+          <div class="row-actions">
+            <button
+              type="button"
+              class="icon"
+              :disabled="index === 0 || Boolean(busyId)"
+              title="انتقال به قبل"
+              aria-label="انتقال به قبل"
+              @click="move(index, -1)"
             >
-              <a-select-option v-for="k in KINDS" :key="k" :value="k">
-                {{ ACTIVITY_STAGE_KIND_LABELS[k] }}
-              </a-select-option>
-            </a-select>
-          </a-col>
-          <a-col :xs="12" :sm="5">
-            <a-select
-              v-if="drafts[stage.id]"
-              v-model:value="drafts[stage.id]!.color"
-              aria-label="رنگ ستون"
-              style="width: 100%"
+              ▲
+            </button>
+            <button
+              type="button"
+              class="icon"
+              :disabled="index === stages.length - 1 || Boolean(busyId)"
+              title="انتقال به بعد"
+              aria-label="انتقال به بعد"
+              @click="move(index, 1)"
             >
-              <a-select-option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
-                {{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
-              </a-select-option>
-            </a-select>
-          </a-col>
-          <a-col :xs="24" :sm="5">
-            <a-flex align="center" gap="small" wrap="wrap" justify="flex-end">
-              <a-button
-                type="text"
-                :disabled="index === 0 || Boolean(busyId)"
-                title="انتقال به قبل"
-                aria-label="انتقال به قبل"
-                @click="move(index, -1)"
-              >
-                <template #icon><ArrowUpOutlined /></template>
-              </a-button>
-              <a-button
-                type="text"
-                :disabled="index === stages.length - 1 || Boolean(busyId)"
-                title="انتقال به بعد"
-                aria-label="انتقال به بعد"
-                @click="move(index, 1)"
-              >
-                <template #icon><ArrowDownOutlined /></template>
-              </a-button>
-              <a-button
-                type="primary"
-                :disabled="!isDirty(stage) || Boolean(busyId)"
-                :loading="busyId === stage.id"
-                @click="save(stage)"
-              >
-                ذخیره
-              </a-button>
-              <a-button
-                type="text"
-                danger
-                :disabled="Boolean(busyId)"
-                title="حذف ستون"
-                aria-label="حذف ستون"
-                @click="remove(stage)"
-              >
-                <template #icon><DeleteOutlined /></template>
-              </a-button>
-            </a-flex>
-          </a-col>
-        </a-row>
-      </a-flex>
+              ▼
+            </button>
+            <UiButton
+              size="sm"
+              type="button"
+              :disabled="!isDirty(stage) || Boolean(busyId)"
+              :loading="busyId === stage.id"
+              @click="save(stage)"
+            >
+              ذخیره
+            </UiButton>
+            <button
+              type="button"
+              class="icon danger"
+              :disabled="Boolean(busyId)"
+              title="حذف ستون"
+              aria-label="حذف ستون"
+              @click="remove(stage)"
+            >
+              <UiIcon name="trash" :size="15" />
+            </button>
+          </div>
+        </div>
+      </div>
 
-      <a-divider />
-
-      <a-flex vertical gap="small" @submit.prevent="create">
-        <a-typography-text strong>ستون جدید</a-typography-text>
-        <a-row :gutter="[8, 8]" align="middle">
-          <a-col :xs="24" :sm="10">
-            <a-input
-              v-model:value="createForm.name"
-              :maxlength="80"
-              placeholder="مثلاً: منتظر پاسخ مشتری"
-            />
-          </a-col>
-          <a-col :xs="12" :sm="5">
-            <a-select v-model:value="createForm.kind" aria-label="نوع ستون جدید" style="width: 100%">
-              <a-select-option v-for="k in KINDS" :key="k" :value="k">
-                {{ ACTIVITY_STAGE_KIND_LABELS[k] }}
-              </a-select-option>
-            </a-select>
-          </a-col>
-          <a-col :xs="12" :sm="5">
-            <a-select v-model:value="createForm.color" aria-label="رنگ ستون جدید" style="width: 100%">
-              <a-select-option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
-                {{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
-              </a-select-option>
-            </a-select>
-          </a-col>
-          <a-col :xs="24" :sm="4">
-            <a-button
-              type="primary"
-              html-type="button"
-              block
-              :disabled="!createForm.name.trim() || Boolean(busyId)"
-              :loading="busyId === 'create'"
-              @click="create"
-            >
-              افزودن
-            </a-button>
-          </a-col>
-        </a-row>
-      </a-flex>
-    </a-flex>
-  </a-modal>
+      <form class="create" @submit.prevent="create">
+        <strong>ستون جدید</strong>
+        <div class="create-fields">
+          <input v-model="createForm.name" maxlength="80" placeholder="مثلاً: منتظر پاسخ مشتری" />
+          <select v-model="createForm.kind" aria-label="نوع ستون جدید">
+            <option v-for="k in KINDS" :key="k" :value="k">{{ ACTIVITY_STAGE_KIND_LABELS[k] }}</option>
+          </select>
+          <select v-model="createForm.color" aria-label="رنگ ستون جدید">
+            <option v-for="c in ACTIVITY_STAGE_COLORS" :key="c" :value="c">
+              {{ ACTIVITY_STAGE_COLOR_LABELS[c] }}
+            </option>
+          </select>
+          <UiButton
+            variant="primary"
+            type="submit"
+            :disabled="!createForm.name.trim() || Boolean(busyId)"
+            :loading="busyId === 'create'"
+          >
+            افزودن
+          </UiButton>
+        </div>
+      </form>
+    </div>
+  </UiModal>
 </template>
+
+<style scoped>
+.manager {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.hint {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.84rem;
+  line-height: 1.8;
+}
+
+.error {
+  margin: 0;
+  color: #b91c1c;
+}
+
+.rows {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 0.7rem minmax(0, 1fr) 9rem 6.5rem auto;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.5rem 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #fff;
+}
+
+.dot {
+  width: 0.65rem;
+  height: 0.65rem;
+  border-radius: 999px;
+  background: var(--dot);
+}
+
+input,
+select {
+  min-height: var(--control-h);
+  padding: 0 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #fff;
+  font: inherit;
+  font-size: 0.86rem;
+  min-width: 0;
+}
+
+.row-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.icon {
+  width: 2rem;
+  height: 2rem;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #fff;
+  color: #475569;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+
+.icon:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.icon.danger {
+  color: #dc2626;
+}
+
+.create {
+  display: grid;
+  gap: 0.5rem;
+  padding-top: 0.8rem;
+  border-top: 1px solid var(--line);
+}
+
+.create-fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 9rem 6.5rem auto;
+  gap: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .row {
+    grid-template-columns: 0.7rem minmax(0, 1fr) auto;
+  }
+
+  .row select {
+    grid-column: 2 / -1;
+  }
+
+  .row-actions {
+    grid-column: 1 / -1;
+    justify-content: flex-end;
+  }
+
+  .create-fields {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

apps/web/src/components/automations/AutomationCanvas.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, type Component } from 'vue';
+import { computed, ref } from 'vue';
+import UiIcon from '@/components/UiIcon.vue';
 import AutomationNode from '@/components/automations/AutomationNode.vue';
 import {
   AUTOMATION_ACTION_LABELS,
@@ -21,23 +22,6 @@ import {
   type TeamDto,
 } from '@mento/shared';
 import { toFaDigits } from '@/lib/jalali';
-import { Button as AButton, Divider as ADivider, Space as ASpace, Tooltip as ATooltip } from 'ant-design-vue';
-import {
-  BellOutlined,
-  DeleteOutlined,
-  DragOutlined,
-  ExpandOutlined,
-  FilterOutlined,
-  FlagOutlined,
-  FullscreenExitOutlined,
-  FullscreenOutlined,
-  GiftOutlined,
-  PlusOutlined,
-  SelectOutlined,
-  ThunderboltOutlined,
-  ZoomInOutlined,
-  ZoomOutOutlined,
-} from '@ant-design/icons-vue';
 
 export type AutomationAddPayload =
   | { kind: 'action'; action: AutomationAction }
@@ -58,15 +42,8 @@ const props = withDefaults(
     form?: LeadFormDto | null;
     users?: OrgUserDto[];
     teams?: TeamDto[];
-    fullscreen?: boolean;
   }>(),
-  {
-    chainMode: 'stop',
-    form: null,
-    users: () => [],
-    teams: () => [],
-    fullscreen: false,
-  },
+  { chainMode: 'stop', form: null, users: () => [], teams: () => [] },
 );
 
 const emit = defineEmits<{
@@ -75,7 +52,6 @@ const emit = defineEmits<{
   remove: [id: string];
   removeRange: [start: number, end: number];
   addBranch: [];
-  'update:fullscreen': [value: boolean];
 }>();
 
 const addAt = ref<{ key: string; index: number; allow: AddAllow } | null>(null);
@@ -84,116 +60,6 @@ const actionCount = computed(
   () => props.steps.filter((s) => !isAutomationCondition(s)).length,
 );
 
-type CanvasTool = 'select' | 'hand';
-const Z_MIN = 0.4;
-const Z_MAX = 2;
-const Z_STEP = 0.1;
-
-const tool = ref<CanvasTool>('select');
-const zoom = ref(1);
-const pan = ref({ x: 0, y: 0 });
-const viewportRef = ref<HTMLElement | null>(null);
-const panning = ref(false);
-const panOrigin = ref({ x: 0, y: 0, panX: 0, panY: 0 });
-const didPan = ref(false);
-
-const zoomLabel = computed(() => `${toFaDigits(Math.round(zoom.value * 100))}٪`);
-const worldStyle = computed(() => ({
-  transform: `translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value})`,
-}));
-
-function clampZoom(v: number) {
-  return Math.min(Z_MAX, Math.max(Z_MIN, Math.round(v * 100) / 100));
-}
-
-function setTool(next: CanvasTool) {
-  tool.value = next;
-  addAt.value = null;
-}
-
-function zoomBy(delta: number) {
-  zoom.value = clampZoom(zoom.value + delta);
-}
-
-function resetView() {
-  zoom.value = 1;
-  pan.value = { x: 0, y: 0 };
-}
-
-function onWheel(e: WheelEvent) {
-  const el = viewportRef.value;
-  if (!el) return;
-  const rect = el.getBoundingClientRect();
-  const mx = e.clientX - rect.left;
-  const my = e.clientY - rect.top;
-  const prev = zoom.value;
-  const next = clampZoom(prev * (e.deltaY > 0 ? 0.9 : 1.1));
-  if (next === prev) return;
-  const wx = (mx - pan.value.x) / prev;
-  const wy = (my - pan.value.y) / prev;
-  pan.value = { x: mx - wx * next, y: my - wy * next };
-  zoom.value = next;
-}
-
-function onPointerDown(e: PointerEvent) {
-  const hand = tool.value === 'hand' || e.button === 1 || e.altKey;
-  if (!hand || e.button === 2) return;
-  e.preventDefault();
-  panning.value = true;
-  didPan.value = false;
-  panOrigin.value = {
-    x: e.clientX,
-    y: e.clientY,
-    panX: pan.value.x,
-    panY: pan.value.y,
-  };
-  (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-}
-
-function onPointerMove(e: PointerEvent) {
-  if (!panning.value) return;
-  const dx = e.clientX - panOrigin.value.x;
-  const dy = e.clientY - panOrigin.value.y;
-  if (Math.abs(dx) + Math.abs(dy) > 3) didPan.value = true;
-  pan.value = {
-    x: panOrigin.value.panX + dx,
-    y: panOrigin.value.panY + dy,
-  };
-}
-
-function onPointerUp(e: PointerEvent) {
-  if (!panning.value) return;
-  panning.value = false;
-  try {
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
-  } catch {
-    /* ignore */
-  }
-}
-
-function onViewportClick() {
-  if (didPan.value) {
-    didPan.value = false;
-    return;
-  }
-  addAt.value = null;
-}
-
-function onDocPointerDown(e: PointerEvent) {
-  if (!addAt.value) return;
-  const target = e.target;
-  if (!(target instanceof Element)) return;
-  if (target.closest('.picker') || target.closest('.plus')) return;
-  addAt.value = null;
-}
-
-onMounted(() => {
-  document.addEventListener('pointerdown', onDocPointerDown, true);
-});
-onBeforeUnmount(() => {
-  document.removeEventListener('pointerdown', onDocPointerDown, true);
-});
-
 const layout = computed((): { main: LaneItem[]; branches: BranchLane[] } => {
   const steps = props.steps;
   const { prefixEnd, branches } = splitAutomationBranches(steps);
@@ -285,10 +151,10 @@ function assignHint(step: AutomationStep) {
   return 'مسئول پرونده';
 }
 
-function actionIcon(action: AutomationAction): Component {
-  if (action === 'create_notification') return BellOutlined;
-  if (action === 'add_loyalty_points') return GiftOutlined;
-  return FlagOutlined;
+function actionIcon(action: AutomationAction) {
+  if (action === 'create_notification') return 'bell';
+  if (action === 'add_loyalty_points') return 'gift';
+  return 'flag';
 }
 
 function stepTitle(step: AutomationStep) {
@@ -342,20 +208,13 @@ function stepHint(step: AutomationStep) {
 }
 
 function openAdd(item: { key: string; index: number; allow: AddAllow }) {
-  if (!canAdd.value || tool.value === 'hand') return;
+  if (!canAdd.value) return;
   addAt.value =
     addAt.value?.key === item.key
       ? null
       : { key: item.key, index: item.index, allow: item.allow };
 }
 
-function actionShort(action: AutomationAction) {
-  if (action === 'create_activity') return 'فعالیت';
-  if (action === 'create_notification') return 'اعلان / پیامک';
-  if (action === 'add_loyalty_points') return 'امتیاز باشگاه';
-  return AUTOMATION_ACTION_LABELS[action];
-}
-
 function pickAction(action: AutomationAction) {
   if (!addAt.value) return;
   emit('add', { kind: 'action', action }, addAt.value.index);
@@ -375,19 +234,7 @@ function removeBranch(lane: BranchLane) {
 </script>
 
 <template>
-  <div class="canvas-shell">
-    <div
-      ref="viewportRef"
-      class="canvas"
-      :class="{ hand: tool === 'hand', panning }"
-      @wheel.prevent="onWheel"
-      @pointerdown="onPointerDown"
-      @pointermove="onPointerMove"
-      @pointerup="onPointerUp"
-      @pointercancel="onPointerUp"
-      @click.self="onViewportClick"
-    >
-      <div class="world" :style="worldStyle" :class="{ locked: tool === 'hand' }">
+  <div class="canvas" @click.self="addAt = null">
     <div class="flow">
       <button
         class="node trigger"
@@ -396,7 +243,7 @@ function removeBranch(lane: BranchLane) {
         @click="emit('select', 'trigger')"
       >
         <span class="icon">
-          <ThunderboltOutlined />
+          <UiIcon name="sparkle" :size="18" />
         </span>
         <span class="copy">
           <span class="kind">اگر</span>
@@ -418,46 +265,8 @@ function removeBranch(lane: BranchLane) {
             title="افزودن گره"
             @click.stop="openAdd(item)"
           >
-            <PlusOutlined :style="{ fontSize: item.end ? '16px' : '14px' }" />
+            <UiIcon name="plus" :size="item.end ? 16 : 14" />
           </button>
-          <Transition name="auto-picker">
-            <div
-              v-if="addAt?.key === item.key"
-              class="picker"
-              @click.stop
-              @pointerdown.stop
-            >
-              <div class="picker-head">افزودن گره</div>
-              <button
-                v-if="addAt.allow !== 'action'"
-                type="button"
-                class="pick condition"
-                @click="pickCondition"
-              >
-                <span class="pick-ico"><FilterOutlined /></span>
-                <span class="pick-copy">
-                  <strong>شرط</strong>
-                  <small>اگر … آنگاه</small>
-                </span>
-              </button>
-              <template v-if="addAt.allow !== 'condition'">
-                <button
-                  v-for="action in AUTOMATION_ACTIONS"
-                  :key="action"
-                  type="button"
-                  class="pick"
-                  :class="action"
-                  @click="pickAction(action)"
-                >
-                  <span class="pick-ico"><component :is="actionIcon(action)" /></span>
-                  <span class="pick-copy">
-                    <strong>{{ actionShort(action) }}</strong>
-                    <small>{{ AUTOMATION_ACTION_LABELS[action] }}</small>
-                  </span>
-                </button>
-              </template>
-            </div>
-          </Transition>
         </div>
         <AutomationNode
           v-else
@@ -483,7 +292,7 @@ function removeBranch(lane: BranchLane) {
                 title="حذف این شاخه"
                 @click.stop="removeBranch(lane)"
               >
-                <DeleteOutlined :style="{ fontSize: '12px' }" />
+                <UiIcon name="trash" :size="12" />
               </button>
             </div>
             <template v-for="item in lane.items" :key="item.key">
@@ -499,46 +308,8 @@ function removeBranch(lane: BranchLane) {
                   :title="item.allow === 'condition' ? 'افزودن شرط («و»)' : 'افزودن گره'"
                   @click.stop="openAdd(item)"
                 >
-                  <PlusOutlined :style="{ fontSize: '14px' }" />
+                  <UiIcon name="plus" :size="14" />
                 </button>
-                <Transition name="auto-picker">
-                  <div
-                    v-if="addAt?.key === item.key"
-                    class="picker"
-                    @click.stop
-                    @pointerdown.stop
-                  >
-                    <div class="picker-head">افزودن گره</div>
-                    <button
-                      v-if="addAt.allow !== 'action'"
-                      type="button"
-                      class="pick condition"
-                      @click="pickCondition"
-                    >
-                      <span class="pick-ico"><FilterOutlined /></span>
-                      <span class="pick-copy">
-                        <strong>شرط</strong>
-                        <small>اگر … آنگاه</small>
-                      </span>
-                    </button>
-                    <template v-if="addAt.allow !== 'condition'">
-                      <button
-                        v-for="action in AUTOMATION_ACTIONS"
-                        :key="action"
-                        type="button"
-                        class="pick"
-                        :class="action"
-                        @click="pickAction(action)"
-                      >
-                        <span class="pick-ico"><component :is="actionIcon(action)" /></span>
-                        <span class="pick-copy">
-                          <strong>{{ actionShort(action) }}</strong>
-                          <small>{{ AUTOMATION_ACTION_LABELS[action] }}</small>
-                        </span>
-                      </button>
-                    </template>
-                  </div>
-                </Transition>
               </div>
               <AutomationNode
                 v-else
@@ -559,146 +330,65 @@ function removeBranch(lane: BranchLane) {
             :title="canAddBranch ? '' : 'ابتدا برای شاخهٔ آخر یک عمل بگذارید'"
             @click.stop="emit('addBranch')"
           >
-            <PlusOutlined :style="{ fontSize: '14px' }" />
+            <UiIcon name="plus" :size="14" />
             شاخهٔ جدید
           </button>
         </div>
       </template>
     </div>
 
+    <div v-if="addAt" class="picker" @click.stop>
+      <p>
+        {{
+          addAt.allow === 'condition'
+            ? 'شرط جدید با «و» به شرط‌های این شاخه اضافه می‌شود'
+            : 'گره بعدی را انتخاب کنید'
+        }}
+      </p>
+      <div class="picks">
+        <button
+          v-if="addAt.allow !== 'action'"
+          type="button"
+          class="condition"
+          @click="pickCondition"
+        >
+          <UiIcon name="filter" :size="16" />
+          شرط
+        </button>
+        <template v-if="addAt.allow !== 'condition'">
+          <button
+            v-for="action in AUTOMATION_ACTIONS"
+            :key="action"
+            type="button"
+            :class="action"
+            @click="pickAction(action)"
+          >
+            <UiIcon :name="actionIcon(action)" :size="16" />
+            {{ AUTOMATION_ACTION_LABELS[action] }}
+          </button>
+        </template>
+      </div>
+      <button class="cancel" type="button" @click="addAt = null">انصراف</button>
+    </div>
+
     <p v-if="!canAdd" class="cap">
       حداکثر {{ toFaDigits(MAX_AUTOMATION_STEPS) }} گره در یک قانون
     </p>
-      </div>
-    </div>
-
-    <div class="island" @pointerdown.stop @click.stop>
-      <a-space :size="4">
-        <a-tooltip title="انتخاب">
-          <a-button
-            type="text"
-            :class="{ on: tool === 'select' }"
-            @click="setTool('select')"
-          >
-            <template #icon><SelectOutlined /></template>
-          </a-button>
-        </a-tooltip>
-        <a-tooltip title="جابه‌جایی (دست)">
-          <a-button
-            type="text"
-            :class="{ on: tool === 'hand' }"
-            @click="setTool('hand')"
-          >
-            <template #icon><DragOutlined /></template>
-          </a-button>
-        </a-tooltip>
-        <a-divider type="vertical" :style="{ height: '20px', margin: 0 }" />
-        <a-tooltip title="کوچک‌نمایی">
-          <a-button type="text" :disabled="zoom <= Z_MIN" @click="zoomBy(-Z_STEP)">
-            <template #icon><ZoomOutOutlined /></template>
-          </a-button>
-        </a-tooltip>
-        <a-button type="text" class="zoom-label" @click="resetView">
-          {{ zoomLabel }}
-        </a-button>
-        <a-tooltip title="بزرگ‌نمایی">
-          <a-button type="text" :disabled="zoom >= Z_MAX" @click="zoomBy(Z_STEP)">
-            <template #icon><ZoomInOutlined /></template>
-          </a-button>
-        </a-tooltip>
-        <a-tooltip title="بازنشانی نما">
-          <a-button type="text" @click="resetView">
-            <template #icon><ExpandOutlined /></template>
-          </a-button>
-        </a-tooltip>
-        <a-divider type="vertical" :style="{ height: '20px', margin: 0 }" />
-        <a-tooltip :title="fullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'">
-          <a-button
-            type="text"
-            :class="{ on: fullscreen }"
-            @click="emit('update:fullscreen', !fullscreen)"
-          >
-            <template #icon>
-              <FullscreenExitOutlined v-if="fullscreen" />
-              <FullscreenOutlined v-else />
-            </template>
-          </a-button>
-        </a-tooltip>
-      </a-space>
-    </div>
   </div>
 </template>
 
 <style scoped>
-.canvas-shell {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 14rem;
-  flex: 1 1 auto;
-}
-
 .canvas {
   position: relative;
   width: 100%;
-  height: 100%;
   min-width: 0;
+  min-height: 22rem;
   border-radius: var(--radius);
-  overflow: hidden;
+  overflow: auto;
   background-color: #f3f6f5;
   background-image: radial-gradient(#c9d4cf 1.1px, transparent 1.2px);
   background-size: 16px 16px;
-  touch-action: none;
-}
-
-.canvas.hand {
-  cursor: grab;
-}
-
-.canvas.hand.panning {
-  cursor: grabbing;
-}
-
-.world {
-  transform-origin: 0 0;
-  width: max-content;
-  min-height: 100%;
-  padding: 1.1rem 1rem 4rem;
-  will-change: transform;
-}
-
-.world.locked {
-  pointer-events: none;
-}
-
-.island {
-  position: absolute;
-  z-index: 6;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 8px;
-  border-radius: 999px;
-  background: #fff;
-  border: 1px solid #d5ddd8;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
-}
-
-.island :deep(.ant-btn.on) {
-  color: #0f766e;
-  background: #ecfdf8;
-}
-
-.island :deep(.zoom-label) {
-  min-width: 3.2rem;
-  padding-inline: 4px;
-  font-variant-numeric: tabular-nums;
-  font-size: 12px;
-  font-weight: 700;
-  color: #334155;
+  padding: 1.6rem 1.1rem 1.25rem;
 }
 
 .flow {
@@ -706,7 +396,7 @@ function removeBranch(lane: BranchLane) {
   flex-direction: row;
   align-items: center;
   min-width: max-content;
-  min-height: calc(100% - 2rem);
+  min-height: 16rem;
 }
 
 .node.trigger {
@@ -743,7 +433,6 @@ function removeBranch(lane: BranchLane) {
   flex-shrink: 0;
   color: #c2410c;
   background: #ffedd5;
-  font-size: 18px;
 }
 
 .copy {
@@ -846,7 +535,7 @@ strong {
   position: relative;
   display: flex;
   align-items: center;
-  padding-block: 0.7rem;
+  padding-block: 1.3rem;
 }
 
 .branch::before {
@@ -919,114 +608,66 @@ strong {
 }
 
 .picker {
-  position: absolute;
-  top: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 30;
-  width: 220px;
-  padding: 6px;
-  display: grid;
-  gap: 2px;
+  margin-top: 1rem;
   background: #fff;
   border: 1px solid #d5ddd8;
-  border-radius: 12px;
-  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
-}
-
-.auto-picker-enter-active,
-.auto-picker-leave-active {
-  transition:
-    opacity 0.16s ease,
-    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
-  transform-origin: top center;
-  will-change: opacity, transform;
-  pointer-events: none;
-}
-
-.auto-picker-enter-from,
-.auto-picker-leave-to {
-  opacity: 0;
-  transform: translateX(-50%) translateY(6px) scale(0.97);
-}
-
-.auto-picker-enter-to,
-.auto-picker-leave-from {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0) scale(1);
-}
-
-.picker-head {
-  padding: 6px 8px 8px;
-  font-size: 11px;
-  font-weight: 700;
-  color: #94a3b8;
-}
-
-.pick {
+  border-radius: var(--radius);
+  padding: 0.85rem;
   display: grid;
-  grid-template-columns: 32px 1fr;
+  gap: 0.65rem;
+  max-width: 40rem;
+  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
+}
+
+.picker p {
+  margin: 0;
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: #334155;
+}
+
+.picks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.picks button {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  width: 100%;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  padding: 6px 8px;
-  text-align: start;
-  cursor: pointer;
+  gap: 0.4rem;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.45rem 0.75rem;
   font: inherit;
-  color: inherit;
-}
-
-.pick:hover {
-  background: #f1f5f9;
-}
-
-.pick-ico {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  display: grid;
-  place-items: center;
-  font-size: 15px;
-  background: #ecfdf8;
-  color: #0f766e;
-}
-
-.pick.condition .pick-ico {
-  background: #fff7ed;
-  color: #b45309;
-}
-
-.pick.create_notification .pick-ico {
-  background: #eff6ff;
-  color: #1d4ed8;
-}
-
-.pick.add_loyalty_points .pick-ico {
-  background: #f5f3ff;
-  color: #7c3aed;
-}
-
-.pick-copy {
-  display: grid;
-  gap: 1px;
-  min-width: 0;
-}
-
-.pick-copy strong {
-  font-size: 13px;
   font-weight: 700;
+  font-size: 0.8rem;
+  cursor: pointer;
   color: #0f172a;
 }
 
-.pick-copy small {
-  font-size: 11px;
-  color: #94a3b8;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.picks .create_activity {
+  color: #0f766e;
+}
+.picks .create_notification {
+  color: #1d4ed8;
+}
+.picks .add_loyalty_points {
+  color: #7c3aed;
+}
+.picks .condition {
+  color: #b45309;
+}
+
+.cancel {
+  justify-self: start;
+  border: 0;
+  background: none;
+  color: #64748b;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8rem;
 }
 
 .cap {
@@ -1039,10 +680,7 @@ strong {
 @media (max-width: 700px) {
   .canvas {
     min-height: 0;
-  }
-
-  .world {
-    padding: 1rem 0.75rem 4rem;
+    padding: 1rem 0.75rem;
   }
 
   .flow,
@@ -1111,7 +749,7 @@ strong {
   }
 
   .picker {
-    width: min(220px, 70vw);
+    max-width: none;
   }
 }
 </style>

apps/web/src/components/automations/AutomationInspector.vue

@@ -31,24 +31,6 @@ import {
   formConditionValues,
   isAutomationCondition,
 } from '@mento/shared';
-import {
-  Alert as AAlert,
-  Checkbox as ACheckbox,
-  CheckboxGroup as ACheckboxGroup,
-  Flex as AFlex,
-  Form as AForm,
-  FormItem as AFormItem,
-  Input as AInput,
-  InputNumber as AInputNumber,
-  RadioGroup as ARadioGroup,
-  Select as ASelect,
-  Textarea as ATextarea,
-  Typography,
-  theme,
-} from 'ant-design-vue';
-
-const { Text: ATypographyText } = Typography;
-const { token } = theme.useToken();
 
 const props = defineProps<{
   selected: 'trigger' | string;
@@ -142,87 +124,6 @@ function toggleUser(step: AutomationStep, id: string, on: boolean) {
   step.assigneeUserIds = [...cur];
 }
 
-function onUserCheck(step: AutomationStep, id: string, e: { target: { checked: boolean } }) {
-  toggleUser(step, id, e.target.checked);
-}
-
-function onConditionFieldChange(v: unknown) {
-  if (typeof v === 'string' && selectedStep.value) {
-    setConditionField(selectedStep.value, v as AutomationConditionField);
-  }
-}
-
-function onConditionKeyChange(v: unknown) {
-  if (typeof v === 'string' && selectedStep.value) setConditionKey(selectedStep.value, v);
-}
-
-function onActionChange(v: unknown) {
-  if (typeof v === 'string' && selectedStep.value) {
-    setAction(selectedStep.value, v as AutomationAction);
-  }
-}
-
-function onDueUnitChange(v: unknown) {
-  if (!selectedStep.value || typeof v !== 'string') return;
-  setDue(selectedStep.value, v as DueUnit, dueAmountOf(selectedStep.value) || 1);
-}
-
-function onDueAmountChange(v: string | number | null) {
-  if (!selectedStep.value) return;
-  setDue(selectedStep.value, dueUnitOf(selectedStep.value), Number(v ?? 1));
-}
-
-function onFormOptionValuesChange(vals: Array<string | number | boolean>) {
-  if (!selectedStep.value) return;
-  const next = vals.map(String);
-  const order = conditionFormField.value?.options ?? [];
-  next.sort((a, b) => order.indexOf(a) - order.indexOf(b));
-  selectedStep.value.conditionValues = next;
-  selectedStep.value.conditionValue = next[0] ?? '';
-}
-
-const dealAmountValue = computed({
-  get: () =>
-    typeof selectedStep.value?.conditionValue === 'number'
-      ? selectedStep.value.conditionValue
-      : Number(selectedStep.value?.conditionValue ?? 0),
-  set: (v: number | null) => {
-    if (selectedStep.value) selectedStep.value.conditionValue = Number(v ?? 0);
-  },
-});
-
-const formTextValue = computed({
-  get: () => String(selectedStep.value?.conditionValue ?? ''),
-  set: (v: string) => {
-    if (selectedStep.value) selectedStep.value.conditionValue = v;
-  },
-});
-
-function nullableId(value: string | null | undefined) {
-  return value ?? '';
-}
-
-function setNullableId(
-  key: 'activityTypeDefId' | 'assigneeId' | 'assigneeTeamId' | 'notifyUserId',
-  v: unknown,
-) {
-  if (!selectedStep.value) return;
-  selectedStep.value[key] = typeof v === 'string' && v ? v : null;
-}
-
-function onActivityTypeDefChange(v: unknown) {
-  setNullableId('activityTypeDefId', v);
-}
-function onAssigneeIdChange(v: unknown) {
-  setNullableId('assigneeId', v);
-}
-function onAssigneeTeamIdChange(v: unknown) {
-  setNullableId('assigneeTeamId', v);
-}
-function onNotifyUserIdChange(v: unknown) {
-  setNullableId('notifyUserId', v);
-}
-
 function setConditionKey(step: AutomationStep, key: string) {
   step.conditionKey = key || null;
   const field = formFields.value.find((f) => f.key === key);
@@ -230,6 +131,15 @@ function setConditionKey(step: AutomationStep, key: string) {
   step.conditionValues = step.conditionValue ? [step.conditionValue] : [];
 }
 
+function toggleConditionValue(step: AutomationStep, option: string, on: boolean) {
+  const cur = formConditionValues(step).filter((v) => v !== option);
+  if (on) cur.push(option);
+  const order = conditionFormField.value?.options ?? [];
+  cur.sort((a, b) => order.indexOf(a) - order.indexOf(b));
+  step.conditionValues = cur;
+  step.conditionValue = cur[0] ?? '';
+}
+
 function multiValueHint(op: AutomationConditionOp | undefined) {
   if (op === 'contains_any') return 'کافی است حداقل یکی از این گزینه‌ها انتخاب شده باشد.';
   if (op === 'not_contains') return 'هیچ‌کدام از این گزینه‌ها نباید انتخاب شده باشد.';
@@ -252,94 +162,6 @@ const ticketPriorities: Array<{ value: TicketPriority; label: string }> = [
   { value: 'urgent', label: 'فوری' },
 ];
 
-const triggerOptions = AUTOMATION_TRIGGER_GROUPS.map((group) => ({
-  label: group.label,
-  options: group.items.map((t) => ({
-    value: t,
-    label: AUTOMATION_TRIGGER_LABELS[t],
-  })),
-}));
-
-const formOptions = computed(() => [
-  { value: '', label: 'همه فرم‌ها' },
-  ...props.forms.map((f) => ({ value: f.id, label: f.name })),
-]);
-
-const sourceIdSelect = computed({
-  get: () => sourceId.value ?? '',
-  set: (v: string) => {
-    sourceId.value = v || null;
-  },
-});
-
-const chainModeOptions = [
-  { value: 'branches' as const, label: AUTOMATION_CHAIN_MODE_LABELS.branches },
-  { value: 'stop' as const, label: AUTOMATION_CHAIN_MODE_LABELS.stop },
-];
-
-const conditionFieldOptions = computed(() =>
-  conditionFields.value.map((f) => ({
-    value: f,
-    label: AUTOMATION_CONDITION_FIELD_LABELS[f],
-  })),
-);
-
-const conditionOpOptions = computed(() =>
-  conditionOps.value.map((op) => ({
-    value: op,
-    label: AUTOMATION_CONDITION_OP_LABELS[op],
-  })),
-);
-
-const formFieldOptions = computed(() =>
-  formFields.value.map((f) => ({ value: f.key, label: f.label })),
-);
-
-const actionOptions = AUTOMATION_ACTIONS.map((a) => ({
-  value: a,
-  label: AUTOMATION_ACTION_LABELS[a],
-}));
-
-const activityTypeOptions = activityTypes.map((t) => ({
-  value: t.value,
-  label: t.label,
-}));
-
-const activityTypeDefOptions = computed(() => [
-  { value: '', label: '— بدون نوع سفارشی —' },
-  ...props.activityTypeDefs.map((t) => ({ value: t.id, label: t.name })),
-]);
-
-const assignModeOptions = computed(() =>
-  assignModes.value.map((m) => ({
-    value: m,
-    label: AUTOMATION_ASSIGN_MODE_LABELS[m],
-  })),
-);
-
-const userOptions = computed(() =>
-  props.users.map((u) => ({ value: u.id, label: u.fullName })),
-);
-
-const teamOptions = computed(() =>
-  props.teams.map((t) => ({
-    value: t.id,
-    label: `${t.name} (${t.memberCount} نفر)`,
-  })),
-);
-
-const notifyUserOptions = computed(() => [
-  { value: '', label: 'مسئول معامله / تیکت' },
-  ...userOptions.value,
-]);
-
-const notifyChannelOptions = AUTOMATION_NOTIFY_CHANNELS.map((ch) => ({
-  value: ch,
-  label: AUTOMATION_NOTIFY_CHANNEL_LABELS[ch],
-}));
-
-const dueUnitOptions = dueUnits.map((u) => ({ value: u.value, label: u.label }));
-
 function setAction(step: AutomationStep, action: AutomationAction) {
   step.kind = 'action';
   step.action = action;
@@ -380,273 +202,440 @@ watch(
 </script>
 
 <template>
-  <a-form layout="vertical" :style="{ marginBottom: 0 }">
+  <aside class="inspector">
     <template v-if="selected === 'trigger'">
-      <a-form-item label="اگر" :style="{ marginBottom: `${token.marginSM}px` }">
-        <a-select v-model:value="trigger" :options="triggerOptions" style="width: 100%" />
-      </a-form-item>
-      <a-form-item
-        v-if="trigger === 'lead_submitted'"
-        label="فرم"
-        :style="{ marginBottom: `${token.marginSM}px` }"
-      >
-        <a-select v-model:value="sourceIdSelect" :options="formOptions" style="width: 100%" />
-      </a-form-item>
-      <a-form-item
-        v-if="advanced || chainMode === 'branches'"
-        label="رفتار شرط‌ها"
-        :style="{ marginBottom: `${token.marginSM}px` }"
-      >
-        <a-select v-model:value="chainMode" :options="chainModeOptions" style="width: 100%" />
-      </a-form-item>
-      <a-alert
-        v-if="trigger === 'lead_submitted' && !sourceId"
-        type="info"
-        show-icon
-        message="برای شرط روی پاسخ فرم، یک فرم مشخص انتخاب کنید."
-      />
+      <h2>گره محرک</h2>
+      <p class="hint">وقتی این اتفاق بیفتد، زنجیره از راست به چپ اجرا می‌شود.</p>
+      <label>
+        اگر
+        <select v-model="trigger">
+          <optgroup
+            v-for="group in AUTOMATION_TRIGGER_GROUPS"
+            :key="group.label"
+            :label="group.label"
+          >
+            <option v-for="t in group.items" :key="t" :value="t">
+              {{ AUTOMATION_TRIGGER_LABELS[t] }}
+            </option>
+          </optgroup>
+        </select>
+      </label>
+      <label v-if="trigger === 'lead_submitted'">
+        فرم
+        <select v-model="sourceId">
+          <option :value="null">همه فرم‌ها</option>
+          <option v-for="f in forms" :key="f.id" :value="f.id">{{ f.name }}</option>
+        </select>
+      </label>
+      <p v-if="trigger === 'lead_submitted' && !sourceId" class="hint">
+        برای شرط روی پاسخ‌های فرم، یک فرم مشخص را انتخاب کنید.
+      </p>
+      <label v-if="advanced || chainMode === 'branches'">
+        رفتار شرط‌ها
+        <select v-model="chainMode">
+          <option value="branches">{{ AUTOMATION_CHAIN_MODE_LABELS.branches }}</option>
+          <option value="stop">{{ AUTOMATION_CHAIN_MODE_LABELS.stop }}</option>
+        </select>
+      </label>
+      <p v-if="chainMode === 'branches'" class="hint">
+        شاخه‌ها روی بوم موازی نمایش داده می‌شوند و هر کدام جدا بررسی می‌شود. شرط‌های یک شاخه با «و»
+        ترکیب می‌شوند؛ مثلاً اگر دو گزینه تیک بخورد، هر دو شاخه اجرا می‌شود. برای شاخهٔ تازه از
+        دکمهٔ «شاخهٔ جدید» زیر بوم استفاده کنید.
+      </p>
+      <p v-else-if="!advanced" class="hint">
+        اتوماسیون ساده: شرط‌ها پشت‌سرهم بررسی می‌شوند و اولین شرط ناموفق بقیهٔ زنجیره را متوقف
+        می‌کند. اتوماسیون چندشاخه در نسخهٔ حرفه‌ای فعال است.
+      </p>
     </template>
 
     <template v-else-if="selectedStep && isCondition">
-      <a-form-item label="فیلد" :style="{ marginBottom: `${token.marginSM}px` }">
-        <a-select
+      <h2>گره شرط</h2>
+      <p class="hint">
+        {{
+          chainMode === 'branches'
+            ? 'اگر شرط برقرار نباشد، فقط عمل‌های این شاخه (تا شرط بعدی) اجرا نمی‌شوند.'
+            : 'اگر شرط برقرار نباشد، عمل‌های بعد از این گره اجرا نمی‌شوند.'
+        }}
+      </p>
+      <label>
+        فیلد
+        <select
           :value="selectedStep.conditionField"
-          :options="conditionFieldOptions"
-          style="width: 100%"
-          @change="onConditionFieldChange"
-        />
-      </a-form-item>
-      <a-form-item
-        v-if="selectedStep.conditionField === 'form_field' && selectedForm"
-        label="فیلد فرم"
-        :style="{ marginBottom: `${token.marginSM}px` }"
-      >
-        <a-select
-          :value="selectedStep.conditionKey ?? undefined"
-          :options="formFieldOptions"
-          placeholder="انتخاب فیلد…"
-          style="width: 100%"
-          @change="onConditionKeyChange"
-        />
-      </a-form-item>
-      <a-form-item label="مقایسه" :style="{ marginBottom: `${token.marginSM}px` }">
-        <a-select
-          v-model:value="selectedStep.conditionOp"
-          :options="conditionOpOptions"
-          style="width: 100%"
-        />
-      </a-form-item>
-      <a-form-item
-        v-if="selectedStep.conditionField === 'deal_amount'"
-        label="مبلغ"
-        :style="{ marginBottom: `${token.marginSM}px` }"
-      >
-        <a-input-number v-model:value="dealAmountValue" :min="0" style="width: 100%" />
-      </a-form-item>
-      <a-form-item
-        v-if="selectedStep.conditionField === 'ticket_priority'"
-        label="اولویت"
-        :style="{ marginBottom: `${token.marginSM}px` }"
-      >
-        <a-select
-          v-model:value="selectedStep.conditionValue"
-          :options="ticketPriorities"
-          style="width: 100%"
-        />
-      </a-form-item>
-      <a-alert
-        v-if="selectedStep.conditionField === 'form_field' && !selectedForm"
-        type="warning"
-        show-icon
-        message="ابتدا در گره محرک یک فرم مشخص انتخاب کنید."
-      />
-      <template v-if="selectedStep.conditionField === 'form_field' && needsConditionValue">
-        <a-form-item
-          v-if="conditionFormField?.options?.length"
-          label="گزینه‌ها"
-          :style="{ marginBottom: `${token.marginSM}px` }"
+          @change="
+            setConditionField(
+              selectedStep,
+              ($event.target as HTMLSelectElement).value as AutomationConditionField,
+            )
+          "
         >
-          <a-checkbox-group
-            :value="formConditionValues(selectedStep)"
-            :options="conditionFormField.options.map((o) => ({ value: o, label: o }))"
-            @change="onFormOptionValuesChange"
-          />
-          <a-typography-text
-            v-if="formConditionValues(selectedStep).length > 1"
-            type="secondary"
-            :style="{ display: 'block', marginTop: `${token.marginXXS}px` }"
+          <option v-for="f in conditionFields" :key="f" :value="f">
+            {{ AUTOMATION_CONDITION_FIELD_LABELS[f] }}
+          </option>
+        </select>
+      </label>
+      <template v-if="selectedStep.conditionField === 'form_field'">
+        <p v-if="!selectedForm" class="hint warn">
+          ابتدا در گره محرک یک فرم مشخص انتخاب کنید.
+        </p>
+        <label v-else>
+          فیلد فرم
+          <select
+            :value="selectedStep.conditionKey ?? ''"
+            @change="setConditionKey(selectedStep, ($event.target as HTMLSelectElement).value)"
           >
+            <option value="" disabled>انتخاب فیلد…</option>
+            <option v-for="f in formFields" :key="f.key" :value="f.key">{{ f.label }}</option>
+          </select>
+        </label>
+      </template>
+      <label>
+        مقایسه
+        <select v-model="selectedStep.conditionOp">
+          <option v-for="op in conditionOps" :key="op" :value="op">
+            {{ AUTOMATION_CONDITION_OP_LABELS[op] }}
+          </option>
+        </select>
+      </label>
+      <label v-if="selectedStep.conditionField === 'deal_amount'">
+        مبلغ
+        <input v-model.number="selectedStep.conditionValue" type="number" min="0" />
+      </label>
+      <label v-if="selectedStep.conditionField === 'ticket_priority'">
+        اولویت
+        <select v-model="selectedStep.conditionValue">
+          <option v-for="p in ticketPriorities" :key="p.value" :value="p.value">
+            {{ p.label }}
+          </option>
+        </select>
+      </label>
+      <template v-if="selectedStep.conditionField === 'form_field' && needsConditionValue">
+        <div v-if="conditionFormField?.options?.length" class="user-picks">
+          <p class="field-label">گزینه‌ها (یک یا چند مورد)</p>
+          <label v-for="o in conditionFormField.options" :key="o" class="ch">
+            <input
+              type="checkbox"
+              :checked="formConditionValues(selectedStep).includes(o)"
+              @change="toggleConditionValue(selectedStep, o, ($event.target as HTMLInputElement).checked)"
+            />
+            {{ o }}
+          </label>
+          <p v-if="formConditionValues(selectedStep).length > 1" class="hint">
             {{ multiValueHint(selectedStep.conditionOp) }}
-          </a-typography-text>
-        </a-form-item>
-        <a-form-item v-else label="مقدار" :style="{ marginBottom: `${token.marginSM}px` }">
-          <a-input v-model:value="formTextValue" :maxlength="200" />
-        </a-form-item>
+          </p>
+        </div>
+        <label v-else>
+          مقدار
+          <input v-model.trim="selectedStep.conditionValue" type="text" maxlength="200" />
+        </label>
       </template>
     </template>
 
     <template v-else-if="selectedStep">
-      <a-form-item label="آنگاه" :style="{ marginBottom: `${token.marginSM}px` }">
-        <a-select
+      <h2>گره عمل</h2>
+      <p class="hint">بعد از محرک (و شرط‌ها)، این کار به ترتیب انجام می‌شود.</p>
+      <label>
+        آنگاه
+        <select
           :value="selectedStep.action"
-          :options="actionOptions"
-          style="width: 100%"
-          @change="onActionChange"
-        />
-      </a-form-item>
-      <a-form-item label="عنوان" :style="{ marginBottom: `${token.marginSM}px` }">
-        <a-input
-          v-model:value="selectedStep.title"
-          :maxlength="200"
-          placeholder="اختیاری"
-        />
-      </a-form-item>
-      <a-form-item label="توضیح / متن" :style="{ marginBottom: `${token.marginSM}px` }">
-        <a-textarea
-          v-model:value="selectedStep.body"
-          :rows="2"
-          :maxlength="1000"
-          placeholder="اختیاری"
-        />
-      </a-form-item>
+          @change="
+            setAction(
+              selectedStep,
+              ($event.target as HTMLSelectElement).value as AutomationAction,
+            )
+          "
+        >
+          <option v-for="a in AUTOMATION_ACTIONS" :key="a" :value="a">
+            {{ AUTOMATION_ACTION_LABELS[a] }}
+          </option>
+        </select>
+      </label>
 
-      <template v-if="selectedStep.action === 'create_activity'">
-        <a-form-item label="نوع فعالیت" :style="{ marginBottom: `${token.marginSM}px` }">
-          <a-select
-            v-model:value="selectedStep.activityType"
-            :options="activityTypeOptions"
-            style="width: 100%"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="activityTypeDefs.length"
-          label="نوع سفارشی"
-          :style="{ marginBottom: `${token.marginSM}px` }"
-        >
-          <a-select
-            :value="nullableId(selectedStep.activityTypeDefId)"
-            :options="activityTypeDefOptions"
-            style="width: 100%"
-            @change="onActivityTypeDefChange"
-          />
-        </a-form-item>
-        <a-form-item label="تخصیص به" :style="{ marginBottom: `${token.marginSM}px` }">
-          <a-select
-            v-model:value="selectedStep.assignMode"
-            :options="assignModeOptions"
-            style="width: 100%"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="selectedStep.assignMode === 'user'"
-          label="کاربر"
-          :style="{ marginBottom: `${token.marginSM}px` }"
-        >
-          <a-select
-            :value="nullableId(selectedStep.assigneeId)"
-            :options="userOptions"
-            placeholder="انتخاب کاربر…"
-            style="width: 100%"
-            @change="onAssigneeIdChange"
-          />
-        </a-form-item>
-        <a-form-item
-          v-else-if="selectedStep.assignMode === 'team_round_robin'"
-          label="تیم"
-          :style="{ marginBottom: `${token.marginSM}px` }"
-        >
-          <a-select
-            :value="nullableId(selectedStep.assigneeTeamId)"
-            :options="teamOptions"
-            placeholder="انتخاب تیم…"
-            style="width: 100%"
-            @change="onAssigneeTeamIdChange"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="selectedStep.assignMode === 'users_round_robin'"
-          label="کاربران"
-          :style="{ marginBottom: `${token.marginSM}px` }"
-        >
-          <a-flex vertical :gap="token.marginXXS">
-            <a-checkbox
-              v-for="u in users"
-              :key="u.id"
-              :checked="(selectedStep.assigneeUserIds ?? []).includes(u.id)"
-              @change="onUserCheck(selectedStep, u.id, $event)"
-            >
-              {{ u.fullName }}
-            </a-checkbox>
-          </a-flex>
-        </a-form-item>
-        <a-form-item label="موعد" :style="{ marginBottom: `${token.marginSM}px` }">
-          <a-select
-            :value="dueUnitOf(selectedStep)"
-            :options="dueUnitOptions"
-            style="width: 100%"
-            @change="onDueUnitChange"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="dueUnitOf(selectedStep) !== 'now'"
-          label="تعداد"
-          :style="{ marginBottom: `${token.marginSM}px` }"
-        >
-          <a-input-number
-            :min="1"
-            :value="dueAmountOf(selectedStep)"
-            style="width: 100%"
-            @change="onDueAmountChange"
-          />
-        </a-form-item>
-        <a-alert
-          v-if="selectedStep.assignMode === 'team_round_robin' && !teams.length"
-          type="warning"
-          show-icon
-          message="هنوز تیمی تعریف نشده."
+      <label>
+        عنوان
+        <input
+          v-model="selectedStep.title"
+          type="text"
+          maxlength="200"
+          placeholder="اختیاری"
         />
+      </label>
+      <label>
+        توضیح / متن پیام
+        <textarea
+          v-model="selectedStep.body"
+          rows="3"
+          maxlength="1000"
+          placeholder="اختیاری"
+        />
+      </label>
+
+      <label v-if="selectedStep.action === 'create_activity'">
+        نوع فعالیت
+        <select v-model="selectedStep.activityType">
+          <option v-for="t in activityTypes" :key="t.value" :value="t.value">
+            {{ t.label }}
+          </option>
+        </select>
+      </label>
+      <template v-if="selectedStep.action === 'create_activity'">
+        <label v-if="activityTypeDefs.length">
+          نوع سفارشی (اختیاری)
+          <select v-model="selectedStep.activityTypeDefId">
+            <option :value="null">— بدون نوع سفارشی —</option>
+            <option v-for="t in activityTypeDefs" :key="t.id" :value="t.id">{{ t.name }}</option>
+          </select>
+        </label>
+
+        <label>
+          تخصیص به
+          <select v-model="selectedStep.assignMode">
+            <option v-for="m in assignModes" :key="m" :value="m">
+              {{ AUTOMATION_ASSIGN_MODE_LABELS[m] }}
+            </option>
+          </select>
+        </label>
+        <label v-if="selectedStep.assignMode === 'user'">
+          کاربر
+          <select v-model="selectedStep.assigneeId">
+            <option :value="null" disabled>انتخاب کاربر…</option>
+            <option v-for="u in users" :key="u.id" :value="u.id">{{ u.fullName }}</option>
+          </select>
+        </label>
+        <template v-else-if="selectedStep.assignMode === 'team_round_robin'">
+          <label>
+            تیم
+            <select v-model="selectedStep.assigneeTeamId">
+              <option :value="null" disabled>انتخاب تیم…</option>
+              <option v-for="t in teams" :key="t.id" :value="t.id">
+                {{ t.name }} ({{ t.memberCount }} نفر)
+              </option>
+            </select>
+          </label>
+          <p v-if="!teams.length" class="hint warn">
+            هنوز تیمی تعریف نشده؛ از «تنظیمات ← تیم‌ها و سطح دسترسی» بسازید.
+          </p>
+        </template>
+        <div v-else-if="selectedStep.assignMode === 'users_round_robin'" class="user-picks">
+          <p class="field-label">کاربران</p>
+          <label v-for="u in users" :key="u.id" class="ch">
+            <input
+              type="checkbox"
+              :checked="(selectedStep.assigneeUserIds ?? []).includes(u.id)"
+              @change="toggleUser(selectedStep, u.id, ($event.target as HTMLInputElement).checked)"
+            />
+            {{ u.fullName }}
+          </label>
+        </div>
+        <p
+          v-if="selectedStep.assignMode === 'team_round_robin' || selectedStep.assignMode === 'users_round_robin'"
+          class="hint"
+        >
+          هر بار نفر بعدی به نوبت انتخاب می‌شود تا کارها مساوی تقسیم شوند.
+        </p>
+
+        <div class="due">
+          <label>
+            موعد
+            <select
+              :value="dueUnitOf(selectedStep)"
+              @change="
+                setDue(
+                  selectedStep,
+                  ($event.target as HTMLSelectElement).value as DueUnit,
+                  dueAmountOf(selectedStep) || 1,
+                )
+              "
+            >
+              <option v-for="u in dueUnits" :key="u.value" :value="u.value">{{ u.label }}</option>
+            </select>
+          </label>
+          <label v-if="dueUnitOf(selectedStep) !== 'now'">
+            تعداد
+            <input
+              type="number"
+              min="1"
+              :value="dueAmountOf(selectedStep)"
+              @input="
+                setDue(
+                  selectedStep,
+                  dueUnitOf(selectedStep),
+                  Number(($event.target as HTMLInputElement).value),
+                )
+              "
+            />
+          </label>
+        </div>
       </template>
+      <p v-if="selectedStep.action === 'create_activity' || selectedStep.action === 'create_notification'" class="hint">
+        در عنوان و متن می‌توانید از
+        <code v-pre>{{title}}</code>، <code v-pre>{{mobile}}</code>، <code v-pre>{{form}}</code> و
+        <code v-pre>{{field.کلید}}</code> استفاده کنید.
+        <template v-if="formFields.length">
+          کلیدها:
+          <span v-for="(f, i) in formFields" :key="f.key">
+            <code>{{ f.key }}</code> ({{ f.label }})<template v-if="i < formFields.length - 1">، </template>
+          </span>
+        </template>
+      </p>
 
       <template v-if="selectedStep.action === 'create_notification'">
-        <a-form-item label="نحوه ارسال" :style="{ marginBottom: `${token.marginSM}px` }">
-          <a-radio-group
-            v-model:value="selectedStep.notifyChannel"
-            :options="notifyChannelOptions"
-          />
-        </a-form-item>
-        <a-form-item label="گیرنده" :style="{ marginBottom: `${token.marginSM}px` }">
-          <a-select
-            v-model:value="selectedStep.notifyTarget"
-            :options="[
-              { value: 'staff', label: 'کاربر تیم' },
-              { value: 'person', label: 'مخاطب معامله / تیکت' },
-            ]"
-            style="width: 100%"
-          />
-        </a-form-item>
-        <a-form-item
-          v-if="selectedStep.notifyTarget !== 'person'"
-          label="کاربر"
-          :style="{ marginBottom: `${token.marginSM}px` }"
+        <p class="field-label">نحوه ارسال</p>
+        <div class="channels">
+          <label
+            v-for="ch in AUTOMATION_NOTIFY_CHANNELS"
+            :key="ch"
+            class="ch"
+          >
+            <input
+              v-model="selectedStep.notifyChannel"
+              type="radio"
+              :value="ch"
+            />
+            {{ AUTOMATION_NOTIFY_CHANNEL_LABELS[ch] }}
+          </label>
+        </div>
+        <label>
+          گیرنده
+          <select v-model="selectedStep.notifyTarget">
+            <option value="staff">کاربر تیم</option>
+            <option value="person">مخاطب معامله / تیکت</option>
+          </select>
+        </label>
+        <label v-if="selectedStep.notifyTarget !== 'person'">
+          کاربر
+          <select v-model="selectedStep.notifyUserId">
+            <option :value="null">مسئول معامله / تیکت</option>
+            <option v-for="u in users" :key="u.id" :value="u.id">
+              {{ u.fullName }}
+            </option>
+          </select>
+        </label>
+        <p v-if="selectedStep.notifyTarget === 'person'" class="hint">
+          پیامک به موبایل مخاطب ارسال می‌شود. ناتیفیکیشن داخلی برای مخاطب نیست.
+        </p>
+        <p
+          v-else-if="selectedStep.notifyChannel === 'sms' || selectedStep.notifyChannel === 'both'"
+          class="hint"
         >
-          <a-select
-            :value="nullableId(selectedStep.notifyUserId)"
-            :options="notifyUserOptions"
-            style="width: 100%"
-            @change="onNotifyUserIdChange"
-          />
-        </a-form-item>
+          پیامک به موبایل همان کاربر ارسال می‌شود.
+        </p>
       </template>
 
-      <a-form-item
-        v-if="selectedStep.action === 'add_loyalty_points'"
-        label="امتیاز"
-        :style="{ marginBottom: `${token.marginSM}px` }"
-      >
-        <a-input-number v-model:value="selectedStep.points" :min="1" style="width: 100%" />
-      </a-form-item>
+      <label v-if="selectedStep.action === 'add_loyalty_points'">
+        امتیاز
+        <input v-model.number="selectedStep.points" type="number" min="1" />
+      </label>
     </template>
 
-    <a-typography-text v-else type="secondary">یک گره را از بوم انتخاب کنید.</a-typography-text>
-  </a-form>
+    <p v-else class="hint">یک گره را از بوم انتخاب کنید.</p>
+  </aside>
 </template>
+
+<style scoped>
+.inspector {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  min-width: 0;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.98rem;
+  font-weight: 600;
+}
+
+.hint {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.82rem;
+  line-height: 1.6;
+}
+
+label,
+.field-label {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.84rem;
+  color: #64748b;
+  min-width: 0;
+}
+
+.field-label {
+  margin: 0;
+  font-weight: 700;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  color: #0f172a;
+  background: #fff;
+  min-width: 0;
+  max-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.channels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem 0.85rem;
+}
+
+.ch {
+  display: inline-flex !important;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.32rem;
+  color: #334155;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.ch input {
+  accent-color: #14b8a6;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+}
+
+.hint.warn {
+  color: #b45309;
+}
+
+.hint code {
+  font-size: 0.76rem;
+  background: #f1f5f9;
+  border-radius: 4px;
+  padding: 0 0.25rem;
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
+.user-picks {
+  display: grid;
+  gap: 0.4rem;
+  max-height: 12rem;
+  overflow: auto;
+}
+
+.due {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+  align-items: end;
+}
+
+.due input {
+  width: 5.5rem;
+}
+</style>

apps/web/src/components/automations/AutomationNode.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { computed, type Component } from 'vue';
-import {
-  BellOutlined,
-  DeleteOutlined,
-  FilterOutlined,
-  FlagOutlined,
-  GiftOutlined,
-} from '@ant-design/icons-vue';
+import { computed } from 'vue';
+import UiIcon from '@/components/UiIcon.vue';
 import { isAutomationCondition, type AutomationStep } from '@mento/shared';
 
 const props = defineProps<{
@@ -21,11 +15,11 @@ const emit = defineEmits<{ select: []; remove: [] }>();
 
 const isCondition = computed(() => isAutomationCondition(props.step));
 
-const icon = computed((): Component => {
-  if (isCondition.value) return FilterOutlined;
-  if (props.step.action === 'create_notification') return BellOutlined;
-  if (props.step.action === 'add_loyalty_points') return GiftOutlined;
-  return FlagOutlined;
+const icon = computed(() => {
+  if (isCondition.value) return 'filter';
+  if (props.step.action === 'create_notification') return 'bell';
+  if (props.step.action === 'add_loyalty_points') return 'gift';
+  return 'flag';
 });
 
 const kindClass = computed(() =>
@@ -42,7 +36,7 @@ const kindClass = computed(() =>
       @click="emit('select')"
     >
       <span class="icon">
-        <component :is="icon" />
+        <UiIcon :name="icon" :size="18" />
       </span>
       <span class="copy">
         <span class="kind">{{ isCondition ? 'شرط' : 'آنگاه' }}</span>
@@ -57,7 +51,7 @@ const kindClass = computed(() =>
       title="حذف"
       @click.stop="emit('remove')"
     >
-      <DeleteOutlined />
+      <UiIcon name="trash" :size="14" />
     </button>
   </div>
 </template>
@@ -131,7 +125,6 @@ const kindClass = computed(() =>
   flex-shrink: 0;
   color: #0f766e;
   background: #ecfdf8;
-  font-size: 18px;
 }
 
 .node.create_notification .icon {
@@ -191,7 +184,6 @@ em {
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
-  font-size: 14px;
 }
 
 .node-wrap:hover .trash,

apps/web/src/components/dashboard/HomeActivityMixChart.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Empty as AEmpty } from 'ant-design-vue';
-import { toFaDigits } from '@/lib/jalali';
-import type { HomeDashboardActivityTypeDto } from '@mento/shared';
-import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
-
-const props = defineProps<{
-  items: HomeDashboardActivityTypeDto[];
-}>();
-
-const rows = computed(() => props.items);
-const hasData = computed(() => rows.value.some((r) => r.count > 0));
-const total = computed(() => rows.value.reduce((a, r) => a + r.count, 0));
-
-const option = computed<UiChartOption>(() => ({
-  animationDuration: 400,
-  grid: { top: 28, right: 8, bottom: 28, left: 8, containLabel: true },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: { type: 'shadow' },
-    textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
-    formatter: (params) => {
-      const row = Array.isArray(params) ? params[0] : params;
-      const point = rows.value[row.dataIndex ?? 0];
-      if (!point) return '';
-      return `${point.label}<br/>${toFaDigits(point.count)} فعالیت باز`;
-    },
-  },
-  xAxis: {
-    type: 'category',
-    data: rows.value.map((r) => r.label),
-    axisLine: { show: false },
-    axisTick: { show: false },
-    axisLabel: {
-      color: '#94a3b8',
-      fontFamily: 'IRANSans, Tahoma, sans-serif',
-      fontSize: 11,
-    },
-  },
-  yAxis: {
-    type: 'value',
-    minInterval: 1,
-    ...(hasData.value ? {} : { max: 1 }),
-    splitLine: { lineStyle: { color: '#e5e7eb', type: 'dashed' } },
-    axisLabel: { show: false },
-  },
-  series: [
-    {
-      type: 'bar',
-      data: rows.value.map((r) => r.count),
-      barMaxWidth: 36,
-      itemStyle: {
-        color: '#14b8a6',
-        borderRadius: [8, 8, 0, 0],
-      },
-      label: {
-        show: true,
-        position: 'top',
-        color: '#0f172a',
-        fontWeight: 700,
-        fontFamily: 'IRANSans, Tahoma, sans-serif',
-        formatter: (p) => toFaDigits(Number(p.value ?? 0)),
-      },
-    },
-  ],
-}));
-</script>
-
-<template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="font-bold text-slate-800 text-base">ترکیب فعالیت‌های باز</h3>
-      <span v-if="hasData" class="text-xs text-slate-400">{{ toFaDigits(total) }} مورد</span>
-    </div>
-    <a-empty v-if="!hasData" description="فعالیت بازی نیست" />
-    <div v-else class="h-56">
-      <UiChart :option="option" height="224px" />
-    </div>
-  </section>
-</template>

apps/web/src/components/dashboard/HomeAiAssistant.vue

@@ -2,25 +2,13 @@
 import { computed, ref, watch } from 'vue';
 import { RouterLink } from 'vue-router';
 import axios from 'axios';
-import { RobotOutlined } from '@ant-design/icons-vue';
-import {
-  Alert as AAlert,
-  Button as AButton,
-  Col as ACol,
-  Form as AForm,
-  Input as AInput,
-  Modal as AModal,
-  Row as ARow,
-  Select as ASelect,
-  Space as ASpace,
-  Tag as ATag,
-  Typography,
-} from 'ant-design-vue';
+import UiIcon from '@/components/UiIcon.vue';
 import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import { formatLocalDateTimeInput, rewriteGregorianDates } from '@/lib/jalali';
+import { UiButton, UiModal } from '@/components/ui';
 import { api } from '@/lib/api';
-import { brand, type AskMentoSourceDto, type PersonDto, type VoiceCommandDraft } from '@mento/shared';
+import { brand, type ActivityType, type AskMentoSourceDto, type PersonDto, type VoiceCommandDraft } from '@mento/shared';
 
 const props = defineProps<{
   askQuery: string;
@@ -38,23 +26,11 @@ const emit = defineEmits<{
   notice: [value: { error: string; done: string }];
 }>();
 
-const { Text: ATypographyText, Paragraph: ATypographyParagraph } = Typography;
-
-const AFormItem = AForm.Item;
-const ATextarea = AInput.TextArea;
-
 const shortcuts = [
-  { label: 'معاملات در خطر', prompt: 'معاملات باز و در خطر را بگو' },
-  { label: 'عقب‌افتاده‌ها', prompt: 'فعالیت‌های عقب‌افتاده چیست؟' },
-  { label: 'پیگیری امروز', prompt: 'مهم‌ترین پیگیری امروز چیست؟' },
-  { label: 'خلاصه فروش', prompt: 'خلاصه وضعیت فروش را بده' },
-];
-
-const activityTypeOptions = [
-  { value: 'call', label: 'تماس' },
-  { value: 'meeting', label: 'جلسه' },
-  { value: 'task', label: 'کار' },
-  { value: 'note', label: 'یادداشت' },
+  { label: 'معاملات باز و در خطر را بگو', icon: 'warning' as const },
+  { label: 'فعالیت‌های عقب‌افتاده چیست؟', icon: 'calendar' as const },
+  { label: 'مهم‌ترین پیگیری امروز چیست؟', icon: 'send' as const },
+  { label: 'خلاصه وضعیت فروش را بده', icon: 'chart' as const },
 ];
 
 function sourceTo(source: AskMentoSourceDto) {
@@ -69,6 +45,13 @@ function pick(label: string) {
   emit('ask', label);
 }
 
+const ACTIVITY_LABEL: Record<ActivityType, string> = {
+  call: 'تماس',
+  meeting: 'جلسه',
+  task: 'کار',
+  note: 'یادداشت',
+};
+
 const voiceBuf = ref('');
 const voiceBusy = ref(false);
 const voiceError = ref('');
@@ -77,13 +60,6 @@ const draft = ref<VoiceCommandDraft | null>(null);
 const confirming = ref(false);
 const answerOpen = ref(false);
 
-const draftOpen = computed({
-  get: () => Boolean(draft.value && draft.value.intent !== 'none'),
-  set: (open: boolean) => {
-    if (!open) cancelDraft();
-  },
-});
-
 function apiMessage(e: unknown, fallback: string) {
   if (!axios.isAxiosError(e)) return fallback;
   const msg = (e.response?.data as { message?: string | string[] })?.message;
@@ -296,36 +272,12 @@ watch(
 </script>
 
 <template>
-  <section id="home-ai-assistant" class="bg-white rounded-2xl border border-slate-200/80 p-3 shadow-sm flex flex-col justify-between h-[330px] gap-3">
-    <div class="flex items-start justify-between gap-3">
-      <div class="flex items-center gap-3 min-w-0">
-        <span class="w-10 h-10 rounded-xl bg-emerald-600 text-white flex items-center justify-center shrink-0">
-          <RobotOutlined />
-        </span>
-        <h3 class="font-bold text-slate-800 text-base truncate">{{ brand.aiNameFa }}</h3>
-      </div>
-      <a-tag color="success" class="!m-0 shrink-0">هوش مصنوعی</a-tag>
-    </div>
-
-    <div class="bg-emerald-50/50 border border-emerald-200/60 rounded-xl p-3 text-xs text-slate-600 leading-relaxed">
-      <template v-if="answer">{{ answer }}</template>
-      <template v-else-if="error">{{ error }}</template>
-      <template v-else>
-        <strong class="text-slate-800">پیشنهاد هوشمند امروز:</strong>
-        از پیشنهادهای سریع استفاده کنید یا پرسش خود را بنویسید.
-      </template>
-    </div>
-
-    <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-1.5 flex items-center gap-2">
-      <a-input
-        :value="askQuery"
-        :placeholder="brand.askPlaceholderFa"
-        :bordered="false"
-        :disabled="asking || voiceBusy || confirming"
-        class="flex-1"
-        @update:value="emit('update:askQuery', $event)"
-        @press-enter="onTypedSubmit"
-      />
+  <article id="home-ai-assistant" class="panel">
+    <header class="panel-head">
+      <h2>
+        <span class="spark"><UiIcon name="sparkle" :size="15" /></span>
+        {{ brand.aiNameFa }}
+      </h2>
       <VoiceToTextButton
         variant="toolbar"
         hide-error
@@ -334,181 +286,322 @@ watch(
         @recording="onVoiceRecording"
         @error="voiceError = $event"
       />
-      <a-button
-        type="primary"
-        :disabled="asking || voiceBusy || confirming"
-        :loading="asking || voiceBusy"
-        aria-label="ارسال"
-        @click="onTypedSubmit"
+    </header>
+
+    <p class="ai-lead">چه کمکی می‌تونم بکنم؟</p>
+
+    <div class="ai-shortcuts">
+      <button
+        v-for="item in shortcuts"
+        :key="item.label"
+        class="ai-chip"
+        type="button"
+        :disabled="asking"
+        @click="pick(item.label)"
       >
-        بپرس
-      </a-button>
+        <span class="chip-ico"><UiIcon :name="item.icon" :size="14" /></span>
+        <span>{{ item.label }}</span>
+      </button>
     </div>
 
-    <div class="pt-3 border-t border-slate-100 flex items-center justify-between flex-wrap gap-2">
-      <span class="text-[11px] font-semibold text-slate-400">پیشنهادهای سریع</span>
-      <div class="flex flex-wrap gap-1.5">
-        <button
-          v-for="item in shortcuts"
-          :key="item.label"
-          type="button"
-          class="!text-[11px] !leading-4 !font-medium bg-emerald-50/70 text-emerald-700 border border-emerald-200/60 px-2 py-0.5 rounded-md disabled:opacity-50"
-          :disabled="asking"
-          @click="pick(item.prompt)"
-        >
-          {{ item.label }}
-        </button>
-      </div>
+    <div v-if="voiceBusy" class="ai-answer"><p>در حال فهمیدن دستور…</p></div>
+    <div v-else-if="confirming" class="ai-answer"><p>در حال ثبت…</p></div>
+    <div v-else-if="voiceDone" class="ai-answer"><p>{{ voiceDone }}</p></div>
+    <p v-else-if="voiceError" class="ai-error">{{ voiceError }}</p>
+    <p v-else-if="error" class="ai-error">{{ error }}</p>
+    <div v-else-if="asking" class="ai-answer">
+      <p>در حال پاسخ…</p>
     </div>
 
-    <a-alert v-if="voiceBusy" type="info" show-icon message="در حال فهمیدن دستور…" />
-    <a-alert v-else-if="confirming" type="info" show-icon message="در حال ثبت…" />
-    <a-alert v-else-if="voiceDone" type="success" show-icon :message="voiceDone" />
-    <a-alert v-else-if="voiceError" type="error" show-icon :message="voiceError" />
-  </section>
-
-    <a-modal
-      v-model:open="draftOpen"
-      :title="draft?.intent === 'create_person' ? 'تأیید ساخت مشتری' : 'تأیید ثبت فعالیت'"
-      destroy-on-close
-      @cancel="cancelDraft"
-    >
-      <a-typography-paragraph v-if="draft">
-        {{ rewriteGregorianDates(draft.summary) }}
-      </a-typography-paragraph>
-      <a-typography-text type="secondary">قبل از تأیید می‌توانید متن را اصلاح کنید.</a-typography-text>
-
-      <a-form v-if="draft?.person" layout="vertical" style="margin-top: 16px">
-        <a-row :gutter="[16, 0]">
-          <a-col :xs="24" :md="12">
-            <a-form-item label="نام">
-              <a-input v-model:value="draft.person.firstName" @update:value="onPersonNameEdit" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="نام خانوادگی">
-              <a-input v-model:value="draft.person.lastName" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="موبایل">
-              <a-input v-model:value="draft.person.mobile" dir="ltr" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="تلفن">
-              <a-input v-model:value="draft.person.phone" dir="ltr" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="ایمیل">
-              <a-input v-model:value="draft.person.email" dir="ltr" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="وب‌سایت">
-              <a-input v-model:value="draft.person.website" dir="ltr" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="معرف">
-              <a-input v-model:value="draft.person.referrer" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="سمت">
-              <a-input v-model:value="draft.person.position" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="یادداشت">
-              <a-textarea v-model:value="draft.person.notes" :rows="2" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-
-      <a-form v-else-if="draft?.activity" layout="vertical" style="margin-top: 16px">
-        <a-row :gutter="[16, 0]">
-          <a-col :span="24">
-            <a-form-item label="عنوان">
-              <a-input v-model:value="draft.activity.title" @update:value="onActivityTitleEdit" />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="نوع">
-              <a-select
-                v-model:value="draft.activity.type"
-                :options="activityTypeOptions"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :xs="24" :md="12">
-            <a-form-item label="زمان">
-              <JalaliDateInput :model-value="dueLocal" mode="datetime" @update:model-value="onDueLocal" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="مشتری">
-              <a-input
-                v-model:value="draft.activity.personName"
-                @update:value="onActivityPersonEdit"
-                @blur="rematchActivityPerson"
-              />
-            </a-form-item>
-            <a-alert
-              v-if="draft.activity.personName && !draft.activity.personId"
-              type="warning"
-              show-icon
-              message="در فهرست مشتریان پرونده‌ای با این نام پیدا نشد. فعالیت ذخیره می‌شود، ولی داخل پروندهٔ آن شخص دیده نمی‌شود."
-            />
-          </a-col>
-          <a-col :span="24">
-            <a-form-item label="توضیح">
-              <a-textarea v-model:value="draft.activity.description" :rows="2" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-
-      <a-alert
-        v-if="draft?.missing.length"
-        type="error"
-        show-icon
-        :message="`ناقص است: ${draft.missing.join('، ')}`"
-        style="margin-top: 12px"
+    <form class="ai-input" @submit.prevent="onTypedSubmit">
+      <input
+        :value="askQuery"
+        type="search"
+        :placeholder="brand.askPlaceholderFa"
+        :disabled="asking || voiceBusy || confirming"
+        @input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
       />
+      <button type="submit" aria-label="ارسال" :disabled="asking || voiceBusy || confirming">
+        <UiIcon name="send" :size="15" />
+      </button>
+    </form>
 
+    <UiModal
+      :open="Boolean(draft && draft.intent !== 'none')"
+      :title="draft?.intent === 'create_person' ? 'تأیید ساخت مشتری' : 'تأیید ثبت فعالیت'"
+      @close="cancelDraft"
+    >
+      <p v-if="draft" class="modal-lead">{{ rewriteGregorianDates(draft.summary) }}</p>
+      <p class="edit-hint">قبل از تأیید می‌توانید متن را اصلاح کنید.</p>
+      <div v-if="draft?.person" class="modal-fields">
+        <label>نام <input v-model="draft.person.firstName" @input="onPersonNameEdit" /></label>
+        <label>نام خانوادگی <input v-model="draft.person.lastName" /></label>
+        <label>موبایل <input v-model="draft.person.mobile" dir="ltr" /></label>
+        <label>تلفن <input v-model="draft.person.phone" dir="ltr" /></label>
+        <label>ایمیل <input v-model="draft.person.email" dir="ltr" /></label>
+        <label>وب‌سایت <input v-model="draft.person.website" dir="ltr" /></label>
+        <label>معرف <input v-model="draft.person.referrer" /></label>
+        <label>سمت <input v-model="draft.person.position" /></label>
+        <label>یادداشت <textarea v-model="draft.person.notes" rows="2" /></label>
+      </div>
+      <div v-else-if="draft?.activity" class="modal-fields">
+        <label>عنوان <input v-model="draft.activity.title" @input="onActivityTitleEdit" /></label>
+        <label>
+          نوع
+          <select v-model="draft.activity.type">
+            <option v-for="(label, key) in ACTIVITY_LABEL" :key="key" :value="key">{{ label }}</option>
+          </select>
+        </label>
+        <label>
+          زمان
+          <JalaliDateInput :model-value="dueLocal" mode="datetime" @update:model-value="onDueLocal" />
+        </label>
+        <label>
+          مشتری
+          <input v-model="draft.activity.personName" @input="onActivityPersonEdit" @change="rematchActivityPerson" />
+        </label>
+        <p v-if="draft.activity.personName && !draft.activity.personId" class="warn">
+          در فهرست مشتریان پرونده‌ای با این نام پیدا نشد. فعالیت ذخیره می‌شود، ولی داخل پروندهٔ آن شخص دیده نمی‌شود.
+        </p>
+        <label>توضیح <textarea v-model="draft.activity.description" rows="2" /></label>
+      </div>
+      <p v-if="draft?.missing.length" class="ai-error">ناقص است: {{ draft.missing.join('، ') }}</p>
       <template #footer>
-        <a-button :disabled="confirming" @click="cancelDraft">انصراف</a-button>
-        <a-button
-          type="primary"
-          :disabled="!draft?.canConfirm || confirming"
-          :loading="confirming"
-          @click="confirmDraft"
-        >
+        <UiButton variant="ghost" :disabled="confirming" @click="cancelDraft">انصراف</UiButton>
+        <UiButton variant="primary" :disabled="!draft?.canConfirm || confirming" :loading="confirming" @click="confirmDraft">
           تأیید و انجام
-        </a-button>
+        </UiButton>
       </template>
-    </a-modal>
+    </UiModal>
 
-    <a-modal v-model:open="answerOpen" title="پاسخ دستیار" destroy-on-close @cancel="closeAnswer">
-      <a-typography-paragraph style="white-space: pre-wrap">
-        {{ rewriteGregorianDates(answer || '') }}
-      </a-typography-paragraph>
-      <a-space v-if="sources?.length" wrap>
+    <UiModal :open="answerOpen && Boolean(answer)" title="پاسخ دستیار" @close="closeAnswer">
+      <p class="modal-lead answer-body">{{ rewriteGregorianDates(answer || '') }}</p>
+      <div v-if="sources?.length" class="sources">
         <RouterLink
           v-for="source in sources"
           :key="`${source.type}-${source.id}`"
           :to="sourceTo(source)"
           @click="closeAnswer"
         >
-          <a-tag color="processing">{{ source.label }}</a-tag>
+          {{ source.label }}
         </RouterLink>
-      </a-space>
+      </div>
       <template #footer>
-        <a-button type="primary" @click="closeAnswer">بستن</a-button>
+        <UiButton variant="primary" @click="closeAnswer">بستن</UiButton>
       </template>
-    </a-modal>
+    </UiModal>
+  </article>
 </template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: var(--radius);
+  padding: 1rem 1rem 0.95rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-head {
+  margin-bottom: 0.55rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.modal-lead {
+  margin: 0 0 0.85rem;
+  color: #334155;
+  font-size: 0.9rem;
+  line-height: 1.7;
+}
+
+.answer-body {
+  white-space: pre-wrap;
+}
+
+.edit-hint {
+  margin: -0.35rem 0 0.75rem;
+  color: #64748b;
+  font-size: 0.78rem;
+}
+
+.modal-fields {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.modal-fields label {
+  display: grid;
+  gap: 0.25rem;
+  color: #64748b;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.modal-fields input,
+.modal-fields select,
+.modal-fields textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  background: #fff;
+  color: #0f172a;
+  font: inherit;
+  font-size: 0.88rem;
+  font-weight: 500;
+  padding: 0.5rem 0.65rem;
+}
+
+.modal-fields textarea {
+  resize: vertical;
+}
+
+.warn {
+  display: inline-block;
+  margin-inline-start: 0.35rem;
+  color: #b45309;
+  font-size: 0.75rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.92rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #0f172a;
+}
+
+.spark {
+  color: #eab308;
+  display: grid;
+}
+
+.ai-lead {
+  margin: 0 0 0.75rem;
+  padding: 0.55rem 0.75rem;
+  width: fit-content;
+  max-width: 100%;
+  background: #d1fae5;
+  color: #115e59;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border-radius: 14px 14px 4px 14px;
+}
+
+.ai-shortcuts {
+  display: grid;
+  gap: 0.4rem;
+  margin-bottom: 0.8rem;
+  flex: 1;
+}
+
+.ai-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.58rem 0.7rem;
+  border-radius: var(--radius);
+  background: #fff;
+  border: 1px solid #eef2f7;
+  color: #334155;
+  font-size: 0.76rem;
+  text-align: start;
+  font: inherit;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
+}
+
+.ai-chip:hover:not(:disabled) {
+  background: #f0fdfa;
+  border-color: #99f6e4;
+}
+
+.ai-chip:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+.chip-ico {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--radius);
+  background: #ecfdf8;
+  color: #14b8a6;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.ai-input {
+  display: flex;
+  gap: 0.4rem;
+  margin-top: auto;
+}
+
+.ai-input input {
+  flex: 1;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  padding: 0.58rem 0.75rem;
+  background: #f8fafc;
+  font-size: 0.8rem;
+}
+
+.ai-input button {
+  width: 40px;
+  border: 0;
+  border-radius: var(--radius);
+  background: #14b8a6;
+  color: #fff;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+
+.ai-input button:disabled {
+  opacity: 0.55;
+}
+
+.ai-answer {
+  background: #f0fdfa;
+  border-radius: var(--radius);
+  padding: 0.7rem 0.8rem;
+  margin-bottom: 0.75rem;
+}
+
+.ai-answer p {
+  margin: 0;
+  color: #134e4a;
+  font-size: 0.82rem;
+  line-height: 1.7;
+}
+
+.sources {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-top: 0.5rem;
+}
+
+.sources a {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: #0f766e;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.15rem 0.5rem;
+}
+
+.ai-error {
+  margin: 0 0 0.7rem;
+  color: #b91c1c;
+  font-size: 0.8rem;
+}
+</style>

apps/web/src/components/dashboard/HomeAlertsSection.vue

@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { RouterLink } from 'vue-router';
-import type { Component } from 'vue';
-import {
-  AlertOutlined,
-  CheckCircleOutlined,
-  ExclamationCircleOutlined,
-  InfoCircleOutlined,
-  LeftOutlined,
-} from '@ant-design/icons-vue';
-import { toFaDigits } from '@/lib/jalali';
-import type { HomeDashboardAlertDto } from '@mento/shared';
-
-const props = defineProps<{
-  alerts: HomeDashboardAlertDto[];
-}>();
-
-type Tone = HomeDashboardAlertDto['tone'];
-
-type AlertRow = {
-  key: string;
-  tone: Tone;
-  title: string;
-  subtitle?: string;
-  link: string;
-};
-
-const TONE_ORDER: Record<Tone, number> = {
-  urgent: 0,
-  warning: 1,
-  info: 2,
-  success: 3,
-};
-
-const rows = computed<AlertRow[]>(() =>
-  [...(props.alerts ?? [])]
-    .map((a) => {
-      const parts = a.text.split(/\s*[—\-–]\s*|\n/);
-      const title = parts[0]?.trim() || a.text;
-      const subtitle = parts.slice(1).join(' ').trim() || undefined;
-      return {
-        key: a.key,
-        tone: a.tone,
-        title,
-        subtitle,
-        link: a.link || '/',
-      };
-    })
-    .sort((a, b) => TONE_ORDER[a.tone] - TONE_ORDER[b.tone]),
-);
-
-const urgentCount = computed(() => rows.value.filter((r) => r.tone === 'urgent').length);
-const warningCount = computed(() => rows.value.filter((r) => r.tone === 'warning').length);
-
-function toneIcon(tone: Tone): Component {
-  if (tone === 'urgent') return ExclamationCircleOutlined;
-  if (tone === 'warning') return AlertOutlined;
-  if (tone === 'success') return CheckCircleOutlined;
-  return InfoCircleOutlined;
-}
-
-function toneLabel(tone: Tone) {
-  if (tone === 'urgent') return 'فوری';
-  if (tone === 'warning') return 'هشدار';
-  if (tone === 'success') return 'موفق';
-  return 'اطلاع';
-}
-
-function actionLabel(tone: Tone) {
-  if (tone === 'urgent') return 'اقدام';
-  if (tone === 'warning') return 'بررسی';
-  return 'مشاهده';
-}
-
-function rowClass(tone: Tone) {
-  if (tone === 'urgent') return 'border-rose-200/80 bg-rose-50/50 hover:bg-rose-50';
-  if (tone === 'warning') return 'border-amber-200/80 bg-amber-50/50 hover:bg-amber-50';
-  if (tone === 'success') return 'border-emerald-200/70 bg-emerald-50/40 hover:bg-emerald-50/80';
-  return 'border-slate-200/80 bg-slate-50/70 hover:bg-slate-100/80';
-}
-
-function barClass(tone: Tone) {
-  if (tone === 'urgent') return 'bg-rose-500';
-  if (tone === 'warning') return 'bg-amber-500';
-  if (tone === 'success') return 'bg-emerald-500';
-  return 'bg-blue-500';
-}
-
-function iconWrapClass(tone: Tone) {
-  if (tone === 'urgent') return 'bg-rose-100 text-rose-600';
-  if (tone === 'warning') return 'bg-amber-100 text-amber-600';
-  if (tone === 'success') return 'bg-emerald-100 text-emerald-600';
-  return 'bg-blue-100 text-blue-600';
-}
-
-function badgeClass(tone: Tone) {
-  if (tone === 'urgent') return 'bg-rose-100 text-rose-700';
-  if (tone === 'warning') return 'bg-amber-100 text-amber-700';
-  if (tone === 'success') return 'bg-emerald-100 text-emerald-700';
-  return 'bg-blue-100 text-blue-700';
-}
-
-function actionClass(tone: Tone) {
-  if (tone === 'urgent') return 'text-rose-600 group-hover:text-rose-700';
-  if (tone === 'warning') return 'text-amber-600 group-hover:text-amber-700';
-  if (tone === 'success') return 'text-emerald-600 group-hover:text-emerald-700';
-  return 'text-blue-600 group-hover:text-blue-700';
-}
-</script>
-
-<template>
-  <section
-    v-if="rows.length"
-    class="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-sm flex flex-col h-[330px]"
-  >
-    <header class="flex items-center justify-between gap-3 pb-3 mb-3 border-b border-slate-100 shrink-0">
-      <div class="flex items-center gap-2.5 min-w-0">
-        <span class="relative flex h-2.5 w-2.5 shrink-0" aria-hidden="true">
-          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75" />
-          <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-rose-500" />
-        </span>
-        <div class="min-w-0">
-          <h3 class="m-0 font-bold text-slate-800 text-base leading-6">نیازمند توجه</h3>
-          <p class="m-0 mt-0.5 text-xs text-slate-400 truncate">
-            موارد با اولویت بالاتر اول آمده‌اند
-          </p>
-        </div>
-      </div>
-      <div class="flex items-center gap-1.5 shrink-0">
-        <span
-          v-if="urgentCount"
-          class="text-[11px] font-bold bg-rose-50 text-rose-600 border border-rose-200/70 px-2 py-0.5 rounded-full"
-        >
-          {{ toFaDigits(urgentCount) }} فوری
-        </span>
-        <span
-          v-if="warningCount"
-          class="text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200/70 px-2 py-0.5 rounded-full"
-        >
-          {{ toFaDigits(warningCount) }} هشدار
-        </span>
-        <span class="text-[11px] font-semibold text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full">
-          {{ toFaDigits(rows.length) }} مورد
-        </span>
-      </div>
-    </header>
-
-    <div class="flex-1 overflow-y-auto space-y-2 pe-1 min-h-0">
-      <RouterLink
-        v-for="item in rows"
-        :key="item.key"
-        :to="item.link"
-        class="group relative overflow-hidden rounded-xl border px-3 py-2.5 flex items-center gap-3 transition-all"
-        :class="rowClass(item.tone)"
-      >
-        <span
-          class="absolute inset-y-0 right-0 w-1 rounded-s-full"
-          :class="barClass(item.tone)"
-          aria-hidden="true"
-        />
-
-        <span
-          class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 text-sm"
-          :class="iconWrapClass(item.tone)"
-          aria-hidden="true"
-        >
-          <component :is="toneIcon(item.tone)" />
-        </span>
-
-        <div class="min-w-0 flex-1">
-          <h4 class="m-0 font-bold text-[13px] text-slate-800 leading-5 truncate">
-            {{ item.title }}
-          </h4>
-          <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
-            <span
-              class="text-[10px] font-bold px-1.5 py-0.5 rounded shrink-0"
-              :class="badgeClass(item.tone)"
-            >
-              {{ toneLabel(item.tone) }}
-            </span>
-            <span v-if="item.subtitle" class="text-[11px] text-slate-500 truncate">
-              {{ item.subtitle }}
-            </span>
-          </div>
-        </div>
-
-        <div
-          class="shrink-0 flex items-center gap-1 text-[11px] font-semibold"
-          :class="actionClass(item.tone)"
-        >
-          <span class="opacity-0 group-hover:opacity-100 transition-opacity hidden sm:inline">
-            {{ actionLabel(item.tone) }}
-          </span>
-          <LeftOutlined class="text-slate-400 group-hover:-translate-x-0.5 transition-transform" />
-        </div>
-      </RouterLink>
-    </div>
-  </section>
-</template>

apps/web/src/components/dashboard/HomeBirthdayStrip.vue

@@ -1,18 +1,10 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { RouterLink } from 'vue-router';
-import { GiftOutlined } from '@ant-design/icons-vue';
-import {
-  Button as AButton,
-  Flex as AFlex,
-  List as AList,
-  Modal as AModal,
-  Space as ASpace,
-  Tag as ATag,
-  Typography,
-} from 'ant-design-vue';
 import { api } from '@/lib/api';
 import { toFaDigits } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
+import { UiModal } from '@/components/ui';
 import SmsComposeModal from '@/components/SmsComposeModal.vue';
 
 type BirthdayItem = {
@@ -36,10 +28,6 @@ type BirthdayMonth = {
 const data = ref<BirthdayMonth | null>(null);
 const listOpen = ref(false);
 const smsTarget = ref<BirthdayItem | null>(null);
-const { Text: ATypographyText } = Typography;
-
-const AListItem = AList.Item;
-const AListItemMeta = AList.Item.Meta;
 
 const groups = computed(() => {
   const map = new Map<number, BirthdayItem[]>();
@@ -66,78 +54,63 @@ onMounted(async () => {
 </script>
 
 <template>
-  <section v-if="data" class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm">
-    <a-flex align="center" wrap="wrap" gap="middle" justify="space-between">
-      <a-flex align="center" gap="middle">
-        <a-typography-text type="secondary"><GiftOutlined /></a-typography-text>
-        <div>
-          <a-typography-text strong>تولدهای {{ data.monthName }}</a-typography-text>
-          <br />
-          <a-typography-text type="secondary">
-            {{ toFaDigits(data.total) }} مشتری این ماه تولد دارند
-          </a-typography-text>
-        </div>
-      </a-flex>
+  <section v-if="data" class="birthdays">
+    <div class="head">
+      <span class="ico"><UiIcon name="gift" :size="18" /></span>
+      <div>
+        <strong>تولدهای {{ data.monthName }}</strong>
+        <p>{{ toFaDigits(data.total) }} مشتری این ماه تولد دارند</p>
+      </div>
+    </div>
 
-      <a-space wrap>
-        <RouterLink
-          v-for="person in data.preview"
-          :key="person.id"
-          :to="{ name: 'person-detail', params: { id: person.id } }"
+    <div class="chips">
+      <RouterLink
+        v-for="person in data.preview"
+        :key="person.id"
+        class="chip"
+        :title="person.fullName"
+        :to="{ name: 'person-detail', params: { id: person.id } }"
+      >
+        <b>{{ toFaDigits(person.day) }}</b>
+        <span>{{ person.fullName }}</span>
+      </RouterLink>
+    </div>
+    <button type="button" class="more" @click="listOpen = true">
+      {{ data.total > data.preview.length ? 'همه' : 'فهرست' }}
+    </button>
+
+    <UiModal :open="listOpen" :title="`تولدهای ${data.monthName}`" @close="listOpen = false">
+      <div class="days">
+        <section
+          v-for="[day, people] in groups"
+          :key="day"
+          class="day"
+          :class="{ past: day < data.today, today: day === data.today }"
         >
-          <a-tag>
-            {{ toFaDigits(person.day) }} — {{ person.fullName }}
-          </a-tag>
-        </RouterLink>
-        <a-button type="link" @click="listOpen = true">
-          {{ data.total > data.preview.length ? 'همه' : 'فهرست' }}
-        </a-button>
-      </a-space>
-    </a-flex>
-
-    <a-modal
-      v-model:open="listOpen"
-      :title="`تولدهای ${data.monthName}`"
-      :footer="null"
-      destroy-on-close
-    >
-      <a-list item-layout="vertical" :data-source="groups">
-        <template #renderItem="{ item }">
-          <a-list-item>
-            <template #actions>
-              <a-tag v-if="item[0] < data!.today">گذشته</a-tag>
-              <a-tag v-else-if="item[0] === data!.today" color="processing">امروز</a-tag>
-            </template>
-            <a-list-item-meta>
-              <template #title>
-                {{ toFaDigits(item[0]) }} {{ data!.monthName }}
-              </template>
-            </a-list-item-meta>
-            <a-list :data-source="item[1]">
-              <template #renderItem="{ item: person }">
-                <a-list-item>
-                  <RouterLink
-                    :to="{ name: 'person-detail', params: { id: person.id } }"
-                    @click="listOpen = false"
-                  >
-                    {{ person.fullName }}
-                  </RouterLink>
-                  <template #actions>
-                    <a-button
-                      type="link"
-                      :disabled="!person.mobile"
-                      @click="openSms(person)"
-                    >
-                      {{ person.mobile ? 'پیامک تبریک' : 'بدون شماره' }}
-                    </a-button>
-                  </template>
-                </a-list-item>
-              </template>
-            </a-list>
-          </a-list-item>
-        </template>
-      </a-list>
-    </a-modal>
+          <h3>
+            <b>{{ toFaDigits(day) }}</b>
+            <span>{{ data.monthName }}</span>
+            <em v-if="day < data.today">گذشته</em>
+            <em v-else-if="day === data.today">امروز</em>
+          </h3>
+          <ul>
+            <li v-for="person in people" :key="person.id">
+              <RouterLink :to="{ name: 'person-detail', params: { id: person.id } }" @click="listOpen = false">
+                {{ person.fullName }}
+              </RouterLink>
+              <button
+                type="button"
+                class="sms"
+                :disabled="!person.mobile"
+                @click="openSms(person)"
+              >
+                {{ person.mobile ? 'پیامک تبریک' : 'بدون شماره' }}
+              </button>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </UiModal>
 
     <SmsComposeModal
       nest
@@ -153,3 +126,289 @@ onMounted(async () => {
     />
   </section>
 </template>
+
+<style scoped>
+.birthdays {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  max-width: 100%;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.35), transparent 42%),
+    linear-gradient(100deg, var(--accent-subtle) 0%, #fff 58%, #fff7f4 100%);
+  border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
+  border-radius: var(--radius);
+  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.05);
+  padding: 0.55rem 0.75rem;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  flex-shrink: 0;
+}
+
+.ico {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: #fff;
+  color: #e11d48;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, #fff);
+}
+
+.head strong {
+  display: block;
+  color: var(--accent-deep);
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+.head p {
+  margin: 0.05rem 0 0;
+  color: #64748b;
+  font-size: 0.75rem;
+}
+
+.chips {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+  gap: 0.35rem;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.chip {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 11.5rem;
+  min-width: 0;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
+  background: rgba(255, 255, 255, 0.86);
+  color: #134e4a;
+  padding: 0.22rem 0.55rem 0.22rem 0.28rem;
+  text-decoration: none;
+  font-size: 0.78rem;
+}
+
+.chip b {
+  flex-shrink: 0;
+  font-weight: 700;
+  font-size: 0.72rem;
+  color: var(--accent-deep);
+  background: var(--accent-soft);
+  border-radius: 999px;
+  padding: 0.12rem 0.38rem;
+}
+
+.chip span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.more {
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  padding: 0.32rem 0.7rem;
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+
+.more:hover {
+  background: var(--accent-hover);
+}
+
+.days {
+  display: grid;
+  gap: 0.85rem;
+  max-height: 62vh;
+  overflow: auto;
+  padding-inline-end: 0.15rem;
+}
+
+.day {
+  background: #fff;
+  border: 1px solid #e7eef2;
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.day h3 {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  padding: 0.55rem 0.8rem;
+  background: var(--accent-subtle);
+  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, #fff);
+  font-size: 0.86rem;
+  font-weight: 600;
+  color: var(--accent-deep);
+}
+
+.day h3 b {
+  display: grid;
+  place-items: center;
+  min-width: 1.7rem;
+  height: 1.7rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.78rem;
+}
+
+.day em {
+  margin-inline-start: auto;
+  font-style: normal;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #94a3b8;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+}
+
+.day.today h3 {
+  background: color-mix(in srgb, var(--accent-soft) 70%, #fff);
+}
+
+.day.today em {
+  color: var(--accent-deep);
+}
+
+.day.past {
+  opacity: 0.82;
+}
+
+.day ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.day li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.62rem 0.85rem;
+  border-top: 1px solid #eef2f6;
+}
+
+.day li:first-child {
+  border-top: 0;
+}
+
+.day a {
+  flex: 1 1 auto;
+  color: #0f172a;
+  text-decoration: none;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.day a:hover {
+  color: var(--accent-deep);
+}
+
+.sms {
+  flex-shrink: 0;
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
+  background: #fff;
+  color: var(--accent-deep);
+  border-radius: 999px;
+  padding: 0.28rem 0.65rem;
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.sms:hover:not(:disabled) {
+  background: var(--accent-subtle);
+}
+
+.sms:disabled {
+  border-color: #e2e8f0;
+  color: #94a3b8;
+  cursor: default;
+}
+
+.lead {
+  margin: 0 0 0.6rem;
+}
+
+.hint,
+.err,
+.ok {
+  margin: 0.55rem 0 0;
+  font-size: 0.82rem;
+}
+
+.hint {
+  color: #94a3b8;
+}
+
+.err {
+  color: #dc2626;
+}
+
+.ok {
+  color: #16a34a;
+}
+
+@media (max-width: 720px) {
+  .birthdays {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.45rem 0.6rem;
+  }
+
+  .head {
+    min-width: 0;
+  }
+
+  .head p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .more {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .chips {
+    grid-column: 1 / -1;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .chips::-webkit-scrollbar {
+    display: none;
+  }
+
+  .day li {
+    gap: 0.45rem;
+    padding-inline: 0.7rem;
+  }
+}
+</style>

apps/web/src/components/dashboard/HomeCustomerGrowth.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { toFaDigits } from '@/lib/jalali';
-import type { HomeDashboardSeriesPointDto } from '@mento/shared';
-import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
-
-const props = defineProps<{
-  series: HomeDashboardSeriesPointDto[];
-}>();
-
-const points = computed(() => props.series);
-const hasData = computed(() => points.value.some((p) => p.value > 0));
-const total = computed(() => points.value.reduce((a, p) => a + p.value, 0));
-
-const option = computed<UiChartOption>(() => ({
-  animationDuration: 450,
-  grid: { top: 36, right: 12, bottom: 28, left: 12, containLabel: true },
-  tooltip: {
-    trigger: 'axis',
-    textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
-    formatter: (params) => {
-      const row = Array.isArray(params) ? params[0] : params;
-      const point = points.value[row.dataIndex ?? 0];
-      if (!point) return '';
-      return `${point.monthLabel}<br/><strong>${toFaDigits(point.value)}</strong> مشتری جدید`;
-    },
-  },
-  xAxis: {
-    type: 'category',
-    data: points.value.map((p) => p.monthLabel),
-    axisLine: { show: false },
-    axisTick: { show: false },
-    axisLabel: {
-      color: '#94a3b8',
-      fontFamily: 'IRANSans, Tahoma, sans-serif',
-      fontSize: 11,
-    },
-  },
-  yAxis: {
-    type: 'value',
-    min: 0,
-    minInterval: 1,
-    ...(hasData.value ? {} : { max: 1 }),
-    splitLine: { lineStyle: { color: '#e5e7eb', type: 'dashed' } },
-    axisLabel: { show: false },
-  },
-  series: [
-    {
-      type: 'bar',
-      data: points.value.map((p) => p.value),
-      barMaxWidth: 32,
-      itemStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: '#34d399' },
-            { offset: 1, color: '#059669' },
-          ],
-        },
-        borderRadius: [8, 8, 0, 0],
-      },
-      label: {
-        show: true,
-        position: 'top',
-        color: '#64748b',
-        fontFamily: 'IRANSans, Tahoma, sans-serif',
-        fontSize: 11,
-        formatter: (p) => toFaDigits(Number(p.value ?? 0)),
-      },
-    },
-    {
-      type: 'line',
-      data: points.value.map((p) => p.value),
-      smooth: 0.35,
-      symbol: 'none',
-      lineStyle: { color: '#0f766e', width: 2, opacity: 0.55 },
-    },
-  ],
-}));
-</script>
-
-<template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="font-bold text-slate-800 text-base">روند رشد مشتریان</h3>
-      <span v-if="hasData" class="text-xs font-bold bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-lg">
-        {{ toFaDigits(total) }} در ۱۲ ماه
-      </span>
-    </div>
-    <div class="h-56">
-      <UiChart :option="option" height="224px" />
-    </div>
-  </section>
-</template>

apps/web/src/components/dashboard/HomeDealOutcomeChart.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { toFaDigits } from '@/lib/jalali';
-import type { HomeDashboardSalesSummaryDto } from '@mento/shared';
-import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
-
-const props = defineProps<{
-  summary: HomeDashboardSalesSummaryDto;
-  formatAmount: (value: number) => string;
-}>();
-
-const slices = computed(() => [
-  { name: 'باز', value: props.summary.openCount, color: '#3b82f6' },
-  { name: 'برنده', value: props.summary.wonCount, color: '#10b981' },
-  { name: 'باخته', value: props.summary.lostCount, color: '#f43f5e' },
-]);
-
-const total = computed(() => slices.value.reduce((a, s) => a + s.value, 0));
-const hasData = computed(() => total.value > 0);
-
-const option = computed<UiChartOption>(() => ({
-  animationDuration: 400,
-  color: slices.value.map((s) => s.color),
-  tooltip: {
-    trigger: 'item',
-    textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
-    formatter: (p) => {
-      const item = Array.isArray(p) ? p[0] : p;
-      return `${item.name}<br/>${toFaDigits(Number(item.value ?? 0))} — ${toFaDigits(item.percent ?? 0)}٪`;
-    },
-  },
-  series: [
-    {
-      type: 'pie',
-      radius: ['58%', '82%'],
-      center: ['50%', '50%'],
-      silent: !hasData.value,
-      avoidLabelOverlap: true,
-      itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
-      label: { show: false },
-      labelLine: { show: false },
-      data: hasData.value
-        ? slices.value.map((s) => ({ name: s.name, value: s.value }))
-        : [{ name: '', value: 1, itemStyle: { color: '#e5e7eb' } }],
-    },
-  ],
-}));
-</script>
-
-<template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full flex flex-col">
-    <div class="flex items-center justify-between mb-3">
-      <h3 class="!m-0 !leading-6 font-bold text-slate-800 text-base">وضعیت معاملات</h3>
-      <span class="text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-2.5 py-1 rounded-lg">
-        نرخ برد {{ toFaDigits(summary.winRate) }}٪
-      </span>
-    </div>
-    <div class="flex flex-col sm:flex-row items-center gap-4">
-      <div class="w-full sm:w-[48%] sm:max-w-[240px] shrink-0">
-        <div class="relative w-full aspect-square">
-          <UiChart :option="option" height="100%" />
-          <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
-            <span class="text-2xl font-black text-slate-800 leading-none">{{ toFaDigits(total) }}</span>
-            <span class="text-xs text-slate-400 mt-1">معامله کل</span>
-          </div>
-        </div>
-      </div>
-      <div class="w-full sm:flex-1 min-w-0 space-y-2.5">
-        <div class="p-3 rounded-xl bg-slate-50/80 border border-slate-100 flex items-center justify-between gap-2">
-          <div>
-            <div class="text-xs font-bold text-slate-700">باز</div>
-            <div class="text-[11px] text-slate-400">در جریان</div>
-          </div>
-          <div class="text-left">
-            <div class="text-sm font-black text-slate-800">{{ toFaDigits(summary.openCount) }}</div>
-            <div class="text-xs text-slate-500">{{ formatAmount(summary.openAmount) }}</div>
-          </div>
-        </div>
-        <div class="p-3 rounded-xl bg-emerald-50/50 border border-emerald-100 flex items-center justify-between gap-2">
-          <div>
-            <div class="text-xs font-bold text-emerald-900">برنده (۱۲ ماه)</div>
-            <div class="text-[11px] text-emerald-600/80">تکمیل موفق</div>
-          </div>
-          <div class="text-left">
-            <div class="text-sm font-black text-emerald-700">{{ toFaDigits(summary.wonCount) }}</div>
-            <div class="text-xs text-emerald-600">{{ formatAmount(summary.wonAmount) }}</div>
-          </div>
-        </div>
-        <div class="p-3 rounded-xl bg-rose-50/40 border border-rose-100 flex items-center justify-between gap-2">
-          <div>
-            <div class="text-xs font-bold text-rose-900">باخته (۱۲ ماه)</div>
-            <div class="text-[11px] text-rose-500">لغو یا عدم توافق</div>
-          </div>
-          <div class="text-left">
-            <div class="text-sm font-black text-rose-600">{{ toFaDigits(summary.lostCount) }}</div>
-            <div class="text-xs text-rose-500">{{ formatAmount(summary.lostAmount) }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

apps/web/src/components/dashboard/HomeFunnelChart.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Empty as AEmpty, Progress as AProgress } from 'ant-design-vue';
-import { toFaDigits } from '@/lib/jalali';
-import type { HomeDashboardFunnelStageDto } from '@mento/shared';
-
-const props = defineProps<{
-  funnel: HomeDashboardFunnelStageDto[];
-  formatAmount: (value: number) => string;
-}>();
-
-const rows = computed(() => props.funnel);
-const hasData = computed(() => rows.value.some((r) => r.count > 0));
-const openTotal = computed(() => rows.value.reduce((a, r) => a + r.count, 0));
-
-function share(count: number) {
-  if (!openTotal.value) return 0;
-  return Math.round((count / openTotal.value) * 100);
-}
-</script>
-
-<template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="font-bold text-slate-800 text-base">قیف فروش باز</h3>
-      <span v-if="hasData" class="text-xs font-semibold text-slate-500">
-        {{ toFaDigits(openTotal) }} معامله باز
-      </span>
-    </div>
-    <a-empty v-if="!hasData" description="معاملهٔ بازی در مسیر فروش نیست" />
-    <div v-else class="space-y-4">
-      <div v-for="row in rows" :key="row.stageId ?? row.stageName">
-        <div class="flex items-center justify-between gap-2 mb-1">
-          <span class="text-xs font-bold text-slate-700">{{ row.stageName }}</span>
-          <span class="text-xs font-semibold text-slate-500">
-            {{ toFaDigits(row.count) }} · {{ toFaDigits(share(row.count)) }}٪
-          </span>
-        </div>
-        <a-progress :percent="share(row.count)" :show-info="false" stroke-color="#10b981" />
-        <div class="text-[11px] text-slate-400">{{ formatAmount(row.amount) }}</div>
-      </div>
-    </div>
-  </section>
-</template>

apps/web/src/components/dashboard/HomeHero.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { SearchOutlined, SendOutlined } from '@ant-design/icons-vue';
-import {
-  Button as AButton,
-  Input as AInput,
-  Typography,
-} from 'ant-design-vue';
-import { brand } from '@mento/shared';
+import { RouterLink } from 'vue-router';
+import UiIcon from '@/components/UiIcon.vue';
+import MentoAiAvatar from '@/components/brand/MentoAiAvatar.vue';
+import { brand, type HomeDashboardAlertDto } from '@mento/shared';
 import { useAuthStore } from '@/stores/auth';
 
 const props = defineProps<{
   greeting: string;
   firstName: string;
   userInitial: string;
+  alerts: HomeDashboardAlertDto[];
   askQuery: string;
   asking?: boolean;
   askAnswer?: string;
@@ -26,218 +24,444 @@ const emit = defineEmits<{
 }>();
 
 const auth = useAuthStore();
-const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
-  Typography;
 
-/** فقط عکس واقعی کاربر؛ پیش‌فرض عمومی را نشان نده */
-const hasCustomPhoto = computed(() => Boolean(auth.user?.hasAvatar));
+type HeroChip = {
+  key: string;
+  tone: HomeDashboardAlertDto['tone'];
+  title: string;
+  subtitle?: string;
+  link: string;
+};
+
+const chips = computed<HeroChip[]>(() =>
+  props.alerts.slice(0, 3).map((a) => {
+    const parts = a.text.split(/\s*[—\-–]\s*|\n/);
+    const title = parts[0]?.trim() || a.text;
+    const subtitle = parts.slice(1).join(' ').trim() || undefined;
+    return {
+      key: a.key,
+      tone: a.tone,
+      title,
+      subtitle,
+      link: a.link || '/',
+    };
+  }),
+);
+
+function alertIcon(tone: string) {
+  if (tone === 'urgent') return 'fire' as const;
+  if (tone === 'warning') return 'warning' as const;
+  if (tone === 'success') return 'trend' as const;
+  return 'sparkle' as const;
+}
 
 const shortcutLabel = computed(() =>
   typeof navigator !== 'undefined' && /Mac|iPhone|iPad/i.test(navigator.platform)
     ? '⌘K'
     : 'Ctrl+K',
 );
-
-const statusMessage = computed(() => {
-  if (props.asking) return props.statusText || 'در حال پاسخ…';
-  if (props.askError) return props.askError;
-  if (props.askAnswer) return props.askAnswer;
-  return '';
-});
 </script>
 
 <template>
-  <div class="flex flex-col gap-3">
-    <div class="home-hero relative overflow-hidden rounded-2xl border border-emerald-300/50 shadow-sm">
-      <!-- base gradient -->
-      <div class="home-hero__gradient pointer-events-none absolute inset-0" aria-hidden="true" />
-      <!-- geometric pattern -->
-      <div class="home-hero__pattern pointer-events-none absolute inset-0" aria-hidden="true" />
-      <!-- soft orbs -->
-      <div
-        class="pointer-events-none absolute -left-20 -top-24 h-52 w-52 rounded-full bg-emerald-400/20 blur-3xl"
-        aria-hidden="true"
-      />
-      <div
-        class="pointer-events-none absolute -right-16 -bottom-20 h-48 w-48 rounded-full bg-teal-500/15 blur-3xl"
-        aria-hidden="true"
-      />
+  <header class="hero home-hero" style="position: relative">
+    <div
+      class="hero-surface"
+      aria-hidden="true"
+      style="position: absolute; inset: 0; overflow: hidden; pointer-events: none"
+    >
+      <div class="hero-glow" style="position: absolute" />
+      <div class="hero-mist" style="position: absolute; inset: 0" />
+    </div>
 
-      <div
-        class="relative flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-4 p-4 sm:p-5"
-      >
-        <div class="flex items-center gap-3.5 min-w-0">
-          <div class="home-hero__identity relative shrink-0" :aria-label="firstName">
-            <div class="home-hero__frame">
-              <img
-                v-if="hasCustomPhoto"
-                :src="auth.avatarSrc"
-                :alt="firstName"
-                class="home-hero__photo"
-              />
-              <span v-else class="home-hero__monogram" aria-hidden="true">
-                {{ userInitial }}
-              </span>
-            </div>
-            <span class="home-hero__online" title="آنلاین" aria-hidden="true" />
-          </div>
-          <div class="min-w-0">
-            <p class="m-0 text-[11px] font-semibold tracking-wide text-emerald-700/80">
-              {{ brand.nameFa }}
-            </p>
-            <a-typography-title
-              :level="4"
-              class="!m-0 !mt-0.5 !text-slate-800 !text-lg sm:!text-xl !font-extrabold !leading-7 truncate"
-            >
-              {{ greeting }}، {{ firstName }}
-            </a-typography-title>
-            <a-typography-text class="!text-slate-500 !text-sm !mt-0.5 block">
-              از داده‌ها بپرسید یا کار امروز را از همین‌جا شروع کنید
-            </a-typography-text>
-          </div>
+    <div class="hero-body">
+      <div class="hero-greet">
+        <span class="hero-avatar">
+          <img :src="auth.avatarSrc" :alt="firstName" width="72" height="72" />
+          <i class="online" />
+        </span>
+        <div class="greet-text">
+          <h1>{{ greeting }} {{ firstName }} 👋</h1>
+          <p v-if="chips.length">{{ brand.nameFa }} اینا رو برات پیدا کرده</p>
+          <p v-else>از {{ brand.nameFa }} بپرس یا کار امروز را شروع کن</p>
         </div>
+      </div>
 
-        <div
-          class="flex items-center gap-2 w-full lg:max-w-xl bg-white border border-white/80 rounded-2xl px-3 py-2 shadow-md shadow-emerald-900/5 focus-within:border-emerald-300 focus-within:ring-2 focus-within:ring-emerald-200/70 transition"
+      <div v-if="chips.length" class="hero-chips">
+        <RouterLink
+          v-for="chip in chips"
+          :key="chip.key"
+          class="chip"
+          :class="`chip-${chip.tone}`"
+          :to="chip.link"
         >
-          <span
-            class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0"
-            aria-hidden="true"
-          >
-            <SearchOutlined />
+          <span class="chip-ico"><UiIcon :name="alertIcon(chip.tone)" :size="13" /></span>
+          <span class="chip-text">
+            <strong>{{ chip.title }}</strong>
+            <small v-if="chip.subtitle">{{ chip.subtitle }}</small>
           </span>
-          <a-input
+        </RouterLink>
+      </div>
+
+      <div class="hero-ask-wrap">
+        <form class="hero-ask" @submit.prevent="emit('ask')">
+          <UiIcon name="sparkle" :size="18" class="ask-ico" />
+          <input
             id="home-hero-ask"
             :value="askQuery"
+            type="search"
             :placeholder="brand.askPlaceholderFa"
             :disabled="asking"
-            :bordered="false"
-            class="flex-1 !bg-transparent"
-            @update:value="emit('update:askQuery', $event)"
-            @press-enter="emit('ask')"
+            @input="emit('update:askQuery', ($event.target as HTMLInputElement).value)"
           />
-          <kbd
-            class="hidden sm:inline-flex items-center text-[11px] font-sans text-slate-400 bg-slate-50 px-2 py-1 rounded-lg border border-slate-200 shrink-0"
-          >
-            {{ shortcutLabel }}
-          </kbd>
-          <a-button
-            type="primary"
-            shape="round"
-            :disabled="asking"
-            :loading="asking"
-            aria-label="ارسال"
-            @click="emit('ask')"
-          >
-            <template #icon><SendOutlined /></template>
-            <span class="hidden sm:inline">بپرس</span>
-          </a-button>
-        </div>
+          <kbd>{{ shortcutLabel }}</kbd>
+          <button type="submit" class="ask-send" aria-label="ارسال" :disabled="asking">
+            <UiIcon name="send" :size="15" />
+          </button>
+        </form>
+        <p v-if="asking" class="hero-ask-status">{{ statusText || 'در حال پاسخ…' }}</p>
+        <p v-else-if="askError" class="hero-ask-status err">{{ askError }}</p>
+        <p v-else-if="askAnswer" class="hero-ask-status">{{ askAnswer }}</p>
       </div>
     </div>
 
-    <div
-      v-if="statusMessage"
-      class="rounded-xl border px-3.5 py-2.5"
-      :class="
-        askError
-          ? 'border-rose-200 bg-rose-50/70'
-          : asking
-            ? 'border-emerald-200/70 bg-emerald-50/50'
-            : 'border-slate-200 bg-slate-50/80'
-      "
-    >
-      <a-typography-paragraph
-        :type="askError ? 'danger' : 'secondary'"
-        :ellipsis="{ rows: 3 }"
-        class="!mb-0 !text-sm"
-      >
-        {{ statusMessage }}
-      </a-typography-paragraph>
-    </div>
-  </div>
+    <MentoAiAvatar class="hero-bot" :size="156" />
+  </header>
 </template>
 
 <style scoped>
-.home-hero__gradient {
-  background:
-    linear-gradient(
-      115deg,
-      #ecfdf5 0%,
-      #d1fae5 28%,
-      #ccfbf1 55%,
-      #f0fdfa 78%,
-      #ffffff 100%
-    );
+.hero {
+  position: relative;
+  display: grid;
+  /* RTL: body سمت راست، ربات سمت چپ — فضای اضافه برای پاپ‌آپ */
+  grid-template-columns: minmax(0, 1fr) 210px;
+  gap: 0.7rem 1rem;
+  align-items: start;
+  align-self: start;
+  height: auto;
+  min-height: 0;
+  padding: 0.8rem 1.5rem 0.9rem;
+  border-radius: var(--radius);
+  overflow: visible;
+  color: #fff;
+  background: transparent;
+  isolation: isolate;
 }
 
-.home-hero__pattern {
-  opacity: 0.45;
-  background-image:
-    radial-gradient(circle at 1px 1px, rgba(16, 185, 129, 0.28) 1px, transparent 0),
-    linear-gradient(
-      135deg,
-      rgba(20, 184, 166, 0.08) 25%,
-      transparent 25%,
-      transparent 50%,
-      rgba(20, 184, 166, 0.08) 50%,
-      rgba(20, 184, 166, 0.08) 75%,
-      transparent 75%,
-      transparent
-    );
-  background-size:
-    18px 18px,
-    28px 28px;
-  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25));
-}
-
-.home-hero__identity {
-  width: 3.25rem;
-  height: 3.25rem;
-}
-
-.home-hero__frame {
-  width: 100%;
-  height: 100%;
-  border-radius: 1rem;
-  padding: 2px;
-  background: linear-gradient(145deg, #34d399 0%, #0d9488 48%, #059669 100%);
-  box-shadow:
-    0 0 0 3px rgba(255, 255, 255, 0.85),
-    0 8px 18px -10px rgba(4, 120, 87, 0.55);
-}
-
-.home-hero__photo,
-.home-hero__monogram {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  border-radius: calc(1rem - 2px);
-  object-fit: cover;
-}
-
-.home-hero__monogram {
-  align-items: center;
-  justify-content: center;
-  font-size: 1.15rem;
-  font-weight: 800;
-  color: #ecfdf5;
-  background:
-    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 45%),
-    linear-gradient(160deg, #10b981 0%, #0f766e 100%);
-  letter-spacing: -0.02em;
-  user-select: none;
-}
-
-.home-hero__online {
+.hero-surface {
   position: absolute;
-  left: -1px;
-  bottom: -1px;
-  width: 0.85rem;
-  height: 0.85rem;
+  inset: 0;
+  z-index: 0;
+  border-radius: var(--radius);
+  overflow: hidden;
+  background-color: #134e4a;
+  background-image:
+    radial-gradient(ellipse 55% 90% at 8% 55%, rgba(103, 232, 249, 0.55) 0%, rgba(45, 212, 191, 0.22) 35%, transparent 68%),
+    radial-gradient(ellipse 50% 80% at 92% 40%, rgba(153, 246, 228, 0.28) 0%, transparent 55%),
+    radial-gradient(ellipse 70% 60% at 45% 30%, rgba(45, 212, 191, 0.18) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 50% at 60% 85%, rgba(15, 23, 42, 0.28) 0%, transparent 55%),
+    linear-gradient(
+      105deg,
+      #0b3d3a 0%,
+      #115e59 22%,
+      #0f766e 48%,
+      #134e4a 72%,
+      #0f3f3c 100%
+    );
+  box-shadow:
+    0 16px 36px rgba(15, 118, 110, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.hero-glow {
+  position: absolute;
+  width: 320px;
+  height: 320px;
   border-radius: 999px;
-  background: #10b981;
+  inset-inline-end: -70px;
+  top: 40%;
+  transform: translateY(-50%);
+  background:
+    radial-gradient(circle, rgba(165, 243, 252, 0.65) 0%, rgba(34, 211, 238, 0.28) 32%, transparent 68%);
+  filter: blur(8px);
+  pointer-events: none;
+}
+
+.hero-mist {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 40% 35% at 25% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 70%),
+    radial-gradient(ellipse 35% 40% at 70% 75%, rgba(204, 251, 241, 0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 50% 45% at 50% 50%, rgba(15, 118, 110, 0.35) 0%, transparent 75%);
+  pointer-events: none;
+}
+
+.hero-body,
+.hero-bot {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  min-width: 0;
+  max-width: 100%;
+  padding-top: 0;
+}
+
+.hero-greet {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.greet-text {
+  min-width: 0;
+}
+
+.hero-avatar {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border-radius: 999px;
+  flex-shrink: 0;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
+}
+
+.hero-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 999px;
+  border: 3px solid rgba(255, 255, 255, 0.65);
+  background: rgba(255, 255, 255, 0.22);
+  box-sizing: border-box;
+}
+
+.online {
+  position: absolute;
+  bottom: 3px;
+  inset-inline-start: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #22c55e;
   border: 2px solid #fff;
-  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
+  z-index: 1;
+}
+
+.greet-text h1 {
+  margin: 0;
+  font-size: clamp(1.35rem, 2vw, 1.75rem);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: #fff;
+}
+
+.greet-text p {
+  margin: 0.25rem 0 0;
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.hero-chips {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.4rem;
+  max-width: min(580px, 100%);
+  min-width: 0;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+  padding: 0.4rem 0.5rem;
+  border-radius: var(--radius);
+  background: #fff;
+  color: #0f172a;
+  text-decoration: none;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
+}
+
+.chip-text {
+  display: grid;
+  gap: 0.04rem;
+  min-width: 0;
+}
+
+.chip-text strong {
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip-text small {
+  font-size: 0.6rem;
+  color: #64748b;
+  font-weight: 500;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip-ico {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.chip-urgent .chip-ico {
+  background: #fee2e2;
+  color: #ef4444;
+}
+
+.chip-warning .chip-ico {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.chip-success .chip-ico,
+.chip-info .chip-ico {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.hero-ask-wrap {
+  display: grid;
+  gap: 0.45rem;
+  max-width: min(520px, 100%);
+  width: 100%;
+  min-width: 0;
+}
+
+.hero-ask {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  background: #fff;
+  color: #0f172a;
+  border-radius: 999px;
+  padding: 0.45rem 0.45rem 0.45rem 0.9rem;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
+}
+
+.ask-ico {
+  color: #14b8a6;
+  flex-shrink: 0;
+}
+
+.hero-ask input {
+  border: 0;
+  background: transparent;
+  flex: 1;
+  outline: none;
+  font-size: 0.9rem;
+  min-width: 0;
+}
+
+.hero-ask input::placeholder {
+  color: #94a3b8;
+}
+
+.hero-ask kbd {
+  font-size: 0.68rem;
+  color: #94a3b8;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  padding: 0.14rem 0.38rem;
+  flex-shrink: 0;
+}
+
+.ask-send {
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.ask-send:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.hero-ask-status {
+  margin: 0;
+  padding: 0.55rem 0.85rem;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.16);
+  color: #fff;
+  font-size: 0.82rem;
+  line-height: 1.7;
+  max-height: 7.5rem;
+  overflow: auto;
+}
+
+.hero-ask-status.err {
+  background: rgba(185, 28, 28, 0.28);
+}
+
+.hero-bot {
+  position: relative;
+  z-index: 1;
+  /* در RTL ستون ربات سمت چپ است؛ end = لبه بیرونی چپ */
+  justify-self: end;
+  align-self: center;
+  margin-inline-start: 0;
+  margin-inline-end: 0.35rem;
+  overflow: visible;
+}
+
+@media (max-width: 900px) {
+  .hero {
+    grid-template-columns: minmax(0, 1fr) 160px;
+  }
+
+  .hero-chips {
+    grid-template-columns: minmax(0, 1fr);
+    max-width: min(420px, 100%);
+  }
+}
+
+@media (max-width: 700px) {
+  .hero {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: auto;
+    padding-inline: 0.85rem;
+    overflow: hidden;
+  }
+
+  .hero-bot {
+    display: none;
+  }
+
+  .hero-ask kbd {
+    display: none;
+  }
 }
 </style>

apps/web/src/components/dashboard/HomeKpiRow.vue

@@ -1,97 +1,125 @@
 <script setup lang="ts">
-import {
-  CalendarOutlined,
-  CheckCircleOutlined,
-  FundOutlined,
-  RiseOutlined,
-  TeamOutlined,
-  WarningOutlined,
-} from '@ant-design/icons-vue';
-import type { Component } from 'vue';
+import UiIcon from '@/components/UiIcon.vue';
 import type { HomeDashboardKpiDto } from '@mento/shared';
-import { currencySuffix } from '@/lib/money';
 
-const props = defineProps<{
+defineProps<{
   kpis: HomeDashboardKpiDto[];
   currency: string;
   formatValue: (key: string, value: number) => string;
   formatChange: (value: number | null) => string;
 }>();
 
-function salesAmount(value: number) {
-  return new Intl.NumberFormat('fa-IR').format(value);
-}
-
-function salesUnit() {
-  return currencySuffix(props.currency);
-}
-
-const icons: Record<string, Component> = {
-  sales: FundOutlined,
-  customers: TeamOutlined,
-  'open-deals': CalendarOutlined,
-  followups: CheckCircleOutlined,
-  'win-rate': RiseOutlined,
-  overdue: WarningOutlined,
+const icons: Record<string, 'calendar' | 'users' | 'briefcase' | 'check'> = {
+  sales: 'calendar',
+  customers: 'users',
+  'open-deals': 'briefcase',
+  followups: 'check',
 };
 
-function pillClass(kpi: HomeDashboardKpiDto) {
-  if (kpi.key === 'overdue') return 'bg-rose-100/70 text-rose-600';
-  if (kpi.changePercent == null) return 'text-slate-400';
-  return kpi.changePercent < 0 ? 'bg-rose-50 text-rose-600' : 'bg-emerald-50 text-emerald-600';
-}
+const iconTones: Record<string, string> = {
+  sales: '#14b8a6',
+  customers: '#38bdf8',
+  'open-deals': '#fb923c',
+  followups: '#a78bfa',
+};
 </script>
 
 <template>
-  <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4">
-    <div
-      v-for="kpi in kpis"
-      :key="kpi.key"
-      class="rounded-2xl p-4 border shadow-sm flex flex-col justify-between transition duration-200 hover:-translate-y-0.5"
-      :class="
-        kpi.key === 'overdue'
-          ? 'border-rose-200/70 bg-gradient-to-b from-white to-rose-50/20'
-          : 'bg-white border-slate-200/80'
-      "
-    >
-      <div class="flex items-center justify-between mb-3">
-        <span class="text-xs font-semibold" :class="kpi.key === 'overdue' ? 'text-rose-700' : 'text-slate-500'">
-          {{ kpi.label }}
-        </span>
+  <div class="kpi-row">
+    <article v-for="kpi in kpis" :key="kpi.key" class="kpi-card">
+      <div class="kpi-icon" :style="{ color: iconTones[kpi.key] ?? '#14b8a6' }">
+        <UiIcon :name="icons[kpi.key] ?? 'chart'" :size="20" />
+      </div>
+      <div class="kpi-text">
+        <p class="kpi-label">{{ kpi.label }}</p>
+        <strong class="kpi-value">{{ formatValue(kpi.key, kpi.value) }}</strong>
         <span
-          class="w-8 h-8 rounded-xl flex items-center justify-center"
-          :class="kpi.key === 'overdue' ? 'bg-rose-100/80 text-rose-600' : 'bg-emerald-50 text-emerald-600'"
+          v-if="kpi.changePercent != null"
+          class="kpi-change"
+          :class="{ down: kpi.changePercent < 0 }"
         >
-          <component :is="icons[kpi.key] ?? FundOutlined" />
+          <span class="arrow">{{ kpi.changePercent >= 0 ? '↑' : '↓' }}</span>
+          {{ formatChange(kpi.changePercent) }} {{ kpi.changeLabel }}
         </span>
       </div>
-      <div>
-        <div
-          class="!font-bold !text-[24px] !leading-8 tracking-tight"
-          :class="kpi.key === 'overdue' ? 'text-rose-600' : 'text-slate-800'"
-        >
-          <template v-if="kpi.key === 'sales'">
-            <span>{{ salesAmount(kpi.value) }}</span><span class="text-[16px] leading-6 font-semibold ms-1.5">{{ salesUnit() }}</span>
-          </template>
-          <template v-else>{{ formatValue(kpi.key, kpi.value) }}</template>
-        </div>
-        <div
-          v-if="kpi.changePercent != null"
-          class="mt-2.5 inline-flex text-[11px] font-semibold px-2 py-0.5 rounded-md"
-          :class="pillClass(kpi)"
-        >
-          {{ formatChange(kpi.changePercent) }} {{ kpi.changeLabel }}
-        </div>
-        <div
-          v-else-if="kpi.key === 'overdue'"
-          class="mt-2.5 inline-flex text-[11px] font-semibold px-2 py-0.5 rounded-md bg-rose-100/70 text-rose-600"
-        >
-          نیازمند اقدام فوری
-        </div>
-        <div v-else class="mt-2.5 text-[11px] font-medium text-slate-400">
-          {{ kpi.changeLabel || '—' }}
-        </div>
-      </div>
-    </div>
-  </section>
+    </article>
+  </div>
 </template>
+
+<style scoped>
+.kpi-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.9rem;
+}
+
+.kpi-card {
+  display: flex;
+  gap: 0.85rem;
+  align-items: flex-start;
+  background: #fff;
+  border-radius: var(--radius);
+  padding: 1.1rem 1.15rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
+}
+
+.kpi-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius);
+  background: #f8fafc;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.kpi-label {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.84rem;
+}
+
+.kpi-value {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 1.18rem;
+  color: #0f172a;
+  letter-spacing: -0.02em;
+}
+
+.kpi-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  margin-top: 0.45rem;
+  padding: 0.18rem 0.5rem;
+  border-radius: 999px;
+  background: #dcfce7;
+  color: #16a34a;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.arrow {
+  font-size: 0.82rem;
+  line-height: 1;
+}
+
+.kpi-change.down {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+@media (max-width: 1200px) {
+  .kpi-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 700px) {
+  .kpi-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

apps/web/src/components/dashboard/HomeLostReasonsChart.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { Empty as AEmpty } from 'ant-design-vue';
-import { toFaDigits } from '@/lib/jalali';
-import type { HomeDashboardSliceDto } from '@mento/shared';
-import UiChart, { CHART_PALETTE, type UiChartOption } from '@/components/ui/UiChart.vue';
-
-const props = defineProps<{
-  reasons: HomeDashboardSliceDto[];
-  formatAmount: (value: number) => string;
-}>();
-
-const rows = computed(() => props.reasons);
-const hasData = computed(() => rows.value.some((r) => r.count > 0));
-const total = computed(() => rows.value.reduce((sum, row) => sum + row.count, 0));
-
-function share(count: number) {
-  if (!total.value) return 0;
-  return Math.round((count / total.value) * 100);
-}
-
-const option = computed<UiChartOption>(() => ({
-  animationDuration: 400,
-  color: CHART_PALETTE,
-  tooltip: {
-    trigger: 'item',
-    textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
-    formatter: (p) => {
-      const item = Array.isArray(p) ? p[0] : p;
-      const row = rows.value.find((r) => r.label === item.name);
-      const amount =
-        row?.amount != null ? `<br/>${props.formatAmount(row.amount)}` : '';
-      return `${item.name}<br/>${toFaDigits(Number(item.value ?? 0))} — ${toFaDigits(item.percent ?? 0)}٪${amount}`;
-    },
-  },
-  legend: { show: false },
-  series: [
-    {
-      type: 'pie',
-      radius: ['58%', '78%'],
-      center: ['50%', '50%'],
-      itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
-      label: { show: false },
-      data: rows.value.map((r) => ({ name: r.label, value: r.count })),
-    },
-  ],
-}));
-</script>
-
-<template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full flex flex-col">
-    <div class="flex items-center justify-between mb-2">
-      <h3 class="font-bold text-slate-800 text-base">دلایل باخت</h3>
-      <span v-if="hasData" class="text-xs text-slate-400">۱۲ ماه اخیر</span>
-    </div>
-    <a-empty v-if="!hasData" description="معاملهٔ باخته‌ای ثبت نشده" />
-    <template v-else>
-      <div class="relative w-36 h-36 mx-auto">
-        <UiChart :option="option" height="144px" />
-        <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
-          <span class="text-2xl font-black text-slate-800">{{ toFaDigits(total) }}</span>
-          <span class="text-[11px] text-slate-400">معامله باخته</span>
-        </div>
-      </div>
-      <div class="grid grid-cols-2 gap-2 mt-3">
-        <div
-          v-for="(item, index) in rows"
-          :key="item.label"
-          class="rounded-xl border border-slate-200/70 bg-slate-50 px-2.5 py-2"
-        >
-          <div class="flex items-center gap-1.5">
-            <span
-              class="w-2 h-2 rounded-full shrink-0"
-              :style="{ background: CHART_PALETTE[index % CHART_PALETTE.length] }"
-            ></span>
-            <span class="text-[11px] text-slate-600 truncate">{{ item.label }}</span>
-          </div>
-          <div class="text-sm font-black text-slate-800 mt-1">{{ toFaDigits(share(item.count)) }}٪</div>
-        </div>
-      </div>
-    </template>
-  </section>
-</template>

apps/web/src/components/dashboard/HomeMiniPipeline.vue

@@ -1,17 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
-import {
-  FundOutlined,
-  LeftOutlined,
-  PlusOutlined,
-} from '@ant-design/icons-vue';
 import { toFaDigits } from '@/lib/jalali';
 import type { PipelineBoardDto } from '@mento/shared';
-import {
-  PIPELINE_ACCENT,
-  type PipelineAccent,
-} from '@/lib/pipeline-board';
 import HomePanelEmpty from '@/components/dashboard/HomePanelEmpty.vue';
 
 const props = defineProps<{
@@ -19,100 +10,41 @@ const props = defineProps<{
   formatMoney: (amount: number, currency: string) => string;
 }>();
 
-const ACCENT_CYCLE: PipelineAccent[] = ['green', 'blue', 'orange'];
+type Card = { id: string; name: string; amount: string; when: string };
+type Col = { id: string; name: string; count: number; cards: Card[] };
 
-type Card = {
-  id: string;
-  name: string;
-  initial: string;
-  amount: string;
-  when: string;
-  isToday: boolean;
-};
-
-type Col = {
-  id: string;
-  name: string;
-  count: number;
-  totalLabel: string;
-  accent: PipelineAccent;
-  cards: Card[];
-};
-
-function relativeWhen(iso: string | null | undefined): { label: string; isToday: boolean } {
-  if (!iso) return { label: '', isToday: false };
+function relativeWhen(iso: string | null | undefined) {
+  if (!iso) return '';
   const diff = Date.now() - new Date(iso).getTime();
   const days = Math.floor(diff / 86400000);
-  if (days <= 0) return { label: 'امروز', isToday: true };
-  if (days === 1) return { label: 'دیروز', isToday: false };
-  return { label: `${toFaDigits(days)} روز پیش`, isToday: false };
-}
-
-function initialOf(name: string | undefined | null) {
-  const t = (name ?? '').trim();
-  return t ? t.slice(0, 1) : '؟';
+  if (days <= 0) return 'امروز';
+  if (days === 1) return 'دیروز';
+  return `${toFaDigits(days)} روز پیش`;
 }
 
 const cols = computed<Col[]>(() => {
   const stages = props.board?.stages ?? [];
   const hasDeals = stages.some((s) => s.deals.length);
   if (!hasDeals) return [];
-
-  return stages.slice(0, 3).map((stage, index) => {
-    const accent = ACCENT_CYCLE[index % ACCENT_CYCLE.length]!;
-    const currency = stage.deals[0]?.currency ?? 'IRR';
-    return {
-      id: stage.id,
-      name: stage.name,
-      count: stage.deals.length,
-      totalLabel:
-        stage.totalAmount > 0 ? props.formatMoney(stage.totalAmount, currency) : '',
-      accent,
-      cards: stage.deals.slice(0, 2).map((deal) => {
-        const name = deal.company?.name || deal.person?.fullName || deal.title;
-        const when = relativeWhen(deal.updatedAt || deal.createdAt);
-        return {
-          id: deal.id,
-          name,
-          initial: initialOf(name),
-          amount: deal.amount ? props.formatMoney(deal.amount, deal.currency) : '',
-          when: when.label,
-          isToday: when.isToday,
-        };
-      }),
-    };
-  });
+  return stages.slice(0, 3).map((stage) => ({
+    id: stage.id,
+    name: stage.name,
+    count: stage.deals.length,
+    cards: stage.deals.slice(0, 2).map((deal) => ({
+      id: deal.id,
+      name: deal.company?.name || deal.person?.fullName || deal.title,
+      amount: deal.amount ? props.formatMoney(deal.amount, deal.currency) : '',
+      when: relativeWhen(deal.updatedAt || deal.createdAt),
+    })),
+  }));
 });
-
-function accentOf(key: PipelineAccent) {
-  return PIPELINE_ACCENT[key];
-}
 </script>
 
 <template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-5 sm:p-6 shadow-sm">
-    <header class="flex items-center justify-between gap-3 mb-5">
-      <div class="flex items-center gap-2.5 min-w-0">
-        <div
-          class="w-9 h-9 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0"
-          aria-hidden="true"
-        >
-          <FundOutlined />
-        </div>
-        <div class="min-w-0">
-          <h3 class="font-bold text-slate-800 text-base m-0">جریان فروش</h3>
-          <p class="text-xs text-slate-400 m-0 mt-0.5">
-            نمای سریع معاملات در مراحل کلیدی
-          </p>
-        </div>
-      </div>
-      <RouterLink
-        :to="{ name: 'pipeline' }"
-        class="shrink-0 inline-flex items-center gap-1 text-xs font-bold text-emerald-700 bg-emerald-50 hover:bg-emerald-100 px-3 py-1.5 rounded-xl transition-colors"
-      >
-        <span>نمایش همه</span>
-        <LeftOutlined />
-      </RouterLink>
+  <article class="panel">
+    <header class="panel-head">
+      <h2>جریان فروش</h2>
+      <RouterLink :to="{ name: 'pipeline' }">نمایش همه</RouterLink>
     </header>
 
     <HomePanelEmpty
@@ -122,85 +54,132 @@ function accentOf(key: PipelineAccent) {
       action-label="معامله جدید"
       :action-to="{ name: 'deal-new' }"
     />
-
-    <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5">
-      <article
-        v-for="col in cols"
-        :key="col.id"
-        class="rounded-2xl border border-slate-200/70 bg-slate-50/90 p-4 flex flex-col gap-3 min-w-0"
-      >
-        <div class="flex items-start justify-between gap-2 pb-2 border-b border-slate-200/80">
-          <div class="min-w-0">
-            <div class="flex items-center gap-2 min-w-0">
-              <span
-                class="w-2.5 h-2.5 rounded-full shrink-0"
-                :style="{ background: accentOf(col.accent).solid }"
-                aria-hidden="true"
-              />
-              <h4 class="font-bold text-sm text-slate-700 m-0 truncate">{{ col.name }}</h4>
-            </div>
-            <p v-if="col.totalLabel" class="text-[11px] text-slate-400 m-0 mt-1 truncate">
-              مجموع {{ col.totalLabel }}
-            </p>
-          </div>
-          <span
-            class="shrink-0 bg-white border border-slate-200 text-slate-700 text-xs font-bold px-2.5 py-0.5 rounded-full"
-          >
-            {{ toFaDigits(col.count) }}
-          </span>
-        </div>
-
-        <div class="flex flex-col gap-2.5 flex-1">
+    <div v-else class="mini-pipeline">
+      <div v-for="col in cols" :key="col.id" class="pipe-col">
+        <header>
+          <strong>{{ col.name }} ({{ toFaDigits(col.count) }})</strong>
+        </header>
+        <div class="pipe-cards">
           <RouterLink
-            v-for="item in col.cards"
-            :key="item.id"
-            :to="{ name: 'deal-detail', params: { id: item.id } }"
-            class="group bg-white p-3 rounded-xl border border-slate-200/80 shadow-sm hover:border-emerald-400 hover:shadow transition-all flex items-center gap-3 min-w-0"
+            v-for="card in col.cards"
+            :key="card.id"
+            class="pipe-card"
+            :to="{ name: 'deal-detail', params: { id: card.id } }"
           >
-            <span
-              class="w-9 h-9 rounded-full font-bold text-xs flex items-center justify-center shrink-0 border"
-              :style="{
-                background: accentOf(col.accent).soft,
-                color: accentOf(col.accent).text,
-                borderColor: accentOf(col.accent).border,
-              }"
-            >
-              {{ item.initial }}
-            </span>
-            <div class="min-w-0 flex-1">
-              <div class="font-bold text-sm text-slate-800 truncate">{{ item.name }}</div>
-              <div class="text-xs text-slate-500 mt-0.5 truncate">
-                <template v-if="item.amount">
-                  <span class="font-medium">{{ item.amount }}</span>
-                  <span v-if="item.when" class="text-slate-300 mx-1">·</span>
-                </template>
-                <span
-                  v-if="item.when"
-                  :class="item.isToday ? 'text-emerald-600 font-semibold' : 'text-slate-400'"
-                >
-                  {{ item.when }}
-                </span>
-              </div>
+            <span class="deal-mark">{{ card.name.slice(0, 1) }}</span>
+            <div>
+              <strong>{{ card.name }}</strong>
+              <span v-if="card.amount">{{ card.amount }}</span>
+              <em>{{ card.when }}</em>
             </div>
           </RouterLink>
-
-          <div
-            v-if="!col.cards.length"
-            class="border border-dashed border-slate-200 rounded-xl px-3 py-5 text-center text-xs text-slate-400"
-          >
-            معامله‌ای در این مرحله نیست
-          </div>
-
-          <RouterLink
-            v-else-if="col.cards.length < 2"
-            :to="{ name: 'deal-new', query: { stageId: col.id } }"
-            class="mt-auto border border-dashed border-slate-200 hover:border-emerald-300 hover:bg-white rounded-xl px-3 py-3 text-center text-xs text-slate-400 hover:text-emerald-700 transition-colors inline-flex items-center justify-center gap-1"
-          >
-            <PlusOutlined />
-            افزودن معامله
-          </RouterLink>
         </div>
-      </article>
+      </div>
     </div>
-  </section>
+  </article>
 </template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: var(--radius);
+  padding: 1rem 1.05rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+a {
+  color: #14b8a6;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.mini-pipeline {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(120px, 1fr));
+  gap: 0.65rem;
+  overflow-x: auto;
+}
+
+.pipe-col > header {
+  margin-bottom: 0.5rem;
+  font-size: 0.78rem;
+  color: #64748b;
+}
+
+.pipe-cards {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.pipe-card {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.6rem;
+  border-radius: var(--radius);
+  background: #f8fafc;
+  border: 1px solid #eef2f7;
+  color: inherit;
+  font-size: 0.78rem;
+}
+
+.pipe-card div {
+  display: grid;
+  gap: 0.1rem;
+  min-width: 0;
+}
+
+.pipe-card strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.78rem;
+}
+
+.pipe-card span {
+  color: #94a3b8;
+  font-size: 0.68rem;
+}
+
+.pipe-card em {
+  color: #cbd5e1;
+  font-size: 0.66rem;
+  font-style: normal;
+}
+
+.deal-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  background: #ecfdf8;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+@media (max-width: 700px) {
+  .mini-pipeline {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

apps/web/src/components/dashboard/HomePanelEmpty.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
-import { Button as AButton, Empty as AEmpty, Typography } from 'ant-design-vue';
 
 defineProps<{
   title: string;
@@ -9,19 +8,70 @@ defineProps<{
   actionLabel: string;
   actionTo: RouteLocationRaw;
 }>();
-
-const { Text: ATypographyText } = Typography;
 </script>
 
 <template>
-  <a-empty :description="null">
-    <template #description>
-      <a-typography-text strong>{{ title }}</a-typography-text>
-      <br />
-      <a-typography-text type="secondary">{{ description }}</a-typography-text>
-    </template>
-    <RouterLink :to="actionTo">
-      <a-button type="primary">{{ actionLabel }}</a-button>
-    </RouterLink>
-  </a-empty>
+  <div 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>
+    <strong>{{ title }}</strong>
+    <p>{{ description }}</p>
+    <RouterLink class="cta" :to="actionTo">{{ actionLabel }}</RouterLink>
+  </div>
 </template>
+
+<style scoped>
+.empty-card {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  text-align: center;
+  gap: 0.45rem;
+  padding: 0.4rem 0.2rem 0.15rem;
+}
+
+.art svg {
+  width: 92px;
+  height: auto;
+  display: block;
+}
+
+strong {
+  font-size: 0.88rem;
+  color: #0f172a;
+}
+
+p {
+  margin: 0;
+  max-width: 16rem;
+  color: #94a3b8;
+  font-size: 0.75rem;
+  line-height: 1.7;
+}
+
+.cta {
+  margin-top: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 0 0.9rem;
+  border-radius: var(--radius);
+  background: #14b8a6;
+  color: #fff;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-decoration: none;
+}
+</style>

apps/web/src/components/dashboard/HomeRecentActivities.vue

@@ -1,19 +1,7 @@
 <script setup lang="ts">
-import { computed, type Component } from 'vue';
+import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
-import {
-  CalendarOutlined,
-  CheckOutlined,
-  MailOutlined,
-  PhoneOutlined,
-} from '@ant-design/icons-vue';
-import {
-  Flex as AFlex,
-  Tag as ATag,
-  Timeline as ATimeline,
-  Typography,
-  theme,
-} from 'ant-design-vue';
+import UiIcon from '@/components/UiIcon.vue';
 import HomePanelEmpty from '@/components/dashboard/HomePanelEmpty.vue';
 import type { ActivityDto } from '@mento/shared';
 
@@ -22,21 +10,16 @@ const props = defineProps<{
   formatWhen: (value: string | null) => string;
 }>();
 
-const { token } = theme.useToken();
-const { Text: ATypographyText } = Typography;
-const ATimelineItem = ATimeline.Item;
-
 type Row = {
   id: string;
   title: string;
   when: string;
-  typeLabel: string;
   type: string;
   tone: 'done' | 'pending' | 'held' | 'late';
   label: string;
 };
 
-const typeLabelMap: Record<string, string> = {
+const typeLabel: Record<string, string> = {
   call: 'تماس',
   meeting: 'جلسه',
   task: 'وظیفه',
@@ -48,50 +31,23 @@ function activityStatus(act: ActivityDto) {
   if (act.dueAt && new Date(act.dueAt) < new Date()) {
     return { label: 'عقب‌افتاده', tone: 'late' as const };
   }
-  return { label: 'در انتظار', tone: 'pending' as const };
+  return { label: 'در انتظار پاسخ', tone: 'pending' as const };
 }
 
-function activityIcon(type: string): Component {
-  if (type === 'call') return PhoneOutlined;
-  if (type === 'meeting') return CalendarOutlined;
-  if (type === 'task') return CheckOutlined;
-  return MailOutlined;
-}
-
-function tagColor(tone: Row['tone']) {
-  if (tone === 'late') return 'error';
-  if (tone === 'done' || tone === 'held') return 'success';
-  return 'processing';
-}
-
-function timelineColor(tone: Row['tone']) {
-  if (tone === 'late') return 'red';
-  if (tone === 'done' || tone === 'held') return 'green';
-  return 'blue';
-}
-
-function typeBg(type: string) {
-  if (type === 'call') return token.value.colorInfoBg;
-  if (type === 'meeting') return token.value.colorWarningBg;
-  if (type === 'task') return token.value.colorSuccessBg;
-  return token.value.colorFillAlter;
-}
-
-function typeFg(type: string) {
-  if (type === 'call') return token.value.colorInfo;
-  if (type === 'meeting') return token.value.colorWarning;
-  if (type === 'task') return token.value.colorSuccess;
-  return token.value.colorTextSecondary;
+function activityIcon(type: string) {
+  if (type === 'call') return 'phone' as const;
+  if (type === 'meeting') return 'calendar' as const;
+  if (type === 'task') return 'check' as const;
+  return 'mail' as const;
 }
 
 const rows = computed<Row[]>(() =>
-  props.activities.slice(0, 5).map((act) => {
+  props.activities.slice(0, 3).map((act) => {
     const st = activityStatus(act);
     return {
       id: act.id,
       title: act.title,
-      when: props.formatWhen(act.dueAt || act.createdAt),
-      typeLabel: typeLabelMap[act.type] ?? act.type,
+      when: `${typeLabel[act.type] ?? act.type} · ${props.formatWhen(act.dueAt || act.createdAt)}`,
       type: act.type,
       tone: st.tone,
       label: st.label,
@@ -101,16 +57,11 @@ const rows = computed<Row[]>(() =>
 </script>
 
 <template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full w-full">
-    <div class="flex items-center justify-between mb-4">
-      <div class="flex items-center gap-2">
-        <h3 class="font-bold text-slate-800 text-base">فعالیت‌های اخیر</h3>
-        <a-tag v-if="rows.length" :bordered="false">{{ rows.length }}</a-tag>
-      </div>
-      <RouterLink :to="{ name: 'activities' }" class="text-sm font-bold text-emerald-600">
-        مشاهده همه
-      </RouterLink>
-    </div>
+  <article class="panel">
+    <header class="panel-head">
+      <h2>فعالیت‌های اخیر</h2>
+      <RouterLink :to="{ name: 'activities' }">مشاهده همه</RouterLink>
+    </header>
 
     <HomePanelEmpty
       v-if="!rows.length"
@@ -119,44 +70,117 @@ const rows = computed<Row[]>(() =>
       action-label="فعالیت جدید"
       :action-to="{ name: 'activity-new' }"
     />
-    <a-timeline v-else>
-      <a-timeline-item v-for="item in rows" :key="item.id" :color="timelineColor(item.tone)">
-        <a-flex
-          align="flex-start"
-          justify="space-between"
-          :gap="token.marginSM"
-          :style="{
-            padding: `${token.paddingXS}px ${token.paddingSM}px`,
-            borderRadius: `${token.borderRadius}px`,
-            background: token.colorFillAlter,
-            minWidth: 0,
-          }"
-        >
-          <a-flex :gap="token.marginSM" :style="{ minWidth: 0, flex: 1 }">
-            <a-flex
-              align="center"
-              justify="center"
-              :style="{
-                width: '32px',
-                height: '32px',
-                borderRadius: `${token.borderRadius}px`,
-                background: typeBg(item.type),
-                color: typeFg(item.type),
-                flexShrink: 0,
-              }"
-            >
-              <component :is="activityIcon(item.type)" />
-            </a-flex>
-            <a-flex vertical :style="{ minWidth: 0, flex: 1 }">
-              <a-typography-text strong ellipsis>{{ item.title }}</a-typography-text>
-              <a-typography-text type="secondary" ellipsis>
-                {{ item.typeLabel }} · {{ item.when }}
-              </a-typography-text>
-            </a-flex>
-          </a-flex>
-          <a-tag :color="tagColor(item.tone)" style="flex-shrink: 0">{{ item.label }}</a-tag>
-        </a-flex>
-      </a-timeline-item>
-    </a-timeline>
-  </section>
+    <ul v-else class="activity-list">
+      <li v-for="act in rows" :key="act.id">
+        <span class="act-icon">
+          <UiIcon :name="activityIcon(act.type)" :size="16" />
+        </span>
+        <div class="act-body">
+          <strong>{{ act.title }}</strong>
+          <span>{{ act.when }}</span>
+        </div>
+        <span class="status-pill" :class="act.tone">{{ act.label }}</span>
+      </li>
+    </ul>
+  </article>
 </template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: var(--radius);
+  padding: 1rem 1.05rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.85rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+a {
+  color: #14b8a6;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.activity-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.7rem;
+}
+
+.activity-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.act-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius);
+  background: #ecfdf8;
+  color: #14b8a6;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.act-body {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.12rem;
+}
+
+.act-body strong {
+  font-size: 0.84rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.act-body span {
+  color: #94a3b8;
+  font-size: 0.72rem;
+}
+
+.status-pill {
+  font-size: 0.68rem;
+  font-weight: 700;
+  padding: 0.22rem 0.5rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.status-pill.done,
+.status-pill.held {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.status-pill.pending {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.status-pill.late {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+</style>

apps/web/src/components/dashboard/HomeSalesTrend.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-import { Segmented as ASegmented } from 'ant-design-vue';
+import { computed } from 'vue';
 import type { HomeDashboardTrendPointDto } from '@mento/shared';
 import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
 
@@ -11,57 +10,26 @@ const props = defineProps<{
   formatAmount: (value: number) => string;
 }>();
 
-type PeriodMonths = 1 | 3 | 6 | 12;
-
-const period = ref<PeriodMonths>(6);
-
-const periodOptions = [
-  { value: 1, label: 'این ماه' },
-  { value: 3, label: '۳ ماه' },
-  { value: 6, label: '۶ ماه' },
-  { value: 12, label: '۱۲ ماه' },
-];
-
-const filteredTrend = computed(() => {
-  const all = props.trend;
-  if (!all.length) return [];
-  const n = period.value;
-  return all.slice(-Math.min(n, all.length));
-});
-
-const hasTrend = computed(() => filteredTrend.value.some((p) => p.amount > 0));
-
-/** تغییر آخرین ماه نسبت به ماه قبلِ همان بازه */
-const periodChange = computed(() => {
-  const rows = filteredTrend.value;
-  if (rows.length < 2) return props.changePercent;
-  const last = rows[rows.length - 1]!.amount;
-  const prev = rows[rows.length - 2]!.amount;
-  if (prev === 0) return last === 0 ? 0 : 100;
-  return Math.round(((last - prev) / Math.abs(prev)) * 1000) / 10;
-});
-
-const changeHint = computed(() => {
-  if (period.value === 1) return 'نسبت به ماه قبل';
-  return 'آخرین ماه نسبت به ماه قبل';
-});
+const trend = computed(() => props.trend);
+const hasTrend = computed(() => trend.value.some((p) => p.amount > 0));
+const change = computed(() => props.changePercent);
 
 const option = computed<UiChartOption>(() => ({
-  animationDuration: 450,
-  grid: { top: 36, right: 12, bottom: 28, left: 12, containLabel: true },
+  animationDuration: 400,
+  grid: { top: 28, right: 8, bottom: 28, left: 8, containLabel: true },
   tooltip: {
     trigger: 'axis',
     textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
     formatter: (params) => {
       const row = Array.isArray(params) ? params[0] : params;
-      const point = filteredTrend.value[row.dataIndex ?? 0];
+      const point = trend.value[row.dataIndex ?? 0];
       if (!point) return '';
-      return `${point.monthLabel}<br/><strong>${props.formatAmount(point.amount)}</strong>`;
+      return `${point.monthLabel}<br/>${props.formatAmount(point.amount)}`;
     },
   },
   xAxis: {
     type: 'category',
-    data: filteredTrend.value.map((p) => p.monthLabel),
+    data: trend.value.map((p) => p.monthLabel),
     boundaryGap: false,
     axisLine: { show: false },
     axisTick: { show: false },
@@ -75,19 +43,18 @@ const option = computed<UiChartOption>(() => ({
     type: 'value',
     min: 0,
     ...(hasTrend.value ? {} : { max: 1 }),
-    splitLine: { lineStyle: { color: '#e5e7eb', type: 'dashed' } },
+    splitLine: { lineStyle: { color: '#eef2f7' } },
     axisLabel: { show: false },
   },
   series: [
     {
       type: 'line',
-      name: 'فروش',
-      data: filteredTrend.value.map((p) => p.amount),
-      smooth: 0.4,
+      data: trend.value.map((p) => p.amount),
+      smooth: 0.35,
       symbol: 'circle',
-      symbolSize: period.value === 1 ? 10 : 8,
-      itemStyle: { color: '#10b981', borderColor: '#fff', borderWidth: 2 },
-      lineStyle: { color: '#10b981', width: 3 },
+      symbolSize: 8,
+      itemStyle: { color: '#14b8a6', borderColor: '#fff', borderWidth: 2 },
+      lineStyle: { color: '#14b8a6', width: 3 },
       areaStyle: {
         color: {
           type: 'linear',
@@ -96,8 +63,8 @@ const option = computed<UiChartOption>(() => ({
           x2: 0,
           y2: 1,
           colorStops: [
-            { offset: 0, color: 'rgba(16, 185, 129, 0.28)' },
-            { offset: 1, color: 'rgba(16, 185, 129, 0)' },
+            { offset: 0, color: 'rgba(20, 184, 166, 0.28)' },
+            { offset: 1, color: 'rgba(20, 184, 166, 0)' },
           ],
         },
       },
@@ -107,22 +74,56 @@ const option = computed<UiChartOption>(() => ({
 </script>
 
 <template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full flex flex-col">
-    <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
-      <div>
-        <h3 class="font-bold text-slate-800 text-base">روند فروش</h3>
-        <span
-          v-if="hasTrend && periodChange != null"
-          class="mt-1 inline-flex text-xs font-bold px-2 py-0.5 rounded-md"
-          :class="periodChange < 0 ? 'text-rose-600 bg-rose-50' : 'text-emerald-600 bg-emerald-50'"
-        >
-          {{ formatChange(periodChange) }} {{ changeHint }}
-        </span>
-      </div>
-      <a-segmented v-model:value="period" :options="periodOptions" />
-    </div>
-    <div class="h-56">
-      <UiChart :option="option" height="224px" />
-    </div>
-  </section>
+  <article class="panel">
+    <header class="panel-head">
+      <h2>روند فروش</h2>
+      <span v-if="hasTrend && change != null" class="mini-badge" :class="{ down: change < 0 }">
+        {{ formatChange(change) }} نسبت به ماه قبل
+      </span>
+    </header>
+    <UiChart :option="option" height="210px" />
+  </article>
 </template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: var(--radius);
+  padding: var(--pad-modal);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid var(--line);
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.35rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.95rem;
+  color: #0f172a;
+}
+
+.mini-badge {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: #16a34a;
+  background: #dcfce7;
+  border-radius: var(--radius);
+  padding: 0.18rem 0.5rem;
+  white-space: nowrap;
+}
+
+.mini-badge.down {
+  color: #dc2626;
+  background: #fee2e2;
+}
+</style>

apps/web/src/components/dashboard/HomeSourcesChart.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Empty as AEmpty } from 'ant-design-vue';
 import { toFaDigits } from '@/lib/jalali';
 import type { HomeDashboardSourceDto } from '@mento/shared';
-import UiChart, { CHART_PALETTE, type UiChartOption } from '@/components/ui/UiChart.vue';
+import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
 
 const props = defineProps<{
   sources: HomeDashboardSourceDto[];
 }>();
 
+const colors = ['#2563eb', '#14b8a6', '#22c55e', '#fb923c', '#94a3b8'];
+
 const rows = computed(() => props.sources);
 const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
 
 const option = computed<UiChartOption>(() => ({
   animationDuration: 400,
-  color: CHART_PALETTE,
+  color: colors,
   tooltip: {
     show: total.value > 0,
     trigger: 'item',
@@ -27,51 +28,147 @@ const option = computed<UiChartOption>(() => ({
   series: [
     {
       type: 'pie',
-      radius: ['55%', '78%'],
+      radius: ['58%', '82%'],
       center: ['50%', '50%'],
       silent: total.value === 0,
       avoidLabelOverlap: true,
-      itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
       label: { show: false },
       labelLine: { show: false },
       data:
         total.value > 0
           ? rows.value.map((s) => ({ name: s.label, value: s.count }))
-          : [{ name: '', value: 1, itemStyle: { color: '#e5e7eb' } }],
+          : [{ name: '', value: 1, itemStyle: { color: '#e2e8f0' } }],
     },
   ],
 }));
 </script>
 
 <template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full">
-    <div class="flex items-center justify-between mb-4">
-      <h3 class="font-bold text-slate-800 text-base">منابع ورود مشتریان</h3>
-      <span v-if="total" class="text-xs text-slate-400">۱۲ ماه اخیر</span>
-    </div>
-    <div class="flex flex-col sm:flex-row items-center gap-4">
-      <div class="w-full sm:w-[48%] sm:max-w-[220px] shrink-0">
-        <div class="relative w-full aspect-square">
-          <UiChart :option="option" height="100%" />
-          <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
-            <span class="text-2xl font-black text-slate-800">{{ toFaDigits(total) }}</span>
-            <span class="text-xs text-slate-400">مشتری</span>
-          </div>
-        </div>
-      </div>
-      <div class="w-full sm:flex-1 min-w-0">
-        <a-empty v-if="!total" description="منبعی ثبت نشده" />
-        <div v-else class="divide-y divide-slate-100">
-          <div v-for="(item, index) in rows" :key="item.label" class="flex items-center gap-2 py-2">
-            <span
-              class="w-2 h-2 rounded-full shrink-0"
-              :style="{ background: CHART_PALETTE[index % CHART_PALETTE.length] }"
-            ></span>
-            <span class="flex-1 text-sm text-slate-700 truncate">{{ item.label }}</span>
-            <span class="text-sm font-bold text-slate-800">{{ toFaDigits(item.percent) }}٪</span>
-          </div>
+  <article class="panel">
+    <header class="panel-head">
+      <h2>منابع مشتریان</h2>
+    </header>
+
+    <div class="donut-wrap">
+      <div class="donut-chart-box">
+        <UiChart :option="option" height="132px" />
+        <div class="donut-center">
+          <strong>{{ toFaDigits(total) }}</strong>
+          <span>مشتری</span>
         </div>
       </div>
+
+      <p v-if="!total" class="legend-empty">منبعی ثبت نشده</p>
+      <ul v-else class="donut-legend">
+        <li v-for="(row, i) in rows" :key="row.label">
+          <span class="dot" :style="{ background: colors[i % colors.length] }" />
+          <span class="lbl">{{ row.label }}</span>
+          <em>{{ toFaDigits(row.percent) }}٪</em>
+        </li>
+      </ul>
     </div>
-  </section>
+  </article>
 </template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: var(--radius);
+  padding: var(--pad-modal);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid var(--line);
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-head {
+  margin-bottom: 0.75rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.95rem;
+  color: #0f172a;
+}
+
+.donut-wrap {
+  display: grid;
+  grid-template-columns: 132px 1fr;
+  gap: 0.85rem;
+  align-items: center;
+}
+
+.donut-chart-box {
+  position: relative;
+  width: 132px;
+  height: 132px;
+}
+
+.donut-center {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  gap: 0.05rem;
+  pointer-events: none;
+}
+
+.donut-center strong {
+  font-size: 1.15rem;
+  color: #0f172a;
+}
+
+.donut-center span {
+  font-size: 0.7rem;
+  color: #94a3b8;
+}
+
+.donut-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.48rem;
+  font-size: 0.8rem;
+}
+
+.donut-legend li {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.lbl {
+  flex: 1;
+  color: #475569;
+}
+
+.legend-empty {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 0.8rem;
+}
+
+em {
+  font-style: normal;
+  color: #94a3b8;
+  font-weight: 700;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 500px) {
+  .donut-wrap {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}
+</style>

apps/web/src/components/dashboard/HomeTopCustomers.vue

@@ -1,15 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
-import { TrophyOutlined } from '@ant-design/icons-vue';
-import {
-  Avatar as AAvatar,
-  Flex as AFlex,
-  Progress as AProgress,
-  Tag as ATag,
-  Typography,
-  theme,
-} from 'ant-design-vue';
 import { toFaDigits } from '@/lib/jalali';
 import type { HomeDashboardTopCustomerDto } from '@mento/shared';
 import HomePanelEmpty from '@/components/dashboard/HomePanelEmpty.vue';
@@ -18,61 +9,25 @@ const props = defineProps<{
   customers: HomeDashboardTopCustomerDto[];
 }>();
 
-const { token } = theme.useToken();
-const { Text: ATypographyText } = Typography;
+const rows = computed(() => props.customers.slice(0, 3));
 
-const rows = computed(() => props.customers.slice(0, 5));
-const maxDeals = computed(() => Math.max(...rows.value.map((c) => c.dealCount), 1));
-
-function rankStyle(rank: number) {
-  if (rank === 1) {
-    return {
-      background: token.value.colorWarningBg,
-      color: token.value.colorWarning,
-      border: `1px solid ${token.value.colorWarningBorder}`,
-    };
-  }
-  if (rank === 2) {
-    return {
-      background: token.value.colorFillSecondary,
-      color: token.value.colorText,
-      border: `1px solid ${token.value.colorBorder}`,
-    };
-  }
-  if (rank === 3) {
-    return {
-      background: token.value.colorPrimaryBg,
-      color: token.value.colorPrimary,
-      border: `1px solid ${token.value.colorPrimaryBorder}`,
-    };
-  }
-  return {
-    background: token.value.colorFillAlter,
-    color: token.value.colorTextSecondary,
-    border: `1px solid ${token.value.colorBorderSecondary}`,
-  };
-}
-
-function progressPercent(count: number) {
-  return Math.round((count / maxDeals.value) * 100);
+function trophy(rank: number) {
+  if (rank === 1) return '🥇';
+  if (rank === 2) return '🥈';
+  if (rank === 3) return '🥉';
+  return `#${toFaDigits(rank)}`;
 }
 </script>
 
 <template>
-  <section class="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-sm h-full w-full">
-    <div class="flex items-center justify-between mb-2">
-      <div class="flex items-center gap-2">
-        <TrophyOutlined class="text-amber-500" />
-        <h3 class="font-bold text-slate-800 text-base">مشتریان برتر</h3>
+  <article class="panel">
+    <header class="panel-head">
+      <div>
+        <h2>مشتریان برتر</h2>
+        <p class="hint">بر اساس معاملات برندهٔ ۵ ماه اخیر</p>
       </div>
-      <RouterLink :to="{ name: 'contacts' }" class="text-sm font-bold text-emerald-600">
-        مشاهده همه
-      </RouterLink>
-    </div>
-
-    <a-typography-text type="secondary" style="display: block; margin-bottom: 12px">
-      بر اساس معاملات برندهٔ اخیر
-    </a-typography-text>
+      <RouterLink :to="{ name: 'contacts' }">مشاهده همه</RouterLink>
+    </header>
 
     <HomePanelEmpty
       v-if="!rows.length"
@@ -81,51 +36,99 @@ function progressPercent(count: number) {
       action-label="مشتری جدید"
       :action-to="{ name: 'person-new' }"
     />
-    <a-flex v-else vertical :gap="token.marginSM">
-      <a-flex
-        v-for="item in rows"
-        :key="item.id"
-        align="center"
-        :gap="token.marginSM"
-        class="rounded-xl border"
-        :class="item.rank === 1 ? 'bg-amber-50/50 border-amber-200/80' : 'bg-slate-50 border-slate-200/70'"
-        :style="{ padding: `${token.paddingSM}px`, minWidth: 0 }"
-      >
-        <a-flex
-          align="center"
-          justify="center"
-          :style="{
-            width: '36px',
-            height: '36px',
-            borderRadius: '50%',
-            fontWeight: 700,
-            flexShrink: 0,
-            ...rankStyle(item.rank),
-          }"
-        >
-          {{ toFaDigits(item.rank) }}
-        </a-flex>
-        <a-avatar :style="{ background: token.colorPrimary, flexShrink: 0 }">
-          {{ item.name.slice(0, 1) }}
-        </a-avatar>
-        <a-flex vertical :style="{ minWidth: 0, flex: 1 }">
-          <a-flex align="center" justify="space-between" :gap="token.marginXS">
-            <a-typography-text strong ellipsis>{{ item.name }}</a-typography-text>
-            <a-tag v-if="item.rank === 1" color="gold" style="flex-shrink: 0">رتبه یک</a-tag>
-          </a-flex>
-          <a-flex align="center" :gap="token.marginSM">
-            <a-progress
-              :percent="progressPercent(item.dealCount)"
-              :show-info="false"
-              :stroke-color="item.rank === 1 ? token.colorWarning : token.colorPrimary"
-              style="flex: 1; margin: 0; line-height: 1"
-            />
-            <a-typography-text type="secondary" style="flex-shrink: 0; white-space: nowrap">
-              {{ toFaDigits(item.dealCount) }} معامله
-            </a-typography-text>
-          </a-flex>
-        </a-flex>
-      </a-flex>
-    </a-flex>
-  </section>
+    <ul v-else class="top-list">
+      <li v-for="row in rows" :key="row.id">
+        <span class="cust-avatar">{{ row.name.slice(0, 1) }}</span>
+        <div>
+          <strong>{{ row.name }}</strong>
+          <span>{{ toFaDigits(row.dealCount) }} معامله</span>
+        </div>
+        <span class="rank">{{ trophy(row.rank) }}</span>
+      </li>
+    </ul>
+  </article>
 </template>
+
+<style scoped>
+.panel {
+  background: #fff;
+  border-radius: var(--radius);
+  padding: 1rem 1.05rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  border: 1px solid #eef2f7;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 0.85rem;
+  gap: 0.5rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.hint {
+  margin: 0.15rem 0 0;
+  color: #94a3b8;
+  font-size: 0.7rem;
+}
+
+a {
+  color: #14b8a6;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.top-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.7rem;
+}
+
+.top-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+}
+
+.cust-avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius);
+  background: linear-gradient(145deg, #ccfbf1, #99f6e4);
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.top-list div {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.1rem;
+}
+
+.top-list strong {
+  font-size: 0.84rem;
+}
+
+.top-list span {
+  color: #94a3b8;
+  font-size: 0.72rem;
+}
+
+.rank {
+  font-size: 1.15rem;
+}
+</style>

apps/web/src/components/nav/NavHubPanel.vue

@@ -102,7 +102,7 @@ onUnmounted(() => {
 <style scoped>
 .hub {
   width: min(28rem, calc(100vw - var(--hub-offset, 16rem) - 1.5rem));
-  max-height: calc(100dvh - 16px - var(--control-h) - 28px);
+  max-height: calc(100dvh - 56px);
   overflow: hidden;
   padding: 0.9rem 0.9rem 0.8rem;
   display: grid;

apps/web/src/components/person-profile/ProfileEmptyState.vue

@@ -1,21 +1,9 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { RouterLink } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
-import {
-  Button as AButton,
-  Flex as AFlex,
-  Space as ASpace,
-  Typography,
-} from 'ant-design-vue';
-import {
-  CalendarOutlined,
-  PlusOutlined,
-  UserAddOutlined,
-} from '@ant-design/icons-vue';
+import UiIcon from '@/components/UiIcon.vue';
 
-const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
-
-const props = withDefaults(
+withDefaults(
   defineProps<{
     title?: string;
     description?: string;
@@ -32,24 +20,15 @@ const props = withDefaults(
     secondaryIcon: 'calendar-plus',
   },
 );
-
-const router = useRouter();
-
-function go(to: RouteLocationRaw) {
-  void router.push(to);
-}
-
-const secondaryIconComp = () => {
-  if (props.secondaryIcon === 'user-plus') return UserAddOutlined;
-  return CalendarOutlined;
-};
 </script>
 
 <template>
-  <a-flex vertical align="center" :gap="16" :style="{ width: '100%', textAlign: 'center' }">
-    <div aria-hidden="true" :style="{ width: '168px' }">
-      <span aria-hidden="true">✦</span>
-      <svg viewBox="0 0 168 132" fill="none" :style="{ width: '168px', height: 'auto', display: 'block' }">
+  <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"
@@ -73,24 +52,147 @@ const secondaryIconComp = () => {
       </svg>
     </div>
 
-    <a-typography-title :level="4" :style="{ margin: 0 }">{{ title }}</a-typography-title>
-    <a-typography-text type="secondary">{{ description }}</a-typography-text>
+    <h3>{{ title }}</h3>
+    <p>{{ description }}</p>
 
-    <a-space direction="vertical" style="width: min(100%, 304px)">
-      <a-button type="primary" block @click="go(primaryTo)">
-        <template #icon><PlusOutlined /></template>
+    <div class="actions">
+      <RouterLink class="btn-primary" :to="primaryTo">
+        <span class="plus">+</span>
         {{ primaryLabel }}
-      </a-button>
-      <a-button
-        v-if="secondaryLabel && secondaryTo"
-        block
-        @click="go(secondaryTo)"
-      >
-        <template #icon>
-          <component :is="secondaryIconComp()" />
-        </template>
+      </RouterLink>
+      <RouterLink v-if="secondaryLabel && secondaryTo" class="btn-secondary" :to="secondaryTo">
+        <UiIcon :name="secondaryIcon" :size="18" />
         {{ secondaryLabel }}
-      </a-button>
-    </a-space>
-  </a-flex>
+      </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: 600;
+  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: var(--control-h);
+  height: var(--control-h);
+  border-radius: var(--radius);
+  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: var(--control-h);
+    height: var(--control-h);
+    font-size: 0.86rem;
+    border-radius: var(--radius);
+  }
+}
+</style>

apps/web/src/components/person-profile/ProfileMoreMenu.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { RouterLink } from 'vue-router';
 import type { RouteLocationRaw } from 'vue-router';
-import {
-  Button as AButton,
-  Dropdown as ADropdown,
-  Menu as AMenu,
-  MenuItem as AMenuItem,
-} from 'ant-design-vue';
-import { MoreOutlined } from '@ant-design/icons-vue';
+import UiIcon from '@/components/UiIcon.vue';
 
 export type ProfileMoreItem = {
   key: string;
@@ -20,40 +15,207 @@ const open = defineModel<boolean>({ default: false });
 defineProps<{ items: ProfileMoreItem[] }>();
 const emit = defineEmits<{ select: [key: string] }>();
 
-function onSelect(key: string) {
-  emit('select', key);
+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 onLinkClick() {
-  open.value = false;
+function scheduleClose() {
+  window.setTimeout(() => {
+    close();
+  }, 0);
+}
+
+function onSelect(key: string) {
+  emit('select', key);
+  nextTick(() => {
+    close();
+  });
 }
 </script>
 
 <template>
-  <a-dropdown v-model:open="open" :trigger="['click']" placement="bottomLeft">
-    <a-button aria-label="منوی بیشتر" @click.stop>
-      <template #icon><MoreOutlined /></template>
-    </a-button>
-    <template #overlay>
-      <a-menu @click.stop>
-        <a-menu-item
-          v-for="item in items"
-          :key="item.key"
-          :danger="item.danger"
-          @click="item.to ? onLinkClick() : onSelect(item.key)"
+  <div class="wrap" @click.stop>
+    <button
+      ref="triggerRef"
+      class="icon-btn"
+      type="button"
+      aria-label="منوی بیشتر"
+      :aria-expanded="open"
+      @click.stop="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
         >
-          <RouterLink
-            v-if="item.to"
-            :to="item.to"
-            :style="{ color: 'inherit', display: 'block' }"
-            @click="onLinkClick"
-          >
-            {{ item.label }}
-          </RouterLink>
-          <span v-else>{{ item.label }}</span>
-        </a-menu-item>
-      </a-menu>
-    </template>
-  </a-dropdown>
+          <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="scheduleClose"
+            >
+              {{ 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: var(--radius);
+  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: var(--radius);
+  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: var(--radius);
+  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>

apps/web/src/components/pipeline/DealCard.vue

@@ -4,6 +4,7 @@ import {
   CalendarOutlined,
   CheckOutlined,
   DeleteOutlined,
+  FlagFilled,
   MoreOutlined,
 } from '@ant-design/icons-vue';
 import {
@@ -13,10 +14,12 @@ import {
   Flex as AFlex,
   Space as ASpace,
   Tag as ATag,
+  Tooltip as ATooltip,
   Typography,
   theme,
 } from 'ant-design-vue';
 import { userAvatarSrc } from '@/lib/userAvatars';
+import type { ActivityPriority } from '@mento/shared';
 import type { PipelineAccent, PipelineDeal, PipelineUiCopy } from '@/lib/pipeline-board';
 import { DEAL_BOARD_COPY, formatCurrencyParts } from '@/lib/pipeline-board';
 
@@ -60,14 +63,26 @@ const extraAssignees = computed(() =>
   Math.max(0, (props.deal.assigneeNames?.length ?? 0) - 1),
 );
 const showTrash = computed(() => props.selectMode && props.selected);
+const PRIORITY_FLAG: Record<ActivityPriority, { label: string; color: string }> = {
+  very_high: { label: 'خیلی زیاد', color: '#dc2626' },
+  high: { label: 'زیاد', color: '#ea580c' },
+  medium: { label: 'متوسط', color: '#eab308' },
+  low: { label: 'کم', color: '#16a34a' },
+  very_low: { label: 'خیلی کم', color: '#94a3b8' },
+};
+const priorityFlag = computed(() =>
+  props.deal.priority ? PRIORITY_FLAG[props.deal.priority] : null,
+);
 
 const cardStyle = computed(() => ({
   cursor: props.selectMode ? 'pointer' : 'grab',
-  opacity: props.dragging ? 0.45 : 1,
+  opacity: props.dragging ? 0.4 : 1,
+  transform: props.dragging ? 'scale(0.98)' : 'none',
+  transition: 'opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease',
   margin: 0,
   background: props.selected ? token.value.colorPrimaryBg : token.value.colorBgContainer,
   borderColor: props.selected ? token.value.colorPrimary : token.value.colorBorderSecondary,
-  boxShadow: token.value.boxShadowTertiary,
+  boxShadow: props.dragging ? token.value.boxShadow : token.value.boxShadowTertiary,
 }));
 </script>
 
@@ -194,6 +209,11 @@ const cardStyle = computed(() => ({
             {{ money.unit }}
           </a-typography-text>
         </a-typography-text>
+        <a-tooltip v-if="priorityFlag" :title="`اولویت: ${priorityFlag.label}`">
+          <span :style="{ display: 'inline-flex', flexShrink: 0, lineHeight: 1 }">
+            <FlagFilled :style="{ color: priorityFlag.color, fontSize: '16px' }" />
+          </span>
+        </a-tooltip>
       </a-flex>
     </a-flex>
   </a-card>

apps/web/src/components/pipeline/PipelineColumn.vue

@@ -13,7 +13,7 @@ import {
 import AddDealButton from './AddDealButton.vue';
 import DealCard from './DealCard.vue';
 import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
-import { DEAL_BOARD_COPY, PIPELINE_ACCENT } from '@/lib/pipeline-board';
+import { DEAL_BOARD_COPY, PIPELINE_ACCENT, dragScrollColumn, pointerDropIndex, stopDragScroll } from '@/lib/pipeline-board';
 
 const props = withDefaults(
   defineProps<{
@@ -51,6 +51,8 @@ const emit = defineEmits<{
 const { Text: ATypographyText } = Typography;
 const { token } = theme.useToken();
 
+const bodyEl = ref<HTMLElement | null>(null);
+const insertAt = ref<number | null>(null);
 const renaming = ref(false);
 const draft = ref('');
 const titleInput = ref<{ focus: () => void; select?: () => void } | null>(null);
@@ -106,16 +108,49 @@ const bodyStyle = computed(() => ({
   margin: 0,
 }));
 
-function onCardDragOver(stageId: string, event: DragEvent) {
+function trackDrag(event: DragEvent, index: number | null) {
   event.preventDefault();
+  dragScrollColumn(bodyEl.value, event.clientY);
+  if (index != null) insertAt.value = index;
+}
+
+function clearDragUi() {
+  insertAt.value = null;
+  stopDragScroll();
+}
+
+function onCardDragOver(stageId: string, index: number, event: DragEvent) {
   event.stopPropagation();
+  trackDrag(event, pointerDropIndex(index, event));
   emit('dragOver', stageId, event);
 }
 
+function onColumnDrop(event: DragEvent) {
+  const at = insertAt.value ?? undefined;
+  clearDragUi();
+  emit('drop', props.stage.id, event, at);
+}
+
 function onCardDrop(stageId: string, index: number, event: DragEvent) {
   event.preventDefault();
   event.stopPropagation();
-  emit('drop', stageId, event, index);
+  const at = insertAt.value ?? pointerDropIndex(index, event);
+  clearDragUi();
+  emit('drop', stageId, event, at);
+}
+
+function slotStyle(active: boolean, collapseGap = false) {
+  return {
+    height: active ? '36px' : '0px',
+    marginTop: !active && collapseGap ? '-12px' : '0',
+    borderRadius: `${token.value.borderRadius}px`,
+    background: active ? token.value.colorPrimaryBg : 'transparent',
+    outline: active ? `1px dashed ${token.value.colorPrimary}` : 'none',
+    outlineOffset: '-1px',
+    transition: 'height 180ms ease, margin-top 180ms ease, background 180ms ease',
+    overflow: 'hidden',
+    flexShrink: 0,
+  };
 }
 
 function startRename() {
@@ -174,8 +209,8 @@ function onMenuClick({ key }: { key: string | number }) {
 <template>
   <section
     :style="columnStyle"
-    @dragover.prevent="emit('dragOver', stage.id, $event)"
-    @drop.prevent="emit('drop', stage.id, $event)"
+    @dragover.prevent="trackDrag($event, null); emit('dragOver', stage.id, $event)"
+    @drop.prevent="onColumnDrop"
   >
     <div :style="headStyle">
       <span
@@ -260,13 +295,18 @@ function onMenuClick({ key }: { key: string | number }) {
       </a-dropdown>
     </div>
 
-    <div role="list" :aria-label="stage.title" :style="bodyStyle">
+    <div ref="bodyEl" role="list" :aria-label="stage.title" :style="bodyStyle">
       <div
         v-for="(deal, index) in stage.deals"
         :key="deal.id"
-        @dragover="onCardDragOver(stage.id, $event)"
+        @dragover="onCardDragOver(stage.id, index, $event)"
         @drop="onCardDrop(stage.id, index, $event)"
       >
+        <div
+          :style="slotStyle(dropActive && insertAt === index)"
+          @dragover.stop.prevent="trackDrag($event, index); emit('dragOver', stage.id, $event)"
+          @drop.stop.prevent="clearDragUi(); emit('drop', stage.id, $event, index)"
+        />
         <DealCard
           :deal="deal"
           :accent="stage.color"
@@ -275,13 +315,18 @@ function onMenuClick({ key }: { key: string | number }) {
           :select-mode="selectMode"
           :selected="selectedIds.has(deal.id)"
           @drag-start="(d, e) => emit('dragStart', d, e)"
-          @drag-end="emit('dragEnd')"
+          @drag-end="clearDragUi(); emit('dragEnd')"
           @open="emit('openDeal', $event)"
           @menu="emit('menuDeal', $event)"
           @toggle-select="emit('toggleSelect', $event)"
           @bulk-delete="emit('bulkDelete')"
         />
       </div>
+      <div
+        :style="slotStyle(dropActive && insertAt === stage.deals.length, true)"
+        @dragover.stop.prevent="trackDrag($event, stage.deals.length); emit('dragOver', stage.id, $event)"
+        @drop.stop.prevent="clearDragUi(); emit('drop', stage.id, $event, stage.deals.length)"
+      />
       <a-typography-text
         v-if="!stage.deals.length"
         type="secondary"

apps/web/src/components/pipeline/PipelineMergeWizard.vue

@@ -9,31 +9,8 @@ import type {
 } from '@mento/shared';
 import { api } from '@/lib/api';
 import { toFaDigits } from '@/lib/jalali';
-import {
-  Alert as AAlert,
-  Button as AButton,
-  Card as ACard,
-  Col as ACol,
-  Descriptions as ADescriptions,
-  DescriptionsItem as ADescriptionsItem,
-  Flex as AFlex,
-  Form as AForm,
-  FormItem as AFormItem,
-  Row as ARow,
-  Select as ASelect,
-  Space as ASpace,
-  Spin as ASpin,
-  Steps as ASteps,
-  Step as AStep,
-  Typography,
-} from 'ant-design-vue';
-import {
-  AppstoreOutlined,
-  AimOutlined,
-  CheckCircleOutlined,
-} from '@ant-design/icons-vue';
-
-const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } = Typography;
+import { UiButton, UiField, UiSelect } from '@/components/ui';
+import UiIcon from '@/components/UiIcon.vue';
 
 type Step = 'target' | 'map' | 'review';
 
@@ -54,23 +31,10 @@ const stageMap = ref<Record<string, string>>({});
 const busy = ref(false);
 const error = ref('');
 
-const stepIndex = computed(() => {
-  if (step.value === 'target') return 0;
-  if (step.value === 'map') return 1;
-  return 2;
-});
-
 const selectedTarget = computed(
   () => preview.value?.targets.find((target) => target.id === targetId.value) ?? null,
 );
 
-const targetOptions = computed(() =>
-  (preview.value?.targets ?? []).map((target) => ({
-    value: target.id,
-    label: target.name,
-  })),
-);
-
 const canContinueTarget = computed(() => Boolean(targetId.value && selectedTarget.value));
 const canContinueMap = computed(() => {
   const current = preview.value;
@@ -107,13 +71,6 @@ function compatibleTargets(src: PipelineMergePreviewStageDto) {
   });
 }
 
-function compatibleOptions(src: PipelineMergePreviewStageDto) {
-  return compatibleTargets(src).map((stage) => ({
-    value: stage.id,
-    label: stage.name,
-  }));
-}
-
 function statusLabel(stage: Pick<PipelineMergePreviewStageDto, 'isWon' | 'isLost'>) {
   if (stage.isWon) return 'برد';
   if (stage.isLost) return 'باخت';
@@ -214,181 +171,298 @@ watch(targetId, () => {
 </script>
 
 <template>
-  <a-flex vertical :gap="16">
-    <a-steps :current="stepIndex">
-      <a-step title="مقصد" />
-      <a-step title="نگاشت" />
-      <a-step title="بازبینی" />
-    </a-steps>
+  <div class="merge-wizard">
+    <ol class="steps" aria-label="مراحل ادغام کاریز">
+      <li :class="{ active: step === 'target', done: step !== 'target' }">۱. مقصد</li>
+      <li :class="{ active: step === 'map', done: step === 'review' }">۲. نگاشت</li>
+      <li :class="{ active: step === 'review' }">۳. بازبینی</li>
+    </ol>
 
-    <a-spin :spinning="busy && !preview">
-      <template v-if="preview">
-        <a-flex v-if="step === 'target'" vertical :gap="16">
-          <a-flex :gap="8" align="flex-start">
-            <AppstoreOutlined />
-            <a-flex vertical :gap="4">
-              <a-typography-title :level="5" :style="{ margin: 0 }">
-                کاریز مقصد را انتخاب کنید
-              </a-typography-title>
-              <a-typography-text type="secondary">
-                معاملات و فرم‌های سرنخ از «{{ preview.source.name }}» به کاریز مقصد منتقل می‌شوند.
-              </a-typography-text>
-            </a-flex>
-          </a-flex>
+    <p v-if="busy && !preview" class="muted">در حال آماده‌سازی پیش‌نمایش…</p>
 
-          <a-form layout="vertical">
-            <a-form-item label="کاریز مقصد" required>
-              <a-select
-                v-model:value="targetId"
-                :options="targetOptions"
-                placeholder="انتخاب کنید"
-                style="width: 100%"
-              />
-            </a-form-item>
-          </a-form>
+    <template v-else-if="preview">
+      <section v-if="step === 'target'" class="step-panel">
+        <div class="intro">
+          <UiIcon name="layers" :size="20" />
+          <div>
+            <h3>کاریز مقصد را انتخاب کنید</h3>
+            <p>
+              معاملات و فرم‌های سرنخ از «{{ preview.source.name }}» به کاریز مقصد منتقل می‌شوند.
+            </p>
+          </div>
+        </div>
 
-          <a-row :gutter="[16, 16]">
-            <a-col :xs="24" :md="8">
-              <a-card :bordered="true">
-                <a-typography-text strong>{{ toFaDigits(preview.dealCount) }}</a-typography-text>
-                <br />
-                <a-typography-text type="secondary">معامله منتقل می‌شود</a-typography-text>
-              </a-card>
-            </a-col>
-            <a-col :xs="24" :md="8">
-              <a-card :bordered="true">
-                <a-typography-text strong>{{ toFaDigits(preview.leadForms.length) }}</a-typography-text>
-                <br />
-                <a-typography-text type="secondary">فرم سرنخ به مقصد وصل می‌شود</a-typography-text>
-              </a-card>
-            </a-col>
-            <a-col v-if="preview.source.isDefault" :xs="24" :md="8">
-              <a-alert
-                type="warning"
-                show-icon
-                message="هشدار"
-                description="کاریز مبدا پیش‌فرض است و بعد از ادغام حذف می‌شود."
-              />
-            </a-col>
-          </a-row>
+        <UiField label="کاریز مقصد" required>
+          <UiSelect v-model="targetId" required>
+            <option value="" disabled>انتخاب کنید</option>
+            <option v-for="target in preview.targets" :key="target.id" :value="target.id">
+              {{ target.name }}
+            </option>
+          </UiSelect>
+        </UiField>
 
-          <a-alert
-            v-if="selectedTarget?.isDefault"
-            type="info"
-            show-icon
-            message="مقصد انتخاب‌شده کاریز پیش‌فرض است."
-          />
-        </a-flex>
+        <div class="summary-grid">
+          <article>
+            <strong>{{ toFaDigits(preview.dealCount) }}</strong>
+            <span>معامله منتقل می‌شود</span>
+          </article>
+          <article>
+            <strong>{{ toFaDigits(preview.leadForms.length) }}</strong>
+            <span>فرم سرنخ به مقصد وصل می‌شود</span>
+          </article>
+          <article v-if="preview.source.isDefault" class="warn">
+            <strong>هشدار</strong>
+            <span>کاریز مبدا پیش‌فرض است و بعد از ادغام حذف می‌شود.</span>
+          </article>
+        </div>
 
-        <a-flex v-else-if="step === 'map'" vertical :gap="16">
-          <a-flex :gap="8" align="flex-start">
-            <AimOutlined />
-            <a-flex vertical :gap="4">
-              <a-typography-title :level="5" :style="{ margin: 0 }">
-                مرحله‌های مبدا را نگاشت کنید
-              </a-typography-title>
-              <a-typography-text type="secondary">
-                هر مرحله فقط به مرحله‌ای با وضعیت سازگار در مقصد وصل می‌شود.
-              </a-typography-text>
-            </a-flex>
-          </a-flex>
+        <p v-if="selectedTarget?.isDefault" class="note">مقصد انتخاب‌شده کاریز پیش‌فرض است.</p>
+      </section>
 
-          <a-form layout="vertical">
-            <a-row
-              v-for="sourceStage in preview.stages"
-              :key="sourceStage.id"
-              :gutter="[16, 0]"
-              align="middle"
-            >
-              <a-col :xs="24" :md="12">
-                <a-form-item :style="{ marginBottom: '12px' }">
-                  <a-typography-text strong>{{ sourceStage.name }}</a-typography-text>
-                  <br />
-                  <a-typography-text type="secondary">
-                    {{ statusLabel(sourceStage) }} · {{ toFaDigits(sourceStage.dealCount) }} معامله
-                  </a-typography-text>
-                </a-form-item>
-              </a-col>
-              <a-col :xs="24" :md="12">
-                <a-form-item
-                  label="مرحله مقصد"
-                  required
-                  :validate-status="stageMap[sourceStage.id] ? undefined : 'error'"
-                  :style="{ marginBottom: '12px' }"
-                >
-                  <a-select
-                    v-model:value="stageMap[sourceStage.id]"
-                    :options="compatibleOptions(sourceStage)"
-                    placeholder="مرحله مقصد"
-                    style="width: 100%"
-                  />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </a-flex>
+      <section v-else-if="step === 'map'" class="step-panel">
+        <div class="intro">
+          <UiIcon name="target" :size="20" />
+          <div>
+            <h3>مرحله‌های مبدا را نگاشت کنید</h3>
+            <p>هر مرحله فقط به مرحله‌ای با وضعیت سازگار در مقصد وصل می‌شود.</p>
+          </div>
+        </div>
 
-        <a-flex v-else vertical :gap="16">
-          <a-flex :gap="8" align="flex-start">
-            <CheckCircleOutlined />
-            <a-flex vertical :gap="4">
-              <a-typography-title :level="5" :style="{ margin: 0 }">بازبینی نهایی</a-typography-title>
-              <a-typography-paragraph type="secondary" :style="{ margin: 0 }">
-                «{{ toFaDigits(preview.dealCount) }}» معامله منتقل می‌شود.
-                {{ toFaDigits(preview.leadForms.length) }} فرم سرنخ به مقصد وصل می‌شود.
-                کاریز «{{ preview.source.name }}» حذف می‌شود.
-              </a-typography-paragraph>
-            </a-flex>
-          </a-flex>
+        <div class="map-list">
+          <article v-for="sourceStage in preview.stages" :key="sourceStage.id" class="map-row">
+            <div class="stage-info">
+              <strong>{{ sourceStage.name }}</strong>
+              <span>
+                {{ statusLabel(sourceStage) }} · {{ toFaDigits(sourceStage.dealCount) }} معامله
+              </span>
+            </div>
+            <UiSelect v-model="stageMap[sourceStage.id]" :error="!stageMap[sourceStage.id]">
+              <option value="" disabled>مرحله مقصد</option>
+              <option
+                v-for="targetStage in compatibleTargets(sourceStage)"
+                :key="targetStage.id"
+                :value="targetStage.id"
+              >
+                {{ targetStage.name }}
+              </option>
+            </UiSelect>
+          </article>
+        </div>
+      </section>
 
-          <a-descriptions :column="1" size="small" bordered>
-            <a-descriptions-item label="مبدا">{{ preview.source.name }}</a-descriptions-item>
-            <a-descriptions-item label="مقصد">{{ selectedTarget?.name }}</a-descriptions-item>
-            <a-descriptions-item label="روش فرم‌ها">
-              همه فرم‌های سرنخ به مقصد وصل می‌شوند.
-            </a-descriptions-item>
-          </a-descriptions>
-        </a-flex>
-      </template>
+      <section v-else class="step-panel">
+        <div class="intro">
+          <UiIcon name="check" :size="20" />
+          <div>
+            <h3>بازبینی نهایی</h3>
+            <p>
+              «{{ toFaDigits(preview.dealCount) }}» معامله منتقل می‌شود.
+              {{ toFaDigits(preview.leadForms.length) }} فرم سرنخ به مقصد وصل می‌شود.
+              کاریز «{{ preview.source.name }}» حذف می‌شود.
+            </p>
+          </div>
+        </div>
 
-      <a-typography-text v-else-if="!busy && !error" type="secondary">
-        <template v-if="sourceId">در حال بارگذاری پیش‌نمایش ادغام…</template>
-        <template v-else>برای شروع ادغام، از فهرست کاریزها دکمهٔ «ادغام» را بزنید.</template>
-      </a-typography-text>
-    </a-spin>
+        <dl class="review-list">
+          <div>
+            <dt>مبدا</dt>
+            <dd>{{ preview.source.name }}</dd>
+          </div>
+          <div>
+            <dt>مقصد</dt>
+            <dd>{{ selectedTarget?.name }}</dd>
+          </div>
+          <div>
+            <dt>روش فرم‌ها</dt>
+            <dd>همه فرم‌های سرنخ به مقصد وصل می‌شوند.</dd>
+          </div>
+        </dl>
+      </section>
+    </template>
 
-    <a-alert v-if="error" type="error" show-icon :message="error" />
+    <p v-else-if="!busy && !error" class="muted">
+      <template v-if="sourceId">در حال بارگذاری پیش‌نمایش ادغام…</template>
+      <template v-else>برای شروع ادغام، از فهرست کاریزها دکمهٔ «ادغام» را بزنید.</template>
+    </p>
 
-    <a-space wrap>
-      <a-button :disabled="busy" @click="emit('close')">بستن</a-button>
-      <a-button v-if="step === 'map'" :disabled="busy" @click="step = 'target'">قبلی</a-button>
-      <a-button v-else-if="step === 'review'" :disabled="busy" @click="step = 'map'">قبلی</a-button>
-      <a-button
-        v-if="step === 'target'"
-        type="primary"
-        :disabled="!preview || !canContinueTarget"
-        @click="nextFromTarget"
-      >
+    <p v-if="error" class="error">{{ error }}</p>
+
+    <div class="actions">
+      <UiButton variant="ghost" :disabled="busy" @click="emit('close')">بستن</UiButton>
+      <UiButton v-if="step === 'map'" variant="ghost" :disabled="busy" @click="step = 'target'">
+        قبلی
+      </UiButton>
+      <UiButton v-else-if="step === 'review'" variant="ghost" :disabled="busy" @click="step = 'map'">
+        قبلی
+      </UiButton>
+      <UiButton v-if="step === 'target'" :disabled="!preview || !canContinueTarget" @click="nextFromTarget">
         ادامه
-      </a-button>
-      <a-button
-        v-else-if="step === 'map'"
-        type="primary"
-        :disabled="!canContinueMap"
-        @click="nextFromMap"
-      >
+      </UiButton>
+      <UiButton v-else-if="step === 'map'" :disabled="!canContinueMap" @click="nextFromMap">
         بازبینی
-      </a-button>
-      <a-button
-        v-else
-        type="primary"
-        danger
-        :loading="busy"
-        :disabled="!canContinueMap"
-        @click="submitMerge"
-      >
+      </UiButton>
+      <UiButton v-else variant="danger" :loading="busy" :disabled="!canContinueMap" @click="submitMerge">
         ادغام و حذف مبدا
-      </a-button>
-    </a-space>
-  </a-flex>
+      </UiButton>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.merge-wizard {
+  display: grid;
+  gap: 1rem;
+}
+
+.steps {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.steps li {
+  padding: 0.3rem 0.65rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.steps li.active {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.steps li.done {
+  color: var(--ink);
+}
+
+.step-panel {
+  display: grid;
+  gap: 1rem;
+}
+
+.intro {
+  display: flex;
+  gap: 0.65rem;
+  align-items: flex-start;
+}
+
+.intro h3,
+.intro p {
+  margin: 0;
+}
+
+.intro h3 {
+  font-size: 1rem;
+}
+
+.intro p {
+  margin-top: 0.25rem;
+  color: var(--muted);
+  line-height: 1.8;
+}
+
+.summary-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+.summary-grid article {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-subtle);
+}
+
+.summary-grid strong {
+  color: var(--ink);
+}
+
+.summary-grid span,
+.muted,
+.note {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.summary-grid .warn {
+  border-color: var(--danger);
+  background: var(--danger-soft);
+}
+
+.map-list {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.map-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+}
+
+.stage-info {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.stage-info span {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.review-list {
+  display: grid;
+  gap: 0.65rem;
+  margin: 0;
+}
+
+.review-list div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-bottom: 0.55rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.review-list dt,
+.review-list dd {
+  margin: 0;
+}
+
+.review-list dt {
+  color: var(--muted);
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--line);
+}
+
+.error {
+  color: #b91c1c;
+  margin: 0;
+}
+
+@media (max-width: 720px) {
+  .map-row {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

apps/web/src/components/routines/DailyScoreCard.vue

@@ -11,20 +11,6 @@ import {
   weekdayIndex,
 } from '@/lib/routines';
 import { ROUTINE_WEEKDAY_LABELS } from '@mento/shared';
-import {
-  Card as ACard,
-  Col as ACol,
-  Flex as AFlex,
-  Progress as AProgress,
-  Row as ARow,
-  Tag as ATag,
-  Tooltip as ATooltip,
-  Typography,
-  theme,
-} from 'ant-design-vue';
-
-const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
-const { token } = theme.useToken();
 
 const props = defineProps<{
   score: RoutineScoreDto | null;
@@ -43,98 +29,216 @@ const rows = computed(() => {
 });
 
 const strip = computed(() => props.days ?? []);
-
-const TONE_COLORS: Record<string, string> = {
-  good: 'var(--ant-color-success)',
-  mid: 'var(--ant-color-warning)',
-  low: 'var(--ant-color-error)',
-  none: 'var(--ant-color-text-quaternary)',
-};
-
-const STATE_STYLES: Record<string, { bg: string; fg: string }> = {
-  complete: { bg: 'var(--ant-color-success-bg)', fg: 'var(--ant-color-success)' },
-  partial: { bg: 'var(--ant-color-warning-bg)', fg: 'var(--ant-color-warning)' },
-  missed: { bg: 'var(--ant-color-error-bg)', fg: 'var(--ant-color-error)' },
-  empty: { bg: 'var(--ant-color-fill-secondary)', fg: 'var(--ant-color-text-quaternary)' },
-};
-
-function stateStyle(state: string) {
-  return STATE_STYLES[state] ?? STATE_STYLES.empty;
-}
 </script>
 
 <template>
-  <a-card :bordered="false">
-    <a-flex vertical :gap="16">
-      <a-flex justify="space-between" align="center" :gap="8">
-        <a-typography-title :level="5" :style="{ margin: 0 }">امتیاز روزانه</a-typography-title>
-        <a-typography-text type="secondary" title="روزهای متوالی با انجام همه کارهای اجباری">
-          <a-typography-text strong :style="{ color: 'var(--ant-color-primary)' }">
-            {{ toFaDigits(score?.streak ?? 0) }}
-          </a-typography-text>
-          روز پیاپی کامل
-        </a-typography-text>
-      </a-flex>
+  <section class="score-card">
+    <header>
+      <h3>امتیاز روزانه</h3>
+      <span class="streak" :title="'روزهای متوالی با انجام همه کارهای اجباری'">
+        <strong>{{ toFaDigits(score?.streak ?? 0) }}</strong>
+        روز پیاپی کامل
+      </span>
+    </header>
 
-      <a-row :gutter="[16, 16]">
-        <a-col v-for="r in rows" :key="r.label" :span="12">
-          <a-flex justify="space-between" align="baseline" :gap="8">
-            <a-typography-text type="secondary">{{ r.label }}</a-typography-text>
-            <a-typography-text strong>{{ formatPercent(r.value) }}</a-typography-text>
-          </a-flex>
-          <a-progress
-            :percent="r.value ?? 0"
-            :show-info="false"
-            :stroke-color="TONE_COLORS[percentTone(r.value)]"
-          />
-        </a-col>
-      </a-row>
+    <div class="scores">
+      <div v-for="r in rows" :key="r.label" class="score" :class="`tone-${percentTone(r.value)}`">
+        <span>{{ r.label }}</span>
+        <strong>{{ formatPercent(r.value) }}</strong>
+        <i class="bar"><b :style="{ width: `${r.value ?? 0}%` }" /></i>
+      </div>
+    </div>
 
-      <template v-if="strip.length">
-        <a-flex :gap="4" role="list" aria-label="وضعیت روزهای اخیر">
-          <a-flex
-            v-for="d in strip"
-            :key="d.date"
-            vertical
-            align="center"
-            :gap="2"
-            role="listitem"
-            :style="{ flex: 1, minWidth: 0 }"
-          >
-            <a-tooltip
-              :title="`${formatDayNumeric(d.date)} — ${DAY_STATE_LABELS[d.state]}${d.total ? ` (${toFaDigits(d.completed)} از ${toFaDigits(d.total)})` : ''}`"
-            >
-              <a-flex
-                justify="center"
-                align="center"
-                :style="{
-                  width: '26px',
-                  height: '26px',
-                  flexShrink: 0,
-                  borderRadius: token.borderRadiusSM,
-                  background: stateStyle(d.state).bg,
-                  color: stateStyle(d.state).fg,
-                }"
-              >
-                <a-typography-text
-                  strong
-                  :style="{ color: stateStyle(d.state).fg, lineHeight: 1 }"
-                >
-                  {{ DAY_STATE_SYMBOLS[d.state] }}
-                </a-typography-text>
-              </a-flex>
-            </a-tooltip>
-            <a-typography-text type="secondary">
-              {{ ROUTINE_WEEKDAY_LABELS[weekdayIndex(d.date)]?.charAt(0) }}
-            </a-typography-text>
-          </a-flex>
-        </a-flex>
-        <a-flex wrap="wrap" :gap="8">
-          <a-tag color="success" :bordered="false">✓ کامل</a-tag>
-          <a-tag color="warning" :bordered="false">△ ناقص</a-tag>
-          <a-tag color="error" :bordered="false">× از دست رفته</a-tag>
-        </a-flex>
-      </template>
-    </a-flex>
-  </a-card>
+    <div v-if="strip.length" class="strip-wrap">
+      <div class="strip" role="list" aria-label="وضعیت روزهای اخیر">
+        <span
+          v-for="d in strip"
+          :key="d.date"
+          role="listitem"
+          class="cell"
+          :class="`s-${d.state}`"
+          :title="`${formatDayNumeric(d.date)} — ${DAY_STATE_LABELS[d.state]}${d.total ? ` (${toFaDigits(d.completed)} از ${toFaDigits(d.total)})` : ''}`"
+        >
+          <em>{{ DAY_STATE_SYMBOLS[d.state] }}</em>
+          <small>{{ ROUTINE_WEEKDAY_LABELS[weekdayIndex(d.date)]?.charAt(0) }}</small>
+        </span>
+      </div>
+      <div class="legend">
+        <span><i class="s-complete">✓</i> کامل</span>
+        <span><i class="s-partial">△</i> ناقص</span>
+        <span><i class="s-missed">×</i> از دست رفته</span>
+      </div>
+    </div>
+  </section>
 </template>
+
+<style scoped>
+.score-card {
+  display: grid;
+  gap: var(--sp-4);
+  padding: var(--sp-4);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-xs);
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+}
+
+h3 {
+  margin: 0;
+  font-size: var(--fs-md);
+  font-weight: var(--fw-semibold);
+  color: var(--ink);
+}
+
+.streak {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  font-size: var(--fs-xs);
+  color: var(--muted);
+}
+
+.streak strong {
+  font-size: var(--fs-lg);
+  color: var(--accent-deep);
+}
+
+.scores {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sp-3);
+}
+
+.score {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: baseline;
+  gap: 4px 8px;
+}
+
+.score span {
+  font-size: var(--fs-xs);
+  color: var(--muted);
+}
+
+.score strong {
+  font-size: var(--fs-md);
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+
+.bar {
+  grid-column: 1 / -1;
+  height: 5px;
+  border-radius: 99px;
+  background: var(--surface-subtle);
+  overflow: hidden;
+}
+
+.bar b {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--line-strong);
+  transition: width 0.4s ease;
+}
+
+.tone-good .bar b {
+  background: var(--success);
+}
+
+.tone-mid .bar b {
+  background: var(--warning);
+}
+
+.tone-low .bar b {
+  background: var(--danger);
+}
+
+.strip-wrap {
+  display: grid;
+  gap: var(--sp-2);
+}
+
+.strip {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 4px;
+}
+
+.cell {
+  display: grid;
+  justify-items: center;
+  gap: 2px;
+}
+
+.cell em {
+  width: 100%;
+  aspect-ratio: 1;
+  max-width: 26px;
+  border-radius: 6px;
+  display: grid;
+  place-items: center;
+  font-style: normal;
+  font-size: 0.75rem;
+  font-weight: var(--fw-bold);
+  background: var(--surface-subtle);
+  color: var(--muted-light);
+}
+
+.cell small {
+  font-size: 0.62rem;
+  color: var(--muted-light);
+}
+
+.s-complete,
+.cell.s-complete em {
+  background: var(--success-soft);
+  color: var(--success-deep);
+}
+
+.s-partial,
+.cell.s-partial em {
+  background: var(--warning-soft);
+  color: var(--warning-deep);
+}
+
+.s-missed,
+.cell.s-missed em {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-3);
+  font-size: var(--fs-xs);
+  color: var(--muted);
+}
+
+.legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.legend i {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  display: inline-grid;
+  place-items: center;
+  font-style: normal;
+  font-size: 0.65rem;
+  font-weight: var(--fw-bold);
+}
+</style>

apps/web/src/components/routines/KpiCard.vue

@@ -1,32 +1,14 @@
 <script setup lang="ts">
-import { computed, type Component } from 'vue';
-import {
-  Avatar as AAvatar,
-  Card as ACard,
-  Flex as AFlex,
-  Statistic as AStatistic,
-  Typography,
-} from 'ant-design-vue';
-import {
-  AimOutlined,
-  CalendarOutlined,
-  CheckOutlined,
-  ClockCircleOutlined,
-  CloseCircleOutlined,
-  FlagOutlined,
-  SyncOutlined,
-  TeamOutlined,
-  WarningOutlined,
-} from '@ant-design/icons-vue';
+import UiIcon from '@/components/UiIcon.vue';
 
-const { Text: ATypographyText } = Typography;
+type IconName = InstanceType<typeof UiIcon>['$props']['name'];
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     label: string;
     value: string;
     hint?: string;
-    icon?: string;
+    icon?: IconName;
     tone?: 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
     /** تغییر نسبت به دوره قبل (درصد یا عدد)؛ مثبت = بهتر */
     delta?: number | null;
@@ -35,68 +17,135 @@ const props = withDefaults(
   { hint: '', icon: undefined, tone: 'neutral', delta: null, deltaSuffix: '' },
 );
 
-const ICONS: Record<string, Component> = {
-  check: CheckOutlined,
-  clock: ClockCircleOutlined,
-  warning: WarningOutlined,
-  target: AimOutlined,
-  'x-circle': CloseCircleOutlined,
-  calendar: CalendarOutlined,
-  flag: FlagOutlined,
-  users: TeamOutlined,
-  refresh: SyncOutlined,
-};
-
-const TONES: Record<string, { bg: string; fg: string }> = {
-  accent: { bg: 'var(--ant-color-primary-bg)', fg: 'var(--ant-color-primary)' },
-  success: { bg: 'var(--ant-color-success-bg)', fg: 'var(--ant-color-success)' },
-  warning: { bg: 'var(--ant-color-warning-bg)', fg: 'var(--ant-color-warning)' },
-  danger: { bg: 'var(--ant-color-error-bg)', fg: 'var(--ant-color-error)' },
-  info: { bg: 'var(--ant-color-info-bg)', fg: 'var(--ant-color-info)' },
-  neutral: { bg: 'var(--ant-color-fill-secondary)', fg: 'var(--ant-color-text-secondary)' },
-};
-
-const iconComp = computed(() => (props.icon ? (ICONS[props.icon] ?? AimOutlined) : null));
-const toneStyle = computed(() => TONES[props.tone] ?? TONES.neutral);
-
 function fa(n: number) {
   return Math.abs(n).toLocaleString('fa-IR');
 }
 </script>
 
 <template>
-  <a-card :bordered="false" :style="{ height: '100%' }">
-    <a-flex vertical :gap="6">
-      <a-flex justify="space-between" align="center" :gap="8">
-        <a-typography-text type="secondary">{{ label }}</a-typography-text>
-        <a-avatar
-          v-if="iconComp"
-          :style="{ background: toneStyle.bg, color: toneStyle.fg, flexShrink: 0 }"
-        >
-          <template #icon><component :is="iconComp" /></template>
-        </a-avatar>
-      </a-flex>
-      <a-statistic
-        :value="value"
-        :value-style="
-          tone === 'danger'
-            ? { color: 'var(--ant-color-error)', fontWeight: 700 }
-            : { fontWeight: 700 }
-        "
-      />
-      <a-flex v-if="hint || delta != null" align="center" wrap="wrap" :gap="6">
-        <a-typography-text
-          v-if="delta != null && delta !== 0"
-          :type="delta > 0 ? 'success' : 'danger'"
-          strong
-        >
-          {{ delta > 0 ? '▲' : '▼' }} {{ fa(delta) }}{{ deltaSuffix }}
-        </a-typography-text>
-        <a-typography-text v-else-if="delta === 0" type="secondary">
-          بدون تغییر
-        </a-typography-text>
-        <a-typography-text v-if="hint" type="secondary">{{ hint }}</a-typography-text>
-      </a-flex>
-    </a-flex>
-  </a-card>
+  <div class="kpi" :class="`tone-${tone}`">
+    <div class="kpi-top">
+      <span class="kpi-label">{{ label }}</span>
+      <span v-if="icon" class="kpi-ico"><UiIcon :name="icon" :size="16" /></span>
+    </div>
+    <strong class="kpi-value">{{ value }}</strong>
+    <div v-if="hint || delta != null" class="kpi-foot">
+      <span v-if="delta != null && delta !== 0" class="delta" :class="delta > 0 ? 'up' : 'down'">
+        {{ delta > 0 ? '▲' : '▼' }} {{ fa(delta) }}{{ deltaSuffix }}
+      </span>
+      <span v-else-if="delta === 0" class="delta flat">بدون تغییر</span>
+      <span v-if="hint" class="kpi-hint">{{ hint }}</span>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.kpi {
+  display: grid;
+  gap: 6px;
+  padding: var(--sp-4);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-xs);
+  min-width: 0;
+}
+
+.kpi-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+}
+
+.kpi-label {
+  font-size: var(--fs-sm);
+  color: var(--muted);
+  font-weight: var(--fw-medium);
+}
+
+.kpi-ico {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: var(--surface-subtle);
+  color: var(--ink-secondary);
+}
+
+.tone-accent .kpi-ico {
+  background: var(--accent-subtle);
+  color: var(--accent-deep);
+}
+
+.tone-success .kpi-ico {
+  background: var(--success-soft);
+  color: var(--success-deep);
+}
+
+.tone-warning .kpi-ico {
+  background: var(--warning-soft);
+  color: var(--warning-deep);
+}
+
+.tone-danger .kpi-ico {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.tone-info .kpi-ico {
+  background: var(--info-soft);
+  color: var(--info-deep);
+}
+
+.kpi-value {
+  font-size: var(--fs-2xl);
+  font-weight: var(--fw-bold);
+  color: var(--ink);
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+}
+
+.tone-danger .kpi-value {
+  color: var(--danger);
+}
+
+.kpi-foot {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  font-size: var(--fs-xs);
+}
+
+.kpi-hint {
+  color: var(--muted);
+}
+
+.delta {
+  font-weight: var(--fw-semibold);
+}
+
+.delta.up {
+  color: var(--success-deep);
+}
+
+.delta.down {
+  color: var(--danger);
+}
+
+.delta.flat {
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .kpi {
+    padding: var(--sp-3);
+  }
+
+  .kpi-value {
+    font-size: var(--fs-xl);
+  }
+}
+</style>

apps/web/src/components/routines/RoutineMonthGrid.vue

@@ -4,15 +4,6 @@ import type { RoutineCalendarDayDto } from '@mento/shared';
 import { ROUTINE_WEEKDAY_LABELS } from '@mento/shared';
 import { dateToJalali, toFaDigits } from '@/lib/jalali';
 import { DAY_STATE_LABELS, addDaysKey, keyToDate, todayKey, weekdayIndex } from '@/lib/routines';
-import {
-  Button as AButton,
-  Flex as AFlex,
-  Typography,
-  theme,
-} from 'ant-design-vue';
-
-const { Text: ATypographyText } = Typography;
-const { token } = theme.useToken();
 
 const props = withDefaults(
   defineProps<{
@@ -56,39 +47,6 @@ function heatLevel(d?: RoutineCalendarDayDto): number {
   return 1;
 }
 
-const STATE_BG: Record<string, string> = {
-  complete: 'var(--ant-color-success-bg)',
-  partial: 'var(--ant-color-warning-bg)',
-  missed: 'var(--ant-color-error-bg)',
-  empty: 'var(--ant-color-bg-container)',
-  future: 'var(--ant-color-fill-quaternary)',
-};
-
-const STATE_DOT: Record<string, string> = {
-  complete: 'var(--ant-color-success)',
-  partial: 'var(--ant-color-warning)',
-  missed: 'var(--ant-color-error)',
-  empty: 'var(--ant-color-text-quaternary)',
-  future: 'var(--ant-color-text-quaternary)',
-};
-
-const HEAT_BG: Record<number, string> = {
-  0: 'var(--ant-color-fill-quaternary)',
-  1: 'var(--ant-color-info-bg)',
-  2: 'var(--ant-color-primary-bg)',
-  3: 'var(--ant-color-success-bg)',
-  4: 'var(--ant-color-success)',
-};
-
-function cellKey(c: (typeof cells.value)[number]) {
-  return c.future && !c.day?.total ? 'future' : (c.day?.state ?? 'empty');
-}
-
-function cellBackground(c: (typeof cells.value)[number]) {
-  if (props.mode === 'heat') return HEAT_BG[heatLevel(c.day)];
-  return STATE_BG[cellKey(c)] ?? STATE_BG.empty;
-}
-
 function title(c: (typeof cells.value)[number]) {
   const d = c.day;
   if (!d || !d.total) return 'بدون کار';
@@ -97,78 +55,211 @@ function title(c: (typeof cells.value)[number]) {
 </script>
 
 <template>
-  <a-flex vertical :gap="6">
-    <a-flex :gap="6">
-      <a-typography-text
-        v-for="w in ROUTINE_WEEKDAY_LABELS"
-        :key="w"
-        type="secondary"
-        strong
-        :style="{ flex: '1 1 0', minWidth: 0, textAlign: 'center' }"
+  <div class="mgrid" :class="[mode, { compact }]">
+    <div v-for="w in ROUTINE_WEEKDAY_LABELS" :key="w" class="wd">{{ compact ? w.charAt(0) : w }}</div>
+    <template v-for="c in cells" :key="c.key">
+      <span v-if="c.blank" class="cell blank" />
+      <button
+        v-else
+        type="button"
+        class="cell"
+        :class="[
+          mode === 'state' ? `s-${c.future && !c.day?.total ? 'future' : (c.day?.state ?? 'empty')}` : `h-${heatLevel(c.day)}`,
+          { sel: selected === c.key, today: c.key === today },
+        ]"
+        :title="title(c)"
+        @click="emit('select', c.key)"
       >
-        {{ compact ? w.charAt(0) : w }}
-      </a-typography-text>
-    </a-flex>
-    <a-flex wrap="wrap" :gap="6">
-      <template v-for="c in cells" :key="c.key">
-        <a-flex
-          v-if="c.blank"
-          :style="{ flex: '0 0 calc((100% - 36px) / 7)', minWidth: 0 }"
-        />
-        <a-button
-          v-else
-          :title="title(c)"
-          :style="{
-            flex: '0 0 calc((100% - 36px) / 7)',
-            minWidth: 0,
-            height: compact ? '44px' : '74px',
-            padding: '8px',
-            background: cellBackground(c),
-            borderColor:
-              selected === c.key
-                ? token.colorPrimary
-                : c.key === today
-                  ? token.colorPrimaryBorder
-                  : undefined,
-            boxShadow: selected === c.key ? `0 0 0 1px ${token.colorPrimary}` : undefined,
-          }"
-          @click="emit('select', c.key)"
-        >
-          <a-flex
-            vertical
-            align="start"
-            justify="space-between"
-            :style="{ width: '100%', height: '100%' }"
-          >
-            <a-typography-text
-              strong
-              :style="c.key === today ? { color: 'var(--ant-color-primary)' } : undefined"
-            >
-              {{ toFaDigits(c.jd) }}
-            </a-typography-text>
-            <a-flex
-              v-if="!compact && c.day?.total"
-              justify="space-between"
-              align="center"
-              :style="{ width: '100%' }"
-            >
-              <a-typography-text type="secondary">
-                {{ toFaDigits(c.day.completed) }}/{{ toFaDigits(c.day.total) }}
-              </a-typography-text>
-              <a-flex
-                v-if="mode === 'state'"
-                :style="{
-                  width: '8px',
-                  height: '8px',
-                  borderRadius: token.borderRadiusLG,
-                  background: STATE_DOT[cellKey(c)],
-                  flexShrink: 0,
-                }"
-              />
-            </a-flex>
-          </a-flex>
-        </a-button>
-      </template>
-    </a-flex>
-  </a-flex>
+        <span class="num">{{ toFaDigits(c.jd) }}</span>
+        <template v-if="!compact && c.day?.total">
+          <span class="frac">{{ toFaDigits(c.day.completed) }}/{{ toFaDigits(c.day.total) }}</span>
+          <i v-if="mode === 'state'" class="dot" />
+        </template>
+      </button>
+    </template>
+  </div>
 </template>
+
+<style scoped>
+.mgrid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.wd {
+  text-align: center;
+  font-size: var(--fs-xs);
+  color: var(--muted);
+  font-weight: var(--fw-semibold);
+  padding-bottom: 2px;
+}
+
+.cell {
+  position: relative;
+  min-height: 74px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 4px;
+  cursor: pointer;
+  font: inherit;
+  text-align: right;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.cell.blank {
+  border: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.cell:not(.blank):hover {
+  border-color: var(--line-strong);
+}
+
+.cell.sel {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+
+.cell.today .num {
+  background: var(--accent);
+  color: #fff;
+}
+
+.num {
+  min-width: 24px;
+  height: 24px;
+  padding: 0 4px;
+  border-radius: 99px;
+  display: inline-grid;
+  place-items: center;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semibold);
+  color: var(--ink);
+}
+
+.frac {
+  font-size: var(--fs-xs);
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.dot {
+  position: absolute;
+  top: 10px;
+  inset-inline-end: 10px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--line-strong);
+}
+
+/* وضعیت روز */
+.s-complete {
+  background: color-mix(in srgb, var(--success-soft) 45%, var(--surface));
+}
+
+.s-complete .dot {
+  background: var(--success);
+}
+
+.s-partial {
+  background: color-mix(in srgb, var(--warning-soft) 45%, var(--surface));
+}
+
+.s-partial .dot {
+  background: var(--warning);
+}
+
+.s-missed {
+  background: color-mix(in srgb, var(--danger-soft) 45%, var(--surface));
+}
+
+.s-missed .dot {
+  background: var(--danger);
+}
+
+.s-future {
+  background: var(--surface);
+}
+
+.s-empty {
+  background: var(--surface);
+}
+
+/* Heatmap */
+.h-0 {
+  background: var(--surface-subtle);
+}
+
+.h-1 {
+  background: color-mix(in srgb, var(--accent) 14%, white);
+}
+
+.h-2 {
+  background: color-mix(in srgb, var(--accent) 32%, white);
+}
+
+.h-3 {
+  background: color-mix(in srgb, var(--accent) 55%, white);
+}
+
+.h-4 {
+  background: color-mix(in srgb, var(--accent) 80%, white);
+}
+
+.h-3 .num,
+.h-4 .num,
+.h-3 .frac,
+.h-4 .frac {
+  color: #fff;
+}
+
+.compact {
+  gap: 4px;
+}
+
+.compact .cell {
+  min-height: 0;
+  aspect-ratio: 1;
+  padding: 2px;
+  align-items: center;
+  justify-content: center;
+  border-color: transparent;
+}
+
+.compact .num {
+  font-size: 0.7rem;
+  min-width: 0;
+  height: auto;
+}
+
+@media (max-width: 700px) {
+  .mgrid {
+    gap: 3px;
+  }
+
+  .cell {
+    min-height: 54px;
+    padding: 4px;
+    align-items: center;
+  }
+
+  .frac {
+    font-size: 0.62rem;
+  }
+
+  .dot {
+    position: static;
+    width: 7px;
+    height: 7px;
+  }
+}
+</style>

apps/web/src/components/routines/TeamPerformanceTable.vue

@@ -1,26 +1,29 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import type { RoutineMemberStatDto } from '@mento/shared';
 import UserAvatar from '@/components/UserAvatar.vue';
 import { toFaDigits } from '@/lib/jalali';
 import { formatMinutes, formatPercent, percentTone } from '@/lib/routines';
-import {
-  Empty as AEmpty,
-  Flex as AFlex,
-  Progress as AProgress,
-  Space as ASpace,
-  Table as ATable,
-  Typography,
-} from 'ant-design-vue';
-import type { TableColumnsType } from 'ant-design-vue';
-
-const { Text: ATypographyText } = Typography;
 
 const props = defineProps<{ members: RoutineMemberStatDto[] }>();
 const emit = defineEmits<{ select: [userId: string] }>();
 
 type SortKey = 'name' | 'total' | 'completed' | 'overdue' | 'skipped' | 'percent' | 'streak' | 'avg';
 
+const sortKey = ref<SortKey>('percent');
+const sortDir = ref<'asc' | 'desc'>('desc');
+
+const columns: Array<{ key: SortKey; label: string }> = [
+  { key: 'name', label: 'کاربر' },
+  { key: 'total', label: 'کل کارها' },
+  { key: 'completed', label: 'انجام شده' },
+  { key: 'overdue', label: 'عقب‌افتاده' },
+  { key: 'skipped', label: 'رد شده' },
+  { key: 'percent', label: 'درصد انجام' },
+  { key: 'streak', label: 'روز پیاپی کامل' },
+  { key: 'avg', label: 'میانگین زمان انجام' },
+];
+
 function value(m: RoutineMemberStatDto, key: SortKey): number | string {
   switch (key) {
     case 'name':
@@ -34,101 +37,155 @@ function value(m: RoutineMemberStatDto, key: SortKey): number | string {
   }
 }
 
-function sorterFor(key: SortKey) {
-  return (a: RoutineMemberStatDto, b: RoutineMemberStatDto) => {
-    const va = value(a, key);
-    const vb = value(b, key);
-    if (typeof va === 'string' && typeof vb === 'string') return va.localeCompare(vb, 'fa');
-    return (va as number) - (vb as number);
-  };
-}
+const rows = computed(() => {
+  const dir = sortDir.value === 'asc' ? 1 : -1;
+  return [...props.members].sort((a, b) => {
+    const va = value(a, sortKey.value);
+    const vb = value(b, sortKey.value);
+    if (typeof va === 'string' && typeof vb === 'string') return va.localeCompare(vb, 'fa') * dir;
+    return ((va as number) - (vb as number)) * dir;
+  });
+});
 
-const columns = computed<TableColumnsType<RoutineMemberStatDto>>(() => [
-  { title: 'کاربر', key: 'name', sorter: sorterFor('name'), defaultSortOrder: undefined },
-  {
-    title: 'کل کارها',
-    key: 'total',
-    sorter: sorterFor('total'),
-    customRender: ({ record }) => toFaDigits(record.total),
-  },
-  {
-    title: 'انجام شده',
-    key: 'completed',
-    sorter: sorterFor('completed'),
-    customRender: ({ record }) => toFaDigits(record.completed),
-  },
-  {
-    title: 'عقب‌افتاده',
-    key: 'overdue',
-    sorter: sorterFor('overdue'),
-    customRender: ({ record }) => toFaDigits(record.overdue),
-  },
-  {
-    title: 'رد شده',
-    key: 'skipped',
-    sorter: sorterFor('skipped'),
-    customRender: ({ record }) => toFaDigits(record.skipped),
-  },
-  { title: 'درصد انجام', key: 'percent', sorter: sorterFor('percent'), defaultSortOrder: 'descend' },
-  {
-    title: 'روز پیاپی کامل',
-    key: 'streak',
-    sorter: sorterFor('streak'),
-    customRender: ({ record }) => toFaDigits(record.streak),
-  },
-  {
-    title: 'میانگین زمان انجام',
-    key: 'avg',
-    sorter: sorterFor('avg'),
-    customRender: ({ record }) => formatMinutes(record.avgCompletionMinutes),
-  },
-]);
-
-const TONE_COLORS: Record<string, string> = {
-  good: 'var(--ant-color-success)',
-  mid: 'var(--ant-color-warning)',
-  low: 'var(--ant-color-error)',
-  none: 'var(--ant-color-text-quaternary)',
-};
-
-function rowProps(record: RoutineMemberStatDto) {
-  return {
-    onClick: () => emit('select', record.user.id),
-    style: { cursor: 'pointer' },
-  };
+function sortBy(key: SortKey) {
+  if (sortKey.value === key) sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+  else {
+    sortKey.value = key;
+    sortDir.value = key === 'name' || key === 'avg' ? 'asc' : 'desc';
+  }
 }
 </script>
 
 <template>
-  <a-table
-    :columns="columns"
-    :data-source="props.members"
-    :pagination="false"
-    :row-key="(r: RoutineMemberStatDto) => r.user.id"
-    :custom-row="rowProps"
-    :scroll="{ x: 'max-content' }"
-  >
-    <template #emptyText>
-      <a-empty description="داده‌ای برای این بازه نیست." />
-    </template>
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'name'">
-        <a-space :size="8">
-          <UserAvatar :name="record.user.fullName" :user-id="record.user.id" :size="28" />
-          <a-typography-text strong>{{ record.user.fullName }}</a-typography-text>
-        </a-space>
-      </template>
-      <template v-else-if="column.key === 'percent'">
-        <a-flex align="center" :gap="8" :style="{ minWidth: '8rem' }">
-          <a-typography-text strong>{{ formatPercent(record.percent) }}</a-typography-text>
-          <a-progress
-            :percent="Math.max(0, Math.min(100, Math.round(record.percent ?? 0)))"
-            :show-info="false"
-            :stroke-color="TONE_COLORS[percentTone(record.percent)]"
-            :style="{ flex: 1 }"
-          />
-        </a-flex>
-      </template>
-    </template>
-  </a-table>
+  <div class="crm-table-container">
+    <table class="crm-table">
+      <thead>
+        <tr>
+          <th
+            v-for="c in columns"
+            :key="c.key"
+            :aria-sort="sortKey === c.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'"
+          >
+            <button type="button" class="sort" :class="{ on: sortKey === c.key }" @click="sortBy(c.key)">
+              {{ c.label }}
+              <span class="arrow">{{ sortKey === c.key ? (sortDir === 'asc' ? '▲' : '▼') : '↕' }}</span>
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="m in rows" :key="m.user.id" class="clickable" @click="emit('select', m.user.id)">
+          <td>
+            <span class="who">
+              <UserAvatar :name="m.user.fullName" :user-id="m.user.id" :size="28" />
+              {{ m.user.fullName }}
+            </span>
+          </td>
+          <td>{{ toFaDigits(m.total) }}</td>
+          <td class="ok">{{ toFaDigits(m.completed) }}</td>
+          <td :class="{ bad: m.overdue > 0 }">{{ toFaDigits(m.overdue) }}</td>
+          <td>{{ toFaDigits(m.skipped) }}</td>
+          <td>
+            <span class="pct" :class="`tone-${percentTone(m.percent)}`">
+              <strong>{{ formatPercent(m.percent) }}</strong>
+              <i><b :style="{ width: `${m.percent ?? 0}%` }" /></i>
+            </span>
+          </td>
+          <td>{{ toFaDigits(m.streak) }}</td>
+          <td class="nowrap">{{ formatMinutes(m.avgCompletionMinutes) }}</td>
+        </tr>
+        <tr v-if="!rows.length">
+          <td colspan="8" class="empty">داده‌ای برای این بازه نیست.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
+
+<style scoped>
+.sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: inherit;
+  cursor: pointer;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.sort.on {
+  color: var(--accent-deep);
+}
+
+.arrow {
+  font-size: 0.6rem;
+  opacity: 0.7;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.who {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  font-weight: var(--fw-medium);
+}
+
+.ok {
+  color: var(--success-deep);
+}
+
+.bad {
+  color: var(--danger);
+  font-weight: var(--fw-semibold);
+}
+
+.pct {
+  display: grid;
+  grid-template-columns: 44px 80px;
+  align-items: center;
+  gap: 8px;
+}
+
+.pct i {
+  height: 6px;
+  border-radius: 99px;
+  background: var(--surface-subtle);
+  overflow: hidden;
+}
+
+.pct b {
+  display: block;
+  height: 100%;
+  background: var(--line-strong);
+}
+
+.tone-good b {
+  background: var(--success);
+}
+
+.tone-mid b {
+  background: var(--warning);
+}
+
+.tone-low b {
+  background: var(--danger);
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.empty {
+  text-align: center;
+  color: var(--muted);
+  padding: var(--sp-6);
+}
+</style>