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