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