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