diff --git a/.cursor/rules/antd-strict-governance.mdc b/.cursor/rules/antd-strict-governance.mdc
new file mode 100644
index 0000000..a8b16f7
--- /dev/null
+++ b/.cursor/rules/antd-strict-governance.mdc
@@ -0,0 +1,85 @@
+---
+description: Hard governance for Ant Design Vue v4 migration — isolated page-by-page, no manual CSS, 24-col grid, default controlHeight 36
+alwaysApply: true
+---
+
+# Ant Design Vue v4 — Strict Governance (locked)
+
+Source of truth for migrated UI: **Ant Design Vue 4** + central theme [`apps/web/src/theme/antdTheme.ts`](apps/web/src/theme/antdTheme.ts).
+
+Legacy CRM UI (`components/ui/*`, `.crm-*`, `.btn` / `.field` in `styles/`) remains for **unmigrated** screens only. Never mix systems inside one page.
+
+## Hard rules
+
+1. **Single-page migration lock**  
+   Migrate **exactly one** route/view (or one clearly named page folder) per change set. Do not “clean up” neighboring pages, shared legacy primitives, or global CSS while migrating a page.
+
+2. **No edits to legacy kit during Ant work**  
+   Do **not** modify `apps/web/src/components/ui/**` or broaden changes across `views/` beyond the single page under migration, unless the user explicitly names that page.
+
+2b. **Child components of a migrated View (mandatory)**  
+   هنگام بازنویسی یک صفحه (View)، ایجنت موظف است علاوه بر خود فایل View، تمام کامپوننت‌های فرزندی را که در آن View ایمپورت شده‌اند و حاوی اینپوت/سلکت/دکمه هستند نیز بازبینی کرده و درون آن‌ها را به کامپوننت‌های رسمی `ant-design-vue` تبدیل کند. هیچ تگ `<input>`, `<select>`, `<textarea>`, `<button>` خامی نباید در صفحه یا کامپوننت‌های فرزندِ مصرفی آن باقی بماند.  
+   When rewriting a View, the agent **must** also review every component imported by that View that contains inputs/selects/buttons, and convert their internals to official `ant-design-vue` controls.  
+   **No raw** `<input>`, `<select>`, `<textarea>`, or `<button>` may remain in the View **or** in those consumed child components. Prefer native Ant equivalents (`a-select` / `mode="multiple|tags"` / `a-time-picker` / …) over custom pickers when logic allows; if domain logic is required (e.g. Jalali), convert that child file to Ant chrome (`a-input` + `a-popover`, etc.) instead of leaving raw HTML. Do **not** leave legacy `UiInput` / `UiSelect` / `UiButton` / `UiField` / `UiTextarea` in the View or those children.
+
+3. **Ant-only UI on migrated pages**  
+   On a migrated page, build controls with Ant Design Vue (`a-button`, `a-form`, `a-table`, `a-card`, …) and `@ant-design/icons-vue`. Do **not** introduce new usage of `UiButton`, `UiInput`, `.btn`, `.field`, or ad-hoc HTML form controls for the same job.
+
+4. **Ban manual CSS for layout/look**  
+   On migrated pages:
+   - No new `<style scoped>` rules for color, spacing, radius, shadow, typography, or layout that Ant already covers.
+   - No hardcoded hex / `rgb()` for chrome UI (charts/data palettes may be excepted when not chrome).
+   - Prefer ConfigProvider theme tokens, component props, and Ant space/grid utilities.
+   - Inline `style` only for rare one-off values that tokens cannot express; prefer tokens first.
+
+5. **Default Ant control size (`controlHeight: 36`) — no manual `size`**  
+   - Global default comes from theme token `controlHeight: 36` in `antdTheme.ts` (Ant derives SM/LG from this).
+   - Do **not** set `size="small"`, `size="middle"`, `size="large"`, or `:size` on `a-button`, `a-input`, `a-select`, `a-input-number`, `a-date-picker`, `a-radio-group`, `a-pagination`, or similar controls on migrated pages.
+   - Do **not** override `controlHeight` / `controlHeightSM` / `controlHeightLG` inside `components.*` of the theme — inherit the token default.
+   - Exception: only if the user explicitly requests a one-off non-default size for a named control.
+
+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**  
+   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).
+
+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.
+
+10. **Icons**  
+    Use `@ant-design/icons-vue` on migrated pages. Do not expand `UiIcon` for Ant pages.
+
+11. **Isolation guarantee**  
+    Infrastructure PRs (deps, vite plugin, theme, App `ConfigProvider`) must not change behavior of unmigrated pages. No `ant-design-vue/dist/reset.css` (or similar global reset) unless explicitly approved — it can break legacy CSS.
+
+## Allowed on migrated pages
+
+- Ant Design Vue 4 components and their props/slots (except banned manual `size` on controls)
+- `a-row` / `a-col` (24 columns), `a-space`, `a-flex` where appropriate
+- Theme tokens via ConfigProvider
+- Minimal page-local script logic (data fetching, forms) unchanged in spirit
+
+## Forbidden on migrated pages
+
+- New legacy `components/ui` usage
+- Parallel button/input CSS classes (`.btn`, `.field`, `.crm-*` for chrome that Ant replaces)
+- Custom CSS that re-skins Ant components
+- Manual `size` props on form/action controls (use theme default 36px)
+- Multi-page refactors “while we’re here”
+- Adding Tailwind/Bootstrap/other UI kits
+
+## Agent checklist before finishing a migration PR
+
+- [ ] Only one page/route touched for UI migration
+- [ ] Imported child components with controls also converted to Ant (no raw HTML left)
+- [ ] Grep verification: `<input|<select|<textarea|<button|UiInput|UiSelect|UiField|UiTextarea|UiButton` count is **0** in the View + those children
+- [ ] No changes under `components/ui/`
+- [ ] No new scoped CSS for look-and-feel
+- [ ] No manual `size` on Ant controls
+- [ ] Layout uses 24-col Ant grid
+- [ ] Uses `antdTheme` / ConfigProvider / StyleProvider `hash-priority="high"` — no local theme fork
+- [ ] `npm run build -w @mento/web` (or `vue-tsc`) passes
diff --git a/.cursor/skills/antd-system-architect/SKILL.md b/.cursor/skills/antd-system-architect/SKILL.md
new file mode 100644
index 0000000..ea38348
--- /dev/null
+++ b/.cursor/skills/antd-system-architect/SKILL.md
@@ -0,0 +1,86 @@
+---
+name: antd-system-architect
+description: >-
+  Architect and migrate Montact web UI to Ant Design Vue v4 under strict
+  governance: single-page lock, no manual CSS, no manual size props, default
+  controlHeight 36, 24-column grid, central antdTheme, isolated from legacy
+  components/ui. Use when migrating a page to Ant Design, adding Ant components,
+  editing antdTheme, or reviewing Ant PRs.
+---
+
+# Ant Design Vue System Architect (Montact)
+
+## When to use
+
+- Migrating any `apps/web` view/page to Ant Design Vue 4
+- Extending [`apps/web/src/theme/antdTheme.ts`](../../../apps/web/src/theme/antdTheme.ts)
+- Touching Ant ConfigProvider / vite Ant auto-import
+- Reviewing whether a change violates isolation from legacy UI
+
+Also read and obey [`.cursor/rules/antd-strict-governance.mdc`](../../rules/antd-strict-governance.mdc).
+
+## Non-negotiables
+
+1. **One page per migration** — never batch unrelated views.
+2. **Do not edit** `apps/web/src/components/ui/**` during Ant migration work.
+3. **Child components of the View are in scope (mandatory)** — هنگام بازنویسی یک صفحه (View)، ایجنت موظف است علاوه بر خود فایل View، تمام کامپوننت‌های فرزندی را که در آن View ایمپورت شده‌اند و حاوی اینپوت/سلکت/دکمه هستند نیز بازبینی کرده و درون آن‌ها را به کامپوننت‌های رسمی `ant-design-vue` تبدیل کند. هیچ تگ `<input>`, `<select>`, `<textarea>`, `<button>` خامی نباید در صفحه یا کامپوننت‌های فرزندِ مصرفی آن باقی بماند. When rewriting a View, also open every imported child that renders inputs/selects/buttons and convert them to official `ant-design-vue` controls. No raw `<input>`, `<select>`, `<textarea>`, or `<button>` (and no `UiInput` / `UiSelect` / `UiButton` / `UiField` / `UiTextarea`) may remain in the View or those children. Prefer Ant natives (`a-select` multiple/tags, `a-time-picker`, …); for Jalali/domain pickers, convert the child file to Ant chrome (`a-input` + `a-popover`, etc.).
+4. **No manual look CSS** on migrated pages (no new scoped colors/spacing/radius/shadows for chrome).
+5. **24-column Ant grid** (`a-row` / `a-col`) for page layout.
+6. **Theme only in** `apps/web/src/theme/antdTheme.ts`.
+7. **Default control height is 36** via token `controlHeight: 36`. Do **not** pass `size` / `:size` on buttons, inputs, selects, or similar controls; do **not** set per-component `controlHeight*` in the theme `components` map.
+8. **Auto-import** `<a-*>` via `AntDesignVueResolver({ importStyle: false })` — no per-file style imports. Root uses `StyleProvider` with `hash-priority="high"` so legacy `main.css` cannot override Ant.
+9. **No global Ant reset CSS** that would restyle legacy pages.
+
+## Stack facts (this repo)
+
+| Piece | Location |
+|---|---|
+| 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 | `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 |
+
+## Migration workflow
+
+1. Confirm the **single** route/view the user named.
+2. Inventory current UI: legacy `Ui*`, `.btn`/`.field`, `.crm-*`, custom tables.
+3. List all imported children that contain controls; convert them in the same pass (except `components/ui/**`).
+4. Replace with Ant equivalents:
+   - Button → `a-button` (**no** `size` prop)
+   - Input/Select/Form field → `a-form` + `a-form-item` + `a-input` / `a-select` / … (**no** `size`)
+   - Modal/Drawer → `a-modal` / `a-drawer`
+   - Table → `a-table` (columns via Ant API)
+   - Page chrome → `a-card`, title + `a-space`, layout via `a-row`/`a-col`
+   - Icons → `@ant-design/icons-vue`
+5. Remove page-local CSS that only existed to skin the old controls.
+6. Keep business logic, API calls, and router behavior intact.
+7. Grep-verify zero hits for `<input|<select|<textarea|<button|UiInput|UiSelect|UiField|UiTextarea|UiButton` in the View + converted children.
+8. Run `npm run build -w @mento/web` (or at least `vue-tsc -b` in `apps/web`).
+9. Smoke-check that **other** routes still render with legacy UI unchanged.
+
+## Theme extension rules
+
+- Change tokens in `antdTheme.ts` only when the user asks or when a migrated page proves a missing token.
+- Keep `controlHeight: 36` as the single source for control sizing; let Ant derive SM/LG.
+- Prefer `token` and limited `components.Card` / `components.Form` overrides — never per-control `controlHeight` forks.
+- Do not duplicate `ThemeConfig` objects inside views.
+
+## Anti-patterns (reject)
+
+- Importing both `UiButton` and `a-button` on the same migrated page
+- Adding `ant-design-vue/dist/reset.css` “to fix spacing”
+- Editing `components/ui` to “look more like Ant”
+- `size="small|middle|large"` on Ant controls
+- Multi-page visual refactors in one PR
+- Custom CSS overriding `.ant-btn` / `.ant-input` selectors
+
+## Done criteria
+
+- Migrated page uses Ant components + 24-col grid
+- Imported control-bearing children also Ant-pure (grep = 0)
+- Controls use theme default height (no manual `size`)
+- No new manual chrome CSS
+- Legacy kit untouched
+- Build/typecheck clean
+- Unmigrated pages untouched in the diff
diff --git a/apps/web/package.json b/apps/web/package.json
index b006b77..d04ba16 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,7 +10,9 @@
     "lint": "echo \"web lint placeholder\""
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
     "@mento/shared": "*",
+    "ant-design-vue": "^4.2.6",
     "axios": "^1.8.4",
     "echarts": "^6.1.0",
     "pinia": "^3.0.1",
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index 69dd87a..2d34b87 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
+import {
+  ConfigProvider as AConfigProvider,
+  StyleProvider as AStyleProvider,
+} from 'ant-design-vue';
+import faIR from 'ant-design-vue/es/locale/fa_IR';
+import { antdTheme } from '@/theme/antdTheme';
 </script>
 
 <template>
-  <RouterView />
+  <a-style-provider hash-priority="high">
+    <a-config-provider direction="rtl" :locale="faIR" :theme="antdTheme">
+      <RouterView />
+    </a-config-provider>
+  </a-style-provider>
 </template>
diff --git a/apps/web/src/components.d.ts b/apps/web/src/components.d.ts
new file mode 100644
index 0000000..526bc7b
--- /dev/null
+++ b/apps/web/src/components.d.ts
@@ -0,0 +1,66 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AAffix: typeof import('ant-design-vue/es')['Affix']
+    AAlert: typeof import('ant-design-vue/es')['Alert']
+    AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    ABadge: typeof import('ant-design-vue/es')['Badge']
+    ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
+    ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckableTag: typeof import('ant-design-vue/es')['CheckableTag']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACol: typeof import('ant-design-vue/es')['Col']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
+    ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
+    ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
+    AFlex: typeof import('ant-design-vue/es')['Flex']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopover: typeof import('ant-design-vue/es')['Popover']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
+    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASpace: typeof import('ant-design-vue/es')['Space']
+    ASpaceCompact: typeof import('ant-design-vue/es')['Compact']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATabPane: typeof import('ant-design-vue/es')['TabPane']
+    ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
+    ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
+    ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
diff --git a/apps/web/src/components/CustomFieldsSection.vue b/apps/web/src/components/CustomFieldsSection.vue
index 6cdca03..54ab569 100644
--- a/apps/web/src/components/CustomFieldsSection.vue
+++ b/apps/web/src/components/CustomFieldsSection.vue
@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue';
+import {
+  Checkbox as ACheckbox,
+  Col as ACol,
+  FormItem as AFormItem,
+  Input as AInput,
+  InputNumber as AInputNumber,
+  Row as ARow,
+  Select as ASelect,
+  Spin as ASpin,
+  Typography,
+} from 'ant-design-vue';
 import { api } from '@/lib/api';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
-import { UiField, UiInput, UiSelect } from '@/components/ui';
 import type {
   CustomFieldDefinitionDto,
   CustomFieldEntity,
 } from '@mento/shared';
 
+const { Title: ATypographyTitle } = Typography;
+
 const props = defineProps<{
   entityType: CustomFieldEntity;
   modelValue: Record<string, unknown>;
@@ -46,6 +58,10 @@ function displayValue(key: string) {
   return String(v);
 }
 
+function selectOptions(field: CustomFieldDefinitionDto) {
+  return (field.options ?? []).map((opt) => ({ value: opt, label: opt }));
+}
+
 watch(
   () => props.entityType,
   () => {
@@ -57,110 +73,61 @@ onMounted(load);
 </script>
 
 <template>
-  <div v-if="loading" class="muted">بارگذاری فیلدهای سفارشی…</div>
-  <div v-else-if="fields.length" class="custom-block">
-    <h3 class="custom-title">فیلدهای سفارشی</h3>
-    <div class="crm-form-grid-2">
-      <UiField
-        v-for="field in fields"
-        :key="field.id"
-        :label="field.label"
-        :required="field.required"
-        :for-id="`cf-${field.key}`"
-      >
-        <UiSelect
-          v-if="field.fieldType === 'select'"
-          :id="`cf-${field.key}`"
-          :model-value="String(displayValue(field.key))"
-          @update:model-value="setValue(field.key, $event)"
-        >
-          <option value="">انتخاب کنید</option>
-          <option v-for="opt in field.options" :key="opt" :value="opt">
-            {{ opt }}
-          </option>
-        </UiSelect>
-
-        <label v-else-if="field.fieldType === 'boolean'" class="cf-check">
-          <input
+  <a-spin v-if="loading" />
+  <template v-else-if="fields.length">
+    <a-typography-title :level="5" :style="{ marginTop: '16px' }">
+      فیلدهای سفارشی
+    </a-typography-title>
+    <a-row :gutter="[16, 0]">
+      <a-col v-for="field in fields" :key="field.id" :xs="24" :md="12">
+        <a-form-item :label="field.label" :required="field.required">
+          <a-select
+            v-if="field.fieldType === 'select'"
             :id="`cf-${field.key}`"
-            type="checkbox"
-            :checked="Boolean(props.modelValue[field.key])"
-            @change="
-              setValue(field.key, ($event.target as HTMLInputElement).checked)
-            "
+            allow-clear
+            :value="String(displayValue(field.key)) || undefined"
+            :options="selectOptions(field)"
+            placeholder="انتخاب کنید"
+            style="width: 100%"
+            @update:value="setValue(field.key, $event ?? '')"
           />
-          <span>فعال</span>
-        </label>
 
-        <UiInput
-          v-else-if="field.fieldType === 'number'"
-          :id="`cf-${field.key}`"
-          type="number"
-          :model-value="props.modelValue[field.key] != null ? Number(props.modelValue[field.key]) : ''"
-          @update:model-value="
-            setValue(
-              field.key,
-              $event === '' || $event == null ? null : Number($event),
-            )
-          "
-        />
+          <a-checkbox
+            v-else-if="field.fieldType === 'boolean'"
+            :id="`cf-${field.key}`"
+            :checked="Boolean(props.modelValue[field.key])"
+            @update:checked="setValue(field.key, $event)"
+          >
+            فعال
+          </a-checkbox>
 
-        <JalaliDateInput
-          v-else-if="field.fieldType === 'date'"
-          :id="`cf-${field.key}`"
-          :model-value="String(displayValue(field.key))"
-          @update:model-value="setValue(field.key, $event || null)"
-        />
+          <a-input-number
+            v-else-if="field.fieldType === 'number'"
+            :id="`cf-${field.key}`"
+            :value="
+              props.modelValue[field.key] != null
+                ? Number(props.modelValue[field.key])
+                : undefined
+            "
+            style="width: 100%"
+            @update:value="setValue(field.key, $event == null ? null : Number($event))"
+          />
 
-        <UiInput
-          v-else
-          :id="`cf-${field.key}`"
-          type="text"
-          :model-value="String(displayValue(field.key))"
-          @update:model-value="setValue(field.key, $event)"
-        />
-      </UiField>
-    </div>
-  </div>
+          <JalaliDateInput
+            v-else-if="field.fieldType === 'date'"
+            :id="`cf-${field.key}`"
+            :model-value="String(displayValue(field.key))"
+            @update:model-value="setValue(field.key, $event || null)"
+          />
+
+          <a-input
+            v-else
+            :id="`cf-${field.key}`"
+            :value="String(displayValue(field.key))"
+            @update:value="setValue(field.key, $event)"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </template>
 </template>
-
-<style scoped>
-.custom-block {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
-  padding-top: var(--sp-4);
-  border-top: 1px dashed var(--line);
-  width: 100%;
-}
-
-.custom-title {
-  margin: 0;
-  font-size: var(--fs-sm);
-  font-weight: var(--fw-semibold);
-  color: var(--ink-secondary);
-}
-
-.muted {
-  color: var(--muted);
-  font-size: var(--fs-xs);
-}
-
-.cf-check {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-2);
-  min-height: var(--control-h-md);
-  font-size: var(--fs-base);
-  font-weight: var(--fw-medium);
-  color: var(--ink);
-  cursor: pointer;
-}
-
-.cf-check input[type='checkbox'] {
-  width: 18px;
-  height: 18px;
-  accent-color: var(--accent);
-  cursor: pointer;
-}
-</style>
diff --git a/apps/web/src/components/EntityTimeline.vue b/apps/web/src/components/EntityTimeline.vue
index 7a750d6..c1ff1a1 100644
--- a/apps/web/src/components/EntityTimeline.vue
+++ b/apps/web/src/components/EntityTimeline.vue
@@ -1,6 +1,24 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import { RouterLink } from 'vue-router';
+import {
+  Alert as AAlert,
+  Button as AButton,
+  Card as ACard,
+  Empty as AEmpty,
+  Flex as AFlex,
+  Input as AInput,
+  List as AList,
+  Space as ASpace,
+  Spin as ASpin,
+  Tag as ATag,
+  Textarea as ATextarea,
+  Typography,
+} from 'ant-design-vue';
+
+const ASpaceCompact = ASpace.Compact;
+const AListItem = AList.Item;
+const AListItemMeta = AList.Item.Meta;
 import { api } from '@/lib/api';
 import { formatJalaliDateTime } from '@/lib/jalali';
 import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
@@ -11,6 +29,9 @@ import type {
   PaginatedResponse,
 } from '@mento/shared';
 
+const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
+  Typography;
+
 const props = defineProps<{
   entityType: 'person' | 'company' | 'deal';
   entityId: string;
@@ -187,210 +208,102 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="timeline">
-    <header class="head">
-      <h3>تایم‌لاین</h3>
-      <p class="muted">یادداشت‌ها و فعالیت‌های مرتبط با این پرونده</p>
-    </header>
+  <a-card :bordered="false" :style="{ marginTop: '16px' }">
+    <a-typography-title :level="5" :style="{ margin: 0 }">تایم‌لاین</a-typography-title>
+    <a-typography-text type="secondary">
+      یادداشت‌ها و فعالیت‌های مرتبط با این پرونده
+    </a-typography-text>
 
-    <div class="composers">
-      <div class="composer">
-        <textarea
-          v-model="noteDraft"
-          rows="2"
-          placeholder="یادداشت سریع…"
-          @keydown.ctrl.enter.prevent="addNote"
+    <a-flex vertical :gap="12" :style="{ marginTop: '16px' }">
+      <a-textarea
+        v-model:value="noteDraft"
+        :rows="2"
+        placeholder="یادداشت سریع…"
+        @keydown.ctrl.enter.prevent="addNote"
+      />
+      <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
+        <VoiceToTextButton
+          @transcript="(text) => (noteDraft = appendSpokenText(noteDraft, text))"
         />
-        <div class="compose-actions">
-          <VoiceToTextButton @transcript="(text) => (noteDraft = appendSpokenText(noteDraft, text))" />
-          <button class="btn" type="button" :disabled="saving || !noteDraft.trim()" @click="addNote">
-            ثبت یادداشت
-          </button>
-        </div>
-      </div>
-      <div class="composer">
-        <input
-          v-model="activityDraft"
-          type="text"
+        <a-button
+          type="primary"
+          :disabled="saving || !noteDraft.trim()"
+          :loading="saving"
+          @click="addNote"
+        >
+          ثبت یادداشت
+        </a-button>
+      </a-flex>
+
+      <a-space-compact block style="width: 100%">
+        <a-input
+          v-model:value="activityDraft"
           placeholder="عنوان فعالیت / پیگیری…"
-          @keydown.enter.prevent="addActivity"
+          style="width: 100%"
+          @pressEnter="addActivity"
         />
-        <button
-          class="btn btn-ghost"
-          type="button"
+        <a-button
           :disabled="saving || !activityDraft.trim()"
           @click="addActivity"
         >
           افزودن فعالیت
-        </button>
-      </div>
-    </div>
+        </a-button>
+      </a-space-compact>
+    </a-flex>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="loading" class="muted">در حال بارگذاری…</p>
-    <ul v-else-if="items.length" class="list">
-      <li v-for="item in items" :key="item.key" :class="['item', item.kind, { done: item.done }]">
-        <div class="item-main">
-          <span class="badge">{{ item.meta }}</span>
-          <strong>{{ item.title }}</strong>
-          <p v-if="item.body" class="body">{{ item.body }}</p>
-          <time>{{ formatTime(item.at) }}</time>
-        </div>
-        <div class="item-actions">
-          <RouterLink :to="item.href">باز کردن</RouterLink>
-          <button
-            v-if="item.kind === 'activity' && !item.done"
-            class="linkish"
-            type="button"
-            @click="completeActivity(item)"
-          >
-            انجام شد
-          </button>
-        </div>
-      </li>
-    </ul>
-    <p v-else class="muted">هنوز چیزی در تایم‌لاین نیست. یک یادداشت یا فعالیت ثبت کنید.</p>
-  </section>
+    <a-alert
+      v-if="error"
+      type="error"
+      show-icon
+      :message="error"
+      :style="{ marginTop: '12px' }"
+    />
+
+    <a-spin :spinning="loading">
+      <a-list
+        v-if="items.length"
+        item-layout="horizontal"
+        :data-source="items"
+        :style="{ marginTop: '16px' }"
+      >
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-list-item-meta>
+              <template #title>
+                <a-space :size="8">
+                  <a-tag :bordered="false">{{ item.meta }}</a-tag>
+                  <span>{{ item.title }}</span>
+                </a-space>
+              </template>
+              <template #description>
+                <a-typography-paragraph
+                  v-if="item.body"
+                  type="secondary"
+                  :style="{ marginBottom: '4px' }"
+                >
+                  {{ item.body }}
+                </a-typography-paragraph>
+                <a-typography-text type="secondary">{{ formatTime(item.at) }}</a-typography-text>
+              </template>
+            </a-list-item-meta>
+            <template #actions>
+              <RouterLink :to="item.href">باز کردن</RouterLink>
+              <a-button
+                v-if="item.kind === 'activity' && !item.done"
+                type="link"
+                @click="completeActivity(item)"
+              >
+                انجام شد
+              </a-button>
+            </template>
+          </a-list-item>
+        </template>
+      </a-list>
+      <a-empty
+        v-else-if="!loading"
+        description="هنوز چیزی در تایم‌لاین نیست. یک یادداشت یا فعالیت ثبت کنید."
+        :style="{ marginTop: '16px' }"
+      />
+    </a-spin>
+  </a-card>
 </template>
-
-<style scoped>
-.timeline {
-  margin-top: 1.25rem;
-  padding-top: 1.1rem;
-  border-top: 1px solid var(--line);
-  display: grid;
-  gap: 0.9rem;
-}
-
-.head h3 {
-  margin: 0 0 0.25rem;
-  font-size: 1.05rem;
-}
-
-.head .muted {
-  margin: 0;
-}
-
-.composers {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.composer {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.composer textarea,
-.composer input {
-  width: 100%;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.7rem 0.85rem;
-  background: #fff;
-}
-
-.compose-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.55rem;
-}
-
-.item {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.75rem;
-  align-items: flex-start;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.75rem 0.85rem;
-  background: #fbfcfb;
-}
-
-@media (max-width: 640px) {
-  .item {
-    flex-direction: column;
-  }
-
-  .item-actions {
-    justify-items: start;
-    flex-direction: row;
-    display: flex;
-    gap: 0.75rem;
-  }
-}
-
-.item.note {
-  border-right: 3px solid var(--accent);
-}
-
-.item.activity {
-  border-right: 3px solid #b7791f;
-}
-
-.item.done {
-  opacity: 0.72;
-}
-
-.item-main {
-  display: grid;
-  gap: 0.2rem;
-  min-width: 0;
-}
-
-.badge {
-  font-size: 0.75rem;
-  color: var(--muted);
-}
-
-.body {
-  margin: 0;
-  color: var(--muted);
-  font-size: 0.9rem;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-time {
-  font-size: 0.78rem;
-  color: var(--muted);
-}
-
-.item-actions {
-  display: grid;
-  gap: 0.35rem;
-  justify-items: end;
-  flex-shrink: 0;
-}
-
-.item-actions a,
-.linkish {
-  border: 0;
-  background: transparent;
-  color: var(--accent);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.85rem;
-  padding: 0;
-}
-
-.error {
-  color: var(--danger);
-  margin: 0;
-}
-
-.muted {
-  color: var(--muted);
-  margin: 0;
-}
-</style>
diff --git a/apps/web/src/components/ExcelImportFlow.vue b/apps/web/src/components/ExcelImportFlow.vue
index c36d647..6eb541f 100644
--- a/apps/web/src/components/ExcelImportFlow.vue
+++ b/apps/web/src/components/ExcelImportFlow.vue
@@ -13,7 +13,20 @@ import {
   readMappedRowsClient,
   type ClientExcelReadOptions,
 } from '@/lib/excel-client';
-import { UiBusyOverlay, UiButton, UiModal, UiSelect } from '@/components/ui';
+import {
+  Col as ACol,
+  Flex as AFlex,
+  Modal as AModal,
+  Progress as AProgress,
+  Row as ARow,
+  Select as ASelect,
+  Spin as ASpin,
+  Typography,
+  Upload as AUpload,
+} from 'ant-design-vue';
+import type { UploadProps } from 'ant-design-vue';
+
+const { Text: ATypographyText, Paragraph: ATypographyParagraph } = Typography;
 
 const props = defineProps<{
   previewPath: string;
@@ -48,7 +61,6 @@ const emit = defineEmits<{
   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>>({});
@@ -77,11 +89,6 @@ 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;
@@ -367,11 +374,13 @@ function apiMessage(e: unknown, fallback: string) {
   return `${fallback} (کد ${status})`;
 }
 
-async function onFile(ev: Event) {
-  const el = ev.target as HTMLInputElement;
-  const file = el.files?.[0];
-  el.value = '';
-  if (!file) return;
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+  void handleExcelFile(file as File);
+  return false;
+};
+
+async function handleExcelFile(file: File) {
+  if (props.disabled || submitting.value) return;
   emit('start');
   submitting.value = true;
   phase.value = 'preview';
@@ -413,7 +422,6 @@ async function onFile(ev: Event) {
     }
     phase.value = 'idle';
     submitting.value = false;
-    // Allow parent toolbar while user maps columns.
     emit('settled');
   } catch (e) {
     emit('fail', apiMessage(e, 'خواندن فایل اکسل ناموفق بود'));
@@ -443,126 +451,85 @@ async function confirmMapping() {
 </script>
 
 <template>
-  <span class="excel-import" :class="{ isBusy: submitting }" @click.stop="pick">
+  <a-upload
+    :show-upload-list="false"
+    :disabled="disabled || submitting"
+    accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    :before-upload="beforeUpload"
+    @click.stop
+  >
     <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>
+  </a-upload>
 
-  <UiBusyOverlay
+  <a-modal
     :open="busyOpen"
-    :message="busyMessage"
-    :progress="busyProgress"
-    nest
-  />
+    :footer="null"
+    :closable="false"
+    :mask-closable="false"
+    :keyboard="false"
+    centered
+  >
+    <a-flex vertical align="center" :gap="16">
+      <a-spin />
+      <a-typography-text>{{ busyMessage }}</a-typography-text>
+      <a-progress
+        v-if="busyProgress != null"
+        :percent="busyProgress"
+        style="width: 100%"
+      />
+    </a-flex>
+  </a-modal>
 
-  <UiModal :open="!!preview" title="تطبیق ستون‌های اکسل" @close="closeMapper">
-    <p class="lead">
+  <a-modal
+    :open="!!preview"
+    title="تطبیق ستون‌های اکسل"
+    :confirm-loading="submitting"
+    ok-text="ورود فایل"
+    cancel-text="انصراف"
+    :ok-button-props="{ disabled: !canImport }"
+    @ok="confirmMapping"
+    @cancel="closeMapper"
+  >
+    <a-typography-paragraph type="secondary">
       ستون‌های این فایل با قالب سیستم یکی نیست. مشخص کنید هر ستون فایل در کدام فیلد ریخته شود.
-    </p>
-    <p v-if="preview?.largeFile" class="large-hint">
+    </a-typography-paragraph>
+    <a-typography-paragraph v-if="preview?.largeFile" type="secondary">
       فایل بزرگ است ({{ (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>
+    </a-typography-paragraph>
+    <a-flex vertical :gap="12">
+      <a-row
+        v-for="col in preview?.columns ?? []"
+        :key="col.header"
+        :gutter="[16, 8]"
+        align="middle"
+      >
+        <a-col :xs="24" :md="12">
+          <a-typography-text strong>{{ col.header }}</a-typography-text>
+          <div v-if="col.samples.length">
+            <a-typography-text type="secondary">
+              نمونه: {{ col.samples.join('، ') }}
+            </a-typography-text>
+          </div>
+        </a-col>
+        <a-col :xs="24" :md="12">
+          <a-select
+            :value="mapping[col.header] ?? ''"
+            :disabled="submitting"
+            style="width: 100%"
+            :options="[
+              { value: '', label: 'نادیده بگیر' },
+              ...(preview?.fields ?? []).map((field) => ({
+                value: field.key,
+                label: field.required ? `${field.label} *` : field.label,
+              })),
+            ]"
+            @update:value="(v) => setColumnField(col.header, String(v ?? ''))"
+          />
+        </a-col>
+      </a-row>
+    </a-flex>
+    <a-typography-text v-if="!canImport" type="danger">
+      فیلدهای ستاره‌دار را حتماً به یک ستون وصل کنید.
+    </a-typography-text>
+  </a-modal>
 </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>
diff --git a/apps/web/src/components/InvoiceDocPreview.vue b/apps/web/src/components/InvoiceDocPreview.vue
new file mode 100644
index 0000000..a362535
--- /dev/null
+++ b/apps/web/src/components/InvoiceDocPreview.vue
@@ -0,0 +1,427 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import {
+  Button as AButton,
+  Flex as AFlex,
+  Modal as AModal,
+  Segmented as ASegmented,
+  Space as ASpace,
+  Typography,
+} from 'ant-design-vue';
+import { PrinterOutlined } from '@ant-design/icons-vue';
+import { brand } from '@mento/shared';
+import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
+import { formatMoney, currencySuffix } from '@/lib/money';
+
+const { Text: ATypographyText } = Typography;
+
+export type PreviewLine = {
+  name: string;
+  description?: string;
+  sku?: string;
+  quantity: number;
+  unitPrice: number;
+  total: number;
+};
+
+type PaperSize = 'A4' | 'A5';
+
+const props = defineProps<{
+  open: boolean;
+  docMode: 'invoice' | 'quote' | 'credit';
+  orgName: string;
+  number: string;
+  title: string;
+  statusLabel: string;
+  issuedAt: string;
+  dueOrValid: string;
+  dueOrValidLabel: string;
+  customerName: string;
+  customerSub?: string;
+  notes: string;
+  currency: string;
+  lines: PreviewLine[];
+  subtotal: number;
+  discount: number;
+  taxAmount: number;
+  taxPercent: number;
+  payable: number;
+}>();
+
+const emit = defineEmits<{
+  'update:open': [value: boolean];
+}>();
+
+const paperSize = ref<PaperSize>('A4');
+
+const thStyle = {
+  padding: '7px 8px',
+  textAlign: 'right' as const,
+  color: '#6b7280',
+  fontWeight: '700',
+  fontSize: '11px',
+  borderBottom: '1px solid #e5e7eb',
+};
+const tdStyle = {
+  padding: '7px 8px',
+  textAlign: 'right' as const,
+  borderBottom: '1px solid #e5e7eb',
+  verticalAlign: 'top' as const,
+};
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) paperSize.value = 'A4';
+  },
+);
+
+const paperOptions = [
+  { value: 'A4', label: 'A4' },
+  { value: 'A5', label: 'A5' },
+];
+
+const docTypeLabel = computed(() => {
+  if (props.docMode === 'quote') return 'پیش‌فاکتور';
+  if (props.docMode === 'credit') return 'فاکتور برگشتی';
+  return 'فاکتور فروش';
+});
+
+const accent = '#10b981';
+
+const displayNumber = computed(() => props.number?.trim() || 'پیش‌نویس');
+
+const paperWidth = computed(() => (paperSize.value === 'A5' ? 520 : 720));
+
+function faDate(value: string) {
+  if (!value) return '—';
+  try {
+    return formatJalaliNumeric(new Date(value));
+  } catch {
+    return value;
+  }
+}
+
+function close() {
+  emit('update:open', false);
+}
+
+function escapeHtml(value: string) {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function money(n: number) {
+  return formatMoney(n, props.currency);
+}
+
+function printSheet() {
+  const size = paperSize.value;
+  const rowsHtml = props.lines.length
+    ? props.lines
+        .map(
+          (line, index) => `<tr>
+            <td>${toFaDigits(index + 1)}</td>
+            <td>
+              <strong>${escapeHtml(line.name)}</strong>
+              ${line.description ? `<div class="sub">${escapeHtml(line.description)}</div>` : ''}
+            </td>
+            <td class="ltr">${escapeHtml(line.sku || '—')}</td>
+            <td>${toFaDigits(line.quantity)}</td>
+            <td class="ltr">${escapeHtml(money(line.unitPrice))}</td>
+            <td class="ltr">${escapeHtml(money(line.total))}</td>
+          </tr>`,
+        )
+        .join('')
+    : `<tr><td colspan="6" class="empty">ردیفی ثبت نشده است</td></tr>`;
+
+  const win = window.open('', '_blank', 'noopener,noreferrer,width=900,height=1200');
+  if (!win) return;
+
+  const html = `<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+  <meta charset="utf-8" />
+  <title>${escapeHtml(docTypeLabel.value)} ${escapeHtml(displayNumber.value)}</title>
+  <style>
+    @page { size: ${size}; margin: 12mm; }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "IRANSans", Tahoma, sans-serif;
+      color: #111827;
+      font-size: ${size === 'A5' ? '11px' : '12.5px'};
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+    .top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
+    .org { font-size: ${size === 'A5' ? '15px' : '18px'}; font-weight: 800; margin: 0; }
+    .doc { text-align: left; }
+    .doc-type { color: ${accent}; font-weight: 800; font-size: ${size === 'A5' ? '13px' : '15px'}; }
+    .num { font-weight: 700; direction: ltr; unicode-bidi: isolate; margin-top: 4px; }
+    .grid {
+      display: grid;
+      grid-template-columns: 1.2fr 1fr 1fr;
+      gap: 8px 16px;
+      padding: 10px 0;
+      border-top: 1px solid #e5e7eb;
+      border-bottom: 1px solid #e5e7eb;
+      margin-bottom: 14px;
+    }
+    .lbl { color: #6b7280; font-size: 11px; display: block; margin-bottom: 2px; }
+    .val { font-weight: 600; }
+    table { width: 100%; border-collapse: collapse; }
+    th, td { padding: 7px 8px; border-bottom: 1px solid #e5e7eb; text-align: right; vertical-align: top; }
+    th { color: #6b7280; font-weight: 700; font-size: 11px; background: #f9fafb; }
+    .sub { color: #6b7280; font-size: 11px; margin-top: 2px; }
+    .empty { text-align: center; color: #9ca3af; padding: 16px !important; }
+    .ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
+    .foot {
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+      margin-top: 14px;
+      align-items: flex-start;
+    }
+    .notes { flex: 1; color: #374151; }
+    .totals { width: 240px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; }
+    .t-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
+    .t-row.pay { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e7eb; font-weight: 800; color: ${accent}; }
+    .muted { color: #6b7280; }
+  </style>
+</head>
+<body>
+  <div class="top">
+    <div>
+      <p class="org">${escapeHtml(props.orgName || brand.nameFa)}</p>
+      <div class="muted">${escapeHtml(docTypeLabel.value)}</div>
+    </div>
+    <div class="doc">
+      <div class="doc-type">${escapeHtml(docTypeLabel.value)}</div>
+      <div class="num">${escapeHtml(displayNumber.value)}</div>
+    </div>
+  </div>
+  <div class="grid">
+    <div><span class="lbl">صادر برای</span><div class="val">${escapeHtml(props.customerName || '—')}</div>
+      ${props.customerSub ? `<div class="sub">${escapeHtml(props.customerSub)}</div>` : ''}
+    </div>
+    <div><span class="lbl">عنوان</span><div class="val">${escapeHtml(props.title || docTypeLabel.value)}</div></div>
+    <div><span class="lbl">وضعیت</span><div class="val">${escapeHtml(props.statusLabel)}</div></div>
+    <div><span class="lbl">تاریخ صدور</span><div class="val">${escapeHtml(faDate(props.issuedAt))}</div></div>
+    <div><span class="lbl">${escapeHtml(props.dueOrValidLabel)}</span><div class="val">${escapeHtml(faDate(props.dueOrValid))}</div></div>
+    <div><span class="lbl">ارز</span><div class="val">${escapeHtml(currencySuffix(props.currency))} (${escapeHtml(props.currency)})</div></div>
+  </div>
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>شرح</th>
+        <th>کد</th>
+        <th>تعداد</th>
+        <th>فی</th>
+        <th>مبلغ</th>
+      </tr>
+    </thead>
+    <tbody>${rowsHtml}</tbody>
+  </table>
+  <div class="foot">
+    <div class="notes">
+      ${
+        props.notes?.trim()
+          ? `<span class="lbl">یادداشت</span><div>${escapeHtml(props.notes)}</div>`
+          : ''
+      }
+    </div>
+    <div class="totals">
+      <div class="t-row"><span class="muted">جمع</span><span class="ltr">${escapeHtml(money(props.subtotal))}</span></div>
+      <div class="t-row"><span class="muted">تخفیف</span><span class="ltr">${escapeHtml(money(props.discount))}</span></div>
+      <div class="t-row"><span class="muted">مالیات</span><span class="ltr">${escapeHtml(money(props.taxAmount))}</span></div>
+      <div class="t-row pay"><span>قابل پرداخت</span><span class="ltr">${escapeHtml(money(props.payable))}</span></div>
+    </div>
+  </div>
+</body>
+</html>`;
+
+  win.document.open();
+  win.document.write(html);
+  win.document.close();
+  win.focus();
+  setTimeout(() => {
+    win.print();
+    win.close();
+  }, 250);
+}
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    title="پیش‌نمایش سند"
+    :width="paperSize === 'A5' ? 640 : 840"
+    destroy-on-close
+    centered
+    :body-style="{ paddingTop: '12px' }"
+    @cancel="close"
+  >
+    <template #footer>
+      <a-flex justify="space-between" align="center" wrap="wrap" :gap="8" style="width: 100%">
+        <a-segmented v-model:value="paperSize" :options="paperOptions" />
+        <a-space :size="8">
+          <a-button @click="close">بستن</a-button>
+          <a-button type="primary" @click="printSheet">
+            <template #icon><PrinterOutlined /></template>
+            چاپ {{ paperSize }}
+          </a-button>
+        </a-space>
+      </a-flex>
+    </template>
+
+    <a-flex justify="center" :style="{ background: '#f3f4f6', padding: '16px', borderRadius: '8px' }">
+      <div
+        :style="{
+          width: '100%',
+          maxWidth: `${paperWidth}px`,
+          background: '#fff',
+          border: '1px solid #e5e7eb',
+          borderRadius: '4px',
+          padding: paperSize === 'A5' ? '18px 20px' : '24px 28px',
+          fontSize: paperSize === 'A5' ? '12px' : '13px',
+          color: '#111827',
+        }"
+      >
+        <a-flex justify="space-between" align="flex-start" :gap="12" :style="{ marginBottom: '14px' }">
+          <div>
+            <div :style="{ fontWeight: 800, fontSize: paperSize === 'A5' ? '15px' : '18px' }">
+              {{ orgName || brand.nameFa }}
+            </div>
+            <a-typography-text type="secondary">{{ docTypeLabel }}</a-typography-text>
+          </div>
+          <div :style="{ textAlign: 'left' }">
+            <div :style="{ color: accent, fontWeight: 800 }">{{ docTypeLabel }}</div>
+            <div dir="ltr" :style="{ fontWeight: 700, marginTop: '4px' }">{{ displayNumber }}</div>
+          </div>
+        </a-flex>
+
+        <div
+          :style="{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+            gap: '8px 12px',
+            padding: '10px 0',
+            borderTop: '1px solid #e5e7eb',
+            borderBottom: '1px solid #e5e7eb',
+            marginBottom: '14px',
+          }"
+        >
+          <div>
+            <a-typography-text type="secondary" :style="{ fontSize: '11px', display: 'block' }">صادر برای</a-typography-text>
+            <div :style="{ fontWeight: 600 }">{{ customerName || '—' }}</div>
+            <a-typography-text v-if="customerSub" type="secondary" :style="{ fontSize: '11px' }">
+              {{ customerSub }}
+            </a-typography-text>
+          </div>
+          <div>
+            <a-typography-text type="secondary" :style="{ fontSize: '11px', display: 'block' }">عنوان</a-typography-text>
+            <div :style="{ fontWeight: 600 }">{{ title || docTypeLabel }}</div>
+          </div>
+          <div>
+            <a-typography-text type="secondary" :style="{ fontSize: '11px', display: 'block' }">وضعیت</a-typography-text>
+            <div :style="{ fontWeight: 600 }">{{ statusLabel }}</div>
+          </div>
+          <div>
+            <a-typography-text type="secondary" :style="{ fontSize: '11px', display: 'block' }">تاریخ صدور</a-typography-text>
+            <div :style="{ fontWeight: 600 }">{{ faDate(issuedAt) }}</div>
+          </div>
+          <div>
+            <a-typography-text type="secondary" :style="{ fontSize: '11px', display: 'block' }">{{ dueOrValidLabel }}</a-typography-text>
+            <div :style="{ fontWeight: 600 }">{{ faDate(dueOrValid) }}</div>
+          </div>
+          <div>
+            <a-typography-text type="secondary" :style="{ fontSize: '11px', display: 'block' }">ارز</a-typography-text>
+            <div :style="{ fontWeight: 600 }">{{ currencySuffix(currency) }} ({{ currency }})</div>
+          </div>
+        </div>
+
+        <table :style="{ width: '100%', borderCollapse: 'collapse' }">
+          <thead>
+            <tr :style="{ background: '#f9fafb' }">
+              <th :style="thStyle">#</th>
+              <th :style="thStyle">شرح</th>
+              <th :style="thStyle">کد</th>
+              <th :style="thStyle">تعداد</th>
+              <th :style="thStyle">فی</th>
+              <th :style="thStyle">مبلغ</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="!lines.length">
+              <td colspan="6" :style="{ textAlign: 'center', color: '#9ca3af', padding: '16px' }">
+                ردیفی در فرم ثبت نشده است
+              </td>
+            </tr>
+            <tr v-for="(line, index) in lines" :key="`${line.name}-${index}`">
+              <td :style="tdStyle">{{ toFaDigits(index + 1) }}</td>
+              <td :style="tdStyle">
+                <div :style="{ fontWeight: 600 }">{{ line.name }}</div>
+                <div v-if="line.description" :style="{ color: '#6b7280', fontSize: '11px' }">
+                  {{ line.description }}
+                </div>
+              </td>
+              <td :style="tdStyle" dir="ltr">{{ line.sku || '—' }}</td>
+              <td :style="tdStyle">{{ toFaDigits(line.quantity) }}</td>
+              <td :style="tdStyle" dir="ltr">{{ money(line.unitPrice) }}</td>
+              <td :style="tdStyle" dir="ltr">{{ money(line.total) }}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <a-flex justify="space-between" align="flex-start" :gap="16" :style="{ marginTop: '14px' }">
+          <div :style="{ flex: 1, minWidth: 0 }">
+            <template v-if="notes?.trim()">
+              <a-typography-text type="secondary" :style="{ fontSize: '11px', display: 'block' }">یادداشت</a-typography-text>
+              <div>{{ notes }}</div>
+            </template>
+          </div>
+          <div
+            :style="{
+              width: paperSize === 'A5' ? '200px' : '240px',
+              border: '1px solid #e5e7eb',
+              borderRadius: '8px',
+              padding: '10px 12px',
+              flexShrink: 0,
+            }"
+          >
+            <a-flex justify="space-between" :style="{ marginBottom: '6px' }">
+              <a-typography-text type="secondary">جمع</a-typography-text>
+              <span dir="ltr">{{ money(subtotal) }}</span>
+            </a-flex>
+            <a-flex justify="space-between" :style="{ marginBottom: '6px' }">
+              <a-typography-text type="secondary">تخفیف</a-typography-text>
+              <span dir="ltr">{{ money(discount) }}</span>
+            </a-flex>
+            <a-flex justify="space-between" :style="{ marginBottom: '6px' }">
+              <a-typography-text type="secondary">مالیات</a-typography-text>
+              <span dir="ltr">{{ money(taxAmount) }}</span>
+            </a-flex>
+            <a-flex
+              justify="space-between"
+              :style="{
+                marginTop: '8px',
+                paddingTop: '8px',
+                borderTop: '1px solid #e5e7eb',
+                fontWeight: 800,
+                color: accent,
+              }"
+            >
+              <span>قابل پرداخت</span>
+              <span dir="ltr">{{ money(payable) }}</span>
+            </a-flex>
+          </div>
+        </a-flex>
+      </div>
+    </a-flex>
+  </a-modal>
+</template>
diff --git a/apps/web/src/components/JalaliDateInput.vue b/apps/web/src/components/JalaliDateInput.vue
index cef3806..7d51480 100644
--- a/apps/web/src/components/JalaliDateInput.vue
+++ b/apps/web/src/components/JalaliDateInput.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Button as AButton, Input as AInput } from 'ant-design-vue';
+import {
+  CalendarOutlined,
+  ClockCircleOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from '@ant-design/icons-vue';
 import {
   addJalaliMonths,
   dateToJalali,
@@ -12,7 +19,6 @@ import {
   parseLocalInput,
   toFaDigits,
 } from '@/lib/jalali';
-import UiIcon from '@/components/UiIcon.vue';
 
 const model = defineModel<string>({ default: '' });
 const props = withDefaults(
@@ -39,7 +45,7 @@ const WEEKDAYS = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج'] as const;
 const MOBILE_MQ = '(max-width: 720px)';
 
 const open = ref(false);
-const triggerRef = ref<HTMLButtonElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
 const panelRef = ref<HTMLElement | null>(null);
 const clockRef = ref<HTMLElement | null>(null);
 const hourColRef = ref<HTMLElement | null>(null);
@@ -439,41 +445,28 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="wrap" :class="{ disabled, 'time-only': mode === 'time' }">
-    <button
+  <div
+    ref="triggerRef"
+    class="wrap"
+    :class="{ disabled, 'time-only': mode === 'time' }"
+    style="width: 100%"
+  >
+    <a-input
       :id="id"
-      ref="triggerRef"
-      class="trigger"
-      :class="{ 'clock-trigger': mode === 'time' }"
-      type="button"
+      readonly
+      :value="display"
+      :placeholder="emptyLabel"
       :disabled="disabled"
       :aria-expanded="open"
       :aria-required="required || undefined"
+      style="width: 100%; cursor: pointer"
       @click="toggle"
     >
-      <template v-if="mode === 'time'">
-        <span class="clock-face" aria-hidden="true">
-          <i
-            class="hand hour-hand"
-            :style="{
-              transform: `rotate(${(draftHour % 12) * 30 + draftMinute * 0.5}deg)`,
-            }"
-          />
-          <i
-            class="hand minute-hand"
-            :style="{ transform: `rotate(${draftMinute * 6}deg)` }"
-          />
-          <i class="hub" />
-        </span>
-        <span class="clock-text" :class="{ empty: !display }">
-          {{ display || emptyLabel }}
-        </span>
+      <template #suffix>
+        <ClockCircleOutlined v-if="triggerIcon === 'clock'" />
+        <CalendarOutlined v-else />
       </template>
-      <template v-else>
-        <span :class="{ empty: !display }">{{ display || emptyLabel }}</span>
-        <UiIcon :name="triggerIcon" :size="18" />
-      </template>
-    </button>
+    </a-input>
 
     <Teleport to="body">
       <div
@@ -490,13 +483,13 @@ onBeforeUnmount(() => {
         :style="{ top: `${top}px`, left: `${left}px` }"
       >
         <header v-if="mode !== 'time'" class="nav">
-          <button type="button" class="nav-btn" aria-label="ماه بعد" @click="goMonth(1)">
-            <UiIcon name="chevron" :size="16" />
-          </button>
+          <a-button type="text" class="nav-btn" aria-label="ماه بعد" @click="goMonth(1)">
+            <template #icon><RightOutlined /></template>
+          </a-button>
           <strong>{{ monthTitle }}</strong>
-          <button type="button" class="nav-btn next" aria-label="ماه قبل" @click="goMonth(-1)">
-            <UiIcon name="chevron" :size="16" />
-          </button>
+          <a-button type="text" class="nav-btn next" aria-label="ماه قبل" @click="goMonth(-1)">
+            <template #icon><LeftOutlined /></template>
+          </a-button>
         </header>
 
         <template v-if="mode !== 'time'">
@@ -504,16 +497,16 @@ onBeforeUnmount(() => {
             <span v-for="day in WEEKDAYS" :key="day">{{ day }}</span>
           </div>
           <div class="grid">
-            <button
+            <a-button
               v-for="cell in cells"
               :key="cell.key"
-              type="button"
+              type="text"
               class="day"
               :class="{ mute: !cell.inMonth, today: cell.isToday, on: cell.isSelected }"
               @click="pickDay(cell)"
             >
               {{ toFaDigits(cell.jd) }}
-            </button>
+            </a-button>
           </div>
         </template>
 
@@ -521,25 +514,25 @@ onBeforeUnmount(() => {
           <template v-if="isMobile">
             <p class="md-label">{{ mode === 'time' ? 'انتخاب ساعت' : 'ساعت' }}</p>
             <div class="md-digits" dir="ltr">
-              <button
-                type="button"
+              <a-button
+                type="text"
                 class="md-chip"
                 :class="{ on: clockFace === 'hour' }"
                 aria-label="ساعت"
                 @click="clockFace = 'hour'"
               >
                 {{ faPad(draftHour) }}
-              </button>
+              </a-button>
               <span class="md-colon">:</span>
-              <button
-                type="button"
+              <a-button
+                type="text"
                 class="md-chip"
                 :class="{ on: clockFace === 'minute' }"
                 aria-label="دقیقه"
                 @click="clockFace = 'minute'"
               >
                 {{ faPad(draftMinute) }}
-              </button>
+              </a-button>
             </div>
             <div
               ref="clockRef"
@@ -561,10 +554,10 @@ onBeforeUnmount(() => {
               </span>
               <i class="md-hub" />
               <template v-if="clockFace === 'hour'">
-                <button
+                <a-button
                   v-for="h in hours"
                   :key="`h-${h}`"
-                  type="button"
+                  type="text"
                   class="md-tick"
                   :class="{ on: draftHour === h, inner: h >= 12 }"
                   :style="hourDialStyle(h)"
@@ -572,13 +565,13 @@ onBeforeUnmount(() => {
                   @click.stop="setHour(h)"
                 >
                   {{ toFaDigits(h) }}
-                </button>
+                </a-button>
               </template>
               <template v-else>
-                <button
+                <a-button
                   v-for="m in clockMinutes"
                   :key="`m-${m}`"
-                  type="button"
+                  type="text"
                   class="md-tick"
                   :class="{ on: draftMinute === m }"
                   :style="minuteDialStyle(m)"
@@ -586,7 +579,7 @@ onBeforeUnmount(() => {
                   @click.stop="setMinute(m)"
                 >
                   {{ faPad(m) }}
-                </button>
+                </a-button>
               </template>
             </div>
           </template>
@@ -596,31 +589,31 @@ onBeforeUnmount(() => {
               <div class="col">
                 <span class="col-label">ساعت</span>
                 <div ref="hourColRef" class="col-list" role="listbox" aria-label="ساعت">
-                  <button
+                  <a-button
                     v-for="h in hours"
                     :key="`col-h-${h}`"
-                    type="button"
+                    type="text"
                     class="col-item"
                     :class="{ on: draftHour === h }"
                     @click="setHour(h)"
                   >
                     {{ faPad(h) }}
-                  </button>
+                  </a-button>
                 </div>
               </div>
               <div class="col">
                 <span class="col-label">دقیقه</span>
                 <div ref="minuteColRef" class="col-list" role="listbox" aria-label="دقیقه">
-                  <button
+                  <a-button
                     v-for="m in columnMinutes"
                     :key="`col-m-${m}`"
-                    type="button"
+                    type="text"
                     class="col-item"
                     :class="{ on: draftMinute === m }"
                     @click="setMinute(m)"
                   >
                     {{ faPad(m) }}
-                  </button>
+                  </a-button>
                 </div>
               </div>
             </div>
@@ -628,18 +621,17 @@ onBeforeUnmount(() => {
         </div>
 
         <footer class="foot">
-          <button type="button" class="link" @click="pickToday">
+          <a-button type="link" @click="pickToday">
             {{ mode === 'time' ? 'الان' : 'امروز' }}
-          </button>
-          <button
+          </a-button>
+          <a-button
             v-if="clearable && !required && model"
-            type="button"
-            class="link"
+            type="link"
             @click="clear"
           >
             پاک کردن
-          </button>
-          <button type="button" class="done" @click="hide">تأیید</button>
+          </a-button>
+          <a-button type="primary" @click="hide">تأیید</a-button>
         </footer>
       </div>
     </Teleport>
diff --git a/apps/web/src/components/MentoMemoryPanel.vue b/apps/web/src/components/MentoMemoryPanel.vue
index c1bd4d9..72c964f 100644
--- a/apps/web/src/components/MentoMemoryPanel.vue
+++ b/apps/web/src/components/MentoMemoryPanel.vue
@@ -1,10 +1,27 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import axios from 'axios';
+import {
+  Alert as AAlert,
+  Button as AButton,
+  Card as ACard,
+  Flex as AFlex,
+  List as AList,
+  Modal,
+  Space as ASpace,
+  Spin as ASpin,
+  Textarea as ATextarea,
+  Typography,
+} from 'ant-design-vue';
 import { api } from '@/lib/api';
 import { brand, type MemoryItemDto, type PaginatedResponse } from '@mento/shared';
 import { formatJalaliDateTime } from '@/lib/jalali';
 
+const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
+  Typography;
+const AListItem = AList.Item;
+const AListItemMeta = AList.Item.Meta;
+
 const props = defineProps<{
   personId: string;
 }>();
@@ -86,15 +103,24 @@ async function saveEdit(id: string) {
   }
 }
 
-async function removeItem(id: string) {
-  if (!confirm('این مورد از حافظه حذف شود؟')) return;
-  try {
-    await api.delete(`/memory/${id}`);
-    if (editingId.value === id) cancelEdit();
-    await load();
-  } catch {
-    error.value = 'حذف ناموفق بود';
-  }
+function removeItem(id: string) {
+  Modal.confirm({
+    title: 'حذف از حافظه',
+    content: 'این مورد از حافظه حذف شود؟',
+    okText: 'حذف',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      try {
+        await api.delete(`/memory/${id}`);
+        if (editingId.value === id) cancelEdit();
+        await load();
+      } catch {
+        error.value = 'حذف ناموفق بود';
+        return Promise.reject();
+      }
+    },
+  });
 }
 
 function formatWhen(value: string) {
@@ -110,152 +136,71 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="memory-panel">
-    <header>
-      <div>
-        <p class="eyebrow">{{ brand.memoryEn }}</p>
-        <h2>حافظه مشتری</h2>
-        <p class="lead">نکات پایدار درباره این شخص — فقط با تأیید شما ذخیره می‌شود.</p>
-      </div>
-    </header>
+  <a-card :bordered="false" :style="{ marginTop: '16px' }">
+    <a-typography-text type="secondary" strong>{{ brand.memoryEn }}</a-typography-text>
+    <a-typography-title :level="5" :style="{ margin: '4px 0' }">حافظه مشتری</a-typography-title>
+    <a-typography-paragraph type="secondary" :style="{ marginBottom: '12px' }">
+      نکات پایدار درباره این شخص — فقط با تأیید شما ذخیره می‌شود.
+    </a-typography-paragraph>
 
-    <form class="add-form" @submit.prevent="addItem">
-      <textarea
-        v-model="draft"
-        rows="2"
+    <a-flex :gap="8" align="flex-start" :style="{ marginBottom: '12px' }">
+      <a-textarea
+        v-model:value="draft"
+        :rows="2"
         placeholder="مثلاً: بودجه تا ۵۰۰ میلیون · ترجیح تماس صبح‌ها"
+        style="flex: 1"
+        @pressEnter.ctrl="addItem"
       />
-      <button class="btn btn-ghost" type="submit" :disabled="saving || !draft.trim()">
+      <a-button
+        type="primary"
+        :disabled="saving || !draft.trim()"
+        :loading="saving"
+        @click="addItem"
+      >
         افزودن
-      </button>
-    </form>
+      </a-button>
+    </a-flex>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
-    <p v-else-if="!hasItems" class="muted">هنوز موردی در حافظه ثبت نشده.</p>
+    <a-alert v-if="error" type="error" show-icon :message="error" :style="{ marginBottom: '12px' }" />
 
-    <ul v-else class="items">
-      <li v-for="item in items" :key="item.id">
-        <template v-if="editingId === item.id">
-          <textarea v-model="editContent" rows="2" />
-          <div class="row-actions">
-            <button type="button" class="btn" :disabled="saving" @click="saveEdit(item.id)">
-              ذخیره
-            </button>
-            <button type="button" class="btn btn-ghost" @click="cancelEdit">انصراف</button>
-          </div>
+    <a-spin :spinning="loading">
+      <a-typography-text v-if="!loading && !hasItems" type="secondary">
+        هنوز موردی در حافظه ثبت نشده.
+      </a-typography-text>
+
+      <a-list v-else-if="hasItems" item-layout="vertical" :data-source="items">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <template v-if="editingId === item.id">
+              <a-flex vertical :gap="8" style="width: 100%">
+                <a-textarea v-model:value="editContent" :rows="2" />
+                <a-space :size="8">
+                  <a-button type="primary" :loading="saving" @click="saveEdit(item.id)">ذخیره</a-button>
+                  <a-button @click="cancelEdit">انصراف</a-button>
+                </a-space>
+              </a-flex>
+            </template>
+            <a-list-item-meta v-else>
+              <template #title>
+                <a-typography-paragraph :style="{ marginBottom: 0, whiteSpace: 'pre-wrap' }">
+                  {{ item.content }}
+                </a-typography-paragraph>
+              </template>
+              <template #description>
+                <a-typography-text type="secondary">
+                  {{ sourceLabel[item.sourceType] ?? item.sourceType }}
+                  <template v-if="item.confirmedBy"> · {{ item.confirmedBy.fullName }}</template>
+                  · {{ formatWhen(item.updatedAt) }}
+                </a-typography-text>
+              </template>
+            </a-list-item-meta>
+            <template v-if="editingId !== item.id" #actions>
+              <a-button type="link" @click="startEdit(item)">ویرایش</a-button>
+              <a-button type="link" danger @click="removeItem(item.id)">حذف</a-button>
+            </template>
+          </a-list-item>
         </template>
-        <template v-else>
-          <p class="content">{{ item.content }}</p>
-          <p class="meta">
-            <span>{{ sourceLabel[item.sourceType] ?? item.sourceType }}</span>
-            <span v-if="item.confirmedBy"> · {{ item.confirmedBy.fullName }}</span>
-            <span> · {{ formatWhen(item.updatedAt) }}</span>
-          </p>
-          <div class="row-actions">
-            <button type="button" @click="startEdit(item)">ویرایش</button>
-            <button type="button" class="danger" @click="removeItem(item.id)">حذف</button>
-          </div>
-        </template>
-      </li>
-    </ul>
-  </section>
+      </a-list>
+    </a-spin>
+  </a-card>
 </template>
-
-<style scoped>
-.memory-panel {
-  display: grid;
-  gap: 0.85rem;
-  padding: 1rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
-  font-size: 0.85rem;
-}
-
-h2 {
-  margin: 0.15rem 0 0;
-  font-size: 1.15rem;
-}
-
-.lead {
-  margin: 0.35rem 0 0;
-  color: var(--muted);
-  font-size: 0.92rem;
-}
-
-.add-form {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 0.6rem;
-  align-items: start;
-}
-
-textarea {
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.75rem 0.9rem;
-  background: #fff;
-  font: inherit;
-  width: 100%;
-  resize: vertical;
-}
-
-.items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.75rem;
-}
-
-.items li {
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.75rem 0.85rem;
-  background: #fff;
-}
-
-.content {
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-.meta {
-  margin: 0.35rem 0 0;
-  color: var(--muted);
-  font-size: 0.85rem;
-}
-
-.row-actions {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.row-actions button {
-  border: none;
-  background: transparent;
-  color: var(--accent);
-  cursor: pointer;
-  font: inherit;
-}
-
-.row-actions button.danger {
-  color: #b42318;
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.error {
-  color: #b42318;
-}
-</style>
diff --git a/apps/web/src/components/MoneyInput.vue b/apps/web/src/components/MoneyInput.vue
index 0885c91..ef57bc4 100644
--- a/apps/web/src/components/MoneyInput.vue
+++ b/apps/web/src/components/MoneyInput.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { nextTick, ref, watch } from 'vue';
+import { Input as AInput } from 'ant-design-vue';
 import {
   caretIndexForDigitCount,
   countDigitChars,
@@ -34,7 +35,14 @@ const props = withDefaults(
 
 const text = ref('');
 const focused = ref(false);
-const inputRef = ref<HTMLInputElement | null>(null);
+const inputRef = ref<{ input?: HTMLInputElement } | HTMLInputElement | null>(null);
+
+function nativeInput(): HTMLInputElement | null {
+  const el = inputRef.value;
+  if (!el) return null;
+  if (el instanceof HTMLInputElement) return el;
+  return el.input ?? null;
+}
 
 function readModelNumber(): number | null {
   if (model.value === '' || model.value == null) return null;
@@ -83,7 +91,6 @@ async function onInput(event: Event) {
   const n = parseMoneyNumber(raw, props.decimals);
 
   if (n == null) {
-    // اجازهٔ تایپ ناقص مثل "-" یا خالی
     const cleaned = raw.replace(/[^\d۰-۹٠-٩.\u066B٬,،\s-]/g, '');
     text.value = cleaned;
     writeModel(null);
@@ -99,7 +106,7 @@ async function onInput(event: Event) {
   writeModel(n);
 
   await nextTick();
-  const input = inputRef.value;
+  const input = nativeInput();
   if (!input) return;
   const nextCaret = caretIndexForDigitCount(display, digitsBefore);
   input.setSelectionRange(nextCaret, nextCaret);
@@ -111,27 +118,20 @@ function normalizeSep(raw: string): string {
 </script>
 
 <template>
-  <input
+  <a-input
     :id="id"
     ref="inputRef"
-    class="money-input"
     type="text"
     inputmode="decimal"
     autocomplete="off"
     :dir="dir"
     :placeholder="placeholder"
-    :required="required"
     :disabled="disabled"
     :readonly="readonly"
     :value="text"
+    style="width: 100%; font-variant-numeric: tabular-nums"
     @focus="onFocus"
     @blur="onBlur"
     @input="onInput"
   />
 </template>
-
-<style scoped>
-.money-input {
-  font-variant-numeric: tabular-nums;
-}
-</style>
diff --git a/apps/web/src/components/PhoneContactsImport.vue b/apps/web/src/components/PhoneContactsImport.vue
index baf6472..ea3f46e 100644
--- a/apps/web/src/components/PhoneContactsImport.vue
+++ b/apps/web/src/components/PhoneContactsImport.vue
@@ -4,8 +4,21 @@ import axios from 'axios';
 import { api } from '@/lib/api';
 import type { CreatePersonRequest, PersonDto } from '@mento/shared';
 import { toFaDigits } from '@/lib/jalali';
-import { UiButton, UiModal } from '@/components/ui';
-import UiIcon from '@/components/UiIcon.vue';
+import {
+  Avatar as AAvatar,
+  Button as AButton,
+  Checkbox as ACheckbox,
+  Flex as AFlex,
+  Input as AInput,
+  List as AList,
+  ListItem as AListItem,
+  Modal as AModal,
+  Space as ASpace,
+  Typography,
+  Upload as AUpload,
+} from 'ant-design-vue';
+import type { UploadProps } from 'ant-design-vue';
+import { PhoneOutlined, SearchOutlined, UserAddOutlined } from '@ant-design/icons-vue';
 import {
   filterPhoneContacts,
   isContactPickerSupported,
@@ -15,6 +28,8 @@ import {
   type PhoneContactDraft,
 } from '@/lib/phone-contacts';
 
+const { Text: ATypographyText, Paragraph: ATypographyParagraph } = Typography;
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean;
@@ -38,7 +53,6 @@ const importing = ref(false);
 const drafts = ref<PhoneContactDraft[]>([]);
 const selected = ref<Set<string>>(new Set());
 const listQuery = ref('');
-const fileInput = ref<HTMLInputElement | null>(null);
 
 const modalOpen = computed(() => phase.value !== 'closed');
 const modalTitle = computed(() => {
@@ -65,7 +79,6 @@ async function showReview(rows: PhoneContactDraft[], opts?: { selectAll?: boolea
   drafts.value = sortPhoneContacts(rows);
   listQuery.value = '';
   selected.value = opts?.selectAll ? new Set(drafts.value.map((r) => r.key)) : new Set();
-  // بعد از دیالوگ فایل، یک تیک صبر کن تا مودال مطمئن باز شود
   phase.value = 'closed';
   await nextTick();
   phase.value = 'review';
@@ -83,7 +96,6 @@ function selectAll(on: boolean) {
     selected.value = new Set();
     return;
   }
-  // اگر جستجو فعال است فقط نتایج را انتخاب کن، وگرنه همه
   if (listQuery.value.trim()) {
     const next = new Set(selected.value);
     for (const row of visibleDrafts.value) next.add(row.key);
@@ -121,7 +133,6 @@ async function runDevicePicker() {
       emit('fail', 'مخاطبی انتخاب نشد.');
       return;
     }
-    // مثل vcf: جستجو/انتخاب دستی، نه ورود خودکار همه
     await showReview(rows, { selectAll: false });
   } catch (e) {
     const name = e instanceof DOMException ? e.name : '';
@@ -143,11 +154,12 @@ function startPicker() {
   openHelp();
 }
 
-async function onVcfFile(ev: Event) {
-  const el = ev.target as HTMLInputElement;
-  const file = el.files?.[0];
-  el.value = '';
-  if (!file) return;
+const beforeVcfUpload: UploadProps['beforeUpload'] = (file) => {
+  void handleVcfFile(file as File);
+  return false;
+};
+
+async function handleVcfFile(file: File) {
   try {
     const rows = await parseVCardFile(file);
     if (!rows.length) {
@@ -223,68 +235,70 @@ async function importSelected() {
 </script>
 
 <template>
-  <span class="wrap" @click.stop>
-    <span class="trigger" @click="startPicker">
+  <span @click.stop>
+    <span @click="startPicker">
       <slot />
     </span>
 
-    <input
-      ref="fileInput"
-      class="hidden"
-      type="file"
-      accept=".vcf,text/vcard,text/x-vcard"
-      @change="onVcfFile"
-    />
-
-    <UiModal :open="modalOpen" :title="modalTitle" @close="cancel">
+    <a-modal
+      :open="modalOpen"
+      :title="modalTitle"
+      :confirm-loading="importing"
+      @cancel="cancel"
+    >
       <template v-if="phase === 'choose'">
-        <p class="lead">
+        <a-typography-paragraph type="secondary">
           مخاطبین را از دفترچه تلفن یا فایل <strong>.vcf</strong> بگیرید.
           بعد در لیست الفبایی جستجو کنید و یک، چند، یا همه را برای ورود انتخاب کنید.
-        </p>
-        <div class="choose-actions">
-          <UiButton variant="primary" block @click="runDevicePicker">
-            <UiIcon name="phone" :size="16" />
+        </a-typography-paragraph>
+        <a-flex vertical :gap="8">
+          <a-button type="primary" block @click="runDevicePicker">
+            <template #icon><PhoneOutlined /></template>
             از دفترچه تلفن
-          </UiButton>
-          <UiButton variant="ghost" block @click="fileInput?.click()">
-            از فایل .vcf
-          </UiButton>
-        </div>
+          </a-button>
+          <a-upload
+            :show-upload-list="false"
+            accept=".vcf,text/vcard,text/x-vcard"
+            :before-upload="beforeVcfUpload"
+          >
+            <a-button block>از فایل .vcf</a-button>
+          </a-upload>
+        </a-flex>
       </template>
 
       <template v-else-if="phase === 'help'">
-        <p class="lead">
+        <a-typography-paragraph type="secondary">
           در این مرورگر انتخاب مستقیم از دفترچه تلفن پشتیبانی نمی‌شود.
           از Contacts گوشی یک فایل <strong>.vcf</strong> خروجی بگیرید و اینجا بارگذاری کنید.
           بعد از بارگذاری می‌توانید یک، چند، یا همه مخاطبین را انتخاب کنید.
-        </p>
-        <ul class="tips">
-          <li>اندروید Chrome معمولاً انتخاب مستقیم مخاطب را دارد.</li>
-          <li>آیفون: Contacts → Share Contact / Export → فایل vCard.</li>
-        </ul>
+        </a-typography-paragraph>
+        <a-typography-paragraph type="secondary">
+          اندروید Chrome معمولاً انتخاب مستقیم مخاطب را دارد. آیفون: Contacts → Share Contact /
+          Export → فایل vCard.
+        </a-typography-paragraph>
       </template>
 
       <template v-else-if="phase === 'review'">
-        <p class="lead">
+        <a-typography-paragraph type="secondary">
           {{ toFaDigits(drafts.length) }} مخاطب از فایل/گوشی خوانده شد (مرتب‌شده الفبایی).
           موارد دلخواه را تیک بزنید؛ فقط انتخاب‌شده‌ها وارد می‌شوند.
-        </p>
-        <div class="search">
-          <UiIcon name="search" :size="15" />
-          <input
-            v-model="listQuery"
-            type="search"
-            placeholder="جستجو نام یا موبایل…"
-            autocomplete="off"
-          />
-        </div>
-        <div class="toolbar">
-          <button type="button" class="link" @click="selectAll(true)">
-            {{ listQuery.trim() ? 'انتخاب نتایج' : 'انتخاب همه' }}
-          </button>
-          <button type="button" class="link" @click="selectAll(false)">هیچ‌کدام</button>
-          <span class="count">
+        </a-typography-paragraph>
+        <a-input
+          v-model:value="listQuery"
+          allow-clear
+          placeholder="جستجو نام یا موبایل…"
+          style="width: 100%; margin-bottom: 12px"
+        >
+          <template #prefix><SearchOutlined /></template>
+        </a-input>
+        <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
+          <a-space :size="8">
+            <a-button type="link" @click="selectAll(true)">
+              {{ listQuery.trim() ? 'انتخاب نتایج' : 'انتخاب همه' }}
+            </a-button>
+            <a-button type="link" @click="selectAll(false)">هیچ‌کدام</a-button>
+          </a-space>
+          <a-typography-text type="secondary">
             {{ toFaDigits(selectedCount) }} انتخاب
             <template v-if="listQuery.trim()">
               · {{ toFaDigits(visibleDrafts.length) }} نتیجه
@@ -292,194 +306,72 @@ async function importSelected() {
             <template v-else>
               از {{ toFaDigits(drafts.length) }}
             </template>
-          </span>
-        </div>
-        <ul v-if="visibleDrafts.length" class="list">
-          <li v-for="row in visibleDrafts" :key="row.key">
-            <label>
-              <input
-                type="checkbox"
-                :checked="selected.has(row.key)"
+          </a-typography-text>
+        </a-flex>
+        <a-list
+          v-if="visibleDrafts.length"
+          :data-source="visibleDrafts"
+          :style="{ maxHeight: 'min(48vh, 360px)', overflow: 'auto' }"
+        >
+          <template #renderItem="{ item }">
+            <a-list-item>
+              <a-checkbox
+                :checked="selected.has(item.key)"
                 :disabled="importing"
-                @change="toggle(row.key)"
-              />
-              <span class="avatar" aria-hidden="true">{{ row.fullName.slice(0, 1) }}</span>
-              <span class="meta">
-                <strong>{{ row.fullName }}</strong>
-                <small>{{ draftLine(row) }}</small>
-              </span>
-            </label>
-          </li>
-        </ul>
-        <p v-else class="empty">مخاطبی با این جستجو پیدا نشد.</p>
+                @click.prevent="toggle(item.key)"
+              >
+                <a-space :size="8">
+                  <a-avatar>{{ item.fullName.slice(0, 1) }}</a-avatar>
+                  <span>
+                    <div><a-typography-text strong>{{ item.fullName }}</a-typography-text></div>
+                    <a-typography-text type="secondary">{{ draftLine(item) }}</a-typography-text>
+                  </span>
+                </a-space>
+              </a-checkbox>
+            </a-list-item>
+          </template>
+        </a-list>
+        <a-typography-text v-else type="secondary">
+          مخاطبی با این جستجو پیدا نشد.
+        </a-typography-text>
       </template>
 
       <template #footer>
         <template v-if="phase === 'choose'">
-          <UiButton variant="ghost" @click="cancel">انصراف</UiButton>
+          <a-button @click="cancel">انصراف</a-button>
         </template>
         <template v-else-if="phase === 'help'">
-          <UiButton variant="ghost" :disabled="importing" @click="cancel">انصراف</UiButton>
-          <UiButton variant="primary" :disabled="importing" @click="fileInput?.click()">
-            انتخاب فایل .vcf
-          </UiButton>
+          <a-button :disabled="importing" @click="cancel">انصراف</a-button>
+          <a-upload
+            :show-upload-list="false"
+            accept=".vcf,text/vcard,text/x-vcard"
+            :before-upload="beforeVcfUpload"
+          >
+            <a-button type="primary" :disabled="importing">انتخاب فایل .vcf</a-button>
+          </a-upload>
         </template>
         <template v-else-if="phase === 'review'">
-          <UiButton variant="ghost" :disabled="importing" @click="cancel">انصراف</UiButton>
-          <UiButton variant="ghost" :disabled="importing" @click="fileInput?.click()">
-            فایل دیگر
-          </UiButton>
-          <UiButton
-            variant="primary"
+          <a-button :disabled="importing" @click="cancel">انصراف</a-button>
+          <a-upload
+            :show-upload-list="false"
+            accept=".vcf,text/vcard,text/x-vcard"
+            :before-upload="beforeVcfUpload"
+            :disabled="importing"
+          >
+            <a-button :disabled="importing">فایل دیگر</a-button>
+          </a-upload>
+          <a-button
+            type="primary"
             :disabled="importing || !selectedCount"
             :loading="importing"
             @click="importSelected"
           >
-            <UiIcon name="user-plus" :size="16" />
+            <template #icon><UserAddOutlined /></template>
             ورود {{ toFaDigits(selectedCount) }}
             {{ target === 'leads' ? 'لید' : 'نفر' }}
-          </UiButton>
+          </a-button>
         </template>
       </template>
-    </UiModal>
+    </a-modal>
   </span>
 </template>
-
-<style scoped>
-.wrap {
-  display: inline-flex;
-}
-
-.trigger {
-  display: inline-flex;
-}
-
-.hidden {
-  display: none;
-}
-
-.lead {
-  margin: 0 0 0.85rem;
-  color: #64748b;
-  font-size: 0.88rem;
-  line-height: 1.7;
-}
-
-.choose-actions {
-  display: grid;
-  gap: 0.55rem;
-}
-
-.tips {
-  margin: 0;
-  padding: 0 1.1rem 0 0;
-  color: #475569;
-  font-size: 0.84rem;
-  line-height: 1.8;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.65rem;
-  padding: 0.45rem 0.65rem;
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  background: #fff;
-}
-
-.search input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  font: inherit;
-  font-size: 0.84rem;
-  color: #0f172a;
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.7rem;
-  flex-wrap: wrap;
-}
-
-.link {
-  border: 0;
-  background: transparent;
-  color: #0f766e;
-  font: inherit;
-  font-size: 0.8rem;
-  font-weight: 700;
-  cursor: pointer;
-  padding: 0;
-}
-
-.count {
-  margin-inline-start: auto;
-  color: #94a3b8;
-  font-size: 0.78rem;
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.45rem;
-  max-height: min(48vh, 360px);
-  overflow: auto;
-}
-
-.list label {
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-  padding: 0.55rem 0.65rem;
-  border: 1px solid #eef2f7;
-  border-radius: var(--radius);
-  background: #fff;
-  cursor: pointer;
-}
-
-.avatar {
-  width: 34px;
-  height: 34px;
-  border-radius: var(--radius);
-  background: #ecfdf8;
-  color: #0f766e;
-  display: grid;
-  place-items: center;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.meta {
-  display: grid;
-  gap: 0.1rem;
-  min-width: 0;
-}
-
-.meta strong {
-  font-size: 0.86rem;
-}
-
-.meta small {
-  color: #94a3b8;
-  font-size: 0.74rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.empty {
-  margin: 0.75rem 0 0;
-  color: #94a3b8;
-  font-size: 0.84rem;
-  text-align: center;
-}
-</style>
diff --git a/apps/web/src/components/SavedFiltersBar.vue b/apps/web/src/components/SavedFiltersBar.vue
index daa77ca..ab2aa50 100644
--- a/apps/web/src/components/SavedFiltersBar.vue
+++ b/apps/web/src/components/SavedFiltersBar.vue
@@ -1,37 +1,58 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
+import { DeleteOutlined, FlagOutlined } from '@ant-design/icons-vue';
+import {
+  Button as AButton,
+  Checkbox as ACheckbox,
+  Form as AForm,
+  FormItem as AFormItem,
+  Input as AInput,
+  Modal,
+  Modal as AModal,
+  Select as ASelect,
+  Space,
+  message,
+} from 'ant-design-vue';
+
+const ASpaceCompact = Space.Compact;
 import { api } from '@/lib/api';
-import UiIcon from '@/components/UiIcon.vue';
-import { useEscClose } from '@/lib/modal-stack';
 import type { SavedViewDto, SavedViewScope } from '@mento/shared';
 
-const props = defineProps<{
-  scope: SavedViewScope;
-  /** فیلتر فعلی صفحه برای ذخیره */
-  currentFilters: Record<string, unknown>;
-}>();
+const props = withDefaults(
+  defineProps<{
+    scope: SavedViewScope;
+    currentFilters: Record<string, unknown>;
+    /** فشرده برای قرار گرفتن داخل یک ردیف فیلتر */
+    compact?: boolean;
+  }>(),
+  { compact: false },
+);
 
 const emit = defineEmits<{
   apply: [filters: Record<string, unknown>];
 }>();
 
 const views = ref<SavedViewDto[]>([]);
-const activeId = ref('');
+const activeId = ref<string | undefined>(undefined);
 const loading = ref(false);
 const busy = ref(false);
-const error = ref('');
 const saveOpen = ref(false);
 const saveName = ref('');
 const saveShared = ref(false);
-useEscClose(() => saveOpen.value, () => { saveOpen.value = false; });
 
 const activeView = computed(
   () => views.value.find((v) => v.id === activeId.value) ?? null,
 );
 
+const selectOptions = computed(() =>
+  views.value.map((v) => ({
+    value: v.id,
+    label: `${v.name}${v.isShared ? ' (سازمانی)' : ''}`,
+  })),
+);
+
 async function loadViews() {
   loading.value = true;
-  error.value = '';
   try {
     const { data } = await api.get<SavedViewDto[]>('/saved-views', {
       params: { scope: props.scope },
@@ -39,16 +60,17 @@ async function loadViews() {
     views.value = data;
   } catch {
     views.value = [];
-    error.value = 'بارگذاری فیلترهای ذخیره‌شده ناموفق بود.';
+    message.error('بارگذاری فیلترهای ذخیره‌شده ناموفق بود.');
   } finally {
     loading.value = false;
   }
 }
 
-function onPick(id: string) {
-  activeId.value = id;
-  if (!id) return;
-  const view = views.value.find((v) => v.id === id);
+function onPick(id: unknown) {
+  const next = typeof id === 'string' ? id : '';
+  activeId.value = next || undefined;
+  if (!next) return;
+  const view = views.value.find((v) => v.id === next);
   if (view) emit('apply', view.filters ?? {});
 }
 
@@ -56,14 +78,12 @@ function openSave() {
   saveName.value = activeView.value?.name ?? '';
   saveShared.value = activeView.value?.isShared ?? false;
   saveOpen.value = true;
-  error.value = '';
 }
 
 async function saveView() {
   const name = saveName.value.trim();
   if (name.length < 2 || busy.value) return;
   busy.value = true;
-  error.value = '';
   try {
     const body = {
       name,
@@ -86,32 +106,42 @@ async function saveView() {
       activeId.value = data.id;
     }
     saveOpen.value = false;
+    message.success('فیلتر ذخیره شد.');
   } catch {
-    error.value = 'ذخیره فیلتر ناموفق بود.';
+    message.error('ذخیره فیلتر ناموفق بود.');
   } finally {
     busy.value = false;
   }
 }
 
-async function removeView() {
+function removeView() {
   if (!activeId.value || busy.value) return;
-  if (!confirm('این فیلتر ذخیره‌شده حذف شود؟')) return;
-  busy.value = true;
-  try {
-    await api.delete(`/saved-views/${activeId.value}`);
-    views.value = views.value.filter((v) => v.id !== activeId.value);
-    activeId.value = '';
-  } catch {
-    error.value = 'حذف فیلتر ناموفق بود.';
-  } finally {
-    busy.value = false;
-  }
+  Modal.confirm({
+    title: 'حذف فیلتر',
+    content: 'این فیلتر ذخیره‌شده حذف شود؟',
+    okText: 'حذف',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      busy.value = true;
+      try {
+        await api.delete(`/saved-views/${activeId.value}`);
+        views.value = views.value.filter((v) => v.id !== activeId.value);
+        activeId.value = undefined;
+        message.success('فیلتر حذف شد.');
+      } catch {
+        message.error('حذف فیلتر ناموفق بود.');
+      } finally {
+        busy.value = false;
+      }
+    },
+  });
 }
 
 watch(
   () => props.scope,
   () => {
-    activeId.value = '';
+    activeId.value = undefined;
     void loadViews();
   },
 );
@@ -122,161 +152,53 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="saved-filters" dir="rtl">
-    <label class="pick">
-      <span class="lbl">فیلتر ذخیره‌شده</span>
-      <select
-        :value="activeId"
-        :disabled="loading"
-        @change="onPick(($event.target as HTMLSelectElement).value)"
-      >
-        <option value="">— انتخاب —</option>
-        <option v-for="v in views" :key="v.id" :value="v.id">
-          {{ v.name }}{{ v.isShared ? ' (سازمانی)' : '' }}
-        </option>
-      </select>
-    </label>
-    <button type="button" class="btn" title="ذخیره فیلتر فعلی" @click="openSave">
-      <UiIcon name="flag" :size="14" />
+  <!-- یک خط فشرده: سلکت + ذخیره (+ حذف) -->
+  <a-space-compact block dir="rtl" :style="{ width: '100%' }">
+    <a-select
+      :value="activeId"
+      allow-clear
+      :disabled="loading"
+      :loading="loading"
+      :options="selectOptions"
+      :placeholder="compact ? 'فیلتر ذخیره‌شده' : '— انتخاب —'"
+      :style="{ flex: 1, minWidth: 0, width: '100%' }"
+      @update:value="onPick"
+    />
+    <a-button :disabled="loading" title="ذخیره فیلتر فعلی" @click="openSave">
+      <template #icon><FlagOutlined /></template>
       ذخیره
-    </button>
-    <button
+    </a-button>
+    <a-button
       v-if="activeId"
-      type="button"
-      class="btn danger"
-      title="حذف فیلتر"
+      danger
       :disabled="busy"
+      title="حذف فیلتر"
       @click="removeView"
     >
-      حذف
-    </button>
-    <p v-if="error" class="err">{{ error }}</p>
+      <template #icon><DeleteOutlined /></template>
+    </a-button>
+  </a-space-compact>
 
-    <div v-if="saveOpen" class="sheet">
-      <div class="sheet-backdrop" aria-hidden="true" />
-      <div class="sheet-panel" role="dialog" aria-modal="true">
-        <header class="sheet-head">
-          <h3>{{ activeId ? 'به‌روزرسانی فیلتر' : 'ذخیره فیلتر' }}</h3>
-          <button type="button" class="x-btn" aria-label="بستن (Esc)" title="بستن (Esc)" @click="saveOpen = false">
-            <UiIcon name="x" :size="16" />
-          </button>
-        </header>
-        <label>
-          نام
-          <input v-model="saveName" type="text" maxlength="120" placeholder="مثلاً سرنخ‌های این هفته" />
-        </label>
-        <label class="check">
-          <input v-model="saveShared" type="checkbox" />
-          اشتراک با سازمان
-        </label>
-        <div class="actions">
-          <button type="button" class="btn primary" :disabled="busy" @click="saveView">
-            {{ busy ? '…' : 'ذخیره' }}
-          </button>
-          <button type="button" class="btn" @click="saveOpen = false">لغو</button>
-        </div>
-      </div>
-    </div>
-  </div>
+  <a-modal
+    v-model:open="saveOpen"
+    :title="activeId ? 'به‌روزرسانی فیلتر' : 'ذخیره فیلتر'"
+    :confirm-loading="busy"
+    ok-text="ذخیره"
+    cancel-text="لغو"
+    destroy-on-close
+    @ok="saveView"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="نام" required>
+        <a-input
+          v-model:value="saveName"
+          :maxlength="120"
+          placeholder="مثلاً سرنخ‌های این هفته"
+        />
+      </a-form-item>
+      <a-form-item :style="{ marginBottom: 0 }">
+        <a-checkbox v-model:checked="saveShared">اشتراک با سازمان</a-checkbox>
+      </a-form-item>
+    </a-form>
+  </a-modal>
 </template>
-
-<style scoped>
-.saved-filters {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 0.45rem;
-  margin-top: 0.55rem;
-}
-.pick {
-  display: grid;
-  gap: 0.2rem;
-  min-width: 11rem;
-}
-.lbl {
-  font-size: 0.72rem;
-  color: #64748b;
-}
-select,
-input[type='text'] {
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 0.4rem 0.55rem;
-  background: #fff;
-  font-size: 0.85rem;
-  color: #0f172a;
-}
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  color: #334155;
-  border-radius: 8px;
-  padding: 0.4rem 0.65rem;
-  font-size: 0.82rem;
-  cursor: pointer;
-}
-.btn.primary {
-  background: #0d9488;
-  border-color: #0d9488;
-  color: #fff;
-}
-.btn.danger {
-  color: #b91c1c;
-}
-.err {
-  width: 100%;
-  margin: 0;
-  font-size: 0.8rem;
-  color: #b91c1c;
-}
-.sheet {
-  position: fixed;
-  inset: 0;
-  z-index: 80;
-  display: grid;
-  place-items: center;
-  padding: 1rem;
-}
-.sheet-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.4);
-}
-.sheet-panel {
-  position: relative;
-  z-index: 1;
-  width: min(100%, 360px);
-  background: #fff;
-  border-radius: 12px;
-  padding: 1rem;
-  display: grid;
-  gap: 0.75rem;
-  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
-}
-.sheet-panel h3 {
-  margin: 0;
-  font-size: 1rem;
-}
-.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
-.x-btn { width: 32px; height: 32px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #64748b; display: grid; place-items: center; cursor: pointer; }
-.x-btn:hover { background: #f8fafc; color: #0f172a; }
-.sheet-panel label {
-  display: grid;
-  gap: 0.3rem;
-  font-size: 0.85rem;
-  color: #334155;
-}
-.check {
-  display: flex !important;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.45rem;
-}
-.actions {
-  display: flex;
-  gap: 0.45rem;
-}
-</style>
diff --git a/apps/web/src/components/TableColumnsMenu.vue b/apps/web/src/components/TableColumnsMenu.vue
index a5e0f47..d0c66db 100644
--- a/apps/web/src/components/TableColumnsMenu.vue
+++ b/apps/web/src/components/TableColumnsMenu.vue
@@ -1,9 +1,18 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import UiIcon from '@/components/UiIcon.vue';
+import { computed, ref } from 'vue';
+import {
+  Button as AButton,
+  Checkbox as ACheckbox,
+  Flex as AFlex,
+  Popover as APopover,
+  Typography,
+} from 'ant-design-vue';
+import { SettingOutlined } from '@ant-design/icons-vue';
 import { useTableColumns } from '@/lib/tableColumns';
 import { toFaDigits } from '@/lib/jalali';
 
+const { Text: ATypographyText } = Typography;
+
 const props = withDefaults(
   defineProps<{
     tableKey: string;
@@ -14,164 +23,49 @@ const props = withDefaults(
 );
 
 const open = ref(false);
-const root = ref<HTMLElement | null>(null);
 const cols = useTableColumns(() => props.tableKey);
 
 const columns = computed(() => cols.columns());
 const hiddenCount = computed(() => cols.hiddenCount());
 
-function onDocClick(e: MouseEvent) {
-  if (open.value && root.value && !root.value.contains(e.target as Node)) open.value = false;
-}
-
-onMounted(() => document.addEventListener('click', onDocClick));
-onBeforeUnmount(() => document.removeEventListener('click', onDocClick));
+const placement = computed(() =>
+  props.align === 'end' ? 'bottomLeft' : 'bottomRight',
+);
 </script>
 
 <template>
-  <div ref="root" class="tc-pop">
-    <button
-      class="tc-tool"
-      type="button"
-      :class="{ active: hiddenCount > 0 }"
-      :title="label"
-      @click.stop="open = !open"
-    >
-      <UiIcon name="sliders" :size="16" />
-      <span class="tc-label">{{ label }}</span>
-      <em v-if="hiddenCount" class="tc-badge">{{ toFaDigits(hiddenCount) }} مخفی</em>
-    </button>
-    <div v-if="open" class="tc-menu" :class="align" @click.stop>
-      <p class="tc-head">نمایش ستون‌ها</p>
-      <p v-if="!columns.length" class="tc-empty">ستونی برای نمایش وجود ندارد.</p>
-      <label v-for="col in columns" :key="col" class="tc-item">
-        <input type="checkbox" :checked="cols.isVisible(col)" @change="cols.toggle(col)" />
-        <span>{{ col }}</span>
-      </label>
-      <button v-if="hiddenCount" type="button" class="tc-reset" @click="cols.showAll()">
-        نمایش همه ستون‌ها
-      </button>
-    </div>
-  </div>
+  <a-popover v-model:open="open" trigger="click" :placement="placement">
+    <template #content>
+      <a-flex
+        vertical
+        :gap="8"
+        style="min-width: 13rem; max-width: calc(100vw - 1.5rem)"
+      >
+        <a-typography-text type="secondary" strong>
+          نمایش ستون‌ها
+        </a-typography-text>
+        <a-typography-text v-if="!columns.length" type="secondary">
+          ستونی برای نمایش وجود ندارد.
+        </a-typography-text>
+        <a-checkbox
+          v-for="col in columns"
+          :key="col"
+          :checked="cols.isVisible(col)"
+          @click.prevent="cols.toggle(col)"
+        >
+          {{ col }}
+        </a-checkbox>
+        <a-button v-if="hiddenCount" type="link" @click="cols.showAll()">
+          نمایش همه ستون‌ها
+        </a-button>
+      </a-flex>
+    </template>
+    <a-button :type="hiddenCount > 0 ? 'primary' : 'default'" :ghost="hiddenCount > 0">
+      <template #icon><SettingOutlined /></template>
+      {{ label }}
+      <template v-if="hiddenCount">
+        · {{ toFaDigits(hiddenCount) }} مخفی
+      </template>
+    </a-button>
+  </a-popover>
 </template>
-
-<style scoped>
-.tc-pop {
-  position: relative;
-}
-
-.tc-tool {
-  min-height: var(--control-h, 2.4rem);
-  height: var(--control-h, 2.4rem);
-  border: 1px solid var(--line);
-  background: #fff;
-  border-radius: var(--radius);
-  padding: 0 0.75rem;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  font: inherit;
-  font-size: var(--fs-sm);
-  color: var(--ink-secondary);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.tc-tool:hover {
-  background: var(--surface-subtle);
-  border-color: var(--line-strong);
-}
-
-.tc-tool.active {
-  border-color: #5eead4;
-  color: #0f766e;
-}
-
-.tc-badge {
-  font-style: normal;
-  font-size: 0.72rem;
-  background: #f0fdfa;
-  color: #0f766e;
-  border-radius: 999px;
-  padding: 0.05rem 0.45rem;
-}
-
-.tc-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  inset-inline-start: 0;
-  z-index: 20;
-  background: #fff;
-  border-radius: var(--radius);
-  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
-  padding: 0.45rem;
-  min-width: 13rem;
-  max-width: calc(100vw - 1.5rem);
-  max-height: min(24rem, 70vh);
-  overflow-y: auto;
-  display: grid;
-  gap: 0.1rem;
-}
-
-.tc-menu.end {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-}
-
-.tc-head {
-  margin: 0 0 0.25rem;
-  padding: 0.25rem 0.5rem;
-  font-size: var(--fs-xs, 0.75rem);
-  color: var(--ink-muted, #64748b);
-  font-weight: 700;
-}
-
-.tc-empty {
-  margin: 0;
-  padding: 0.4rem 0.5rem;
-  font-size: var(--fs-sm);
-  color: var(--ink-muted, #64748b);
-}
-
-.tc-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.42rem 0.5rem;
-  border-radius: var(--radius);
-  cursor: pointer;
-  font-size: var(--fs-sm);
-  user-select: none;
-}
-
-.tc-item:hover {
-  background: #f0fdfa;
-}
-
-.tc-item input {
-  width: 1rem;
-  height: 1rem;
-  accent-color: #0d9488;
-  margin: 0;
-}
-
-.tc-reset {
-  margin-top: 0.3rem;
-  border: 0;
-  border-top: 1px solid var(--line);
-  background: none;
-  padding: 0.5rem;
-  font: inherit;
-  font-size: var(--fs-sm);
-  color: #0f766e;
-  cursor: pointer;
-  text-align: start;
-}
-
-@media (max-width: 640px) {
-  .tc-label {
-    display: none;
-  }
-}
-</style>
diff --git a/apps/web/src/components/UserMultiSelect.vue b/apps/web/src/components/UserMultiSelect.vue
index 8f40e2e..aaff795 100644
--- a/apps/web/src/components/UserMultiSelect.vue
+++ b/apps/web/src/components/UserMultiSelect.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
-import UiIcon from '@/components/UiIcon.vue';
-import UserAvatar from '@/components/UserAvatar.vue';
-import { matchesSearch } from '@/lib/search';
+import { computed } from 'vue';
+import { Select as ASelect } from 'ant-design-vue';
 
 type PickUser = { id: string; fullName: string };
 
@@ -21,335 +19,35 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   'update:modelValue': [ids: string[]];
-  /** پس از بستن لیست یا حذف یک نفر، اگر انتخاب تغییر کرده باشد */
   change: [ids: string[]];
 }>();
 
-const open = ref(false);
-const query = ref('');
-const root = ref<HTMLElement | null>(null);
-const searchInput = ref<HTMLInputElement | null>(null);
-let snapshot: string[] = [];
-
-const byId = computed(() => new Map(props.users.map((u) => [u.id, u])));
-const selected = computed(() =>
-  props.modelValue.map((id) => byId.value.get(id) ?? { id, fullName: '—' }),
+const options = computed(() =>
+  props.users.map((u) => ({ value: u.id, label: u.fullName })),
 );
-const filtered = computed(() => {
-  if (!query.value.trim()) return props.users;
-  return props.users.filter((u) => matchesSearch(query.value, [u.fullName]));
-});
-const canRemove = computed(() => props.modelValue.length > props.min);
 
-function sameSet(a: string[], b: string[]) {
-  return a.length === b.length && a.every((id) => b.includes(id));
+function onUpdate(value: unknown) {
+  const ids = Array.isArray(value) ? value.map(String) : [];
+  if (ids.length < props.min && props.modelValue.length >= props.min) {
+    emit('update:modelValue', [...props.modelValue]);
+    return;
+  }
+  emit('update:modelValue', ids);
+  emit('change', ids);
 }
-
-function openList() {
-  if (props.disabled) return;
-  snapshot = [...props.modelValue];
-  query.value = '';
-  open.value = true;
-  void nextTick(() => searchInput.value?.focus());
-}
-
-function closeList() {
-  if (!open.value) return;
-  open.value = false;
-  if (!sameSet(snapshot, props.modelValue)) emit('change', [...props.modelValue]);
-}
-
-function toggle(id: string) {
-  const has = props.modelValue.includes(id);
-  if (has && !canRemove.value) return;
-  const next = has ? props.modelValue.filter((x) => x !== id) : [...props.modelValue, id];
-  emit('update:modelValue', next);
-}
-
-function remove(id: string) {
-  if (props.disabled || !canRemove.value) return;
-  const next = props.modelValue.filter((x) => x !== id);
-  emit('update:modelValue', next);
-  if (!open.value) emit('change', next);
-}
-
-function onDocClick(e: MouseEvent) {
-  if (open.value && root.value && !root.value.contains(e.target as Node)) closeList();
-}
-
-function onKey(e: KeyboardEvent) {
-  if (e.key === 'Escape') closeList();
-}
-
-onMounted(() => document.addEventListener('mousedown', onDocClick));
-onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick));
 </script>
 
 <template>
-  <div ref="root" class="ums" :class="{ disabled }" @keydown="onKey">
-    <div class="chips">
-      <span v-for="u in selected" :key="u.id" class="chip">
-        <UserAvatar :name="u.fullName" :user-id="u.id" :size="22" />
-        <span class="chip-name">{{ u.fullName }}</span>
-        <button
-          v-if="canRemove && !disabled"
-          type="button"
-          class="chip-x"
-          :aria-label="`حذف ${u.fullName}`"
-          @click.stop="remove(u.id)"
-        >
-          <UiIcon name="x" :size="12" />
-        </button>
-      </span>
-      <span v-if="!selected.length" class="empty">{{ emptyLabel }}</span>
-      <button
-        type="button"
-        class="add"
-        :disabled="disabled"
-        :aria-expanded="open"
-        @click.stop="open ? closeList() : openList()"
-      >
-        <UiIcon name="user-plus" :size="14" />
-        {{ addLabel }}
-      </button>
-    </div>
-
-    <div v-if="open" class="pop" @click.stop>
-      <label class="search">
-        <UiIcon name="search" :size="14" />
-        <input ref="searchInput" v-model="query" type="search" placeholder="جستجوی نام…" />
-      </label>
-      <ul class="list">
-        <li v-for="u in filtered" :key="u.id">
-          <button
-            type="button"
-            class="row"
-            :class="{ on: modelValue.includes(u.id) }"
-            @click="toggle(u.id)"
-          >
-            <span class="check" aria-hidden="true">
-              <UiIcon v-if="modelValue.includes(u.id)" name="check-plain" :size="12" />
-            </span>
-            <UserAvatar :name="u.fullName" :user-id="u.id" :size="26" />
-            <span class="row-name">{{ u.fullName }}</span>
-          </button>
-        </li>
-        <li v-if="!filtered.length" class="none">کاربری پیدا نشد.</li>
-      </ul>
-      <div class="foot">
-        <span>{{ modelValue.length.toLocaleString('fa-IR') }} نفر انتخاب شده</span>
-        <button type="button" class="done" @click="closeList">تأیید</button>
-      </div>
-    </div>
-  </div>
+  <a-select
+    mode="multiple"
+    allow-clear
+    show-search
+    option-filter-prop="label"
+    :value="modelValue"
+    :options="options"
+    :disabled="disabled"
+    :placeholder="emptyLabel"
+    style="width: 100%"
+    @update:value="onUpdate"
+  />
 </template>
-
-<style scoped>
-.ums {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-}
-
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.18rem 0.25rem;
-  padding-inline-end: 0.5rem;
-  border-radius: 999px;
-  background: #f0fdfa;
-  border: 1px solid #ccfbf1;
-  color: #0f172a;
-  font-size: 0.82rem;
-  font-weight: 600;
-  max-width: 100%;
-}
-
-.chip-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.chip-x {
-  width: 20px;
-  height: 20px;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: #64748b;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  padding: 0;
-}
-
-.chip-x:hover {
-  background: #fee2e2;
-  color: #b91c1c;
-}
-
-.empty {
-  color: #94a3b8;
-  font-size: 0.82rem;
-  font-weight: 500;
-}
-
-.add {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  height: 30px;
-  padding: 0 0.7rem;
-  border: 1px dashed #5eead4;
-  border-radius: 999px;
-  background: #fff;
-  color: #0f766e;
-  font: inherit;
-  font-size: 0.8rem;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.add:hover:not(:disabled) {
-  background: #f0fdfa;
-}
-
-.add:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.pop {
-  position: absolute;
-  top: calc(100% + 6px);
-  inset-inline-start: 0;
-  z-index: 30;
-  width: min(18rem, calc(100vw - 2rem));
-  background: #fff;
-  border-radius: var(--radius);
-  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
-  border: 1px solid #f1f5f9;
-  display: grid;
-  overflow: hidden;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin: 0.5rem;
-  padding: 0 0.6rem;
-  height: 2.2rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  color: #94a3b8;
-}
-
-.search input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  outline: none;
-  font: inherit;
-  font-size: 0.85rem;
-  background: transparent;
-  color: #0f172a;
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0 0.35rem 0.35rem;
-  max-height: 15rem;
-  overflow-y: auto;
-}
-
-.row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.42rem 0.5rem;
-  border: 0;
-  border-radius: 10px;
-  background: none;
-  font: inherit;
-  font-size: 0.86rem;
-  font-weight: 500;
-  color: #0f172a;
-  text-align: start;
-  cursor: pointer;
-}
-
-.row:hover {
-  background: #f8fafc;
-}
-
-.row.on {
-  background: #f0fdfa;
-  font-weight: 700;
-}
-
-.check {
-  width: 18px;
-  height: 18px;
-  flex-shrink: 0;
-  border-radius: 5px;
-  border: 1.5px solid #cbd5e1;
-  display: grid;
-  place-items: center;
-  color: #fff;
-}
-
-.row.on .check {
-  background: #14b8a6;
-  border-color: #14b8a6;
-}
-
-.row-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.none {
-  padding: 0.75rem;
-  color: #94a3b8;
-  font-size: 0.84rem;
-  text-align: center;
-}
-
-.foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem 0.65rem;
-  border-top: 1px solid #f1f5f9;
-  font-size: 0.78rem;
-  color: #64748b;
-}
-
-.done {
-  border: 0;
-  border-radius: 8px;
-  background: #14b8a6;
-  color: #fff;
-  font: inherit;
-  font-size: 0.8rem;
-  font-weight: 700;
-  padding: 0.35rem 0.9rem;
-  cursor: pointer;
-}
-</style>
diff --git a/apps/web/src/components/VoiceToTextButton.vue b/apps/web/src/components/VoiceToTextButton.vue
index 54b9f7e..a11558e 100644
--- a/apps/web/src/components/VoiceToTextButton.vue
+++ b/apps/web/src/components/VoiceToTextButton.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from 'vue';
+import { Button as AButton, Typography } from 'ant-design-vue';
+import { AudioOutlined, PauseCircleOutlined } from '@ant-design/icons-vue';
 import { toFaDigits } from '@/lib/jalali';
-import UiIcon from '@/components/UiIcon.vue';
+
+const { Text: ATypographyText } = Typography;
 
 type SpeechResult = {
   isFinal: boolean;
@@ -186,102 +189,23 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="vtt-wrap" :class="[variant, { live: recording }]">
-    <button
-      class="vtt"
-      type="button"
-      :class="{ on: recording }"
+  <div>
+    <a-button
+      :type="recording ? 'primary' : 'default'"
+      :danger="recording"
       :disabled="disabled"
       :aria-label="ariaLabel"
       :title="ariaLabel"
       @click="toggle"
     >
-      <span class="glyph" aria-hidden="true">
-        <UiIcon :name="recording ? 'stop' : 'mic'" :size="variant === 'toolbar' ? 18 : 16" />
-      </span>
-      <span v-if="recording" class="timer">{{ timerLabel }}</span>
-    </button>
-    <p v-if="error && !hideError" class="err">{{ error }}</p>
+      <template #icon>
+        <PauseCircleOutlined v-if="recording" />
+        <AudioOutlined v-else />
+      </template>
+      <span v-if="recording">{{ timerLabel }}</span>
+    </a-button>
+    <div v-if="error && !hideError">
+      <a-typography-text type="danger">{{ error }}</a-typography-text>
+    </div>
   </div>
 </template>
-
-<style scoped>
-.vtt-wrap {
-  display: grid;
-  gap: 0.3rem;
-  justify-items: start;
-}
-
-.vtt {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  border: 1px solid #d7e3dc;
-  background: #f4faf7;
-  color: #0f766e;
-  border-radius: var(--radius);
-  min-height: var(--control-h);
-  height: var(--control-h);
-  padding: 0 0.75rem;
-  font: inherit;
-  font-size: 0.8rem;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.vtt:hover:not(:disabled) {
-  background: #ecfdf5;
-}
-
-.vtt.on {
-  border-color: #5eead4;
-  background: #042f2e;
-  color: #ecfdf5;
-  padding-inline: 0.7rem 0.85rem;
-  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.22);
-}
-
-.vtt:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.glyph {
-  width: 22px;
-  height: 22px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-}
-
-.timer {
-  font-variant-numeric: tabular-nums;
-  min-width: 2.4rem;
-}
-
-.toolbar .vtt {
-  width: 38px;
-  height: 38px;
-  min-height: 38px;
-  padding: 0;
-  border-radius: var(--radius);
-  border-color: transparent;
-  background: #f8fafc;
-  justify-content: center;
-}
-
-.toolbar.live .vtt {
-  width: auto;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  padding: 0 0.7rem;
-  border-radius: var(--radius);
-  background: #042f2e;
-}
-
-.err {
-  margin: 0;
-  color: #b91c1c;
-  font-size: 0.78rem;
-}
-</style>
diff --git a/apps/web/src/components/pipeline/AddDealButton.vue b/apps/web/src/components/pipeline/AddDealButton.vue
index cc0a102..e9b6f55 100644
--- a/apps/web/src/components/pipeline/AddDealButton.vue
+++ b/apps/web/src/components/pipeline/AddDealButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import UiButton from '@/components/ui/UiButton.vue';
-import UiIcon from '@/components/UiIcon.vue';
+import { PlusOutlined } from '@ant-design/icons-vue';
+import { Button as AButton } from 'ant-design-vue';
 import type { PipelineAccent } from '@/lib/pipeline-board';
 import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
 
@@ -18,15 +18,14 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <UiButton
-    variant="dashed"
+  <a-button
+    type="dashed"
     block
-    class="add-deal"
     :style="{ color: PIPELINE_ACCENT[accent].text }"
     :aria-label="label"
     @click="emit('add')"
   >
-    <UiIcon name="plus" :size="16" />
+    <template #icon><PlusOutlined /></template>
     {{ label }}
-  </UiButton>
+  </a-button>
 </template>
diff --git a/apps/web/src/components/pipeline/DealCard.vue b/apps/web/src/components/pipeline/DealCard.vue
index 5addce2..472e34d 100644
--- a/apps/web/src/components/pipeline/DealCard.vue
+++ b/apps/web/src/components/pipeline/DealCard.vue
@@ -1,6 +1,21 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import UiIcon from '@/components/UiIcon.vue';
+import {
+  CalendarOutlined,
+  CheckOutlined,
+  DeleteOutlined,
+  MoreOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Avatar as AAvatar,
+  Button as AButton,
+  Card as ACard,
+  Flex as AFlex,
+  Space as ASpace,
+  Tag as ATag,
+  Typography,
+  theme,
+} from 'ant-design-vue';
 import { userAvatarSrc } from '@/lib/userAvatars';
 import type { PipelineAccent, PipelineDeal, PipelineUiCopy } from '@/lib/pipeline-board';
 import {
@@ -30,6 +45,9 @@ const emit = defineEmits<{
   bulkDelete: [];
 }>();
 
+const { Text: ATypographyText } = Typography;
+const { token } = theme.useToken();
+
 const showAmount = computed(
   () => !props.copy.hideAmount && props.deal.amount != null,
 );
@@ -47,306 +65,144 @@ const extraAssignees = computed(() =>
   Math.max(0, (props.deal.assigneeNames?.length ?? 0) - 1),
 );
 const showTrash = computed(() => props.selectMode && props.selected);
+
+const cardStyle = computed(() => ({
+  cursor: props.selectMode ? 'pointer' : 'grab',
+  opacity: props.dragging ? 0.45 : 1,
+  margin: 0,
+  background: props.selected ? token.value.colorPrimaryBg : token.value.colorBgContainer,
+  borderColor: props.selected ? token.value.colorPrimary : token.value.colorBorderSecondary,
+  boxShadow: token.value.boxShadowTertiary,
+}));
 </script>
 
 <template>
-  <article
-    class="deal-card"
-    :class="{
-      dragging,
-      'no-amount': !showAmount,
-      'select-mode': selectMode,
-      selected,
-    }"
+  <a-card
+    hoverable
+    :bordered="true"
+    :body-style="{ padding: '12px 14px', margin: 0 }"
+    :style="cardStyle"
     :data-card-id="deal.id"
     :draggable="!selectMode"
     role="listitem"
     :aria-grabbed="dragging ? 'true' : 'false'"
-    :style="{
-      '--badge-bg': colors.soft,
-      '--badge-fg': colors.text,
-    }"
     @dragstart="!selectMode && emit('dragStart', deal, $event)"
     @dragend="emit('dragEnd')"
     @dblclick="!selectMode && emit('open', deal.id)"
     @click="selectMode && emit('toggleSelect', deal.id)"
   >
-    <button
-      v-if="selectMode"
-      type="button"
-      class="tick"
-      :class="{ on: selected }"
-      :aria-label="selected ? 'لغو انتخاب' : 'انتخاب معامله'"
-      :aria-pressed="selected"
-      @click.stop="emit('toggleSelect', deal.id)"
-    >
-      <UiIcon v-if="selected" name="check" :size="14" />
-    </button>
-    <span v-else class="badge" aria-hidden="true">{{ deal.initials }}</span>
-    <div class="titles">
-      <h3 @click.stop="selectMode ? emit('toggleSelect', deal.id) : emit('open', deal.id)">
-        {{ deal.title }}
-      </h3>
-      <p v-if="deal.description" class="desc">{{ deal.description }}</p>
-    </div>
-    <button
-      v-if="showTrash"
-      type="button"
-      class="menu trash"
-      aria-label="حذف انتخاب‌شده‌ها"
-      @click.stop="emit('bulkDelete')"
-    >
-      <UiIcon name="trash" :size="16" />
-    </button>
-    <button
-      v-else
-      type="button"
-      class="menu"
-      :aria-label="copy.itemMenuAria"
-      @click.stop="emit('menu', deal.id)"
-    >
-      <UiIcon name="dots-v" :size="16" />
-    </button>
-    <img
-      class="avatar"
-      :src="avatarSrc"
-      alt=""
-      width="32"
-      height="32"
-      :title="assigneeTitle"
-    />
-    <span v-if="extraAssignees > 0" class="more-assignees" :title="assigneeTitle">
-      +{{ extraAssignees }}
-    </span>
-    <span class="date">
-      {{ deal.date }}
-      <UiIcon name="calendar" :size="13" />
-    </span>
-    <div v-if="showAmount" class="amount">
-      <strong>{{ money.number }}</strong>
-      <span>{{ money.unit }}</span>
-    </div>
-  </article>
+    <a-flex vertical :gap="10" :style="{ width: '100%', minWidth: 0 }">
+      <a-flex :gap="10" align="flex-start" :style="{ minWidth: 0 }">
+        <a-button
+          v-if="selectMode"
+          type="text"
+          shape="circle"
+          :aria-label="selected ? 'لغو انتخاب' : 'انتخاب معامله'"
+          :aria-pressed="selected"
+          :style="{
+            width: '28px',
+            height: '28px',
+            minWidth: '28px',
+            color: selected ? token.colorTextLightSolid : token.colorTextTertiary,
+            border: `2px solid ${selected ? token.colorPrimary : token.colorBorder}`,
+            background: selected ? token.colorPrimary : token.colorBgContainer,
+          }"
+          @click.stop="emit('toggleSelect', deal.id)"
+        >
+          <template #icon>
+            <CheckOutlined v-if="selected" />
+          </template>
+        </a-button>
+        <a-avatar
+          v-else
+          :style="{
+            background: colors.soft,
+            color: colors.text,
+            flexShrink: 0,
+            fontWeight: 700,
+            fontSize: `${token.fontSizeSM}px`,
+          }"
+        >
+          {{ deal.initials }}
+        </a-avatar>
+
+        <div :style="{ flex: 1, minWidth: 0 }">
+          <a-typography-text
+            strong
+            ellipsis
+            :style="{ display: 'block', margin: 0, lineHeight: 1.35, cursor: 'pointer' }"
+            :title="deal.title"
+            @click.stop="selectMode ? emit('toggleSelect', deal.id) : emit('open', deal.id)"
+          >
+            {{ deal.title }}
+          </a-typography-text>
+          <a-typography-text
+            v-if="deal.description"
+            type="secondary"
+            ellipsis
+            :style="{
+              display: 'block',
+              margin: 0,
+              marginTop: '2px',
+              fontSize: `${token.fontSizeSM}px`,
+            }"
+            :title="deal.description"
+          >
+            {{ deal.description }}
+          </a-typography-text>
+        </div>
+
+        <a-button
+          v-if="showTrash"
+          type="text"
+          danger
+          aria-label="حذف انتخاب‌شده‌ها"
+          @click.stop="emit('bulkDelete')"
+        >
+          <template #icon><DeleteOutlined /></template>
+        </a-button>
+        <a-button
+          v-else
+          type="text"
+          :aria-label="copy.itemMenuAria"
+          @click.stop="emit('menu', deal.id)"
+        >
+          <template #icon><MoreOutlined /></template>
+        </a-button>
+      </a-flex>
+
+      <a-flex
+        justify="space-between"
+        align="center"
+        :gap="8"
+        :style="{
+          minWidth: 0,
+          paddingTop: '8px',
+          borderTop: `1px solid ${token.colorSplit}`,
+        }"
+      >
+        <a-space :size="8" align="center" :style="{ minWidth: 0 }">
+          <a-avatar :src="avatarSrc" :size="24" :title="assigneeTitle" />
+          <a-tag v-if="extraAssignees > 0" :bordered="false" :title="assigneeTitle">
+            +{{ extraAssignees }}
+          </a-tag>
+          <a-typography-text type="secondary" :style="{ fontSize: `${token.fontSizeSM}px` }">
+            <CalendarOutlined :style="{ marginInlineEnd: '4px' }" />
+            {{ deal.date }}
+          </a-typography-text>
+        </a-space>
+        <a-typography-text
+          v-if="showAmount"
+          strong
+          dir="ltr"
+          :style="{ margin: 0, whiteSpace: 'nowrap', flexShrink: 0 }"
+        >
+          {{ money.number }}
+          <a-typography-text type="secondary" :style="{ fontSize: `${token.fontSizeSM}px` }">
+            {{ money.unit }}
+          </a-typography-text>
+        </a-typography-text>
+      </a-flex>
+    </a-flex>
+  </a-card>
 </template>
-
-<style scoped>
-.deal-card {
-  --face: 32px;
-  display: grid;
-  grid-template-columns: var(--face) minmax(0, 1fr) auto;
-  grid-template-rows: auto auto;
-  column-gap: 0.5rem;
-  row-gap: 0.65rem;
-  align-items: center;
-  background: #fff;
-  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
-  border-radius: var(--radius);
-  padding: 0.85rem 0.7rem 0.85rem 0.55rem;
-  min-width: 0;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
-  cursor: grab;
-  transition:
-    box-shadow 0.18s ease,
-    border-color 0.18s ease,
-    transform 0.18s ease,
-    opacity 0.18s ease,
-    background 0.18s ease;
-  text-align: right;
-  direction: rtl;
-}
-
-.deal-card.select-mode {
-  cursor: pointer;
-}
-
-.deal-card.selected {
-  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
-  background: color-mix(in srgb, var(--accent) 6%, #fff);
-}
-
-.deal-card:hover {
-  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
-}
-
-.deal-card:active {
-  cursor: grabbing;
-}
-
-.deal-card.select-mode:active {
-  cursor: pointer;
-}
-
-.deal-card.dragging {
-  opacity: 0.95;
-  transform: scale(1.02);
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
-  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
-}
-
-.deal-card.no-amount .date {
-  grid-column: 2 / -1;
-}
-
-.deal-card:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.badge,
-.avatar,
-.tick {
-  width: var(--face);
-  height: var(--face);
-  max-width: var(--face);
-  border-radius: 999px;
-  justify-self: center;
-}
-
-.badge {
-  display: grid;
-  place-items: center;
-  background: var(--badge-bg);
-  color: var(--badge-fg);
-  font-size: 0.65rem;
-  font-weight: 600;
-  line-height: 1;
-}
-
-.tick {
-  display: grid;
-  place-items: center;
-  border: 2px solid #cbd5e1;
-  background: #fff;
-  color: #fff;
-  padding: 0;
-  cursor: pointer;
-}
-
-.tick.on {
-  border-color: var(--accent);
-  background: var(--accent);
-}
-
-.avatar {
-  object-fit: cover;
-  border: 1px solid var(--line);
-}
-
-.more-assignees {
-  width: auto;
-  min-width: 1.15rem;
-  height: 1.15rem;
-  padding: 0 0.22rem;
-  margin-inline-start: -1.55rem;
-  margin-top: 1.1rem;
-  border-radius: 999px;
-  background: #0f766e;
-  color: #fff;
-  font-size: 0.62rem;
-  font-weight: 700;
-  display: grid;
-  place-items: center;
-  z-index: 1;
-  justify-self: end;
-  align-self: start;
-}
-
-.titles {
-  min-width: 0;
-  text-align: right;
-}
-
-.titles h3 {
-  margin: 0;
-  font-size: 0.82rem;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--ink);
-  cursor: pointer;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow-wrap: anywhere;
-}
-
-.desc {
-  margin: 0.1rem 0 0;
-  color: var(--muted);
-  font-size: 0.7rem;
-  line-height: 1.35;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.menu {
-  align-self: start;
-  justify-self: end;
-  border: 0;
-  background: none;
-  color: var(--muted);
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 0;
-  line-height: 0;
-  cursor: pointer;
-}
-
-.menu:hover,
-.menu:focus-visible {
-  color: var(--ink);
-  background: none;
-  outline: none;
-}
-
-.menu.trash {
-  color: var(--danger);
-}
-
-.menu.trash:hover,
-.menu.trash:focus-visible {
-  color: var(--danger);
-}
-
-.date {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.25rem;
-  min-width: 0;
-  width: 100%;
-  color: var(--muted);
-  font-size: 0.68rem;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.amount {
-  text-align: left;
-  display: grid;
-  justify-items: end;
-  gap: 0.02rem;
-  min-width: 0;
-}
-
-.amount strong {
-  font-size: 0.88rem;
-  font-weight: 600;
-  color: var(--ink);
-  letter-spacing: -0.01em;
-  max-width: 100%;
-  overflow-wrap: anywhere;
-}
-
-.amount span {
-  font-size: 0.65rem;
-  color: var(--muted);
-  font-weight: 600;
-}
-</style>
diff --git a/apps/web/src/components/pipeline/PipelineBoard.vue b/apps/web/src/components/pipeline/PipelineBoard.vue
index 16b52bc..e088e5c 100644
--- a/apps/web/src/components/pipeline/PipelineBoard.vue
+++ b/apps/web/src/components/pipeline/PipelineBoard.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { nextTick, ref } from 'vue';
-import UiIcon from '@/components/UiIcon.vue';
+import { PlusOutlined } from '@ant-design/icons-vue';
+import {
+  Button as AButton,
+  Card as ACard,
+  Flex as AFlex,
+  Input as AInput,
+  Space as ASpace,
+} from 'ant-design-vue';
 import PipelineColumn from './PipelineColumn.vue';
 import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
 import { DEAL_BOARD_COPY } from '@/lib/pipeline-board';
@@ -39,13 +46,40 @@ const emit = defineEmits<{
 
 const adding = ref(false);
 const newName = ref('');
-const addInput = ref<HTMLInputElement | null>(null);
+const addInput = ref<{ focus: () => void } | null>(null);
+
+const shellStyle = {
+  boxSizing: 'border-box' as const,
+  flex: '1 1 auto',
+  height: 0,
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  padding: 0,
+  minWidth: 0,
+  position: 'relative' as const,
+  overflow: 'hidden' as const,
+};
+
+const trackStyle = {
+  boxSizing: 'border-box' as const,
+  flex: '1 1 auto',
+  height: 0,
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'row' as const,
+  alignItems: 'stretch' as const,
+  gap: '16px',
+  width: '100%',
+  overflowX: 'auto' as const,
+  overflowY: 'hidden' as const,
+};
 
 async function startAdd() {
   adding.value = true;
   newName.value = '';
   await nextTick();
-  addInput.value?.focus();
+  addInput.value?.focus?.();
 }
 
 function cancelAdd() {
@@ -63,193 +97,88 @@ function submitAdd() {
 </script>
 
 <template>
-  <div class="board-shell" dir="rtl">
-    <div class="board">
-    <PipelineColumn
-      v-for="(stage, index) in stages"
-      :key="stage.id"
-      :stage="stage"
-      :dragging-id="draggingId"
-      :drop-active="dropStageId === stage.id"
-      :can-manage="canManage"
-      :copy="copy"
-      :select-mode="selectMode"
-      :selected-ids="selectedIds"
-      :is-first="index === 0"
-      :is-last="index === stages.length - 1"
-      @drag-start="(d, e) => emit('dragStart', d, e)"
-      @drag-end="emit('dragEnd')"
-      @drag-over="(id, e) => emit('dragOver', id, e)"
-      @drop="(id, e, index) => emit('drop', id, e, index)"
-      @add-deal="emit('addDeal', $event)"
-      @open-deal="emit('openDeal', $event)"
-      @menu-deal="emit('menuDeal', $event)"
-      @toggle-select="emit('toggleSelect', $event)"
-      @bulk-delete="emit('bulkDelete')"
-      @rename="(id, title) => emit('renameStage', id, title)"
-      @delete="emit('deleteStage', $event)"
-      @move="(id, dir) => emit('moveStage', id, dir)"
-      @column-drag-start="(id, e) => emit('columnDragStart', id, e)"
-      @column-drag-end="emit('columnDragEnd')"
-      @load-more="emit('loadMore', $event)"
-    />
+  <div class="pipeline-board-shell" dir="rtl" :style="shellStyle">
+    <div class="pipeline-board-track" :style="trackStyle">
+      <PipelineColumn
+        v-for="(stage, index) in stages"
+        :key="stage.id"
+        :stage="stage"
+        :dragging-id="draggingId"
+        :drop-active="dropStageId === stage.id"
+        :can-manage="canManage"
+        :copy="copy"
+        :select-mode="selectMode"
+        :selected-ids="selectedIds"
+        :is-first="index === 0"
+        :is-last="index === stages.length - 1"
+        @drag-start="(d, e) => emit('dragStart', d, e)"
+        @drag-end="emit('dragEnd')"
+        @drag-over="(id, e) => emit('dragOver', id, e)"
+        @drop="(id, e, index) => emit('drop', id, e, index)"
+        @add-deal="emit('addDeal', $event)"
+        @open-deal="emit('openDeal', $event)"
+        @menu-deal="emit('menuDeal', $event)"
+        @toggle-select="emit('toggleSelect', $event)"
+        @bulk-delete="emit('bulkDelete')"
+        @rename="(id, title) => emit('renameStage', id, title)"
+        @delete="emit('deleteStage', $event)"
+        @move="(id, dir) => emit('moveStage', id, dir)"
+        @column-drag-start="(id, e) => emit('columnDragStart', id, e)"
+        @column-drag-end="emit('columnDragEnd')"
+        @load-more="emit('loadMore', $event)"
+      />
 
-    <section v-if="canManage" class="add-col">
-      <form v-if="adding" class="add-form" @submit.prevent="submitAdd">
-        <input
-          ref="addInput"
-          v-model="newName"
-          maxlength="80"
-          placeholder="نام ستون جدید…"
-          aria-label="نام ستون جدید"
-          @keydown.esc.prevent="cancelAdd"
-        />
-        <div class="add-actions">
-          <button class="ok" type="submit" :disabled="newName.trim().length < 1">
-            افزودن
-          </button>
-          <button class="cancel" type="button" @click="cancelAdd">انصراف</button>
-        </div>
-      </form>
-      <button v-else type="button" class="add-btn" @click="startAdd">
-        <UiIcon name="plus" :size="18" />
-        افزودن ستون
-      </button>
-    </section>
+      <div
+        v-if="canManage"
+        :style="{
+          flex: '0 0 280px',
+          width: '280px',
+          alignSelf: 'stretch',
+          display: 'flex',
+          alignItems: 'flex-start',
+        }"
+      >
+        <a-card v-if="adding" :style="{ width: '100%' }" :body-style="{ padding: '12px' }">
+          <a-flex vertical :gap="12">
+            <a-input
+              ref="addInput"
+              v-model:value="newName"
+              :maxlength="80"
+              placeholder="نام ستون جدید…"
+              aria-label="نام ستون جدید"
+              @pressEnter="submitAdd"
+              @keydown.esc.prevent="cancelAdd"
+            />
+            <a-space>
+              <a-button
+                type="primary"
+                :disabled="newName.trim().length < 1"
+                @click="submitAdd"
+              >
+                افزودن
+              </a-button>
+              <a-button @click="cancelAdd">انصراف</a-button>
+            </a-space>
+          </a-flex>
+        </a-card>
+        <a-button v-else type="dashed" block :style="{ minHeight: '52px' }" @click="startAdd">
+          <template #icon><PlusOutlined /></template>
+          افزودن ستون
+        </a-button>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.board-shell {
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: var(--pad-modal);
-  min-width: 0;
-}
-
-.board {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  align-items: stretch;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding: 0.1rem 0.05rem 0.5rem;
-  touch-action: pan-x pan-y;
-  overscroll-behavior-x: contain;
-  -webkit-overflow-scrolling: touch;
+.pipeline-board-track {
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
 }
-
-.board::-webkit-scrollbar {
+.pipeline-board-track::-webkit-scrollbar {
   height: 8px;
 }
-
-.board::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--muted) 38%, transparent);
+.pipeline-board-track::-webkit-scrollbar-thumb {
   border-radius: 999px;
-}
-
-.add-col {
-  flex: 0 0 17.5rem;
-  min-width: 17.5rem;
-  min-height: 420px;
-  display: flex;
-  align-items: flex-start;
-  padding-top: 0.15rem;
-}
-
-.add-btn {
-  width: 100%;
-  min-height: 3.2rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  border: 1.5px dashed var(--line);
-  border-radius: var(--radius);
-  background: #f8fafc;
-  color: var(--muted);
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.add-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent-deep, #0f766e);
-  background: color-mix(in srgb, var(--accent) 6%, #fff);
-}
-
-.add-form {
-  width: 100%;
-  display: grid;
-  gap: 0.55rem;
-  padding: 0.75rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: #fff;
-}
-
-.add-form input {
-  width: 100%;
-  min-height: var(--control-h);
-  padding: 0 0.75rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  font: inherit;
-}
-
-.add-actions {
-  display: flex;
-  gap: 0.4rem;
-}
-
-.add-actions .ok,
-.add-actions .cancel {
-  min-height: var(--control-h);
-  padding: 0 0.85rem;
-  border-radius: var(--radius);
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.add-actions .ok {
-  border: 0;
-  background: var(--accent);
-  color: #fff;
-}
-
-.add-actions .ok:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.add-actions .cancel {
-  border: 1px solid var(--line);
-  background: #fff;
-  color: var(--ink);
-}
-
-@container pipeline (max-width: 720px) {
-  .board {
-    scroll-snap-type: x mandatory;
-    scroll-padding-inline: 0.25rem;
-  }
-
-  .add-col {
-    flex: 0 0 min(20rem, 86cqi);
-    width: min(20rem, 86cqi);
-    min-width: min(20rem, 86cqi);
-    min-height: 360px;
-    scroll-snap-align: start;
-  }
+  background: color-mix(in srgb, currentColor 28%, transparent);
 }
 </style>
diff --git a/apps/web/src/components/pipeline/PipelineColumn.vue b/apps/web/src/components/pipeline/PipelineColumn.vue
index ab35c5b..f09116e 100644
--- a/apps/web/src/components/pipeline/PipelineColumn.vue
+++ b/apps/web/src/components/pipeline/PipelineColumn.vue
@@ -1,6 +1,19 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
-import UiIcon from '@/components/UiIcon.vue';
+import { computed, nextTick, ref } from 'vue';
+import {
+  HolderOutlined,
+  MoreOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Button as AButton,
+  Dropdown as ADropdown,
+  Input as AInput,
+  Menu as AMenu,
+  Tag as ATag,
+  Typography,
+  theme,
+} from 'ant-design-vue';
 import AddDealButton from './AddDealButton.vue';
 import DealCard from './DealCard.vue';
 import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
@@ -39,11 +52,63 @@ const emit = defineEmits<{
   loadMore: [stageId: string];
 }>();
 
+const { Text: ATypographyText } = Typography;
+const { token } = theme.useToken();
+
 const renaming = ref(false);
 const draft = ref('');
-const titleInput = ref<HTMLInputElement | null>(null);
+const titleInput = ref<{ focus: () => void; select?: () => void } | null>(null);
 const menuOpen = ref(false);
-const menuRoot = ref<HTMLElement | null>(null);
+
+const accent = computed(() => PIPELINE_ACCENT[props.stage.color]);
+
+const columnStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: '12px',
+  flex: '0 0 280px',
+  width: '280px',
+  alignSelf: 'stretch' as const,
+  minHeight: 0,
+  padding: 0,
+  borderRadius: `${token.value.borderRadiusLG}px`,
+  border: `1px solid ${
+    props.dropActive ? token.value.colorPrimary : token.value.colorBorderSecondary
+  }`,
+  background: props.dropActive
+    ? token.value.colorPrimaryBg
+    : token.value.colorFillAlter,
+  boxShadow: props.dropActive
+    ? `0 0 0 2px ${token.value.colorPrimaryBg}`
+    : undefined,
+  overflow: 'hidden' as const,
+}));
+
+const headStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '12px',
+  borderBottom: `1px solid ${token.value.colorBorderSecondary}`,
+  background: token.value.colorBgContainer,
+  minWidth: 0,
+}));
+
+const bodyStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  flex: '1 1 auto',
+  height: 0,
+  minHeight: 0,
+  overflowY: 'auto' as const,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: '12px',
+  padding: '12px',
+  margin: 0,
+}));
 
 function onCardDragOver(stageId: string, event: DragEvent) {
   event.preventDefault();
@@ -62,7 +127,11 @@ function startRename() {
   draft.value = props.stage.title;
   renaming.value = true;
   menuOpen.value = false;
-  void nextTick(() => titleInput.value?.select());
+  void nextTick(() => {
+    const el = titleInput.value as unknown as HTMLInputElement | null;
+    el?.focus?.();
+    el?.select?.();
+  });
 }
 
 function commitRename() {
@@ -78,144 +147,133 @@ function cancelRename() {
   draft.value = props.stage.title;
 }
 
-function toggleMenu() {
-  menuOpen.value = !menuOpen.value;
-}
-
 function onColumnDragStart(event: DragEvent) {
   event.dataTransfer?.setData('text/plain', `stage:${props.stage.id}`);
   event.dataTransfer!.effectAllowed = 'move';
   emit('columnDragStart', props.stage.id, event);
 }
 
-function onDocPointerDown(event: PointerEvent) {
-  const target = event.target as Node | null;
-  const root = menuRoot.value;
-  if (root && target && !root.contains(target)) menuOpen.value = false;
+const menuItems = computed(() => [
+  { key: 'rename', label: 'تغییر نام' },
+  { key: 'right', label: 'انتقال به راست', disabled: props.isFirst },
+  { key: 'left', label: 'انتقال به چپ', disabled: props.isLast },
+  { key: 'delete', label: 'حذف ستون', danger: true },
+]);
+
+function onMenuClick({ key }: { key: string | number }) {
+  menuOpen.value = false;
+  if (key === 'rename') startRename();
+  else if (key === 'right') emit('move', props.stage.id, -1);
+  else if (key === 'left') emit('move', props.stage.id, 1);
+  else if (key === 'delete') emit('delete', props.stage.id);
 }
-
-function onMenuOpened() {
-  document.addEventListener('pointerdown', onDocPointerDown);
-}
-
-function onMenuClosed() {
-  document.removeEventListener('pointerdown', onDocPointerDown);
-}
-
-watch(menuOpen, (open) => {
-  if (open) onMenuOpened();
-  else onMenuClosed();
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('pointerdown', onDocPointerDown);
-});
 </script>
 
 <template>
   <section
-    class="column"
-    :class="{ drop: dropActive }"
-    :style="{
-      '--stage-solid': PIPELINE_ACCENT[stage.color].solid,
-      '--stage-soft': PIPELINE_ACCENT[stage.color].soft,
-      '--stage-border': PIPELINE_ACCENT[stage.color].border,
-      '--stage-text': PIPELINE_ACCENT[stage.color].text,
-    }"
+    :style="columnStyle"
     @dragover.prevent="emit('dragOver', stage.id, $event)"
     @drop.prevent="emit('drop', stage.id, $event)"
   >
-    <header class="column-head">
+    <div :style="headStyle">
       <span
         v-if="canManage"
-        class="grip"
         draggable="true"
         title="کشیدن برای جابه‌جایی"
         aria-label="جابه‌جایی ستون"
+        :style="{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '28px',
+          height: '28px',
+          flexShrink: 0,
+          borderRadius: `${token.borderRadiusSM}px`,
+          color: token.colorTextTertiary,
+          cursor: 'grab',
+          background: token.colorFillQuaternary,
+        }"
         @dragstart="onColumnDragStart"
         @dragend="emit('columnDragEnd')"
       >
-        <UiIcon name="grip" :size="14" />
+        <HolderOutlined />
       </span>
-      <div class="title-wrap">
-        <span class="dot" aria-hidden="true" />
-        <input
-          v-if="renaming"
-          ref="titleInput"
-          v-model="draft"
-          class="title-input"
-          maxlength="80"
-          aria-label="نام ستون"
-          @keydown.enter.prevent="commitRename"
-          @keydown.esc.prevent="cancelRename"
-          @blur="commitRename"
-        />
-        <h2
-          v-else
-          :class="{ editable: canManage }"
-          :title="canManage ? 'برای تغییر نام کلیک کنید' : undefined"
-          @click="startRename"
-        >
-          {{ stage.title }}
-        </h2>
-        <small v-if="stage.badge && !renaming" class="stage-badge">{{ stage.badge }}</small>
-      </div>
-      <span class="count">{{ toFaItemCount(stage.total ?? stage.deals.length, copy.itemNoun) }}</span>
-      <div v-if="canManage" ref="menuRoot" class="more-wrap">
-        <button
-          type="button"
-          class="icon-btn"
-          aria-label="گزینه‌های ستون"
-          :aria-expanded="menuOpen"
-          @click.stop="toggleMenu"
-        >
-          <UiIcon name="dots-v" :size="16" />
-        </button>
-        <div v-if="menuOpen" class="col-menu" role="menu">
-          <button type="button" role="menuitem" @click="startRename">
-            تغییر نام
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            :disabled="isFirst"
-            @click="emit('move', stage.id, -1); menuOpen = false"
-          >
-            انتقال به راست
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            :disabled="isLast"
-            @click="emit('move', stage.id, 1); menuOpen = false"
-          >
-            انتقال به چپ
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            class="danger"
-            @click="emit('delete', stage.id); menuOpen = false"
-          >
-            حذف ستون
-          </button>
-        </div>
-      </div>
-      <button
-        type="button"
-        class="plus"
+
+      <span
+        :style="{
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          background: accent.solid,
+          display: 'inline-block',
+          flexShrink: 0,
+        }"
+        aria-hidden="true"
+      />
+
+      <a-input
+        v-if="renaming"
+        ref="titleInput"
+        v-model:value="draft"
+        :maxlength="80"
+        aria-label="نام ستون"
+        :style="{ flex: 1, minWidth: 0 }"
+        @pressEnter="commitRename"
+        @keydown.esc.prevent="cancelRename"
+        @blur="commitRename"
+      />
+      <a-typography-text
+        v-else
+        strong
+        ellipsis
+        :style="{
+          flex: 1,
+          minWidth: 0,
+          margin: 0,
+          cursor: canManage ? 'text' : 'default',
+        }"
+        :title="canManage ? 'برای تغییر نام کلیک کنید' : stage.title"
+        @click="startRename"
+      >
+        {{ stage.title }}
+      </a-typography-text>
+
+      <a-tag v-if="stage.badge && !renaming" :bordered="false">
+        {{ stage.badge }}
+      </a-tag>
+
+      <a-typography-text type="secondary" :style="{ whiteSpace: 'nowrap', flexShrink: 0 }">
+        {{ toFaItemCount(stage.total ?? stage.deals.length, copy.itemNoun) }}
+      </a-typography-text>
+
+      <a-dropdown
+        v-if="canManage"
+        v-model:open="menuOpen"
+        :trigger="['click']"
+        placement="bottomLeft"
+      >
+        <a-button type="text" aria-label="گزینه‌های ستون" @click.stop>
+          <template #icon><MoreOutlined /></template>
+        </a-button>
+        <template #overlay>
+          <a-menu :items="menuItems" @click="onMenuClick" />
+        </template>
+      </a-dropdown>
+
+      <a-button
+        type="text"
         :aria-label="copy.addItemAria"
+        :style="{ color: accent.solid }"
         @click="emit('addDeal', stage.id)"
       >
-        <UiIcon name="plus" :size="16" />
-      </button>
-    </header>
+        <template #icon><PlusOutlined /></template>
+      </a-button>
+    </div>
 
-    <div class="cards" role="list" :aria-label="stage.title">
+    <div role="list" :aria-label="stage.title" :style="bodyStyle">
       <div
         v-for="(deal, index) in stage.deals"
         :key="deal.id"
-        class="card-slot"
         @dragover="onCardDragOver(stage.id, $event)"
         @drop="onCardDrop(stage.id, index, $event)"
       >
@@ -234,256 +292,26 @@ onBeforeUnmount(() => {
           @bulk-delete="emit('bulkDelete')"
         />
       </div>
-      <p v-if="!stage.deals.length" class="empty">{{ copy.empty }}</p>
-      <button
+      <a-typography-text
+        v-if="!stage.deals.length"
+        type="secondary"
+        :style="{ textAlign: 'center', display: 'block', margin: 'auto', padding: '16px' }"
+      >
+        {{ copy.empty }}
+      </a-typography-text>
+      <a-button
         v-if="stage.hasMore"
-        type="button"
-        class="load-more"
-        :disabled="stage.loadingMore"
+        type="dashed"
+        block
+        :loading="stage.loadingMore"
         @click="emit('loadMore', stage.id)"
       >
         {{ stage.loadingMore ? 'در حال بارگذاری…' : 'نمایش بیشتر' }}
-      </button>
+      </a-button>
     </div>
 
-    <AddDealButton :accent="stage.color" :label="copy.addItem" @add="emit('addDeal', stage.id)" />
+    <div :style="{ padding: '0 12px 12px', flexShrink: 0 }">
+      <AddDealButton :accent="stage.color" :label="copy.addItem" @add="emit('addDeal', stage.id)" />
+    </div>
   </section>
 </template>
-
-<style scoped>
-.column {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  flex: 1 1 17.5rem;
-  min-width: 17.5rem;
-  min-height: 420px;
-  padding: 0.75rem;
-  border-radius: var(--radius);
-  border: 1px solid var(--line);
-  background: #fff;
-  transition: background 0.15s ease, border-color 0.15s ease;
-}
-
-.column.drop {
-  background: color-mix(in srgb, var(--stage-soft) 70%, transparent);
-  border-color: color-mix(in srgb, var(--stage-border) 80%, transparent);
-}
-
-.column-head {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.1rem 0.1rem 0.15rem;
-}
-
-.grip {
-  display: grid;
-  place-items: center;
-  width: 1.25rem;
-  color: var(--muted);
-  cursor: grab;
-  flex: 0 0 auto;
-  touch-action: none;
-}
-
-.grip:active {
-  cursor: grabbing;
-}
-
-.title-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.45rem;
-  min-width: 0;
-  flex: 1;
-}
-
-.dot {
-  width: 0.55rem;
-  height: 0.55rem;
-  border-radius: 999px;
-  background: var(--stage-solid);
-  flex: 0 0 auto;
-}
-
-.column-head h2,
-.title-input {
-  margin: 0;
-  min-width: 0;
-  width: 100%;
-  font-size: 0.98rem;
-  font-weight: 600;
-  color: var(--ink);
-  font: inherit;
-  font-weight: 600;
-}
-
-.column-head h2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.column-head h2.editable {
-  cursor: text;
-}
-
-.title-input {
-  height: 1.7rem;
-  padding: 0 0.4rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: #fff;
-}
-
-.count {
-  font-size: 0.78rem;
-  color: var(--muted);
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.more-wrap {
-  position: relative;
-  flex: 0 0 auto;
-}
-
-.icon-btn,
-.plus {
-  width: var(--control-h);
-  height: var(--control-h);
-  border-radius: var(--radius);
-  display: grid;
-  place-items: center;
-  background: #fff;
-  cursor: pointer;
-}
-
-.icon-btn {
-  border: 1px solid transparent;
-  color: var(--muted);
-}
-
-.icon-btn:hover,
-.icon-btn:focus-visible {
-  background: var(--stage-soft);
-  color: var(--stage-solid);
-  outline: none;
-}
-
-.plus {
-  border: 1.5px solid var(--stage-solid);
-  color: var(--stage-solid);
-}
-
-.plus:hover,
-.plus:focus-visible {
-  background: var(--stage-soft);
-  outline: none;
-}
-
-.col-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  inset-inline-end: 0;
-  z-index: 8;
-  min-width: 10.5rem;
-  padding: 0.3rem;
-  display: grid;
-  gap: 0.1rem;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-}
-
-.col-menu button {
-  border: 0;
-  background: transparent;
-  padding: 0.45rem 0.7rem;
-  font: inherit;
-  font-size: 0.86rem;
-  color: var(--ink);
-  text-align: right;
-  cursor: pointer;
-  border-radius: var(--radius);
-}
-
-.col-menu button:hover:not(:disabled) {
-  background: #f8fafc;
-}
-
-.col-menu button:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.col-menu .danger {
-  color: var(--danger, #dc2626);
-}
-
-.cards {
-  display: flex;
-  flex-direction: column;
-  gap: 0.7rem;
-  flex: 1;
-  min-width: 0;
-  min-height: 4rem;
-}
-
-.card-slot {
-  min-width: 0;
-}
-
-.empty {
-  margin: 1rem 0;
-  text-align: center;
-  color: var(--muted);
-  font-size: 0.85rem;
-}
-
-.stage-badge {
-  flex: 0 0 auto;
-  padding: 0.05rem 0.4rem;
-  border-radius: 999px;
-  background: var(--stage-soft);
-  color: var(--stage-text);
-  font-size: 0.66rem;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.load-more {
-  min-height: var(--control-h);
-  border: 1px dashed var(--stage-border);
-  border-radius: var(--radius);
-  background: #fff;
-  color: var(--stage-text);
-  font: inherit;
-  font-size: 0.82rem;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.load-more:hover:not(:disabled) {
-  background: var(--stage-soft);
-}
-
-.load-more:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-@container pipeline (max-width: 720px) {
-  .column {
-    flex: 0 0 min(20rem, 86cqi);
-    width: min(20rem, 86cqi);
-    min-width: min(20rem, 86cqi);
-    max-width: none;
-    min-height: 360px;
-    scroll-snap-align: start;
-  }
-}
-</style>
diff --git a/apps/web/src/components/pipeline/PipelineList.vue b/apps/web/src/components/pipeline/PipelineList.vue
index bb19c48..d19beea 100644
--- a/apps/web/src/components/pipeline/PipelineList.vue
+++ b/apps/web/src/components/pipeline/PipelineList.vue
@@ -1,8 +1,31 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
+import {
+  CalendarOutlined,
+  CheckOutlined,
+  DeleteOutlined,
+  MoreOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Avatar as AAvatar,
+  Button as AButton,
+  Card as ACard,
+  Empty as AEmpty,
+  Flex as AFlex,
+  Space as ASpace,
+  Table as ATable,
+  Tag as ATag,
+  Typography,
+  theme,
+} from 'ant-design-vue';
+import type { TableColumnsType } from 'ant-design-vue';
 import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
-import UiIcon from '@/components/UiIcon.vue';
-import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
+import type {
+  PipelineAccent,
+  PipelineDeal,
+  PipelineStage,
+  PipelineUiCopy,
+} from '@/lib/pipeline-board';
 import {
   DEAL_BOARD_COPY,
   formatCurrencyParts,
@@ -26,14 +49,28 @@ const emit = defineEmits<{
   bulkDelete: [];
 }>();
 
+const { Text: ATypographyText } = Typography;
+const { token } = theme.useToken();
+
 const listRoot = ref<HTMLElement | null>(null);
-/** فقط یکی از جدول/کارت در DOM باشد تا منوی انتخاب گم نشود */
 const useCards = ref(false);
 let resizeObs: ResizeObserver | null = null;
 
-const rows = computed(() =>
+type Row = {
+  key: string;
+  deal: PipelineDeal;
+  stageTitle: string;
+  accent: PipelineAccent;
+};
+
+function accentColors(accent: PipelineAccent) {
+  return PIPELINE_ACCENT[accent];
+}
+
+const rows = computed<Row[]>(() =>
   props.stages.flatMap((stage) =>
     stage.deals.map((deal) => ({
+      key: deal.id,
       deal,
       stageTitle: stage.title,
       accent: stage.color,
@@ -48,6 +85,33 @@ function money(deal: PipelineDeal) {
 const hideAmount = computed(() => Boolean(props.copy.hideAmount));
 const tableKey = computed(() => (hideAmount.value ? 'pipeline.leads' : 'pipeline.deals'));
 
+const columns = computed<TableColumnsType<Row>>(() => {
+  const cols: TableColumnsType<Row> = [];
+  if (props.selectMode) {
+    cols.push({ key: 'select', title: '', width: 56 });
+  }
+  cols.push(
+    { key: 'title', title: props.copy.listColTitle },
+    { key: 'stage', title: 'مرحله' },
+  );
+  if (!hideAmount.value) {
+    cols.push({ key: 'amount', title: 'مبلغ' });
+  }
+  cols.push(
+    { key: 'date', title: 'تاریخ' },
+    { key: 'actions', title: 'عملیات', width: 72, align: 'center' },
+  );
+  return cols;
+});
+
+function customRow(record: Row) {
+  return {
+    onClick: () => {
+      if (props.selectMode) emit('toggleSelect', record.deal.id);
+    },
+  };
+}
+
 onMounted(() => {
   const el = listRoot.value;
   if (!el || typeof ResizeObserver === 'undefined') return;
@@ -66,445 +130,211 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="listRoot" class="list" dir="rtl">
-    <p v-if="!rows.length" class="empty">{{ copy.empty }}</p>
+  <div ref="listRoot" dir="rtl" :style="{ minWidth: 0 }">
+    <a-empty v-if="!rows.length" :description="copy.empty" />
 
-    <div v-if="rows.length && !useCards" class="tc-row">
-      <TableColumnsMenu :table-key="tableKey" align="end" />
-    </div>
-    <div v-if="rows.length && !useCards" class="table-wrap">
-      <table v-table-cols="tableKey" class="data-table">
-        <thead>
-          <tr>
-            <th v-if="selectMode" class="tick-col"></th>
-            <th>{{ copy.listColTitle }}</th>
-            <th>مرحله</th>
-            <th v-if="!hideAmount">مبلغ</th>
-            <th>تاریخ</th>
-            <th class="menu-col">عملیات</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="row in rows"
-            :key="row.deal.id"
-            :data-card-id="row.deal.id"
-            :class="{ selected: selectedIds.has(row.deal.id) }"
-            @click="selectMode && emit('toggleSelect', row.deal.id)"
-          >
-            <td v-if="selectMode" class="tick-col" @click.stop>
-              <button
-                type="button"
-                class="tick"
-                :class="{ on: selectedIds.has(row.deal.id) }"
-                :aria-label="selectedIds.has(row.deal.id) ? 'لغو انتخاب' : 'انتخاب معامله'"
-                :aria-pressed="selectedIds.has(row.deal.id)"
-                @click="emit('toggleSelect', row.deal.id)"
-              >
-                <UiIcon v-if="selectedIds.has(row.deal.id)" name="check" :size="14" />
-              </button>
-            </td>
-            <td>
-              <button
-                type="button"
-                class="identity"
-                @click.stop="
-                  selectMode
-                    ? emit('toggleSelect', row.deal.id)
-                    : emit('openDeal', row.deal.id)
-                "
-              >
-                <span
-                  class="badge"
-                  :style="{
-                    background: PIPELINE_ACCENT[row.accent].soft,
-                    color: PIPELINE_ACCENT[row.accent].text,
-                  }"
-                >{{ row.deal.initials }}</span>
-                <span class="titles">
-                  <strong>{{ row.deal.title }}</strong>
-                  <em v-if="row.deal.description">{{ row.deal.description }}</em>
-                </span>
-              </button>
-            </td>
-            <td>
-              <span
-                class="stage"
+    <template v-else-if="!useCards">
+      <a-flex justify="flex-end" :style="{ marginBottom: '8px' }">
+        <TableColumnsMenu :table-key="tableKey" align="end" />
+      </a-flex>
+      <a-table
+        :columns="columns"
+        :data-source="rows"
+        :pagination="false"
+        row-key="key"
+        :custom-row="customRow"
+        :row-class-name="(record: Row) => (selectedIds.has(record.deal.id) ? 'pipeline-row-selected' : '')"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'select'">
+            <a-button
+              type="text"
+              shape="circle"
+              :aria-label="selectedIds.has(record.deal.id) ? 'لغو انتخاب' : 'انتخاب معامله'"
+              @click.stop="emit('toggleSelect', record.deal.id)"
+            >
+              <template #icon>
+                <CheckOutlined v-if="selectedIds.has(record.deal.id)" />
+              </template>
+            </a-button>
+          </template>
+          <template v-else-if="column.key === 'title'">
+            <a-flex
+              :gap="10"
+              align="center"
+              :style="{ minWidth: 0, cursor: 'pointer' }"
+              @click.stop="
+                selectMode
+                  ? emit('toggleSelect', record.deal.id)
+                  : emit('openDeal', record.deal.id)
+              "
+            >
+              <a-avatar
                 :style="{
-                  background: PIPELINE_ACCENT[row.accent].soft,
-                  color: PIPELINE_ACCENT[row.accent].text,
+                  background: accentColors(record.accent).soft,
+                  color: accentColors(record.accent).text,
+                  flexShrink: 0,
                 }"
               >
-                <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
-                {{ row.stageTitle }}
-              </span>
-            </td>
-            <td v-if="!hideAmount">
-              <span class="amount" dir="ltr">
-                <strong>{{ money(row.deal).number }}</strong>
-                <small>{{ money(row.deal).unit }}</small>
-              </span>
-            </td>
-            <td>
-              <span class="date">
-                <UiIcon name="calendar" :size="14" />
-                {{ row.deal.date }}
-              </span>
-            </td>
-            <td class="menu-cell" @click.stop>
-              <button
-                v-if="selectMode && selectedIds.has(row.deal.id)"
-                type="button"
-                class="menu trash"
-                aria-label="حذف انتخاب‌شده‌ها"
-                @click="emit('bulkDelete')"
-              >
-                <UiIcon name="trash" :size="18" />
-              </button>
-              <button
-                v-else
-                type="button"
-                class="menu"
-                :aria-label="copy.itemMenuAria"
-                @click="emit('menuDeal', row.deal.id)"
-              >
-                <UiIcon name="dots-v" :size="18" />
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+                {{ record.deal.initials }}
+              </a-avatar>
+              <div :style="{ minWidth: 0 }">
+                <a-typography-text strong ellipsis :style="{ display: 'block', margin: 0 }">
+                  {{ record.deal.title }}
+                </a-typography-text>
+                <a-typography-text
+                  v-if="record.deal.description"
+                  type="secondary"
+                  ellipsis
+                  :style="{ display: 'block', margin: 0, fontSize: `${token.fontSizeSM}px` }"
+                >
+                  {{ record.deal.description }}
+                </a-typography-text>
+              </div>
+            </a-flex>
+          </template>
+          <template v-else-if="column.key === 'stage'">
+            <a-tag
+              :bordered="false"
+              :style="{
+                background: accentColors(record.accent).soft,
+                color: accentColors(record.accent).text,
+              }"
+            >
+              {{ record.stageTitle }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'amount'">
+            <span dir="ltr">
+              <a-typography-text strong>{{ money(record.deal).number }}</a-typography-text>
+              <a-typography-text type="secondary" :style="{ marginInlineStart: '6px' }">
+                {{ money(record.deal).unit }}
+              </a-typography-text>
+            </span>
+          </template>
+          <template v-else-if="column.key === 'date'">
+            <a-space :size="6">
+              <CalendarOutlined />
+              <span>{{ record.deal.date }}</span>
+            </a-space>
+          </template>
+          <template v-else-if="column.key === 'actions'">
+            <a-button
+              v-if="selectMode && selectedIds.has(record.deal.id)"
+              type="text"
+              danger
+              aria-label="حذف انتخاب‌شده‌ها"
+              @click.stop="emit('bulkDelete')"
+            >
+              <template #icon><DeleteOutlined /></template>
+            </a-button>
+            <a-button
+              v-else
+              type="text"
+              :aria-label="copy.itemMenuAria"
+              @click.stop="emit('menuDeal', record.deal.id)"
+            >
+              <template #icon><MoreOutlined /></template>
+            </a-button>
+          </template>
+        </template>
+      </a-table>
+    </template>
 
-    <div v-if="rows.length && useCards" class="cards">
-      <article
+    <a-flex v-else vertical :gap="12">
+      <a-card
         v-for="row in rows"
         :key="row.deal.id"
-        class="card"
-        :class="{ selected: selectedIds.has(row.deal.id) }"
+        hoverable
         :data-card-id="row.deal.id"
+        :body-style="{ padding: '14px 16px' }"
+        :style="{
+          background: selectedIds.has(row.deal.id)
+            ? token.colorPrimaryBg
+            : token.colorBgContainer,
+          borderColor: selectedIds.has(row.deal.id)
+            ? token.colorPrimary
+            : token.colorBorderSecondary,
+        }"
         @dblclick="!selectMode && emit('openDeal', row.deal.id)"
         @click="selectMode && emit('toggleSelect', row.deal.id)"
       >
-        <div class="card-top">
-          <button
-            v-if="selectMode"
-            type="button"
-            class="tick"
-            :class="{ on: selectedIds.has(row.deal.id) }"
-            :aria-label="selectedIds.has(row.deal.id) ? 'لغو انتخاب' : 'انتخاب معامله'"
-            @click.stop="emit('toggleSelect', row.deal.id)"
-          >
-            <UiIcon v-if="selectedIds.has(row.deal.id)" name="check" :size="14" />
-          </button>
-          <button
-            type="button"
-            class="identity"
-            @click.stop="
-              selectMode
-                ? emit('toggleSelect', row.deal.id)
-                : emit('openDeal', row.deal.id)
-            "
-          >
-            <span
-              class="badge"
+        <a-flex vertical :gap="12">
+          <a-flex align="center" :gap="10" :style="{ minWidth: 0 }">
+            <a-button
+              v-if="selectMode"
+              type="text"
+              shape="circle"
+              @click.stop="emit('toggleSelect', row.deal.id)"
+            >
+              <template #icon>
+                <CheckOutlined v-if="selectedIds.has(row.deal.id)" />
+              </template>
+            </a-button>
+            <a-avatar
               :style="{
-                background: PIPELINE_ACCENT[row.accent].soft,
-                color: PIPELINE_ACCENT[row.accent].text,
+                background: accentColors(row.accent).soft,
+                color: accentColors(row.accent).text,
               }"
-            >{{ row.deal.initials }}</span>
-            <span class="titles">
-              <strong>{{ row.deal.title }}</strong>
-              <em v-if="row.deal.description">{{ row.deal.description }}</em>
+            >
+              {{ row.deal.initials }}
+            </a-avatar>
+            <div
+              :style="{ flex: 1, minWidth: 0, cursor: 'pointer' }"
+              @click.stop="
+                selectMode
+                  ? emit('toggleSelect', row.deal.id)
+                  : emit('openDeal', row.deal.id)
+              "
+            >
+              <a-typography-text strong ellipsis :style="{ display: 'block', margin: 0 }">
+                {{ row.deal.title }}
+              </a-typography-text>
+              <a-typography-text
+                v-if="row.deal.description"
+                type="secondary"
+                ellipsis
+                :style="{ display: 'block', margin: 0 }"
+              >
+                {{ row.deal.description }}
+              </a-typography-text>
+            </div>
+            <a-button
+              v-if="selectMode && selectedIds.has(row.deal.id)"
+              type="text"
+              danger
+              @click.stop="emit('bulkDelete')"
+            >
+              <template #icon><DeleteOutlined /></template>
+            </a-button>
+            <a-button v-else type="text" @click.stop="emit('menuDeal', row.deal.id)">
+              <template #icon><MoreOutlined /></template>
+            </a-button>
+          </a-flex>
+          <a-tag
+            :bordered="false"
+            :style="{
+              alignSelf: 'flex-start',
+              background: accentColors(row.accent).soft,
+              color: accentColors(row.accent).text,
+            }"
+          >
+            {{ row.stageTitle }}
+          </a-tag>
+          <a-flex justify="space-between" align="center">
+            <a-space :size="6">
+              <CalendarOutlined />
+              <a-typography-text type="secondary">{{ row.deal.date }}</a-typography-text>
+            </a-space>
+            <span v-if="!hideAmount" dir="ltr">
+              <a-typography-text strong>{{ money(row.deal).number }}</a-typography-text>
+              <a-typography-text type="secondary" :style="{ marginInlineStart: '6px' }">
+                {{ money(row.deal).unit }}
+              </a-typography-text>
             </span>
-          </button>
-          <button
-            v-if="selectMode && selectedIds.has(row.deal.id)"
-            type="button"
-            class="menu trash"
-            aria-label="حذف انتخاب‌شده‌ها"
-            @click.stop="emit('bulkDelete')"
-          >
-            <UiIcon name="trash" :size="18" />
-          </button>
-          <button
-            v-else
-            type="button"
-            class="menu"
-            :aria-label="copy.itemMenuAria"
-            @click.stop="emit('menuDeal', row.deal.id)"
-          >
-            <UiIcon name="dots-v" :size="18" />
-          </button>
-        </div>
-        <span
-          class="stage"
-          :style="{
-            background: PIPELINE_ACCENT[row.accent].soft,
-            color: PIPELINE_ACCENT[row.accent].text,
-          }"
-        >
-          <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
-          {{ row.stageTitle }}
-        </span>
-        <div class="card-foot">
-          <span class="date">
-            <UiIcon name="calendar" :size="14" />
-            {{ row.deal.date }}
-          </span>
-          <span v-if="!hideAmount" class="amount" dir="ltr">
-            <strong>{{ money(row.deal).number }}</strong>
-            <small>{{ money(row.deal).unit }}</small>
-          </span>
-        </div>
-      </article>
-    </div>
+          </a-flex>
+        </a-flex>
+      </a-card>
+    </a-flex>
   </div>
 </template>
-
-<style scoped>
-.list {
-  min-width: 0;
-}
-
-.empty {
-  margin: 2rem 0;
-  text-align: center;
-  color: var(--muted);
-  font-weight: 700;
-}
-
-.table-wrap {
-  background: #fff;
-  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
-  border-radius: var(--radius);
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
-  overflow: auto;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 640px;
-}
-
-.data-table th,
-.data-table td {
-  padding: 0.85rem 1rem;
-  text-align: start;
-  border-bottom: 1px solid #f1f5f9;
-  vertical-align: middle;
-}
-
-.data-table th {
-  font-size: 0.78rem;
-  color: #94a3b8;
-  font-weight: 700;
-  background: #f8fafc;
-}
-
-.data-table tbody tr:last-child td {
-  border-bottom: 0;
-}
-
-.data-table tbody tr:hover td {
-  background: #f8fafc;
-}
-
-.data-table tbody tr.selected td {
-  background: color-mix(in srgb, var(--accent) 7%, #fff);
-}
-
-.tick-col {
-  width: 2.6rem;
-  padding-inline: 0.55rem !important;
-}
-
-.tick {
-  width: 1.45rem;
-  height: 1.45rem;
-  border-radius: 6px;
-  border: 2px solid #cbd5e1;
-  background: #fff;
-  color: #fff;
-  display: grid;
-  place-items: center;
-  padding: 0;
-  cursor: pointer;
-  flex: 0 0 auto;
-}
-
-.tick.on {
-  border-color: var(--accent);
-  background: var(--accent);
-}
-
-.identity {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  min-width: 0;
-  border: 0;
-  background: transparent;
-  padding: 0;
-  cursor: pointer;
-  text-align: right;
-  font: inherit;
-  color: inherit;
-}
-
-.badge {
-  flex: 0 0 auto;
-  width: 2.2rem;
-  height: 2.2rem;
-  border-radius: 999px;
-  display: grid;
-  place-items: center;
-  font-size: 0.7rem;
-  font-weight: 600;
-}
-
-.titles {
-  display: grid;
-  gap: 0.1rem;
-  min-width: 0;
-}
-
-.titles strong {
-  font-size: 0.92rem;
-  font-weight: 600;
-  color: var(--ink);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.titles em {
-  font-style: normal;
-  color: var(--muted);
-  font-size: 0.78rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.stage {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.28rem 0.65rem;
-  border-radius: 999px;
-  font-size: 0.78rem;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.stage i {
-  width: 0.45rem;
-  height: 0.45rem;
-  border-radius: 999px;
-  display: block;
-}
-
-.amount {
-  display: grid;
-  justify-items: start;
-  gap: 0.05rem;
-}
-
-.amount strong {
-  font-weight: 600;
-  color: var(--ink);
-}
-
-.amount small {
-  color: var(--muted);
-  font-size: 0.72rem;
-  font-weight: 600;
-}
-
-.date {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  color: var(--muted);
-  font-size: 0.82rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.menu-col,
-.menu-cell {
-  width: 3.2rem;
-  min-width: 3.2rem;
-  text-align: center;
-}
-
-.menu {
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border-radius: var(--radius);
-  display: inline-grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.menu:hover,
-.menu:focus-visible {
-  color: var(--ink);
-  background: #f1f5f9;
-}
-
-.menu.trash {
-  color: var(--danger);
-}
-
-.menu.trash:hover,
-.menu.trash:focus-visible {
-  color: var(--danger);
-  background: color-mix(in srgb, var(--danger) 10%, #fff);
-}
-
-.cards {
-  display: grid;
-  gap: 0.7rem;
-}
-
-.card {
-  background: #fff;
-  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
-  border-radius: var(--radius);
-  padding: 0.95rem 1rem;
-  display: grid;
-  gap: 0.7rem;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
-}
-
-.card.selected {
-  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
-  background: color-mix(in srgb, var(--accent) 6%, #fff);
-}
-
-.card-top {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  min-width: 0;
-}
-
-.card-top .identity {
-  flex: 1;
-}
-
-.card-foot {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-</style>
diff --git a/apps/web/src/components/pipeline/PipelineToolbar.vue b/apps/web/src/components/pipeline/PipelineToolbar.vue
index 8bde4be..4737667 100644
--- a/apps/web/src/components/pipeline/PipelineToolbar.vue
+++ b/apps/web/src/components/pipeline/PipelineToolbar.vue
@@ -1,12 +1,23 @@
 <script setup lang="ts">
-import UiFilterBar from '@/components/ui/UiFilterBar.vue';
-import UiIcon from '@/components/UiIcon.vue';
-import UiSegmented from '@/components/ui/UiSegmented.vue';
-import UiSelect from '@/components/ui/UiSelect.vue';
+import { computed } from 'vue';
+import {
+  AppstoreOutlined,
+  FundOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Flex as AFlex,
+  InputNumber as AInputNumber,
+  InputSearch as AInputSearch,
+  Segmented as ASegmented,
+  Select as ASelect,
+  Space as ASpace,
+  Typography,
+  theme,
+} from 'ant-design-vue';
 
 export type PipelineViewMode = 'kanban' | 'list';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     pipelineName: string;
     pipelineOptions: Array<{ id: string; name: string }>;
@@ -27,6 +38,9 @@ const emit = defineEmits<{
   create: [];
 }>();
 
+const { Title: ATypographyTitle } = Typography;
+const { token } = theme.useToken();
+
 const viewMode = defineModel<PipelineViewMode>('viewMode', { required: true });
 const search = defineModel<string>('search', { default: '' });
 const selectedPipelineId = defineModel<string>('selectedPipelineId', { required: true });
@@ -34,165 +48,112 @@ const amountMin = defineModel<string>('amountMin', { default: '' });
 const amountMax = defineModel<string>('amountMax', { default: '' });
 
 const viewOptions = [
-  { value: 'kanban' as const, label: 'نمای ستونی', icon: 'grid' as const },
-  { value: 'list' as const, label: 'نمای لیست', icon: 'list' as const },
+  { value: 'kanban' as const, label: 'ستونی' },
+  { value: 'list' as const, label: 'لیست' },
 ];
 
-function onPick(value: string) {
-  if (value === '__create__') {
+const pipelineSelectOptions = computed(() => {
+  const list = props.pipelineOptions.map((o) => ({ value: o.id, label: o.name }));
+  if (props.canCreate) {
+    list.push({ value: '__create__', label: props.createOptionLabel });
+  }
+  return list;
+});
+
+function onPick(value: unknown) {
+  const v = String(value ?? '');
+  if (v === '__create__') {
     emit('create');
     return;
   }
-  selectedPipelineId.value = value;
+  selectedPipelineId.value = v;
 }
+
+const amountMinNum = computed({
+  get: () => (amountMin.value === '' ? undefined : Number(amountMin.value)),
+  set: (v: number | string | null | undefined) => {
+    if (v == null || v === '' || Number.isNaN(Number(v))) amountMin.value = '';
+    else amountMin.value = String(v);
+  },
+});
+
+const amountMaxNum = computed({
+  get: () => (amountMax.value === '' ? undefined : Number(amountMax.value)),
+  set: (v: number | string | null | undefined) => {
+    if (v == null || v === '' || Number.isNaN(Number(v))) amountMax.value = '';
+    else amountMax.value = String(v);
+  },
+});
 </script>
 
 <template>
-  <header class="toolbar" dir="rtl">
-    <div class="title-block">
-      <span class="brand-ico" aria-hidden="true">
-        <UiIcon :name="icon" :size="18" />
-      </span>
-      <h1>{{ pipelineName }}</h1>
-    </div>
+  <a-flex vertical :gap="12" dir="rtl">
+    <a-flex justify="space-between" align="center" wrap="wrap" :gap="12">
+      <a-space :size="10" align="center">
+        <span
+          :style="{
+            width: `${token.controlHeight}px`,
+            height: `${token.controlHeight}px`,
+            borderRadius: `${token.borderRadius}px`,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: token.colorPrimary,
+            color: token.colorTextLightSolid,
+            flexShrink: 0,
+          }"
+          aria-hidden="true"
+        >
+          <AppstoreOutlined v-if="icon === 'grid'" />
+          <FundOutlined v-else />
+        </span>
+        <a-typography-title :level="4" :style="{ margin: 0 }">
+          {{ pipelineName }}
+        </a-typography-title>
+      </a-space>
 
-    <UiSegmented v-model="viewMode" :options="viewOptions">
-      <template #icon="{ option }">
-        <UiIcon :name="option.icon ?? 'grid'" :size="16" />
-      </template>
-    </UiSegmented>
+      <a-space wrap :size="8">
+        <a-segmented v-model:value="viewMode" :options="viewOptions" />
+        <a-select
+          :value="selectedPipelineId"
+          :options="pipelineSelectOptions"
+          :style="{ width: '180px' }"
+          @update:value="onPick"
+        />
+        <slot name="excel" />
+      </a-space>
+    </a-flex>
 
-      <UiSelect
-      class="pipeline-pick"
-      :model-value="selectedPipelineId"
-      @update:model-value="onPick"
-    >
-      <option
-        v-for="opt in pipelineOptions"
-        :key="opt.id"
-        :value="opt.id"
-      >
-        {{ opt.name }}
-      </option>
-      <option v-if="canCreate" value="__create__">{{ createOptionLabel }}</option>
-    </UiSelect>
-
-    <div class="excel-actions">
-      <slot name="excel" />
-    </div>
-
-    <UiFilterBar
-      v-model:search="search"
-      class="filters"
-      :show-filters="showAmountFilters"
+    <!-- یک نوار فیلتر تک‌ردیفه؛ بدون a-row و بدون فاصلهٔ ول -->
+    <a-flex
+      wrap="wrap"
+      align="center"
+      :gap="8"
+      :style="{ width: '100%', minWidth: 0 }"
     >
+      <a-input-search
+        v-model:value="search"
+        allow-clear
+        placeholder="جستجو در معاملات…"
+        :style="{ flex: '1 1 220px', minWidth: '180px', maxWidth: '100%' }"
+      />
       <template v-if="showAmountFilters">
-        <label class="field">
-          <span>حداقل مبلغ</span>
-          <input v-model="amountMin" type="number" min="0" placeholder="۰" />
-        </label>
-        <label class="field">
-          <span>حداکثر مبلغ</span>
-          <input v-model="amountMax" type="number" min="0" placeholder="—" />
-        </label>
+        <a-input-number
+          v-model:value="amountMinNum"
+          :min="0"
+          placeholder="حداقل مبلغ"
+          :style="{ width: '140px', flex: '0 0 auto' }"
+        />
+        <a-input-number
+          v-model:value="amountMaxNum"
+          :min="0"
+          placeholder="حداکثر مبلغ"
+          :style="{ width: '140px', flex: '0 0 auto' }"
+        />
       </template>
-    </UiFilterBar>
-  </header>
+      <div :style="{ flex: '1 1 240px', minWidth: '200px', maxWidth: '100%' }">
+        <slot name="filters" />
+      </div>
+    </a-flex>
+  </a-flex>
 </template>
-
-<style scoped>
-.toolbar {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 0.55rem;
-  margin-bottom: 0.85rem;
-  min-width: 0;
-  width: 100%;
-}
-
-.title-block {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  flex: 0 0 auto;
-  min-width: 0;
-}
-
-.brand-ico {
-  width: var(--control-h);
-  height: var(--control-h);
-  border-radius: var(--radius);
-  display: grid;
-  place-items: center;
-  background: var(--accent-deep);
-  color: #fff;
-  flex: 0 0 auto;
-}
-
-h1 {
-  margin: 0;
-  font-size: 1.15rem;
-  font-weight: 600;
-  color: var(--ink);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pipeline-pick {
-  flex: 0 1 13rem;
-  min-width: 8.5rem;
-}
-
-.excel-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-  flex: 0 0 auto;
-}
-
-.excel-actions :deep(.btn-ghost-sm) {
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  color: #0f766e;
-  border-radius: 10px;
-  padding: 0.45rem 0.75rem;
-  font-weight: 700;
-  font-size: 0.85rem;
-  cursor: pointer;
-  font: inherit;
-}
-
-.filters {
-  flex: 1 1 12rem;
-  min-width: 0;
-}
-
-.field {
-  display: grid;
-  gap: 0.3rem;
-}
-
-.field span {
-  font-size: 0.8rem;
-  color: var(--muted);
-  font-weight: 700;
-}
-
-@container pipeline (max-width: 720px) {
-  .toolbar {
-    flex-wrap: wrap;
-  }
-
-  .title-block {
-    width: 100%;
-  }
-
-  .pipeline-pick,
-  .excel-actions,
-  .filters {
-    flex: 1 1 100%;
-  }
-}
-</style>
diff --git a/apps/web/src/components/routines/EntityLinkPicker.vue b/apps/web/src/components/routines/EntityLinkPicker.vue
index 71a0a50..3e8f9e9 100644
--- a/apps/web/src/components/routines/EntityLinkPicker.vue
+++ b/apps/web/src/components/routines/EntityLinkPicker.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import type { CompanyDto, LeadDto, PaginatedResponse, PersonDto } from '@mento/shared';
-import UiIcon from '@/components/UiIcon.vue';
-import { UiInput, UiSelect } from '@/components/ui';
+import {
+  Button as AButton,
+  Flex as AFlex,
+  Input as AInput,
+  Select as ASelect,
+  Space as ASpace,
+  Tag as ATag,
+  Typography,
+} from 'ant-design-vue';
+import { CloseOutlined } from '@ant-design/icons-vue';
 import { api } from '@/lib/api';
 import { ENTITY_TYPE_LABELS } from '@/lib/routines';
 import { useAuthStore } from '@/stores/auth';
 
+const { Text: ATypographyText } = Typography;
+
 export type PickedEntity = { type: 'lead' | 'person' | 'company'; id: string; label: string };
 
 const props = withDefaults(
@@ -33,6 +43,10 @@ const typeOptions = computed(() => {
   return list;
 });
 
+const selectOptions = computed(() =>
+  typeOptions.value.map((t) => ({ value: t, label: ENTITY_TYPE_LABELS[t] })),
+);
+
 const type = ref<PickedEntity['type']>(typeOptions.value[0] ?? 'person');
 const q = ref('');
 const results = ref<PickedEntity[]>([]);
@@ -99,126 +113,55 @@ function pick(item: PickedEntity) {
 </script>
 
 <template>
-  <div class="ent-picker">
-    <div v-if="model" class="picked">
-      <span class="picked-type">{{ ENTITY_TYPE_LABELS[model.type] }}</span>
-      <strong>{{ model.label }}</strong>
-      <button type="button" aria-label="حذف اتصال" @click="model = null">
-        <UiIcon name="x" :size="14" />
-      </button>
-    </div>
+  <a-flex vertical :gap="8" style="width: 100%">
+    <a-flex v-if="model" justify="space-between" align="center" :gap="8">
+      <a-space :size="8">
+        <a-tag :bordered="false">{{ ENTITY_TYPE_LABELS[model.type] }}</a-tag>
+        <a-typography-text strong>{{ model.label }}</a-typography-text>
+      </a-space>
+      <a-button type="text" aria-label="حذف اتصال" @click="model = null">
+        <template #icon><CloseOutlined /></template>
+      </a-button>
+    </a-flex>
+
     <template v-else-if="typeOptions.length">
-      <div class="search-row">
-        <UiSelect v-if="typeOptions.length > 1" v-model="type" class="type-sel">
-          <option v-for="t in typeOptions" :key="t" :value="t">{{ ENTITY_TYPE_LABELS[t] }}</option>
-        </UiSelect>
-        <UiInput v-model="q" :placeholder="`جستجوی ${ENTITY_TYPE_LABELS[type]}…`" />
-      </div>
-      <ul v-if="results.length || loading || q.trim().length >= 2" class="results">
-        <li v-if="loading" class="muted">در حال جستجو…</li>
-        <li v-else-if="!results.length" class="muted">موردی یافت نشد</li>
-        <li v-for="r in results" :key="r.id">
-          <button type="button" @click="pick(r)">{{ r.label }}</button>
-        </li>
-      </ul>
+      <a-flex :gap="8" wrap="wrap">
+        <a-select
+          v-if="typeOptions.length > 1"
+          v-model:value="type"
+          :options="selectOptions"
+          style="width: 120px"
+        />
+        <a-input
+          v-model:value="q"
+          :placeholder="`جستجوی ${ENTITY_TYPE_LABELS[type]}…`"
+          style="flex: 1; min-width: 160px"
+        />
+      </a-flex>
+      <a-flex
+        v-if="results.length || loading || q.trim().length >= 2"
+        vertical
+        :gap="4"
+      >
+        <a-typography-text v-if="loading" type="secondary">در حال جستجو…</a-typography-text>
+        <a-typography-text v-else-if="!results.length" type="secondary">
+          موردی یافت نشد
+        </a-typography-text>
+        <a-button
+          v-for="r in results"
+          :key="r.id"
+          type="text"
+          block
+          style="text-align: start"
+          @click="pick(r)"
+        >
+          {{ r.label }}
+        </a-button>
+      </a-flex>
     </template>
-    <p v-else class="muted">ماژول لید/مشتری برای سازمان فعال نیست.</p>
-  </div>
+
+    <a-typography-text v-else type="secondary">
+      ماژول لید/مشتری برای سازمان فعال نیست.
+    </a-typography-text>
+  </a-flex>
 </template>
-
-<style scoped>
-.ent-picker {
-  display: grid;
-  gap: var(--sp-2);
-}
-
-.search-row {
-  display: flex;
-  gap: var(--sp-2);
-}
-
-.type-sel {
-  width: 110px;
-  flex-shrink: 0;
-}
-
-.search-row > :last-child {
-  flex: 1 1 auto;
-}
-
-.results {
-  list-style: none;
-  margin: 0;
-  padding: 4px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  max-height: 220px;
-  overflow-y: auto;
-  background: var(--surface);
-}
-
-.results li button {
-  width: 100%;
-  text-align: right;
-  border: 0;
-  background: transparent;
-  padding: 8px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  color: var(--ink);
-}
-
-.results li button:hover {
-  background: var(--accent-subtle);
-  color: var(--accent-deep);
-}
-
-.muted {
-  margin: 0;
-  padding: 8px 10px;
-  color: var(--muted);
-  font-size: var(--fs-sm);
-}
-
-.picked {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  padding: 6px 10px;
-  border-radius: var(--radius);
-  background: var(--accent-subtle);
-  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
-  color: var(--accent-deep);
-  min-width: 0;
-}
-
-.picked strong {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.picked-type {
-  font-size: var(--fs-xs);
-  color: var(--muted);
-}
-
-.picked button {
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  display: grid;
-  place-items: center;
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-}
-
-.picked button:hover {
-  background: var(--surface);
-  color: var(--danger);
-}
-</style>
diff --git a/apps/web/src/components/routines/QuickTaskModal.vue b/apps/web/src/components/routines/QuickTaskModal.vue
index 387aa06..9db37cd 100644
--- a/apps/web/src/components/routines/QuickTaskModal.vue
+++ b/apps/web/src/components/routines/QuickTaskModal.vue
@@ -8,9 +8,22 @@ import type {
   RoutineTaskDto,
   RoutineTaskSource,
 } from '@mento/shared';
+import {
+  Alert as AAlert,
+  Checkbox as ACheckbox,
+  Col as ACol,
+  FormItem as AFormItem,
+  Input as AInput,
+  Modal as AModal,
+  Row as ARow,
+  Select as ASelect,
+  Space as ASpace,
+  Tag as ATag,
+  Textarea as ATextarea,
+  Typography,
+} from 'ant-design-vue';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import EntityLinkPicker, { type PickedEntity } from '@/components/routines/EntityLinkPicker.vue';
-import { UiButton, UiField, UiInput, UiModal, UiSelect, UiTextarea } from '@/components/ui';
 import { api } from '@/lib/api';
 import {
   ENTITY_TYPE_LABELS,
@@ -22,6 +35,8 @@ import {
 } from '@/lib/routines';
 import { useAuthStore } from '@/stores/auth';
 
+const { Text: ATypographyText } = Typography;
+
 const props = withDefaults(
   defineProps<{
     open: boolean;
@@ -54,7 +69,23 @@ const form = reactive({
 const saving = ref(false);
 const error = ref('');
 
-const priorities = Object.entries(PRIORITY_LABELS) as Array<[ActivityPriority, string]>;
+const priorityOptions = computed(() =>
+  (Object.entries(PRIORITY_LABELS) as Array<[ActivityPriority, string]>).map(
+    ([value, label]) => ({ value, label }),
+  ),
+);
+
+const categoryOptions = computed(() => [
+  { value: '', label: 'بدون دسته' },
+  ...(ctx.value?.categories ?? []).map((c) => ({ value: c.id, label: c.name })),
+]);
+
+const assigneeOptions = computed(() =>
+  assignees.value.map((u) => ({
+    value: u.id,
+    label: `${u.fullName}${u.id === auth.user?.id ? ' (خودم)' : ''}`,
+  })),
+);
 
 async function ensureContext() {
   if (ctx.value) return;
@@ -105,7 +136,7 @@ async function submit() {
   error.value = '';
   if (form.title.trim().length < 2) {
     error.value = 'عنوان کار را وارد کنید.';
-    return;
+    return Promise.reject();
   }
   const link = props.preset ?? form.entity;
   const body: CreateRoutineTaskRequest = {
@@ -128,6 +159,7 @@ async function submit() {
     emit('close');
   } catch (e) {
     error.value = apiError(e, 'ثبت کار ممکن نشد.');
+    return Promise.reject();
   } finally {
     saving.value = false;
   }
@@ -135,119 +167,90 @@ async function submit() {
 </script>
 
 <template>
-  <UiModal :open="open" title="کار جدید" @close="emit('close')">
-    <form class="qt-form" @submit.prevent="submit">
-      <UiField label="عنوان" required>
-        <UiInput v-model="form.title" placeholder="مثلاً: تماس با مشتری برای پیگیری پیش‌فاکتور" :maxlength="200" />
-      </UiField>
-
-      <UiField label="توضیحات">
-        <UiTextarea v-model="form.description" :rows="2" :maxlength="2000" />
-      </UiField>
-
-      <div class="grid-2">
-        <UiField label="تاریخ" required>
+  <a-modal
+    :open="open"
+    title="کار جدید"
+    :confirm-loading="saving"
+    ok-text="ثبت کار"
+    cancel-text="انصراف"
+    destroy-on-close
+    @ok="submit"
+    @cancel="emit('close')"
+  >
+    <a-row :gutter="[16, 0]">
+      <a-col :span="24">
+        <a-form-item label="عنوان" required>
+          <a-input
+            v-model:value="form.title"
+            placeholder="مثلاً: تماس با مشتری برای پیگیری پیش‌فاکتور"
+            :maxlength="200"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-item label="توضیحات">
+          <a-textarea v-model:value="form.description" :rows="2" :maxlength="2000" />
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :md="12">
+        <a-form-item label="تاریخ" required>
           <JalaliDateInput v-model="form.date" mode="date" :clearable="false" />
-        </UiField>
-        <UiField label="ساعت" hint="خالی = تا پایان روز">
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :md="12">
+        <a-form-item label="ساعت" extra="خالی = تا پایان روز">
           <JalaliDateInput v-model="form.time" mode="time" />
-        </UiField>
-        <UiField label="اولویت">
-          <UiSelect v-model="form.priority">
-            <option v-for="[k, label] in priorities" :key="k" :value="k">{{ label }}</option>
-          </UiSelect>
-        </UiField>
-        <UiField label="دسته‌بندی">
-          <UiSelect v-model="form.categoryId">
-            <option value="">بدون دسته</option>
-            <option v-for="c in ctx?.categories ?? []" :key="c.id" :value="c.id">{{ c.name }}</option>
-          </UiSelect>
-        </UiField>
-        <UiField v-if="assignees.length > 1" label="مسئول" class="span-2">
-          <UiSelect v-model="form.assigneeId">
-            <option v-for="u in assignees" :key="u.id" :value="u.id">
-              {{ u.fullName }}{{ u.id === auth.user?.id ? ' (خودم)' : '' }}
-            </option>
-          </UiSelect>
-        </UiField>
-      </div>
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :md="12">
+        <a-form-item label="اولویت">
+          <a-select
+            v-model:value="form.priority"
+            :options="priorityOptions"
+            style="width: 100%"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :md="12">
+        <a-form-item label="دسته‌بندی">
+          <a-select
+            v-model:value="form.categoryId"
+            :options="categoryOptions"
+            style="width: 100%"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col v-if="assignees.length > 1" :span="24">
+        <a-form-item label="مسئول">
+          <a-select
+            v-model:value="form.assigneeId"
+            :options="assigneeOptions"
+            style="width: 100%"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24">
+        <a-form-item label="اتصال به پرونده">
+          <a-space v-if="preset" :size="8">
+            <a-tag :bordered="false">{{ ENTITY_TYPE_LABELS[preset.type] }}</a-tag>
+            <a-typography-text strong>{{ preset.label }}</a-typography-text>
+          </a-space>
+          <EntityLinkPicker v-else v-model="form.entity" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="24">
+        <a-checkbox v-model:checked="form.isMandatory">
+          کار اجباری (در امتیاز روزانه و Streak حساب می‌شود)
+        </a-checkbox>
+      </a-col>
+    </a-row>
 
-      <UiField label="اتصال به پرونده">
-        <div v-if="preset" class="preset">
-          <span>{{ ENTITY_TYPE_LABELS[preset.type] }}</span>
-          <strong>{{ preset.label }}</strong>
-        </div>
-        <EntityLinkPicker v-else v-model="form.entity" />
-      </UiField>
-
-      <label class="check">
-        <input v-model="form.isMandatory" type="checkbox" />
-        <span>کار اجباری (در امتیاز روزانه و Streak حساب می‌شود)</span>
-      </label>
-
-      <p v-if="error" class="error">{{ error }}</p>
-    </form>
-
-    <template #footer>
-      <UiButton :loading="saving" @click="submit">ثبت کار</UiButton>
-      <UiButton variant="ghost" @click="emit('close')">انصراف</UiButton>
-    </template>
-  </UiModal>
+    <a-alert
+      v-if="error"
+      type="error"
+      show-icon
+      :message="error"
+      :style="{ marginTop: '12px' }"
+    />
+  </a-modal>
 </template>
-
-<style scoped>
-.qt-form {
-  display: grid;
-  gap: var(--sp-4);
-}
-
-.grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--sp-3);
-}
-
-.span-2 {
-  grid-column: 1 / -1;
-}
-
-.preset {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  padding: 8px 12px;
-  border-radius: var(--radius);
-  background: var(--accent-subtle);
-  color: var(--accent-deep);
-}
-
-.preset span {
-  font-size: var(--fs-xs);
-  color: var(--muted);
-}
-
-.check {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  font-size: var(--fs-sm);
-  color: var(--ink-secondary);
-  cursor: pointer;
-}
-
-.check input {
-  width: 18px;
-  height: 18px;
-  accent-color: var(--accent);
-}
-
-.error {
-  margin: 0;
-}
-
-@media (max-width: 600px) {
-  .grid-2 {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/apps/web/src/components/routines/RelatedTasksPanel.vue b/apps/web/src/components/routines/RelatedTasksPanel.vue
index ca82945..64153f3 100644
--- a/apps/web/src/components/routines/RelatedTasksPanel.vue
+++ b/apps/web/src/components/routines/RelatedTasksPanel.vue
@@ -1,18 +1,30 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
+import {
+  Alert as AAlert,
+  Button as AButton,
+  Card as ACard,
+  Empty as AEmpty,
+  Flex as AFlex,
+  Space as ASpace,
+  Spin as ASpin,
+  Tag as ATag,
+  Typography,
+} from 'ant-design-vue';
+import { CheckOutlined, PlusOutlined } from '@ant-design/icons-vue';
 import type { RoutineEntityRefDto, RoutineTaskDto } from '@mento/shared';
-import UiIcon from '@/components/UiIcon.vue';
 import QuickTaskModal from '@/components/routines/QuickTaskModal.vue';
 import RoutineTaskRow, { type RoutineTaskRowAction } from '@/components/routines/RoutineTaskRow.vue';
 import RoutineTaskModals from '@/components/routines/RoutineTaskModals.vue';
-import { UiButton } from '@/components/ui';
 import { api } from '@/lib/api';
 import { toFaDigits } from '@/lib/jalali';
 import { apiError, isOpenStatus } from '@/lib/routines';
 import { useRoutineTaskActions } from '@/lib/useRoutineTaskActions';
 import { useAuthStore } from '@/stores/auth';
 
+const { Text: ATypographyText, Title: ATypographyTitle } = Typography;
+
 const props = withDefaults(
   defineProps<{
     entity: RoutineEntityRefDto;
@@ -85,223 +97,90 @@ function onCreated(t: RoutineTaskDto) {
 </script>
 
 <template>
-  <section v-if="enabled" class="related">
-    <header>
-      <h3>
-        <span class="mark"><UiIcon name="check" :size="15" /></span>
-        {{ title }}
-        <em v-if="open.length">{{ toFaDigits(open.length) }} باز</em>
-      </h3>
-      <UiButton size="sm" variant="outline" @click="quickOpen = true">
-        <template #icon><UiIcon name="plus" :size="14" /></template>
+  <a-card v-if="enabled" :bordered="false" :style="{ marginTop: '16px' }">
+    <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
+      <a-space :size="8">
+        <CheckOutlined />
+        <a-typography-title :level="5" :style="{ margin: 0 }">{{ title }}</a-typography-title>
+        <a-tag v-if="open.length" :bordered="false">{{ toFaDigits(open.length) }} باز</a-tag>
+      </a-space>
+      <a-button @click="quickOpen = true">
+        <template #icon><PlusOutlined /></template>
         ایجاد Task
-      </UiButton>
-    </header>
+      </a-button>
+    </a-flex>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="actions.error.value" class="error">{{ actions.error.value }}</p>
-    <div v-if="loading && !items.length" class="muted">در حال بارگذاری…</div>
-    <div v-else-if="!items.length" class="empty">
-      <div class="empty-art" aria-hidden="true">
-        <svg viewBox="0 0 72 72" width="72" height="72">
-          <rect x="18" y="16" width="36" height="44" rx="8" fill="#f4fbf8" stroke="#b7e4d4" stroke-width="1.6" />
-          <rect x="26" y="10" width="20" height="12" rx="4" fill="#e7f6f1" stroke="#7dcebb" stroke-width="1.6" />
-          <path d="M30 40l5 5 9-11" fill="none" stroke="#12856a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-      </div>
-      <p class="muted">{{ emptyTitle }}</p>
-      <p v-if="emptyHint" class="hint">{{ emptyHint }}</p>
-      <button class="empty-cta" type="button" @click="quickOpen = true">
-        ایجاد Task
-        <UiIcon name="plus" :size="14" />
-      </button>
-    </div>
+    <a-alert
+      v-if="error"
+      type="error"
+      show-icon
+      :message="error"
+      :style="{ marginTop: '12px' }"
+    />
+    <a-alert
+      v-if="actions.error.value"
+      type="error"
+      show-icon
+      :message="actions.error.value"
+      :style="{ marginTop: '12px' }"
+    />
 
-    <div v-else class="rows">
-      <RoutineTaskRow
-        v-for="t in open"
-        :key="t.id"
-        :task="t"
-        :busy="actions.busyId.value === t.id"
-        show-date
-        show-assignee
-        show-delay
-        @toggle="actions.toggle"
-        @open="openTask"
-        @action="onAction"
-      />
-      <button v-if="closed.length" type="button" class="toggle-closed" @click="showClosed = !showClosed">
-        {{ showClosed ? 'پنهان کردن' : 'نمایش' }} {{ toFaDigits(closed.length) }} کار انجام‌شده / بسته
-      </button>
-      <template v-if="showClosed">
+    <a-spin :spinning="loading && !items.length">
+      <a-empty
+        v-if="!loading && !items.length"
+        :description="emptyTitle"
+        :style="{ margin: '16px 0' }"
+      >
+        <template v-if="emptyHint" #description>
+          <div>
+            <div>{{ emptyTitle }}</div>
+            <a-typography-text type="secondary">{{ emptyHint }}</a-typography-text>
+          </div>
+        </template>
+        <a-button type="primary" @click="quickOpen = true">
+          <template #icon><PlusOutlined /></template>
+          ایجاد Task
+        </a-button>
+      </a-empty>
+
+      <a-flex v-else vertical :gap="8" :style="{ marginTop: '12px' }">
         <RoutineTaskRow
-          v-for="t in closed"
+          v-for="t in open"
           :key="t.id"
           :task="t"
           :busy="actions.busyId.value === t.id"
           show-date
           show-assignee
+          show-delay
           @toggle="actions.toggle"
           @open="openTask"
           @action="onAction"
         />
-      </template>
-    </div>
+        <a-button
+          v-if="closed.length"
+          type="link"
+          @click="showClosed = !showClosed"
+        >
+          {{ showClosed ? 'پنهان کردن' : 'نمایش' }}
+          {{ toFaDigits(closed.length) }} کار انجام‌شده / بسته
+        </a-button>
+        <template v-if="showClosed">
+          <RoutineTaskRow
+            v-for="t in closed"
+            :key="t.id"
+            :task="t"
+            :busy="actions.busyId.value === t.id"
+            show-date
+            show-assignee
+            @toggle="actions.toggle"
+            @open="openTask"
+            @action="onAction"
+          />
+        </template>
+      </a-flex>
+    </a-spin>
 
     <QuickTaskModal :open="quickOpen" :preset="entity" @close="quickOpen = false" @created="onCreated" />
     <RoutineTaskModals :actions="actions" />
-  </section>
+  </a-card>
 </template>
-
-<style scoped>
-.related {
-  display: grid;
-  gap: var(--sp-3);
-  padding: var(--sp-4);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-
-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sp-2);
-}
-
-h3 {
-  margin: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--fs-md);
-  font-weight: var(--fw-semibold);
-  color: var(--ink);
-}
-
-h3 em {
-  font-style: normal;
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-medium);
-  padding: 1px 8px;
-  border-radius: 99px;
-  background: var(--accent-subtle);
-  color: var(--accent-deep);
-}
-
-.rows {
-  display: grid;
-  gap: var(--sp-2);
-}
-
-.muted {
-  margin: 0;
-  color: var(--muted);
-  font-size: var(--fs-sm);
-}
-
-.toggle-closed {
-  justify-self: start;
-  border: 0;
-  background: transparent;
-  color: var(--accent-deep);
-  font: inherit;
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-semibold);
-  cursor: pointer;
-  padding: 4px 0;
-}
-
-.error {
-  margin: 0;
-}
-
-.empty {
-  display: grid;
-  gap: 0.35rem;
-}
-
-.empty-art,
-.hint,
-.empty-cta {
-  display: none;
-}
-
-@media (max-width: 900px) {
-  .fancy {
-    gap: 0.85rem;
-    padding: 0.95rem 0.85rem 1rem;
-    border: 1px solid #e7eef2;
-    border-radius: 18px;
-    background: #fff;
-    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
-  }
-
-  .fancy .mark {
-    width: 28px;
-    height: 28px;
-    border-radius: 999px;
-    display: grid;
-    place-items: center;
-    background: #e7f6f1;
-    color: #0f766e;
-  }
-
-  .fancy header :deep(.ui-btn),
-  .fancy header :deep(button) {
-    border: 0;
-    border-radius: 999px;
-    background: #e7f6f1;
-    color: #0f766e;
-    box-shadow: none;
-    height: auto;
-    min-height: 34px;
-    padding: 0.3rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    flex-direction: row-reverse;
-    gap: 0.2rem;
-  }
-
-  .fancy .empty {
-    justify-items: center;
-    text-align: center;
-    gap: 0.35rem;
-    padding: 0.4rem 0.5rem 0.2rem;
-  }
-
-  .fancy .empty-art {
-    display: grid;
-    place-items: center;
-    width: 92px;
-    height: 92px;
-    margin-bottom: 0.2rem;
-    border-radius: 24px;
-    background: linear-gradient(180deg, #f7fcfa, #eef8f4);
-  }
-
-  .fancy .hint {
-    display: block;
-    margin: 0;
-    color: #94a3b8;
-    font-size: 0.78rem;
-  }
-
-  .fancy .empty-cta {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    margin-top: 0.35rem;
-    border: 0;
-    border-radius: 999px;
-    background: #e7f6f1;
-    color: #0f766e;
-    padding: 0.45rem 0.9rem;
-    font: inherit;
-    font-size: 0.78rem;
-    font-weight: 800;
-    cursor: pointer;
-  }
-}
-</style>
diff --git a/apps/web/src/components/routines/RoutineTaskModals.vue b/apps/web/src/components/routines/RoutineTaskModals.vue
index 146cc04..6dda801 100644
--- a/apps/web/src/components/routines/RoutineTaskModals.vue
+++ b/apps/web/src/components/routines/RoutineTaskModals.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import {
+  Alert as AAlert,
+  Col as ACol,
+  FormItem as AFormItem,
+  Modal as AModal,
+  Row as ARow,
+  Textarea as ATextarea,
+  Typography,
+} from 'ant-design-vue';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
-import { UiButton, UiField, UiModal, UiTextarea } from '@/components/ui';
 import type { RoutineTaskActions } from '@/lib/useRoutineTaskActions';
 
+const { Text: ATypographyText } = Typography;
+
 const props = defineProps<{ actions: RoutineTaskActions }>();
 
 const modal = computed(() => props.actions.modal);
@@ -57,81 +67,63 @@ const submitLabel = computed(() => {
       return 'ذخیره';
   }
 });
+
+const okDanger = computed(() => modal.value.kind === 'cancel');
 </script>
 
 <template>
-  <UiModal :open="!!modal.kind" :title="title" nest @close="actions.close()">
-    <form class="rt-modal" @submit.prevent="actions.submit()">
-      <p v-if="modal.task" class="task-name">{{ modal.task.title }}</p>
+  <a-modal
+    :open="!!modal.kind"
+    :title="title"
+    :confirm-loading="modal.saving"
+    :ok-text="submitLabel"
+    :ok-button-props="{ danger: okDanger }"
+    cancel-text="انصراف"
+    destroy-on-close
+    @ok="actions.submit()"
+    @cancel="actions.close()"
+  >
+    <a-typography-text v-if="modal.task" strong>
+      {{ modal.task.title }}
+    </a-typography-text>
 
-      <template v-if="modal.kind === 'reschedule'">
-        <div class="when">
-          <UiField label="تاریخ" required>
-            <JalaliDateInput v-model="modal.date" mode="date" required :clearable="false" />
-          </UiField>
-          <UiField label="ساعت" hint="خالی = تا پایان روز">
-            <JalaliDateInput v-model="modal.time" mode="time" />
-          </UiField>
-        </div>
-      </template>
+    <a-row v-if="modal.kind === 'reschedule'" :gutter="[16, 0]" :style="{ marginTop: '12px' }">
+      <a-col :xs="24" :md="12">
+        <a-form-item label="تاریخ" required>
+          <JalaliDateInput v-model="modal.date" mode="date" required :clearable="false" />
+        </a-form-item>
+      </a-col>
+      <a-col :xs="24" :md="12">
+        <a-form-item label="ساعت" extra="خالی = تا پایان روز">
+          <JalaliDateInput v-model="modal.time" mode="time" />
+        </a-form-item>
+      </a-col>
+    </a-row>
 
-      <UiField v-else :label="noteLabel" :required="noteRequired">
-        <UiTextarea v-model="modal.note" :rows="4" :placeholder="placeholder" :maxlength="2000" />
-      </UiField>
+    <a-form-item
+      v-else
+      :label="noteLabel"
+      :required="noteRequired"
+      :style="{ marginTop: '12px' }"
+    >
+      <a-textarea
+        v-model:value="modal.note"
+        :rows="4"
+        :placeholder="placeholder"
+        :maxlength="2000"
+      />
+    </a-form-item>
 
-      <p v-if="modal.kind === 'cancel'" class="hint">
-        کار لغو شده در محاسبه درصد انجام حساب نمی‌شود.
-      </p>
-      <p v-if="modal.error" class="error">{{ modal.error }}</p>
-    </form>
+    <a-typography-text v-if="modal.kind === 'cancel'" type="secondary">
+      کار لغو شده در محاسبه درصد انجام حساب نمی‌شود.
+    </a-typography-text>
 
-    <template #footer>
-      <UiButton
-        :variant="modal.kind === 'cancel' ? 'danger' : modal.kind === 'complete' ? 'success' : 'primary'"
-        :loading="modal.saving"
-        @click="actions.submit()"
-      >
-        {{ submitLabel }}
-      </UiButton>
-      <UiButton variant="ghost" @click="actions.close()">انصراف</UiButton>
-    </template>
-  </UiModal>
+    <a-alert
+      v-if="modal.error"
+      type="error"
+      show-icon
+      :message="modal.error"
+      :style="{ marginTop: '12px' }"
+    />
+  </a-modal>
 </template>
-
-<style scoped>
-.rt-modal {
-  display: grid;
-  gap: var(--sp-4);
-}
-
-.task-name {
-  margin: 0;
-  padding: var(--sp-2) var(--sp-3);
-  border-radius: var(--radius);
-  background: var(--surface-subtle);
-  font-weight: var(--fw-semibold);
-  color: var(--ink);
-}
-
-.when {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--sp-3);
-}
-
-.hint {
-  margin: 0;
-  font-size: var(--fs-xs);
-  color: var(--muted);
-}
-
-.error {
-  margin: 0;
-}
-
-@media (max-width: 600px) {
-  .when {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/apps/web/src/components/routines/RoutineTaskRow.vue b/apps/web/src/components/routines/RoutineTaskRow.vue
index 5596142..ccac6eb 100644
--- a/apps/web/src/components/routines/RoutineTaskRow.vue
+++ b/apps/web/src/components/routines/RoutineTaskRow.vue
@@ -1,17 +1,33 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { RouterLink } from 'vue-router';
 import type { RoutineTaskDto } from '@mento/shared';
-import UiIcon from '@/components/UiIcon.vue';
+import {
+  Button as AButton,
+  Checkbox as ACheckbox,
+  Dropdown as ADropdown,
+  Flex as AFlex,
+  Menu as AMenu,
+  Space as ASpace,
+  Tag as ATag,
+  Typography,
+} from 'ant-design-vue';
+import {
+  CalendarOutlined,
+  CheckOutlined,
+  ClockCircleOutlined,
+  FlagOutlined,
+  MoreOutlined,
+  WarningOutlined,
+} from '@ant-design/icons-vue';
+
+const AMenuItem = AMenu.Item;
 import UserAvatar from '@/components/UserAvatar.vue';
-import { UiBadge, UiDropdownMenu } from '@/components/ui';
 import {
   ENTITY_TYPE_LABELS,
   PRIORITY_LABELS,
-  PRIORITY_VARIANTS,
   ROUTINE_TASK_SOURCE_LABELS,
   ROUTINE_TASK_STATUS_LABELS,
-  STATUS_VARIANTS,
   entityRoute,
   formatDayNumeric,
   formatDelay,
@@ -20,6 +36,9 @@ import {
   isOpenStatus,
 } from '@/lib/routines';
 
+const { Text: ATypographyText, Title: ATypographyTitle, Paragraph: ATypographyParagraph } =
+  Typography;
+
 export type RoutineTaskRowAction =
   | 'start'
   | 'complete-note'
@@ -45,396 +64,135 @@ const emit = defineEmits<{
   action: [kind: RoutineTaskRowAction, task: RoutineTaskDto];
 }>();
 
-const menuOpen = ref(false);
-
 const done = computed(() => props.task.status === 'completed');
 const closed = computed(() => props.task.status === 'skipped' || props.task.status === 'cancelled');
 const open = computed(() => isOpenStatus(props.task.status));
 const showTime = computed(() => hasExplicitTime(props.task));
 const checkLabel = computed(() =>
-  done.value ? `برگرداندن «${props.task.title}» به حالت انجام‌نشده` : `علامت‌زدن «${props.task.title}» به‌عنوان انجام‌شده`,
+  done.value
+    ? `برگرداندن «${props.task.title}» به حالت انجام‌نشده`
+    : `علامت‌زدن «${props.task.title}» به‌عنوان انجام‌شده`,
 );
 
 function act(kind: RoutineTaskRowAction) {
   emit('action', kind, props.task);
 }
+
+function onMenuClick({ key }: { key: string | number }) {
+  const k = String(key);
+  if (k === 'open') {
+    emit('open', props.task);
+    return;
+  }
+  act(k as RoutineTaskRowAction);
+}
 </script>
 
 <template>
-  <article
-    class="rt-row"
-    :class="[`st-${task.status}`, { done, closed, busy }]"
+  <a-flex
+    align="flex-start"
+    :gap="12"
+    :style="{
+      width: '100%',
+      padding: '12px 16px',
+      border: '1px solid var(--ant-color-border-secondary, #f0f0f0)',
+      borderRadius: '8px',
+      cursor: 'pointer',
+      opacity: closed ? 0.62 : 1,
+    }"
     @click="emit('open', task)"
   >
-    <button
-      type="button"
-      class="rt-check"
-      :class="{ on: done }"
+    <a-checkbox
+      :checked="done"
       :disabled="busy || closed"
-      :aria-pressed="done"
       :aria-label="checkLabel"
-      @click.stop="emit('toggle', task)"
-    >
-      <span class="box">
-        <UiIcon v-if="done" name="check-plain" :size="16" />
-        <span v-else-if="busy" class="spin" aria-hidden="true" />
-      </span>
-    </button>
+      @click.stop
+      @update:checked="emit('toggle', task)"
+    />
 
-    <div class="rt-main">
-      <div class="rt-title-line">
-        <h3 class="rt-title">{{ task.title }}</h3>
-        <UiIcon v-if="task.isMandatory" class="mand" name="flag" :size="13" title="اجباری" />
-      </div>
-      <p v-if="task.description" class="rt-desc">{{ task.description }}</p>
+    <a-flex vertical :gap="4" style="flex: 1; min-width: 0">
+      <a-space :size="6">
+        <a-typography-title
+          :level="5"
+          :style="{
+            margin: 0,
+            textDecoration: done ? 'line-through' : undefined,
+          }"
+        >
+          {{ task.title }}
+        </a-typography-title>
+        <FlagOutlined v-if="task.isMandatory" />
+      </a-space>
 
-      <div class="rt-meta">
-        <span v-if="showDate" class="meta-item">
-          <UiIcon name="calendar" :size="13" />
-          {{ formatDayNumeric(task.scheduledFor) }}
-        </span>
-        <span v-if="showTime" class="meta-item">
-          <UiIcon name="clock" :size="13" />
-          {{ formatTime(task.dueAt) }}
-        </span>
-        <span v-if="showDelay && task.status === 'overdue'" class="meta-item late">
-          <UiIcon name="warning" :size="13" />
-          {{ formatDelay(task.dueAt) }} تأخیر
-        </span>
-        <span v-if="done && task.completedAt" class="meta-item ok">
-          <UiIcon name="check" :size="13" />
-          {{ formatTime(task.completedAt) }}
-        </span>
-        <span v-if="task.category" class="cat-chip">
-          <i :style="{ background: task.category.color }" />
-          {{ task.category.name }}
-        </span>
-        <UiBadge size="sm" :variant="PRIORITY_VARIANTS[task.priority]">
-          {{ PRIORITY_LABELS[task.priority] }}
-        </UiBadge>
-        <UiBadge v-if="task.status !== 'todo'" size="sm" :variant="STATUS_VARIANTS[task.status]">
+      <a-typography-paragraph
+        v-if="task.description"
+        type="secondary"
+        :ellipsis="{ rows: 1 }"
+        :style="{ marginBottom: 0 }"
+      >
+        {{ task.description }}
+      </a-typography-paragraph>
+
+      <a-space wrap :size="[8, 4]">
+        <a-typography-text v-if="showDate" type="secondary">
+          <CalendarOutlined /> {{ formatDayNumeric(task.scheduledFor) }}
+        </a-typography-text>
+        <a-typography-text v-if="showTime" type="secondary">
+          <ClockCircleOutlined /> {{ formatTime(task.dueAt) }}
+        </a-typography-text>
+        <a-typography-text
+          v-if="showDelay && task.status === 'overdue'"
+          type="danger"
+        >
+          <WarningOutlined /> {{ formatDelay(task.dueAt) }} تأخیر
+        </a-typography-text>
+        <a-typography-text v-if="done && task.completedAt" type="success">
+          <CheckOutlined /> {{ formatTime(task.completedAt) }}
+        </a-typography-text>
+        <a-tag v-if="task.category" :bordered="false">{{ task.category.name }}</a-tag>
+        <a-tag :bordered="false">{{ PRIORITY_LABELS[task.priority] }}</a-tag>
+        <a-tag v-if="task.status !== 'todo'" :bordered="false">
           {{ ROUTINE_TASK_STATUS_LABELS[task.status] }}
-        </UiBadge>
-        <span class="src-chip" :title="`منبع: ${ROUTINE_TASK_SOURCE_LABELS[task.source]}`">
-          <UiIcon :name="task.source === 'routine' ? 'refresh' : 'pin'" :size="12" />
-          {{ ROUTINE_TASK_SOURCE_LABELS[task.source] }}
-        </span>
+        </a-tag>
+        <a-tag :bordered="false">{{ ROUTINE_TASK_SOURCE_LABELS[task.source] }}</a-tag>
         <RouterLink
           v-for="ent in task.entities"
           :key="`${ent.type}-${ent.id}`"
-          class="ent-link"
           :to="entityRoute(ent)"
           @click.stop
         >
-          <span class="ent-type">{{ ENTITY_TYPE_LABELS[ent.type] }}</span>
-          {{ ent.label }}
+          <a-tag color="processing" :bordered="false">
+            {{ ENTITY_TYPE_LABELS[ent.type] }} · {{ ent.label }}
+          </a-tag>
         </RouterLink>
-      </div>
-    </div>
+      </a-space>
+    </a-flex>
 
-    <div class="rt-side" @click.stop>
-      <span v-if="showAssignee && task.assignee" class="assignee" :title="task.assignee.fullName">
+    <a-space :size="8" @click.stop>
+      <a-space v-if="showAssignee && task.assignee" :size="6">
         <UserAvatar :name="task.assignee.fullName" :user-id="task.assignee.id" :size="26" />
-        <span class="assignee-name">{{ task.assignee.fullName }}</span>
-      </span>
-      <UiDropdownMenu v-model:open="menuOpen" align="end">
-        <template #trigger="{ toggle }">
-          <button type="button" class="rt-more" aria-label="عملیات بیشتر" @click="toggle">
-            <UiIcon name="dots" :size="18" />
-          </button>
+        <a-typography-text type="secondary">{{ task.assignee.fullName }}</a-typography-text>
+      </a-space>
+      <a-dropdown>
+        <a-button type="text" aria-label="عملیات بیشتر">
+          <template #icon><MoreOutlined /></template>
+        </a-button>
+        <template #overlay>
+          <a-menu @click="onMenuClick">
+            <a-menu-item key="open">جزئیات</a-menu-item>
+            <a-menu-item v-if="task.status === 'todo'" key="start">شروع کار</a-menu-item>
+            <a-menu-item v-if="open || done" key="complete-note">
+              {{ done ? 'ویرایش گزارش نتیجه' : 'انجام با ثبت گزارش' }}
+            </a-menu-item>
+            <a-menu-item v-if="open" key="reschedule">تغییر زمان</a-menu-item>
+            <a-menu-item v-if="task.status === 'overdue'" key="move-today">
+              انتقال به امروز
+            </a-menu-item>
+            <a-menu-item v-if="open && task.rules.allowSkip" key="skip">رد کردن</a-menu-item>
+            <a-menu-item v-if="open" key="cancel" danger>لغو کار</a-menu-item>
+          </a-menu>
         </template>
-        <button type="button" @click="emit('open', task)">جزئیات</button>
-        <button v-if="task.status === 'todo'" type="button" @click="act('start')">شروع کار</button>
-        <button v-if="open || done" type="button" @click="act('complete-note')">
-          {{ done ? 'ویرایش گزارش نتیجه' : 'انجام با ثبت گزارش' }}
-        </button>
-        <button v-if="open" type="button" @click="act('reschedule')">تغییر زمان</button>
-        <button v-if="task.status === 'overdue'" type="button" @click="act('move-today')">انتقال به امروز</button>
-        <button v-if="open && task.rules.allowSkip" type="button" @click="act('skip')">رد کردن</button>
-        <button v-if="open" type="button" class="danger" @click="act('cancel')">لغو کار</button>
-      </UiDropdownMenu>
-    </div>
-  </article>
+      </a-dropdown>
+    </a-space>
+  </a-flex>
 </template>
-
-<style scoped>
-.rt-row {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: start;
-  gap: var(--sp-3);
-  padding: var(--sp-3) var(--sp-4);
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
-}
-
-.rt-row:hover {
-  border-color: var(--line-strong);
-  box-shadow: var(--shadow-xs);
-}
-
-.rt-row.st-overdue {
-  border-inline-start: 3px solid var(--danger);
-}
-
-.rt-row.done {
-  background: color-mix(in srgb, var(--success-soft) 28%, var(--surface));
-}
-
-.rt-row.closed {
-  opacity: 0.62;
-}
-
-.rt-check {
-  width: 40px;
-  height: 40px;
-  margin: -6px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  border-radius: var(--radius);
-}
-
-.rt-check:disabled {
-  cursor: not-allowed;
-}
-
-.rt-check:focus-visible {
-  outline: 2px solid var(--accent);
-}
-
-.rt-check .box {
-  width: 24px;
-  height: 24px;
-  border-radius: 7px;
-  border: 2px solid var(--line-strong);
-  background: var(--surface);
-  display: grid;
-  place-items: center;
-  color: #fff;
-  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.12s ease;
-}
-
-.rt-check:not(:disabled):hover .box {
-  border-color: var(--accent);
-}
-
-.rt-check:active .box {
-  transform: scale(0.92);
-}
-
-.rt-check.on .box {
-  background: var(--success);
-  border-color: var(--success);
-}
-
-.st-overdue .rt-check .box {
-  border-color: color-mix(in srgb, var(--danger) 55%, white);
-}
-
-.spin {
-  width: 12px;
-  height: 12px;
-  border: 2px solid var(--line);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: rt-spin 0.7s linear infinite;
-}
-
-@keyframes rt-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.rt-main {
-  min-width: 0;
-  display: grid;
-  gap: 4px;
-}
-
-.rt-title-line {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.rt-title {
-  margin: 0;
-  font-size: var(--fs-base);
-  font-weight: var(--fw-semibold);
-  color: var(--ink);
-  line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.done .rt-title {
-  color: var(--muted);
-  text-decoration: line-through;
-  text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent);
-}
-
-.mand {
-  color: var(--warning-deep);
-  flex-shrink: 0;
-}
-
-.rt-desc {
-  margin: 0;
-  font-size: var(--fs-sm);
-  color: var(--muted);
-  line-height: 1.6;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.rt-meta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  margin-top: 2px;
-  font-size: var(--fs-xs);
-  color: var(--muted);
-}
-
-.meta-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
-}
-
-.meta-item.late {
-  color: var(--danger);
-  font-weight: var(--fw-semibold);
-}
-
-.meta-item.ok {
-  color: var(--success-deep);
-}
-
-.cat-chip,
-.src-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  white-space: nowrap;
-}
-
-.cat-chip i {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.src-chip {
-  color: var(--muted-light);
-}
-
-.ent-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  max-width: 220px;
-  padding: 1px 8px;
-  border-radius: var(--radius-full);
-  background: var(--accent-subtle);
-  color: var(--accent-deep);
-  font-weight: var(--fw-medium);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ent-link:hover {
-  background: var(--accent-soft);
-}
-
-.ent-type {
-  color: var(--muted);
-  font-weight: var(--fw-normal);
-}
-
-.rt-side {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-}
-
-.assignee {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--fs-xs);
-  color: var(--ink-secondary);
-  max-width: 150px;
-}
-
-.assignee-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rt-more {
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: var(--radius);
-  background: transparent;
-  color: var(--muted);
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.rt-more:hover {
-  background: var(--surface-subtle);
-  color: var(--ink);
-}
-
-:global(.ui-dd-panel button.danger) {
-  color: var(--danger);
-}
-
-@media (max-width: 900px) {
-  .rt-row {
-    padding: var(--sp-3);
-    gap: var(--sp-2);
-  }
-
-  .rt-check {
-    width: 48px;
-    height: 48px;
-    margin: -8px -6px;
-  }
-
-  .rt-check .box {
-    width: 28px;
-    height: 28px;
-    border-radius: 8px;
-  }
-
-  .rt-title {
-    white-space: normal;
-  }
-
-  .assignee-name {
-    display: none;
-  }
-}
-</style>
diff --git a/apps/web/src/layouts/AppLayout.vue b/apps/web/src/layouts/AppLayout.vue
index 6f21b37..382adc8 100644
--- a/apps/web/src/layouts/AppLayout.vue
+++ b/apps/web/src/layouts/AppLayout.vue
@@ -1084,6 +1084,7 @@ onUnmounted(() => {
 
 .workspace {
   min-width: 0;
+  min-height: 100dvh;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -1904,10 +1905,10 @@ onUnmounted(() => {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 1rem;
+  gap: 16px;
   min-width: 0;
-  /* همان فاصله بالای سایدبار شناور (14px) */
-  padding: 14px 1.5rem 0.85rem;
+  /* هم‌تراز با پدینگ ۱۶px محتوای workspace */
+  padding: 16px;
   position: sticky;
   top: 0;
   z-index: 20;
@@ -2113,18 +2114,29 @@ onUnmounted(() => {
 }
 
 .content {
-  padding: 0 1.5rem 1.5rem;
+  flex: 1 1 auto;
+  min-height: 0;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
   overflow-x: clip;
 }
 
+/* ریشهٔ RouterView ارتفاع workspace را پر کند */
+.content > *:first-child {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
 @media (max-width: 1280px) and (min-width: 901px) {
   .content {
-    padding-inline: 1rem;
+    padding: 16px;
   }
 
   .desktop-topbar {
-    padding-inline: 1rem;
+    padding: 16px;
   }
 }
 
@@ -2253,7 +2265,7 @@ onUnmounted(() => {
   }
 
   .content {
-    padding: 1rem 0.85rem calc(1.25rem + var(--mobile-tabbar-h));
+    padding: 16px 16px calc(16px + var(--mobile-tabbar-h));
   }
 
   .notif-layer {
diff --git a/apps/web/src/theme/antdTheme.ts b/apps/web/src/theme/antdTheme.ts
new file mode 100644
index 0000000..cd52a05
--- /dev/null
+++ b/apps/web/src/theme/antdTheme.ts
@@ -0,0 +1,77 @@
+import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';
+
+/**
+ * Central Ant Design Vue v4 theme for Montact.
+ * Migrated pages must consume this via App ConfigProvider — do not fork in views.
+ *
+ * controlHeight: 36 is the system default (Ant derives SM/LG).
+ * Do not set controlHeight* under components — inherit the token.
+ */
+/** Tailwind gray-50 / gray-200 — layout fill + control/card borders */
+const GRAY_50 = '#f9fafb';
+const GRAY_200 = '#e5e7eb';
+
+export const antdTheme = {
+  token: {
+    colorPrimary: '#10b981',
+    fontFamily: '"IRANSans", Tahoma, sans-serif',
+
+    /** Page / subtle surface fill */
+    colorBgLayout: GRAY_50,
+    colorFillQuaternary: GRAY_50,
+    colorFillAlter: GRAY_50,
+
+    /** Control, card, and divider borders */
+    colorBorder: GRAY_200,
+    colorBorderSecondary: GRAY_200,
+
+    borderRadius: 8,
+    borderRadiusSM: 6,
+    borderRadiusLG: 12,
+
+    /** Default Ant control size for the whole app (buttons, inputs, selects, …). */
+    controlHeight: 36,
+
+    /* Spacing scale: 8, 12, 16, 20, 24 */
+    paddingXXS: 4,
+    paddingXS: 8,
+    paddingSM: 12,
+    padding: 16,
+    paddingMD: 20,
+    paddingLG: 24,
+    paddingXL: 32,
+
+    marginXXS: 4,
+    marginXS: 8,
+    marginSM: 12,
+    margin: 16,
+    marginMD: 20,
+    marginLG: 24,
+    marginXL: 32,
+
+    boxShadow:
+      '0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px 0 rgba(15, 23, 42, 0.04)',
+    boxShadowSecondary:
+      '0 6px 16px 0 rgba(15, 23, 42, 0.08), 0 3px 6px -4px rgba(15, 23, 42, 0.1), 0 9px 28px 8px rgba(15, 23, 42, 0.05)',
+  },
+  components: {
+    Card: {
+      paddingLG: 24,
+      headerBg: 'transparent',
+    },
+    Collapse: {
+      headerBg: GRAY_50,
+      contentBg: GRAY_50,
+      colorBorder: GRAY_200,
+    },
+    Input: {
+      colorBorder: GRAY_200,
+    },
+    Select: {
+      colorBorder: GRAY_200,
+    },
+    Form: {
+      itemMarginBottom: 18,
+    },
+  },
+} as ThemeConfig;
diff --git a/apps/web/src/views/DealFormView.vue b/apps/web/src/views/DealFormView.vue
index 8579c23..dad0ad7 100644
--- a/apps/web/src/views/DealFormView.vue
+++ b/apps/web/src/views/DealFormView.vue
@@ -1,7 +1,41 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
+import {
+  Affix as AAffix,
+  Alert as AAlert,
+  Button as AButton,
+  Card as ACard,
+  Col as ACol,
+  Collapse as ACollapse,
+  CollapsePanel as ACollapsePanel,
+  Descriptions as ADescriptions,
+  DescriptionsItem as ADescriptionsItem,
+  Divider as ADivider,
+  Flex as AFlex,
+  Form as AForm,
+  FormItem as AFormItem,
+  Input as AInput,
+  InputNumber as AInputNumber,
+  Modal as AModal,
+  Row as ARow,
+  Segmented as ASegmented,
+  Select as ASelect,
+  Space,
+  Space as ASpace,
+  Spin as ASpin,
+  Textarea as ATextarea,
+  Typography,
+} from 'ant-design-vue';
+import {
+  ArrowLeftOutlined,
+  CheckOutlined,
+  DeleteOutlined,
+  FileTextOutlined,
+  PlusOutlined,
+  UserAddOutlined,
+} from '@ant-design/icons-vue';
 import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
 import { toFaDigits } from '@/lib/jalali';
@@ -11,10 +45,7 @@ import EntityTimeline from '@/components/EntityTimeline.vue';
 import RelatedTasksPanel from '@/components/routines/RelatedTasksPanel.vue';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import MoneyInput from '@/components/MoneyInput.vue';
-import UiIcon from '@/components/UiIcon.vue';
-import UserAvatar from '@/components/UserAvatar.vue';
 import UserMultiSelect from '@/components/UserMultiSelect.vue';
-import { UiButton, UiField, UiInput, UiModal, UiPageHeader, UiSelect } from '@/components/ui';
 import PersonFormView from '@/views/PersonFormView.vue';
 import type {
   CompanyDto,
@@ -30,6 +61,8 @@ import type {
   ProductDto,
 } from '@mento/shared';
 
+const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
+const ASpaceCompact = Space.Compact;
 type LineDraft = {
   key: string;
   productId: string;
@@ -38,7 +71,6 @@ type LineDraft = {
   unitPrice: string;
 };
 
-type MenuKey = 'person' | 'company' | 'owner' | 'currency' | '';
 type ContactKind = 'person' | 'company';
 type DealHealth = 'normal' | 'stale' | 'rotten';
 
@@ -71,13 +103,12 @@ const loading = ref(false);
 const saving = ref(false);
 const error = ref('');
 const showOthers = ref(true);
+const othersKeys = ref<string[]>(['others']);
 const productsOpen = ref(false);
-const openMenu = ref<MenuKey>('');
 const contactKind = ref<ContactKind>('person');
 const personQuery = ref('');
 const personResults = ref<PersonDto[] | null>(null);
 const personSearching = ref(false);
-const personSearchInput = ref<HTMLInputElement | null>(null);
 const newPersonOpen = ref(false);
 let personSearchTimer: ReturnType<typeof setTimeout> | undefined;
 let personSearchSeq = 0;
@@ -108,6 +139,13 @@ const lostReason = ref('');
 const lostNote = ref('');
 const dealCode = ref('');
 const probability = ref('');
+const probabilityNum = computed({
+  get: () => (probability.value === '' ? undefined : Number(probability.value)),
+  set: (v: number | string | null | undefined) => {
+    if (v == null || v === '' || Number.isNaN(Number(v))) probability.value = '';
+    else probability.value = String(v);
+  },
+});
 const sourceDetail = ref('');
 const referrer = ref('');
 const closedAt = ref('');
@@ -127,11 +165,52 @@ const selectedPerson = computed(() => people.value.find((p) => p.id === personId
 const selectedCompany = computed(() => companies.value.find((c) => c.id === companyId.value) ?? null);
 const selectedOwner = computed(() => users.value.find((u) => u.id === ownerId.value) ?? null);
 const personOptions = computed(() => personResults.value ?? people.value);
-const personSub = computed(() => {
-  const p = selectedPerson.value;
-  if (!p) return '';
-  return [p.company?.name, p.mobile || p.phone].filter(Boolean).join(' · ');
-});
+const contactKindOptions = [
+  { value: 'person' as const, label: 'شخص' },
+  { value: 'company' as const, label: 'شرکت' },
+];
+const personSelectOptions = computed(() =>
+  personOptions.value.map((p) => ({
+    value: p.id,
+    label: p.company?.name ? `${p.fullName} · ${p.company.name}` : p.fullName,
+  })),
+);
+const companySelectOptions = computed(() =>
+  companies.value.map((c) => ({ value: c.id, label: c.name })),
+);
+const ownerSelectOptions = computed(() =>
+  users.value.map((u) => ({ value: u.id, label: u.fullName })),
+);
+const currencySelectOptions = computed(() =>
+  enabledCurrencies.value.map((code) => ({
+    value: code,
+    label: `${currencySuffix(code)} (${code})`,
+  })),
+);
+const pipelineSelectOptions = computed(() =>
+  pipelines.value.map((p) => ({ value: p.id, label: p.name })),
+);
+const stageSelectOptions = computed(() =>
+  stages.value.map((s) => ({ value: s.id, label: s.name })),
+);
+const productSelectOptions = computed(() =>
+  products.value.map((p) => ({ value: p.id, label: p.name })),
+);
+const healthSelectOptions = [
+  { value: 'normal', label: 'عادی' },
+  { value: 'stale', label: 'راکد' },
+  { value: 'rotten', label: 'فاسد' },
+];
+const statusLabel = computed(() =>
+  status.value === 'won'
+    ? 'برنده'
+    : status.value === 'lost'
+      ? 'از دست‌رفته'
+      : status.value
+        ? 'باز'
+        : '—',
+);
+
 
 function rememberPerson(p: PersonDto) {
   if (!people.value.some((x) => x.id === p.id)) people.value = [p, ...people.value];
@@ -147,31 +226,35 @@ async function ensurePersonLoaded(pid: string) {
   }
 }
 
-function togglePersonMenu() {
-  const next = openMenu.value === 'person' ? '' : 'person';
-  openMenu.value = next;
-  if (next === 'person') {
-    void nextTick(() => personSearchInput.value?.focus());
-  }
-}
-
 function pickPerson(p: PersonDto) {
   rememberPerson(p);
   personId.value = p.id;
   if (p.company?.id) companyId.value = p.company.id;
-  openMenu.value = '';
 }
 
 function clearPerson() {
   personId.value = '';
-  openMenu.value = '';
 }
 
 function openNewPerson() {
-  openMenu.value = '';
   newPersonOpen.value = true;
 }
 
+function onPersonSearch(q: string) {
+  personQuery.value = q;
+}
+
+function onPersonSelect(value: unknown) {
+  const pid = typeof value === 'string' ? value : '';
+  if (!pid) {
+    clearPerson();
+    return;
+  }
+  const p = personOptions.value.find((x) => x.id === pid);
+  if (p) pickPerson(p);
+  else personId.value = pid;
+}
+
 function onPersonCreated(p?: PersonDto) {
   newPersonOpen.value = false;
   if (!p) return;
@@ -218,8 +301,6 @@ const productsLabel = computed(() =>
   lines.value.length ? `${toFaDigits(lines.value.length)} محصول` : 'بدون محصول',
 );
 
-const currencyLabel = computed(() => currencySuffix(currency.value));
-
 watch(personId, (value) => {
   if (!value) return;
   const person = people.value.find((p) => p.id === value);
@@ -271,18 +352,6 @@ function toLineInputs(): DealLineItemInput[] {
     }));
 }
 
-function bumpDuration(delta: number) {
-  nextDuration.value = Math.max(5, nextDuration.value + delta);
-}
-
-function toggleMenu(key: MenuKey) {
-  openMenu.value = openMenu.value === key ? '' : key;
-}
-
-function closeMenus() {
-  openMenu.value = '';
-}
-
 async function loadBoard(pid?: string) {
   const { data } = await api.get<PipelineBoardDto>('/pipelines/board', {
     params: pid ? { pipelineId: pid } : undefined,
@@ -522,478 +591,438 @@ async function submit() {
   }
 }
 
+watch(showOthers, (open) => {
+  othersKeys.value = open ? ['others'] : [];
+});
+watch(othersKeys, (keys) => {
+  showOthers.value = keys.includes('others');
+});
+
 onMounted(load);
 </script>
 
 <template>
-  <section class="page" :class="{ embedded }" @click="closeMenus">
-    <UiPageHeader
-      v-if="!embedded"
-      :title="pageTitle"
-      :back-to="{ name: 'pipeline' }"
-    >
-      <template #lead>
-        <span class="crumb">
-          <RouterLink :to="{ name: 'pipeline' }">مسیر فروش</RouterLink>
-          <span>›</span>
-          <strong>{{ pageTitle }}</strong>
-        </span>
-      </template>
-      <template #actions>
-        <RouterLink
-          v-if="!isNew && id"
-          :to="{ name: 'quote-new', query: { fromDealId: id } }"
-        >
-          <UiButton variant="outline">صدور پیش‌فاکتور</UiButton>
-        </RouterLink>
-        <RouterLink
-          v-if="!isNew && id"
-          :to="{ name: 'invoice-new', query: { fromDealId: id } }"
-        >
-          <UiButton variant="outline">صدور فاکتور</UiButton>
-        </RouterLink>
-        <UiButton variant="primary" :disabled="saving" @click="submit">
-          <UiIcon name="check" :size="16" />
-          {{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
-        </UiButton>
-        <UiButton variant="ghost" :disabled="saving" @click="cancel">
-          انصراف
-        </UiButton>
-      </template>
-    </UiPageHeader>
+  <div dir="rtl">
+    <a-spin :spinning="loading">
+      <a-flex
+        v-if="!embedded"
+        justify="space-between"
+        align="center"
+        wrap="wrap"
+        :gap="12"
+        :style="{ marginBottom: '16px' }"
+      >
+        <div>
+          <a-space :size="8">
+            <RouterLink :to="{ name: 'pipeline' }" custom v-slot="{ navigate }">
+              <a-button type="text" @click="navigate">
+                <template #icon><ArrowLeftOutlined /></template>
+              </a-button>
+            </RouterLink>
+            <a-typography-title :level="3" :style="{ margin: 0 }">{{ pageTitle }}</a-typography-title>
+          </a-space>
+          <div>
+            <a-typography-text type="secondary">
+              <RouterLink :to="{ name: 'pipeline' }">مسیر فروش</RouterLink>
+              · {{ pageTitle }}
+            </a-typography-text>
+          </div>
+        </div>
+        <a-space wrap :size="8">
+          <RouterLink
+            v-if="!isNew && id"
+            :to="{ name: 'quote-new', query: { fromDealId: id } }"
+            custom
+            v-slot="{ navigate }"
+          >
+            <a-button @click="navigate">صدور پیش‌فاکتور</a-button>
+          </RouterLink>
+          <RouterLink
+            v-if="!isNew && id"
+            :to="{ name: 'invoice-new', query: { fromDealId: id } }"
+            custom
+            v-slot="{ navigate }"
+          >
+            <a-button @click="navigate">صدور فاکتور</a-button>
+          </RouterLink>
+          <a-button :disabled="saving" @click="cancel">انصراف</a-button>
+          <a-button type="primary" :loading="saving" @click="submit">
+            <template #icon><CheckOutlined /></template>
+            {{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
+          </a-button>
+        </a-space>
+      </a-flex>
 
-    <header v-if="!embedded" class="mobile-head">
-      <button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
-        <UiIcon name="check-plain" :size="22" />
-      </button>
-      <h1>{{ pageTitle }}</h1>
-      <button class="icon-btn" type="button" aria-label="بستن" @click="cancel">
-        <UiIcon name="x" :size="20" />
-      </button>
-    </header>
+      <a-alert v-if="error" type="error" show-icon :message="error" :style="{ marginBottom: '16px' }" />
 
-    <p v-if="loading" class="muted">در حال بارگذاری…</p>
+      <a-form layout="vertical" @finish="submit">
+        <a-row :gutter="[16, 16]">
+          <a-col :xs="24" :lg="embedded ? 24 : 17" :xl="embedded ? 24 : 18">
+            <a-card :bordered="false">
+              <a-divider orientation="right">اطلاعات اصلی</a-divider>
 
-    <form v-else class="form" @submit.prevent="submit">
-      <div class="stack">
-        <section class="card main-card">
-          <h2 class="sec">
-            <i class="dot" />
-            اطلاعات اصلی
-          </h2>
+              <a-row :gutter="[16, 0]">
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="نوع شخص / شرکت" required>
+                    <a-segmented v-model:value="contactKind" block :options="contactKindOptions" />
+                  </a-form-item>
+                </a-col>
+                <a-col v-show="contactKind === 'person'" :xs="24" :md="12">
+                  <a-form-item label="شخص مرتبط" required>
+                    <a-space direction="vertical" :style="{ width: '100%' }" :size="8">
+                      <a-select
+                        :value="personId || undefined"
+                        show-search
+                        allow-clear
+                        :filter-option="false"
+                        :options="personSelectOptions"
+                        :loading="personSearching"
+                        placeholder="جستجو و انتخاب شخص"
+                        style="width: 100%"
+                        @search="onPersonSearch"
+                        @update:value="onPersonSelect"
+                      />
+                      <a-button type="link" @click="openNewPerson">
+                        <template #icon><UserAddOutlined /></template>
+                        افزودن شخص جدید
+                      </a-button>
+                    </a-space>
+                  </a-form-item>
+                </a-col>
+                <a-col v-show="contactKind === 'company'" :xs="24" :md="12">
+                  <a-form-item label="شرکت مرتبط" required>
+                    <a-select
+                      v-model:value="companyId"
+                      show-search
+                      allow-clear
+                      option-filter-prop="label"
+                      :options="companySelectOptions"
+                      placeholder="انتخاب شرکت"
+                      style="width: 100%"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                  <a-form-item label="عنوان معامله" required>
+                    <a-input
+                      v-model:value="title"
+                      :maxlength="200"
+                      placeholder="مثال: فروش نرم‌افزار حسابداری منتک"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="پیش‌بینی مبلغ فروش">
+                    <a-space-compact block style="width: 100%">
+                      <MoneyInput
+                        v-model="amount"
+                        :decimals="0"
+                        :readonly="lines.length > 0"
+                        :placeholder="lines.length ? 'جمع ردیف‌ها' : 'مبلغ را وارد کنید'"
+                      />
+                      <a-select
+                        v-model:value="currency"
+                        :options="currencySelectOptions"
+                        :style="{ width: '120px' }"
+                      />
+                    </a-space-compact>
+                    <a-typography-text v-if="lines.length" type="secondary">
+                      جمع ردیف‌ها: {{ formatMoney(linesTotal, currency) }}
+                    </a-typography-text>
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="پیش‌بینی تاریخ فروش">
+                    <JalaliDateInput v-model="expectedCloseAt" placeholder="انتخاب تاریخ" />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="8">
+                  <a-form-item label="فعالیت بعدی">
+                    <JalaliDateInput v-model="nextDueDate" placeholder="تاریخ پیگیری" />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="8">
+                  <a-form-item label="ساعت">
+                    <JalaliDateInput v-model="nextDueTime" mode="time" />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="8">
+                  <a-form-item label="مدت (دقیقه)">
+                    <a-input-number
+                      v-model:value="nextDuration"
+                      :min="5"
+                      :step="5"
+                      style="width: 100%"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="مسئول انجام این معامله" required>
+                    <a-select
+                      v-model:value="ownerId"
+                      show-search
+                      option-filter-prop="label"
+                      :options="ownerSelectOptions"
+                      placeholder="انتخاب مسئول"
+                      style="width: 100%"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="مسئولان مشترک">
+                    <UserMultiSelect v-model="selectedAssigneeIds" :users="users" />
+                    <a-typography-text type="secondary">علاوه بر مسئول اصلی.</a-typography-text>
+                  </a-form-item>
+                </a-col>
+              </a-row>
 
-          <div class="field kind-field">
-            <label>نوع شخص / شرکت <i>*</i></label>
-            <div class="segment">
-              <button
-                type="button"
-                :class="{ on: contactKind === 'person' }"
-                @click="contactKind = 'person'"
+              <a-divider orientation="right">سایر فیلدها و اطلاعات تکمیلی</a-divider>
+
+              <a-collapse
+                v-model:activeKey="othersKeys"
+                bordered
+                :style="{ borderRadius: '8px', overflow: 'hidden' }"
               >
-                <UiIcon name="user" :size="16" />
-                شخص
-              </button>
-              <button
-                type="button"
-                :class="{ on: contactKind === 'company' }"
-                @click="contactKind = 'company'"
-              >
-                <UiIcon name="building" :size="16" />
-                شرکت
-              </button>
-            </div>
-          </div>
+                <a-collapse-panel key="others" header="نمایش فیلدهای تکمیلی">
+                  <a-row :gutter="[16, 0]">
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="واحد ارزی">
+                        <a-select
+                          v-model:value="currency"
+                          :options="currencySelectOptions"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="مسیر فروش">
+                        <a-select
+                          :value="pipelineId"
+                          :options="pipelineSelectOptions"
+                          style="width: 100%"
+                          @update:value="(v) => onPipelineChange(String(v))"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="مرحله" required>
+                        <a-select
+                          v-model:value="stageId"
+                          :options="stageSelectOptions"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="وضعیت سلامت معامله">
+                        <a-select
+                          v-model:value="health"
+                          :options="healthSelectOptions"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="شیوه آشنایی">
+                        <a-input v-model:value="source" placeholder="وب‌سایت، معرفی، نمایشگاه…" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="شیوه آشنایی دلخواه">
+                        <a-input v-model:value="sourceDetail" placeholder="توضیح آزاد" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="معرف">
+                        <a-input v-model:value="referrer" placeholder="نام معرف" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="کد دستی معامله">
+                        <a-input v-model:value="dealCode" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="احتمال موفقیت (درصد)">
+                        <a-input-number
+                          v-model:value="probabilityNum"
+                          :min="0"
+                          :max="100"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="12">
+                      <a-form-item label="برچسب‌ها">
+                        <a-input v-model:value="tagsRaw" placeholder="سازمانی، فوری (با کاما)" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col v-if="!isNew" :xs="24" :md="12">
+                      <a-form-item label="تاریخ انجام معامله">
+                        <JalaliDateInput v-model="closedAt" placeholder="انتخاب تاریخ" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col v-if="!isNew" :xs="24" :md="12">
+                      <a-form-item label="دلیل شکست">
+                        <a-input
+                          v-model:value="lostReason"
+                          placeholder="علت از دست رفتن معامله…"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col v-if="!isNew" :xs="24" :md="12">
+                      <a-form-item label="یادداشت شکست">
+                        <a-input v-model:value="lostNote" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col v-if="!isNew && (createdByName || sourceRef)" :span="24">
+                      <a-typography-text type="secondary">
+                        <span v-if="createdByName">ثبت‌کننده: {{ createdByName }}</span>
+                        <span v-if="createdByName && sourceRef"> · </span>
+                        <span v-if="sourceRef">کد دیدار: {{ toFaDigits(sourceRef) }}</span>
+                      </a-typography-text>
+                    </a-col>
+                  </a-row>
 
-          <div class="pair contacts">
-            <div v-show="contactKind === 'person'" class="field">
-              <div class="label-row">
-                <label>شخص مرتبط <i>*</i></label>
-                <button type="button" class="person-add" @click.stop="openNewPerson">
-                  <UiIcon name="user-plus" :size="14" />
-                  افزودن شخص جدید
-                </button>
-              </div>
-              <button class="picker person-pick" type="button" @click.stop="togglePersonMenu">
-                <span class="person-ico" :class="{ on: selectedPerson }">
-                  <UiIcon name="user" :size="16" />
-                </span>
-                <span class="who">
-                  <b :class="{ ghost: !selectedPerson }">
-                    {{ selectedPerson?.fullName || 'انتخاب کنید' }}
-                  </b>
-                  <small v-if="personSub">{{ personSub }}</small>
-                </span>
-                <UiIcon name="chevron" :size="16" />
-              </button>
-              <div v-if="openMenu === 'person'" class="menu person-menu" @click.stop>
-                <label class="person-search">
-                  <UiIcon name="search" :size="15" />
-                  <input
-                    ref="personSearchInput"
-                    v-model="personQuery"
-                    type="search"
-                    placeholder="جستجوی نام، موبایل یا کد…"
-                    @keydown.esc="openMenu = ''"
-                  />
-                </label>
-                <ul class="person-list">
-                  <li v-if="personId">
-                    <button type="button" class="person-row" @click="clearPerson">
-                      <span class="row-text">
-                        <b>بدون شخص</b>
-                        <small>حذف شخص انتخاب‌شده</small>
-                      </span>
-                    </button>
-                  </li>
-                  <li v-for="p in personOptions" :key="p.id">
-                    <button
-                      type="button"
-                      class="person-row"
-                      :class="{ on: p.id === personId }"
-                      @click="pickPerson(p)"
+                  <a-divider orientation="right">محصولات / خدمات</a-divider>
+                  <a-space wrap :size="8" :style="{ marginBottom: '12px' }">
+                    <a-button @click="productsOpen = !productsOpen">
+                      <template #icon><FileTextOutlined /></template>
+                      {{ productsOpen ? 'پنهان کردن اقلام' : 'مدیریت اقلام معامله' }}
+                      ({{ productsLabel }})
+                    </a-button>
+                    <a-button v-if="productsOpen" type="primary" @click="addLine">
+                      <template #icon><PlusOutlined /></template>
+                      افزودن ردیف
+                    </a-button>
+                  </a-space>
+                  <template v-if="productsOpen">
+                    <a-row
+                      v-for="line in lines"
+                      :key="line.key"
+                      :gutter="[8, 8]"
+                      align="middle"
+                      :style="{ marginBottom: '8px' }"
                     >
-                      <span class="row-text">
-                        <b>{{ p.fullName }}</b>
-                        <small v-if="p.company?.name">{{ p.company.name }}</small>
-                      </span>
-                      <span v-if="p.mobile || p.phone" class="row-phone" dir="ltr">
-                        {{ p.mobile || p.phone }}
-                      </span>
-                    </button>
-                  </li>
-                  <li v-if="personSearching" class="person-empty">در حال جستجو…</li>
-                  <li v-else-if="!personOptions.length" class="person-empty">
-                    شخصی پیدا نشد.
-                    <button
-                      v-if="personQuery.trim()"
-                      type="button"
-                      class="empty-add"
-                      @click="openNewPerson"
-                    >
-                      افزودن «{{ personQuery.trim() }}» به‌عنوان شخص جدید
-                    </button>
-                  </li>
-                </ul>
-              </div>
-            </div>
+                      <a-col :xs="24" :md="6">
+                        <a-select
+                          v-model:value="line.productId"
+                          allow-clear
+                          :options="[{ value: '', label: 'محصول از کاتالوگ…' }, ...productSelectOptions]"
+                          style="width: 100%"
+                          @change="onPickProduct(line)"
+                        />
+                      </a-col>
+                      <a-col :xs="24" :md="6">
+                        <a-input v-model:value="line.name" placeholder="نام ردیف" />
+                      </a-col>
+                      <a-col :xs="12" :md="4">
+                        <a-input v-model:value="line.quantity" type="number" placeholder="تعداد" />
+                      </a-col>
+                      <a-col :xs="12" :md="5">
+                        <MoneyInput v-model="line.unitPrice" :decimals="0" placeholder="قیمت واحد" />
+                      </a-col>
+                      <a-col :xs="24" :md="3">
+                        <a-button danger block @click="removeLine(line.key)">
+                          <template #icon><DeleteOutlined /></template>
+                        </a-button>
+                      </a-col>
+                    </a-row>
+                    <a-typography-text v-if="!lines.length" type="secondary">
+                      می‌توانید فقط مبلغ کل را وارد کنید یا با «افزودن ردیف» اقلام را مشخص کنید.
+                    </a-typography-text>
+                  </template>
 
-            <div v-show="contactKind === 'company'" class="field desktop-also">
-              <label>شرکت مرتبط <i>*</i></label>
-              <button class="picker" type="button" @click.stop="toggleMenu('company')">
-                <span class="lead-ico">
-                  <UiIcon name="building" :size="16" />
-                </span>
-                <span :class="{ ghost: !selectedCompany }">
-                  {{ selectedCompany?.name || 'انتخاب کنید' }}
-                </span>
-                <UiIcon name="chevron" :size="16" />
-              </button>
-              <ul v-if="openMenu === 'company'" class="menu">
-                <li>
-                  <button type="button" @click="companyId = ''; openMenu = ''">بدون شرکت</button>
-                </li>
-                <li v-for="c in companies" :key="c.id">
-                  <button type="button" @click="companyId = c.id; openMenu = ''">
-                    <span class="lead-ico">
-                      <UiIcon name="building" :size="14" />
-                    </span>
-                    {{ c.name }}
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </div>
+                  <CustomFieldsSection entity-type="deal" v-model="customFields" />
+                </a-collapse-panel>
+              </a-collapse>
 
-          <div class="field">
-            <label for="title">عنوان معامله <i>*</i></label>
-            <div class="control">
-              <input
-                id="title"
-                v-model="title"
-                required
-                minlength="2"
-                placeholder="مثال: فروش نرم‌افزار حسابداری منتک"
-              />
-              <UiIcon name="briefcase" :size="18" />
-            </div>
-          </div>
-
-          <div class="pair">
-            <div class="field">
-              <label for="amount">پیش‌بینی مبلغ فروش به مشتری</label>
-              <div class="amount">
-                <MoneyInput
-                  id="amount"
-                  v-model="amount"
-                  :decimals="0"
-                  :readonly="lines.length > 0"
-                  :placeholder="lines.length ? 'جمع ردیف‌ها' : 'مبلغ را وارد کنید'"
+              <a-divider orientation="right">توضیحات و یادداشت</a-divider>
+              <a-form-item label="یادداشت">
+                <a-textarea
+                  v-model:value="notes"
+                  :rows="6"
+                  placeholder="جزئیات معامله، توافق‌ها یا یادداشت مرتبط…"
                 />
-                <button class="cur-chip" type="button" @click.stop="toggleMenu('currency')">
-                  {{ currencyLabel }}
-                  <UiIcon name="chevron" :size="14" />
-                </button>
-                <ul v-if="openMenu === 'currency'" class="menu nested">
-                  <li v-for="code in enabledCurrencies" :key="code">
-                    <button type="button" @click="currency = code; openMenu = ''">
-                      {{ currencySuffix(code) }}
-                    </button>
-                  </li>
-                </ul>
-              </div>
-              <small v-if="lines.length" class="hint">
-                جمع ردیف‌ها: {{ formatMoney(linesTotal, currency) }}
-              </small>
-            </div>
-            <div class="field">
-              <label>پیش‌بینی تاریخ فروش به مشتری</label>
-              <JalaliDateInput v-model="expectedCloseAt" placeholder="انتخاب تاریخ" />
-            </div>
-          </div>
+              </a-form-item>
+            </a-card>
 
-          <div class="schedule">
-            <div class="field next-field">
-              <label>فعالیت بعدی</label>
-              <JalaliDateInput v-model="nextDueDate" placeholder="انتخاب تاریخ پیگیری" />
-            </div>
-            <div class="pair follow-up">
-              <div class="field">
-                <label>ساعت <i>*</i></label>
-                <JalaliDateInput v-model="nextDueTime" mode="time" />
-              </div>
-              <div class="field">
-                <label>مدت فعالیت (دقیقه) <i>*</i></label>
-                <div class="stepper">
-                  <button type="button" aria-label="کاهش" @click="bumpDuration(-5)">
-                    <UiIcon name="minus" :size="16" />
-                  </button>
-                  <strong>{{ toFaDigits(nextDuration) }}</strong>
-                  <button type="button" aria-label="افزایش" @click="bumpDuration(5)">
-                    <UiIcon name="plus" :size="16" />
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="field owner-field">
-              <label>مسئول انجام این معامله <i>*</i></label>
-              <button class="picker" type="button" @click.stop="toggleMenu('owner')">
-                <UserAvatar :name="selectedOwner?.fullName || 'مسئول'" :user-id="selectedOwner?.id" :size="32" />
-                <span :class="{ ghost: !selectedOwner }">
-                  {{ selectedOwner?.fullName || 'انتخاب کنید' }}
-                </span>
-                <UiIcon name="chevron" :size="16" />
-              </button>
-              <ul v-if="openMenu === 'owner'" class="menu">
-                <li v-for="user in users" :key="user.id">
-                  <button type="button" @click="ownerId = user.id; openMenu = ''">
-                    <UserAvatar :name="user.fullName" :user-id="user.id" :has-avatar="user.hasAvatar" :size="28" />
-                    {{ user.fullName }}
-                  </button>
-                </li>
-              </ul>
-            </div>
-            <div class="field">
-              <label>مسئولان مشترک</label>
-              <UserMultiSelect v-model="selectedAssigneeIds" :users="users" />
-              <small class="hint">علاوه بر مسئول اصلی.</small>
-            </div>
-          </div>
-        </section>
+            <RelatedTasksPanel
+              v-if="!isNew && id"
+              :style="{ marginTop: '16px' }"
+              :entity="{ type: 'deal', id, label: title }"
+            />
+            <EntityTimeline
+              v-if="!isNew && id"
+              :style="{ marginTop: '16px' }"
+              entity-type="deal"
+              :entity-id="id"
+            />
 
-        <section class="card extras">
-          <button class="extras-toggle" type="button" @click="showOthers = !showOthers">
-            <span class="extras-toggle-title">
-              <UiIcon name="layers" :size="18" />
-              سایر فیلدها و اطلاعات تکمیلی
-            </span>
-            <UiIcon name="chevron" :size="16" :class="{ open: showOthers }" />
-          </button>
+            <a-space v-if="embedded" :style="{ marginTop: '16px' }" :size="8">
+              <a-button type="primary" :loading="saving" @click="submit">
+                {{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
+              </a-button>
+              <a-button :disabled="saving" @click="cancel">انصراف</a-button>
+            </a-space>
+          </a-col>
 
-          <div v-if="showOthers" class="extras-body">
-            <div class="crm-form-grid-2">
-              <UiField label="واحد ارزی">
-                <UiSelect v-model="currency">
-                  <option v-for="code in enabledCurrencies" :key="code" :value="code">
-                    {{ currencySuffix(code) }} ({{ code }})
-                  </option>
-                </UiSelect>
-              </UiField>
+          <a-col v-if="!embedded" :xs="24" :lg="7" :xl="6">
+            <a-affix :offset-top="24">
+              <a-card :bordered="false" title="خلاصه معامله">
+                <a-descriptions :column="1" size="small" bordered>
+                  <a-descriptions-item label="عنوان">{{ title || '—' }}</a-descriptions-item>
+                  <a-descriptions-item label="مبلغ">
+                    {{
+                      lines.length
+                        ? formatMoney(linesTotal, currency)
+                        : amount
+                          ? formatMoney(Number(amount), currency)
+                          : '—'
+                    }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="مخاطب">
+                    {{
+                      contactKind === 'person'
+                        ? selectedPerson?.fullName || '—'
+                        : selectedCompany?.name || '—'
+                    }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="مسئول">
+                    {{ selectedOwner?.fullName || '—' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="مرحله">
+                    {{ stages.find((s) => s.id === stageId)?.name || '—' }}
+                  </a-descriptions-item>
+                  <a-descriptions-item v-if="!isNew" label="وضعیت">
+                    {{ statusLabel }}
+                  </a-descriptions-item>
+                </a-descriptions>
+                <a-space
+                  direction="vertical"
+                  :style="{ width: '100%', marginTop: '16px' }"
+                  :size="8"
+                >
+                  <a-button type="primary" block :loading="saving" @click="submit">
+                    {{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
+                  </a-button>
+                  <a-button block :disabled="saving" @click="cancel">انصراف</a-button>
+                </a-space>
+              </a-card>
+            </a-affix>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
 
-              <UiField label="مسیر فروش">
-                <UiSelect :model-value="pipelineId" @update:model-value="onPipelineChange($event)">
-                  <option v-for="p in pipelines" :key="p.id" :value="p.id">{{ p.name }}</option>
-                </UiSelect>
-              </UiField>
-
-              <UiField label="مرحله" required>
-                <UiSelect v-model="stageId" required>
-                  <option v-for="s in stages" :key="s.id" :value="s.id">{{ s.name }}</option>
-                </UiSelect>
-              </UiField>
-
-              <UiField label="وضعیت سلامت معامله">
-                <UiSelect v-model="health">
-                  <option value="normal">عادی</option>
-                  <option value="stale">راکد</option>
-                  <option value="rotten">فاسد</option>
-                </UiSelect>
-              </UiField>
-
-              <UiField label="شیوه آشنایی">
-                <UiInput v-model="source" placeholder="مثال: وب‌سایت، معرفی، نمایشگاه…" />
-              </UiField>
-
-              <UiField label="شیوه آشنایی دلخواه">
-                <UiInput v-model="sourceDetail" placeholder="توضیح آزاد" />
-              </UiField>
-
-              <UiField label="معرف">
-                <UiInput v-model="referrer" placeholder="نام معرف" />
-              </UiField>
-
-              <UiField label="کد دستی معامله">
-                <UiInput v-model="dealCode" />
-              </UiField>
-
-              <UiField label="احتمال موفقیت (درصد)">
-                <UiInput v-model="probability" type="number" min="0" max="100" />
-              </UiField>
-
-              <UiField label="برچسب‌ها">
-                <UiInput v-model="tagsRaw" placeholder="سازمانی، فوری (با کاما جدا کنید)" />
-              </UiField>
-
-              <UiField v-if="!isNew" label="تاریخ انجام معامله">
-                <JalaliDateInput v-model="closedAt" placeholder="انتخاب تاریخ" />
-              </UiField>
-
-              <UiField v-if="!isNew" label="دلیل شکست (در صورت باخت معامله)" class="crm-col-span-full">
-                <UiInput id="lostReason" v-model="lostReason" placeholder="علت از دست رفتن معامله را بنویسید…" />
-              </UiField>
-
-              <UiField v-if="!isNew" label="یادداشت شکست" class="crm-col-span-full">
-                <UiInput v-model="lostNote" />
-              </UiField>
-
-              <p v-if="!isNew && (createdByName || sourceRef)" class="hint crm-col-span-full">
-                <span v-if="createdByName">ثبت‌کننده: {{ createdByName }}</span>
-                <span v-if="createdByName && sourceRef"> · </span>
-                <span v-if="sourceRef">کد دیدار: {{ toFaDigits(sourceRef) }}</span>
-              </p>
-            </div>
-
-            <!-- بخش محصولات / خدمات -->
-            <div class="products-section">
-              <div class="products-head">
-                <div class="products-head-info">
-                  <span class="sec-title">محصولات / خدمات</span>
-                  <span class="lines-count-badge">{{ productsLabel }}</span>
-                </div>
-                <div class="products-head-actions">
-                  <UiButton
-                    variant="outline"
-                    size="sm"
-                    type="button"
-                    @click="productsOpen = !productsOpen"
-                  >
-                    <UiIcon name="box" :size="14" />
-                    {{ productsOpen ? 'پنهان کردن اقلام' : 'مدیریت اقلام معامله' }}
-                  </UiButton>
-                  <UiButton
-                    v-if="productsOpen"
-                    variant="primary"
-                    size="sm"
-                    type="button"
-                    @click="addLine"
-                  >
-                    <UiIcon name="plus" :size="14" />
-                    افزودن ردیف
-                  </UiButton>
-                </div>
-              </div>
-
-              <div v-if="productsOpen" class="lines-block">
-                <div v-if="lines.length" class="lines-table">
-                  <div class="lines-table-head">
-                    <span>محصول از کاتالوگ</span>
-                    <span>نام ردیف</span>
-                    <span>تعداد</span>
-                    <span>قیمت واحد ({{ currencyLabel }})</span>
-                    <span>عملیات</span>
-                  </div>
-                  <div v-for="line in lines" :key="line.key" class="line-row">
-                    <UiSelect v-model="line.productId" @change="onPickProduct(line)">
-                      <option value="">محصول از کاتالوگ…</option>
-                      <option v-for="p in products" :key="p.id" :value="p.id">{{ p.name }}</option>
-                    </UiSelect>
-                    <UiInput v-model="line.name" placeholder="نام ردیف" />
-                    <UiInput v-model="line.quantity" type="number" min="0.01" step="0.01" placeholder="تعداد" />
-                    <MoneyInput v-model="line.unitPrice" :decimals="0" placeholder="قیمت واحد" />
-                    <button class="line-delete-btn" type="button" title="حذف ردیف" @click="removeLine(line.key)">
-                      <UiIcon name="trash" :size="16" />
-                    </button>
-                  </div>
-                </div>
-                <p v-else class="lines-empty-hint">
-                  می‌توانید فقط مبلغ کل را در فیلد مبلغ وارد کنید یا با کلیک روی «افزودن ردیف»، اقلام را از کاتالوگ محصول مشخص فرمایید.
-                </p>
-              </div>
-            </div>
-
-            <CustomFieldsSection entity-type="deal" v-model="customFields" />
-          </div>
-        </section>
-      </div>
-
-      <div class="card note-card">
-        <label for="notes">توضیحات و یادداشت</label>
-        <textarea
-          id="notes"
-          v-model="notes"
-          rows="8"
-          placeholder="جزئیات معامله، توافق‌ها یا یادداشت مرتبط را بنویسید…"
-        />
-      </div>
-
-      <RelatedTasksPanel
-        v-if="!isNew && id"
-        class="timeline"
-        :entity="{ type: 'deal', id, label: title }"
-      />
-
-      <EntityTimeline
-        v-if="!isNew && id"
-        class="timeline"
-        entity-type="deal"
-        :entity-id="id"
-      />
-
-      <p v-if="error" class="error">{{ error }}</p>
-      <p v-else-if="status" class="muted">
-        وضعیت: {{ status === 'won' ? 'برنده' : status === 'lost' ? 'از دست‌رفته' : 'باز' }}
-      </p>
-    </form>
-
-    <footer v-if="!embedded" class="mobile-save">
-      <button class="btn outline" type="button" :disabled="saving" @click="cancel">انصراف</button>
-      <button class="btn primary" type="button" :disabled="saving || loading" @click="submit">
-        {{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
-      </button>
-    </footer>
-
-    <p v-if="embedded && error" class="error embed-error">{{ error }}</p>
-
-    <!-- Embedded Modal Actions (Fixed at bottom) -->
-    <div v-if="embedded" class="embed-actions">
-      <UiButton variant="primary" type="button" :disabled="saving" :loading="saving" @click="submit">
-        {{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
-      </UiButton>
-      <UiButton variant="ghost" type="button" :disabled="saving" @click="cancel">
-        انصراف
-      </UiButton>
-    </div>
-
-    <UiModal :open="newPersonOpen" title="شخص جدید" nest @close="newPersonOpen = false">
+    <a-modal
+      v-model:open="newPersonOpen"
+      title="شخص جدید"
+      :footer="null"
+      destroy-on-close
+      width="720px"
+      @cancel="newPersonOpen = false"
+    >
       <PersonFormView
         v-if="newPersonOpen"
         embedded
@@ -1001,826 +1030,6 @@ onMounted(load);
         @saved="onPersonCreated"
         @cancel="newPersonOpen = false"
       />
-    </UiModal>
-  </section>
+    </a-modal>
+  </div>
 </template>
-
-<style scoped>
-.page {
-  display: grid;
-  gap: 0.85rem;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  padding-bottom: 5rem;
-}
-
-.page.embedded {
-  padding-bottom: 0;
-}
-
-.embed-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.desktop-head {
-  display: none;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: center;
-}
-
-.title-block {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.doc-ico {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius);
-  display: grid;
-  place-items: center;
-  background: #ecfdf5;
-  color: #0f766e;
-}
-
-h1 {
-  margin: 0;
-  font-size: 1.35rem;
-}
-
-.crumb {
-  margin: 0.2rem 0 0;
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  color: #94a3b8;
-  font-size: 0.82rem;
-}
-
-.crumb a {
-  color: #0f766e;
-  font-weight: 700;
-}
-
-.desk-actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.mobile-head {
-  display: grid;
-  grid-template-columns: 40px 1fr 40px;
-  align-items: center;
-}
-
-.mobile-head h1 {
-  text-align: center;
-  font-size: 1.05rem;
-}
-
-.icon-btn {
-  width: 40px;
-  height: 40px;
-  border: 0;
-  background: none;
-  color: #0f766e;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.form,
-.stack {
-  display: grid;
-  gap: 0.75rem;
-  min-width: 0;
-}
-
-.card {
-  position: relative;
-  background: #fff;
-  border-radius: var(--radius);
-  padding: 0.95rem;
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
-  min-width: 0;
-}
-
-.sec {
-  display: none;
-  align-items: center;
-  gap: 0.45rem;
-  margin: 0 0 0.9rem;
-  font-size: 0.95rem;
-  color: #0f172a;
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: #14b8a6;
-}
-
-.kind-field {
-  display: grid;
-}
-
-.field {
-  display: grid;
-  gap: 0.4rem;
-  min-width: 0;
-  position: relative;
-}
-
-.field label {
-  margin: 0;
-  color: #64748b;
-  font-size: 0.82rem;
-}
-
-.field i {
-  color: #dc2626;
-  font-style: normal;
-}
-
-.pair,
-.schedule {
-  display: grid;
-  gap: 0.85rem;
-}
-
-.field :deep(.trigger) {
-  min-height: var(--control-h);
-  height: var(--control-h);
-}
-
-.control,
-.amount,
-.picker {
-  width: 100%;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  background: #fff;
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.35rem 0.7rem;
-}
-
-.control input,
-.amount input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  background: transparent;
-  font: inherit;
-  padding: 0.4rem 0;
-}
-
-.control :deep(.ico),
-.picker :deep(.ico:last-child) {
-  color: #94a3b8;
-  flex-shrink: 0;
-  margin-inline-start: auto;
-}
-
-.picker :deep(.ico:last-child) {
-  transform: rotate(90deg);
-}
-
-.lead-ico {
-  width: 32px;
-  height: 32px;
-  border-radius: 999px;
-  display: grid;
-  place-items: center;
-  background: #ecfdf5;
-  color: #0d9488;
-  flex-shrink: 0;
-}
-
-.picker {
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-
-.picker .ghost {
-  color: #94a3b8;
-  font-weight: 500;
-}
-
-.amount {
-  position: relative;
-  padding-inline-end: 0.4rem;
-}
-
-.cur-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.15rem;
-  border: 0;
-  background: #f8fafc;
-  color: #0f766e;
-  border-radius: var(--radius);
-  padding: 0.35rem 0.55rem;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.cur-chip :deep(.ico) {
-  transform: rotate(90deg);
-  color: #94a3b8;
-}
-
-.segment {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.45rem;
-  padding: 0.2rem;
-  border-radius: var(--radius);
-  background: #f8fafc;
-}
-
-.segment button {
-  min-height: calc(var(--control-h) - 4px);
-  height: calc(var(--control-h) - 4px);
-  border: 0;
-  border-radius: var(--radius);
-  background: transparent;
-  color: #64748b;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
-  font: inherit;
-  cursor: pointer;
-}
-
-.segment .on {
-  background: #ecfdf5;
-  color: #0f766e;
-  font-weight: 600;
-}
-
-.menu {
-  position: absolute;
-  inset-inline: 0;
-  top: calc(100% + 4px);
-  z-index: 6;
-  margin: 0;
-  padding: 0.35rem;
-  list-style: none;
-  background: #fff;
-  border-radius: var(--radius);
-  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
-  max-height: 16rem;
-  overflow: auto;
-}
-
-.menu.nested {
-  inset-inline: auto 0;
-  min-width: 8rem;
-}
-
-.menu button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  border: 0;
-  background: none;
-  padding: 0.55rem 0.5rem;
-  border-radius: var(--radius);
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-}
-
-.menu button:hover {
-  background: #f8fafc;
-}
-
-.who {
-  display: grid;
-  min-width: 0;
-  flex: 1;
-  text-align: start;
-}
-
-.who b {
-  font-weight: 600;
-}
-
-.who b.ghost {
-  color: #94a3b8;
-  font-weight: 500;
-}
-
-.who small {
-  color: #94a3b8;
-  font-size: 0.75rem;
-}
-
-.label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.person-add {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  border: 0;
-  background: none;
-  padding: 0.15rem 0.35rem;
-  border-radius: 6px;
-  font: inherit;
-  font-size: var(--fs-xs);
-  font-weight: 700;
-  color: #0f766e;
-  cursor: pointer;
-}
-
-.person-add:hover {
-  background: #f0fdfa;
-}
-
-.person-ico {
-  width: 32px;
-  height: 32px;
-  border-radius: 999px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  background: #f1f5f9;
-  color: #94a3b8;
-}
-
-.person-ico.on {
-  background: #ccfbf1;
-  color: #0f766e;
-}
-
-.person-menu {
-  max-height: none;
-  overflow: visible;
-  display: grid;
-  gap: 0.35rem;
-  padding: 0.45rem;
-  z-index: 30;
-}
-
-.person-search {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  height: 2.4rem;
-  padding: 0 0.7rem;
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  color: #94a3b8;
-}
-
-.person-search:focus-within {
-  border-color: #5eead4;
-}
-
-.person-search input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  background: none;
-  font: inherit;
-  color: var(--ink);
-  outline: none;
-}
-
-.person-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  max-height: 14rem;
-  overflow: auto;
-  display: grid;
-  gap: 2px;
-}
-
-.person-row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  border: 0;
-  background: transparent;
-  padding: 0.55rem 0.6rem;
-  border-radius: 8px;
-  font: inherit;
-  text-align: right;
-  cursor: pointer;
-  color: var(--ink);
-}
-
-.person-row:hover,
-.person-row.on {
-  background: #f0fdfa;
-}
-
-.row-text {
-  flex: 1;
-  min-width: 0;
-  display: grid;
-  gap: 1px;
-}
-
-.row-text b {
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.row-text small {
-  color: #94a3b8;
-  font-size: 0.72rem;
-}
-
-.row-phone {
-  font-size: 0.74rem;
-  color: #64748b;
-  flex: 0 0 auto;
-}
-
-.person-empty {
-  padding: 0.7rem 0.55rem;
-  color: #94a3b8;
-  font-size: 0.82rem;
-  display: grid;
-  gap: 0.45rem;
-  text-align: center;
-}
-
-.empty-add {
-  border: 0;
-  background: #ecfdf5;
-  color: #0f766e;
-  border-radius: 8px;
-  padding: 0.45rem 0.6rem;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.embed-error {
-  margin: 0.25rem 0 0;
-}
-
-.stepper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  padding: 0.15rem;
-}
-
-.stepper button {
-  width: 28px;
-  height: 28px;
-  border: 0;
-  border-radius: var(--radius);
-  background: #f0fdfa;
-  color: #0f766e;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.extras-toggle {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid var(--line);
-  background: var(--surface-subtle);
-  border-radius: var(--radius, 10px);
-  padding: 0.75rem 1rem;
-  font: inherit;
-  font-weight: 600;
-  color: var(--ink);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.extras-toggle:hover {
-  background: var(--surface-hover);
-  border-color: var(--line-strong);
-}
-
-.extras-toggle-title {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  font-size: var(--fs-base);
-}
-
-.extras-toggle :deep(.ico) {
-  color: var(--muted);
-  transition: transform var(--transition-fast);
-}
-
-.extras-toggle :deep(.ico.open) {
-  transform: rotate(180deg);
-}
-
-.extras-body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-5);
-  margin-top: var(--sp-4);
-  width: 100%;
-}
-
-.products-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
-  padding-top: var(--sp-4);
-  border-top: 1px dashed var(--line);
-  width: 100%;
-}
-
-.products-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--sp-2);
-}
-
-.products-head-info {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-}
-
-.sec-title {
-  font-size: var(--fs-sm);
-  font-weight: var(--fw-semibold);
-  color: var(--ink-secondary);
-}
-
-.lines-count-badge {
-  font-size: var(--fs-xs);
-  color: var(--muted);
-  background: var(--surface-subtle);
-  border: 1px solid var(--line);
-  padding: 2px 8px;
-  border-radius: 999px;
-}
-
-.products-head-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-}
-
-.lines-block {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-3);
-}
-
-.lines-table {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-  width: 100%;
-}
-
-.lines-table-head {
-  display: grid;
-  grid-template-columns: 1.5fr 1.5fr 0.8fr 1.2fr 40px;
-  gap: var(--sp-2);
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-medium);
-  color: var(--muted);
-  padding: 0 4px;
-}
-
-.line-row {
-  display: grid;
-  grid-template-columns: 1.5fr 1.5fr 0.8fr 1.2fr 40px;
-  gap: var(--sp-2);
-  align-items: center;
-  width: 100%;
-}
-
-.line-delete-btn {
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius, 10px);
-  background: var(--surface);
-  color: var(--danger);
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.line-delete-btn:hover {
-  background: #fef2f2;
-  border-color: #fecaca;
-}
-
-.lines-empty-hint {
-  margin: 0;
-  padding: var(--sp-3);
-  background: var(--surface-subtle);
-  border: 1px dashed var(--line);
-  border-radius: var(--radius, 10px);
-  color: var(--muted);
-  font-size: var(--fs-xs);
-  text-align: center;
-}
-
-@media (max-width: 768px) {
-  .lines-table-head {
-    display: none;
-  }
-
-  .line-row {
-    grid-template-columns: 1fr;
-    background: var(--surface-subtle);
-    padding: var(--sp-3);
-    border: 1px solid var(--line);
-    border-radius: var(--radius, 10px);
-    gap: var(--sp-2);
-  }
-
-  .line-delete-btn {
-    width: 100%;
-  }
-}
-
-.note-card {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.hint {
-  color: #64748b;
-  font-size: 0.8rem;
-}
-
-.note-card textarea {
-  min-height: 7rem;
-  width: 100%;
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  padding: 0.75rem 0.85rem;
-  font: inherit;
-  resize: vertical;
-}
-
-.hint,
-.muted,
-.error {
-  margin: 0;
-}
-
-.hint,
-.muted {
-  color: #64748b;
-  font-size: 0.85rem;
-}
-
-.error {
-  color: #b91c1c;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-  min-height: var(--control-h);
-  border-radius: var(--radius);
-  padding: 0 0.95rem;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.btn.primary {
-  border: 0;
-  background: #14b8a6;
-  color: #fff;
-}
-
-.btn.outline {
-  border: 1.5px solid #14b8a6;
-  background: #fff;
-  color: #0f766e;
-}
-
-.btn.cancel {
-  border: 1.5px solid #e2e8f0;
-  background: #fff;
-  color: #64748b;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.mobile-save {
-  position: fixed;
-  inset-inline: 0.85rem;
-  bottom: calc(0.55rem + var(--mobile-tabbar-h));
-  z-index: 8;
-  display: grid;
-  grid-template-columns: 1fr 1.2fr;
-  gap: 0.55rem;
-}
-
-.mobile-save .btn {
-  width: 100%;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  border-radius: var(--radius);
-}
-
-@media (min-width: 960px) {
-  .page {
-    padding-bottom: 1rem;
-    gap: 1rem;
-  }
-
-  .desktop-head {
-    display: flex;
-  }
-
-  .mobile-head,
-  .kind-field,
-  .follow-up,
-  .mobile-save {
-    display: none;
-  }
-
-  .sec {
-    display: flex;
-  }
-
-  .main-card,
-  .extras {
-    padding: 1.15rem 1.2rem;
-  }
-
-  .pair {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .schedule {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .next-field {
-    grid-column: 1;
-    grid-row: 1;
-  }
-
-  .owner-field {
-    grid-column: 2;
-    grid-row: 1;
-  }
-
-  .contacts .field {
-    display: grid !important;
-  }
-
-  .next-field {
-    display: grid;
-  }
-
-  .note-card {
-    display: grid;
-  }
-}
-</style>
diff --git a/apps/web/src/views/InvoiceFormView.vue b/apps/web/src/views/InvoiceFormView.vue
index c9d6839..865c3e8 100644
--- a/apps/web/src/views/InvoiceFormView.vue
+++ b/apps/web/src/views/InvoiceFormView.vue
@@ -10,11 +10,42 @@ import {
   formatMoney as formatMoneyLib,
 } from '@/lib/money';
 import { formatLocalDateInput, toFaDigits } from '@/lib/jalali';
+import {
+  Affix as AAffix,
+  Alert as AAlert,
+  Button as AButton,
+  Card as ACard,
+  Col as ACol,
+  Collapse as ACollapse,
+  CollapsePanel as ACollapsePanel,
+  Descriptions as ADescriptions,
+  DescriptionsItem as ADescriptionsItem,
+  Divider as ADivider,
+  Flex as AFlex,
+  Form as AForm,
+  FormItem as AFormItem,
+  Input as AInput,
+  InputNumber as AInputNumber,
+  Row as ARow,
+  Segmented as ASegmented,
+  Select as ASelect,
+  Space as ASpace,
+  Spin as ASpin,
+  Textarea as ATextarea,
+  Typography,
+} from 'ant-design-vue';
+import {
+  ArrowLeftOutlined,
+  CheckOutlined,
+  DeleteOutlined,
+  EyeOutlined,
+  FileTextOutlined,
+  PlusOutlined,
+  UserAddOutlined,
+} from '@ant-design/icons-vue';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import MoneyInput from '@/components/MoneyInput.vue';
-import UiIcon from '@/components/UiIcon.vue';
-import BrandName from '@/components/brand/BrandName.vue';
-import { brand } from '@mento/shared';
+import InvoiceDocPreview from '@/components/InvoiceDocPreview.vue';
 import { useAuthStore } from '@/stores/auth';
 import type {
   CreateInvoiceRequest,
@@ -95,8 +126,6 @@ const saving = ref(false);
 const paying = ref(false);
 const error = ref('');
 const mobileStep = ref<1 | 2>(1);
-const showExtra = ref(false);
-const showShipping = ref(false);
 const showPayments = ref(false);
 const productSearch = ref('');
 const validityMode = ref<'days' | 'date'>('days');
@@ -122,6 +151,8 @@ const products = ref<ProductDto[]>([]);
 const lines = ref<LineDraft[]>([]);
 const installments = ref<InstallmentDraft[]>([]);
 const invoice = ref<InvoiceDto | null>(null);
+const orgName = ref('');
+const previewOpen = ref(false);
 
 const payAmount = ref('');
 const payMethod = ref<PaymentMethod>('transfer');
@@ -301,11 +332,6 @@ function removeLine(key: string) {
   lines.value = lines.value.filter((l) => l.key !== key);
 }
 
-function bumpQty(line: LineDraft, delta: number) {
-  const next = Math.max(0.01, (Number(line.quantity) || 0) + delta);
-  line.quantity = String(Number.isInteger(next) ? next : Number(next.toFixed(2)));
-}
-
 function onPickProduct(line: LineDraft) {
   const product = products.value.find((p) => p.id === line.productId);
   if (!product) return;
@@ -321,12 +347,6 @@ function onPersonChange() {
   companyId.value = person?.company?.id ?? '';
 }
 
-function productIcon(line: LineDraft): 'box' | 'briefcase' {
-  if (line.kind === 'service') return 'briefcase';
-  const product = products.value.find((p) => p.id === line.productId);
-  return product?.kind === 'service' ? 'briefcase' : 'box';
-}
-
 function toLineInputs(): DealLineItemInput[] {
   return lines.value
     .filter((l) => l.name.trim() && l.quantity !== '' && l.unitPrice !== '')
@@ -505,6 +525,7 @@ async function load() {
     } catch {
       /* optional */
     }
+    orgName.value = orgRes.data.name || '';
     enabledCurrencies.value = orgRes.data.enabledCurrencies?.length
       ? orgRes.data.enabledCurrencies
       : [orgRes.data.baseCurrency || 'IRR'];
@@ -800,8 +821,72 @@ function splitInstallments(count: number) {
   });
 }
 
+function lineHasContent(line: LineDraft) {
+  return Boolean(
+    line.name.trim() ||
+      line.productId ||
+      line.description.trim() ||
+      (line.unitPrice !== '' && Number.isFinite(Number(line.unitPrice))),
+  );
+}
+
+const previewLines = computed(() =>
+  lines.value.filter(lineHasContent).map((l) => {
+    const product = products.value.find((p) => p.id === l.productId);
+    const qty = Number(l.quantity);
+    const unit = Number(l.unitPrice);
+    const unitPrice = Number.isFinite(unit) && l.unitPrice !== ''
+      ? unit
+      : Number(product?.unitPrice) || 0;
+    const quantity = Number.isFinite(qty) && l.quantity !== '' ? qty : 1;
+    return {
+      name:
+        l.name.trim() ||
+        product?.name ||
+        (l.productId ? 'محصول انتخاب‌شده' : 'بدون نام'),
+      description: l.description?.trim() || product?.description || undefined,
+      sku: l.sku || product?.sku || undefined,
+      quantity,
+      unitPrice,
+      total: quantity * unitPrice,
+    };
+  }),
+);
+
+const previewSubtotal = computed(() =>
+  previewLines.value.reduce((sum, l) => sum + l.total, 0),
+);
+const previewTaxAmount = computed(() =>
+  Math.round(
+    (Math.max(0, previewSubtotal.value - discountNum.value) * (taxPercentNum.value / 100) +
+      Number.EPSILON) *
+      100,
+  ) / 100,
+);
+const previewPayable = computed(() => {
+  const signed = Math.round(
+    (previewSubtotal.value - discountNum.value + previewTaxAmount.value + Number.EPSILON) * 100,
+  ) / 100;
+  return docMode.value === 'credit' ? -signed : signed;
+});
+
+const previewCustomer = computed(() => {
+  const p = people.value.find((x) => x.id === personId.value);
+  if (!p) return { name: '—', sub: '' };
+  const full = p.fullName || `${p.firstName ?? ''} ${p.lastName ?? ''}`.trim();
+  return {
+    name: p.company?.name || full || '—',
+    sub: p.company?.name ? full : '',
+  };
+});
+
+const previewStatusLabel = computed(() => {
+  const map = statusOptions.value as Record<string, string>;
+  return map[status.value] || status.value || '—';
+});
+
 function printDoc() {
-  window.print();
+  previewOpen.value = true;
 }
 
 function goBack() {
@@ -838,1793 +923,640 @@ watch(
   },
 );
 
+
+const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
+
+const personSelectOptions = computed(() =>
+  people.value.map((p) => ({ value: p.id, label: personLabel(p) })),
+);
+
+const statusSelectOptions = computed(() =>
+  Object.entries(statusOptions.value).map(([value, label]) => ({ value, label })),
+);
+
+const currencyAntOptions = computed(() =>
+  currencySelectOptions.value.map((o) => ({ value: o.code, label: o.label })),
+);
+
+const productSelectOptions = computed(() =>
+  filteredProducts.value.map((p) => ({ value: p.id, label: p.name })),
+);
+
+const validityDayOptions = computed(() =>
+  [7, 15, 30, 60].map((d) => ({ value: d, label: `${toFaDigits(d)} روز` })),
+);
+
+const methodSelectOptions = computed(() =>
+  (Object.entries(methodLabel) as Array<[PaymentMethod, string]>).map(
+    ([value, label]) => ({ value, label }),
+  ),
+);
+
+const payInstallmentOptions = computed(() => [
+  { value: '', label: 'بدون اتصال به قسط' },
+  ...pendingInstallments.value.map((inst) => ({
+    value: inst.id,
+    label: `قسط ${toFaDigits(inst.position + 1)} — ${formatMoney(inst.amount)}`,
+  })),
+]);
+
+const chequeStatusOptions = [
+  { value: 'pending', label: 'در جریان' },
+  { value: 'cleared', label: 'وصول شد' },
+  { value: 'bounced', label: 'برگشت' },
+];
+
+const docModeSegOptions = computed(() => {
+  const opts: Array<{ value: DocMode; label: string; disabled?: boolean }> = [
+    {
+      value: 'invoice',
+      label: 'فاکتور',
+      disabled: !isNew.value && docMode.value !== 'invoice',
+    },
+    {
+      value: 'quote',
+      label: 'پیش فاکتور',
+      disabled: !isNew.value && docMode.value !== 'quote',
+    },
+  ];
+  if (docMode.value === 'credit') {
+    opts.push({ value: 'credit', label: 'برگشتی', disabled: true });
+  }
+  return opts;
+});
+
+const sideCollapseKeys = ref<string[]>([]);
+
+const paymentsCollapseKeys = computed({
+  get: () => (showPayments.value ? ['payments'] : []),
+  set: (keys: string[]) => {
+    showPayments.value = keys.includes('payments');
+  },
+});
+
+function setLineQty(line: LineDraft, value: number | string | null) {
+  const n = Number(value);
+  line.quantity = String(Number.isFinite(n) && n > 0 ? n : 1);
+}
+
+function setLineProduct(line: LineDraft, value: unknown) {
+  line.productId = value == null ? '' : String(value);
+  onPickProduct(line);
+}
+
+function onDocModeSeg(value: string | number) {
+  switchDocMode(String(value) as DocMode);
+}
+
 onMounted(load);
 </script>
 
 <template>
-  <section class="page" :class="{ embedded }">
-    <header v-if="!embedded" class="page-head no-print">
-      <div class="head-copy">
-        <div class="title-row">
-          <span class="doc-ico">
-            <UiIcon name="document" :size="22" />
-          </span>
-          <div>
-            <h1>{{ pageTitle }}</h1>
-            <p class="sub">{{ pageSubtitle }}</p>
-          </div>
+  <div>
+    <a-flex
+      v-if="!embedded"
+      justify="space-between"
+      align="center"
+      wrap="wrap"
+      :gap="12"
+      class="no-print"
+      :style="{ marginBottom: '16px' }"
+    >
+      <a-space :size="12" align="start">
+        <FileTextOutlined />
+        <div>
+          <a-typography-title :level="3" :style="{ margin: 0 }">{{ pageTitle }}</a-typography-title>
+          <a-typography-text type="secondary">{{ pageSubtitle }}</a-typography-text>
         </div>
-      </div>
-      <button class="back-btn" type="button" @click="goBack">
-        <UiIcon name="chevron" :size="16" />
+      </a-space>
+      <a-button @click="goBack">
+        <template #icon><ArrowLeftOutlined /></template>
         بازگشت
-      </button>
-    </header>
+      </a-button>
+    </a-flex>
 
-    <p v-if="loading" class="muted center">در حال بارگذاری…</p>
+    <a-spin :spinning="loading">
+      <a-form v-if="!loading" layout="vertical" @finish="save">
+        <a-alert
+          v-if="error"
+          type="error"
+          show-icon
+          :message="error"
+          class="no-print"
+          :style="{ marginBottom: '16px' }"
+        />
 
-    <form v-else class="form" @submit.prevent="save">
-      <div class="print-banner">
-        <img :src="brand.logo" :alt="brand.name" class="print-logo" />
-        <BrandName />
-        <span v-if="number">{{ number }}</span>
-      </div>
-
-      <!-- Desktop layout -->
-      <div class="desk-layout">
-        <aside class="sidebar">
-          <div class="seg-tabs">
-            <button
-              type="button"
-              :class="{ on: docMode === 'invoice' }"
-              :disabled="!isNew && docMode !== 'invoice'"
-              @click="switchDocMode('invoice')"
-            >
-              فاکتور
-            </button>
-            <button
-              type="button"
-              :class="{ on: docMode === 'quote' }"
-              :disabled="!isNew && docMode !== 'quote'"
-              @click="switchDocMode('quote')"
-            >
-              پیش فاکتور
-            </button>
-            <button
-              v-if="docMode === 'credit'"
-              type="button"
-              :class="{ on: true }"
-              disabled
-            >
-              برگشتی
-            </button>
-          </div>
-
-          <section class="card">
-            <h2 class="card-title">
-              <span class="card-ico"><UiIcon name="layers" :size="16" /></span>
-              اطلاعات اصلی
-            </h2>
-
-            <label class="field">
-              <span>مشتری <em>*</em></span>
-              <div class="control">
-                <UiIcon name="user" :size="18" />
-                <select v-model="personId" required @change="onPersonChange">
-                  <option value="">انتخاب مشتری</option>
-                  <option v-for="p in people" :key="p.id" :value="p.id">
-                    {{ personLabel(p) }}
-                  </option>
-                </select>
-              </div>
-              <RouterLink class="add-link" :to="{ name: 'person-new' }">
-                + افزودن مشتری جدید
-              </RouterLink>
-            </label>
-
-            <label class="field">
-              <span>تاریخ <em>*</em></span>
-              <JalaliDateInput v-model="issuedAt" required />
-            </label>
-
-            <label class="field">
-              <span>وضعیت</span>
-              <div class="control">
-                <UiIcon name="flag" :size="18" />
-                <select v-model="status">
-                  <option
-                    v-for="(label, key) in statusOptions"
-                    :key="key"
-                    :value="key"
-                  >
-                    {{ label }}
-                  </option>
-                </select>
-              </div>
-            </label>
-
-            <label class="field">
-              <span>ارز</span>
-              <div class="control">
-                <UiIcon name="dollar" :size="18" />
-                <select v-model="currency">
-                  <option
-                    v-for="opt in currencySelectOptions"
-                    :key="opt.code"
-                    :value="opt.code"
-                  >
-                    {{ opt.label }}
-                  </option>
-                </select>
-              </div>
-            </label>
-
-            <template v-if="docMode === 'quote'">
-              <label class="field">
-                <span>اعتبار تا</span>
-                <select
-                  v-model.number="validityDays"
-                  @change="onValidityDaysChange"
-                >
-                  <option :value="7">{{ toFaDigits(7) }} روز</option>
-                  <option :value="15">{{ toFaDigits(15) }} روز</option>
-                  <option :value="30">{{ toFaDigits(30) }} روز</option>
-                  <option :value="60">{{ toFaDigits(60) }} روز</option>
-                </select>
-              </label>
-              <label v-if="validUntil" class="field">
-                <span>تاریخ اعتبار</span>
-                <JalaliDateInput
-                  v-model="validUntil"
-                  @update:model-value="validityMode = 'date'"
-                />
-              </label>
-            </template>
-
-            <label v-else class="field">
-              <span>مهلت پرداخت</span>
-              <JalaliDateInput v-model="dueDate" />
-            </label>
-
-            <label class="field">
-              <span>یادداشت</span>
-              <textarea
-                v-model="notes"
-                rows="3"
-                placeholder="یادداشت خود را وارد کنید..."
+        <a-row :gutter="[16, 16]">
+          <a-col :xs="24" :lg="embedded ? 24 : 17" :xl="embedded ? 24 : 18">
+            <a-card :bordered="false">
+              <a-segmented
+                class="no-print"
+                block
+                :value="docMode"
+                :options="docModeSegOptions"
+                :style="{ marginBottom: '16px' }"
+                @update:value="onDocModeSeg"
               />
-            </label>
 
-            <div class="accords">
-              <button
-                class="accord"
-                type="button"
-                @click="showExtra = !showExtra"
-              >
-                <span class="accord-lead">
-                  <UiIcon name="document" :size="16" />
-                  اطلاعات تکمیلی
-                </span>
-                <UiIcon name="chevron" :size="16" :class="{ open: showExtra }" />
-              </button>
-              <div v-if="showExtra" class="accord-body muted">
-                فیلدی برای تکمیل وجود ندارد.
-              </div>
-              <button
-                class="accord"
-                type="button"
-                @click="showShipping = !showShipping"
-              >
-                <span class="accord-lead">
-                  <UiIcon name="truck" :size="16" />
-                  آدرس و ارسال
-                </span>
-                <UiIcon
-                  name="chevron"
-                  :size="16"
-                  :class="{ open: showShipping }"
-                />
-              </button>
-              <div v-if="showShipping" class="accord-body muted">
-                فیلدی برای تکمیل وجود ندارد.
-              </div>
-            </div>
+              <a-divider orientation="right">اطلاعات اصلی</a-divider>
 
-            <div class="side-actions">
-              <button class="btn primary" type="submit" :disabled="saving">
-                <UiIcon name="check" :size="16" />
-                {{ saving ? 'در حال ذخیره…' : saveLabel }}
-              </button>
-              <button
-                v-if="!isNew"
-                class="btn danger"
-                type="button"
-                :disabled="saving"
-                @click="remove"
-              >
-                حذف
-              </button>
-            </div>
-          </section>
-        </aside>
-
-        <main class="main">
-          <section class="card products-card">
-            <div class="products-head">
-              <h2 class="card-title">
-                <span class="card-ico"><UiIcon name="box" :size="16" /></span>
-                محصولات و خدمات
-              </h2>
-              <div class="products-tools">
-                <RouterLink class="btn primary add-product" :to="{ name: 'product-new' }">
-                  + افزودن محصول
-                </RouterLink>
-                <div class="search">
-                  <UiIcon name="search" :size="16" />
-                  <input
-                    v-model="productSearch"
-                    type="search"
-                    placeholder="جستجوی محصول..."
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div class="table-wrap">
-              <table class="lines-table">
-                <thead>
-                  <tr>
-                    <th>#</th>
-                    <th>محصول</th>
-                    <th>کد</th>
-                    <th>قیمت واحد - {{ currencyLabel }}</th>
-                    <th>تعداد</th>
-                    <th>مبلغ کل - {{ currencyLabel }}</th>
-                    <th>عملیات</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(line, idx) in lines" :key="line.key">
-                    <td class="num">{{ toFaDigits(idx + 1) }}</td>
-                    <td>
-                      <div class="prod-cell">
-                        <span class="prod-thumb">
-                          <UiIcon :name="productIcon(line)" :size="18" />
-                        </span>
-                        <div class="prod-meta">
-                          <select
-                            v-model="line.productId"
-                            @change="onPickProduct(line)"
-                          >
-                            <option value="">انتخاب محصول…</option>
-                            <option
-                              v-for="p in filteredProducts"
-                              :key="p.id"
-                              :value="p.id"
-                            >
-                              {{ p.name }}
-                            </option>
-                          </select>
-                          <input
-                            v-model="line.name"
-                            class="name-input"
-                            placeholder="نام ردیف"
-                            required
-                          />
-                          <input
-                            v-model="line.description"
-                            class="desc-input"
-                            placeholder="توضیح اختیاری"
-                          />
-                        </div>
-                      </div>
-                    </td>
-                    <td class="sku" dir="ltr">{{ line.sku || '—' }}</td>
-                    <td>
-                      <MoneyInput
-                        v-model="line.unitPrice"
-                        :decimals="0"
-                        placeholder="قیمت"
+              <a-row :gutter="[16, 0]">
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="مشتری" required>
+                    <a-select
+                      v-model:value="personId"
+                      show-search
+                      option-filter-prop="label"
+                      :options="personSelectOptions"
+                      placeholder="انتخاب مشتری"
+                      style="width: 100%"
+                      @change="onPersonChange"
+                    />
+                    <RouterLink :to="{ name: 'person-new' }">
+                      <a-button type="link" style="padding-inline: 0">
+                        <template #icon><UserAddOutlined /></template>
+                        افزودن مشتری جدید
+                      </a-button>
+                    </RouterLink>
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="12">
+                  <a-form-item label="تاریخ" required>
+                    <JalaliDateInput v-model="issuedAt" required />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="8">
+                  <a-form-item label="وضعیت">
+                    <a-select
+                      v-model:value="status"
+                      :options="statusSelectOptions"
+                      style="width: 100%"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="8">
+                  <a-form-item label="ارز">
+                    <a-select
+                      v-model:value="currency"
+                      :options="currencyAntOptions"
+                      style="width: 100%"
+                    />
+                  </a-form-item>
+                </a-col>
+                <template v-if="docMode === 'quote'">
+                  <a-col :xs="24" :md="8">
+                    <a-form-item label="اعتبار تا">
+                      <a-select
+                        v-model:value="validityDays"
+                        :options="validityDayOptions"
+                        style="width: 100%"
+                        @change="onValidityDaysChange"
                       />
-                    </td>
-                    <td>
-                      <div class="stepper">
-                        <button
-                          class="step-minus"
-                          type="button"
-                          aria-label="کاهش"
-                          @click="bumpQty(line, -1)"
+                    </a-form-item>
+                  </a-col>
+                  <a-col v-if="validUntil" :xs="24" :md="8">
+                    <a-form-item label="تاریخ اعتبار">
+                      <JalaliDateInput
+                        v-model="validUntil"
+                        @update:model-value="validityMode = 'date'"
+                      />
+                    </a-form-item>
+                  </a-col>
+                </template>
+                <a-col v-else :xs="24" :md="8">
+                  <a-form-item label="مهلت پرداخت">
+                    <JalaliDateInput v-model="dueDate" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                  <a-form-item label="یادداشت">
+                    <a-textarea
+                      v-model:value="notes"
+                      :rows="3"
+                      placeholder="یادداشت خود را وارد کنید..."
+                    />
+                  </a-form-item>
+                </a-col>
+              </a-row>
+
+              <a-collapse
+                v-model:activeKey="sideCollapseKeys"
+                bordered
+                class="no-print"
+                :style="{ borderRadius: '8px', overflow: 'hidden', marginBottom: '16px' }"
+              >
+                <a-collapse-panel key="extra" header="اطلاعات تکمیلی">
+                  <a-typography-text type="secondary">فیلدی برای تکمیل وجود ندارد.</a-typography-text>
+                </a-collapse-panel>
+                <a-collapse-panel key="shipping" header="آدرس و ارسال">
+                  <a-typography-text type="secondary">فیلدی برای تکمیل وجود ندارد.</a-typography-text>
+                </a-collapse-panel>
+              </a-collapse>
+
+              <a-divider orientation="right">محصولات و خدمات</a-divider>
+
+              <a-flex
+                class="no-print"
+                justify="space-between"
+                align="center"
+                wrap="wrap"
+                :gap="8"
+                :style="{ marginBottom: '12px' }"
+              >
+                <a-space :size="8" wrap>
+                  <RouterLink :to="{ name: 'product-new' }">
+                    <a-button type="primary">
+                      <template #icon><PlusOutlined /></template>
+                      افزودن محصول
+                    </a-button>
+                  </RouterLink>
+                  <a-button @click="addLine">
+                    <template #icon><PlusOutlined /></template>
+                    افزودن ردیف
+                  </a-button>
+                </a-space>
+                <a-input
+                  v-model:value="productSearch"
+                  allow-clear
+                  placeholder="جستجوی محصول..."
+                  style="width: 220px; max-width: 100%"
+                />
+              </a-flex>
+
+              <a-flex vertical :gap="12">
+                <a-card
+                  v-for="(line, idx) in lines"
+                  :key="line.key"
+                  :bordered="true"
+                >
+                  <a-row :gutter="[16, 0]">
+                    <a-col :span="24">
+                      <a-flex justify="space-between" align="center" :style="{ marginBottom: '8px' }">
+                        <a-typography-text type="secondary">
+                          ردیف {{ toFaDigits(idx + 1) }}
+                        </a-typography-text>
+                        <a-button
+                          type="text"
+                          danger
+                          aria-label="حذف ردیف"
+                          @click="removeLine(line.key)"
                         >
-                          <UiIcon name="minus" :size="14" />
-                        </button>
-                        <strong>{{ toFaDigits(line.quantity || '0') }}</strong>
-                        <button
-                          class="step-plus"
-                          type="button"
-                          aria-label="افزایش"
-                          @click="bumpQty(line, 1)"
-                        >
-                          <UiIcon name="plus" :size="14" />
-                        </button>
-                      </div>
-                    </td>
-                    <td class="line-sum">{{ formatMoney(lineTotal(line)) }}</td>
-                    <td>
-                      <button
-                        class="icon-trash"
-                        type="button"
-                        aria-label="حذف ردیف"
-                        @click="removeLine(line.key)"
-                      >
-                        <UiIcon name="trash" :size="16" />
-                      </button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+                          <template #icon><DeleteOutlined /></template>
+                        </a-button>
+                      </a-flex>
+                    </a-col>
+                    <a-col :xs="24" :md="12">
+                      <a-form-item label="محصول">
+                        <a-select
+                          :value="line.productId || undefined"
+                          show-search
+                          allow-clear
+                          option-filter-prop="label"
+                          :options="productSelectOptions"
+                          placeholder="انتخاب محصول…"
+                          style="width: 100%"
+                          @update:value="(v) => setLineProduct(line, v)"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="12">
+                      <a-form-item label="نام ردیف" required>
+                        <a-input v-model:value="line.name" placeholder="نام ردیف" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                      <a-form-item label="توضیح">
+                        <a-input v-model:value="line.description" placeholder="توضیح اختیاری" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item :label="`قیمت واحد (${currencyLabel})`">
+                        <MoneyInput
+                          v-model="line.unitPrice"
+                          :decimals="0"
+                          placeholder="قیمت"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="تعداد">
+                        <a-input-number
+                          :value="Number(line.quantity) || 1"
+                          :min="0.01"
+                          :step="1"
+                          style="width: 100%"
+                          @update:value="(v) => setLineQty(line, v)"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item :label="`مبلغ کل (${currencyLabel})`">
+                        <a-typography-text strong>{{ formatMoney(lineTotal(line)) }}</a-typography-text>
+                        <div>
+                          <a-typography-text type="secondary" dir="ltr">
+                            {{ line.sku || '—' }}
+                          </a-typography-text>
+                        </div>
+                      </a-form-item>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-flex>
 
-            <button class="add-row" type="button" @click="addLine">
-              + افزودن ردیف جدید
-            </button>
+              <a-divider orientation="right">مبالغ</a-divider>
 
-            <div class="summary">
-              <div class="sum-row">
-                <span>جمع کل</span>
-                <strong>{{ formatMoney(subtotal) }}</strong>
-              </div>
-              <div class="sum-row">
-                <span>تخفیف</span>
-                <MoneyInput v-model="discountAmount" :decimals="0" placeholder="۰" />
-              </div>
-              <div class="sum-row">
-                <span>مالیات (%)</span>
-                <input
-                  v-model="taxPercent"
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  class="tax-input"
-                />
-              </div>
-              <div class="sum-row muted-sm">
-                <span>مبلغ مالیات</span>
-                <span>{{ formatMoney(taxAmount) }}</span>
-              </div>
-              <div class="sum-row payable">
-                <span>مبلغ قابل پرداخت</span>
-                <strong>{{ formatMoney(payableAmount) }}</strong>
-              </div>
-              <div v-if="docMode === 'invoice'" class="commission-box">
-                <div class="days-row">
-                  <button
-                    type="button"
-                    :class="{ on: commissionMode === 'percent' }"
-                    @click="commissionMode = 'percent'"
-                  >
-                    درصد
-                  </button>
-                  <button
-                    type="button"
-                    :class="{ on: commissionMode === 'amount' }"
-                    @click="commissionMode = 'amount'"
-                  >
-                    مبلغ ثابت
-                  </button>
-                </div>
-                <label v-if="commissionMode === 'percent'" class="field">
-                  <span>پورسانت کارشناس (%)</span>
-                  <input
-                    v-model="commissionPercent"
-                    type="number"
-                    min="0"
-                    max="100"
-                    step="0.1"
-                    :placeholder="String(defaultCommissionPercent || 0)"
-                  />
-                </label>
-                <label v-else class="field">
-                  <span>مبلغ پورسانت</span>
-                  <MoneyInput v-model="commissionFixedAmount" :decimals="0" />
-                </label>
-                <p class="muted-sm">
-                  برآورد پورسانت: {{ formatMoney(commissionPreview) }}
-                  <template v-if="invoice?.commission?.status === 'posted'">
-                    · ثبت‌شده {{ formatMoney(invoice.commission.amount) }}
-                  </template>
-                </p>
-              </div>
-            </div>
-          </section>
+              <a-row :gutter="[16, 0]">
+                <a-col :xs="24" :md="8">
+                  <a-form-item label="تخفیف">
+                    <MoneyInput v-model="discountAmount" :decimals="0" placeholder="۰" />
+                  </a-form-item>
+                </a-col>
+                <a-col :xs="24" :md="8">
+                  <a-form-item label="مالیات (%)">
+                    <a-input-number
+                      :value="Number(taxPercent) || 0"
+                      :min="0"
+                      :step="0.01"
+                      style="width: 100%"
+                      @update:value="(v) => (taxPercent = String(v ?? 0))"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col v-if="docMode === 'invoice'" :xs="24" :md="8">
+                  <a-form-item label="نوع پورسانت">
+                    <a-segmented
+                      v-model:value="commissionMode"
+                      block
+                      :options="[
+                        { value: 'percent', label: 'درصد' },
+                        { value: 'amount', label: 'مبلغ ثابت' },
+                      ]"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col v-if="docMode === 'invoice' && commissionMode === 'percent'" :xs="24" :md="8">
+                  <a-form-item label="پورسانت کارشناس (%)">
+                    <a-input-number
+                      :value="commissionPercent === '' ? undefined : Number(commissionPercent)"
+                      :min="0"
+                      :max="100"
+                      :step="0.1"
+                      :placeholder="String(defaultCommissionPercent || 0)"
+                      style="width: 100%"
+                      @update:value="(v) => (commissionPercent = v == null ? '' : String(v))"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col v-else-if="docMode === 'invoice'" :xs="24" :md="8">
+                  <a-form-item label="مبلغ پورسانت">
+                    <MoneyInput v-model="commissionFixedAmount" :decimals="0" />
+                  </a-form-item>
+                </a-col>
+              </a-row>
 
-          <section
-            v-if="showPaymentBlock"
-            class="card pay-card no-print"
-          >
-            <button
-              class="accord pay-toggle"
-              type="button"
-              @click="showPayments = !showPayments"
-            >
-              اقساط و پرداخت‌ها
-              <UiIcon name="chevron" :size="16" :class="{ open: showPayments }" />
-            </button>
-
-            <div v-if="showPayments" class="pay-body">
-              <div v-if="invoice" class="pay-summary">
-                <span>جمع: {{ formatMoney(invoice.payableAmount ?? invoice.totalAmount) }}</span>
-                <span>وصول: {{ formatMoney(invoice.paidAmount) }}</span>
-                <span>مانده: {{ formatMoney(invoice.remainingAmount) }}</span>
-              </div>
-
-              <div class="inst-head">
-                <h3>اقساط</h3>
-                <div class="split">
-                  <button class="btn ghost sm" type="button" @click="splitInstallments(2)">
-                    ۲ قسط
-                  </button>
-                  <button class="btn ghost sm" type="button" @click="splitInstallments(3)">
-                    ۳ قسط
-                  </button>
-                  <button class="btn ghost sm" type="button" @click="addInstallment">
-                    افزودن قسط
-                  </button>
-                </div>
-              </div>
-              <div
-                v-for="item in installments"
-                :key="item.key"
-                class="installment-row"
+              <a-collapse
+                v-if="showPaymentBlock"
+                v-model:activeKey="paymentsCollapseKeys"
+                bordered
+                class="no-print"
+                :style="{ borderRadius: '8px', overflow: 'hidden', marginTop: '8px' }"
               >
-                <JalaliDateInput v-model="item.dueDate" />
-                <MoneyInput
-                  v-model="item.amount"
-                  :decimals="0"
-                  placeholder="مبلغ قسط"
-                />
-                <button
-                  class="icon-trash"
-                  type="button"
-                  @click="removeInstallment(item.key)"
-                >
-                  <UiIcon name="trash" :size="16" />
-                </button>
-              </div>
-              <p v-if="!installments.length" class="muted">بدون برنامه اقساط.</p>
+                <a-collapse-panel key="payments" header="اقساط و پرداخت‌ها">
+                  <a-space wrap :size="12" :style="{ marginBottom: '12px' }">
+                    <a-typography-text>
+                      جمع: {{ formatMoney(invoice?.payableAmount ?? invoice?.totalAmount ?? 0) }}
+                    </a-typography-text>
+                    <a-typography-text>
+                      وصول: {{ formatMoney(invoice?.paidAmount ?? 0) }}
+                    </a-typography-text>
+                    <a-typography-text>
+                      مانده: {{ formatMoney(invoice?.remainingAmount ?? 0) }}
+                    </a-typography-text>
+                  </a-space>
 
-              <h3>ثبت پرداخت</h3>
-              <div class="pay-form">
-                <MoneyInput v-model="payAmount" :decimals="0" placeholder="مبلغ" />
-                <select v-model="payMethod">
-                  <option
-                    v-for="(label, key) in methodLabel"
-                    :key="key"
-                    :value="key"
+                  <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
+                    <a-typography-title :level="5" :style="{ margin: 0 }">اقساط</a-typography-title>
+                    <a-space wrap :size="8">
+                      <a-button @click="splitInstallments(2)">۲ قسط</a-button>
+                      <a-button @click="splitInstallments(3)">۳ قسط</a-button>
+                      <a-button @click="addInstallment">افزودن قسط</a-button>
+                    </a-space>
+                  </a-flex>
+
+                  <a-row
+                    v-for="item in installments"
+                    :key="item.key"
+                    :gutter="[16, 0]"
+                    :style="{ marginTop: '8px' }"
                   >
-                    {{ label }}
-                  </option>
-                </select>
-                <JalaliDateInput v-model="payDate" />
-                <select v-model="payInstallmentId">
-                  <option value="">بدون اتصال به قسط</option>
-                  <option
-                    v-for="inst in pendingInstallments"
-                    :key="inst.id"
-                    :value="inst.id"
+                    <a-col :xs="24" :md="10">
+                      <JalaliDateInput v-model="item.dueDate" />
+                    </a-col>
+                    <a-col :xs="24" :md="10">
+                      <MoneyInput
+                        v-model="item.amount"
+                        :decimals="0"
+                        placeholder="مبلغ قسط"
+                      />
+                    </a-col>
+                    <a-col :xs="24" :md="4">
+                      <a-button danger block @click="removeInstallment(item.key)">
+                        <template #icon><DeleteOutlined /></template>
+                      </a-button>
+                    </a-col>
+                  </a-row>
+                  <a-typography-text v-if="!installments.length" type="secondary">
+                    بدون برنامه اقساط.
+                  </a-typography-text>
+
+                  <a-typography-title :level="5" :style="{ marginTop: '16px' }">
+                    ثبت پرداخت
+                  </a-typography-title>
+                  <a-row :gutter="[16, 0]">
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="مبلغ">
+                        <MoneyInput v-model="payAmount" :decimals="0" placeholder="مبلغ" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="روش">
+                        <a-select
+                          v-model:value="payMethod"
+                          :options="methodSelectOptions"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="8">
+                      <a-form-item label="تاریخ پرداخت">
+                        <JalaliDateInput v-model="payDate" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="12">
+                      <a-form-item label="قسط">
+                        <a-select
+                          v-model:value="payInstallmentId"
+                          :options="payInstallmentOptions"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="12">
+                      <a-form-item label="یادداشت پرداخت">
+                        <a-input v-model:value="payNotes" placeholder="یادداشت پرداخت" />
+                      </a-form-item>
+                    </a-col>
+                    <template v-if="payMethod === 'check'">
+                      <a-col :xs="24" :md="8">
+                        <a-form-item label="شماره چک">
+                          <a-input v-model:value="chequeNumber" />
+                        </a-form-item>
+                      </a-col>
+                      <a-col :xs="24" :md="8">
+                        <a-form-item label="بانک">
+                          <a-input v-model:value="chequeBank" />
+                        </a-form-item>
+                      </a-col>
+                      <a-col :xs="24" :md="8">
+                        <a-form-item label="سررسید چک">
+                          <JalaliDateInput v-model="chequeDue" placeholder="سررسید چک" />
+                        </a-form-item>
+                      </a-col>
+                      <a-col :xs="24" :md="8">
+                        <a-form-item label="وضعیت چک">
+                          <a-select
+                            v-model:value="chequeStatus"
+                            :options="chequeStatusOptions"
+                            style="width: 100%"
+                          />
+                        </a-form-item>
+                      </a-col>
+                    </template>
+                    <a-col :span="24">
+                      <a-button type="primary" :loading="paying" @click="submitPayment">
+                        ثبت پرداخت
+                      </a-button>
+                    </a-col>
+                  </a-row>
+
+                  <a-flex
+                    v-for="p in invoice?.payments ?? []"
+                    :key="p.id"
+                    justify="space-between"
+                    align="center"
+                    :style="{ marginTop: '8px' }"
                   >
-                    قسط {{ toFaDigits(inst.position + 1) }} — {{ formatMoney(inst.amount) }}
-                  </option>
-                </select>
-                <input v-model="payNotes" placeholder="یادداشت پرداخت" />
-                <div v-if="payMethod === 'check'" class="cheque-fields">
-                  <input v-model="chequeNumber" placeholder="شماره چک" />
-                  <input v-model="chequeBank" placeholder="بانک" />
-                  <JalaliDateInput v-model="chequeDue" placeholder="سررسید چک" />
-                  <select v-model="chequeStatus">
-                    <option value="pending">در جریان</option>
-                    <option value="cleared">وصول شد</option>
-                    <option value="bounced">برگشت</option>
-                  </select>
-                </div>
-                <button
-                  class="btn primary"
-                  type="button"
-                  :disabled="paying"
-                  @click="submitPayment"
-                >
-                  {{ paying ? '…' : 'ثبت پرداخت' }}
-                </button>
-              </div>
-
-              <div v-if="invoice?.payments?.length" class="pay-list">
-                <div
-                  v-for="p in invoice.payments"
-                  :key="p.id"
-                  class="pay-row"
-                >
-                  <div>
-                    <strong>{{ formatMoney(p.amount) }}</strong>
-                    <span class="muted">
-                      · {{ methodLabel[p.method as PaymentMethod] || p.method }}
-                      <template v-if="p.cheque">
-                        · چک {{ p.cheque.number }} / {{ p.cheque.bank }}
-                      </template>
-                      · {{ p.paidAt.slice(0, 10) }}
-                    </span>
-                  </div>
-                  <button
-                    class="btn ghost sm"
-                    type="button"
-                    @click="removePayment(p.id)"
+                    <div>
+                      <a-typography-text strong>{{ formatMoney(p.amount) }}</a-typography-text>
+                      <a-typography-text type="secondary">
+                        · {{ methodLabel[p.method as PaymentMethod] || p.method }}
+                        <template v-if="p.cheque">
+                          · چک {{ p.cheque.number }} / {{ p.cheque.bank }}
+                        </template>
+                        · {{ p.paidAt.slice(0, 10) }}
+                      </a-typography-text>
+                    </div>
+                    <a-button type="link" danger @click="removePayment(p.id)">حذف</a-button>
+                  </a-flex>
+                  <a-typography-text
+                    v-if="!(invoice?.payments?.length)"
+                    type="secondary"
                   >
-                    حذف
-                  </button>
-                </div>
-              </div>
-              <p v-else class="muted">هنوز پرداختی ثبت نشده.</p>
-            </div>
-          </section>
-        </main>
-      </div>
+                    هنوز پرداختی ثبت نشده.
+                  </a-typography-text>
+                </a-collapse-panel>
+              </a-collapse>
 
-      <!-- Mobile layout -->
-      <div class="mob-layout no-print">
-        <div v-show="mobileStep === 1" class="mob-step">
-          <div class="seg-tabs">
-            <button
-              type="button"
-              :class="{ on: docMode === 'invoice' }"
-              :disabled="!isNew && docMode !== 'invoice'"
-              @click="switchDocMode('invoice')"
-            >
-              فاکتور
-            </button>
-            <button
-              type="button"
-              :class="{ on: docMode === 'quote' }"
-              :disabled="!isNew && docMode !== 'quote'"
-              @click="switchDocMode('quote')"
-            >
-              پیش فاکتور
-            </button>
-            <button
-              v-if="docMode === 'credit'"
-              type="button"
-              :class="{ on: true }"
-              disabled
-            >
-              برگشتی
-            </button>
-          </div>
-
-          <section class="card">
-            <h2 class="card-title">
-              <span class="card-ico"><UiIcon name="layers" :size="16" /></span>
-              اطلاعات
-            </h2>
-
-            <label class="field">
-              <span>مشتری <em>*</em></span>
-              <div class="control">
-                <UiIcon name="user" :size="18" />
-                <select v-model="personId" required @change="onPersonChange">
-                  <option value="">انتخاب مشتری</option>
-                  <option v-for="p in people" :key="p.id" :value="p.id">
-                    {{ personLabel(p) }}
-                  </option>
-                </select>
-              </div>
-              <RouterLink class="add-link" :to="{ name: 'person-new' }">
-                + افزودن مشتری جدید
-              </RouterLink>
-            </label>
-
-            <label class="field">
-              <span>تاریخ <em>*</em></span>
-              <JalaliDateInput v-model="issuedAt" required />
-            </label>
-
-            <label class="field">
-              <span>وضعیت</span>
-              <div class="control">
-                <UiIcon name="flag" :size="18" />
-                <select v-model="status">
-                  <option
-                    v-for="(label, key) in statusOptions"
-                    :key="key"
-                    :value="key"
-                  >
-                    {{ label }}
-                  </option>
-                </select>
-              </div>
-            </label>
-
-            <label class="field">
-              <span>ارز</span>
-              <div class="control">
-                <UiIcon name="dollar" :size="18" />
-                <select v-model="currency">
-                  <option
-                    v-for="opt in currencySelectOptions"
-                    :key="opt.code"
-                    :value="opt.code"
-                  >
-                    {{ opt.label }}
-                  </option>
-                </select>
-              </div>
-            </label>
-
-            <template v-if="docMode === 'quote'">
-              <label class="field">
-                <span>اعتبار تا</span>
-                <JalaliDateInput
-                  v-model="validUntil"
-                  @update:model-value="validityMode = 'date'"
-                />
-              </label>
-              <label class="field">
-                <span>مدت اعتبار</span>
-                <select
-                  v-model.number="validityDays"
-                  @change="onValidityDaysChange"
-                >
-                  <option :value="7">{{ toFaDigits(7) }} روز</option>
-                  <option :value="15">{{ toFaDigits(15) }} روز</option>
-                  <option :value="30">{{ toFaDigits(30) }} روز</option>
-                  <option :value="60">{{ toFaDigits(60) }} روز</option>
-                </select>
-              </label>
-            </template>
-            <label v-else class="field">
-              <span>مهلت پرداخت</span>
-              <JalaliDateInput v-model="dueDate" />
-            </label>
-
-            <label class="field">
-              <span>یادداشت</span>
-              <textarea
-                v-model="notes"
-                rows="3"
-                placeholder="یادداشت خود را وارد کنید..."
-              />
-            </label>
-
-            <div class="accords">
-              <button
-                class="accord"
-                type="button"
-                @click="showExtra = !showExtra"
+              <a-space
+                v-if="!embedded"
+                class="no-print"
+                wrap
+                :size="8"
+                :style="{ marginTop: '16px' }"
               >
-                <span class="accord-lead">
-                  <UiIcon name="document" :size="16" />
-                  اطلاعات تکمیلی
-                </span>
-                <UiIcon name="chevron" :size="16" :class="{ open: showExtra }" />
-              </button>
-              <div v-if="showExtra" class="accord-body muted">
-                فیلدی برای تکمیل وجود ندارد.
-              </div>
-              <button
-                class="accord"
-                type="button"
-                @click="showShipping = !showShipping"
-              >
-                <span class="accord-lead">
-                  <UiIcon name="truck" :size="16" />
-                  آدرس و ارسال
-                </span>
-                <UiIcon
-                  name="chevron"
-                  :size="16"
-                  :class="{ open: showShipping }"
-                />
-              </button>
-              <div v-if="showShipping" class="accord-body muted">
-                فیلدی برای تکمیل وجود ندارد.
-              </div>
-            </div>
-          </section>
-
-          <div class="mob-bar">
-            <button
-              class="mob-back"
-              type="button"
-              aria-label="بازگشت"
-              @click="goBack"
-            >
-              <UiIcon name="chevron" :size="18" />
-            </button>
-            <button class="btn primary mob-continue" type="button" @click="mobileStep = 2">
-              ادامه به محصولات →
-            </button>
-          </div>
-        </div>
-
-        <div v-show="mobileStep === 2" class="mob-step">
-          <button
-            class="mob-back step2-back"
-            type="button"
-            aria-label="بازگشت به اطلاعات"
-            @click="mobileStep = 1"
-          >
-            <UiIcon name="chevron" :size="18" />
-          </button>
-
-          <section class="card">
-            <div class="mob-products-head">
-              <h2 class="card-title">
-                <span class="card-ico"><UiIcon name="box" :size="16" /></span>
-                محصولات و خدمات
-                <span class="count-badge">{{ toFaDigits(lines.length) }} مورد</span>
-              </h2>
-              <button
-                class="btn primary icon-add"
-                type="button"
-                aria-label="افزودن محصول"
-                @click="addLine"
-              >
-                <UiIcon name="plus" :size="18" />
-              </button>
-            </div>
-
-            <div class="search">
-              <UiIcon name="search" :size="16" />
-              <input
-                v-model="productSearch"
-                type="search"
-                placeholder="جستجوی محصول..."
-              />
-            </div>
-
-            <article
-              v-for="(line, idx) in lines"
-              :key="line.key"
-              class="mob-line"
-            >
-              <div class="mob-line-top">
-                <span class="prod-thumb">
-                  <UiIcon :name="productIcon(line)" :size="18" />
-                </span>
-                <strong>{{ toFaDigits(idx + 1) }}</strong>
-                <button
-                  class="icon-trash"
-                  type="button"
-                  @click="removeLine(line.key)"
+                <a-button @click="printDoc">
+                  <template #icon><EyeOutlined /></template>
+                  پیش‌نمایش
+                </a-button>
+                <a-button
+                  v-if="!isNew"
+                  danger
+                  :disabled="saving"
+                  @click="remove"
                 >
-                  <UiIcon name="trash" :size="16" />
-                </button>
-              </div>
-              <select v-model="line.productId" @change="onPickProduct(line)">
-                <option value="">انتخاب محصول…</option>
-                <option
-                  v-for="p in filteredProducts"
-                  :key="p.id"
-                  :value="p.id"
-                >
-                  {{ p.name }}
-                </option>
-              </select>
-              <input v-model="line.name" placeholder="نام ردیف" required />
-              <div class="mob-line-grid">
-                <div class="mob-unit">
-                  <span class="muted-sm">قیمت واحد - {{ currencyLabel }}</span>
-                  <MoneyInput
-                    v-model="line.unitPrice"
-                    :decimals="0"
-                    placeholder="قیمت واحد"
-                  />
-                </div>
-                <div class="stepper">
-                  <button
-                    class="step-minus"
-                    type="button"
-                    @click="bumpQty(line, -1)"
-                  >
-                    <UiIcon name="minus" :size="14" />
-                  </button>
-                  <strong>{{ toFaDigits(line.quantity || '0') }}</strong>
-                  <button
-                    class="step-plus"
-                    type="button"
-                    @click="bumpQty(line, 1)"
-                  >
-                    <UiIcon name="plus" :size="14" />
-                  </button>
-                </div>
-              </div>
-              <p class="mob-total">
-                مبلغ کل: {{ formatMoney(lineTotal(line)) }}
-              </p>
-            </article>
+                  <template #icon><DeleteOutlined /></template>
+                  حذف
+                </a-button>
+                <a-button type="primary" html-type="submit" :loading="saving">
+                  <template #icon><CheckOutlined /></template>
+                  {{ saveLabel }}
+                </a-button>
+              </a-space>
 
-            <button class="add-row" type="button" @click="addLine">
-              + افزودن محصول دیگر
-            </button>
+              <a-space
+                v-if="embedded"
+                class="no-print"
+                wrap
+                :size="8"
+                :style="{ marginTop: '16px' }"
+              >
+                <a-button type="primary" :loading="saving" @click="save">ذخیره</a-button>
+                <a-button :disabled="saving" @click="goBack">انصراف</a-button>
+              </a-space>
+            </a-card>
+          </a-col>
 
-            <div class="summary">
-              <div class="sum-row">
-                <span>جمع کل</span>
-                <strong>{{ formatMoney(subtotal) }}</strong>
-              </div>
-              <div class="sum-row">
-                <span>تخفیف</span>
-                <MoneyInput v-model="discountAmount" :decimals="0" />
-              </div>
-              <div class="sum-row">
-                <span>مالیات (%)</span>
-                <input
-                  v-model="taxPercent"
-                  type="number"
-                  min="0"
-                  step="0.01"
-                  class="tax-input"
-                />
-              </div>
-              <div class="sum-row payable">
-                <span>مبلغ قابل پرداخت</span>
-                <strong>{{ formatMoney(payableAmount) }}</strong>
-              </div>
-              <div v-if="docMode === 'invoice'" class="commission-box">
-                <label class="field">
-                  <span>پورسانت کارشناس (%)</span>
-                  <input
-                    v-model="commissionPercent"
-                    type="number"
-                    min="0"
-                    max="100"
-                    step="0.1"
-                  />
-                </label>
-                <p class="muted-sm">برآورد: {{ formatMoney(commissionPreview) }}</p>
-              </div>
-            </div>
-          </section>
+          <a-col v-if="!embedded" :xs="24" :lg="7" :xl="6" class="no-print">
+            <a-affix :offset-top="24">
+              <a-card :bordered="false" title="خلاصه">
+                <a-descriptions :column="1" size="small" bordered>
+                  <a-descriptions-item label="جمع کل">
+                    {{ formatMoney(subtotal) }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="تخفیف">
+                    {{ formatMoney(discountNum) }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="مالیات">
+                    {{ formatMoney(taxAmount) }}
+                  </a-descriptions-item>
+                  <a-descriptions-item label="قابل پرداخت">
+                    {{ formatMoney(payableAmount) }}
+                  </a-descriptions-item>
+                  <a-descriptions-item v-if="docMode === 'invoice'" label="برآورد پورسانت">
+                    {{ formatMoney(commissionPreview) }}
+                    <template v-if="invoice?.commission?.status === 'posted'">
+                      · ثبت‌شده {{ formatMoney(invoice.commission.amount) }}
+                    </template>
+                  </a-descriptions-item>
+                </a-descriptions>
+              </a-card>
+            </a-affix>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-spin>
 
-          <div class="mob-bar">
-            <button class="btn ghost" type="button" @click="printDoc">
-              <UiIcon name="eye" :size="16" />
-              پیش‌نمایش
-            </button>
-            <button class="btn primary mob-continue" type="submit" :disabled="saving">
-              <UiIcon name="check" :size="16" />
-              {{ saving ? 'در حال ذخیره…' : saveLabel }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <p v-if="error" class="error no-print">{{ error }}</p>
-
-      <footer class="form-foot no-print">
-        <button class="btn ghost" type="button" @click="printDoc">
-          <UiIcon name="eye" :size="16" />
-          پیش‌نمایش
-        </button>
-        <button
-          v-if="!isNew"
-          class="btn danger"
-          type="button"
-          :disabled="saving"
-          @click="remove"
-        >
-          حذف
-        </button>
-        <button class="btn primary" type="submit" :disabled="saving">
-          <UiIcon name="check" :size="16" />
-          {{ saving ? 'در حال ذخیره…' : saveLabel }}
-        </button>
-      </footer>
-    </form>
-
-    <!-- Embedded Modal Actions (Fixed at bottom) -->
-    <div v-if="embedded" class="embed-actions no-print">
-      <button class="btn primary" type="button" :disabled="saving" @click="save">
-        {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-      </button>
-      <button class="btn cancel" type="button" :disabled="saving" @click="goBack">انصراف</button>
-    </div>
-  </section>
+    <InvoiceDocPreview
+      v-model:open="previewOpen"
+      :doc-mode="docMode"
+      :org-name="orgName"
+      :number="number"
+      :title="title"
+      :status-label="previewStatusLabel"
+      :issued-at="issuedAt"
+      :due-or-valid="docMode === 'quote' ? validUntil : dueDate"
+      :due-or-valid-label="docMode === 'quote' ? 'اعتبار تا' : 'مهلت پرداخت'"
+      :customer-name="previewCustomer.name"
+      :customer-sub="previewCustomer.sub"
+      :notes="notes"
+      :currency="currency"
+      :lines="previewLines"
+      :subtotal="previewSubtotal"
+      :discount="discountNum"
+      :tax-amount="previewTaxAmount"
+      :tax-percent="taxPercentNum"
+      :payable="previewPayable"
+    />
+  </div>
 </template>
 
-<style scoped>
-.page {
-  --teal: #0d9488;
-  --teal-soft: #f0fdfa;
-  --teal-border: #99f6e4;
-  --ink: #0f172a;
-  --muted: #64748b;
-  --line: #e2e8f0;
-  --card: #fff;
-  --radius: 10px;
-  display: grid;
-  gap: 1rem;
-  min-width: 0;
-  width: 100%;
-  max-width: 100%;
-}
-
-.page.embedded {
-  --radius: 10px;
-  max-width: none;
-}
-
-.embed-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.page-head {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.75rem;
-}
-
-.back-btn {
-  width: fit-content;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  color: #334155;
-  border-radius: var(--radius);
-  min-height: var(--control-h);
-  height: var(--control-h);
-  padding: 0 0.85rem;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-.back-btn :deep(.ico) {
-  transform: rotate(90deg);
-}
-
-.title-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.doc-ico {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius);
-  display: grid;
-  place-items: center;
-  background: var(--teal-soft);
-  color: var(--teal);
-  flex-shrink: 0;
-}
-
-h1 {
-  margin: 0;
-  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
-  font-weight: 600;
-  color: var(--ink);
-}
-
-.sub {
-  margin: 0.15rem 0 0;
-  color: var(--muted);
-  font-size: 0.88rem;
-}
-
-.form {
-  display: grid;
-  gap: 1rem;
-}
-
-.desk-layout {
-  display: none;
-  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
-  gap: 1rem;
-  align-items: start;
-}
-
-.mob-layout {
-  display: grid;
-  gap: 1rem;
-}
-
-.card {
-  background: var(--card);
-  border-radius: var(--radius);
-  padding: 1rem;
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
-  border: 1px solid #f1f5f9;
-  display: grid;
-  gap: 0.85rem;
-}
-
-.card-title {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.card-ico {
-  width: 30px;
-  height: 30px;
-  border-radius: var(--radius);
-  display: grid;
-  place-items: center;
-  background: var(--teal-soft);
-  color: var(--teal);
-}
-
-.seg-tabs {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  gap: 0.3rem;
-  padding: 0.2rem;
-  border-radius: var(--radius);
-  background: #f8fafc;
-  margin-bottom: 0.15rem;
-}
-
-.seg-tabs button {
-  min-height: var(--control-h);
-  height: var(--control-h);
-  border: 0;
-  border-radius: var(--radius);
-  background: transparent;
-  color: #64748b;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.seg-tabs button.on {
-  background: #0d9488;
-  color: #fff;
-}
-
-.seg-tabs button:disabled:not(.on) {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.field {
-  display: grid;
-  gap: 0.35rem;
-}
-
-.field > span {
-  color: var(--muted);
-  font-size: 0.86rem;
-  font-weight: 600;
-}
-
-.field em {
-  color: #ef4444;
-  font-style: normal;
-  margin-inline-start: 0.15rem;
-}
-
-.control {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.control > :deep(.ico),
-.control > .ico {
-  position: absolute;
-  inset-inline-start: 0.75rem;
-  color: #94a3b8;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.control input,
-.control select,
-.field > select,
-.field textarea,
-.search input,
-.mob-line input,
-.mob-line select,
-.pay-form input,
-.pay-form select,
-.installment-row input,
-.lines-table input,
-.lines-table select,
-.tax-input,
-.summary :deep(input) {
-  width: 100%;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  min-height: var(--control-h);
-  height: var(--control-h);
-  padding: 0 0.85rem;
-  font: inherit;
-  background: #fff;
-  color: var(--ink);
-  box-sizing: border-box;
-}
-
-.field textarea {
-  height: auto;
-  min-height: 5.5rem;
-  padding: 0.65rem 0.85rem;
-}
-
-.control input,
-.control select {
-  padding-inline-start: 2.4rem;
-}
-
-.add-link {
-  color: var(--teal);
-  font-size: 0.82rem;
-  font-weight: 700;
-  text-decoration: none;
-  width: fit-content;
-}
-
-.validity-seg,
-.days-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-}
-
-.validity-seg button,
-.days-row button {
-  flex: 1;
-  min-width: 4.2rem;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: #fff;
-  font: inherit;
-  font-weight: 700;
-  color: #64748b;
-  cursor: pointer;
-}
-
-.validity-seg button.on,
-.days-row button.on {
-  border-color: var(--teal-border);
-  background: var(--teal-soft);
-  color: var(--teal);
-}
-
-.accords {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.accord {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid #eef2f6;
-  background: #f8fafc;
-  border-radius: var(--radius);
-  min-height: var(--control-h);
-  padding: 0 0.85rem;
-  font: inherit;
-  font-weight: 600;
-  color: var(--ink);
-  cursor: pointer;
-}
-
-.accord-lead {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-}
-
-.accord-lead :deep(.ico) {
-  color: var(--teal);
-  transform: none;
-}
-
-.accord > :deep(.ico) {
-  color: var(--teal);
-  transform: rotate(-90deg);
-  transition: transform 0.15s ease;
-}
-
-.accord > :deep(.ico.open) {
-  transform: rotate(90deg);
-}
-
-.accord-body {
-  padding: 0.35rem 0.5rem 0.15rem;
-  font-size: 0.85rem;
-}
-
-.side-actions {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  padding: 0 0.95rem;
-  border-radius: var(--radius);
-  border: 1px solid transparent;
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  text-decoration: none;
-  box-sizing: border-box;
-}
-
-.btn.cancel {
-  background: #fff;
-  color: #64748b;
-  border-color: var(--line);
-}
-
-.btn.primary {
-  background: var(--teal);
-  color: #fff;
-}
-
-.btn.ghost {
-  background: #fff;
-  color: var(--teal);
-  border-color: var(--teal-border);
-}
-
-.btn.danger {
-  background: #fff;
-  color: #b42318;
-  border-color: #fecaca;
-}
-
-.btn.sm {
-  min-height: var(--control-h);
-  height: var(--control-h);
-  padding: 0 0.7rem;
-  font-size: 0.85rem;
-}
-
-.btn.full {
-  width: 100%;
-}
-
-.btn:disabled {
-  opacity: 0.65;
-  cursor: not-allowed;
-}
-
-.products-head {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.products-tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.search {
-  position: relative;
-  min-width: min(100%, 220px);
-}
-
-.search :deep(.ico) {
-  position: absolute;
-  inset-inline-start: 0.7rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #94a3b8;
-}
-
-.search input {
-  padding-inline-start: 2.2rem;
-}
-
-.table-wrap {
-  overflow: auto;
-}
-
-.lines-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 720px;
-}
-
-.lines-table th {
-  text-align: start;
-  font-size: 0.78rem;
-  color: var(--muted);
-  font-weight: 700;
-  padding: 0.45rem 0.4rem;
-  border-bottom: 1px solid var(--line);
-  white-space: nowrap;
-}
-
-.lines-table td {
-  padding: 0.65rem 0.4rem;
-  border-bottom: 1px solid #f1f5f9;
-  vertical-align: middle;
-}
-
-.num {
-  color: var(--muted);
-  font-weight: 700;
-  width: 2rem;
-}
-
-.prod-cell {
-  display: flex;
-  gap: 0.55rem;
-  align-items: flex-start;
-  min-width: 220px;
-}
-
-.prod-thumb {
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius);
-  display: grid;
-  place-items: center;
-  background: var(--teal-soft);
-  color: var(--teal);
-  flex-shrink: 0;
-}
-
-.prod-meta {
-  display: grid;
-  gap: 0.3rem;
-  flex: 1;
-  min-width: 0;
-}
-
-.name-input,
-.desc-input {
-  font-size: 0.85rem;
-}
-
-.desc-input {
-  color: var(--muted);
-}
-
-.sku {
-  color: var(--muted);
-  font-size: 0.85rem;
-  white-space: nowrap;
-}
-
-.stepper {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 110px;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.15rem;
-  background: #fff;
-}
-
-.stepper button {
-  width: 32px;
-  height: 32px;
-  border: 0;
-  border-radius: var(--radius);
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.stepper .step-minus {
-  background: #f1f5f9;
-  color: #64748b;
-}
-
-.stepper .step-plus {
-  background: var(--teal);
-  color: #fff;
-}
-
-.stepper strong {
-  font-size: 0.92rem;
-  min-width: 1.5rem;
-  text-align: center;
-}
-
-.line-sum {
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.icon-trash {
-  width: 36px;
-  height: 36px;
-  border: 0;
-  border-radius: var(--radius);
-  background: #fff1f2;
-  color: #e11d48;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-}
-
-.add-row {
-  width: 100%;
-  min-height: var(--control-h);
-  height: var(--control-h);
-  border: 1.5px dashed var(--teal-border);
-  border-radius: var(--radius);
-  background: var(--teal-soft);
-  color: var(--teal);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.summary {
-  display: grid;
-  gap: 0.55rem;
-  margin-top: 0.25rem;
-  padding: 0.85rem;
-  border-radius: var(--radius);
-  background: #f8fafc;
-  max-width: 360px;
-  margin-inline-start: auto;
-  width: 100%;
-}
-
-.sum-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  font-size: 0.92rem;
-}
-
-.sum-row :deep(input),
-.sum-row .tax-input {
-  max-width: 140px;
-  text-align: start;
-}
-
-.sum-row.payable {
-  margin-top: 0.2rem;
-  padding: 0.75rem 0.85rem;
-  border-radius: var(--radius);
-  background: var(--teal-soft);
-  color: var(--teal);
-  border: 1px solid var(--teal-border);
-}
-
-.sum-row.payable strong {
-  font-size: 1.05rem;
-  color: var(--teal);
-}
-
-.muted-sm {
-  color: var(--muted);
-  font-size: 0.82rem;
-}
-
-.form-foot {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.55rem;
-  justify-content: flex-end;
-  padding-top: 0.25rem;
-}
-
-.error {
-  color: #b42318;
-  margin: 0;
-  font-weight: 700;
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.center {
-  text-align: center;
-}
-
-.mob-step {
-  display: grid;
-  gap: 0.85rem;
-}
-
-.mob-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-  position: sticky;
-  bottom: calc(0.5rem + var(--mobile-tabbar-h));
-  padding: 0.35rem 0;
-  background: linear-gradient(to top, #f8fafc 70%, transparent);
-}
-
-.mob-continue {
-  flex: 1;
-}
-
-.mob-products-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.count-badge {
-  margin-inline-start: 0.35rem;
-  padding: 0.15rem 0.55rem;
-  border-radius: 999px;
-  background: var(--teal-soft);
-  color: var(--teal);
-  font-size: 0.75rem;
-  font-weight: 600;
-}
-
-.icon-add {
-  width: var(--control-h);
-  min-height: var(--control-h);
-  height: var(--control-h);
-  padding: 0;
-  border-radius: var(--radius);
-}
-
-.mob-unit {
-  display: grid;
-  gap: 0.25rem;
-  min-width: 0;
-}
-
-.step2-back {
-  margin-bottom: 0.15rem;
-}
-
-.mob-back {
-  width: var(--control-h);
-  height: var(--control-h);
-  border-radius: var(--radius);
-  border: 1px solid var(--line);
-  background: #fff;
-  color: var(--teal);
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.mob-back :deep(.ico) {
-  transform: rotate(90deg);
-}
-
-.mob-line {
-  display: grid;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid #eef2f6;
-  border-radius: var(--radius);
-  background: #fff;
-}
-
-.mob-line-top {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-}
-
-.mob-line-top .icon-trash {
-  margin-inline-start: auto;
-}
-
-.mob-line-grid {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.mob-total {
-  margin: 0;
-  font-weight: 600;
-  color: var(--ink);
-}
-
-.pay-card {
-  gap: 0.65rem;
-}
-
-.pay-toggle {
-  margin: 0;
-}
-
-.pay-body {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.pay-summary {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.85rem;
-  font-weight: 700;
-  font-size: 0.9rem;
-}
-
-.inst-head {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.inst-head h3,
-.pay-body h3 {
-  margin: 0;
-  font-size: 0.95rem;
-}
-
-.split {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-}
-
-.installment-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr auto;
-  gap: 0.45rem;
-  align-items: center;
-}
-
-.pay-form {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.5rem;
-}
-
-.cheque-fields,
-.commission-box {
-  grid-column: 1 / -1;
-  display: grid;
-  gap: 0.45rem;
-}
-
-.commission-box {
-  margin-top: 0.45rem;
-  padding-top: 0.55rem;
-  border-top: 1px dashed var(--line);
-}
-
-.pay-list {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.pay-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.65rem 0.8rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: #f8fafc;
-}
-
-.print-banner {
-  display: none;
-}
-
-@media (min-width: 960px) {
-  .desk-layout {
-    display: grid;
-  }
-
-  .mob-layout {
-    display: none;
-  }
-}
-
-@media (max-width: 959px) {
-  .form-foot {
-    display: none;
-  }
-
-  .side-actions {
-    display: none;
-  }
-
-  .page.embedded .embed-actions {
-    display: none !important;
-  }
-
-  .page.embedded .mob-bar {
-    bottom: 0;
-    margin-inline: -0.15rem;
-    padding: 0.65rem 0 calc(0.65rem + env(safe-area-inset-bottom));
-    background: #fff;
-    border-top: 1px solid #f1f5f9;
-    z-index: 3;
-  }
-}
-
-@media (max-width: 700px) {
-  .pay-form,
-  .installment-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media print {
-  .no-print {
-    display: none !important;
-  }
-
-  .desk-layout {
-    display: grid !important;
-  }
-
-  .mob-layout {
-    display: none !important;
-  }
-
-  .print-banner {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    justify-content: space-between;
-    border-bottom: 1px solid #ccc;
-    padding-bottom: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .print-logo {
-    width: 36px;
-    height: 36px;
-    object-fit: contain;
-    border-radius: var(--radius);
-  }
-
-  .page {
-    max-width: none;
-  }
-
-  .card {
-    box-shadow: none;
-    border: 0;
-    padding: 0;
-  }
-
-  input,
-  select,
-  textarea {
-    border: 0 !important;
-    padding: 0.2rem 0 !important;
-  }
-}
-</style>
diff --git a/apps/web/src/views/InvoicesView.vue b/apps/web/src/views/InvoicesView.vue
index bdc0cd9..67cd985 100644
--- a/apps/web/src/views/InvoicesView.vue
+++ b/apps/web/src/views/InvoicesView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
-import { useEscClose } from '@/lib/modal-stack';
 import { matchesSearch } from '@/lib/search';
 import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
 import { PAGE_SIZE_OPTIONS, usePageSize } from '@/lib/pageSize';
@@ -13,16 +12,41 @@ import {
   toFaDigits,
 } from '@/lib/jalali';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
-import {
-  UiButton,
-  UiDropdownMenu,
-  UiModal,
-  UiPageHeader,
-  UiPagination,
-  UiEmptyState,
-} from '@/components/ui';
-import UiIcon from '@/components/UiIcon.vue';
 import InvoiceFormView from '@/views/InvoiceFormView.vue';
+import { registerTableColumns, useTableColumns } from '@/lib/tableColumns';
+import {
+  Alert as AAlert,
+  Avatar as AAvatar,
+  Button as AButton,
+  Card as ACard,
+  Col as ACol,
+  Drawer as ADrawer,
+  Dropdown as ADropdown,
+  Empty as AEmpty,
+  Flex as AFlex,
+  FormItem as AFormItem,
+  Input as AInput,
+  InputNumber as AInputNumber,
+  Menu as AMenu,
+  Modal as AModal,
+  Pagination as APagination,
+  Row as ARow,
+  Select as ASelect,
+  Space as ASpace,
+  Spin as ASpin,
+  Table as ATable,
+  Tag as ATag,
+  Typography,
+} from 'ant-design-vue';
+import type { TableColumnsType } from 'ant-design-vue';
+import {
+  DownOutlined,
+  EyeOutlined,
+  FilterOutlined,
+  MoreOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from '@ant-design/icons-vue';
 import type {
   InvoiceDto,
   PaginatedResponse,
@@ -30,6 +54,9 @@ import type {
   QuoteDto,
 } from '@mento/shared';
 
+const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
+const AMenuItem = AMenu.Item;
+
 type DocTab = 'all' | 'invoice' | 'quote' | 'credit';
 type PayFilter = 'all' | 'paid' | 'unpaid' | 'pending' | 'expired';
 
@@ -51,6 +78,21 @@ type BillingRow = {
   href: { name: string; params: { id: string } };
 };
 
+const INVOICE_COL_LABELS = [
+  'شماره فاکتور',
+  'تاریخ',
+  'مشتری',
+  'نوع',
+  'وضعیت',
+  'مبلغ کل',
+  'ارز',
+  'مهلت پرداخت',
+  'عملیات',
+] as const;
+
+registerTableColumns('invoices', [...INVOICE_COL_LABELS]);
+const tableCols = useTableColumns(() => 'invoices');
+
 const route = useRoute();
 const router = useRouter();
 
@@ -82,7 +124,6 @@ const pageSize = usePageSize('invoices', 10);
 const selected = ref<Set<string>>(new Set());
 const menuId = ref<string | null>(null);
 const filterSheet = ref(false);
-useEscClose(() => filterSheet.value, () => { filterSheet.value = false; });
 const addOpen = ref(false);
 const invoiceModal = ref<{ kind: 'invoice' | 'credit' | 'quote' } | null>(null);
 
@@ -237,6 +278,15 @@ function statusIcon(key: BillingRow['statusKey']) {
   return 'document' as const;
 }
 
+function statusColor(key: BillingRow['statusKey']) {
+  const icon = statusIcon(key);
+  if (icon === 'check') return 'success';
+  if (icon === 'clock') return 'processing';
+  if (icon === 'warning') return 'warning';
+  if (icon === 'minus') return 'error';
+  return 'default';
+}
+
 function formatDate(iso: string | null | undefined) {
   if (!iso) return '—';
   try {
@@ -339,276 +389,351 @@ watch(
 );
 
 onMounted(load);
+
+const docTabOptions = computed(() => [
+  { value: 'all', label: `همه (${toFaDigits(counts.value.all)})` },
+  { value: 'invoice', label: `فاکتور (${toFaDigits(counts.value.invoice)})` },
+  { value: 'quote', label: `پیش فاکتور (${toFaDigits(counts.value.quote)})` },
+  { value: 'credit', label: `فاکتور برگشتی (${toFaDigits(counts.value.credit)})` },
+]);
+
+const payFilterOptions = [
+  { value: 'all', label: 'همه وضعیت‌ها' },
+  { value: 'paid', label: 'پرداخت شده' },
+  { value: 'unpaid', label: 'پرداخت نشده' },
+  { value: 'pending', label: 'در انتظار تایید' },
+  { value: 'expired', label: 'منقضی شده' },
+];
+
+const personOptions = computed(() =>
+  people.value.map((p) => ({
+    value: p.id,
+    label: p.fullName || `${p.firstName} ${p.lastName}`,
+  })),
+);
+
+const modalTitle = computed(() => {
+  if (invoiceModal.value?.kind === 'quote') return 'پیش فاکتور جدید';
+  if (invoiceModal.value?.kind === 'credit') return 'فاکتور برگشتی';
+  return 'فاکتور جدید';
+});
+
+const selectedKeys = computed({
+  get: () => [...selected.value],
+  set: (keys: string[]) => {
+    selected.value = new Set(keys);
+  },
+});
+
+const columns = computed<TableColumnsType<BillingRow>>(() => {
+  const all: TableColumnsType<BillingRow> = [
+    {
+      title: '#',
+      key: 'index',
+      width: 56,
+      customRender: ({ index }) =>
+        toFaDigits((page.value - 1) * pageSize.value + index + 1),
+    },
+    {
+      title: 'شماره فاکتور',
+      dataIndex: 'number',
+      key: 'شماره فاکتور',
+      customRender: ({ text }) => ({
+        children: text,
+        props: { dir: 'ltr' },
+      }),
+    },
+    {
+      title: 'تاریخ',
+      key: 'تاریخ',
+      customRender: ({ record }) => formatDate(record.date),
+    },
+    {
+      title: 'مشتری',
+      key: 'مشتری',
+    },
+    {
+      title: 'نوع',
+      key: 'نوع',
+      customRender: ({ record }) => docLabel(record.doc),
+    },
+    {
+      title: 'وضعیت',
+      key: 'وضعیت',
+    },
+    {
+      title: 'مبلغ کل',
+      key: 'مبلغ کل',
+    },
+    {
+      title: 'ارز',
+      dataIndex: 'currency',
+      key: 'ارز',
+    },
+    {
+      title: 'مهلت پرداخت',
+      key: 'مهلت پرداخت',
+      customRender: ({ record }) => formatDate(record.dueOrValid),
+    },
+    {
+      title: 'عملیات',
+      key: 'عملیات',
+      fixed: 'left',
+    },
+  ];
+  return all.filter((col) => {
+    const key = String(col.key ?? '');
+    if (key === 'index') return true;
+    if (!INVOICE_COL_LABELS.includes(key as (typeof INVOICE_COL_LABELS)[number])) {
+      return true;
+    }
+    return tableCols.isVisible(key);
+  });
+});
+
+function onAddMenu({ key }: { key: string | number }) {
+  const kind = String(key) as 'invoice' | 'quote' | 'credit';
+  invoiceModal.value = { kind };
+  addOpen.value = false;
+}
+
+function onRowMenu({ key }: { key: string | number }, row: BillingRow) {
+  if (String(key) === 'open') {
+    void router.push(row.href);
+  }
+  menuId.value = null;
+}
+
+function onDocTabChange(value: unknown) {
+  setDocTab(String(value ?? 'all') as DocTab);
+}
+
+function onPersonFilterChange(value: unknown) {
+  personId.value = value == null ? '' : String(value);
+  page.value = 1;
+}
+
+function onAmountMinChange(value: number | string | null) {
+  amountMin.value = value == null ? '' : String(value);
+}
+
+function onAmountMaxChange(value: number | string | null) {
+  amountMax.value = value == null ? '' : String(value);
+}
+
+function onTableSelectChange(keys: (string | number)[]) {
+  const next = keys.map(String);
+  const prev = selected.value;
+  if (Math.abs(next.length - prev.size) === 1) {
+    const nextSet = new Set(next);
+    for (const id of nextSet) {
+      if (!prev.has(id)) {
+        toggleSelect(id);
+        return;
+      }
+    }
+    for (const id of prev) {
+      if (!nextSet.has(id)) {
+        toggleSelect(id);
+        return;
+      }
+    }
+  }
+  selectedKeys.value = next;
+}
+
+defineExpose({ toggleSelect, pageCount, statusIcon });
 </script>
 
 <template>
-  <section class="page" @click="closeMenus">
-    <UiPageHeader
-      title="فاکتور ها"
-      lead="مدیریت فاکتورهای فروش، پیش فاکتور و خدمات"
+  <div @click="closeMenus">
+    <a-flex
+      justify="space-between"
+      align="center"
+      wrap="wrap"
+      :gap="12"
+      :style="{ marginBottom: '16px' }"
     >
-      <template #actions>
-        <div class="head-actions" @click.stop>
-          <div class="add-split desk-only">
-            <UiButton type="button" @click="invoiceModal = { kind: 'invoice' }; addOpen = false">
-              <UiIcon name="plus" :size="16" />
-              افزودن فاکتور
-            </UiButton>
-            <button type="button" class="btn primary split" aria-label="گزینه‌های افزودن" @click="addOpen = !addOpen">
-              <UiIcon name="chevron" :size="14" />
-            </button>
-            <div v-if="addOpen" class="menu">
-              <button type="button" @click="invoiceModal = { kind: 'invoice' }; addOpen = false">فاکتور جدید</button>
-              <button type="button" @click="invoiceModal = { kind: 'quote' }; addOpen = false">پیش فاکتور جدید</button>
-              <button type="button" @click="invoiceModal = { kind: 'credit' }; addOpen = false">فاکتور برگشتی</button>
-            </div>
-          </div>
-          <UiButton class="mob-only" type="button" @click="invoiceModal = { kind: 'invoice' }">
-            <UiIcon name="plus" :size="16" />
-            افزودن
-          </UiButton>
-        </div>
-      </template>
-    </UiPageHeader>
-
-    <!-- Desktop underline tabs -->
-    <div class="tabs desk-only">
-      <button type="button" :class="{ on: docTab === 'all' }" @click="setDocTab('all')">
-        همه
-        <em>{{ toFaDigits(counts.all) }}</em>
-      </button>
-      <button type="button" :class="{ on: docTab === 'invoice' }" @click="setDocTab('invoice')">
-        فاکتور
-        <em>{{ toFaDigits(counts.invoice) }}</em>
-      </button>
-      <button type="button" :class="{ on: docTab === 'quote' }" @click="setDocTab('quote')">
-        پیش فاکتور
-        <em>{{ toFaDigits(counts.quote) }}</em>
-      </button>
-      <button type="button" :class="{ on: docTab === 'credit' }" @click="setDocTab('credit')">
-        فاکتور برگشتی
-        <em>{{ toFaDigits(counts.credit) }}</em>
-      </button>
-    </div>
-
-    <div class="toolbar">
-      <label class="search">
-        <UiIcon name="search" :size="18" />
-        <input
-          v-model="q"
-          type="search"
-          class="desk-ph"
-          placeholder="جستجو در شماره، مشتری، شرح ..."
-          @input="page = 1"
-        />
-        <input
-          v-model="q"
-          type="search"
-          class="mob-ph"
-          placeholder="جستجو در شماره، مشتری، مبلغ ..."
-          @input="page = 1"
-        />
-      </label>
-      <div class="filters desk-only">
-        <div class="filter-chip">
-          <UiIcon name="calendar" :size="16" />
-          <JalaliDateInput v-model="from" placeholder="از تاریخ" />
-          <span class="sep">–</span>
-          <JalaliDateInput v-model="to" placeholder="تا تاریخ" />
-        </div>
-        <label class="filter-chip">
-          <UiIcon name="flag" :size="16" />
-          <select v-model="payFilter" @change="page = 1">
-            <option value="all">وضعیت</option>
-            <option value="paid">پرداخت شده</option>
-            <option value="unpaid">پرداخت نشده</option>
-            <option value="pending">در انتظار تایید</option>
-            <option value="expired">منقضی شده</option>
-          </select>
-        </label>
-        <label class="filter-chip">
-          <UiIcon name="user" :size="16" />
-          <select v-model="personId" @change="page = 1">
-            <option value="">مشتری</option>
-            <option v-for="p in people" :key="p.id" :value="p.id">
-              {{ p.fullName || `${p.firstName} ${p.lastName}` }}
-            </option>
-          </select>
-        </label>
+      <div>
+        <a-typography-title :level="3" :style="{ margin: 0 }">فاکتور ها</a-typography-title>
+        <a-typography-text type="secondary">
+          مدیریت فاکتورهای فروش، پیش فاکتور و خدمات
+        </a-typography-text>
       </div>
-      <button type="button" class="ghost-btn more-filters" @click.stop="filterSheet = true">
-        <UiIcon name="filter" :size="16" />
-        <span class="desk-only">فیلترهای بیشتر</span>
-      </button>
-    </div>
+      <a-space :size="8" @click.stop>
+        <a-dropdown v-model:open="addOpen">
+          <a-button type="primary">
+            <template #icon><PlusOutlined /></template>
+            افزودن فاکتور
+            <DownOutlined />
+          </a-button>
+          <template #overlay>
+            <a-menu @click="onAddMenu">
+              <a-menu-item key="invoice">فاکتور جدید</a-menu-item>
+              <a-menu-item key="quote">پیش فاکتور جدید</a-menu-item>
+              <a-menu-item key="credit">فاکتور برگشتی</a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </a-space>
+    </a-flex>
 
-    <!-- Mobile pill tabs -->
-    <div class="pill-tabs mob-only">
-      <button type="button" :class="{ on: docTab === 'all' }" @click="setDocTab('all')">
-        همه {{ toFaDigits(counts.all) }}
-      </button>
-      <button type="button" :class="{ on: docTab === 'invoice' }" @click="setDocTab('invoice')">
-        فاکتور {{ toFaDigits(counts.invoice) }}
-      </button>
-      <button type="button" :class="{ on: docTab === 'quote' }" @click="setDocTab('quote')">
-        پیش فاکتور {{ toFaDigits(counts.quote) }}
-      </button>
-      <button type="button" :class="{ on: docTab === 'credit' }" @click="setDocTab('credit')">
-        فاکتور برگشتی {{ toFaDigits(counts.credit) }}
-      </button>
-    </div>
+    <a-card :bordered="false">
+      <a-row :gutter="[16, 12]">
+        <a-col :span="24">
+          <a-select
+            :value="docTab"
+            :options="docTabOptions"
+            style="width: 100%; max-width: 420px"
+            @update:value="onDocTabChange"
+          />
+        </a-col>
+        <a-col :xs="24" :md="12" :lg="8">
+          <a-input
+            v-model:value="q"
+            allow-clear
+            placeholder="جستجو در شماره، مشتری، شرح ..."
+            @update:value="page = 1"
+          >
+            <template #prefix><SearchOutlined /></template>
+          </a-input>
+        </a-col>
+        <a-col :xs="24" :md="12" :lg="8">
+          <a-flex :gap="8" align="center">
+            <JalaliDateInput v-model="from" placeholder="از تاریخ" />
+            <a-typography-text type="secondary">–</a-typography-text>
+            <JalaliDateInput v-model="to" placeholder="تا تاریخ" />
+          </a-flex>
+        </a-col>
+        <a-col :xs="24" :md="12" :lg="4">
+          <a-select
+            v-model:value="payFilter"
+            :options="payFilterOptions"
+            style="width: 100%"
+            @change="page = 1"
+          />
+        </a-col>
+        <a-col :xs="24" :md="12" :lg="4">
+          <a-select
+            :value="personId || undefined"
+            allow-clear
+            show-search
+            option-filter-prop="label"
+            :options="personOptions"
+            placeholder="مشتری"
+            style="width: 100%"
+            @update:value="onPersonFilterChange"
+          />
+        </a-col>
+        <a-col :span="24">
+          <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
+            <a-button @click="filterSheet = true">
+              <template #icon><FilterOutlined /></template>
+              فیلترهای بیشتر
+            </a-button>
+            <TableColumnsMenu table-key="invoices" align="end" />
+          </a-flex>
+        </a-col>
+      </a-row>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
-
-    <template v-else>
-      <div class="tc-row desk">
-        <TableColumnsMenu table-key="invoices" align="end" />
-      </div>
-      <div class="table-wrap desk">
-        <table v-table-cols="'invoices'">
-          <thead>
-            <tr>
-              <th class="check">
-                <input
-                  type="checkbox"
-                  :checked="pageItems.length > 0 && pageItems.every((r) => selected.has(r.id))"
-                  @change="toggleSelectAll"
-                />
-              </th>
-              <th class="num-col">#</th>
-              <th>شماره فاکتور</th>
-              <th>تاریخ</th>
-              <th>مشتری</th>
-              <th>نوع</th>
-              <th>وضعیت</th>
-              <th>مبلغ کل</th>
-              <th>ارز</th>
-              <th>مهلت پرداخت</th>
-              <th class="ops">عملیات</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(r, idx) in pageItems" :key="r.id">
-              <td class="check">
-                <input
-                  type="checkbox"
-                  :checked="selected.has(r.id)"
-                  @change="toggleSelect(r.id)"
-                />
-              </td>
-              <td class="num-col">{{ toFaDigits((page - 1) * pageSize + idx + 1) }}</td>
-              <td class="mono" dir="ltr">{{ r.number }}</td>
-              <td>{{ formatDate(r.date) }}</td>
-              <td>
-                <div class="cust">
-                  <span class="avatar">{{ r.customerName.slice(0, 1) }}</span>
-                  <div>
-                    <strong>{{ r.customerName }}</strong>
-                    <small v-if="r.personName">{{ r.personName }}</small>
-                  </div>
-                </div>
-              </td>
-              <td><span class="type" :class="r.doc">{{ docLabel(r.doc) }}</span></td>
-              <td>
-                <span class="status" :class="r.statusKey">
-                  <UiIcon :name="statusIcon(r.statusKey)" :size="13" />
-                  {{ r.statusLabel }}
-                </span>
-              </td>
-              <td class="amount" :class="{ neg: r.amount < 0 }" dir="ltr">
-                {{ money(r.amount, r.currency) }}
-              </td>
-              <td>{{ r.currency }}</td>
-              <td :class="['due', r.statusKey]">{{ formatDate(r.dueOrValid) }}</td>
-              <td class="ops" @click.stop>
-                <span class="grip" aria-hidden="true"><UiIcon name="grip" :size="14" /></span>
-                <RouterLink class="icon-btn sm" :to="r.href" title="مشاهده">
-                  <UiIcon name="document" :size="15" />
-                </RouterLink>
-                <RouterLink class="icon-btn sm" :to="r.href" title="ویرایش">
-                  <UiIcon name="pencil" :size="15" />
-                </RouterLink>
-                <UiDropdownMenu
-                  :open="menuId === r.id"
-                  align="end"
-                  @update:open="(v) => (menuId = v ? r.id : null)"
-                >
-                  <template #trigger="{ toggle }">
-                    <button type="button" class="icon-btn sm" @click.stop="toggle">
-                      <UiIcon name="dots-v" :size="15" />
-                    </button>
-                  </template>
-                  <RouterLink :to="r.href">باز کردن</RouterLink>
-                </UiDropdownMenu>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <p v-if="!pageItems.length" class="empty">سندی یافت نشد.</p>
-      </div>
-
-      <div class="mob-list">
-        <article v-for="r in pageItems" :key="r.id" class="mob-card" @click.stop>
-          <div class="mob-card-top">
-            <RouterLink class="mob-info" :to="r.href">
-              <strong>{{ r.customerName }}</strong>
-              <span class="mono" dir="ltr">{{ r.number }}</span>
-              <span class="muted">{{ formatDate(r.date) }}</span>
-            </RouterLink>
-            <span class="status" :class="r.statusKey">
-              <UiIcon :name="statusIcon(r.statusKey)" :size="12" />
-              {{ r.statusLabel }}
-            </span>
-            <div class="mob-aside">
-              <UiDropdownMenu
-                :open="menuId === r.id"
-                align="end"
-                @update:open="(v) => (menuId = v ? r.id : null)"
-              >
-                <template #trigger="{ toggle }">
-                  <button type="button" class="icon-btn sm ghost" @click.stop="toggle">
-                    <UiIcon name="dots-v" :size="16" />
-                  </button>
-                </template>
-                <RouterLink :to="r.href">باز کردن</RouterLink>
-              </UiDropdownMenu>
-              <span class="avatar">{{ r.customerName.slice(0, 1) }}</span>
-            </div>
-          </div>
-          <div class="mob-card-bottom">
-            <em :class="{ neg: r.amount < 0 }">{{ money(r.amount, r.currency) }}</em>
-          </div>
-        </article>
-        <UiEmptyState
-          v-if="!pageItems.length"
-          title="سندی یافت نشد."
-          description="فاکتور، پیش‌فاکتور یا سند جدیدی ثبت کنید."
-        />
-      </div>
-
-      <UiPagination
-        v-if="filtered.length"
-        :page="page"
-        :total-pages="pageCount"
-        :total-items="filtered.length"
-        :page-size="pageSize"
-        :page-size-options="PAGE_SIZE_OPTIONS"
-        @update:page="page = $event"
-        @update:page-size="pageSize = $event"
+      <a-alert
+        v-if="error"
+        type="error"
+        show-icon
+        :message="error"
+        :style="{ marginTop: '16px' }"
       />
-    </template>
 
-    <UiModal
+      <a-spin :spinning="loading">
+        <a-table
+          v-if="!error"
+          :columns="columns"
+          :data-source="pageItems"
+          :pagination="false"
+          row-key="id"
+          :row-selection="{
+            selectedRowKeys: selectedKeys,
+            onChange: onTableSelectChange,
+            onSelectAll: toggleSelectAll,
+          }"
+          :style="{ marginTop: '16px' }"
+          :scroll="{ x: 'max-content' }"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'مشتری'">
+              <a-space :size="8">
+                <a-avatar>{{ record.customerName.slice(0, 1) }}</a-avatar>
+                <div>
+                  <div>{{ record.customerName }}</div>
+                  <a-typography-text v-if="record.personName" type="secondary">
+                    {{ record.personName }}
+                  </a-typography-text>
+                </div>
+              </a-space>
+            </template>
+            <template v-else-if="column.key === 'وضعیت'">
+              <a-tag :color="statusColor(record.statusKey)" :bordered="false">
+                {{ record.statusLabel }}
+              </a-tag>
+            </template>
+            <template v-else-if="column.key === 'مبلغ کل'">
+              <span dir="ltr">{{ money(record.amount, record.currency) }}</span>
+            </template>
+            <template v-else-if="column.key === 'عملیات'">
+              <a-space :size="4" @click.stop>
+                <RouterLink :to="record.href">
+                  <a-button type="text">
+                    <template #icon><EyeOutlined /></template>
+                  </a-button>
+                </RouterLink>
+                <a-dropdown
+                  :open="menuId === record.id"
+                  @update:open="(v) => (menuId = v ? record.id : null)"
+                >
+                  <a-button type="text">
+                    <template #icon><MoreOutlined /></template>
+                  </a-button>
+                  <template #overlay>
+                    <a-menu @click="(info) => onRowMenu(info, record as BillingRow)">
+                      <a-menu-item key="open">باز کردن</a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </a-space>
+            </template>
+          </template>
+        </a-table>
+
+        <a-empty
+          v-if="!loading && !pageItems.length && !error"
+          description="سندی یافت نشد."
+          :style="{ marginTop: '24px' }"
+        />
+
+        <a-flex
+          v-if="filtered.length"
+          justify="flex-end"
+          :style="{ marginTop: '16px' }"
+        >
+          <a-pagination
+            v-model:current="page"
+            v-model:page-size="pageSize"
+            :total="filtered.length"
+            :show-size-changer="true"
+            :page-size-options="PAGE_SIZE_OPTIONS.map(String)"
+            :show-total="(total) => `${toFaDigits(total)} مورد · ${toFaDigits(pageCount)} صفحه`"
+          />
+        </a-flex>
+      </a-spin>
+    </a-card>
+
+    <a-modal
       :open="Boolean(invoiceModal)"
-      :title="
-        invoiceModal?.kind === 'quote'
-          ? 'پیش فاکتور جدید'
-          : invoiceModal?.kind === 'credit'
-            ? 'فاکتور برگشتی'
-            : 'فاکتور جدید'
-      "
-      @close="invoiceModal = null"
+      :title="modalTitle"
+      :footer="null"
+      width="960px"
+      destroy-on-close
+      @cancel="invoiceModal = null"
     >
       <InvoiceFormView
         v-if="invoiceModal"
@@ -617,317 +742,85 @@ onMounted(load);
         @saved="invoiceModal = null; void load()"
         @cancel="invoiceModal = null"
       />
-    </UiModal>
+    </a-modal>
 
-    <div v-if="filterSheet" class="sheet-backdrop">
-      <div class="sheet" role="dialog" aria-modal="true" aria-label="فیلترها">
-        <header>
-          <button type="button" class="icon-btn" aria-label="بستن (Esc)" title="بستن (Esc)" @click="filterSheet = false">
-            <UiIcon name="x" :size="18" />
-          </button>
-          <button type="button" class="link" @click="clearFilters">حذف همه</button>
-          <strong>فیلترها</strong>
-        </header>
-        <div class="sheet-body">
-          <p class="lbl">نوع سند</p>
-          <div class="pill-row">
-            <button type="button" :class="{ on: docTab === 'all' }" @click="docTab = 'all'">همه</button>
-            <button type="button" :class="{ on: docTab === 'invoice' }" @click="docTab = 'invoice'">فاکتور</button>
-            <button type="button" :class="{ on: docTab === 'quote' }" @click="docTab = 'quote'">پیش فاکتور</button>
-            <button type="button" :class="{ on: docTab === 'credit' }" @click="docTab = 'credit'">فاکتور برگشتی</button>
-          </div>
-          <p class="lbl">وضعیت پرداخت</p>
-          <div class="pill-row">
-            <button type="button" :class="{ on: payFilter === 'all' }" @click="payFilter = 'all'">همه</button>
-            <button type="button" :class="{ on: payFilter === 'paid' }" @click="payFilter = 'paid'">پرداخت شده</button>
-            <button type="button" :class="{ on: payFilter === 'unpaid' }" @click="payFilter = 'unpaid'">پرداخت نشده</button>
-            <button type="button" :class="{ on: payFilter === 'pending' }" @click="payFilter = 'pending'">در انتظار تایید</button>
-            <button type="button" :class="{ on: payFilter === 'expired' }" @click="payFilter = 'expired'">منقضی شده</button>
-          </div>
-          <label class="field">
-            <span>مشتری</span>
-            <div class="control">
-              <UiIcon name="user" :size="16" />
-              <select v-model="personId">
-                <option value="">جستجو و انتخاب مشتری ...</option>
-                <option v-for="p in people" :key="p.id" :value="p.id">
-                  {{ p.fullName || `${p.firstName} ${p.lastName}` }}
-                </option>
-              </select>
-            </div>
-          </label>
-          <p class="lbl">بازه تاریخ</p>
-          <div class="row-2">
-            <label class="field"><span>از</span><JalaliDateInput v-model="from" /></label>
-            <label class="field"><span>تا</span><JalaliDateInput v-model="to" /></label>
-          </div>
-          <p class="lbl">بازه مبلغ (ریال)</p>
-          <div class="row-2">
-            <label class="field"><span>حداقل مبلغ</span><input v-model="amountMin" type="number" min="0" dir="ltr" placeholder="حداقل مبلغ" /></label>
-            <label class="field"><span>حداکثر مبلغ</span><input v-model="amountMax" type="number" min="0" dir="ltr" placeholder="حداکثر مبلغ" /></label>
-          </div>
-        </div>
-        <footer>
-          <button type="button" class="btn ghost" @click="clearFilters">پاک کردن</button>
-          <button type="button" class="btn primary" @click="applyFilters">اعمال فیلتر</button>
-        </footer>
-      </div>
-    </div>
-  </section>
+    <a-drawer
+      v-model:open="filterSheet"
+      title="فیلترها"
+      placement="bottom"
+      :height="'80%'"
+    >
+      <a-row :gutter="[16, 0]">
+        <a-col :span="24">
+          <a-form-item label="نوع سند">
+            <a-select
+              :value="docTab"
+              :options="docTabOptions"
+              style="width: 100%"
+              @update:value="onDocTabChange"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="وضعیت پرداخت">
+            <a-select
+              v-model:value="payFilter"
+              :options="payFilterOptions"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item label="مشتری">
+            <a-select
+              :value="personId || undefined"
+              allow-clear
+              show-search
+              option-filter-prop="label"
+              :options="personOptions"
+              placeholder="جستجو و انتخاب مشتری ..."
+              style="width: 100%"
+              @update:value="onPersonFilterChange"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :xs="24" :md="12">
+          <a-form-item label="از تاریخ">
+            <JalaliDateInput v-model="from" />
+          </a-form-item>
+        </a-col>
+        <a-col :xs="24" :md="12">
+          <a-form-item label="تا تاریخ">
+            <JalaliDateInput v-model="to" />
+          </a-form-item>
+        </a-col>
+        <a-col :xs="24" :md="12">
+          <a-form-item label="حداقل مبلغ">
+            <a-input-number
+              :value="amountMin === '' ? undefined : Number(amountMin)"
+              :min="0"
+              placeholder="حداقل مبلغ"
+              style="width: 100%"
+              @update:value="onAmountMinChange"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :xs="24" :md="12">
+          <a-form-item label="حداکثر مبلغ">
+            <a-input-number
+              :value="amountMax === '' ? undefined : Number(amountMax)"
+              :min="0"
+              placeholder="حداکثر مبلغ"
+              style="width: 100%"
+              @update:value="onAmountMaxChange"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-space :size="8" :style="{ marginTop: '8px' }">
+        <a-button @click="clearFilters">پاک کردن</a-button>
+        <a-button type="primary" @click="applyFilters">اعمال فیلتر</a-button>
+      </a-space>
+    </a-drawer>
+  </div>
 </template>
-
-<style scoped>
-.page {
-  --teal: #0d9488;
-  --teal-soft: #f0fdfa;
-  display: grid;
-  gap: 0.9rem;
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-}
-.page-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: flex-start;
-}
-.title-row { display: flex; gap: 0.75rem; align-items: flex-start; }
-.title-ico {
-  width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center;
-  background: var(--teal-soft); color: var(--teal);
-}
-h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
-.lead { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; }
-.head-actions { position: relative; }
-.add-split { display: flex; position: relative; }
-.btn {
-  border: 0; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h);
-  padding: 0 0.95rem; font-weight: 700; box-sizing: border-box;
-  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; text-decoration: none;
-}
-.btn.primary { background: var(--teal); color: #fff; }
-.btn.split {
-  border-radius: var(--radius) 0 0 var(--radius); padding-inline: 0.55rem;
-  border-inline-start: 1px solid rgba(255,255,255,.25);
-}
-.add-split .btn.primary:first-child { border-radius: 0 var(--radius) var(--radius) 0; }
-.btn.ghost, .ghost-btn, .icon-btn {
-  border: 1px solid var(--line); background: var(--surface); color: var(--text);
-  border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
-}
-.ghost-btn { min-height: var(--control-h); height: var(--control-h); padding: 0 0.8rem; font-weight: 600; box-sizing: border-box; }
-.icon-btn { width: var(--control-h); height: var(--control-h); position: relative; }
-.icon-btn.sm { width: 32px; height: 32px; }
-.icon-btn.ghost { border: 0; background: transparent; color: #94a3b8; }
-.add-doc { color: var(--teal); }
-.plus-badge {
-  position: absolute; bottom: 6px; left: 6px;
-  background: var(--teal); color: #fff; border-radius: var(--radius); padding: 1px;
-}
-.menu {
-  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 170px;
-  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
-  box-shadow: 0 12px 28px rgba(15,23,42,.12); padding: 0.35rem; display: grid;
-}
-.menu.left { left: auto; right: 0; }
-.menu a,
-.menu button {
-  display: block; width: 100%;
-  border: 0; background: transparent; text-align: right; padding: 0.55rem 0.7rem;
-  border-radius: var(--radius); color: var(--text); text-decoration: none; cursor: pointer;
-}
-.menu a:hover,
-.menu button:hover { background: var(--teal-soft); color: var(--teal); }
-
-.tabs {
-  display: flex; gap: 0.35rem; overflow-x: auto; border-bottom: 1px solid var(--line);
-}
-.tabs button {
-  border: 0; background: transparent; padding: 0.65rem 0.85rem; cursor: pointer;
-  color: #64748b; font-weight: 700; display: inline-flex; gap: 0.4rem; align-items: center;
-  border-bottom: 2px solid transparent; white-space: nowrap;
-}
-.tabs button.on { color: var(--teal); border-bottom-color: var(--teal); }
-.tabs em {
-  font-style: normal; font-size: 0.75rem; background: #f1f5f9; color: #64748b;
-  border-radius: 999px; padding: 0.1rem 0.45rem;
-}
-.tabs button.on em { background: var(--teal-soft); color: var(--teal); }
-
-.pill-tabs {
-  display: none; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.15rem;
-}
-.pill-tabs button {
-  flex: 0 0 auto; border: 0; border-radius: 999px; padding: 0.45rem 0.85rem;
-  background: #e0f2fe; color: #0369a1; font-weight: 700; cursor: pointer; white-space: nowrap;
-}
-.pill-tabs button.on { background: var(--teal); color: #fff; }
-
-.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
-.search {
-  flex: 1 1 220px; max-width: 380px; display: flex; align-items: center; gap: 0.45rem;
-  border: 1px solid var(--line); border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h);
-  padding: 0 0.75rem; background: #fff; color: var(--muted); box-sizing: border-box;
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-.search:focus-within {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-.search input { border: 0; outline: 0; width: 100%; background: transparent; color: var(--ink); font-size: var(--fs-sm); padding: 0; }
-.search .mob-ph { display: none; }
-.filters { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
-.filter-chip {
-  display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: nowrap;
-  border: 1px solid var(--line); border-radius: var(--radius); padding: 0 0.55rem;
-  background: #fff; color: var(--muted); min-height: var(--control-h); height: var(--control-h);
-  box-sizing: border-box; white-space: nowrap; font-size: var(--fs-sm);
-  transition: border-color var(--transition-fast);
-}
-.filter-chip:focus-within {
-  border-color: var(--accent);
-}
-.filter-chip select, .filter-chip :deep(button), .filter-chip :deep(input) {
-  border: 0; background: transparent; outline: 0; min-height: 0; height: 32px; color: var(--ink); font-size: var(--fs-sm);
-}
-.filter-chip :deep(.wrap) { width: auto; flex: 0 1 auto; }
-.filter-chip :deep(.trigger) {
-  width: auto; min-width: 5.4rem; height: 32px; min-height: 32px;
-  padding: 0 0.2rem; border: 0; box-shadow: none;
-}
-.filter-chip :deep(.trigger span) { white-space: nowrap; }
-.filter-chip :deep(.trigger .ico) { display: none; }
-.filter-chip .sep { color: #cbd5e1; flex-shrink: 0; }
-
-.table-wrap {
-  background: #fff; border: 1px solid #eef2f7; border-radius: var(--radius); overflow: auto;
-  box-shadow: 0 8px 24px rgba(15,23,42,.04);
-}
-table { width: 100%; border-collapse: collapse; min-width: 980px; }
-th, td { padding: 0.85rem 0.7rem; border-bottom: 1px solid #eef2f7; text-align: right; font-size: 0.9rem; vertical-align: middle; }
-th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap; }
-tbody tr:nth-child(even) { background: #fcfdff; }
-.check { width: 42px; }
-.mono { font-family: ui-monospace, monospace; direction: ltr; text-align: left; }
-.cust { display: flex; gap: 0.55rem; align-items: center; }
-.avatar {
-  width: 36px; height: 36px; border-radius: 999px; background: var(--teal-soft); color: var(--teal);
-  display: grid; place-items: center; font-weight: 600; flex-shrink: 0;
-}
-.cust strong { display: block; }
-.cust small { color: var(--muted); }
-.type {
-  display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
-}
-.type.invoice { background: #ccfbf1; color: #0f766e; }
-.type.quote { background: #e0f2fe; color: #0369a1; }
-.type.credit { background: #fee2e2; color: #b91c1c; }
-.status {
-  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem;
-  border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
-}
-.status.paid { background: #dcfce7; color: #15803d; }
-.status.unpaid { background: #fee2e2; color: #b91c1c; }
-.status.pending { background: #fef3c7; color: #b45309; }
-.status.expired { background: #f1f5f9; color: #64748b; }
-.status.quote { background: #e0f2fe; color: #0369a1; }
-.amount { font-weight: 700; }
-.amount.neg, .neg { color: #b91c1c; }
-.due.paid { color: #15803d; }
-.due.pending { color: #b45309; }
-.due.unpaid { color: #b91c1c; }
-.ops { position: relative; white-space: nowrap; width: 140px; }
-.grip { display: inline-flex; color: #cbd5e1; margin-inline-end: 0.15rem; vertical-align: middle; }
-
-.mob-list { display: none; gap: 0.65rem; }
-.mob-card {
-  position: relative;
-  background: #fff; border: 1px solid #eef2f7; border-radius: var(--radius); padding: 0.9rem;
-  box-shadow: 0 6px 16px rgba(15,23,42,.04);
-  display: grid; gap: 0.65rem;
-}
-.mob-card-top {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  gap: 0.55rem;
-  align-items: start;
-}
-.mob-info { text-decoration: none; color: inherit; display: grid; gap: 0.12rem; min-width: 0; }
-.mob-info .mono, .mob-info .muted { font-size: 0.8rem; color: var(--muted); }
-.mob-aside { display: grid; justify-items: center; gap: 0.35rem; }
-.mob-card-bottom { display: flex; justify-content: flex-start; }
-.mob-card-bottom em { font-style: normal; font-weight: 600; font-size: 0.92rem; }
-
-.pager {
-  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: center;
-}
-.pager-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
-.page-size {
-  display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.88rem;
-}
-.page-size select {
-  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 0.5rem; background: #fff;
-}
-.pages { display: flex; gap: 0.3rem; }
-.page-btn {
-  min-width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--line);
-  background: #fff; cursor: pointer;
-}
-.page-btn.on { background: var(--teal); color: #fff; border-color: transparent; }
-
-.fab {
-  display: none; position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + var(--mobile-tabbar-h)); z-index: 40;
-  background: var(--teal); color: #fff; text-align: center; text-decoration: none;
-  border-radius: var(--radius); padding: 0.9rem; font-weight: 600;
-  box-shadow: 0 12px 28px rgba(13,148,136,.35);
-}
-
-.sheet-backdrop {
-  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 50;
-  display: grid; align-items: end;
-}
-.sheet {
-  background: #fff; border-radius: var(--radius, 10px) var(--radius, 10px) 0 0; padding: 16px; max-height: 85vh; overflow: auto;
-}
-.sheet header {
-  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;
-}
-.sheet header strong { justify-self: end; font-size: 16px; font-weight: 500; color: var(--ink); }
-.link { border: 0; background: transparent; color: var(--teal); font-weight: 700; cursor: pointer; }
-.lbl { margin: 0.85rem 0 0.4rem; font-weight: 700; color: #334155; }
-.pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
-.pill-row button {
-  border: 1px solid var(--line); background: #f8fafc; border-radius: 999px; padding: 0.4rem 0.7rem;
-  cursor: pointer; font-weight: 600;
-}
-.pill-row button.on { background: var(--teal); color: #fff; border-color: transparent; }
-.field { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.85rem; margin-top: 0.35rem; }
-.field input, .field select, .control select {
-  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.7rem; background: #fff; color: var(--text);
-}
-.control { position: relative; display: flex; align-items: center; }
-.control :deep(.ico) {
-  position: absolute; inset-inline-start: 0.7rem; color: #94a3b8; pointer-events: none;
-}
-.control select { width: 100%; padding-inline-start: 2.2rem; }
-.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
-.sheet footer { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-top: 1rem; }
-.empty, .muted, .error { font-size: 0.9rem; }
-.error { color: #b91c1c; }
-.muted, .empty { color: var(--muted); }
-.mob-only { display: none; }
-
-@media (max-width: 900px) {
-  .desk, .desk-only { display: none !important; }
-  .mob-list, .mob-only, .fab, .pill-tabs { display: flex; }
-  .mob-list { display: grid; }
-  .search .desk-ph { display: none; }
-  .search .mob-ph { display: block; }
-  .toolbar { flex-wrap: nowrap; }
-  .more-filters {
-    width: var(--control-h); height: var(--control-h); padding: 0; flex-shrink: 0; border-radius: var(--radius);
-  }
-  .page { padding-bottom: 6rem; }
-}
-</style>
diff --git a/apps/web/src/views/LeadBoardView.vue b/apps/web/src/views/LeadBoardView.vue
index a773611..5e9cff0 100644
--- a/apps/web/src/views/LeadBoardView.vue
+++ b/apps/web/src/views/LeadBoardView.vue
@@ -1,18 +1,153 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { RouterLink } from 'vue-router';
+import { computed, onMounted, ref } from 'vue';
+import { RouterLink, useRouter } from 'vue-router';
 import axios from 'axios';
+import {
+  Alert as AAlert,
+  Avatar as AAvatar,
+  Button as AButton,
+  Card as ACard,
+  Empty as AEmpty,
+  Flex as AFlex,
+  Space as ASpace,
+  Spin as ASpin,
+  Tag as ATag,
+  Typography,
+  theme,
+} from 'ant-design-vue';
+import {
+  CalendarOutlined,
+  HolderOutlined,
+  PhoneOutlined,
+  ReloadOutlined,
+  UnorderedListOutlined,
+} from '@ant-design/icons-vue';
 import { api } from '@/lib/api';
 import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
-import { UiButton, UiEmptyState, UiPageHeader } from '@/components/ui';
 import type { LeadBoardColumnDto, LeadDto } from '@mento/shared';
 
+const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
+const { token } = theme.useToken();
+const router = useRouter();
+
+const GAP = 16;
+const COL_WIDTH = 280;
+
 const loading = ref(false);
 const moving = ref(false);
 const error = ref('');
 const columns = ref<LeadBoardColumnDto[]>([]);
 const draggingId = ref<string | null>(null);
 const dropStageId = ref<string | null>(null);
+/** بعد از درگ، کلیک باز شدن جزئیات را یک فریم نادیده بگیر */
+let suppressCardClick = false;
+
+/**
+ * ارتفاع کامل زیر topbar شل.
+ * height:0 + flex:1 روی فرزند، زنجیرهٔ کشش را اجباری می‌کند.
+ */
+const pageStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: `${GAP}px`,
+  height: 'calc(100dvh - 120px)',
+  maxHeight: 'calc(100dvh - 120px)',
+  minHeight: '420px',
+  minWidth: 0,
+}));
+
+const boardShellStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  flex: '1 1 auto',
+  height: 0,
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  padding: `${GAP}px`,
+  background: token.value.colorBgContainer,
+  border: `1px solid ${token.value.colorBorderSecondary}`,
+  borderRadius: `${token.value.borderRadiusLG}px`,
+  position: 'relative' as const,
+  overflow: 'hidden',
+}));
+
+const boardTrackStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  flex: '1 1 auto',
+  height: 0,
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'row' as const,
+  alignItems: 'stretch',
+  gap: `${GAP}px`,
+  width: '100%',
+  overflowX: 'auto' as const,
+  overflowY: 'hidden' as const,
+  paddingBottom: '4px',
+}));
+
+function columnStyle(stageId: string) {
+  const active = dropStageId.value === stageId;
+  return {
+    boxSizing: 'border-box' as const,
+    flex: `0 0 ${COL_WIDTH}px`,
+    width: `${COL_WIDTH}px`,
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    minHeight: 0,
+    background: token.value.colorFillAlter,
+    border: `1px solid ${
+      active ? token.value.colorPrimary : token.value.colorBorderSecondary
+    }`,
+    borderRadius: `${token.value.borderRadiusLG}px`,
+    boxShadow: active ? `0 0 0 2px ${token.value.colorPrimaryBg}` : undefined,
+    overflow: 'hidden',
+  };
+}
+
+const columnHeadStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: `${GAP}px`,
+  padding: `${GAP}px`,
+  borderBottom: `1px solid ${token.value.colorBorderSecondary}`,
+  background: token.value.colorBgContainer,
+}));
+
+const columnBodyStyle = computed(() => ({
+  boxSizing: 'border-box' as const,
+  flex: '1 1 auto',
+  height: 0,
+  minHeight: 0,
+  overflowY: 'auto' as const,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: '12px',
+  padding: '12px',
+  margin: 0,
+}));
+
+const cardBodyStyle = computed(() => ({
+  padding: '12px 14px',
+  margin: 0,
+}));
+
+function leadInitials(lead: LeadDto) {
+  const raw = (lead.contactName || lead.title || '?').trim();
+  const parts = raw.split(/\s+/).filter(Boolean);
+  if (!parts.length) return '؟';
+  if (parts.length === 1) return parts[0]!.slice(0, 1);
+  return `${parts[0]!.slice(0, 1)}${parts[parts.length - 1]!.slice(0, 1)}`;
+}
+
+function leadSubtitle(lead: LeadDto) {
+  return [lead.contactName, lead.city].filter(Boolean).join(' · ') || '';
+}
 
 function formatDate(value: string | null) {
   if (!value) return '';
@@ -39,7 +174,13 @@ async function load() {
   }
 }
 
+function openLead(lead: LeadDto) {
+  if (suppressCardClick || draggingId.value || moving.value) return;
+  void router.push({ name: 'lead-detail', params: { id: lead.id } });
+}
+
 function onDragStart(lead: LeadDto, event: DragEvent) {
+  suppressCardClick = true;
   draggingId.value = lead.id;
   event.dataTransfer?.setData('text/plain', lead.id);
   if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
@@ -48,6 +189,9 @@ function onDragStart(lead: LeadDto, event: DragEvent) {
 function onDragEnd() {
   draggingId.value = null;
   dropStageId.value = null;
+  window.setTimeout(() => {
+    suppressCardClick = false;
+  }, 0);
 }
 
 function onDragOver(stageId: string, event: DragEvent) {
@@ -106,183 +250,278 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
-    <UiPageHeader title="مسیر لیدها" lead="کشیدن و رها کردن برای تغییر وضعیت">
-      <template #actions>
-        <RouterLink :to="{ name: 'leads' }" class="link-btn">
-          <UiButton variant="ghost" size="sm">فهرست لیدها</UiButton>
+  <div class="lead-board-page" :style="pageStyle">
+    <a-flex justify="space-between" align="center" wrap="wrap" :gap="GAP">
+      <div>
+        <a-typography-title :level="3" :style="{ margin: 0 }">
+          مسیر لیدها
+        </a-typography-title>
+        <a-typography-text type="secondary">
+          کشیدن و رها کردن برای تغییر وضعیت
+        </a-typography-text>
+      </div>
+      <a-space :size="GAP">
+        <RouterLink :to="{ name: 'leads' }" custom v-slot="{ navigate }">
+          <a-button @click="navigate">
+            <template #icon><UnorderedListOutlined /></template>
+            فهرست لیدها
+          </a-button>
         </RouterLink>
-        <UiButton variant="ghost" size="sm" :disabled="loading || moving" @click="load">
+        <a-button
+          :disabled="loading || moving"
+          :loading="loading"
+          @click="load"
+        >
+          <template #icon><ReloadOutlined /></template>
           بروزرسانی
-        </UiButton>
-      </template>
-    </UiPageHeader>
+        </a-button>
+      </a-space>
+    </a-flex>
 
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
+    <a-alert v-if="error" type="error" show-icon :message="error" />
 
-    <div v-else-if="columns.length" class="board">
-      <section
-        v-for="col in columns"
-        :key="col.stage.id"
-        class="column"
-        :class="{ drop: dropStageId === col.stage.id }"
-        @dragover="onDragOver(col.stage.id, $event)"
-        @drop="onDrop(col.stage.id, $event)"
+    <div :style="boardShellStyle">
+      <div
+        v-if="loading || moving"
+        :style="{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 2,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: token.colorBgMask,
+        }"
       >
-        <header class="col-head">
-          <span
-            class="dot"
-            :style="{ background: col.stage.color || 'var(--accent)' }"
-          />
-          <h2>{{ col.stage.name }}</h2>
-          <em>{{ toFaDigits(col.total ?? col.leads.length) }}</em>
-        </header>
+        <a-spin />
+      </div>
 
-        <div class="cards">
-          <article
-            v-for="lead in col.leads"
-            :key="lead.id"
-            class="card"
-            :class="{ dragging: draggingId === lead.id }"
-            draggable="true"
-            @dragstart="onDragStart(lead, $event)"
-            @dragend="onDragEnd"
-          >
-            <RouterLink class="title" :to="{ name: 'lead-detail', params: { id: lead.id } }">
-              {{ lead.title }}
-            </RouterLink>
-            <p v-if="lead.mobile" class="line" dir="ltr">{{ lead.mobile }}</p>
-            <p v-if="lead.city" class="line">{{ lead.city }}</p>
-            <p v-if="lead.assigneeName" class="line muted">{{ lead.assigneeName }}</p>
-            <p v-if="lead.nextFollowUpAt" class="line muted">
-              پیگیری: {{ formatDate(lead.nextFollowUpAt) }}
-            </p>
-          </article>
-          <p v-if="!col.leads.length" class="empty-col">خالی</p>
+      <a-empty
+        v-if="!loading && !columns.length"
+        description="مرحله‌ای برای نمایش در مسیر لیدها نیست. در تنظیمات مراحل لید، «نمایش روی مسیر» را فعال کنید."
+        :style="{ margin: 'auto' }"
+      />
+
+      <div
+        v-else-if="columns.length"
+        class="lead-board-track"
+        :style="boardTrackStyle"
+      >
+        <div
+          v-for="col in columns"
+          :key="col.stage.id"
+          :style="columnStyle(col.stage.id)"
+          @dragover="onDragOver(col.stage.id, $event)"
+          @drop="onDrop(col.stage.id, $event)"
+        >
+          <div :style="columnHeadStyle">
+            <a-space :size="8">
+              <span
+                :style="{
+                  width: '8px',
+                  height: '8px',
+                  borderRadius: '50%',
+                  background: col.stage.color || token.colorPrimary,
+                  display: 'inline-block',
+                  flexShrink: 0,
+                }"
+              />
+              <a-typography-text strong>{{ col.stage.name }}</a-typography-text>
+            </a-space>
+            <a-typography-text type="secondary">
+              {{ toFaDigits(col.leads.length) }}
+            </a-typography-text>
+          </div>
+
+          <div :style="columnBodyStyle">
+            <a-card
+              v-for="lead in col.leads"
+              :key="lead.id"
+              hoverable
+              :bordered="true"
+              :body-style="cardBodyStyle"
+              :style="{
+                cursor: 'pointer',
+                opacity: draggingId === lead.id ? 0.45 : 1,
+                flexShrink: 0,
+                margin: 0,
+                background: token.colorBgContainer,
+                boxShadow: token.boxShadow,
+              }"
+              @click="openLead(lead)"
+            >
+              <a-flex vertical :gap="10" :style="{ width: '100%', minWidth: 0 }">
+                <a-flex :gap="10" align="center" :style="{ minWidth: 0 }">
+                  <span
+                    role="button"
+                    tabindex="0"
+                    aria-label="جابه‌جایی لید"
+                    title="برای جابه‌جایی بکشید"
+                    draggable="true"
+                    :style="{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: '28px',
+                      height: '28px',
+                      flexShrink: 0,
+                      borderRadius: `${token.borderRadiusSM}px`,
+                      color: token.colorTextTertiary,
+                      cursor: 'grab',
+                      background: token.colorFillQuaternary,
+                    }"
+                    @click.stop
+                    @dragstart.stop="onDragStart(lead, $event)"
+                    @dragend.stop="onDragEnd"
+                  >
+                    <HolderOutlined />
+                  </span>
+                  <a-avatar
+                    :style="{
+                      background: token.colorPrimaryBg,
+                      color: token.colorPrimary,
+                      flexShrink: 0,
+                      fontWeight: 700,
+                    }"
+                  >
+                    {{ leadInitials(lead) }}
+                  </a-avatar>
+                  <div :style="{ flex: 1, minWidth: 0 }">
+                    <a-typography-text
+                      strong
+                      ellipsis
+                      :style="{ display: 'block', margin: 0, lineHeight: 1.35 }"
+                      :title="lead.title"
+                    >
+                      {{ lead.title }}
+                    </a-typography-text>
+                    <a-typography-text
+                      v-if="leadSubtitle(lead)"
+                      type="secondary"
+                      ellipsis
+                      :style="{
+                        display: 'block',
+                        margin: 0,
+                        marginTop: '2px',
+                        fontSize: `${token.fontSizeSM}px`,
+                        lineHeight: 1.35,
+                      }"
+                      :title="leadSubtitle(lead)"
+                    >
+                      {{ leadSubtitle(lead) }}
+                    </a-typography-text>
+                  </div>
+                </a-flex>
+
+                <a-flex
+                  justify="space-between"
+                  align="center"
+                  :gap="8"
+                  :style="{ minWidth: 0 }"
+                >
+                  <a-flex
+                    v-if="lead.mobile"
+                    align="center"
+                    :gap="6"
+                    dir="ltr"
+                    :style="{ minWidth: 0 }"
+                  >
+                    <PhoneOutlined
+                      :style="{
+                        color: token.colorPrimary,
+                        fontSize: `${token.fontSizeSM}px`,
+                      }"
+                    />
+                    <a-typography-text
+                      :style="{
+                        margin: 0,
+                        fontSize: `${token.fontSizeSM}px`,
+                        fontVariantNumeric: 'tabular-nums',
+                        color: token.colorText,
+                      }"
+                    >
+                      {{ lead.mobile }}
+                    </a-typography-text>
+                  </a-flex>
+                  <a-tag
+                    v-if="lead.assigneeName"
+                    :bordered="false"
+                    :style="{
+                      margin: 0,
+                      maxWidth: '46%',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      background: token.colorFillSecondary,
+                    }"
+                    :title="lead.assigneeName"
+                  >
+                    {{ lead.assigneeName }}
+                  </a-tag>
+                </a-flex>
+
+                <a-flex
+                  v-if="lead.nextFollowUpAt"
+                  align="center"
+                  :gap="6"
+                  :style="{
+                    paddingTop: '8px',
+                    borderTop: `1px solid ${token.colorSplit}`,
+                  }"
+                >
+                  <CalendarOutlined
+                    :style="{
+                      color: token.colorTextSecondary,
+                      fontSize: `${token.fontSizeSM}px`,
+                    }"
+                  />
+                  <a-typography-text
+                    type="secondary"
+                    :style="{
+                      margin: 0,
+                      fontSize: `${token.fontSizeSM}px`,
+                    }"
+                  >
+                    پیگیری {{ formatDate(lead.nextFollowUpAt) }}
+                  </a-typography-text>
+                </a-flex>
+              </a-flex>
+            </a-card>
+
+            <a-typography-text
+              v-if="!col.leads.length"
+              type="secondary"
+              :style="{
+                textAlign: 'center',
+                display: 'block',
+                margin: 'auto',
+                padding: `${GAP}px`,
+              }"
+            >
+              خالی
+            </a-typography-text>
+          </div>
         </div>
-      </section>
+      </div>
     </div>
-
-    <UiEmptyState
-      v-else-if="!loading"
-      title="مرحله‌ای برای نمایش در مسیر لیدها نیست."
-      description="در تنظیمات مراحل لید، «نمایش روی مسیر» را فعال کنید."
-    />
-  </section>
+  </div>
 </template>
 
 <style scoped>
-.page {
-  display: grid;
-  gap: 1rem;
-  min-width: 0;
+/* فقط ارتفاع/اسکرول ساختاری — بدون رنگ/ری‌اسکین Ant */
+.lead-board-page {
+  width: 100%;
 }
 
-.link-btn {
-  text-decoration: none;
+.lead-board-track {
+  scrollbar-width: thin;
 }
 
-.board {
-  display: flex;
-  gap: 0.85rem;
-  overflow-x: auto;
-  padding-bottom: 0.5rem;
-  align-items: flex-start;
-  min-height: 24rem;
+.lead-board-track::-webkit-scrollbar {
+  height: 8px;
 }
 
-.column {
-  flex: 0 0 16.5rem;
-  background: color-mix(in srgb, var(--surface-2, #f8fafc) 85%, #fff);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  display: grid;
-  grid-template-rows: auto 1fr;
-  max-height: calc(100vh - 12rem);
-}
-
-.column.drop {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-
-.col-head {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.7rem 0.75rem;
-  border-bottom: 1px solid var(--line);
-}
-
-.col-head h2 {
-  margin: 0;
-  font-size: 0.95rem;
-  flex: 1;
-}
-
-.col-head em {
-  font-style: normal;
-  font-size: 0.8rem;
-  color: var(--muted);
-}
-
-.dot {
-  width: 0.55rem;
-  height: 0.55rem;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.cards {
-  padding: 0.55rem;
-  display: grid;
-  gap: 0.5rem;
-  overflow-y: auto;
-}
-
-.card {
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: calc(var(--radius) - 2px);
-  padding: 0.65rem 0.7rem;
-  display: grid;
-  gap: 0.2rem;
-  cursor: grab;
-}
-
-.card.dragging {
-  opacity: 0.45;
-}
-
-.title {
-  font-weight: 600;
-  color: var(--ink);
-  text-decoration: none;
-}
-
-.title:hover {
-  color: var(--accent);
-}
-
-.line {
-  margin: 0;
-  font-size: 0.82rem;
-}
-
-.muted,
-.empty-col {
-  color: var(--muted);
-}
-
-.empty-col {
-  margin: 0.5rem;
-  text-align: center;
-  font-size: 0.85rem;
-}
-
-.error {
-  color: #b91c1c;
-  margin: 0;
+.lead-board-track::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 28%, transparent);
 }
 </style>
diff --git a/apps/web/src/views/LeadDetailView.vue b/apps/web/src/views/LeadDetailView.vue
index 06b081d..05b182d 100644
--- a/apps/web/src/views/LeadDetailView.vue
+++ b/apps/web/src/views/LeadDetailView.vue
@@ -1,23 +1,59 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
+import {
+  Affix as AAffix,
+  Alert as AAlert,
+  Button as AButton,
+  Card as ACard,
+  Col as ACol,
+  Descriptions as ADescriptions,
+  DescriptionsItem as ADescriptionsItem,
+  Divider as ADivider,
+  Drawer as ADrawer,
+  Empty as AEmpty,
+  Flex as AFlex,
+  Form as AForm,
+  FormItem as AFormItem,
+  Input as AInput,
+  List as AList,
+  ListItem as AListItem,
+  ListItemMeta as AListItemMeta,
+  Modal,
+  Row as ARow,
+  Select as ASelect,
+  Space as ASpace,
+  Spin as ASpin,
+  Tag as ATag,
+  Textarea as ATextarea,
+  Timeline as ATimeline,
+  TimelineItem as ATimelineItem,
+  Typography,
+  message,
+  theme,
+} from 'ant-design-vue';
+import {
+  ArrowLeftOutlined,
+  CopyOutlined,
+  EditOutlined,
+  MessageOutlined,
+  MoreOutlined,
+  PhoneOutlined,
+  PlusOutlined,
+  UserAddOutlined,
+} from '@ant-design/icons-vue';
 import { api } from '@/lib/api';
-import { formatClockFa, formatJalaliNumeric, formatLocalDateInput, parseLocalInput, toFaDigits } from '@/lib/jalali';
+import {
+  formatClockFa,
+  formatJalaliNumeric,
+  formatLocalDateInput,
+  parseLocalInput,
+  toFaDigits,
+} from '@/lib/jalali';
 import { useAuthStore } from '@/stores/auth';
 import { canManageSettings } from '@/lib/roles';
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
-import UiIcon from '@/components/UiIcon.vue';
-import {
-  UiButton,
-  UiCard,
-  UiEmptyState,
-  UiField,
-  UiInput,
-  UiPageHeader,
-  UiSelect,
-  UiTextarea,
-} from '@/components/ui';
 import RelatedTasksPanel from '@/components/routines/RelatedTasksPanel.vue';
 import SmsComposeModal from '@/components/SmsComposeModal.vue';
 import type {
@@ -31,6 +67,10 @@ import type {
 } from '@mento/shared';
 import { ACTIVITY_TYPE_LABELS } from '@mento/shared';
 
+const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
+  Typography;
+const { token } = theme.useToken();
+
 type LeadDetail = LeadDto & { events: LeadEventDto[] };
 
 const route = useRoute();
@@ -60,7 +100,9 @@ const editing = ref(false);
 const moreOpen = ref(false);
 const smsOpen = ref(false);
 const copied = ref(false);
-const narrow = ref(typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches);
+const narrow = ref(
+  typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches,
+);
 let narrowMq: MediaQueryList | null = null;
 const editForm = ref({
   title: '',
@@ -125,6 +167,7 @@ async function load() {
 function startEdit() {
   if (!lead.value) return;
   editing.value = true;
+  moreOpen.value = false;
   editForm.value = {
     title: lead.value.title,
     contactName: lead.value.contactName ?? '',
@@ -134,7 +177,9 @@ function startEdit() {
     region: lead.value.region ?? '',
     source: lead.value.source ?? '',
     instagram: lead.value.instagram ?? '',
-    birthDate: lead.value.birthDate ? formatLocalDateInput(new Date(lead.value.birthDate)) : '',
+    birthDate: lead.value.birthDate
+      ? formatLocalDateInput(new Date(lead.value.birthDate))
+      : '',
     trade: lead.value.trade ?? '',
     notes: lead.value.notes ?? '',
   };
@@ -158,12 +203,13 @@ async function saveEdit() {
       source: editForm.value.source.trim() || null,
       instagram: editForm.value.instagram.trim() || null,
       birthDate: editForm.value.birthDate
-        ? parseLocalInput(editForm.value.birthDate)?.toISOString() ?? null
+        ? (parseLocalInput(editForm.value.birthDate)?.toISOString() ?? null)
         : null,
       trade: editForm.value.trade.trim() || null,
       notes: editForm.value.notes.trim() || null,
     });
     okMsg.value = 'لید ویرایش شد.';
+    message.success(okMsg.value);
     editing.value = false;
     await load();
   } catch (e) {
@@ -180,6 +226,8 @@ async function changeStage() {
   try {
     await api.patch(`/leads/${id.value}/move`, { stageId: stageId.value });
     okMsg.value = 'وضعیت به‌روز شد.';
+    message.success(okMsg.value);
+    moreOpen.value = false;
     await load();
   } catch (e) {
     error.value = apiError(e, 'تغییر وضعیت ناموفق بود.');
@@ -198,6 +246,8 @@ async function assignLead() {
       assigneeId: assigneeId.value,
     });
     okMsg.value = 'کارشناس تخصیص داده شد.';
+    message.success(okMsg.value);
+    moreOpen.value = false;
     await load();
   } catch (e) {
     error.value = apiError(e, 'تخصیص ناموفق بود.');
@@ -225,6 +275,8 @@ async function logCall() {
     callBody.value = '';
     callFollowUp.value = '';
     okMsg.value = 'تماس ثبت شد.';
+    message.success(okMsg.value);
+    moreOpen.value = false;
     await load();
   } catch (e) {
     error.value = apiError(e, 'ثبت تماس ناموفق بود.');
@@ -241,6 +293,8 @@ async function addNote() {
     await api.post(`/leads/${id.value}/notes`, { body: noteBody.value.trim() });
     noteBody.value = '';
     okMsg.value = 'یادداشت ثبت شد.';
+    message.success(okMsg.value);
+    moreOpen.value = false;
     await load();
   } catch (e) {
     error.value = apiError(e, 'ثبت یادداشت ناموفق بود.');
@@ -262,6 +316,8 @@ async function setFollowUp() {
     followUpAt.value = '';
     followUpBody.value = '';
     okMsg.value = 'پیگیری تنظیم شد.';
+    message.success(okMsg.value);
+    moreOpen.value = false;
     await load();
   } catch (e) {
     error.value = apiError(e, 'تنظیم پیگیری ناموفق بود.');
@@ -270,8 +326,12 @@ async function setFollowUp() {
   }
 }
 
-async function convertLead() {
-  if (!confirm('این لید به مشتری تبدیل شود؟')) return;
+function convertLead() {
+  Modal.confirm({
+    title: 'این لید به مشتری تبدیل شود؟',
+    okText: 'تبدیل',
+    cancelText: 'انصراف',
+    async onOk() {
   busy.value = true;
   error.value = '';
   try {
@@ -281,6 +341,7 @@ async function convertLead() {
     okMsg.value = data.createdPerson
       ? 'لید تبدیل و شخص جدید ساخته شد.'
       : 'لید به مشتری موجود متصل شد.';
+        message.success(okMsg.value);
     await load();
     if (data.personId) {
       void router.push({ name: 'person-detail', params: { id: data.personId } });
@@ -290,21 +351,31 @@ async function convertLead() {
   } finally {
     busy.value = false;
   }
+    },
+  });
 }
 
-async function archiveLead() {
-  if (!confirm('این لید بایگانی شود؟')) return;
+function archiveLead() {
+  Modal.confirm({
+    title: 'این لید بایگانی شود؟',
+    okText: 'بایگانی',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
   busy.value = true;
   error.value = '';
   try {
     await api.post('/leads/archive', { leadIds: [id.value] });
     okMsg.value = 'لید بایگانی شد.';
+        message.success(okMsg.value);
     void router.push({ name: 'leads' });
   } catch (e) {
     error.value = apiError(e, 'بایگانی ناموفق بود.');
   } finally {
     busy.value = false;
   }
+    },
+  });
 }
 
 const telHref = computed(() => (lead.value?.mobile ? `tel:${lead.value.mobile}` : undefined));
@@ -343,6 +414,7 @@ async function copyMobile() {
   try {
     await navigator.clipboard.writeText(value);
     copied.value = true;
+    message.success('کپی شد');
     window.setTimeout(() => {
       copied.value = false;
     }, 1400);
@@ -365,425 +437,600 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
 </script>
 
 <template>
-  <section class="page" :class="{ editing, 'more-open': moreOpen }">
-    <div class="desk-only">
-    <UiPageHeader
-      :title="lead?.title || 'جزئیات لید'"
-      :lead="lead ? `موبایل ${lead.mobile}` : 'در حال بارگذاری…'"
-      :back-to="{ name: 'leads' }"
-    >
-      <template #actions>
-        <UiButton
-          v-if="lead && !editing"
-          variant="secondary"
-          size="sm"
+  <a-row :gutter="[24, 24]">
+    <a-col :span="24">
+      <a-flex justify="space-between" align="center" wrap="wrap" :gap="token.marginSM">
+        <a-space :size="12" align="start">
+          <RouterLink :to="{ name: 'leads' }" custom v-slot="{ navigate }">
+            <a-button @click="navigate">
+              <template #icon><ArrowLeftOutlined /></template>
+            </a-button>
+          </RouterLink>
+          <div>
+            <a-typography-title :level="3" :style="{ margin: 0 }">
+              {{ lead?.title || 'جزئیات لید' }}
+            </a-typography-title>
+            <a-typography-text type="secondary">
+              {{ lead ? `موبایل ${lead.mobile}` : 'در حال بارگذاری…' }}
+            </a-typography-text>
+          </div>
+        </a-space>
+        <a-space v-if="lead" :size="8" wrap>
+          <a-button
+            v-if="!editing"
           :disabled="busy || !lead.mobile"
           @click="smsOpen = true"
         >
+            <template #icon><MessageOutlined /></template>
           پیامک
-        </UiButton>
-        <UiButton
-          v-if="lead && !editing"
-          variant="secondary"
-          size="sm"
-          :disabled="busy"
-          @click="startEdit"
-        >
+          </a-button>
+          <a-button v-if="!editing" :disabled="busy" @click="startEdit">
+            <template #icon><EditOutlined /></template>
           ویرایش
-        </UiButton>
-        <UiButton
-          v-if="lead && !lead.convertedPersonId"
-          variant="primary"
-          size="sm"
+          </a-button>
+          <a-button
+            v-if="!lead.convertedPersonId"
+            type="primary"
           :disabled="busy"
           @click="convertLead"
         >
+            <template #icon><UserAddOutlined /></template>
           تبدیل به مشتری
-        </UiButton>
-        <UiButton
-          v-if="lead && !lead.archivedAt"
-          variant="ghost"
-          size="sm"
+          </a-button>
+          <a-button
+            v-if="!lead.archivedAt"
+            danger
           :disabled="busy"
           @click="archiveLead"
         >
           بایگانی
-        </UiButton>
-      </template>
-    </UiPageHeader>
-    </div>
+          </a-button>
+          <a-button v-if="narrow" @click="moreOpen = true">
+            <template #icon><MoreOutlined /></template>
+            بیشتر
+          </a-button>
+        </a-space>
+      </a-flex>
+    </a-col>
 
-    <button
-      v-if="moreOpen"
-      class="sheet-back"
-      type="button"
-      aria-label="بستن"
-      @click="moreOpen = false"
-    />
+    <a-col v-if="okMsg" :span="24">
+      <a-alert type="success" show-icon :message="okMsg" closable @close="okMsg = ''" />
+    </a-col>
+    <a-col v-if="error" :span="24">
+      <a-alert type="error" show-icon :message="error" closable @close="error = ''" />
+    </a-col>
 
-    <p v-if="okMsg" class="ok">{{ okMsg }}</p>
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
+    <a-col :span="24">
+      <a-spin :spinning="loading">
+        <template v-if="lead">
+          <a-row :gutter="[24, 24]">
+            <a-col :xs="24" :lg="17" :xl="18">
+              <a-card :bordered="false" title="اطلاعات لید">
+                <a-form v-if="editing" layout="vertical" :model="editForm">
+                  <a-row :gutter="[16, 0]">
+                    <a-col :xs="24" :md="12">
+                      <a-form-item label="عنوان" required>
+                        <a-input v-model:value="editForm.title" style="width: 100%" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :md="12">
+                      <a-form-item label="مالک/مخاطب">
+                        <a-input v-model:value="editForm.contactName" style="width: 100%" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="موبایل" required>
+                        <a-input
+                          v-model:value="editForm.mobile"
+                          dir="ltr"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="تلفن">
+                        <a-input
+                          v-model:value="editForm.phone"
+                          dir="ltr"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="شهر">
+                        <a-input v-model:value="editForm.city" style="width: 100%" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="منطقه">
+                        <a-input v-model:value="editForm.region" style="width: 100%" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="منبع">
+                        <a-input v-model:value="editForm.source" style="width: 100%" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="اینستاگرام">
+                        <a-input
+                          v-model:value="editForm.instagram"
+                          dir="ltr"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="تاریخ تولد">
+                        <JalaliDateInput
+                          v-model="editForm.birthDate"
+                          mode="date"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :xs="24" :sm="12" :md="8">
+                      <a-form-item label="صنف">
+                        <a-input v-model:value="editForm.trade" style="width: 100%" />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                      <a-form-item label="یادداشت">
+                        <a-textarea
+                          v-model:value="editForm.notes"
+                          :rows="3"
+                          style="width: 100%"
+                        />
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                      <a-space :size="8">
+                        <a-button type="primary" :loading="busy" @click="saveEdit">
+                          ذخیره
+                        </a-button>
+                        <a-button :disabled="busy" @click="editing = false">انصراف</a-button>
+                      </a-space>
+                    </a-col>
+                  </a-row>
+                </a-form>
 
-    <template v-else-if="lead">
-      <div v-if="narrow" class="mob">
-        <article class="m-hero">
-          <div class="m-top">
-            <span class="m-mark" aria-hidden="true">
-              <UiIcon name="bag" :size="22" />
-            </span>
-            <div class="m-id">
-              <div class="m-name-row">
-                <h2>{{ lead.title }}</h2>
-                <span class="m-pill"><i />{{ lead.stageName }}</span>
-              </div>
-              <button class="m-phone" type="button" @click="copyMobile">
+                <template v-else>
+                  <a-flex
+                    v-if="narrow"
+                    justify="space-between"
+                    align="center"
+                    wrap="wrap"
+                    :gap="8"
+                    :style="{ marginBottom: `${token.marginMD}px` }"
+                  >
+                    <a-space :size="8" wrap>
+                      <a-tag color="processing">{{ lead.stageName }}</a-tag>
+                      <a-button type="link" @click="copyMobile">
+                        <template #icon><CopyOutlined /></template>
                 <span dir="ltr">{{ toFaDigits(lead.mobile) }}</span>
-                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-                  <rect x="8" y="8" width="11" height="11" rx="2" />
-                  <path d="M5 15V6a2 2 0 0 1 2-2h9" />
-                </svg>
-                <em v-if="copied">کپی شد</em>
-              </button>
-            </div>
-            <RouterLink class="m-back" :to="{ name: 'leads' }" aria-label="بازگشت">
-              <UiIcon name="chevron-left" :size="20" />
-            </RouterLink>
-          </div>
-          <div class="m-actions" :class="{ converted: !!lead.convertedPersonId }">
-            <a class="m-btn mint" :href="telHref">
-              <UiIcon name="phone" :size="16" />
-              تماس
-            </a>
-            <button class="m-btn" type="button" @click="smsOpen = true">
-              <UiIcon name="chat" :size="16" />
+                        <template v-if="copied"> · کپی شد</template>
+                      </a-button>
+                    </a-space>
+                    <a-space :size="8">
+                      <a-button
+                        v-if="telHref"
+                        @click="() => { if (telHref) window.location.href = telHref }"
+                      >
+                        <template #icon><PhoneOutlined /></template>
+                        تماس
+                      </a-button>
+                      <a-button @click="smsOpen = true">
+                        <template #icon><MessageOutlined /></template>
               پیامک
-            </button>
-            <button class="m-btn" type="button" @click="startEdit">
-              <UiIcon name="pencil" :size="16" />
-              ویرایش
-            </button>
-            <button class="m-btn icon" type="button" aria-label="بیشتر" @click="moreOpen = true">
-              <UiIcon name="dots" :size="18" />
-            </button>
-            <button
-              v-if="!lead.convertedPersonId"
-              class="m-btn solid"
-              type="button"
-              :disabled="busy"
-              @click="convertLead"
-            >
-              <UiIcon name="user-plus" :size="16" />
-              تبدیل به مشتری
-            </button>
-          </div>
-        </article>
+                      </a-button>
+                    </a-space>
+                  </a-flex>
 
-        <article v-if="!editing" class="m-card">
-          <header class="m-card-h">
-            <h3>اطلاعات لید</h3>
-            <button class="m-ico" type="button" aria-label="ویرایش اطلاعات" @click="startEdit">
-              <UiIcon name="document" :size="16" />
-            </button>
-          </header>
-          <dl class="m-grid">
-            <div class="cell">
-              <dt><UiIcon name="user" :size="14" /> نام</dt>
-              <dd>{{ lead.title }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="users" :size="14" /> مالک / مخاطب</dt>
-              <dd>{{ lead.contactName || '—' }}</dd>
-            </div>
-            <div class="cell hot">
-              <dt><UiIcon name="phone" :size="14" /> موبایل</dt>
-              <dd dir="ltr">{{ toFaDigits(lead.mobile) }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="phone" :size="14" /> تلفن</dt>
-              <dd dir="ltr">{{ lead.phone ? toFaDigits(lead.phone) : '—' }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="pin" :size="14" /> شهر</dt>
-              <dd>{{ lead.city || '—' }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="grid" :size="14" /> منطقه</dt>
-              <dd>{{ lead.region || '—' }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="bag" :size="14" /> صنف</dt>
-              <dd>{{ lead.trade || '—' }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="camera" :size="14" /> اینستاگرام</dt>
-              <dd dir="ltr">{{ lead.instagram || '—' }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="target" :size="14" /> منبع</dt>
-              <dd>{{ lead.source || '—' }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="flag" :size="14" /> وضعیت</dt>
-              <dd><span class="m-pill"><i />{{ lead.stageName }}</span></dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="user" :size="14" /> کارشناس</dt>
-              <dd>{{ lead.assigneeName || '—' }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="calendar" :size="14" /> تاریخ تولد</dt>
-              <dd>{{ formatDate(lead.birthDate) }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="calendar" :size="14" /> تاریخ ثبت</dt>
-              <dd>{{ formatDate(lead.createdAt) }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="chart" :size="14" /> روز در مرحله</dt>
-              <dd>{{ toFaDigits(lead.daysInStage) }}</dd>
-            </div>
-            <div class="cell">
-              <dt><UiIcon name="clock" :size="14" /> پیگیری بعدی</dt>
-              <dd>{{ formatDate(lead.nextFollowUpAt) }}</dd>
-            </div>
-            <div v-if="lead.addresses?.length" class="cell wide">
-              <dt><UiIcon name="pin" :size="14" /> آدرس‌ها</dt>
-              <dd>
-                <p v-for="(addr, i) in lead.addresses" :key="i" class="addr-line">{{ addr }}</p>
-              </dd>
-            </div>
-          </dl>
-        </article>
+                  <a-descriptions :column="{ xs: 1, sm: 2, md: 2 }" bordered size="small">
+                    <a-descriptions-item label="نام">{{ lead.title }}</a-descriptions-item>
+                    <a-descriptions-item label="مالک/مخاطب">
+                      {{ lead.contactName || '—' }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="موبایل">
+                      <span dir="ltr">{{ lead.mobile }}</span>
+                    </a-descriptions-item>
+                    <a-descriptions-item label="تلفن">
+                      <span dir="ltr">{{ lead.phone || '—' }}</span>
+                    </a-descriptions-item>
+                    <a-descriptions-item label="شهر">{{ lead.city || '—' }}</a-descriptions-item>
+                    <a-descriptions-item label="منطقه">
+                      {{ lead.region || '—' }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="اینستاگرام">
+                      <span dir="ltr">{{ lead.instagram || '—' }}</span>
+                    </a-descriptions-item>
+                    <a-descriptions-item label="صنف">{{ lead.trade || '—' }}</a-descriptions-item>
+                    <a-descriptions-item label="منبع">
+                      {{ lead.source || '—' }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="وضعیت">{{ lead.stageName }}</a-descriptions-item>
+                    <a-descriptions-item label="کارشناس">
+                      {{ lead.assigneeName || '—' }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="تاریخ تولد">
+                      {{ formatDate(lead.birthDate) }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="تاریخ ثبت">
+                      {{ formatDate(lead.createdAt) }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="آخرین تماس">
+                      {{ formatDate(lead.lastContactAt) }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="پیگیری بعدی">
+                      {{ formatDate(lead.nextFollowUpAt) }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="روز در مرحله">
+                      {{ toFaDigits(lead.daysInStage) }}
+                    </a-descriptions-item>
+                    <a-descriptions-item
+                      v-if="lead.addresses?.length"
+                      label="آدرس‌ها"
+                      :span="2"
+                    >
+                      <div v-for="(addr, i) in lead.addresses" :key="i">{{ addr }}</div>
+                    </a-descriptions-item>
+                    <a-descriptions-item v-if="lead.notes" label="یادداشت" :span="2">
+                      {{ lead.notes }}
+                    </a-descriptions-item>
+                  </a-descriptions>
+                </template>
 
-        <article v-if="!editing" class="m-card">
-          <header class="m-card-h">
-            <h3>یادداشت</h3>
-            <button class="m-ico" type="button" aria-label="ویرایش یادداشت" @click="startEdit">
-              <UiIcon name="pencil" :size="16" />
-            </button>
-          </header>
-          <p class="m-note">{{ lead.notes?.trim() || 'یادداشتی ثبت نشده است.' }}</p>
-        </article>
+                <template v-if="!editing">
+                  <a-divider orientation="right">فعالیت‌های مرتبط</a-divider>
+                  <a-list
+                    v-if="activities.length"
+                    :data-source="activities"
+                    item-layout="horizontal"
+                  >
+                    <template #renderItem="{ item }">
+                      <a-list-item>
+                        <a-list-item-meta>
+                          <template #title>
+                            <RouterLink
+                              :to="{ name: 'activity-detail', params: { id: item.id } }"
+                            >
+                              {{ item.title }}
+                            </RouterLink>
+                          </template>
+                          <template #description>
+                            {{ item.typeDef?.name || ACTIVITY_TYPE_LABELS[item.type] }}
+                            · {{ item.assignee?.fullName || 'بدون مسئول' }}
+                            · {{ formatDate(item.dueAt) }}
+                            ·
+                            {{
+                              item.status === 'done'
+                                ? 'انجام شد'
+                                : item.status === 'canceled'
+                                  ? 'لغو شده'
+                                  : 'باز'
+                            }}
+                          </template>
+                        </a-list-item-meta>
+                      </a-list-item>
+                    </template>
+                  </a-list>
+                  <a-empty v-else description="فعالیت مرتبطی نیست." />
+
+                  <a-divider orientation="right">جدول زمانی</a-divider>
+                  <a-timeline v-if="lead.events.length">
+                    <a-timeline-item v-for="ev in lead.events" :key="ev.id">
+                      <a-typography-text strong>{{ ev.title }}</a-typography-text>
+                      <div>
+                        <a-typography-text type="secondary">
+                          {{ formatDate(ev.createdAt) }}
+                        </a-typography-text>
+            </div>
+                      <a-typography-paragraph v-if="ev.body" type="secondary">
+                        {{ ev.body }}
+                      </a-typography-paragraph>
+                    </a-timeline-item>
+                  </a-timeline>
+                  <a-empty
+                    v-else
+                    description="رویدادی ثبت نشده. تماس، یادداشت یا پیگیری اضافه کنید."
+                  />
+
+                  <a-divider v-if="narrow" orientation="right">خلاصه فعالیت</a-divider>
+                  <a-list v-if="narrow && feed.length" :data-source="feed">
+                    <template #renderItem="{ item }">
+                      <a-list-item>
+                        <a-list-item-meta :title="item.title" :description="item.by" />
+                        <template #actions>
+                          <a-typography-text type="secondary">
+                            {{ feedParts(item.at).day }}
+                            {{ feedParts(item.at).time }}
+                          </a-typography-text>
+                        </template>
+                      </a-list-item>
+                    </template>
+                  </a-list>
+                  <RouterLink
+                    v-if="narrow"
+                    :to="{ name: 'activities' }"
+                    custom
+                    v-slot="{ navigate }"
+                  >
+                    <a-button type="link" @click="navigate">
+                      مشاهده همه فعالیت‌ها
+                    </a-button>
+                  </RouterLink>
+                  <RouterLink
+                    v-if="narrow"
+                    :to="{ name: 'activity-new' }"
+                    custom
+                    v-slot="{ navigate }"
+                  >
+                    <a-button type="dashed" block @click="navigate">
+                      <template #icon><PlusOutlined /></template>
+                      ایجاد فعالیت
+                    </a-button>
+                  </RouterLink>
+                </template>
+              </a-card>
 
         <RelatedTasksPanel
           v-if="!editing"
-          class="fancy"
           :entity="{ type: 'lead', id: lead.id, label: lead.title }"
           empty-title="هنوز کاری برای این لید ثبت نشده."
           empty-hint="برای پیگیری بهتر، یک تسک ایجاد کنید."
         />
+            </a-col>
 
-        <article v-if="!editing" class="m-card">
-          <header class="m-card-h">
-            <h3>
-              <span class="m-ico static"><UiIcon name="clock" :size="16" /></span>
-              فعالیت‌ها
-            </h3>
-            <RouterLink class="m-add" :to="{ name: 'activity-new' }">
-              ایجاد فعالیت
-              <UiIcon name="plus" :size="14" />
-            </RouterLink>
-          </header>
-          <ol v-if="feed.length" class="m-feed">
-            <li v-for="row in feed" :key="row.key">
-              <span class="m-feed-ic"><UiIcon name="document" :size="16" /></span>
-              <div class="m-feed-body">
-                <strong>{{ row.title }}</strong>
-                <small>{{ row.by }}</small>
-              </div>
-              <time>
-                <b>{{ feedParts(row.at).day }}</b>
-                <span>{{ feedParts(row.at).time }}</span>
-              </time>
-            </li>
-          </ol>
-          <p v-else class="m-note">هنوز فعالیتی ثبت نشده است.</p>
-          <RouterLink class="m-all" :to="{ name: 'activities' }">
-            مشاهده همه فعالیت‌ها
-            <UiIcon name="arrow-left" :size="14" />
-          </RouterLink>
-        </article>
-      </div>
+            <a-col :xs="24" :lg="7" :xl="6">
+              <a-affix v-if="!narrow" :offset-top="24">
+                <a-card title="اقدامات سریع" :bordered="false">
+                  <a-form layout="vertical">
+                    <a-divider orientation="right">پیامک</a-divider>
+                    <a-button
+                      block
+                      :disabled="!lead.mobile"
+                      @click="smsOpen = true"
+                    >
+                      <template #icon><MessageOutlined /></template>
+                      ارسال پیامک
+                    </a-button>
 
-      <div class="layout">
-        <div class="main">
-          <UiCard class="info-card" title="اطلاعات لید">
-            <div v-if="editing" class="edit-grid">
-              <UiField label="عنوان" required>
-                <UiInput v-model="editForm.title" />
-              </UiField>
-              <UiField label="مالک/مخاطب">
-                <UiInput v-model="editForm.contactName" />
-              </UiField>
-              <UiField label="موبایل" required>
-                <UiInput v-model="editForm.mobile" dir="ltr" />
-              </UiField>
-              <UiField label="تلفن">
-                <UiInput v-model="editForm.phone" dir="ltr" />
-              </UiField>
-              <UiField label="شهر">
-                <UiInput v-model="editForm.city" />
-              </UiField>
-              <UiField label="منطقه">
-                <UiInput v-model="editForm.region" />
-              </UiField>
-              <UiField label="منبع">
-                <UiInput v-model="editForm.source" />
-              </UiField>
-              <UiField label="اینستاگرام">
-                <UiInput v-model="editForm.instagram" dir="ltr" />
-              </UiField>
-              <UiField label="تاریخ تولد">
-                <JalaliDateInput v-model="editForm.birthDate" mode="date" />
-              </UiField>
-              <UiField label="صنف">
-                <UiInput v-model="editForm.trade" />
-              </UiField>
-              <UiField label="یادداشت" class="full">
-                <UiInput v-model="editForm.notes" />
-              </UiField>
-              <div class="edit-actions full">
-                <UiButton size="sm" :loading="busy" @click="saveEdit">ذخیره</UiButton>
-                <UiButton size="sm" variant="ghost" :disabled="busy" @click="editing = false">
-                  انصراف
-                </UiButton>
-              </div>
-            </div>
-            <dl v-else class="meta">
-              <div><dt>نام</dt><dd>{{ lead.title }}</dd></div>
-              <div><dt>مالک/مخاطب</dt><dd>{{ lead.contactName || '—' }}</dd></div>
-              <div><dt>موبایل</dt><dd dir="ltr">{{ lead.mobile }}</dd></div>
-              <div><dt>تلفن</dt><dd dir="ltr">{{ lead.phone || '—' }}</dd></div>
-              <div><dt>شهر</dt><dd>{{ lead.city || '—' }}</dd></div>
-              <div><dt>منطقه</dt><dd>{{ lead.region || '—' }}</dd></div>
-              <div><dt>اینستاگرام</dt><dd dir="ltr">{{ lead.instagram || '—' }}</dd></div>
-              <div><dt>صنف</dt><dd>{{ lead.trade || '—' }}</dd></div>
-              <div><dt>منبع</dt><dd>{{ lead.source || '—' }}</dd></div>
-              <div><dt>وضعیت</dt><dd>{{ lead.stageName }}</dd></div>
-              <div><dt>کارشناس</dt><dd>{{ lead.assigneeName || '—' }}</dd></div>
-              <div><dt>تاریخ تولد</dt><dd>{{ formatDate(lead.birthDate) }}</dd></div>
-              <div><dt>تاریخ ثبت</dt><dd>{{ formatDate(lead.createdAt) }}</dd></div>
-              <div><dt>آخرین تماس</dt><dd>{{ formatDate(lead.lastContactAt) }}</dd></div>
-              <div><dt>پیگیری بعدی</dt><dd>{{ formatDate(lead.nextFollowUpAt) }}</dd></div>
-              <div><dt>روز در مرحله</dt><dd>{{ toFaDigits(lead.daysInStage) }}</dd></div>
-              <div v-if="lead.addresses?.length" class="full">
-                <dt>آدرس‌ها</dt>
-                <dd>
-                  <p v-for="(addr, i) in lead.addresses" :key="i" class="addr-line">{{ addr }}</p>
-                </dd>
-              </div>
-              <div v-if="lead.notes" class="full">
-                <dt>یادداشت</dt>
-                <dd>{{ lead.notes }}</dd>
-              </div>
-            </dl>
-          </UiCard>
+                    <a-divider orientation="right">تغییر وضعیت</a-divider>
+                    <a-form-item label="وضعیت">
+                      <a-select
+                        v-model:value="stageId"
+                        style="width: 100%"
+                        :options="stages.map((s) => ({ value: s.id, label: s.name }))"
+                      />
+                    </a-form-item>
+                    <a-button block :disabled="busy" :loading="busy" @click="changeStage">
+                      اعمال وضعیت
+                    </a-button>
 
-          <RelatedTasksPanel
-            v-if="!narrow"
-            :entity="{ type: 'lead', id: lead.id, label: lead.title }"
-          />
+                    <template v-if="isAdmin">
+                      <a-divider orientation="right">تخصیص کارشناس</a-divider>
+                      <a-form-item label="کارشناس">
+                        <a-select
+                          v-model:value="assigneeId"
+                          allow-clear
+                          placeholder="انتخاب…"
+                          style="width: 100%"
+                          :options="users.map((u) => ({ value: u.id, label: u.fullName }))"
+                        />
+                      </a-form-item>
+                      <a-button
+                        block
+                        :disabled="busy || !assigneeId"
+                        :loading="busy"
+                        @click="assignLead"
+                      >
+                        تخصیص
+                      </a-button>
+                    </template>
 
-          <UiCard v-if="activities.length" class="desk-only" title="فعالیت‌های مرتبط">
-            <ul class="lead-acts">
-              <li v-for="a in activities" :key="a.id">
-                <RouterLink :to="{ name: 'activity-detail', params: { id: a.id } }">
-                  <strong>{{ a.title }}</strong>
-                </RouterLink>
-                <span class="muted">
-                  {{ a.typeDef?.name || ACTIVITY_TYPE_LABELS[a.type] }}
-                  · {{ a.assignee?.fullName || 'بدون مسئول' }}
-                  · {{ formatDate(a.dueAt) }}
-                  · {{ a.status === 'done' ? 'انجام شد' : a.status === 'canceled' ? 'لغو شده' : 'باز' }}
-                </span>
-              </li>
-            </ul>
-          </UiCard>
+                    <a-divider orientation="right">ثبت تماس</a-divider>
+                    <a-form-item label="نتیجه">
+                      <a-input
+                        v-model:value="callOutcome"
+                        placeholder="مثلاً پاسخ داد / اشغال"
+                        style="width: 100%"
+                      />
+                    </a-form-item>
+                    <a-form-item label="توضیح">
+                      <a-textarea
+                        v-model:value="callBody"
+                        :rows="4"
+                        placeholder="خلاصه مکالمه"
+                        style="width: 100%"
+                      />
+                    </a-form-item>
+                    <a-form-item label="پیگیری بعدی">
+                      <JalaliDateInput
+                        v-model="callFollowUp"
+                        mode="datetime"
+                        style="width: 100%"
+                      />
+                    </a-form-item>
+                    <a-button block :disabled="busy" :loading="busy" @click="logCall">
+                      ثبت تماس
+                    </a-button>
 
-          <UiCard class="desk-only" title="جدول زمانی">
-            <ul v-if="lead.events.length" class="timeline">
-              <li v-for="ev in lead.events" :key="ev.id">
-                <strong>{{ ev.title }}</strong>
-                <span class="muted">{{ formatDate(ev.createdAt) }}</span>
-                <p v-if="ev.body">{{ ev.body }}</p>
-              </li>
-            </ul>
-            <UiEmptyState
-              v-else
-              title="رویدادی ثبت نشده."
-              description="تماس، یادداشت یا پیگیری اضافه کنید."
-            />
-          </UiCard>
-        </div>
+                    <a-divider orientation="right">یادداشت</a-divider>
+                    <a-form-item label="متن">
+                      <a-input
+                        v-model:value="noteBody"
+                        placeholder="یادداشت…"
+                        style="width: 100%"
+                      />
+                    </a-form-item>
+                    <a-button
+                      block
+                      :disabled="busy || !noteBody.trim()"
+                      :loading="busy"
+                      @click="addNote"
+                    >
+                      ثبت یادداشت
+                    </a-button>
 
-        <aside class="side">
-          <button class="sheet-close" type="button" @click="moreOpen = false">بستن</button>
-          <UiCard title="پیامک">
-            <UiButton size="sm" :disabled="!lead.mobile" @click="smsOpen = true; moreOpen = false">
+                    <a-divider orientation="right">پیگیری بعدی</a-divider>
+                    <a-form-item label="زمان">
+                      <JalaliDateInput
+                        v-model="followUpAt"
+                        mode="datetime"
+                        style="width: 100%"
+                      />
+                    </a-form-item>
+                    <a-form-item label="توضیح">
+                      <a-input
+                        v-model:value="followUpBody"
+                        placeholder="اختیاری"
+                        style="width: 100%"
+                      />
+                    </a-form-item>
+                    <a-button
+                      block
+                      type="primary"
+                      :disabled="busy || !followUpAt"
+                      :loading="busy"
+                      @click="setFollowUp"
+                    >
+                      ذخیره پیگیری
+                    </a-button>
+                  </a-form>
+
+                  <a-divider orientation="right">خلاصه</a-divider>
+                  <a-descriptions :column="1" size="small" bordered>
+                    <a-descriptions-item label="وضعیت">
+                      {{ lead.stageName }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="کارشناس">
+                      {{ lead.assigneeName || '—' }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="پیگیری بعدی">
+                      {{ formatDate(lead.nextFollowUpAt) }}
+                    </a-descriptions-item>
+                    <a-descriptions-item label="روز در مرحله">
+                      {{ toFaDigits(lead.daysInStage) }}
+                    </a-descriptions-item>
+                  </a-descriptions>
+                </a-card>
+              </a-affix>
+            </a-col>
+          </a-row>
+
+          <a-drawer
+            v-model:open="moreOpen"
+            title="اقدامات سریع"
+            placement="bottom"
+            :height="'85vh'"
+          >
+            <a-form layout="vertical">
+              <a-divider orientation="right">پیامک</a-divider>
+              <a-button
+                block
+                :disabled="!lead.mobile"
+                @click="smsOpen = true; moreOpen = false"
+              >
               ارسال پیامک
-            </UiButton>
-          </UiCard>
-          <UiCard title="تغییر وضعیت">
-            <UiField label="وضعیت">
-              <UiSelect v-model="stageId">
-                <option v-for="s in stages" :key="s.id" :value="s.id">
-                  {{ s.name }}
-                </option>
-              </UiSelect>
-            </UiField>
-            <UiButton size="sm" :disabled="busy" @click="changeStage">اعمال</UiButton>
-          </UiCard>
+              </a-button>
 
-          <UiCard v-if="isAdmin" title="تخصیص کارشناس">
-            <UiField label="کارشناس">
-              <UiSelect v-model="assigneeId">
-                <option value="">انتخاب…</option>
-                <option v-for="u in users" :key="u.id" :value="u.id">
-                  {{ u.fullName }}
-                </option>
-              </UiSelect>
-            </UiField>
-            <UiButton size="sm" :disabled="busy || !assigneeId" @click="assignLead">
+              <a-divider orientation="right">تغییر وضعیت</a-divider>
+              <a-form-item label="وضعیت">
+                <a-select
+                  v-model:value="stageId"
+                  style="width: 100%"
+                  :options="stages.map((s) => ({ value: s.id, label: s.name }))"
+                />
+              </a-form-item>
+              <a-button block :disabled="busy" @click="changeStage">اعمال وضعیت</a-button>
+
+              <template v-if="isAdmin">
+                <a-divider orientation="right">تخصیص کارشناس</a-divider>
+                <a-form-item label="کارشناس">
+                  <a-select
+                    v-model:value="assigneeId"
+                    allow-clear
+                    placeholder="انتخاب…"
+                    style="width: 100%"
+                    :options="users.map((u) => ({ value: u.id, label: u.fullName }))"
+                  />
+                </a-form-item>
+                <a-button
+                  block
+                  :disabled="busy || !assigneeId"
+                  @click="assignLead"
+                >
               تخصیص
-            </UiButton>
-          </UiCard>
+                </a-button>
+              </template>
 
-          <UiCard title="ثبت تماس">
-            <UiField label="نتیجه">
-              <UiInput v-model="callOutcome" placeholder="مثلاً پاسخ داد / اشغال" />
-            </UiField>
-            <UiField label="توضیح">
-              <UiTextarea v-model="callBody" :rows="4" placeholder="خلاصه مکالمه" />
-            </UiField>
-            <UiField label="پیگیری بعدی">
-              <JalaliDateInput v-model="callFollowUp" mode="datetime" />
-            </UiField>
-            <UiButton size="sm" :disabled="busy" @click="logCall">ثبت تماس</UiButton>
-          </UiCard>
+              <a-divider orientation="right">ثبت تماس</a-divider>
+              <a-form-item label="نتیجه">
+                <a-input
+                  v-model:value="callOutcome"
+                  placeholder="مثلاً پاسخ داد / اشغال"
+                  style="width: 100%"
+                />
+              </a-form-item>
+              <a-form-item label="توضیح">
+                <a-textarea
+                  v-model:value="callBody"
+                  :rows="4"
+                  placeholder="خلاصه مکالمه"
+                  style="width: 100%"
+                />
+              </a-form-item>
+              <a-form-item label="پیگیری بعدی">
+                <JalaliDateInput
+                  v-model="callFollowUp"
+                  mode="datetime"
+                  style="width: 100%"
+                />
+              </a-form-item>
+              <a-button block :disabled="busy" @click="logCall">ثبت تماس</a-button>
 
-          <UiCard title="یادداشت">
-            <UiField label="متن">
-              <UiInput v-model="noteBody" placeholder="یادداشت…" />
-            </UiField>
-            <UiButton size="sm" :disabled="busy || !noteBody.trim()" @click="addNote">
+              <a-divider orientation="right">یادداشت</a-divider>
+              <a-form-item label="متن">
+                <a-input
+                  v-model:value="noteBody"
+                  placeholder="یادداشت…"
+                  style="width: 100%"
+                />
+              </a-form-item>
+              <a-button
+                block
+                :disabled="busy || !noteBody.trim()"
+                @click="addNote"
+              >
               ثبت یادداشت
-            </UiButton>
-          </UiCard>
+              </a-button>
 
-          <UiCard title="پیگیری بعدی">
-            <UiField label="زمان">
-              <JalaliDateInput v-model="followUpAt" mode="datetime" />
-            </UiField>
-            <UiField label="توضیح">
-              <UiInput v-model="followUpBody" placeholder="اختیاری" />
-            </UiField>
-            <UiButton size="sm" :disabled="busy || !followUpAt" @click="setFollowUp">
+              <a-divider orientation="right">پیگیری بعدی</a-divider>
+              <a-form-item label="زمان">
+                <JalaliDateInput
+                  v-model="followUpAt"
+                  mode="datetime"
+                  style="width: 100%"
+                />
+              </a-form-item>
+              <a-form-item label="توضیح">
+                <a-input
+                  v-model:value="followUpBody"
+                  placeholder="اختیاری"
+                  style="width: 100%"
+                />
+              </a-form-item>
+              <a-button
+                block
+                type="primary"
+                :disabled="busy || !followUpAt"
+                @click="setFollowUp"
+              >
               ذخیره پیگیری
-            </UiButton>
-          </UiCard>
-        </aside>
-      </div>
+              </a-button>
+            </a-form>
+          </a-drawer>
+
       <SmsComposeModal
         :open="smsOpen"
         title="ارسال پیامک"
@@ -796,594 +1043,7 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
         @close="smsOpen = false"
       />
     </template>
-  </section>
+      </a-spin>
+    </a-col>
+  </a-row>
 </template>
-
-<style scoped>
-.page {
-  display: grid;
-  gap: 1rem;
-}
-
-.layout {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
-  align-items: start;
-}
-
-.main,
-.side {
-  display: grid;
-  gap: 1rem;
-}
-
-.edit-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem 1rem;
-}
-.edit-grid .full {
-  grid-column: 1 / -1;
-}
-.edit-actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.meta {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem 1rem;
-  margin: 0;
-}
-
-.meta .full {
-  grid-column: 1 / -1;
-}
-
-.meta dt {
-  font-size: 0.75rem;
-  color: var(--muted);
-  margin-bottom: 0.15rem;
-}
-
-.meta dd {
-  margin: 0;
-  font-weight: 500;
-}
-
-.addr-line {
-  margin: 0 0 0.25rem;
-}
-
-.addr-line:last-child {
-  margin-bottom: 0;
-}
-
-.lead-acts {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.6rem;
-}
-
-.lead-acts li {
-  display: grid;
-  gap: 0.15rem;
-  padding-bottom: 0.55rem;
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.lead-acts li:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.lead-acts a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.lead-acts a:hover strong {
-  color: var(--accent, #0f766e);
-}
-
-.lead-acts .muted {
-  font-size: 0.78rem;
-}
-
-.timeline {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.85rem;
-}
-
-.timeline li {
-  display: grid;
-  gap: 0.2rem;
-  padding-bottom: 0.85rem;
-  border-bottom: 1px solid var(--line);
-}
-
-.timeline li:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.timeline p {
-  margin: 0;
-  color: var(--ink);
-}
-
-.native {
-  width: 100%;
-  min-height: var(--control-h);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0 0.65rem;
-  font: inherit;
-  background: #fff;
-  box-sizing: border-box;
-}
-
-.side :deep(.ui-card) {
-  display: grid;
-  gap: 0.65rem;
-}
-
-.muted {
-  color: var(--muted);
-  font-size: 0.85rem;
-}
-
-.ok {
-  color: #0f766e;
-  margin: 0;
-}
-
-.error {
-  color: #b91c1c;
-  margin: 0;
-}
-
-.sheet-back,
-.sheet-close,
-.mob {
-  display: none;
-}
-
-@media (max-width: 900px) {
-  .desk-only,
-  :deep(.desk-only) {
-    display: none !important;
-  }
-
-  .layout {
-    display: none;
-    grid-template-columns: 1fr;
-  }
-
-  .editing .layout,
-  .more-open .layout {
-    display: grid;
-  }
-
-  .more-open:not(.editing) .main {
-    display: none;
-  }
-
-  :deep(.info-card) {
-    display: none;
-  }
-
-  .editing :deep(.info-card) {
-    display: block;
-  }
-
-  .meta,
-  .edit-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .mob {
-    display: grid;
-    gap: 0.75rem;
-    width: 100%;
-    min-width: 0;
-  }
-
-  .m-hero,
-  .m-card,
-  .m-top,
-  .m-id,
-  .m-actions,
-  .m-grid,
-  .m-name-row,
-  .mob :deep(.related) {
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  .m-hero,
-  .m-card,
-  .mob :deep(.related) {
-    background: #fff;
-    border: 1px solid #e7eef2;
-    border-radius: 18px;
-    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
-  }
-
-  .m-hero {
-    display: grid;
-    gap: 0.85rem;
-    padding: 0.95rem 0.9rem 0.85rem;
-  }
-
-  .m-top {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    gap: 0.7rem;
-    align-items: start;
-  }
-
-  .m-mark {
-    width: 52px;
-    height: 52px;
-    border-radius: 16px;
-    display: grid;
-    place-items: center;
-    background: #e7f6f1;
-    color: #0f766e;
-  }
-
-  .m-id {
-    min-width: 0;
-    display: grid;
-    gap: 0.35rem;
-    padding-top: 0.1rem;
-  }
-
-  .m-name-row {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.4rem;
-  }
-
-  .m-name-row h2 {
-    margin: 0;
-    min-width: 0;
-    font-size: 1.15rem;
-    font-weight: 800;
-    line-height: 1.35;
-    color: #0f172a;
-  }
-
-  .m-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3rem;
-    padding: 0.12rem 0.55rem;
-    border-radius: 999px;
-    background: #e7f6f1;
-    color: #0f766e;
-    font-size: 0.72rem;
-    font-weight: 700;
-  }
-
-  .m-pill i {
-    width: 6px;
-    height: 6px;
-    border-radius: 999px;
-    background: #14b8a6;
-  }
-
-  .m-phone {
-    justify-self: start;
-    width: auto;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    border: 0;
-    background: none;
-    padding: 0;
-    color: #64748b;
-    font: inherit;
-    font-size: 0.86rem;
-    font-weight: 600;
-    cursor: pointer;
-  }
-
-  .m-phone em {
-    font-style: normal;
-    color: #0f766e;
-    font-size: 0.72rem;
-  }
-
-  .m-back {
-    width: 32px;
-    height: 32px;
-    display: grid;
-    place-items: center;
-    color: #94a3b8;
-  }
-
-  .m-actions,
-  .m-actions.converted {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr)) 36px;
-    gap: 0.35rem;
-  }
-
-  .m-actions .solid {
-    grid-column: 1 / -1;
-  }
-
-  .m-btn {
-    min-width: 0;
-    min-height: 40px;
-    border: 0;
-    border-radius: 12px;
-    background: #f3f5f7;
-    color: #334155;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.3rem;
-    padding: 0 0.45rem;
-    font: inherit;
-    font-size: 0.74rem;
-    font-weight: 700;
-    white-space: nowrap;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .m-btn.mint {
-    background: #e7f6f1;
-    color: #0f766e;
-  }
-
-  .m-btn.solid {
-    background: #12856a;
-    color: #fff;
-  }
-
-  .m-btn.solid:disabled {
-    opacity: 0.6;
-  }
-
-  .m-btn.icon {
-    width: 40px;
-    padding: 0;
-  }
-
-  .m-card {
-    padding: 0.9rem 0.85rem 0.85rem;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: 0.75rem;
-  }
-
-  .m-card-h {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    min-width: 0;
-  }
-
-  .m-card-h h3 {
-    margin: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    font-size: 0.98rem;
-    font-weight: 800;
-    color: #0f172a;
-  }
-
-  .m-ico {
-    width: 32px;
-    height: 32px;
-    border: 0;
-    border-radius: 10px;
-    background: #e7f6f1;
-    color: #0f766e;
-    display: grid;
-    place-items: center;
-    cursor: pointer;
-  }
-
-  .m-ico.static {
-    cursor: default;
-  }
-
-  .m-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.45rem;
-    margin: 0;
-  }
-
-  .cell {
-    min-width: 0;
-    border: 1px solid #eef2f5;
-    border-radius: 12px;
-    padding: 0.55rem 0.6rem 0.6rem;
-    background: #fff;
-  }
-
-  .cell.wide {
-    grid-column: 1 / -1;
-  }
-
-  .cell.hot {
-    background: #e8f7f1;
-    border-color: #d7f0e6;
-  }
-
-  .cell.hot dt,
-  .cell.hot :deep(.ico) {
-    color: #0f766e;
-  }
-
-  .cell dt {
-    display: flex;
-    align-items: center;
-    gap: 0.28rem;
-    margin: 0 0 0.28rem;
-    color: #94a3b8;
-    font-size: 0.7rem;
-    font-weight: 600;
-  }
-
-  .cell dd {
-    margin: 0;
-    color: #0f172a;
-    font-size: 0.84rem;
-    font-weight: 700;
-    overflow-wrap: anywhere;
-    text-align: start;
-  }
-
-  .cell dd[dir='ltr'] {
-    text-align: right;
-  }
-
-  .m-note {
-    margin: 0;
-    min-width: 0;
-    color: #334155;
-    font-size: 0.86rem;
-    line-height: 1.7;
-    overflow-wrap: anywhere;
-  }
-
-  .m-add {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.2rem;
-    border-radius: 999px;
-    background: #e7f6f1;
-    color: #0f766e;
-    text-decoration: none;
-    font-size: 0.75rem;
-    font-weight: 700;
-    padding: 0.35rem 0.7rem;
-  }
-
-  .m-feed {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 0.7rem;
-  }
-
-  .m-feed li {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    gap: 0.6rem;
-    align-items: center;
-  }
-
-  .m-feed-ic {
-    width: 36px;
-    height: 36px;
-    border-radius: 12px;
-    background: #e7f6f1;
-    color: #0f766e;
-    display: grid;
-    place-items: center;
-  }
-
-  .m-feed-body {
-    min-width: 0;
-    display: grid;
-    gap: 0.1rem;
-  }
-
-  .m-feed-body strong {
-    overflow-wrap: anywhere;
-    font-size: 0.84rem;
-    font-weight: 800;
-    color: #0f172a;
-  }
-
-  .m-feed-body small {
-    color: #94a3b8;
-    font-size: 0.72rem;
-  }
-
-  .m-feed time {
-    display: grid;
-    justify-items: end;
-    gap: 0.1rem;
-    color: #64748b;
-    font-size: 0.72rem;
-  }
-
-  .m-feed time b {
-    font-weight: 700;
-    color: #334155;
-  }
-
-  .m-all {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-    color: #64748b;
-    text-decoration: none;
-    font-size: 0.78rem;
-    font-weight: 700;
-  }
-
-  .side {
-    display: none;
-  }
-
-  .sheet-back {
-    display: block;
-    position: fixed;
-    inset: 0;
-    z-index: 60;
-    border: 0;
-    background: rgba(15, 23, 42, 0.35);
-  }
-
-  .more-open .side {
-    display: grid;
-    position: fixed;
-    z-index: 70;
-    inset-inline: 0;
-    bottom: 0;
-    max-height: min(78vh, 640px);
-    overflow: auto;
-    gap: 0.75rem;
-    margin: 0;
-    padding: 0.85rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom));
-    background: #f8fafc;
-    border-radius: 18px 18px 0 0;
-    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
-  }
-
-  .sheet-close {
-    display: inline-flex;
-    justify-self: start;
-    border: 0;
-    background: #fff;
-    border-radius: 999px;
-    padding: 0.35rem 0.8rem;
-    font: inherit;
-    font-weight: 700;
-    color: #334155;
-  }
-}
-</style>
diff --git a/apps/web/src/views/LeadsView.vue b/apps/web/src/views/LeadsView.vue
index b2e5b90..6a27fce 100644
--- a/apps/web/src/views/LeadsView.vue
+++ b/apps/web/src/views/LeadsView.vue
@@ -2,6 +2,54 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
+import {
+  Alert as AAlert,
+  Avatar as AAvatar,
+  Button as AButton,
+  Card as ACard,
+  Checkbox as ACheckbox,
+  Col as ACol,
+  Dropdown as ADropdown,
+  Empty as AEmpty,
+  Flex as AFlex,
+  Form as AForm,
+  FormItem as AFormItem,
+  Grid,
+  Input as AInput,
+  InputSearch as AInputSearch,
+  Menu as AMenu,
+  MenuItem as AMenuItem,
+  Modal,
+  Modal as AModal,
+  Pagination as APagination,
+  RadioButton as ARadioButton,
+  RadioGroup as ARadioGroup,
+  Row as ARow,
+  Select as ASelect,
+  Space as ASpace,
+  Spin as ASpin,
+  Table as ATable,
+  Tag as ATag,
+  Typography,
+  Upload as AUpload,
+  message,
+  theme,
+} from 'ant-design-vue';
+import type { TableColumnsType, UploadProps } from 'ant-design-vue';
+import {
+  AppstoreOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  ExportOutlined,
+  FileExcelOutlined,
+  FilterOutlined,
+  MoreOutlined,
+  PhoneOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  UnorderedListOutlined,
+  UserOutlined,
+} from '@ant-design/icons-vue';
 import { api } from '@/lib/api';
 import {
   formatJalaliNumeric,
@@ -10,15 +58,7 @@ import {
 } from '@/lib/jalali';
 import { useAuthStore } from '@/stores/auth';
 import { canManageSettings } from '@/lib/roles';
-import {
-  UiBusyOverlay,
-  UiButton,
-  UiDropdownMenu,
-  UiEmptyState,
-  UiModal,
-  UiPageHeader,
-} from '@/components/ui';
-import UiIcon from '@/components/UiIcon.vue';
+import { registerTableColumns, useTableColumns } from '@/lib/tableColumns';
 import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
 import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
 import PhoneContactsImport from '@/components/PhoneContactsImport.vue';
@@ -41,11 +81,16 @@ import type {
 } from '@mento/shared';
 import { brand } from '@mento/shared';
 
+const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
+  Typography;
+const { token } = theme.useToken();
+const screens = Grid.useBreakpoint();
+const isMobile = computed(() => !screens.value.md);
+
 const PAGE_SIZE = 10;
 
 type SortKey = 'updated' | 'newest' | 'follow_up' | 'last_contact';
 type StageTint = 'mint' | 'amber' | 'peach' | 'sky' | 'violet' | 'rose' | 'teal';
-type RowIcon = 'building' | 'bag' | 'briefcase' | 'users' | 'target';
 
 /** ردیف آمار صفحه لیدها — ترتیب و نام‌ها مطابق طرح */
 const LEAD_STAT_DEFS: Array<{
@@ -121,8 +166,19 @@ const rowMenuId = ref<string | null>(null);
 const logoMenuId = ref<string | null>(null);
 const logoUrls = ref<Record<string, string>>({});
 const logoBusyId = ref<string | null>(null);
-const logoFileInput = ref<HTMLInputElement | null>(null);
 const logoTargetId = ref<string | null>(null);
+const leadCols = useTableColumns(() => 'leads');
+const LEAD_COL_LABELS = [
+  'نام / شرکت',
+  'شماره تماس',
+  'شهر / منطقه',
+  'منبع لید',
+  'تاریخ ثبت',
+  'وضعیت',
+  'مسئول',
+  'آخرین فعالیت',
+  'اقدامات',
+] as const;
 const assignOpen = ref(false);
 const stageOpen = ref(false);
 const assignUserId = ref('');
@@ -146,7 +202,6 @@ const createForm = ref({
 });
 const contactPickerSupported = isContactPickerSupported();
 const pickingContact = ref(false);
-const contactFileInput = ref<HTMLInputElement | null>(null);
 const sourceOpen = ref(false);
 const pickOpen = ref(false);
 const pickDrafts = ref<PhoneContactDraft[]>([]);
@@ -190,11 +245,6 @@ const rangeFrom = computed(() =>
 const rangeTo = computed(() =>
   Math.min(page.value * PAGE_SIZE, total.value),
 );
-const allSelected = computed(
-  () =>
-    Boolean(data.value?.items.length) &&
-    data.value!.items.every((l) => selected.value.has(l.id)),
-);
 const selectedIds = computed(() => [...selected.value]);
 
 const sortLabels: Record<SortKey, string> = {
@@ -223,9 +273,6 @@ const stageCards = computed((): LeadStatCard[] => {
   });
 });
 
-const pairStatCards = computed(() => stageCards.value.filter((c) => c.slot === 'pair'));
-const soloStatCards = computed(() => stageCards.value.filter((c) => c.slot === 'solo'));
-
 const totalLeadsCount = computed(() => {
   if (stats.value?.total != null) return stats.value.total;
   return stages.value.reduce((sum, s) => sum + (s.leadCount ?? 0), 0) || total.value;
@@ -250,21 +297,6 @@ function selectStatCard(card: LeadStatCard) {
   setStageFilter(isStatActive(card) ? '' : card.stageId);
 }
 
-const pageNumbers = computed(() => {
-  const totalPages = pageCount.value;
-  const current = page.value;
-  if (totalPages <= 5) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
-  }
-  let start = Math.max(1, current - 2);
-  let end = start + 4;
-  if (end > totalPages) {
-    end = totalPages;
-    start = Math.max(1, end - 4);
-  }
-  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-});
-
 function stageTint(color: string | null | undefined): StageTint {
   const c = (color || '').toLowerCase();
   if (c === 'amber' || c === 'yellow' || c === 'orange') return 'amber';
@@ -294,13 +326,6 @@ function stageTintForLead(lead: LeadDto): StageTint {
   return stageTint(stage?.color);
 }
 
-function rowIcon(lead: LeadDto): RowIcon {
-  const key = `${lead.trade || ''}${lead.source || ''}${lead.title}`;
-  let hash = 0;
-  for (let i = 0; i < key.length; i++) hash = (hash + key.charCodeAt(i) * (i + 1)) % 5;
-  return (['building', 'bag', 'briefcase', 'users', 'target'] as const)[hash]!;
-}
-
 function initials(name: string | null | undefined) {
   if (!name?.trim()) return '؟';
   const parts = name.trim().split(/\s+/).filter(Boolean);
@@ -385,16 +410,9 @@ async function loadLogos(items: LeadDto[]) {
 function openLogoPicker(leadId: string) {
   logoMenuId.value = null;
   logoTargetId.value = leadId;
-  logoFileInput.value?.click();
 }
 
-async function onLogoFile(ev: Event) {
-  const input = ev.target as HTMLInputElement;
-  const file = input.files?.[0];
-  const leadId = logoTargetId.value;
-  input.value = '';
-  logoTargetId.value = null;
-  if (!file || !leadId) return;
+async function uploadLeadLogo(leadId: string, file: File) {
   logoBusyId.value = leadId;
   error.value = '';
   try {
@@ -416,6 +434,7 @@ async function onLogoFile(ev: Event) {
     });
     logoUrls.value = { ...logoUrls.value, [leadId]: URL.createObjectURL(blob) };
     okMsg.value = `لوگوی «${updated.title}» ذخیره شد.`;
+    message.success(okMsg.value);
   } catch (e) {
     error.value = axios.isAxiosError(e)
       ? apiErrorMessage(e, 'آپلود لوگو ناموفق بود.')
@@ -433,30 +452,40 @@ function apiErrorMessage(e: unknown, fallback: string) {
   return fallback;
 }
 
-async function removeLeadLogo(leadId: string) {
+function removeLeadLogo(leadId: string) {
   logoMenuId.value = null;
-  if (!confirm('لوگوی این لید حذف شود؟')) return;
-  logoBusyId.value = leadId;
-  error.value = '';
-  try {
-    await api.delete(`/leads/${leadId}/logo`);
-    const prev = logoUrls.value[leadId];
-    if (prev) URL.revokeObjectURL(prev);
-    const next = { ...logoUrls.value };
-    delete next[leadId];
-    logoUrls.value = next;
-    if (data.value) {
-      data.value = {
-        ...data.value,
-        items: data.value.items.map((l) => (l.id === leadId ? { ...l, hasLogo: false } : l)),
-      };
-    }
-    okMsg.value = 'لوگو حذف شد.';
-  } catch {
-    error.value = 'حذف لوگو ناموفق بود.';
-  } finally {
-    logoBusyId.value = null;
-  }
+  Modal.confirm({
+    title: 'لوگوی این لید حذف شود؟',
+    okText: 'حذف',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      logoBusyId.value = leadId;
+      error.value = '';
+      try {
+        await api.delete(`/leads/${leadId}/logo`);
+        const prev = logoUrls.value[leadId];
+        if (prev) URL.revokeObjectURL(prev);
+        const next = { ...logoUrls.value };
+        delete next[leadId];
+        logoUrls.value = next;
+        if (data.value) {
+          data.value = {
+            ...data.value,
+            items: data.value.items.map((l) =>
+              l.id === leadId ? { ...l, hasLogo: false } : l,
+            ),
+          };
+        }
+        okMsg.value = 'لوگو حذف شد.';
+        message.success(okMsg.value);
+      } catch {
+        error.value = 'حذف لوگو ناموفق بود.';
+      } finally {
+        logoBusyId.value = null;
+      }
+    },
+  });
 }
 
 function patchQuery(next: Record<string, string | undefined>) {
@@ -500,14 +529,6 @@ function toggleOne(id: string, checked: boolean) {
   selected.value = next;
 }
 
-function toggleAll(checked: boolean) {
-  if (!checked) {
-    selected.value = new Set();
-    return;
-  }
-  selected.value = new Set(data.value?.items.map((l) => l.id) ?? []);
-}
-
 const LONG_PRESS_MS = 450;
 const LONG_PRESS_MOVE_PX = 12;
 let cardPressTimer: ReturnType<typeof setTimeout> | null = null;
@@ -688,21 +709,31 @@ function openEdit(lead: LeadDto) {
   createOpen.value = true;
 }
 
-async function deleteLead(lead: LeadDto) {
+function deleteLead(lead: LeadDto) {
   rowMenuId.value = null;
-  if (!confirm(`لید «${lead.title}» حذف (بایگانی) شود؟`)) return;
-  busy.value = true;
-  error.value = '';
-  try {
-    await api.post('/leads/archive', { leadIds: [lead.id] });
-    okMsg.value = 'لید حذف شد.';
-    selected.value = new Set([...selected.value].filter((id) => id !== lead.id));
-    await load();
-  } catch {
-    error.value = 'حذف لید ناموفق بود.';
-  } finally {
-    busy.value = false;
-  }
+  Modal.confirm({
+    title: `لید «${lead.title}» حذف (بایگانی) شود؟`,
+    okText: 'حذف',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      busy.value = true;
+      error.value = '';
+      try {
+        await api.post('/leads/archive', { leadIds: [lead.id] });
+        okMsg.value = 'لید حذف شد.';
+        message.success(okMsg.value);
+        selected.value = new Set(
+          [...selected.value].filter((id) => id !== lead.id),
+        );
+        await load();
+      } catch {
+        error.value = 'حذف لید ناموفق بود.';
+      } finally {
+        busy.value = false;
+      }
+    },
+  });
 }
 
 function applyContactDraft(draft: PhoneContactDraft) {
@@ -757,7 +788,8 @@ function fillFromPhoneContact() {
     sourceOpen.value = true;
     return;
   }
-  contactFileInput.value?.click();
+  sourceOpen.value = true;
+  // help/vcf path opened via nested modal upload
 }
 
 async function pickFromDevice() {
@@ -777,7 +809,6 @@ async function pickFromDevice() {
     const message = e instanceof Error ? e.message : '';
     if (name === 'AbortError') return;
     if (message === 'CONTACT_PICKER_UNSUPPORTED' || name === 'NotSupportedError') {
-      contactFileInput.value?.click();
       return;
     }
     createError.value = 'انتخاب مخاطب از گوشی ناموفق بود.';
@@ -788,14 +819,14 @@ async function pickFromDevice() {
 
 function pickFromVcf() {
   sourceOpen.value = false;
-  contactFileInput.value?.click();
 }
 
-async function onContactVcfFile(ev: Event) {
-  const el = ev.target as HTMLInputElement;
-  const file = el.files?.[0];
-  el.value = '';
-  if (!file) return;
+const beforeContactVcfUpload: UploadProps['beforeUpload'] = (file) => {
+  void onContactVcfFile(file as File);
+  return false;
+};
+
+async function onContactVcfFile(file: File) {
   pickingContact.value = true;
   createError.value = '';
   try {
@@ -899,21 +930,30 @@ async function bulkStageSelected() {
   }
 }
 
-async function archiveSelected() {
+function archiveSelected() {
   if (!selectedIds.value.length) return;
-  if (!confirm(`${toFaDigits(selectedIds.value.length)} لید بایگانی شود؟`)) return;
-  busy.value = true;
-  error.value = '';
-  try {
-    await api.post('/leads/archive', { leadIds: selectedIds.value });
-    okMsg.value = `${toFaDigits(selectedIds.value.length)} لید بایگانی شد.`;
-    selected.value = new Set();
-    await load();
-  } catch {
-    error.value = 'بایگانی ناموفق بود.';
-  } finally {
-    busy.value = false;
-  }
+  const count = selectedIds.value.length;
+  Modal.confirm({
+    title: `${toFaDigits(count)} لید بایگانی شود؟`,
+    okText: 'بایگانی',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      busy.value = true;
+      error.value = '';
+      try {
+        await api.post('/leads/archive', { leadIds: selectedIds.value });
+        okMsg.value = `${toFaDigits(count)} لید بایگانی شد.`;
+        message.success(okMsg.value);
+        selected.value = new Set();
+        await load();
+      } catch {
+        error.value = 'بایگانی ناموفق بود.';
+      } finally {
+        busy.value = false;
+      }
+    },
+  });
 }
 
 async function exportExcel() {
@@ -1055,7 +1095,51 @@ watch(
   },
 );
 
+const tintColor = (tint: StageTint) => {
+  const map: Record<StageTint, string> = {
+    mint: 'success',
+    teal: 'cyan',
+    amber: 'warning',
+    peach: 'orange',
+    sky: 'processing',
+    violet: 'purple',
+    rose: 'error',
+  };
+  return map[tint] ?? 'default';
+};
+
+const tableColumns = computed<TableColumnsType<LeadDto>>(() => {
+  const all: TableColumnsType<LeadDto> = [
+    {
+      title: '',
+      key: 'select',
+      width: 48,
+    },
+    {
+      title: '#',
+      key: 'row',
+      width: 56,
+      customRender: ({ index }) => toFaDigits(rangeFrom.value + index),
+    },
+    { title: 'نام / شرکت', key: 'title', dataIndex: 'title' },
+    { title: 'شماره تماس', key: 'mobile', dataIndex: 'mobile' },
+    { title: 'شهر / منطقه', key: 'city' },
+    { title: 'منبع لید', key: 'source', dataIndex: 'source' },
+    { title: 'تاریخ ثبت', key: 'createdAt', dataIndex: 'createdAt' },
+    { title: 'وضعیت', key: 'stage', dataIndex: 'stageName' },
+    { title: 'مسئول', key: 'assignee', dataIndex: 'assigneeName' },
+    { title: 'آخرین فعالیت', key: 'activity' },
+    { title: 'اقدامات', key: 'actions', width: 140 },
+  ];
+  return all.filter((col) => {
+    const title = String(col.title ?? '');
+    if (!title || title === '#' || col.key === 'select') return true;
+    return leadCols.isVisible(title);
+  });
+});
+
 onMounted(async () => {
+  registerTableColumns('leads', [...LEAD_COL_LABELS]);
   await loadMeta();
   await load();
   const jobId = typeof route.query.jobId === 'string' ? route.query.jobId : '';
@@ -1069,553 +1153,21 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <section class="page" @click="closePopups">
-    <UiBusyOverlay :open="pageBusy" :message="busyMessage" />
-    <UiPageHeader
-      title="لیدها"
-      lead="مدیریت و پیگیری تمام لیدهای ورودی"
-    >
-      <template #actions>
-        <UiButton variant="ghost" size="sm" :disabled="busy" :loading="pageBusy && busyMessage.includes('خروجی')" @click.stop="exportExcel">
-          <span class="btn-full">خروجی اکسل</span>
-          <span class="btn-short">خروجی</span>
-        </UiButton>
-        <ExcelImportFlow
-          preview-path="/leads/import/preview"
-          import-path="/leads/import/file"
-          :disabled="busy"
-          @start="onExcelImportStart"
-          @done="onExcelImportDone"
-          @fail="onExcelImportFail"
-          @settled="onExcelImportSettled"
-        >
-          <template #default="{ loading }">
-            <UiButton variant="ghost" size="sm" :disabled="busy" :loading="loading">
-              <span class="btn-full">ورود از اکسل</span>
-              <span class="btn-short">ورود</span>
-            </UiButton>
-          </template>
-        </ExcelImportFlow>
-        <input
-          ref="logoFileInput"
-          type="file"
-          accept="image/jpeg,image/png,image/webp,image/gif,.jpg,.jpeg,.png,.webp,.gif"
-          hidden
-          @change="onLogoFile"
-        />
-        <PhoneContactsImport
-          target="leads"
-          :disabled="busy"
-          @start="onPhoneImportStart"
-          @done="onPhoneImportDone"
-          @fail="onPhoneImportFail"
-          @settled="onPhoneImportSettled"
-        >
-          <UiButton variant="ghost" size="sm" :disabled="busy">
-            <UiIcon name="phone" :size="15" />
-            <span class="btn-full">از مخاطبین گوشی</span>
-            <span class="btn-short">گوشی</span>
-          </UiButton>
-        </PhoneContactsImport>
-        <UiButton variant="primary" @click.stop="openCreate">
-          <UiIcon name="plus" :size="16" />
-          لید جدید
-        </UiButton>
-      </template>
-    </UiPageHeader>
-
-    <div class="stats" role="list">
-      <button
-        type="button"
-        class="stat-total"
-        :class="{ on: !stageId }"
-        role="listitem"
-        @click="setStageFilter('')"
-      >
-        <span class="stat-total-ico" aria-hidden="true">
-          <UiIcon name="users" :size="20" />
-        </span>
-        <span class="stat-total-body">
-          <span class="stat-label">همه لیدها</span>
-          <strong class="stat-num">{{ formatCount(totalLeadsCount) }}</strong>
-        </span>
-      </button>
-
-      <div class="stat-pair" role="group" aria-label="وضعیت‌های پیگیری">
-        <button
-          v-for="card in pairStatCards"
-          :key="card.key"
-          type="button"
-          class="stat-cell"
-          :class="{ on: isStatActive(card), wide: card.key === 'در حال پیگیری' }"
-          :disabled="!card.stageId"
-          @click="selectStatCard(card)"
-        >
-          <i class="stat-dot" :data-tint="card.tint" aria-hidden="true" />
-          <span class="stat-label">{{ card.label }}</span>
-          <strong class="stat-num">{{ formatCount(card.count) }}</strong>
-        </button>
-      </div>
-
-      <button
-        v-for="card in soloStatCards"
-        :key="card.key"
-        type="button"
-        class="stat-cell alone"
-        :class="{ on: isStatActive(card) }"
-        role="listitem"
-        :disabled="!card.stageId"
-        @click="selectStatCard(card)"
-      >
-        <i class="stat-dot" :data-tint="card.tint" aria-hidden="true" />
-        <span class="stat-label">{{ card.label }}</span>
-        <strong class="stat-num">{{ formatCount(card.count) }}</strong>
-      </button>
-    </div>
-
-    <div class="filters" @click.stop>
-      <div class="filters-start">
-        <span class="filters-label">
-          <UiIcon name="funnel" :size="16" />
-          فیلترها
-        </span>
-        <form class="search" @submit.prevent="onSearch">
-          <UiIcon name="search" :size="16" />
-          <input v-model="q" type="search" placeholder="جستجو..." />
-        </form>
-        <div class="filter-selects">
-          <select
-            class="filter-select"
-            :value="cityFilter"
-            @change="setCityFilter(($event.target as HTMLSelectElement).value)"
-          >
-            <option value="">همه مناطق</option>
-            <option v-for="c in cityOptions" :key="c" :value="c">{{ c }}</option>
-          </select>
-          <select
-            class="filter-select"
-            :value="sourceFilter"
-            @change="setSourceFilter(($event.target as HTMLSelectElement).value)"
-          >
-            <option value="">همه منابع</option>
-            <option v-for="s in sourceOptions" :key="s" :value="s">{{ s }}</option>
-          </select>
-          <select
-            class="filter-select"
-            :value="stageId"
-            @change="setStageFilter(($event.target as HTMLSelectElement).value)"
-          >
-            <option value="">همه وضعیت</option>
-            <option v-for="s in stages" :key="s.id" :value="s.id">{{ s.name }}</option>
-          </select>
+  <a-row :gutter="[24, 24]" @click="closePopups">
+    <a-col :span="24">
+      <a-flex justify="space-between" align="center" wrap="wrap" :gap="token.marginSM">
+        <div>
+          <a-typography-title :level="3" :style="{ margin: 0 }">لیدها</a-typography-title>
+          <a-typography-text type="secondary">
+            مدیریت و پیگیری تمام لیدهای ورودی
+          </a-typography-text>
         </div>
-      </div>
-      <div class="filters-end">
-        <div class="pop">
-          <button
-            class="sort-btn"
-            type="button"
-            @click.stop="sortOpen = !sortOpen"
-          >
-            <UiIcon name="trend" :size="15" />
-            {{ sortLabels[sort] }}
-          </button>
-          <ul v-if="sortOpen" class="menu">
-            <li v-for="(label, key) in sortLabels" :key="key">
-              <button
-                type="button"
-                :class="{ on: sort === key }"
-                @click.stop="setSort(key as SortKey)"
-              >
-                {{ label }}
-              </button>
-            </li>
-          </ul>
-        </div>
-        <TableColumnsMenu table-key="leads" align="end" />
-        <div class="view-toggle" title="نمای لیست / مسیر">
-          <button type="button" class="view-btn on" title="لیست">
-            <UiIcon name="list" :size="16" />
-          </button>
-          <RouterLink class="view-btn" :to="{ name: 'leads-board' }" title="مسیر لیدها">
-            <UiIcon name="grid" :size="16" />
-          </RouterLink>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="selectedIds.length" class="bulk-bar" @click.stop>
-      <span>{{ toFaDigits(selectedIds.length) }} مورد انتخاب‌شده</span>
-      <template v-if="isAdmin">
-        <div class="pop">
-          <UiButton size="sm" variant="ghost" @click="assignOpen = !assignOpen">
-            تخصیص
-          </UiButton>
-          <div v-if="assignOpen" class="menu panel">
-            <select v-model="assignUserId">
-              <option value="">انتخاب کارشناس…</option>
-              <option v-for="u in users" :key="u.id" :value="u.id">
-                {{ u.fullName }}
-              </option>
-            </select>
-            <UiButton size="sm" :disabled="!assignUserId || busy" @click="assignSelected">
-              اعمال
-            </UiButton>
-          </div>
-        </div>
-        <div class="pop">
-          <UiButton size="sm" variant="ghost" @click="stageOpen = !stageOpen">
-            تغییر وضعیت
-          </UiButton>
-          <div v-if="stageOpen" class="menu panel">
-            <select v-model="bulkStageId">
-              <option value="">انتخاب وضعیت…</option>
-              <option v-for="s in stages" :key="s.id" :value="s.id">
-                {{ s.name }}
-              </option>
-            </select>
-            <UiButton size="sm" :disabled="!bulkStageId || busy" @click="bulkStageSelected">
-              اعمال
-            </UiButton>
-          </div>
-        </div>
-      </template>
-      <UiButton size="sm" variant="ghost" :disabled="busy" @click="archiveSelected">
-        بایگانی
-      </UiButton>
-    </div>
-
-    <p
-      v-if="importJob && importJob.status !== 'done' && importJob.status !== 'completed' && importJob.status !== 'failed'"
-      class="ok"
-    >
-      ورود فایل: {{ toFaDigits(importJob.processedCount) }} / {{ toFaDigits(importJob.totalCount) }}
-    </p>
-    <p v-if="okMsg" class="ok">{{ okMsg }}</p>
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
-
-    <template v-else-if="data?.items.length">
-      <div class="cards">
-        <article
-          v-for="(lead, idx) in data.items"
-          :key="`m-${lead.id}`"
-          class="m-card"
-          :class="{ selected: selected.has(lead.id) }"
-          :data-tint="stageTintForLead(lead)"
-          @pointerdown="onCardPointerDown(lead.id, $event)"
-          @pointermove="onCardPointerMove"
-          @pointerup="onCardPointerEnd"
-          @pointercancel="onCardPointerEnd"
-          @contextmenu.prevent
-          @click="onCardClick(lead)"
-        >
-          <div class="m-head">
-            <span class="m-badge" :data-tint="stageTintForLead(lead)">
-              {{ toFaDigits(rangeFrom + idx) }}
-            </span>
-            <UiDropdownMenu
-              :open="logoMenuId === `m:${lead.id}`"
-              align="start"
-              @update:open="(v) => (logoMenuId = v ? `m:${lead.id}` : null)"
-            >
-              <template #trigger="{ toggle }">
-                <button
-                  type="button"
-                  class="row-ico"
-                  :class="{ busy: logoBusyId === lead.id }"
-                  :data-tint="stageTintForLead(lead)"
-                  :title="lead.hasLogo ? 'تغییر لوگو' : 'افزودن لوگو'"
-                  @click.stop="toggle"
-                >
-                  <img
-                    v-if="logoUrls[lead.id]"
-                    :src="logoUrls[lead.id]"
-                    :alt="lead.title"
-                    class="row-logo"
-                  />
-                  <UiIcon v-else :name="rowIcon(lead)" :size="16" />
-                </button>
-              </template>
-              <button type="button" @click="openLogoPicker(lead.id)">
-                {{ lead.hasLogo ? 'تغییر لوگو' : 'افزودن لوگو' }}
-              </button>
-              <button
-                v-if="lead.hasLogo"
-                type="button"
-                class="danger-item"
-                @click="removeLeadLogo(lead.id)"
-              >
-                حذف لوگو
-              </button>
-            </UiDropdownMenu>
-            <div class="m-title">
-              <strong class="name">{{ lead.title }}</strong>
-              <span v-if="lead.contactName" class="sub">{{ lead.contactName }}</span>
-            </div>
-            <UiDropdownMenu
-              :open="rowMenuId === `m:${lead.id}`"
-              align="end"
-              @update:open="(v) => (rowMenuId = v ? `m:${lead.id}` : null)"
-            >
-              <template #trigger="{ toggle }">
-                <button
-                  type="button"
-                  class="act-btn"
-                  title="بیشتر"
-                  @click.stop="toggle"
-                >
-                  <UiIcon name="dots-v" :size="16" />
-                </button>
-              </template>
-              <button type="button" @click="goDetail(lead.id)">مشاهده</button>
-              <button type="button" @click="openEdit(lead)">ویرایش</button>
-              <a :href="`tel:${lead.mobile}`">تماس</a>
-              <button type="button" class="danger-item" @click="deleteLead(lead)">
-                حذف
-              </button>
-            </UiDropdownMenu>
-          </div>
-
-          <div class="m-meta-row">
-            <button
-              v-if="lead.mobile"
-              type="button"
-              class="m-line m-phone"
-              dir="ltr"
-              @click.stop="callLead(lead)"
-            >
-              <UiIcon name="phone" :size="13" />
-              <span>{{ formatPhone(lead.mobile) }}</span>
-            </button>
-            <p v-if="lead.city || lead.region" class="m-line m-place">
-              <UiIcon name="building" :size="13" />
-              <span>{{ [lead.city, lead.region].filter(Boolean).join(' · ') }}</span>
-            </p>
-          </div>
-
-          <div class="m-foot">
-            <span v-if="lead.assigneeName" class="assignee">
-              <span class="avatar">{{ initials(lead.assigneeName) }}</span>
-              {{ lead.assigneeName }}
-            </span>
-            <span v-else class="muted-dash">بدون مسئول</span>
-            <span class="m-activity">{{ lastActivity(lead).when }}</span>
-          </div>
-
-          <div class="m-pills">
-            <span class="stage-pill" :data-tint="stageTintForLead(lead)">
-              {{ lead.stageName }}
-            </span>
-            <span v-if="lead.source" class="source-pill">{{ lead.source }}</span>
-          </div>
-        </article>
-      </div>
-
-      <div class="table-wrap">
-        <table v-table-cols="'leads'" class="data-table">
-          <thead>
-            <tr>
-              <th class="check-col">
-                <input
-                  type="checkbox"
-                  :checked="allSelected"
-                  @click.stop
-                  @change="toggleAll(($event.target as HTMLInputElement).checked)"
-                />
-              </th>
-              <th class="num-col">#</th>
-              <th class="icon-col"></th>
-              <th>نام / شرکت</th>
-              <th>شماره تماس</th>
-              <th>شهر / منطقه</th>
-              <th>منبع لید</th>
-              <th>تاریخ ثبت</th>
-              <th>وضعیت</th>
-              <th>مسئول</th>
-              <th>آخرین فعالیت</th>
-              <th class="actions-col">اقدامات</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(lead, idx) in data.items"
-              :key="lead.id"
-              class="row-click"
-              @click="goDetail(lead.id)"
-            >
-              <td class="check-col" @click.stop>
-                <input
-                  type="checkbox"
-                  :checked="selected.has(lead.id)"
-                  @change="toggleOne(lead.id, ($event.target as HTMLInputElement).checked)"
-                />
-              </td>
-              <td class="num-col">{{ toFaDigits(rangeFrom + idx) }}</td>
-              <td class="icon-col" @click.stop>
-                <UiDropdownMenu
-                  :open="logoMenuId === lead.id"
-                  align="start"
-                  @update:open="(v) => (logoMenuId = v ? lead.id : null)"
-                >
-                  <template #trigger="{ toggle }">
-                    <button
-                      type="button"
-                      class="row-ico"
-                      :class="{ busy: logoBusyId === lead.id }"
-                      :data-tint="stageTintForLead(lead)"
-                      :title="lead.hasLogo ? 'تغییر لوگو' : 'افزودن لوگو'"
-                      @click.stop="toggle"
-                    >
-                      <img
-                        v-if="logoUrls[lead.id]"
-                        :src="logoUrls[lead.id]"
-                        :alt="lead.title"
-                        class="row-logo"
-                      />
-                      <UiIcon v-else :name="rowIcon(lead)" :size="16" />
-                    </button>
-                  </template>
-                  <button type="button" @click="openLogoPicker(lead.id)">
-                    {{ lead.hasLogo ? 'تغییر لوگو' : 'افزودن لوگو' }}
-                  </button>
-                  <button
-                    v-if="lead.hasLogo"
-                    type="button"
-                    class="danger-item"
-                    @click="removeLeadLogo(lead.id)"
-                  >
-                    حذف لوگو
-                  </button>
-                </UiDropdownMenu>
-              </td>
-              <td>
-                <strong class="name">{{ lead.title }}</strong>
-                <span v-if="lead.contactName" class="sub">{{ lead.contactName }}</span>
-              </td>
-              <td class="phone" dir="ltr">{{ formatPhone(lead.mobile) }}</td>
-              <td>
-                <span class="city">{{ lead.city || '—' }}</span>
-                <span v-if="lead.region" class="sub">{{ lead.region }}</span>
-              </td>
-              <td>
-                <span v-if="lead.source" class="source-pill">{{ lead.source }}</span>
-                <span v-else class="muted-dash">—</span>
-              </td>
-              <td class="date-col">{{ formatJalaliNumeric(new Date(lead.createdAt)) }}</td>
-              <td>
-                <span class="stage-pill" :data-tint="stageTintForLead(lead)">
-                  {{ lead.stageName }}
-                </span>
-              </td>
-              <td>
-                <span v-if="lead.assigneeName" class="assignee">
-                  <span class="avatar">{{ initials(lead.assigneeName) }}</span>
-                  {{ lead.assigneeName }}
-                </span>
-                <span v-else class="muted-dash">—</span>
-              </td>
-              <td>
-                <span class="activity">
-                  <span class="activity-text">
-                    <strong>{{ lastActivity(lead).label }}</strong>
-                    <span class="sub">{{ lastActivity(lead).when }}</span>
-                  </span>
-                </span>
-              </td>
-              <td class="actions-col" @click.stop>
-                <div class="row-actions">
-                  <UiDropdownMenu
-                    :open="rowMenuId === lead.id"
-                    align="end"
-                    @update:open="(v) => (rowMenuId = v ? lead.id : null)"
-                  >
-                    <template #trigger="{ toggle }">
-                      <button
-                        type="button"
-                        class="act-btn"
-                        title="بیشتر"
-                        @click.stop="toggle"
-                      >
-                        <UiIcon name="dots-v" :size="16" />
-                      </button>
-                    </template>
-                    <button type="button" @click="goDetail(lead.id)">مشاهده</button>
-                    <button type="button" @click="openEdit(lead)">ویرایش</button>
-                    <a :href="`tel:${lead.mobile}`">تماس</a>
-                    <button type="button" class="danger-item" @click="deleteLead(lead)">
-                      حذف
-                    </button>
-                  </UiDropdownMenu>
-                  <button
-                    type="button"
-                    class="act-btn call"
-                    title="تماس"
-                    @click="callLead(lead)"
-                  >
-                    <UiIcon name="phone" :size="15" />
-                  </button>
-                  <button
-                    type="button"
-                    class="act-btn"
-                    title="یادداشت / جزئیات"
-                    @click="goDetail(lead.id)"
-                  >
-                    <UiIcon name="chat" :size="15" />
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <nav class="pager" aria-label="صفحه‌بندی">
-        <div class="pager-pages">
-          <button
-            type="button"
-            class="page-nav"
-            :disabled="page <= 1"
-            @click="setPage(page - 1)"
-          >
-            <UiIcon name="chevron-right" :size="16" />
-          </button>
-          <button
-            v-for="n in pageNumbers"
-            :key="n"
-            type="button"
-            class="page-num"
-            :class="{ on: n === page }"
-            @click="setPage(n)"
-          >
-            {{ toFaDigits(n) }}
-          </button>
-          <button
-            type="button"
-            class="page-nav"
-            :disabled="page >= pageCount"
-            @click="setPage(page + 1)"
-          >
-            <UiIcon name="chevron-left" :size="16" />
-          </button>
-        </div>
-        <p class="pager-info">
-          نمایش {{ toFaDigits(rangeFrom) }} تا {{ toFaDigits(rangeTo) }} از
-          {{ formatCount(total) }} لید
-        </p>
-      </nav>
-    </template>
-
-    <UiEmptyState
-      v-else-if="!loading"
-      title="لیدی ثبت نشده است."
-      description="از ورود فایل استفاده کنید یا لید جدید بسازید."
-    >
-      <template #action>
-        <div class="empty-actions">
-          <UiButton variant="primary" @click="openCreate">ثبت لید جدید</UiButton>
+        <a-space :size="8" wrap>
+          <a-button :disabled="busy" :loading="pageBusy && busyMessage.includes('خروجی')" @click.stop="exportExcel">
+            <template #icon><ExportOutlined /></template>
+            خروجی اکسل
+          </a-button>
           <ExcelImportFlow
-            v-if="isAdmin"
             preview-path="/leads/import/preview"
             import-path="/leads/import/file"
             :disabled="busy"
@@ -1624,1501 +1176,631 @@ onBeforeUnmount(() => {
             @fail="onExcelImportFail"
             @settled="onExcelImportSettled"
           >
-            <template #default="{ loading }">
-              <UiButton variant="ghost" :disabled="busy" :loading="loading">ورود از فایل</UiButton>
+            <template #default="{ loading: excelLoading }">
+              <a-button :disabled="busy" :loading="excelLoading">
+                <template #icon><FileExcelOutlined /></template>
+                ورود از اکسل
+              </a-button>
             </template>
           </ExcelImportFlow>
-        </div>
-      </template>
-    </UiEmptyState>
+          <PhoneContactsImport
+            target="leads"
+            :disabled="busy"
+            @start="onPhoneImportStart"
+            @done="onPhoneImportDone"
+            @fail="onPhoneImportFail"
+            @settled="onPhoneImportSettled"
+          >
+            <a-button :disabled="busy">
+              <template #icon><PhoneOutlined /></template>
+              از مخاطبین گوشی
+            </a-button>
+          </PhoneContactsImport>
+          <a-button type="primary" @click.stop="openCreate">
+            <template #icon><PlusOutlined /></template>
+            لید جدید
+          </a-button>
+        </a-space>
+      </a-flex>
+    </a-col>
 
-    <UiModal :open="createOpen" :title="createModalTitle" @close="createOpen = false">
-      <form class="create-form" @submit.prevent="submitCreate">
-        <label>
-          نام / شرکت
-          <input v-model="createForm.title" placeholder="مثلاً فروشگاه آریا" />
-        </label>
-        <label>
-          نام مخاطب
-          <input v-model="createForm.contactName" placeholder="مهدی احمدی" />
-        </label>
-        <label class="mobile-field">
-          <span class="label-row">
-            موبایل
-            <button
-              type="button"
-              class="from-contact"
-              :disabled="pickingContact || createBusy"
-              @click="fillFromPhoneContact"
-            >
-              <UiIcon name="phone" :size="14" />
-              {{ pickingContact ? '…' : 'از مخاطبین' }}
-            </button>
-          </span>
-          <input
-            v-model="createForm.mobile"
-            required
-            class="ltr"
-            placeholder="09121234567"
-            inputmode="tel"
-          />
-        </label>
-        <input
-          ref="contactFileInput"
-          class="hidden-file"
-          type="file"
-          accept=".vcf,text/vcard,text/x-vcard"
-          @change="onContactVcfFile"
-        />
-        <div class="create-grid">
-          <label>
-            شهر
-            <input v-model="createForm.city" placeholder="تهران" />
-          </label>
-          <label>
-            منطقه
-            <input v-model="createForm.region" placeholder="بازار" />
-          </label>
-        </div>
-        <label>
-          منبع
-          <input v-model="createForm.source" placeholder="سایت، نمایشگاه…" />
-        </label>
-        <label>
-          پیج اینستاگرام
-          <input
-            v-model="createForm.instagram"
-            class="ltr"
-            dir="ltr"
-            placeholder="@username یا لینک"
-          />
-        </label>
-        <div class="addresses">
-          <div class="addresses-head">
-            <span>آدرس‌ها</span>
-            <button type="button" class="add-addr" @click="addCreateAddress">+ افزودن آدرس</button>
-          </div>
-          <div v-for="(_, idx) in createForm.addresses" :key="idx" class="addr-row">
-            <input
-              v-model="createForm.addresses[idx]"
-              :placeholder="idx === 0 ? 'آدرس اصلی' : `آدرس ${idx + 1}`"
+    <a-col :span="24">
+      <a-row :gutter="[12, 12]">
+        <a-col :xs="12" :sm="8" :md="4">
+          <a-card
+            :bordered="true"
+            hoverable
+            :style="{
+              borderColor: !stageId ? token.colorPrimary : undefined,
+              cursor: 'pointer',
+            }"
+            @click="setStageFilter('')"
+          >
+            <a-flex align="center" :gap="12">
+              <a-avatar :style="{ background: token.colorPrimaryBg, color: token.colorPrimary }">
+                <template #icon><UserOutlined /></template>
+              </a-avatar>
+              <div>
+                <a-typography-text type="secondary">همه لیدها</a-typography-text>
+                <div>
+                  <a-typography-text strong>{{ formatCount(totalLeadsCount) }}</a-typography-text>
+                </div>
+              </div>
+            </a-flex>
+          </a-card>
+        </a-col>
+        <a-col
+          v-for="card in stageCards"
+          :key="card.key"
+          :xs="12"
+          :sm="8"
+          :md="4"
+        >
+          <a-card
+            :bordered="true"
+            hoverable
+            :style="{
+              borderColor: isStatActive(card) ? token.colorPrimary : undefined,
+              cursor: card.stageId ? 'pointer' : 'not-allowed',
+              opacity: card.stageId ? 1 : 0.55,
+            }"
+            @click="card.stageId && selectStatCard(card)"
+          >
+            <a-typography-text type="secondary">{{ card.label }}</a-typography-text>
+            <div>
+              <a-typography-text strong>{{ formatCount(card.count) }}</a-typography-text>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </a-col>
+
+    <a-col :span="24" @click.stop>
+      <a-card :bordered="true">
+        <a-flex justify="space-between" align="center" wrap="wrap" :gap="12">
+          <a-flex align="center" wrap="wrap" :gap="8" flex="1 1 auto">
+            <a-space :size="8">
+              <FilterOutlined />
+              <a-typography-text strong>فیلترها</a-typography-text>
+            </a-space>
+            <a-select
+              :value="sort"
+              style="width: 11rem"
+              :options="Object.entries(sortLabels).map(([value, label]) => ({ value, label }))"
+              @update:value="(v) => setSort(String(v ?? 'updated') as SortKey)"
             />
-            <button
-              type="button"
-              class="rm-addr"
-              aria-label="حذف آدرس"
-              @click="removeCreateAddress(idx)"
+            <a-input-search
+              v-model:value="q"
+              allow-clear
+              placeholder="جستجو..."
+              enter-button="جستجو"
+              style="width: 16rem; max-width: 100%"
+              @search="onSearch"
             >
-              ×
-            </button>
-          </div>
-        </div>
-        <div class="create-grid">
-          <label>
-            وضعیت
-            <select v-model="createForm.stageId">
-              <option v-for="s in stages" :key="s.id" :value="s.id">{{ s.name }}</option>
-            </select>
-          </label>
-          <label>
-            مسئول
-            <select v-model="createForm.assigneeId">
-              <option value="">بدون مسئول</option>
-              <option v-for="u in users" :key="u.id" :value="u.id">{{ u.fullName }}</option>
-            </select>
-          </label>
-        </div>
-        <p v-if="createError" class="error">{{ createError }}</p>
-      </form>
+              <template #prefix><SearchOutlined /></template>
+            </a-input-search>
+            <a-select
+              :value="cityFilter || undefined"
+              allow-clear
+              placeholder="همه مناطق"
+              style="width: 9.5rem"
+              :options="cityOptions.map((c) => ({ value: c, label: c }))"
+              @update:value="(v) => setCityFilter(v == null ? '' : String(v))"
+            />
+            <a-select
+              :value="sourceFilter || undefined"
+              allow-clear
+              placeholder="همه منابع"
+              style="width: 9.5rem"
+              :options="sourceOptions.map((s) => ({ value: s, label: s }))"
+              @update:value="(v) => setSourceFilter(v == null ? '' : String(v))"
+            />
+            <a-select
+              :value="stageId || undefined"
+              allow-clear
+              placeholder="همه وضعیت"
+              style="width: 9.5rem"
+              :options="stages.map((s) => ({ value: s.id, label: s.name }))"
+              @update:value="(v) => setStageFilter(v == null ? '' : String(v))"
+            />
+          </a-flex>
+          <a-space :size="8">
+            <TableColumnsMenu table-key="leads" align="end" />
+            <a-radio-group
+              value="list"
+              button-style="solid"
+              @change="(e: any) => { if (e?.target?.value === 'board') void router.push({ name: 'leads-board' }) }"
+            >
+              <a-radio-button value="list">
+                <UnorderedListOutlined />
+              </a-radio-button>
+              <a-radio-button value="board">
+                <AppstoreOutlined />
+              </a-radio-button>
+            </a-radio-group>
+          </a-space>
+        </a-flex>
+      </a-card>
+    </a-col>
 
-      <UiModal nest :open="sourceOpen" title="از مخاطبین" @close="closeSource">
-        <p class="pick-lead">
-          چند مخاطب را از دفترچه یا فایل بگیرید؛ بعد در لیست الفبایی جستجو کنید و یکی را برای پر کردن موبایل انتخاب کنید.
-        </p>
-        <div class="pick-choose">
-          <UiButton variant="primary" block :disabled="pickingContact" @click="pickFromDevice">
-            <UiIcon name="phone" :size="16" />
-            از دفترچه تلفن
-          </UiButton>
-          <UiButton variant="ghost" block :disabled="pickingContact" @click="pickFromVcf">
-            از فایل .vcf
-          </UiButton>
-        </div>
-        <template #footer>
-          <UiButton variant="ghost" @click="closeSource">انصراف</UiButton>
+    <a-col v-if="selectedIds.length" :span="24" @click.stop>
+      <a-card :bordered="false" :style="{ background: token.colorPrimaryBg }">
+        <a-space :size="8" wrap>
+          <a-typography-text>
+            {{ toFaDigits(selectedIds.length) }} مورد انتخاب‌شده
+          </a-typography-text>
+          <template v-if="isAdmin">
+            <a-select
+              v-model:value="assignUserId"
+              placeholder="تخصیص به کارشناس"
+              style="min-width: 12rem"
+              allow-clear
+              :options="users.map((u) => ({ value: u.id, label: u.fullName }))"
+            />
+            <a-button :disabled="!assignUserId || busy" @click="assignSelected">اعمال تخصیص</a-button>
+            <a-select
+              v-model:value="bulkStageId"
+              placeholder="تغییر وضعیت"
+              style="min-width: 12rem"
+              allow-clear
+              :options="stages.map((s) => ({ value: s.id, label: s.name }))"
+            />
+            <a-button :disabled="!bulkStageId || busy" @click="bulkStageSelected">اعمال وضعیت</a-button>
+          </template>
+          <a-button danger :disabled="busy" @click="archiveSelected">بایگانی</a-button>
+        </a-space>
+      </a-card>
+    </a-col>
+
+    <a-col
+      v-if="importJob && importJob.status !== 'done' && importJob.status !== 'completed' && importJob.status !== 'failed'"
+      :span="24"
+    >
+      <a-alert
+        type="info"
+        show-icon
+        :message="`ورود فایل: ${toFaDigits(importJob.processedCount)} / ${toFaDigits(importJob.totalCount)}`"
+      />
+    </a-col>
+    <a-col v-if="okMsg" :span="24">
+      <a-alert type="success" show-icon :message="okMsg" closable @close="okMsg = ''" />
+    </a-col>
+    <a-col v-if="error" :span="24">
+      <a-alert type="error" show-icon :message="error" closable @close="error = ''" />
+    </a-col>
+
+    <a-col :span="24">
+      <a-spin :spinning="loading || pageBusy" :tip="pageBusy ? busyMessage : undefined">
+        <template v-if="data?.items.length">
+          <a-row v-if="isMobile" :gutter="[12, 12]">
+            <a-col v-for="(lead, idx) in data.items" :key="`m-${lead.id}`" :span="24">
+              <a-card
+                :bordered="true"
+                hoverable
+                :style="{
+                  borderColor: selected.has(lead.id) ? token.colorPrimary : undefined,
+                  background: selected.has(lead.id) ? token.colorPrimaryBg : undefined,
+                }"
+                @pointerdown="onCardPointerDown(lead.id, $event)"
+                @pointermove="onCardPointerMove"
+                @pointerup="onCardPointerEnd"
+                @pointercancel="onCardPointerEnd"
+                @click="onCardClick(lead)"
+              >
+                <a-flex justify="space-between" align="start" :gap="8">
+                  <a-space :size="8" align="start">
+                    <a-tag>{{ toFaDigits(rangeFrom + idx) }}</a-tag>
+                    <a-dropdown
+                      :trigger="['click']"
+                      @click.stop
+                    >
+                      <a-avatar
+                        :src="logoUrls[lead.id]"
+                        :style="{ cursor: 'pointer' }"
+                        @click.stop
+                      >
+                        {{ initials(lead.title) }}
+                      </a-avatar>
+                      <template #overlay>
+                        <a-menu>
+                          <a-menu-item
+                            @click="openLogoPicker(lead.id)"
+                          >
+                            <a-upload
+                              :show-upload-list="false"
+                              accept="image/jpeg,image/png,image/webp,image/gif,.jpg,.jpeg,.png,.webp,.gif"
+                              :before-upload="(f) => { logoTargetId = lead.id; void uploadLeadLogo(lead.id, f as File); return false; }"
+                            >
+                              {{ lead.hasLogo ? 'تغییر لوگو' : 'افزودن لوگو' }}
+                            </a-upload>
+                          </a-menu-item>
+                          <a-menu-item
+                            v-if="lead.hasLogo"
+                            danger
+                            @click="removeLeadLogo(lead.id)"
+                          >
+                            حذف لوگو
+                          </a-menu-item>
+                        </a-menu>
+                      </template>
+                    </a-dropdown>
+                    <div>
+                      <a-typography-text strong>{{ lead.title }}</a-typography-text>
+                      <div v-if="lead.contactName">
+                        <a-typography-text type="secondary">{{ lead.contactName }}</a-typography-text>
+                      </div>
+                    </div>
+                  </a-space>
+                  <a-dropdown :trigger="['click']" @click.stop>
+                    <a-button type="text" @click.stop>
+                      <template #icon><MoreOutlined /></template>
+                    </a-button>
+                    <template #overlay>
+                      <a-menu>
+                        <a-menu-item @click="goDetail(lead.id)">مشاهده</a-menu-item>
+                        <a-menu-item @click="openEdit(lead)">ویرایش</a-menu-item>
+                        <a-menu-item>
+                          <a :href="`tel:${lead.mobile}`">تماس</a>
+                        </a-menu-item>
+                        <a-menu-item danger @click="deleteLead(lead)">حذف</a-menu-item>
+                      </a-menu>
+                    </template>
+                  </a-dropdown>
+                </a-flex>
+                <a-flex justify="space-between" :gap="8" :style="{ marginTop: `${token.marginXS}px` }">
+                  <a-button
+                    v-if="lead.mobile"
+                    type="link"
+                    @click.stop="callLead(lead)"
+                  >
+                    <template #icon><PhoneOutlined /></template>
+                    <span dir="ltr">{{ formatPhone(lead.mobile) }}</span>
+                  </a-button>
+                  <a-typography-text v-if="lead.city || lead.region" type="secondary">
+                    {{ [lead.city, lead.region].filter(Boolean).join(' · ') }}
+                  </a-typography-text>
+                </a-flex>
+                <a-flex justify="space-between" :gap="8" :style="{ marginTop: `${token.marginXS}px` }">
+                  <a-space v-if="lead.assigneeName" :size="8">
+                    <a-avatar>{{ initials(lead.assigneeName) }}</a-avatar>
+                    <a-typography-text>{{ lead.assigneeName }}</a-typography-text>
+                  </a-space>
+                  <a-typography-text v-else type="secondary">بدون مسئول</a-typography-text>
+                  <a-typography-text type="secondary">{{ lastActivity(lead).when }}</a-typography-text>
+                </a-flex>
+                <a-flex :gap="8" wrap="wrap" :style="{ marginTop: `${token.marginXS}px` }">
+                  <a-tag :color="tintColor(stageTintForLead(lead))">{{ lead.stageName }}</a-tag>
+                  <a-tag v-if="lead.source">{{ lead.source }}</a-tag>
+                </a-flex>
+              </a-card>
+            </a-col>
+          </a-row>
+
+          <a-table
+            v-else
+            :columns="tableColumns"
+            :data-source="data.items"
+            :pagination="false"
+            :row-key="(r: LeadDto) => r.id"
+            :scroll="{ x: 1100 }"
+            :custom-row="(record: LeadDto) => ({ onClick: () => goDetail(record.id) })"
+          >
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'select'">
+                <a-checkbox
+                  :checked="selected.has((record as LeadDto).id)"
+                  @click.stop
+                  @change="(e: any) => toggleOne((record as LeadDto).id, !!e?.target?.checked)"
+                />
+              </template>
+              <template v-else-if="column.key === 'title'">
+                <a-typography-text strong>{{ (record as LeadDto).title }}</a-typography-text>
+                <div v-if="(record as LeadDto).contactName">
+                  <a-typography-text type="secondary">{{ (record as LeadDto).contactName }}</a-typography-text>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'mobile'">
+                <span dir="ltr">{{ formatPhone((record as LeadDto).mobile) }}</span>
+              </template>
+              <template v-else-if="column.key === 'city'">
+                <a-typography-text>{{ (record as LeadDto).city || '—' }}</a-typography-text>
+                <div v-if="(record as LeadDto).region">
+                  <a-typography-text type="secondary">{{ (record as LeadDto).region }}</a-typography-text>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'source'">
+                <a-tag v-if="(record as LeadDto).source">{{ (record as LeadDto).source }}</a-tag>
+                <a-typography-text v-else type="secondary">—</a-typography-text>
+              </template>
+              <template v-else-if="column.key === 'createdAt'">
+                {{ formatJalaliNumeric(new Date((record as LeadDto).createdAt)) }}
+              </template>
+              <template v-else-if="column.key === 'stage'">
+                <a-tag :color="tintColor(stageTintForLead(record as LeadDto))">
+                  {{ (record as LeadDto).stageName }}
+                </a-tag>
+              </template>
+              <template v-else-if="column.key === 'assignee'">
+                <a-space v-if="(record as LeadDto).assigneeName" :size="8">
+                  <a-avatar>{{ initials((record as LeadDto).assigneeName) }}</a-avatar>
+                  {{ (record as LeadDto).assigneeName }}
+                </a-space>
+                <a-typography-text v-else type="secondary">—</a-typography-text>
+              </template>
+              <template v-else-if="column.key === 'activity'">
+                <div>
+                  <a-typography-text strong>{{ lastActivity(record as LeadDto).label }}</a-typography-text>
+                </div>
+                <a-typography-text type="secondary">
+                  {{ lastActivity(record as LeadDto).when }}
+                </a-typography-text>
+              </template>
+              <template v-else-if="column.key === 'actions'">
+                <a-space :size="4" @click.stop>
+                  <a-dropdown :trigger="['click']">
+                    <a-button type="text">
+                      <template #icon><MoreOutlined /></template>
+                    </a-button>
+                    <template #overlay>
+                      <a-menu>
+                        <a-menu-item @click="goDetail((record as LeadDto).id)">مشاهده</a-menu-item>
+                        <a-menu-item @click="openEdit(record as LeadDto)">ویرایش</a-menu-item>
+                        <a-menu-item>
+                          <a :href="`tel:${(record as LeadDto).mobile}`">تماس</a>
+                        </a-menu-item>
+                        <a-menu-item danger @click="deleteLead(record as LeadDto)">حذف</a-menu-item>
+                      </a-menu>
+                    </template>
+                  </a-dropdown>
+                  <a-button type="text" @click="callLead(record as LeadDto)">
+                    <template #icon><PhoneOutlined /></template>
+                  </a-button>
+                  <a-button type="text" @click="goDetail((record as LeadDto).id)">
+                    <template #icon><EditOutlined /></template>
+                  </a-button>
+                </a-space>
+              </template>
+            </template>
+          </a-table>
+
+          <a-flex
+            justify="space-between"
+            align="center"
+            wrap="wrap"
+            :gap="12"
+            :style="{ marginTop: `${token.marginMD}px` }"
+          >
+            <a-pagination
+              :current="page"
+              :total="total"
+              :page-size="PAGE_SIZE"
+              :show-size-changer="false"
+              @change="(p: number) => setPage(p)"
+            />
+            <a-typography-text type="secondary">
+              نمایش {{ toFaDigits(rangeFrom) }} تا {{ toFaDigits(rangeTo) }} از
+              {{ formatCount(total) }} لید
+            </a-typography-text>
+          </a-flex>
         </template>
-      </UiModal>
 
-      <UiModal nest :open="pickOpen" title="انتخاب مخاطب" @close="closePick">
-        <p class="pick-lead">
+        <a-empty
+          v-else-if="!loading"
+          description="لیدی ثبت نشده است. از ورود فایل استفاده کنید یا لید جدید بسازید."
+        >
+          <a-space :size="8">
+            <a-button type="primary" @click="openCreate">ثبت لید جدید</a-button>
+            <ExcelImportFlow
+              v-if="isAdmin"
+              preview-path="/leads/import/preview"
+              import-path="/leads/import/file"
+              :disabled="busy"
+              @start="onExcelImportStart"
+              @done="onExcelImportDone"
+              @fail="onExcelImportFail"
+              @settled="onExcelImportSettled"
+            >
+              <template #default="{ loading: excelLoading }">
+                <a-button :disabled="busy" :loading="excelLoading">ورود از فایل</a-button>
+              </template>
+            </ExcelImportFlow>
+          </a-space>
+        </a-empty>
+      </a-spin>
+    </a-col>
+
+    <a-modal
+      v-model:open="createOpen"
+      :title="createModalTitle"
+      :confirm-loading="createBusy"
+      ok-text="ثبت"
+      cancel-text="انصراف"
+      @ok="submitCreate"
+    >
+      <a-form layout="vertical" :model="createForm" @click.stop>
+        <a-row :gutter="[16, 0]">
+          <a-col :xs="24" :md="12">
+            <a-form-item label="نام / شرکت">
+              <a-input v-model:value="createForm.title" placeholder="مثلاً فروشگاه آریا" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :md="12">
+            <a-form-item label="نام مخاطب">
+              <a-input v-model:value="createForm.contactName" placeholder="مهدی احمدی" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-item label="موبایل">
+              <template #extra>
+                <a-button
+                  type="link"
+                  :disabled="pickingContact || createBusy"
+                  @click="fillFromPhoneContact"
+                >
+                  <template #icon><PhoneOutlined /></template>
+                  {{ pickingContact ? '…' : 'از مخاطبین' }}
+                </a-button>
+              </template>
+              <a-input
+                v-model:value="createForm.mobile"
+                placeholder="09121234567"
+                inputmode="tel"
+                dir="ltr"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :md="12">
+            <a-form-item label="شهر">
+              <a-input v-model:value="createForm.city" placeholder="تهران" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :md="12">
+            <a-form-item label="منطقه">
+              <a-input v-model:value="createForm.region" placeholder="بازار" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :md="12">
+            <a-form-item label="منبع">
+              <a-input v-model:value="createForm.source" placeholder="سایت، نمایشگاه…" style="width: 100%" />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :md="12">
+            <a-form-item label="پیج اینستاگرام">
+              <a-input
+                v-model:value="createForm.instagram"
+                dir="ltr"
+                placeholder="@username یا لینک"
+                style="width: 100%"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-item label="آدرس‌ها">
+              <a-flex vertical :gap="8">
+                <a-flex
+                  v-for="(_, idx) in createForm.addresses"
+                  :key="idx"
+                  :gap="8"
+                  align="center"
+                >
+                  <a-input
+                    v-model:value="createForm.addresses[idx]"
+                    :placeholder="idx === 0 ? 'آدرس اصلی' : `آدرس ${idx + 1}`"
+                    style="width: 100%"
+                  />
+                  <a-button @click="removeCreateAddress(idx)">
+                    <template #icon><DeleteOutlined /></template>
+                  </a-button>
+                </a-flex>
+                <a-button type="dashed" block @click="addCreateAddress">+ افزودن آدرس</a-button>
+              </a-flex>
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :md="12">
+            <a-form-item label="وضعیت">
+              <a-select
+                v-model:value="createForm.stageId"
+                style="width: 100%"
+                :options="stages.map((s) => ({ value: s.id, label: s.name }))"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :xs="24" :md="12">
+            <a-form-item label="مسئول">
+              <a-select
+                v-model:value="createForm.assigneeId"
+                allow-clear
+                placeholder="بدون مسئول"
+                style="width: 100%"
+                :options="users.map((u) => ({ value: u.id, label: u.fullName }))"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-alert v-if="createError" type="error" show-icon :message="createError" />
+      </a-form>
+
+      <a-modal
+        v-model:open="sourceOpen"
+        title="از مخاطبین"
+        :footer="null"
+        @cancel="closeSource"
+      >
+        <a-typography-paragraph type="secondary">
+          چند مخاطب را از دفترچه یا فایل بگیرید؛ بعد در لیست الفبایی جستجو کنید و یکی را برای پر کردن موبایل انتخاب کنید.
+        </a-typography-paragraph>
+        <a-flex vertical :gap="8">
+          <a-button type="primary" block :disabled="pickingContact" @click="pickFromDevice">
+            <template #icon><PhoneOutlined /></template>
+            از دفترچه تلفن
+          </a-button>
+          <a-upload
+            :show-upload-list="false"
+            accept=".vcf,text/vcard,text/x-vcard"
+            :before-upload="beforeContactVcfUpload"
+          >
+            <a-button block :disabled="pickingContact" @click="pickFromVcf">از فایل .vcf</a-button>
+          </a-upload>
+        </a-flex>
+      </a-modal>
+
+      <a-modal
+        v-model:open="pickOpen"
+        title="انتخاب مخاطب"
+        :footer="null"
+        @cancel="closePick"
+      >
+        <a-typography-paragraph type="secondary">
           {{ toFaDigits(pickDrafts.length) }} مخاطب (مرتب‌شده الفبایی).
           یکی را انتخاب کنید تا موبایل (و در صورت خالی بودن، نام) پر شود.
-        </p>
-        <div class="pick-search">
-          <UiIcon name="search" :size="15" />
-          <input
-            v-model="pickQuery"
-            type="search"
-            placeholder="جستجو نام یا موبایل…"
-            autocomplete="off"
-          />
-        </div>
-        <ul v-if="visiblePickDrafts.length" class="pick-list">
-          <li v-for="row in visiblePickDrafts" :key="row.key">
-            <button type="button" class="pick-row" @click="choosePick(row)">
-              <span class="pick-avatar" aria-hidden="true">{{ row.fullName.slice(0, 1) }}</span>
-              <span class="pick-meta">
-                <strong>{{ row.fullName }}</strong>
-                <small>{{ draftLine(row) }}</small>
-              </span>
-            </button>
-          </li>
-        </ul>
-        <p v-else class="pick-empty">مخاطبی با این جستجو پیدا نشد.</p>
-        <template #footer>
-          <UiButton variant="ghost" @click="closePick">انصراف</UiButton>
-          <UiButton variant="ghost" @click="contactFileInput?.click()">فایل دیگر</UiButton>
-        </template>
-      </UiModal>
+        </a-typography-paragraph>
+        <a-input
+          v-model:value="pickQuery"
+          allow-clear
+          placeholder="جستجو نام یا موبایل…"
+          style="width: 100%; margin-bottom: 12px"
+        >
+          <template #prefix><SearchOutlined /></template>
+        </a-input>
+        <a-flex vertical :gap="8" :style="{ maxHeight: 'min(48vh, 360px)', overflow: 'auto' }">
+          <a-button
+            v-for="row in visiblePickDrafts"
+            :key="row.key"
+            block
+            @click="choosePick(row)"
+          >
+            <a-flex vertical align="start">
+              <a-typography-text strong>{{ row.fullName }}</a-typography-text>
+              <a-typography-text type="secondary">{{ draftLine(row) }}</a-typography-text>
+            </a-flex>
+          </a-button>
+          <a-typography-text v-if="!visiblePickDrafts.length" type="secondary">
+            مخاطبی با این جستجو پیدا نشد.
+          </a-typography-text>
+        </a-flex>
+        <a-space :size="8" :style="{ marginTop: `${token.marginSM}px` }">
+          <a-button @click="closePick">انصراف</a-button>
+          <a-upload
+            :show-upload-list="false"
+            accept=".vcf,text/vcard,text/x-vcard"
+            :before-upload="beforeContactVcfUpload"
+          >
+            <a-button>فایل دیگر</a-button>
+          </a-upload>
+        </a-space>
+      </a-modal>
 
       <template #footer>
-        <UiButton variant="ghost" :disabled="createBusy" @click="createOpen = false">
-          انصراف
-        </UiButton>
-        <UiButton variant="primary" :disabled="createBusy" @click="submitCreate">
+        <a-button :disabled="createBusy" @click="createOpen = false">انصراف</a-button>
+        <a-button type="primary" :disabled="createBusy" :loading="createBusy" @click="submitCreate">
           {{
-            createBusy
-              ? editingLeadId
-                ? 'در حال ذخیره…'
-                : 'در حال ثبت…'
-              : editingLeadId
-                ? 'ذخیره تغییرات'
-                : 'ثبت لید'
+            editingLeadId
+              ? 'ذخیره تغییرات'
+              : 'ثبت لید'
           }}
-        </UiButton>
+        </a-button>
       </template>
-    </UiModal>
-  </section>
+    </a-modal>
+  </a-row>
 </template>
-
-<style scoped>
-.page {
-  display: grid;
-  gap: 1rem;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  overflow-x: clip;
-  box-sizing: border-box;
-}
-
-.btn-short {
-  display: none;
-}
-
-.stats {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: stretch;
-  gap: 0.65rem;
-  width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-  padding-bottom: 2px;
-}
-
-.stat-total {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.7rem;
-  flex: 1.15 1 0;
-  min-width: 8.5rem;
-  min-height: 5.25rem;
-  padding: 0.7rem 0.85rem;
-  border: 1px solid #a7f3d0;
-  border-radius: 12px;
-  background: #ecfdf5;
-  cursor: pointer;
-  font: inherit;
-  text-align: start;
-  color: #047857;
-  box-shadow: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.stat-total:hover,
-.stat-total.on {
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
-  border-color: #6ee7b7;
-}
-
-.stat-total-ico {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 10px;
-  background: #fff;
-  color: #10b981;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
-  order: 0;
-}
-
-.stat-total-body {
-  display: grid;
-  gap: 0.15rem;
-  min-width: 0;
-  flex: 1;
-}
-
-.stat-total .stat-label {
-  color: #059669;
-  font-size: 0.8rem;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.stat-total .stat-num {
-  color: #047857;
-  font-size: 1.4rem;
-  font-weight: 800;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.1;
-}
-
-.stat-pair {
-  display: flex;
-  align-items: stretch;
-  flex: 2.2 1 0;
-  min-width: 14rem;
-  min-height: 5.25rem;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  overflow: hidden;
-  isolation: isolate;
-}
-
-.stat-pair .stat-cell {
-  flex: 1 1 0;
-  border: 0 !important;
-  border-radius: 0 !important;
-  min-width: 0;
-  min-height: 0;
-  box-shadow: none !important;
-  background: transparent;
-}
-
-.stat-pair .stat-cell.wide {
-  flex: 1.45 1 0;
-}
-
-.stat-pair .stat-cell + .stat-cell {
-  border-inline-start: 1px solid #e5e7eb !important;
-}
-
-.stat-pair .stat-cell:hover:not(:disabled) {
-  background: #f8fafc;
-}
-
-.stat-pair .stat-cell.on {
-  background: color-mix(in srgb, var(--accent-soft) 70%, #fff);
-}
-
-.stat-pair:has(.stat-cell.on) {
-  border-color: color-mix(in srgb, var(--accent) 35%, #e5e7eb);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-
-.stat-cell {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.12rem;
-  min-width: 5.5rem;
-  min-height: 5.25rem;
-  padding: 1.15rem 0.65rem 0.7rem;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  cursor: pointer;
-  font: inherit;
-  color: #0f172a;
-  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
-}
-
-.stat-cell.alone {
-  flex: 1 1 0;
-}
-
-.stat-cell:disabled {
-  opacity: 0.55;
-  cursor: default;
-}
-
-.stat-cell.alone:hover:not(:disabled),
-.stat-cell.alone.on {
-  border-color: color-mix(in srgb, var(--accent) 35%, #e5e7eb);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-
-.stat-dot {
-  position: absolute;
-  top: 0.65rem;
-  left: 0.7rem;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 999px;
-  background: #94a3b8;
-  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.2);
-}
-
-.stat-dot[data-tint='mint'],
-.stat-dot[data-tint='teal'] {
-  background: #22c55e;
-  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
-}
-.stat-dot[data-tint='amber'] {
-  background: #f59e0b;
-  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22);
-}
-.stat-dot[data-tint='peach'] {
-  background: #fbbf24;
-  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22);
-}
-.stat-dot[data-tint='sky'] {
-  background: #0ea5e9;
-  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);
-}
-.stat-dot[data-tint='violet'] {
-  background: #8b5cf6;
-  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.22);
-}
-.stat-dot[data-tint='rose'] {
-  background: #ef4444;
-  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
-}
-
-.stat-cell .stat-label {
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: #334155;
-  text-align: center;
-  white-space: nowrap;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.25;
-}
-
-.stat-cell .stat-num {
-  font-size: 1.3rem;
-  font-weight: 800;
-  color: #0f172a;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.15;
-}
-
-@media (max-width: 900px) {
-  .stats {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.65rem;
-    overflow: visible;
-    align-items: stretch;
-  }
-
-  /* جدا کردن جفت تا هر کارت یک سلول گرید شود */
-  .stat-pair {
-    display: contents;
-  }
-
-  .stat-total,
-  .stat-cell {
-    width: 100%;
-    min-width: 0;
-    height: 5.5rem;
-    min-height: 5.5rem;
-    max-height: 5.5rem;
-    flex: none;
-    box-sizing: border-box;
-  }
-
-  .stat-total {
-    padding: 0.65rem 0.75rem;
-    gap: 0.55rem;
-  }
-
-  .stat-total-ico {
-    width: 2.15rem;
-    height: 2.15rem;
-  }
-
-  .stat-total .stat-label {
-    font-size: 0.72rem;
-  }
-
-  .stat-total .stat-num {
-    font-size: 1.2rem;
-  }
-
-  .stat-cell {
-    padding: 1rem 0.45rem 0.6rem;
-  }
-
-  .stat-cell .stat-label {
-    white-space: normal;
-    font-size: 0.72rem;
-    line-height: 1.2;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-
-  .stat-cell .stat-num {
-    font-size: 1.2rem;
-  }
-
-  .stat-pair .stat-cell {
-    border: 1px solid #e5e7eb !important;
-    border-radius: 12px !important;
-    background: #fff;
-    box-shadow: none !important;
-  }
-
-  .stat-pair .stat-cell.wide {
-    flex: none;
-  }
-
-  .stat-pair .stat-cell + .stat-cell {
-    border-inline-start: 1px solid #e5e7eb !important;
-  }
-
-  .stat-pair .stat-cell:hover:not(:disabled),
-  .stat-pair .stat-cell.on {
-    border-color: color-mix(in srgb, var(--accent) 35%, #e5e7eb) !important;
-    box-shadow: 0 0 0 2px var(--accent-soft) !important;
-    background: color-mix(in srgb, var(--accent-soft) 70%, #fff);
-  }
-}
-
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.65rem;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.7rem 0.85rem;
-  background: color-mix(in srgb, var(--surface-2, #f8fafc) 90%, #fff);
-  border: 1px solid var(--line);
-  border-radius: 12px;
-}
-
-.filters-start,
-.filters-end {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.filter-selects {
-  display: contents;
-}
-
-.filters-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.86rem;
-  font-weight: 600;
-  color: var(--ink);
-  padding-inline-end: 0.25rem;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 0 0.7rem;
-  min-height: 2.35rem;
-  min-width: 10rem;
-  color: var(--muted);
-}
-
-.search:focus-within {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-soft);
-}
-
-.search input {
-  border: 0;
-  outline: none;
-  background: transparent;
-  font: inherit;
-  font-size: 0.88rem;
-  color: var(--ink);
-  width: 8.5rem;
-}
-
-.filter-select,
-.sort-btn {
-  min-height: 2.35rem;
-  border: 1px solid var(--line);
-  background: #fff;
-  border-radius: 10px;
-  padding: 0 0.7rem;
-  font: inherit;
-  font-size: 0.86rem;
-  color: var(--ink);
-  cursor: pointer;
-}
-
-@media (max-width: 900px) {
-  .filters {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-
-  .filters-start {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .filters-label {
-    grid-column: 1;
-    grid-row: 1;
-    align-self: center;
-    padding-inline-end: 0;
-  }
-
-  .search {
-    grid-column: 2;
-    grid-row: 1;
-    min-width: 0;
-    width: 100%;
-  }
-
-  .search input {
-    width: 100%;
-    min-width: 0;
-    flex: 1;
-  }
-
-  .filter-selects {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.5rem;
-    grid-column: 1 / -1;
-    grid-row: 2;
-    width: 100%;
-  }
-
-  .filter-select {
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    padding-inline: 0.45rem;
-    font-size: 0.78rem;
-  }
-
-  .filters-end {
-    width: 100%;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-  }
-
-  .filters-end .sort-btn {
-    flex: 1;
-    min-width: 0;
-    justify-content: center;
-  }
-}
-
-.sort-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-}
-
-.view-toggle {
-  display: inline-flex;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  overflow: hidden;
-  background: #fff;
-}
-
-.view-btn {
-  width: 2.35rem;
-  height: 2.35rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.view-btn.on,
-.view-btn:hover {
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-
-.pop {
-  position: relative;
-}
-
-.menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  inset-inline-end: 0;
-  z-index: 30;
-  margin: 0;
-  padding: 0.35rem;
-  list-style: none;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
-  min-width: 11rem;
-}
-
-.menu.panel {
-  display: grid;
-  gap: 0.5rem;
-  padding: 0.65rem;
-  min-width: 14rem;
-}
-
-.menu.row-menu {
-  inset-inline-end: auto;
-  inset-inline-start: 0;
-}
-
-.menu a,
-.menu button {
-  display: block;
-  width: 100%;
-  border: 0;
-  background: none;
-  text-align: start;
-  padding: 0.45rem 0.55rem;
-  border-radius: 8px;
-  font: inherit;
-  cursor: pointer;
-  color: var(--ink);
-  text-decoration: none;
-}
-
-.menu a:hover,
-.menu button:hover,
-.menu button.on {
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-
-.menu select {
-  width: 100%;
-  min-height: 2.35rem;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 0 0.5rem;
-  font: inherit;
-}
-
-.bulk-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: center;
-  padding: 0.55rem 0.75rem;
-  background: var(--accent-soft);
-  border-radius: 10px;
-  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
-}
-
-.table-wrap {
-  overflow-x: auto;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: #fff;
-}
-
-.cards {
-  display: none;
-  gap: 0.7rem;
-}
-
-.m-card {
-  position: relative;
-  display: grid;
-  gap: 0.55rem;
-  padding: 0.85rem;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  cursor: pointer;
-  min-width: 0;
-  overflow: hidden;
-  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
-  touch-action: pan-y;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.m-card:active {
-  background: #f8fafc;
-}
-
-.m-card.selected {
-  background: #ecfdf5;
-  border-color: #6ee7b7;
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
-}
-
-.m-card.selected:active {
-  background: #d1fae5;
-}
-
-.m-badge {
-  width: 1.55rem;
-  height: 1.55rem;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.68rem;
-  font-weight: 800;
-  font-variant-numeric: tabular-nums;
-  background: #e2e8f0;
-  color: #334155;
-  flex-shrink: 0;
-}
-
-.m-badge[data-tint='mint'],
-.m-badge[data-tint='teal'] {
-  background: #d1fae5;
-  color: #047857;
-}
-.m-badge[data-tint='amber'] {
-  background: #fef3c7;
-  color: #b45309;
-}
-.m-badge[data-tint='peach'] {
-  background: #ffedd5;
-  color: #c2410c;
-}
-.m-badge[data-tint='sky'] {
-  background: #e0f2fe;
-  color: #0369a1;
-}
-.m-badge[data-tint='violet'] {
-  background: #ede9fe;
-  color: #6d28d9;
-}
-.m-badge[data-tint='rose'] {
-  background: #fee2e2;
-  color: #b91c1c;
-}
-
-.m-head {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  min-width: 0;
-}
-
-.m-title {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: grid;
-  gap: 0.05rem;
-}
-
-.m-title .name {
-  overflow-wrap: anywhere;
-  line-height: 1.35;
-}
-
-.m-title .sub {
-  margin-top: 0;
-}
-
-.m-meta-row {
-  display: flex;
-  direction: ltr;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  width: 100%;
-  min-width: 0;
-}
-
-.m-line {
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.8rem;
-  color: #475569;
-  min-width: 0;
-}
-
-.m-meta-row .m-place {
-  flex: 0 1 auto;
-  max-width: 55%;
-  direction: rtl;
-  justify-content: flex-end;
-}
-
-.m-meta-row .m-phone {
-  flex: 0 1 auto;
-  max-width: 55%;
-  justify-content: flex-start;
-}
-
-button.m-line {
-  border: 0;
-  background: transparent;
-  padding: 0;
-  font: inherit;
-  text-align: start;
-  cursor: pointer;
-  width: auto;
-}
-
-.m-phone {
-  color: #059669;
-  font-weight: 700;
-}
-
-.m-phone:active {
-  opacity: 0.75;
-}
-
-.m-line :deep(svg) {
-  flex-shrink: 0;
-  color: #94a3b8;
-}
-
-.m-phone :deep(svg) {
-  color: #10b981;
-}
-
-.m-line span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.m-pills {
-  display: flex;
-  direction: ltr;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  width: 100%;
-  min-width: 0;
-  flex-wrap: nowrap;
-}
-
-.m-pills .stage-pill {
-  flex: 0 1 auto;
-  max-width: 55%;
-}
-
-.m-pills .source-pill {
-  flex: 0 1 auto;
-  max-width: 55%;
-  margin-left: auto;
-  direction: rtl;
-}
-
-.m-foot {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.45rem;
-  padding-top: 0.1rem;
-}
-
-.m-activity {
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: #64748b;
-  white-space: nowrap;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.88rem;
-}
-
-.data-table th,
-.data-table td {
-  padding: 0.85rem 0.75rem;
-  text-align: start;
-  border-bottom: 1px solid var(--line);
-  vertical-align: middle;
-}
-
-.data-table th {
-  font-weight: 600;
-  color: var(--muted);
-  background: #fafbfc;
-  white-space: nowrap;
-  font-size: 0.8rem;
-}
-
-.row-click {
-  cursor: pointer;
-}
-
-.row-click:hover {
-  background: #f8fafc;
-}
-
-.icon-col {
-  width: 2.75rem;
-}
-
-.num-col {
-  width: 2.5rem;
-  text-align: center;
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-  font-size: 0.8rem;
-}
-
-.check-col {
-  width: 2.5rem;
-  text-align: center;
-}
-
-.actions-col {
-  width: 7.5rem;
-}
-
-.row-ico {
-  width: 2.35rem;
-  height: 2.35rem;
-  border-radius: 10px;
-  border: 0;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #ecfdf5;
-  color: #059669;
-  cursor: pointer;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.row-ico.busy {
-  opacity: 0.55;
-  pointer-events: none;
-}
-
-.row-logo {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.row-ico:has(.row-logo) {
-  background: #fff;
-  border: 1px solid var(--line, #e5e7eb);
-}
-
-.row-ico[data-tint='amber'] {
-  background: #fef3c7;
-  color: #d97706;
-}
-.row-ico[data-tint='peach'] {
-  background: #ffedd5;
-  color: #ea580c;
-}
-.row-ico[data-tint='sky'],
-.row-ico[data-tint='teal'] {
-  background: #e0f2fe;
-  color: #0284c7;
-}
-.row-ico[data-tint='violet'] {
-  background: #ede9fe;
-  color: #7c3aed;
-}
-.row-ico[data-tint='rose'] {
-  background: #fee2e2;
-  color: #dc2626;
-}
-
-.name {
-  display: block;
-  font-weight: 700;
-  color: var(--ink);
-}
-
-.sub {
-  display: block;
-  color: var(--muted);
-  font-size: 0.78rem;
-  font-weight: 400;
-  margin-top: 0.15rem;
-}
-
-.phone {
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  color: var(--ink);
-}
-
-.city {
-  display: block;
-  font-weight: 600;
-}
-
-.source-pill {
-  display: inline-block;
-  padding: 0.2rem 0.65rem;
-  border-radius: 999px;
-  background: #f1f5f9;
-  color: #475569;
-  font-size: 0.78rem;
-  font-weight: 600;
-}
-
-.stage-pill {
-  display: inline-block;
-  padding: 0.22rem 0.7rem;
-  border-radius: 999px;
-  font-size: 0.78rem;
-  font-weight: 700;
-  white-space: nowrap;
-  background: #d1fae5;
-  color: #047857;
-}
-
-.stage-pill[data-tint='amber'] {
-  background: #fef3c7;
-  color: #b45309;
-}
-.stage-pill[data-tint='peach'] {
-  background: #ffedd5;
-  color: #c2410c;
-}
-.stage-pill[data-tint='sky'],
-.stage-pill[data-tint='teal'] {
-  background: #e0f2fe;
-  color: #0369a1;
-}
-.stage-pill[data-tint='violet'] {
-  background: #ede9fe;
-  color: #6d28d9;
-}
-.stage-pill[data-tint='rose'] {
-  background: #fee2e2;
-  color: #b91c1c;
-}
-.stage-pill[data-tint='mint'] {
-  background: #d1fae5;
-  color: #047857;
-}
-
-.assignee {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  white-space: nowrap;
-}
-
-.avatar {
-  width: 1.7rem;
-  height: 1.7rem;
-  border-radius: 999px;
-  background: linear-gradient(135deg, #5eead4, #34d399);
-  color: #064e3b;
-  font-size: 0.68rem;
-  font-weight: 800;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.activity {
-  display: inline-flex;
-  align-items: center;
-  min-width: 8rem;
-}
-
-.activity-text strong {
-  display: block;
-  font-size: 0.84rem;
-}
-
-.row-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.act-btn {
-  width: 2rem;
-  height: 2rem;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--muted);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.act-btn:hover {
-  background: #f1f5f9;
-  color: var(--ink);
-}
-
-.act-btn.call {
-  background: #ecfdf5;
-  color: #059669;
-}
-
-.act-btn.call:hover {
-  background: #d1fae5;
-}
-
-@media (max-width: 900px) {
-  .table-wrap {
-    display: none;
-  }
-
-  .cards {
-    display: grid;
-  }
-}
-
-:deep(.ui-dd-panel) .danger-item,
-.danger-item {
-  color: #b91c1c !important;
-}
-
-.pager {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding-top: 0.25rem;
-}
-
-.pager-pages {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.page-nav,
-.page-num {
-  width: 2.1rem;
-  height: 2.1rem;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--muted);
-  font: inherit;
-  font-weight: 600;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.page-num.on {
-  background: var(--accent, #0d9488);
-  color: #fff;
-}
-
-.page-nav:disabled {
-  opacity: 0.35;
-  cursor: default;
-}
-
-.pager-info {
-  margin: 0;
-  color: var(--muted);
-  font-size: 0.86rem;
-}
-
-.muted,
-.muted-dash {
-  color: var(--muted);
-}
-
-.ok {
-  color: #0f766e;
-  margin: 0;
-}
-
-.error {
-  color: #b91c1c;
-  margin: 0;
-}
-
-.create-form {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.create-form .addresses {
-  display: grid;
-  gap: 0.45rem;
-}
-
-.create-form .addresses-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 0.86rem;
-  font-weight: 600;
-}
-
-.create-form .add-addr {
-  border: 0;
-  background: transparent;
-  color: var(--accent-deep, var(--accent));
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 700;
-  cursor: pointer;
-  padding: 0;
-}
-
-.create-form .addr-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.45rem;
-  align-items: center;
-}
-
-.create-form .rm-addr {
-  width: 2rem;
-  height: 2rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: #fff;
-  color: var(--muted);
-  font: inherit;
-  font-size: 1.1rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.create-form label {
-  display: grid;
-  gap: 0.35rem;
-  font-size: 0.86rem;
-  font-weight: 600;
-  color: var(--ink);
-}
-
-.create-form .label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.from-contact {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border: 0;
-  background: transparent;
-  color: var(--accent-deep, var(--accent));
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 700;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-}
-
-.from-contact:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.hidden-file {
-  display: none;
-}
-
-.pick-lead {
-  margin: 0 0 0.75rem;
-  color: var(--muted);
-  font-size: 0.88rem;
-  line-height: 1.7;
-}
-
-.pick-choose {
-  display: grid;
-  gap: 0.55rem;
-}
-
-.pick-search {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.65rem;
-  padding: 0.45rem 0.65rem;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: #fff;
-}
-
-.pick-search input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  font: inherit;
-  font-size: 0.88rem;
-  color: var(--ink);
-  min-height: auto;
-  padding: 0;
-}
-
-.pick-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.45rem;
-  max-height: min(48vh, 360px);
-  overflow: auto;
-}
-
-.pick-row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-  padding: 0.55rem 0.65rem;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: #fff;
-  cursor: pointer;
-  font: inherit;
-  text-align: start;
-  color: inherit;
-}
-
-.pick-row:hover {
-  border-color: var(--accent);
-  background: var(--accent-soft);
-}
-
-.pick-avatar {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  background: var(--accent-soft);
-  color: var(--accent-deep, var(--accent));
-  display: grid;
-  place-items: center;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.pick-meta {
-  display: grid;
-  gap: 0.1rem;
-  min-width: 0;
-}
-
-.pick-meta strong {
-  font-size: 0.88rem;
-}
-
-.pick-meta small {
-  color: var(--muted);
-  font-size: 0.75rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pick-empty {
-  margin: 0.75rem 0 0;
-  color: var(--muted);
-  font-size: 0.88rem;
-  text-align: center;
-}
-
-.create-form input,
-.create-form select {
-  min-height: 2.45rem;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 0 0.75rem;
-  font: inherit;
-  font-weight: 400;
-}
-
-.create-form .ltr {
-  direction: ltr;
-  text-align: left;
-}
-
-.create-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
-}
-
-.empty-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  justify-content: center;
-}
-
-@media (max-width: 720px) {
-  .create-grid {
-    grid-template-columns: 1fr;
-  }
-
-  :deep(.actions) .btn-full {
-    display: none;
-  }
-
-  :deep(.actions) .btn-short {
-    display: inline;
-  }
-}
-</style>
diff --git a/apps/web/src/views/PersonFormView.vue b/apps/web/src/views/PersonFormView.vue
index 793b131..3f10955 100644
--- a/apps/web/src/views/PersonFormView.vue
+++ b/apps/web/src/views/PersonFormView.vue
@@ -2,6 +2,37 @@
 import { computed, nextTick, onMounted, ref } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
+import {
+  Alert as AAlert,
+  Button as AButton,
+  Card as ACard,
+  Col as ACol,
+  Divider as ADivider,
+  Flex as AFlex,
+  Form as AForm,
+  FormItem as AFormItem,
+  Input as AInput,
+  List as AList,
+  Modal,
+  Modal as AModal,
+  Row as ARow,
+  Select as ASelect,
+  Space,
+  Space as ASpace,
+  Spin as ASpin,
+  Textarea as ATextarea,
+  Typography,
+  Upload as AUpload,
+} from 'ant-design-vue';
+import type { UploadProps } from 'ant-design-vue';
+import {
+  ArrowLeftOutlined,
+  CheckOutlined,
+  DeleteOutlined,
+  PhoneOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from '@ant-design/icons-vue';
 import { api } from '@/lib/api';
 import type { CompanyDto, CreatePersonRequest, PersonDto, PersonMood } from '@mento/shared';
 import { PERSON_MOOD_LABELS, PERSON_MOODS } from '@/lib/person-mood';
@@ -19,17 +50,12 @@ import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
 import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
 import EntityTimeline from '@/components/EntityTimeline.vue';
 import MentoMemoryPanel from '@/components/MentoMemoryPanel.vue';
-import UiIcon from '@/components/UiIcon.vue';
-import {
-  UiButton,
-  UiCard,
-  UiField,
-  UiInput,
-  UiModal,
-  UiPageHeader,
-  UiSelect,
-  UiTextarea,
-} from '@/components/ui';
+
+const ASpaceCompact = Space.Compact;
+const { Title: ATypographyTitle, Text: ATypographyText, Paragraph: ATypographyParagraph } =
+  Typography;
+const AListItem = AList.Item;
+const AListItemMeta = AList.Item.Meta;
 
 const props = withDefaults(
   defineProps<{
@@ -77,16 +103,21 @@ const loyaltyTierName = ref('');
 
 const contactPickerSupported = isContactPickerSupported();
 const pickingContact = ref(false);
-const contactFileInput = ref<HTMLInputElement | null>(null);
 const sourceOpen = ref(false);
 const pickOpen = ref(false);
 const pickDrafts = ref<PhoneContactDraft[]>([]);
 const pickQuery = ref('');
+const vcfInputKey = ref(0);
 
 const visiblePickDrafts = computed(() =>
   filterPhoneContacts(pickDrafts.value, pickQuery.value),
 );
 
+const companyOptions = computed(() => [
+  { value: '', label: 'بدون شرکت' },
+  ...companies.value.map((c) => ({ value: c.id, label: c.name })),
+]);
+
 const backTo = computed(() =>
   isNew.value ? { name: 'contacts' as const } : { name: 'person-detail' as const, params: { id: id.value } },
 );
@@ -147,9 +178,38 @@ function fillFromPhoneContact() {
     sourceOpen.value = true;
     return;
   }
-  contactFileInput.value?.click();
+  vcfInputKey.value += 1;
+  void nextTick(() => triggerVcfPick());
 }
 
+const vcfUploadRef = ref<{ $el?: HTMLElement } | null>(null);
+
+function triggerVcfPick() {
+  const root = vcfUploadRef.value?.$el as HTMLElement | undefined;
+  const input = root?.querySelector('input[type="file"]') as HTMLInputElement | null;
+  input?.click();
+}
+
+const onVcfBeforeUpload: UploadProps['beforeUpload'] = (file) => {
+  void (async () => {
+    pickingContact.value = true;
+    error.value = '';
+    try {
+      const rows = await parseVCardFile(file as File);
+      if (!rows.length) {
+        error.value = 'مخاطبی در فایل پیدا نشد.';
+        return;
+      }
+      await openPickList(rows);
+    } catch {
+      error.value = 'خواندن فایل مخاطب (.vcf) ناموفق بود.';
+    } finally {
+      pickingContact.value = false;
+    }
+  })();
+  return false;
+};
+
 async function pickFromDevice() {
   if (pickingContact.value || saving.value) return;
   pickingContact.value = true;
@@ -167,7 +227,7 @@ async function pickFromDevice() {
     const message = e instanceof Error ? e.message : '';
     if (name === 'AbortError') return;
     if (message === 'CONTACT_PICKER_UNSUPPORTED' || name === 'NotSupportedError') {
-      contactFileInput.value?.click();
+      triggerVcfPick();
       return;
     }
     error.value = 'انتخاب مخاطب از گوشی ناموفق بود.';
@@ -178,28 +238,7 @@ async function pickFromDevice() {
 
 function pickFromVcf() {
   sourceOpen.value = false;
-  contactFileInput.value?.click();
-}
-
-async function onContactVcfFile(ev: Event) {
-  const el = ev.target as HTMLInputElement;
-  const file = el.files?.[0];
-  el.value = '';
-  if (!file) return;
-  pickingContact.value = true;
-  error.value = '';
-  try {
-    const rows = await parseVCardFile(file);
-    if (!rows.length) {
-      error.value = 'مخاطبی در فایل پیدا نشد.';
-      return;
-    }
-    await openPickList(rows);
-  } catch {
-    error.value = 'خواندن فایل مخاطب (.vcf) ناموفق بود.';
-  } finally {
-    pickingContact.value = false;
-  }
+  triggerVcfPick();
 }
 
 function fill(p: PersonDto) {
@@ -334,14 +373,24 @@ async function submit() {
   }
 }
 
-async function remove() {
-  if (!id.value || !confirm('این شخص حذف شود؟')) return;
-  try {
-    await api.delete(`/people/${id.value}`);
-    await router.push({ name: 'contacts' });
-  } catch {
-    error.value = 'حذف ناموفق بود';
-  }
+function remove() {
+  if (!id.value) return;
+  Modal.confirm({
+    title: 'حذف شخص',
+    content: 'این شخص حذف شود؟',
+    okText: 'حذف',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      try {
+        await api.delete(`/people/${id.value}`);
+        await router.push({ name: 'contacts' });
+      } catch {
+        error.value = 'حذف ناموفق بود';
+        return Promise.reject();
+      }
+    },
+  });
 }
 
 function cancel() {
@@ -356,498 +405,299 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="crm-page" :class="{ embedded, narrow: !embedded }">
-    <!-- Desktop Header -->
-    <UiPageHeader
+  <div>
+    <a-flex
       v-if="!embedded"
-      :title="pageTitle"
-      :back-to="backTo"
+      justify="space-between"
+      align="center"
+      wrap="wrap"
+      :gap="12"
+      :style="{ marginBottom: '16px' }"
     >
-      <template #lead>
-        <span class="crumb">
+      <div>
+        <a-typography-text type="secondary">
           <RouterLink :to="{ name: 'contacts' }">مخاطبین</RouterLink>
-          <span>›</span>
-          <strong>{{ pageTitle }}</strong>
-        </span>
-      </template>
-      <template #actions>
-        <UiButton variant="primary" :disabled="saving" @click="submit">
-          <UiIcon name="check" :size="16" />
-          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-        </UiButton>
-        <UiButton variant="ghost" :disabled="saving" @click="cancel">انصراف</UiButton>
-        <UiButton v-if="!isNew" variant="danger" :disabled="saving" @click="remove">
+          · {{ pageTitle }}
+        </a-typography-text>
+        <a-typography-title :level="3" :style="{ margin: '4px 0 0' }">{{ pageTitle }}</a-typography-title>
+      </div>
+      <a-space :size="8" wrap>
+        <a-button @click="cancel">
+          <template #icon><ArrowLeftOutlined /></template>
+          انصراف
+        </a-button>
+        <a-button v-if="!isNew" danger :disabled="saving" @click="remove">
+          <template #icon><DeleteOutlined /></template>
           حذف
-        </UiButton>
-      </template>
-    </UiPageHeader>
+        </a-button>
+        <a-button type="primary" :loading="saving" @click="submit">
+          <template #icon><CheckOutlined /></template>
+          ذخیره
+        </a-button>
+      </a-space>
+    </a-flex>
 
-    <p v-if="loading" class="muted">در حال بارگذاری…</p>
-    <form v-else class="crm-form" @submit.prevent="submit">
-      <UiCard>
-        <div class="crm-form-grid-2">
-          <UiField label="نام" for-id="firstName">
-            <UiInput id="firstName" v-model="firstName" />
-          </UiField>
+    <a-spin :spinning="loading">
+      <a-form v-if="!loading" layout="vertical" @finish="submit">
+        <a-card :bordered="false">
+          <a-divider orientation="right">اطلاعات اصلی</a-divider>
+          <a-row :gutter="[16, 0]">
+            <a-col :xs="24" :md="12">
+              <a-form-item label="نام">
+                <a-input v-model:value="firstName" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="نام خانوادگی">
+                <a-input v-model:value="lastName" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="موبایل">
+                <a-space-compact block style="width: 100%">
+                  <a-input v-model:value="mobile" type="tel" style="width: 100%" />
+                  <a-button
+                    :disabled="pickingContact || saving"
+                    @click="fillFromPhoneContact"
+                  >
+                    <template #icon><PhoneOutlined /></template>
+                    {{ pickingContact ? '…' : 'از مخاطبین' }}
+                  </a-button>
+                </a-space-compact>
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="تلفن">
+                <a-input v-model:value="phone" type="tel" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="ایمیل">
+                <a-input v-model:value="email" type="email" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="سمت">
+                <a-input v-model:value="position" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="آدرس وب‌سایت">
+                <a-input v-model:value="website" dir="ltr" placeholder="https://example.com" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="پیج اینستاگرام">
+                <a-input v-model:value="instagram" dir="ltr" placeholder="@username یا لینک" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="تاریخ تولد">
+                <JalaliDateInput id="birth-date" v-model="birthDate" mode="date" />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="معرف">
+                <a-input v-model:value="referrer" placeholder="نام معرف" />
+              </a-form-item>
+            </a-col>
+          </a-row>
 
-          <UiField label="نام خانوادگی" for-id="lastName">
-            <UiInput id="lastName" v-model="lastName" />
-          </UiField>
+          <a-divider orientation="right">آدرس‌ها</a-divider>
+          <a-flex vertical :gap="8" :style="{ marginBottom: '8px' }">
+            <a-flex justify="flex-end">
+              <a-button type="link" @click="addAddress">
+                <template #icon><PlusOutlined /></template>
+                افزودن آدرس
+              </a-button>
+            </a-flex>
+            <a-row v-for="(_, idx) in addresses" :key="idx" :gutter="[8, 0]">
+              <a-col :flex="'auto'">
+                <a-input
+                  v-model:value="addresses[idx]"
+                  :placeholder="idx === 0 ? 'آدرس اصلی' : `آدرس ${idx + 1}`"
+                />
+              </a-col>
+              <a-col>
+                <a-button danger @click="removeAddress(idx)">
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-col>
+            </a-row>
+          </a-flex>
 
-          <UiField label="موبایل" for-id="mobile">
-            <template #label-extra>
-              <button
-                type="button"
-                class="from-contact"
-                :disabled="pickingContact || saving"
-                @click="fillFromPhoneContact"
-              >
-                <UiIcon name="phone" :size="14" />
-                {{ pickingContact ? '…' : 'از مخاطبین' }}
-              </button>
-            </template>
-            <UiInput id="mobile" v-model="mobile" type="tel" />
-          </UiField>
-
-          <input
-            ref="contactFileInput"
-            class="hidden-file"
-            type="file"
-            accept=".vcf,text/vcard,text/x-vcard"
-            @change="onContactVcfFile"
-          />
-
-          <UiModal nest :open="sourceOpen" title="از مخاطبین" @close="closeSource">
-            <p class="pick-lead">
-              چند مخاطب را از دفترچه یا فایل بگیرید؛ بعد در لیست الفبایی جستجو کنید و یکی را برای پر کردن موبایل انتخاب کنید.
-            </p>
-            <div class="pick-choose">
-              <UiButton variant="primary" block :disabled="pickingContact" @click="pickFromDevice">
-                <UiIcon name="phone" :size="16" />
-                از دفترچه تلفن
-              </UiButton>
-              <UiButton variant="ghost" block :disabled="pickingContact" @click="pickFromVcf">
-                از فایل .vcf
-              </UiButton>
-            </div>
-            <template #footer>
-              <UiButton variant="ghost" @click="closeSource">انصراف</UiButton>
-            </template>
-          </UiModal>
-
-          <UiModal nest :open="pickOpen" title="انتخاب مخاطب" @close="closePick">
-            <p class="pick-lead">
-              {{ toFaDigits(pickDrafts.length) }} مخاطب (مرتب‌شده الفبایی).
-              یکی را انتخاب کنید تا فقط موبایل (و در صورت خالی بودن، نام) پر شود.
-            </p>
-            <div class="pick-search">
-              <UiIcon name="search" :size="15" />
-              <input
-                v-model="pickQuery"
-                type="search"
-                placeholder="جستجو نام یا موبایل…"
-                autocomplete="off"
-              />
-            </div>
-            <ul v-if="visiblePickDrafts.length" class="pick-list">
-              <li v-for="row in visiblePickDrafts" :key="row.key">
-                <button type="button" class="pick-row" @click="choosePick(row)">
-                  <span class="pick-avatar" aria-hidden="true">{{ row.fullName.slice(0, 1) }}</span>
-                  <span class="pick-meta">
-                    <strong>{{ row.fullName }}</strong>
-                    <small>{{ draftLine(row) }}</small>
-                  </span>
-                </button>
-              </li>
-            </ul>
-            <p v-else class="pick-empty">مخاطبی با این جستجو پیدا نشد.</p>
-            <template #footer>
-              <UiButton variant="ghost" @click="closePick">انصراف</UiButton>
-              <UiButton variant="ghost" @click="contactFileInput?.click()">فایل دیگر</UiButton>
-            </template>
-          </UiModal>
-
-          <UiField label="تلفن" for-id="phone">
-            <UiInput id="phone" v-model="phone" type="tel" />
-          </UiField>
-
-          <UiField label="ایمیل" for-id="email">
-            <UiInput id="email" v-model="email" type="email" />
-          </UiField>
-
-          <UiField label="سمت" for-id="position">
-            <UiInput id="position" v-model="position" />
-          </UiField>
-
-          <UiField label="آدرس وب‌سایت" for-id="website">
-            <UiInput id="website" v-model="website" dir="ltr" placeholder="https://example.com" />
-          </UiField>
-
-          <UiField label="پیج اینستاگرام" for-id="instagram">
-            <UiInput id="instagram" v-model="instagram" dir="ltr" placeholder="@username یا لینک" />
-          </UiField>
-
-          <UiField label="تاریخ تولد" for-id="birth-date">
-            <JalaliDateInput id="birth-date" v-model="birthDate" mode="date" />
-          </UiField>
-
-          <UiField label="معرف" for-id="referrer">
-            <UiInput id="referrer" v-model="referrer" placeholder="نام معرف" />
-          </UiField>
-
-          <div class="crm-col-span-full addresses">
-            <div class="addresses-head">
-              <span>آدرس‌ها</span>
-              <button type="button" class="add-addr" @click="addAddress">+ افزودن آدرس</button>
-            </div>
-            <div v-for="(_, idx) in addresses" :key="idx" class="addr-row">
-              <UiInput
-                :id="`address-${idx}`"
-                v-model="addresses[idx]"
-                :placeholder="idx === 0 ? 'آدرس اصلی' : `آدرس ${idx + 1}`"
-              />
-              <button type="button" class="rm-addr" aria-label="حذف آدرس" @click="removeAddress(idx)">
-                ×
-              </button>
-            </div>
-          </div>
-
-          <div class="crm-col-span-full">
-            <UiField label="وضعیت مشتری">
-              <div class="moods">
-                <button
-                  v-for="item in PERSON_MOODS"
-                  :key="item"
-                  class="mood-btn"
-                  type="button"
-                  :class="{ on: mood === item }"
+          <a-divider orientation="right">وضعیت و شرکت</a-divider>
+          <a-form-item label="وضعیت مشتری">
+            <a-row :gutter="[8, 8]">
+              <a-col v-for="item in PERSON_MOODS" :key="item" :xs="12" :sm="6">
+                <a-button
+                  block
+                  :type="mood === item ? 'primary' : 'default'"
+                  :ghost="mood === item"
+                  :style="{ height: 'auto', paddingBlock: '12px' }"
                   @click="mood = item"
                 >
-                  <CustomerMoodFace :mood="item" :size="40" />
-                  <span>{{ PERSON_MOOD_LABELS[item] }}</span>
-                </button>
+                  <a-flex vertical align="center" :gap="6">
+                    <CustomerMoodFace :mood="item" :size="40" />
+                    <span>{{ PERSON_MOOD_LABELS[item] }}</span>
+                  </a-flex>
+                </a-button>
+              </a-col>
+            </a-row>
+          </a-form-item>
+
+          <a-row :gutter="[16, 0]">
+            <a-col :xs="24" :md="12">
+              <a-form-item label="شرکت">
+                <a-select
+                  v-model:value="companyId"
+                  show-search
+                  option-filter-prop="label"
+                  :options="companyOptions"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :xs="24" :md="12">
+              <a-form-item label="برچسب‌ها">
+                <a-input
+                  v-model:value="tagsRaw"
+                  placeholder="VIP، معرفی (با کاما جدا کنید)"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="یادداشت">
+                <a-textarea v-model:value="notes" :rows="3" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-card
+            v-if="!isNew"
+            :bordered="true"
+            :style="{ marginTop: '8px' }"
+            type="inner"
+          >
+            <a-flex justify="space-between" align="center" wrap="wrap" :gap="8">
+              <div>
+                <a-typography-text type="secondary">باشگاه مشتریان</a-typography-text>
+                <div>
+                  <a-typography-text strong>
+                    {{ toFaDigits(loyaltyPoints) }} امتیاز
+                    <template v-if="loyaltyTierName"> · سطح {{ loyaltyTierName }}</template>
+                  </a-typography-text>
+                </div>
               </div>
-            </UiField>
-          </div>
+              <RouterLink :to="{ name: 'loyalty' }">
+                <a-button type="link">مدیریت باشگاه</a-button>
+              </RouterLink>
+            </a-flex>
+          </a-card>
 
-          <div class="crm-col-span-full">
-            <UiField label="شرکت" for-id="companyId">
-              <UiSelect id="companyId" v-model="companyId">
-                <option value="">بدون شرکت</option>
-                <option v-for="c in companies" :key="c.id" :value="c.id">{{ c.name }}</option>
-              </UiSelect>
-            </UiField>
-          </div>
+          <CustomFieldsSection entity-type="person" v-model="customFields" />
+        </a-card>
 
-          <div class="crm-col-span-full">
-            <UiField label="برچسب‌ها" for-id="tags">
-              <UiInput
-                id="tags"
-                v-model="tagsRaw"
-                placeholder="VIP، معرفی (با کاما جدا کنید)"
-              />
-            </UiField>
-          </div>
+        <MentoMemoryPanel v-if="!isNew && id" :person-id="id" />
+        <EntityTimeline v-if="!isNew && id" entity-type="person" :entity-id="id" />
 
-          <div class="crm-col-span-full">
-            <UiField label="یادداشت" for-id="notes">
-              <UiTextarea id="notes" v-model="notes" :rows="3" />
-            </UiField>
-          </div>
+        <a-alert
+          v-if="error"
+          type="error"
+          show-icon
+          :message="error"
+          :style="{ marginTop: '16px' }"
+        />
 
-          <div v-if="!isNew" class="crm-col-span-full loyalty-card">
-            <div class="loyalty-info">
-              <span class="muted">باشگاه مشتریان</span>
-              <strong>{{ loyaltyPoints }} امتیاز<span v-if="loyaltyTierName"> · سطح {{ loyaltyTierName }}</span></strong>
-            </div>
-            <RouterLink class="loyalty-link" :to="{ name: 'loyalty' }">مدیریت باشگاه</RouterLink>
-          </div>
-        </div>
-      </UiCard>
+        <a-space
+          v-if="embedded"
+          wrap
+          :size="8"
+          :style="{ marginTop: '16px' }"
+        >
+          <a-button type="primary" :loading="saving" @click="submit">ذخیره</a-button>
+          <a-button :disabled="saving" @click="cancel">انصراف</a-button>
+        </a-space>
 
-      <CustomFieldsSection entity-type="person" v-model="customFields" />
-      <MentoMemoryPanel v-if="!isNew && id" :person-id="id" />
-      <EntityTimeline v-if="!isNew && id" entity-type="person" :entity-id="id" />
+        <a-space
+          v-else
+          wrap
+          :size="8"
+          :style="{ marginTop: '16px' }"
+        >
+          <a-button type="primary" html-type="submit" :loading="saving">ذخیره</a-button>
+          <a-button v-if="!isNew" danger :disabled="saving" @click="remove">حذف</a-button>
+        </a-space>
+      </a-form>
+    </a-spin>
 
-      <p v-if="error" class="crm-field-error">{{ error }}</p>
+    <a-upload
+      ref="vcfUploadRef"
+      :key="vcfInputKey"
+      :show-upload-list="false"
+      accept=".vcf,text/vcard,text/x-vcard"
+      :before-upload="onVcfBeforeUpload"
+      :style="{ display: 'none' }"
+    >
+      <span />
+    </a-upload>
 
-      <div class="mobile-actions mob-only">
-        <UiButton variant="primary" block type="submit" :disabled="saving">
-          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-        </UiButton>
-        <UiButton v-if="!isNew" variant="danger" block type="button" :disabled="saving" @click="remove">
-          حذف
-        </UiButton>
-      </div>
-    </form>
+    <a-modal
+      :open="sourceOpen"
+      title="از مخاطبین"
+      :footer="null"
+      destroy-on-close
+      @cancel="closeSource"
+    >
+      <a-typography-paragraph type="secondary">
+        چند مخاطب را از دفترچه یا فایل بگیرید؛ بعد در لیست الفبایی جستجو کنید و یکی را برای پر کردن موبایل انتخاب کنید.
+      </a-typography-paragraph>
+      <a-flex vertical :gap="8">
+        <a-button type="primary" block :loading="pickingContact" @click="pickFromDevice">
+          <template #icon><PhoneOutlined /></template>
+          از دفترچه تلفن
+        </a-button>
+        <a-button block :disabled="pickingContact" @click="pickFromVcf">از فایل .vcf</a-button>
+        <a-button type="link" @click="closeSource">انصراف</a-button>
+      </a-flex>
+    </a-modal>
 
-    <!-- Embedded Modal Actions (Fixed at bottom) -->
-    <div v-if="embedded" class="embed-actions">
-      <UiButton variant="primary" :disabled="saving" @click="submit">
-        <UiIcon name="check" :size="16" />
-        {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-      </UiButton>
-      <UiButton variant="ghost" :disabled="saving" @click="cancel">انصراف</UiButton>
-    </div>
-  </section>
+    <a-modal
+      :open="pickOpen"
+      title="انتخاب مخاطب"
+      destroy-on-close
+      @cancel="closePick"
+    >
+      <a-typography-paragraph type="secondary">
+        {{ toFaDigits(pickDrafts.length) }} مخاطب (مرتب‌شده الفبایی).
+        یکی را انتخاب کنید تا فقط موبایل (و در صورت خالی بودن، نام) پر شود.
+      </a-typography-paragraph>
+      <a-input
+        v-model:value="pickQuery"
+        allow-clear
+        placeholder="جستجو نام یا موبایل…"
+        :style="{ marginBottom: '12px' }"
+      >
+        <template #prefix><SearchOutlined /></template>
+      </a-input>
+      <a-list
+        v-if="visiblePickDrafts.length"
+        :data-source="visiblePickDrafts"
+        :style="{ maxHeight: '360px', overflow: 'auto' }"
+      >
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <a-button type="text" block style="text-align: start; height: auto" @click="choosePick(item)">
+              <a-list-item-meta :title="item.fullName" :description="draftLine(item)" />
+            </a-button>
+          </a-list-item>
+        </template>
+      </a-list>
+      <a-typography-text v-else type="secondary">مخاطبی با این جستجو پیدا نشد.</a-typography-text>
+      <template #footer>
+        <a-button @click="closePick">انصراف</a-button>
+        <a-button @click="triggerVcfPick">فایل دیگر</a-button>
+      </template>
+    </a-modal>
+  </div>
 </template>
-
-<style scoped>
-.crumb {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-1);
-  color: var(--muted);
-  font-size: var(--fs-xs);
-}
-
-.crumb a {
-  color: var(--accent-deep);
-  font-weight: var(--fw-bold);
-}
-
-.embed-actions {
-  display: flex;
-  gap: var(--sp-2);
-  margin-bottom: var(--sp-3);
-}
-
-.addresses {
-  display: grid;
-  gap: var(--sp-2);
-}
-
-.addresses-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sp-2);
-  font-size: var(--fs-sm);
-  font-weight: var(--fw-semibold);
-  color: var(--ink);
-}
-
-.add-addr {
-  border: 0;
-  background: transparent;
-  color: var(--accent-deep);
-  font: inherit;
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-bold);
-  cursor: pointer;
-  padding: 0;
-}
-
-.addr-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--sp-2);
-  align-items: center;
-}
-
-.rm-addr {
-  width: 2rem;
-  height: 2rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
-  color: var(--muted);
-  font: inherit;
-  font-size: 1.1rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.rm-addr:hover {
-  color: #b91c1c;
-  border-color: #fecaca;
-}
-
-.moods {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-2);
-}
-
-.mood-btn {
-  display: grid;
-  justify-items: center;
-  gap: 4px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  border-radius: var(--radius);
-  padding: var(--sp-2) var(--sp-3);
-  cursor: pointer;
-  font: inherit;
-  color: var(--muted);
-  font-size: var(--fs-xs);
-  transition: all var(--transition-fast);
-}
-
-.mood-btn.on {
-  border-color: var(--accent);
-  background: var(--accent-subtle);
-  color: var(--accent-deep);
-  font-weight: var(--fw-bold);
-}
-
-.loyalty-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--sp-3) var(--sp-4);
-  background: var(--surface-subtle);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-}
-
-.loyalty-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.loyalty-link {
-  color: var(--accent-deep);
-  font-weight: var(--fw-semibold);
-  font-size: var(--fs-xs);
-}
-
-.mobile-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-2);
-  margin-top: var(--sp-4);
-}
-
-.from-contact {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border: 0;
-  background: transparent;
-  color: var(--accent-deep);
-  font: inherit;
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-bold);
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-}
-
-.from-contact:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.hidden-file {
-  display: none;
-}
-
-.pick-lead {
-  margin: 0 0 0.75rem;
-  color: var(--muted);
-  font-size: var(--fs-sm);
-  line-height: 1.7;
-}
-
-.pick-choose {
-  display: grid;
-  gap: 0.55rem;
-}
-
-.pick-search {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.65rem;
-  padding: 0.45rem 0.65rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-
-.pick-search input {
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  font: inherit;
-  font-size: var(--fs-sm);
-  color: var(--ink);
-}
-
-.pick-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.45rem;
-  max-height: min(48vh, 360px);
-  overflow: auto;
-}
-
-.pick-row {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.65rem;
-  padding: 0.55rem 0.65rem;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--surface);
-  cursor: pointer;
-  font: inherit;
-  text-align: start;
-  color: inherit;
-}
-
-.pick-row:hover {
-  border-color: var(--accent);
-  background: var(--accent-subtle);
-}
-
-.pick-avatar {
-  width: 34px;
-  height: 34px;
-  border-radius: var(--radius);
-  background: var(--accent-subtle);
-  color: var(--accent-deep);
-  display: grid;
-  place-items: center;
-  font-weight: var(--fw-bold);
-  flex-shrink: 0;
-}
-
-.pick-meta {
-  display: grid;
-  gap: 0.1rem;
-  min-width: 0;
-}
-
-.pick-meta strong {
-  font-size: var(--fs-sm);
-}
-
-.pick-meta small {
-  color: var(--muted);
-  font-size: var(--fs-xs);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pick-empty {
-  margin: 0.75rem 0 0;
-  color: var(--muted);
-  font-size: var(--fs-sm);
-  text-align: center;
-}
-
-@media (min-width: 901px) {
-  .mob-only {
-    display: none !important;
-  }
-}
-</style>
diff --git a/apps/web/src/views/PipelineBoardView.vue b/apps/web/src/views/PipelineBoardView.vue
index fea9e31..328748e 100644
--- a/apps/web/src/views/PipelineBoardView.vue
+++ b/apps/web/src/views/PipelineBoardView.vue
@@ -17,12 +17,28 @@ import {
   updateDealStage,
 } from '@/lib/pipeline-board';
 import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
-import UiBusyOverlay from '@/components/ui/UiBusyOverlay.vue';
-import UiButton from '@/components/ui/UiButton.vue';
-import UiInput from '@/components/ui/UiInput.vue';
-import UiModal from '@/components/ui/UiModal.vue';
 import DealFormView from '@/views/DealFormView.vue';
 import SavedFiltersBar from '@/components/SavedFiltersBar.vue';
+import {
+  DeleteOutlined,
+  DownloadOutlined,
+  UploadOutlined,
+} from '@ant-design/icons-vue';
+import {
+  Alert as AAlert,
+  Button as AButton,
+  Flex as AFlex,
+  Form as AForm,
+  FormItem as AFormItem,
+  Input as AInput,
+  Menu as AMenu,
+  MenuItem as AMenuItem,
+  Modal,
+  Modal as AModal,
+  Space as ASpace,
+  Spin as ASpin,
+  theme,
+} from 'ant-design-vue';
 import type { ImportContactsResult, PipelineBoardDto, PipelineDto } from '@mento/shared';
 import {
   DEAL_EXCEL_ALIASES,
@@ -30,6 +46,9 @@ import {
   EXCEL_CUSTOM_FIELD_PREFIX,
   brand,
 } from '@mento/shared';
+import { useAuthStore } from '@/stores/auth';
+import { canManageSettings } from '@/lib/roles';
+import { bindMenuDismiss, cardMenuStyle } from '@/lib/anchored-menu';
 
 const dealExcelFields = DEAL_EXCEL_COLUMNS.filter((c) => c.key !== '_type').map((c) => ({
   key: c.key,
@@ -40,9 +59,24 @@ const dealClientReadOptions = {
   rawValues: true,
   customFieldPrefix: EXCEL_CUSTOM_FIELD_PREFIX,
 };
-import { useAuthStore } from '@/stores/auth';
-import { canManageSettings } from '@/lib/roles';
-import { bindMenuDismiss, cardMenuStyle } from '@/lib/anchored-menu';
+
+const { token } = theme.useToken();
+const GAP = 16;
+
+/** پدینگ بیرونی فقط از `.content` شل = ۱۶px */
+const pageStyle = {
+  boxSizing: 'border-box' as const,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: `${GAP}px`,
+  flex: '1 1 auto',
+  minHeight: 0,
+  minWidth: 0,
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+};
 
 const route = useRoute();
 const router = useRouter();
@@ -62,7 +96,6 @@ const amountMax = ref('');
 const showCreate = ref(false);
 const newName = ref('');
 const dealModal = ref<{ dealId?: string; stageId?: string } | null>(null);
-const deleteStageId = ref<string | null>(null);
 const stageBusy = ref(false);
 const busy = ref(false);
 const importMsg = ref('');
@@ -383,59 +416,47 @@ async function onAddStage(name: string) {
 }
 
 function onDeleteStage(stageId: string) {
-  deleteStageId.value = stageId;
+  const title = stages.value.find((s) => s.id === stageId)?.title ?? '';
+  Modal.confirm({
+    title: 'حذف ستون',
+    content: `ستون «${title}» حذف شود؟ اگر معامله‌ای داخل آن باشد باید اول آن‌ها را جابه‌جا کنید.`,
+    okText: 'حذف',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      if (!boardPipelineId.value || stageBusy.value) return;
+      stageBusy.value = true;
+      error.value = '';
+      try {
+        await api.delete(`/pipelines/${boardPipelineId.value}/stages/${stageId}`);
+        await load();
+      } catch (e) {
+        error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
+        throw e;
+      } finally {
+        stageBusy.value = false;
+      }
+    },
+  });
 }
 
-const deleteStageTitle = computed(() => {
-  const id = deleteStageId.value;
-  return stages.value.find((s) => s.id === id)?.title ?? '';
-});
-
-async function confirmDeleteStage() {
-  const stageId = deleteStageId.value;
-  if (!stageId || !boardPipelineId.value || stageBusy.value) return;
-  stageBusy.value = true;
-  error.value = '';
-  try {
-    await api.delete(`/pipelines/${boardPipelineId.value}/stages/${stageId}`);
-    deleteStageId.value = null;
-    await load();
-  } catch (e) {
-    error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
-  } finally {
-    stageBusy.value = false;
-  }
-}
-
-const deleteDealIds = ref<string[]>([]);
 const dealDeleting = ref(false);
 const selectMode = ref(false);
 const selectedIds = ref<Set<string>>(new Set());
 
 const selectedCount = computed(() => selectedIds.value.size);
 
-const deleteDealTitle = computed(() => {
-  const ids = deleteDealIds.value;
-  if (ids.length !== 1) return '';
+function dealTitleById(dealId: string) {
   for (const s of stages.value) {
-    const d = s.deals.find((x) => x.id === ids[0]);
+    const d = s.deals.find((x) => x.id === dealId);
     if (d) return d.title;
   }
   return '';
-});
-
-const deleteConfirmCopy = computed(() => {
-  const n = deleteDealIds.value.length;
-  if (n <= 0) return '';
-  if (n === 1) {
-    return `معاملهٔ «${deleteDealTitle.value}» حذف شود؟ این کار قابل بازگشت نیست.`;
-  }
-  return `${toFaDigits(n)} معامله حذف شود؟ این کار قابل بازگشت نیست.`;
-});
+}
 
 function askDeleteDeal(dealId: string) {
   menuOpenId.value = null;
-  deleteDealIds.value = [dealId];
+  confirmDeleteDeals([dealId]);
 }
 
 function startSelect(dealId: string) {
@@ -460,31 +481,43 @@ function clearSelect() {
 function askBulkDelete() {
   if (!selectedIds.value.size) return;
   menuOpenId.value = null;
-  deleteDealIds.value = [...selectedIds.value];
+  confirmDeleteDeals([...selectedIds.value]);
 }
 
-async function confirmDeleteDeal() {
-  const ids = deleteDealIds.value;
+function confirmDeleteDeals(ids: string[]) {
   if (!ids.length || dealDeleting.value) return;
-  dealDeleting.value = true;
-  error.value = '';
-  try {
-    const results = await Promise.allSettled(ids.map((id) => api.delete(`/deals/${id}`)));
-    const failed = results.filter((r) => r.status === 'rejected').length;
-    deleteDealIds.value = [];
-    clearSelect();
-    await load();
-    if (failed) {
-      error.value =
-        failed === ids.length
-          ? 'حذف معامله‌ها ناموفق بود.'
-          : `${toFaDigits(failed)} مورد حذف نشد.`;
-    }
-  } catch (e) {
-    error.value = apiMessage(e, 'حذف معامله ناموفق بود.');
-  } finally {
-    dealDeleting.value = false;
-  }
+  const copy =
+    ids.length === 1
+      ? `معاملهٔ «${dealTitleById(ids[0]!)}» حذف شود؟ این کار قابل بازگشت نیست.`
+      : `${toFaDigits(ids.length)} معامله حذف شود؟ این کار قابل بازگشت نیست.`;
+  Modal.confirm({
+    title: ids.length > 1 ? 'حذف معامله‌ها' : 'حذف معامله',
+    content: copy,
+    okText: 'حذف',
+    cancelText: 'انصراف',
+    okButtonProps: { danger: true },
+    async onOk() {
+      dealDeleting.value = true;
+      error.value = '';
+      try {
+        const results = await Promise.allSettled(ids.map((id) => api.delete(`/deals/${id}`)));
+        const failed = results.filter((r) => r.status === 'rejected').length;
+        clearSelect();
+        await load();
+        if (failed) {
+          error.value =
+            failed === ids.length
+              ? 'حذف معامله‌ها ناموفق بود.'
+              : `${toFaDigits(failed)} مورد حذف نشد.`;
+        }
+      } catch (e) {
+        error.value = apiMessage(e, 'حذف معامله ناموفق بود.');
+        throw e;
+      } finally {
+        dealDeleting.value = false;
+      }
+    },
+  });
 }
 
 async function onDealSaved() {
@@ -593,6 +626,19 @@ function onMenuDeal(dealId: string) {
   });
 }
 
+function onDealMenuClick({ key }: { key: string | number }) {
+  const id = menuOpenId.value;
+  if (!id) return;
+  if (key === 'select') startSelect(id);
+  else if (key === 'view') onOpenDeal(id);
+  else if (key === 'edit') {
+    dealModal.value = { dealId: id };
+    menuOpenId.value = null;
+  } else if (key === 'promote') void promotePriorDeal(id);
+  else if (key === 'delete') askDeleteDeal(id);
+  else menuOpenId.value = null;
+}
+
 const unbindMenuDismiss = bindMenuDismiss(
   () => menuOpenId.value != null,
   () => (menuOpenId.value = null),
@@ -627,102 +673,141 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
 </script>
 
 <template>
-  <section class="page" dir="rtl">
-    <UiBusyOverlay :open="pageBusy" :message="busyMessage" />
-    <PipelineToolbar
-      pipeline-name="مسیر فروش"
-      :pipeline-options="pipelineOptions"
-      v-model:selected-pipeline-id="selectedPipelineId"
-      v-model:view-mode="viewMode"
-      v-model:search="search"
-      v-model:amount-min="amountMin"
-      v-model:amount-max="amountMax"
-      :can-create="canCreatePipeline"
-      @create="showCreate = true"
-    >
-      <template #excel>
-        <button class="btn-ghost-sm" type="button" :disabled="loading || busy" @click="exportExcel">
-          خروجی اکسل
-        </button>
-        <ExcelImportFlow
-          preview-path="/deals/import/preview"
-          import-path="/deals/import"
-          rows-import-path="/deals/import/rows"
-          :client-aliases="DEAL_EXCEL_ALIASES"
-          :client-fields="dealExcelFields"
-          :client-read-options="dealClientReadOptions"
-          :disabled="loading || busy"
-          @start="onImportStart"
-          @done="onImportDone"
-          @fail="onImportFail"
-          @settled="onImportSettled"
-        >
-          <button class="btn-ghost-sm" type="button" :disabled="loading || busy">
-            ورود از اکسل
-          </button>
-        </ExcelImportFlow>
-      </template>
-    </PipelineToolbar>
-
-    <SavedFiltersBar
-      scope="deals"
-      :current-filters="dealsSavedFilters"
-      @apply="applyDealsSavedFilters"
-    />
-
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-if="importMsg" class="ok">{{ importMsg }}</p>
-    <p v-else-if="loading && !stages.length" class="muted">در حال بارگذاری مسیر فروش…</p>
-
-    <div v-if="selectMode" class="select-bar">
-      <span>{{ toFaDigits(selectedCount) }} معامله انتخاب شده</span>
-      <button
-        v-if="selectedCount"
-        type="button"
-        class="select-del"
-        @click="askBulkDelete"
+  <div class="pipeline-page" dir="rtl" :style="pageStyle">
+    <a-flex vertical :gap="GAP" :style="{ flexShrink: 0 }">
+      <PipelineToolbar
+        pipeline-name="مسیر فروش"
+        :pipeline-options="pipelineOptions"
+        v-model:selected-pipeline-id="selectedPipelineId"
+        v-model:view-mode="viewMode"
+        v-model:search="search"
+        v-model:amount-min="amountMin"
+        v-model:amount-max="amountMax"
+        :can-create="canCreatePipeline"
+        @create="showCreate = true"
       >
-        حذف انتخاب‌شده‌ها
-      </button>
-      <button type="button" class="select-cancel" @click="clearSelect">انصراف از انتخاب</button>
+        <template #excel>
+          <a-button :disabled="loading || busy" @click="exportExcel">
+            <template #icon><DownloadOutlined /></template>
+            خروجی اکسل
+          </a-button>
+          <ExcelImportFlow
+            preview-path="/deals/import/preview"
+            import-path="/deals/import"
+            rows-import-path="/deals/import/rows"
+            :client-aliases="DEAL_EXCEL_ALIASES"
+            :client-fields="dealExcelFields"
+            :client-read-options="dealClientReadOptions"
+            :disabled="loading || busy"
+            @start="onImportStart"
+            @done="onImportDone"
+            @fail="onImportFail"
+            @settled="onImportSettled"
+          >
+            <a-button :disabled="loading || busy">
+              <template #icon><UploadOutlined /></template>
+              ورود از اکسل
+            </a-button>
+          </ExcelImportFlow>
+        </template>
+        <template #filters>
+          <SavedFiltersBar
+            compact
+            scope="deals"
+            :current-filters="dealsSavedFilters"
+            @apply="applyDealsSavedFilters"
+          />
+        </template>
+      </PipelineToolbar>
+
+      <a-alert v-if="error" type="error" show-icon :message="error" />
+      <a-alert v-if="importMsg" type="success" show-icon :message="importMsg" />
+      <a-spin v-if="loading && !stages.length" tip="در حال بارگذاری مسیر فروش…" />
+
+      <a-alert
+        v-if="selectMode"
+        type="info"
+        show-icon
+        :message="`${toFaDigits(selectedCount)} معامله انتخاب شده`"
+      >
+        <template #action>
+          <a-space>
+            <a-button
+              v-if="selectedCount"
+              type="primary"
+              danger
+              @click="askBulkDelete"
+            >
+              <template #icon><DeleteOutlined /></template>
+              حذف انتخاب‌شده‌ها
+            </a-button>
+            <a-button @click="clearSelect">انصراف از انتخاب</a-button>
+          </a-space>
+        </template>
+      </a-alert>
+    </a-flex>
+
+    <div
+      :style="{
+        position: 'relative',
+        flex: '1 1 auto',
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+      }"
+    >
+      <div
+        v-if="pageBusy"
+        :style="{
+          position: 'absolute',
+          inset: 0,
+          zIndex: 2,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: token.colorBgMask,
+        }"
+      >
+        <a-spin :tip="busyMessage" />
+      </div>
+
+      <PipelineList
+        v-if="viewMode === 'list' && (!loading || stages.length)"
+        :stages="visibleStages"
+        :select-mode="selectMode"
+        :selected-ids="selectedIds"
+        @open-deal="onOpenDeal"
+        @menu-deal="onMenuDeal"
+        @toggle-select="toggleSelect"
+        @bulk-delete="askBulkDelete"
+      />
+
+      <PipelineBoard
+        v-else-if="viewMode === 'kanban' && stages.length"
+        :stages="visibleStages"
+        :dragging-id="draggingId"
+        :drop-stage-id="dropStageId"
+        :can-manage="canCreatePipeline"
+        :select-mode="selectMode"
+        :selected-ids="selectedIds"
+        @drag-start="onDragStart"
+        @drag-end="onDragEnd"
+        @drag-over="onDragOver"
+        @drop="onDrop"
+        @add-deal="onAddDeal"
+        @open-deal="onOpenDeal"
+        @menu-deal="onMenuDeal"
+        @toggle-select="toggleSelect"
+        @bulk-delete="askBulkDelete"
+        @rename-stage="onRenameStage"
+        @delete-stage="onDeleteStage"
+        @move-stage="onMoveStage"
+        @column-drag-start="onColumnDragStart"
+        @column-drag-end="onColumnDragEnd"
+        @add-stage="onAddStage"
+      />
     </div>
 
-    <PipelineList
-      v-if="viewMode === 'list' && (!loading || stages.length)"
-      :stages="visibleStages"
-      :select-mode="selectMode"
-      :selected-ids="selectedIds"
-      @open-deal="onOpenDeal"
-      @menu-deal="onMenuDeal"
-      @toggle-select="toggleSelect"
-      @bulk-delete="askBulkDelete"
-    />
-
-    <PipelineBoard
-      v-else-if="viewMode === 'kanban' && stages.length"
-      :stages="visibleStages"
-      :dragging-id="draggingId"
-      :drop-stage-id="dropStageId"
-      :can-manage="canCreatePipeline"
-      :select-mode="selectMode"
-      :selected-ids="selectedIds"
-      @drag-start="onDragStart"
-      @drag-end="onDragEnd"
-      @drag-over="onDragOver"
-      @drop="onDrop"
-      @add-deal="onAddDeal"
-      @open-deal="onOpenDeal"
-      @menu-deal="onMenuDeal"
-      @toggle-select="toggleSelect"
-      @bulk-delete="askBulkDelete"
-      @rename-stage="onRenameStage"
-      @delete-stage="onDeleteStage"
-      @move-stage="onMoveStage"
-      @column-drag-start="onColumnDragStart"
-      @column-drag-end="onColumnDragEnd"
-      @add-stage="onAddStage"
-    />
-
     <Teleport to="body">
       <DealCardOverlay
         v-if="overlayDeal && draggingId"
@@ -734,109 +819,62 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
     </Teleport>
 
     <Teleport to="body">
-      <div v-if="menuOpenId" class="menu-pop" role="menu" :style="menuStyle ?? undefined">
-        <button type="button" role="menuitem" @click="startSelect(menuOpenId)">
-          انتخاب
-        </button>
-        <button type="button" role="menuitem" @click="onOpenDeal(menuOpenId)">
-          مشاهده معامله
-        </button>
-        <button
-          type="button"
-          role="menuitem"
-          @click="dealModal = { dealId: menuOpenId ?? undefined }; menuOpenId = null"
+      <div
+        v-if="menuOpenId"
+        :style="{
+          position: 'fixed',
+          zIndex: 1080,
+          ...(menuStyle ?? {}),
+        }"
+      >
+        <a-menu
+          :style="{ minWidth: '160px', boxShadow: token.boxShadowSecondary }"
+          @click="onDealMenuClick"
         >
-          ویرایش
-        </button>
-        <button
-          v-if="canPromotePrior(findDeal(menuOpenId))"
-          type="button"
-          role="menuitem"
-          @click="promotePriorDeal(menuOpenId)"
-        >
-          انتقال به کار جاری
-        </button>
-        <button type="button" role="menuitem" class="danger" @click="askDeleteDeal(menuOpenId)">
-          حذف
-        </button>
-        <button type="button" role="menuitem" @click="menuOpenId = null">بستن</button>
+          <a-menu-item key="select">انتخاب</a-menu-item>
+          <a-menu-item key="view">مشاهده معامله</a-menu-item>
+          <a-menu-item key="edit">ویرایش</a-menu-item>
+          <a-menu-item
+            v-if="canPromotePrior(findDeal(menuOpenId))"
+            key="promote"
+          >
+            انتقال به کار جاری
+          </a-menu-item>
+          <a-menu-item key="delete" danger>حذف</a-menu-item>
+          <a-menu-item key="close">بستن</a-menu-item>
+        </a-menu>
       </div>
     </Teleport>
 
-    <UiModal
+    <a-modal
       :open="showCreate && canCreatePipeline"
       title="مسیر فروش جدید"
-      @close="showCreate = false"
+      :confirm-loading="saving"
+      ok-text="ساخت"
+      cancel-text="انصراف"
+      :ok-button-props="{ disabled: newName.trim().length < 2 }"
+      destroy-on-close
+      @ok="createPipeline"
+      @cancel="showCreate = false"
     >
-      <form class="create-form" @submit.prevent="createPipeline">
-        <label class="field">
-          <span>نام مسیر فروش</span>
-          <UiInput
-            v-model="newName"
+      <a-form layout="vertical" @finish="createPipeline">
+        <a-form-item label="نام مسیر فروش" required>
+          <a-input
+            v-model:value="newName"
             placeholder="نام مسیر فروش جدید…"
             :maxlength="120"
-            required
-            :minlength="2"
           />
-        </label>
-      </form>
-      <template #footer>
-        <UiButton
-          type="button"
-          :disabled="saving || newName.trim().length < 2"
-          @click="createPipeline"
-        >
-          {{ saving ? 'در حال ساخت…' : 'ساخت' }}
-        </UiButton>
-        <UiButton variant="ghost" type="button" @click="showCreate = false">
-          انصراف
-        </UiButton>
-      </template>
-    </UiModal>
+        </a-form-item>
+      </a-form>
+    </a-modal>
 
-    <UiModal
-      :open="Boolean(deleteStageId)"
-      title="حذف ستون"
-      @close="deleteStageId = null"
-    >
-      <p class="delete-copy">
-        ستون «{{ deleteStageTitle }}» حذف شود؟ اگر معامله‌ای داخل آن باشد باید
-        اول آن‌ها را جابه‌جا کنید.
-      </p>
-      <template #footer>
-        <UiButton
-          type="button"
-          :disabled="stageBusy"
-          @click="confirmDeleteStage"
-        >
-          {{ stageBusy ? 'در حال حذف…' : 'حذف' }}
-        </UiButton>
-        <UiButton variant="ghost" type="button" @click="deleteStageId = null">
-          انصراف
-        </UiButton>
-      </template>
-    </UiModal>
-
-    <UiModal
-      :open="deleteDealIds.length > 0"
-      :title="deleteDealIds.length > 1 ? 'حذف معامله‌ها' : 'حذف معامله'"
-      @close="deleteDealIds = []"
-    >
-      <p class="delete-copy">{{ deleteConfirmCopy }}</p>
-      <template #footer>
-        <UiButton type="button" :disabled="dealDeleting" @click="confirmDeleteDeal">
-          {{ dealDeleting ? 'در حال حذف…' : 'حذف' }}
-        </UiButton>
-        <UiButton variant="ghost" type="button" @click="deleteDealIds = []">
-          انصراف
-        </UiButton>
-      </template>
-    </UiModal>
-
-    <UiModal
+    <a-modal
       :open="Boolean(dealModal)"
       :title="dealModal?.dealId ? 'ویرایش معامله' : 'ایجاد معامله جدید'"
-      @close="dealModal = null"
+      :footer="null"
+      destroy-on-close
+      width="720px"
+      @cancel="dealModal = null"
     >
       <DealFormView
         v-if="dealModal"
@@ -847,117 +885,14 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
         @saved="onDealSaved"
         @cancel="dealModal = null"
       />
-    </UiModal>
-  </section>
+    </a-modal>
+  </div>
 </template>
 
 <style scoped>
-.page {
-  display: grid;
-  gap: 0.15rem;
-  min-width: 0;
-  max-width: 100%;
-  direction: rtl;
-  text-align: right;
-  container-type: inline-size;
-  container-name: pipeline;
-}
-
-.create-form .field {
-  display: grid;
-  gap: 0.35rem;
-}
-
-.create-form .field span {
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.error {
-  color: var(--danger);
-  font-weight: 600;
-}
-
-.ok {
-  color: #0f766e;
-  font-weight: 600;
-}
-
-.delete-copy {
+/* پدینگ بیرونی فقط از `.content` شل = ۱۶px */
+.pipeline-page {
   margin: 0;
-  line-height: 1.7;
-  color: var(--ink);
-}
-
-.select-bar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.65rem 1rem;
-  padding: 0.55rem 0.85rem;
-  border-radius: var(--radius);
-  background: color-mix(in srgb, var(--accent) 10%, #fff);
-  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
-  font-size: 0.86rem;
-  font-weight: 700;
-  color: var(--ink);
-}
-
-.select-bar span {
-  flex: 1;
-  min-width: 8rem;
-}
-
-.select-bar button {
-  border: 0;
-  background: none;
-  padding: 0;
-  font: inherit;
-  font-size: 0.82rem;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.select-bar .select-del {
-  color: var(--danger);
-}
-
-.select-bar .select-cancel {
-  color: var(--accent);
-}
-
-.menu-pop {
-  position: fixed;
-  z-index: 80;
-  background: #fff;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 0.35rem;
-  display: grid;
-  gap: 0.15rem;
-}
-
-.menu-pop button {
-  border: 0;
-  background: transparent;
-  padding: 0.45rem 0.85rem;
-  cursor: pointer;
-  font: inherit;
-  color: var(--ink);
-  text-align: right;
-}
-
-.menu-pop button:hover {
-  background: var(--surface-2, #f1f5f9);
-  border-radius: calc(var(--radius) - 4px);
-}
-
-.menu-pop button.danger {
-  color: var(--danger);
+  width: 100%;
 }
 </style>
diff --git a/docs/وضعیت-دیزاین-سیستم.md b/docs/وضعیت-دیزاین-سیستم.md
new file mode 100644
index 0000000..1dfe878
--- /dev/null
+++ b/docs/وضعیت-دیزاین-سیستم.md
@@ -0,0 +1,233 @@
+# وضعیت دیزاین‌سیستم منتکت (Montact CRM)
+
+سند audit وضعیت واقعی لایهٔ UI در `apps/web` — نه آرزو، نه Figma.  
+آخرین به‌روزرسانی: ۲۶ مهر ۱۴۰۵
+
+**راهنما:**  
+- **آماده** = در کد وجود دارد و به‌طور منسجم قابل اتکا است  
+- **نیمه‌آماده** = وجود دارد ولی پوشش/انضباط ناقص است  
+- **نیست** = در کدبیس پیاده نشده
+
+---
+
+## خلاصهٔ اجرایی
+
+دیزاین‌سیستم منتکت **نیمه‌آماده / در حال رشد** است: توکن‌های CSS، کلاس‌های الگوی `crm-*`، و یک کیت داخلی ۱۸تایی `Ui*` وجود دارد؛ اما API دوگانهٔ لگسی (`.btn` / `.field`)، hardcode گستردهٔ رنگ و فاصله در scoped CSS، نبود Storybook، و نبود چند primitive پرکاربرد مانع «سیستم واقعی» است.
+
+| معیار | مقدار |
+|---|---|
+| امتیاز کلی آمادگی | **حدود ۵۰٪** (بازهٔ واقع‌بینانه ۴۵–۵۵٪) |
+| استک UI | Vue 3 SFC + Composition API — بدون Tailwind / UI kit شخص‌ثالث |
+| primitives `Ui*` | ۱۸ کامپوننت + barrel |
+| adoption مستقیم در views | **۵۲ از ۷۶** (~۶۸٪) |
+| تم تاریک / چندتم | نیست |
+| کاتالوگ زنده (Storybook و مشابه) | نیست |
+
+**حکم یک‌خطی:** زبان بصری teal + RTL برای CRM شکل گرفته؛ انضباط و پوشش کامپوننت هنوز به سطح design system کامل نرسیده.
+
+---
+
+## استک و مرز سیستم
+
+```
+tokens (main.css :root)
+    ↓
+utilities / patterns (tokens.css → .crm-*)
+    ↓
+primitives (components/ui/Ui*)
+    ↓
+domain composites (pipeline/, gamification/, nav/, …)
+    ↓
+views + layouts
+```
+
+| لایه | مسیر | نقش |
+|---|---|---|
+| تعریف توکن‌ها | [`apps/web/src/styles/main.css`](../apps/web/src/styles/main.css) | `:root` — رنگ، تایپو، فاصله، سایه، z-index، کنترل‌ها؛ همچنین استایل لگسی `.btn` / `.field` |
+| الگوهای CRM | [`apps/web/src/styles/tokens.css`](../apps/web/src/styles/tokens.css) | utilityهای `.crm-page`, `.crm-card`, `.crm-toolbar`, … (نام فایل «tokens» است؛ تعریف توکن اینجا نیست) |
+| فونت | [`apps/web/src/styles/fonts.css`](../apps/web/src/styles/fonts.css) | IRANSans FaNum خودمیزبان |
+| کیت UI | [`apps/web/src/components/ui/`](../apps/web/src/components/ui/) | ۱۸ SFC + [`index.ts`](../apps/web/src/components/ui/index.ts) |
+| آیکن | [`apps/web/src/components/UiIcon.vue`](../apps/web/src/components/UiIcon.vue) | بیرون از barrel `ui/` |
+| شِل اپ | [`layouts/AppLayout.vue`](../apps/web/src/layouts/AppLayout.vue)، [`layouts/AdmLayout.vue`](../apps/web/src/layouts/AdmLayout.vue) | سایدبار + workspace / ادمین پلتفرم |
+
+**وابستگی‌های UI در `package.json` وب:** فقط Vue، Vue Router، Pinia، Axios، ECharts / vue-echarts، xlsx. هیچ Element Plus / Vuetify / Naive / Headless / Tailwind نیست.
+
+---
+
+## ماتریس آمادگی
+
+| لایه | وضعیت | توضیح کوتاه |
+|---|---|---|
+| توکن رنگ / تایپو / فاصله / سایه | **آماده** | پالت teal روی slate؛ scale فونت و spacing و shadow تعریف شده |
+| مقیاس radius | **نیمه‌آماده** | همهٔ `--radius-*` (جز full) روی ۱۰px قفل‌اند — سلسله‌مراتب واقعی نیست |
+| spacing کامل | **نیمه‌آماده** | `--sp-1`…`6` و `8` و `10`؛ `--sp-7` / `--sp-9` نیست |
+| الگوی صفحه `crm-*` | **نیمه‌آماده** | مجموعهٔ خوب برای page/header/card/table/form؛ adoption ناقص |
+| primitives `Ui*` | **نیمه‌آماده** | ۱۸ قطعهٔ کاربردی؛ چند کنترل پایهٔ فرم/فیدبک غایب |
+| آیکن `UiIcon` | **آماده** | ~۷۰ آیکن stroke، `currentColor`، بدون پکیج خارجی |
+| Layout اپ / ادمین | **آماده** | شِل دسکتاپ + موبایل tabbar؛ ادم جدا |
+| RTL + IRANSans + جلالی | **آماده** | `dir="rtl"`، فونت فارسی، `lib/jalali.ts`، ارقام فارسی |
+| Dark mode / multi-theme | **نیست** | فقط تم روشن |
+| Storybook / Histoire / playground | **نیست** | اسکریپت lint وب هم placeholder است |
+| Checkbox / Switch / Tabs / Toast / Tooltip / Table / DatePicker به‌عنوان `Ui*` | **نیست** | معادل‌ها اغلب ad-hoc یا دامنهٔ خاص (`JalaliDateInput` و …) |
+| vue-i18n | **نیست** | متن‌ها فارسی hardcode در template |
+| lint / اجبار توکن (منع hex خام) | **نیست** | رنگ و rem زیاد در scoped CSS تکرار شده |
+
+---
+
+## توکن‌ها (آنچه واقعاً هست)
+
+تعریف در `:root` داخل `main.css`:
+
+| دسته | نمونه |
+|---|---|
+| سطح | `--bg`, `--surface`, `--surface-subtle`, `--surface-hover` |
+| متن / خط | `--ink`, `--ink-secondary`, `--muted`, `--line`, … |
+| accent | `--accent` (#14b8a6) و hover/deep/soft/subtle/contrast |
+| معنایی | `--danger`, `--success`, `--warning`, `--info` (+ soft/deep) |
+| تایپو | `--fs-xs`…`--fs-3xl`, `--fw-*`, `--lh-*`, `--font` |
+| فاصله | `--sp-1`…`--sp-6`, `--sp-8`, `--sp-10` |
+| کنترل | `--control-h-sm/h/md/lg`, `--pad-modal` |
+| سایه / حرکت / z | `--shadow-*`, `--transition-*`, `--z-dropdown`…`--z-toast` |
+| alias لگسی | `--color-primary`, `--color-text`, `--color-border`, … |
+
+**ضعف‌ها:** radius تخت؛ `--fw-extrabold` برابر bold؛ توکن‌های محلی در `AppLayout` (مثل `--sidebar-card`) بیرون از `:root` سراسری؛ `CHART_PALETTE` در `UiChart` تا حدی جدا از توکن‌ها.
+
+---
+
+## کاتالوگ کامپوننت‌های `Ui*`
+
+منبع: barrel [`components/ui/index.ts`](../apps/web/src/components/ui/index.ts).
+
+| کامپوننت | نقش |
+|---|---|
+| `UiButton` | دکمه — variant / size / loading / block |
+| `UiInput` | ورودی متن — `defineModel`، prefix/suffix |
+| `UiTextarea` | متن چندخطی |
+| `UiSelect` | select بومی با slot برای `<option>` |
+| `UiField` | برچسب + hint + error دور کنترل |
+| `UiCard` | کارت با header / actions / footer |
+| `UiModal` | مودال + قفل اسکرول body |
+| `UiDrawer` | کشو از کنار |
+| `UiBusyOverlay` | پوشش busy / progress |
+| `UiPageHeader` | عنوان صفحه + lead + actions + back |
+| `UiBadge` | نشان وضعیت |
+| `UiPagination` | صفحه‌بندی + page size |
+| `UiEmptyState` | حالت خالی |
+| `UiSearch` | جستجوی ساده |
+| `UiFilterBar` | نوار جستجو + پنل فیلتر |
+| `UiSegmented` | کنترل segmented |
+| `UiChart` | ECharts + `CHART_PALETTE` |
+| `UiDropdownMenu` | منوی کشویی با trigger slot |
+
+**مرتبط ولی خارج از barrel:** `UiIcon.vue`.
+
+**domain composites (دیزاین‌سیستم نیستند):** پوشه‌هایی مثل `pipeline/`, `gamification/`, `dashboard/`, `routines/`, `nav/`, `person-profile/` — ترکیب ویژگی‌محور روی primitives یا استایل محلی.
+
+---
+
+## پترن‌های UI واقعی در پروژه
+
+### ۱) الگوی ترجیحی (هدف فعلی)
+
+```ts
+import { UiButton, UiModal, UiPageHeader } from '@/components/ui';
+```
+
+صفحه با `.crm-page` + `UiPageHeader` / `UiFilterBar` / `UiCard` / جدول `.crm-table*`.
+
+### ۲) الگوی موازی / لگسی
+
+- کلاس‌های سراسری `.btn`, `.btn-ghost`, `.field` در `main.css`
+- `<button>` / `<input>` خام + scoped CSS در viewهای قدیمی‌تر یا خاص (Login، Notes، adm، …)
+- import مستقیم فایل به‌جای barrel در بعضی viewها (`import UiButton from '@/components/ui/UiButton.vue'`)
+
+### ۳) الگوی غیرمستقیم
+
+بعضی viewها خودشان `ui/` را import نمی‌کنند ولی childها می‌کنند (مثلاً `HomeView` → `components/dashboard/*` → `UiChart` / `UiButton`).
+
+### لایه‌بندی مفهومی
+
+```mermaid
+flowchart TB
+  tokens[CSS_tokens_main_css]
+  utils[crm_utilities_tokens_css]
+  ui[Ui_primitives]
+  domain[Domain_composites]
+  views[Views_and_Layouts]
+  legacy[Legacy_btn_field]
+  tokens --> utils
+  tokens --> ui
+  utils --> views
+  ui --> domain
+  ui --> views
+  domain --> views
+  legacy --> views
+```
+
+---
+
+## Adoption کمی (views)
+
+| متریک | عدد |
+|---|---:|
+| کل viewهای `apps/web/src/views` | ۷۶ |
+| view با import مستقیم از `components/ui` | ۵۲ (~۶۸٪) |
+| view بدون import مستقیم | ۲۴ (~۳۲٪) |
+
+### بدون import مستقیم `ui/` (ممکن است از child یا لگسی استفاده کنند)
+
+- `ActivitiesCalendarView`, `ActivityDetailView`
+- `adm/AdmAdminsView`, `AdmBillingPanel`, `AdmDashboardView`, `AdmLoginView`, `AdmOrganizationsView`, `AdmUsersView`
+- `AttachmentsView`, `ConversationsView`
+- `gamification/GamificationView`, `GamificationAdminView`
+- `HomeView`, `InvoiceFormView`, `LeadFormPublicView`
+- `LoginView`, `NotesView`, `PersonProfileView`, `PortalView`, `ProfileView`
+- `ProjectCardFormView`, `QuoteFormView`, `QuotesView`, `RegisterView`
+
+**نکتهٔ کیفیت:** حتی viewهایی که `Ui*` دارند اغلب هنوز hex/`rem` محلی در `<style scoped>` دارند؛ adoption کامپوننت ≠ انضباط توکن.
+
+---
+
+## ساختار پوشهٔ `components/` (خلاصه)
+
+```
+components/
+├── ui/                 ← primitives + index.ts (تنها barrel)
+├── UiIcon.vue          ← آیکن مشترک
+├── activities|auth|automations|brand|dashboard|
+│   gamification|nav|person-*|pipeline|routines|…
+└── *.vue               ← ورودی‌های متقاطع (JalaliDateInput, MoneyInput, …)
+```
+
+الگوی غالب: **Composition API** با `<script setup lang="ts">`؛ استایل scoped روی کامپوننت + مصرف `var(--…)`.
+
+---
+
+## شکاف‌ها و اولویت پیشنهادی
+
+ترتیب پیشنهادی برای نزدیک‌شدن به design system واقعی (فقط نقشه — خارج از scope این سند):
+
+1. **یک API برای دکمه/فرم** — مهاجرت تدریجی از `.btn` / `.field` به `UiButton` / `UiField` + حذف یا thin-wrapper کردن لگسی  
+2. **تکمیل primitives پرکاربرد** — حداقل Toast، Tabs، Checkbox/Switch، Table (یا wrapper روی الگوی `.crm-table`)  
+3. **اجبار توکن** — جایگزینی تدریجی hex تکراری با `var(--…)`؛ در حد ممکن rule/lint  
+4. **کاتالوگ زنده** — Storybook / Histoire یا یک صفحهٔ داخلی فقط برای `Ui*`  
+5. **تم** — فقط اگر محصول dark/multi-brand می‌خواهد؛ فعلاً پیش‌نیاز انضباط توکن است
+
+---
+
+## چک‌لیست «آیا design system هستیم؟»
+
+| قابلیت | وضعیت |
+|---|---|
+| توکن‌های مشترک | بله |
+| لایهٔ الگوی صفحه | بله (ناقص) |
+| کیت primitive داخلی | بله (ناقص) |
+| آیکن یکپارچه | بله |
+| شِل و RTL فارسی | بله |
+| پوشش اکثر صفحات | نسبتاً بله (~۶۸٪ مستقیم) |
+| یک منبع حقیقت بدون لگسی موازی | خیر |
+| مستند/کاتالوگ زنده | خیر |
+| تم / i18n / lint توکن | خیر |
+
+**جمع‌بندی:** پروژه یک **design language + UI kit در حال رشد** دارد، نه یک design system کامل و منضبط. برای کار روزمرهٔ فیچر کافی است؛ برای اسکیل بدون drift بصری، اولویت‌های ۱–۴ بالا ضروری‌اند.
+)
diff --git a/package-lock.json b/package-lock.json
index bf6fd23..f7fcd20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,7 +60,9 @@
       "name": "@mento/web",
       "version": "0.1.0",
       "dependencies": {
+        "@ant-design/icons-vue": "^7.0.1",
         "@mento/shared": "*",
+        "ant-design-vue": "^4.2.6",
         "axios": "^1.8.4",
         "echarts": "^6.1.0",
         "pinia": "^3.0.1",
@@ -184,6 +186,34 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-6.0.0.tgz",
+      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.6.0.tgz",
+      "integrity": "sha512-PRomU725ABMf/lnQp5HiB7my1kjEbFY0D10N4lXYxK6TIB1gKjIVD5MRThpDaezLgw1D774J8eOeeDB0M6wHrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/icons-vue": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-7.0.1.tgz",
+      "integrity": "sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-svg": "^4.2.1"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.3"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "dev": true,
@@ -224,6 +254,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.10",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.10.tgz",
+      "integrity": "sha512-NpugTzbKgGrNe45Ui32cN8vCFFMxVtP/9rtfwv0nP5FRDAjvYBxJcLVpYA9mr1jxP6cnIT7x9LUzuDTbWYYNRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.29.8",
       "license": "MIT",
@@ -252,6 +291,27 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/linux-x64": {
       "version": "0.28.2",
       "cpu": [
@@ -263,7 +323,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -279,7 +338,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1070,6 +1128,16 @@
         "win32"
       ]
     },
+    "node_modules/@simonwep/pickr": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.8.2.tgz",
+      "integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^3.15.1",
+        "nanopop": "^2.1.0"
+      }
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "devOptional": true,
@@ -1739,6 +1807,46 @@
         "node": ">=14"
       }
     },
+    "node_modules/ant-design-vue": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-4.2.6.tgz",
+      "integrity": "sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-vue": "^7.0.0",
+        "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.5.0",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/unitless": "^0.8.0",
+        "@simonwep/pickr": "~1.8.0",
+        "array-tree-filter": "^2.1.0",
+        "async-validator": "^4.0.0",
+        "csstype": "^3.1.1",
+        "dayjs": "^1.10.5",
+        "dom-align": "^1.12.1",
+        "dom-scroll-into-view": "^2.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "shallow-equal": "^1.0.0",
+        "stylis": "^4.1.3",
+        "throttle-debounce": "^5.0.0",
+        "vue-types": "^3.0.0",
+        "warning": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design-vue"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/append-field": {
       "version": "1.0.0",
       "license": "MIT"
@@ -1830,10 +1938,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==",
+      "license": "MIT"
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "license": "MIT"
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "license": "MIT"
@@ -2355,6 +2475,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==",
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "license": "MIT"
@@ -2427,6 +2553,20 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.50.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.50.0.tgz",
+      "integrity": "sha512-BRWgOLKkFeCgRudR6zrs8p9XJZcE14grzKMMssoYrk6krtuEZ7MTKPIY5RzOnqsEKIR9kst7wNzphttraT+Yqw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "license": "MIT"
@@ -2586,6 +2726,18 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/dom-align": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==",
+      "license": "MIT"
+    },
+    "node_modules/dom-scroll-into-view": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==",
+      "license": "MIT"
+    },
     "node_modules/dotenv": {
       "version": "17.4.1",
       "license": "BSD-2-Clause",
@@ -3530,6 +3682,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
+      "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "license": "MIT"
@@ -3593,7 +3754,6 @@
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -3812,6 +3972,12 @@
       "version": "4.18.1",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT"
+    },
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
       "license": "MIT"
@@ -3899,6 +4065,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "11.5.2",
       "dev": true,
@@ -4119,6 +4297,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nanopop": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.4.2.tgz",
+      "integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==",
+      "license": "MIT"
+    },
     "node_modules/negotiator": {
       "version": "1.1.0",
       "license": "MIT",
@@ -4685,6 +4869,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "dev": true,
@@ -4896,6 +5086,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
     "node_modules/semver": {
       "version": "7.8.5",
       "license": "ISC",
@@ -4955,6 +5154,12 @@
       "version": "1.2.0",
       "license": "ISC"
     },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==",
+      "license": "MIT"
+    },
     "node_modules/side-channel": {
       "version": "1.1.1",
       "license": "MIT",
@@ -5147,6 +5352,12 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.4.0.tgz",
+      "integrity": "sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==",
+      "license": "MIT"
+    },
     "node_modules/superjson": {
       "version": "2.2.6",
       "license": "MIT",
@@ -5317,6 +5528,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/tinyexec": {
       "version": "1.3.0",
       "devOptional": true,
@@ -5820,6 +6040,30 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/vue-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/vue-types/-/vue-types-3.0.2.tgz",
+      "integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "3.0.1"
+      },
+      "engines": {
+        "node": ">=10.15.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.5.2",
       "dev": true,