feat(web): migrate CRM screens to Ant Design Vue with central theme

Adopt ant-design-vue and a shared antdTheme for leads, pipeline, invoices, and shared form controls under strict single-page governance.

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

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>