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/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>