Ship loyalty club and form builder so production pull gets the new screens.

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

apps/web/src/components/QuickCreate.vue

@@ -437,7 +437,7 @@ onBeforeUnmount(() => {
 
 .fab :deep(.ico) {
   display: block;
-  stroke-width: 2.2;
+  stroke-width: 1.55;
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
 }
 

apps/web/src/components/UiIcon.vue

@@ -54,7 +54,10 @@ defineProps<{
     | 'eye'
     | 'truck'
     | 'grip'
-    | 'apps-plus';
+    | 'apps-plus'
+    | 'crown'
+    | 'gift'
+    | 'medal';
   size?: number;
 }>();
 </script>
@@ -315,8 +318,27 @@ defineProps<{
     <template v-else-if="name === 'apps-plus'">
       <rect x="3.2" y="3.2" width="7.4" height="7.4" rx="1.6" />
       <rect x="13.4" y="3.2" width="7.4" height="7.4" rx="1.6" />
-      <rect x="3.2" y="13.4" width="7.4" height="7.4" rx="1.6" />
-      <path d="M17.1 13.6v6.8M13.7 17h6.8" />
+      <rect x="13.4" y="13.4" width="7.4" height="7.4" rx="1.6" />
+      <path d="M6.9 13.6v6.8M3.5 17h6.8" />
+    </template>
+    <template v-else-if="name === 'crown'">
+      <path d="M4 16.5 6.2 8.2 12 12.4 17.8 8.2 20 16.5H4Z" />
+      <path d="M5.2 18.6h13.6" />
+      <circle cx="6.2" cy="7.2" r="1.15" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="5.6" r="1.15" fill="currentColor" stroke="none" />
+      <circle cx="17.8" cy="7.2" r="1.15" fill="currentColor" stroke="none" />
+    </template>
+    <template v-else-if="name === 'gift'">
+      <rect x="4" y="11" width="16" height="9" rx="1.4" />
+      <path d="M4 11V8.2A1.4 1.4 0 0 1 5.4 6.8h13.2A1.4 1.4 0 0 1 20 8.2V11" />
+      <path d="M12 6.8v13.2" />
+      <path d="M12 6.8c0-2.1-1.5-3.4-3.2-2.4C7.2 5.3 8.1 7.6 12 6.8Z" />
+      <path d="M12 6.8c0-2.1 1.5-3.4 3.2-2.4 1.6.9.7 3.2-3.2 2.4Z" />
+    </template>
+    <template v-else-if="name === 'medal'">
+      <circle cx="12" cy="9" r="5.2" />
+      <circle cx="12" cy="9" r="2.3" />
+      <path d="m9.1 13.6-1.4 6.2 4.3-2.3 4.3 2.3-1.4-6.2" />
     </template>
   </svg>
 </template>

apps/web/src/router/index.ts

@@ -180,6 +180,12 @@ export const router = createRouter({
           component: () => import('@/views/LeadFormsSettingsView.vue'),
           meta: { roles: ['owner', 'admin'] as UserRole[] },
         },
+        {
+          path: 'settings/lead-forms/:id',
+          name: 'lead-form-builder',
+          component: () => import('@/views/LeadFormBuilderView.vue'),
+          meta: { roles: ['owner', 'admin'] as UserRole[] },
+        },
         {
           path: 'settings/team',
           name: 'team-settings',

apps/web/src/views/LeadFormBuilderView.vue

@@ -0,0 +1,652 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import UiIcon from '@/components/UiIcon.vue';
+import type {
+  LeadFormDto,
+  LeadFormFieldDto,
+  LeadFormFieldInput,
+  LeadFormFieldType,
+  LeadFormMapTo,
+  LeadFormSubmissionDto,
+  OrgUserDto,
+  PipelineDto,
+} from '@mento/shared';
+
+type Tab = 'edit' | 'settings' | 'share' | 'responses';
+type IconName =
+  | 'user' | 'chat' | 'mail' | 'phone' | 'list' | 'layers' | 'calendar'
+  | 'check' | 'chart' | 'document' | 'star' | 'megaphone' | 'building';
+
+const route = useRoute();
+const router = useRouter();
+const id = computed(() => String(route.params.id || ''));
+
+const loading = ref(true);
+const saving = ref(false);
+const error = ref('');
+const ok = ref('');
+const tab = ref<Tab>('edit');
+const desktopPreviewOpen = ref(false);
+const advancedOpen = ref(false);
+const readyOpen = ref<string | null>('personal');
+const editFieldKey = ref<string | null>(null);
+const dragKey = ref<string | null>(null);
+
+const form = ref<LeadFormDto | null>(null);
+const name = ref('');
+const description = ref('');
+const fields = ref<LeadFormFieldDto[]>([]);
+const submitLabel = ref('ارسال درخواست');
+const submitColor = ref('#14b8a6');
+const isActive = ref(true);
+const createPerson = ref(true);
+const createDeal = ref(true);
+const pipelineId = ref('');
+const source = ref('وب‌سایت');
+const thankYouMessage = ref('');
+const redirectUrl = ref('');
+const assigneeIds = ref<string[]>([]);
+const users = ref<OrgUserDto[]>([]);
+const pipelines = ref<PipelineDto[]>([]);
+const submissions = ref<LeadFormSubmissionDto[]>([]);
+const coverInput = ref<HTMLInputElement | null>(null);
+
+const toolbox: Array<{ type: LeadFormFieldType; label: string; icon: IconName }> = [
+  { type: 'text', label: 'متن کوتاه', icon: 'user' },
+  { type: 'textarea', label: 'متن بلند', icon: 'chat' },
+  { type: 'email', label: 'ایمیل', icon: 'mail' },
+  { type: 'phone', label: 'شماره تماس', icon: 'phone' },
+  { type: 'checkbox', label: 'چندانتخابی', icon: 'list' },
+  { type: 'select', label: 'لیست کشویی', icon: 'layers' },
+  { type: 'date', label: 'تاریخ', icon: 'calendar' },
+  { type: 'radio', label: 'دکمه رادیویی', icon: 'check' },
+  { type: 'number', label: 'عددی', icon: 'chart' },
+  { type: 'file', label: 'آپلود فایل', icon: 'document' },
+  { type: 'rating', label: 'امتیازدهی', icon: 'star' },
+  { type: 'heading', label: 'متن توضیحی', icon: 'megaphone' },
+];
+
+const typeLabel: Record<string, string> = Object.fromEntries(
+  toolbox.map((t) => [t.type, t.label]),
+);
+
+const readyGroups = [
+  {
+    key: 'personal', title: 'اطلاعات فردی',
+    items: [
+      { label: 'نام و نام خانوادگی', fieldType: 'text' as const, mapTo: 'person.fullName' as const },
+      { label: 'ایمیل', fieldType: 'email' as const, mapTo: 'person.email' as const },
+      { label: 'موبایل', fieldType: 'phone' as const, mapTo: 'person.mobile' as const },
+    ],
+  },
+  {
+    key: 'org', title: 'اطلاعات سازمانی',
+    items: [
+      { label: 'نام شرکت', fieldType: 'text' as const, mapTo: 'custom' as const },
+      { label: 'سمت', fieldType: 'text' as const, mapTo: 'person.position' as const },
+    ],
+  },
+  {
+    key: 'job', title: 'اطلاعات شغلی',
+    items: [{ label: 'عنوان شغلی', fieldType: 'text' as const, mapTo: 'person.position' as const }],
+  },
+  {
+    key: 'market', title: 'سؤالات بازاریابی',
+    items: [{
+      label: 'از کجا آشنا شدید؟', fieldType: 'select' as const, mapTo: 'custom' as const,
+      options: ['سایت', 'اینستاگرام', 'معرفی'],
+    }],
+  },
+];
+
+const origin = computed(() => window.location.origin);
+const publicUrl = computed(() => (form.value ? `${origin.value}${form.value.publicPath}` : ''));
+const iframeSnippet = computed(
+  () => `<iframe src="${publicUrl.value}" width="100%" height="720" style="border:0;border-radius:16px" title="${name.value}"></iframe>`,
+);
+const qrUrl = computed(() =>
+  `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(publicUrl.value)}`,
+);
+const coverSrc = computed(() =>
+  form.value?.hasCover ? `/api/public/forms/${form.value.publicToken}/cover` : '',
+);
+const editingField = computed(() => fields.value.find((f) => f.key === editFieldKey.value) ?? null);
+
+function newKey(label: string) {
+  const base = label.replace(/\s+/g, '_').slice(0, 24) || 'field';
+  let key = `${base}_${Math.random().toString(36).slice(2, 6)}`;
+  while (fields.value.some((f) => f.key === key)) key += 'x';
+  return key;
+}
+
+function defaultMap(type: LeadFormFieldType): LeadFormMapTo {
+  if (type === 'email') return 'person.email';
+  if (type === 'phone') return 'person.mobile';
+  if (type === 'text') return 'person.fullName';
+  if (type === 'textarea') return 'deal.notes';
+  return 'custom';
+}
+
+function addField(type: LeadFormFieldType, preset?: Partial<LeadFormFieldInput>) {
+  const meta = toolbox.find((t) => t.type === type);
+  const label = preset?.label || meta?.label || 'فیلد جدید';
+  const needsOptions = type === 'select' || type === 'radio' || type === 'checkbox';
+  fields.value.push({
+    id: newKey(label),
+    key: newKey(label),
+    label,
+    fieldType: type,
+    required: preset?.required ?? type !== 'heading',
+    mapTo: (preset?.mapTo as LeadFormMapTo) || defaultMap(type),
+    position: fields.value.length,
+    placeholder: preset?.placeholder ?? '',
+    options: preset?.options ?? (needsOptions ? ['گزینه ۱', 'گزینه ۲'] : []),
+  });
+}
+
+function duplicateField(field: LeadFormFieldDto) {
+  addField(field.fieldType as LeadFormFieldType, {
+    label: `${field.label} (کپی)`,
+    mapTo: field.mapTo as LeadFormMapTo,
+    options: [...field.options],
+    placeholder: field.placeholder,
+  });
+}
+
+function removeField(key: string) {
+  fields.value = fields.value.filter((f) => f.key !== key);
+  if (editFieldKey.value === key) editFieldKey.value = null;
+}
+
+function onDragStart(key: string) { dragKey.value = key; }
+function onDrop(targetKey: string) {
+  if (!dragKey.value || dragKey.value === targetKey) return;
+  const list = [...fields.value];
+  const from = list.findIndex((f) => f.key === dragKey.value);
+  const to = list.findIndex((f) => f.key === targetKey);
+  if (from < 0 || to < 0) return;
+  const [item] = list.splice(from, 1);
+  list.splice(to, 0, item!);
+  fields.value = list.map((f, i) => ({ ...f, position: i }));
+  dragKey.value = null;
+}
+
+function applyForm(row: LeadFormDto) {
+  form.value = row;
+  name.value = row.name;
+  description.value = row.description ?? '';
+  fields.value = row.fields;
+  submitLabel.value = row.submitLabel;
+  submitColor.value = row.submitColor;
+  isActive.value = row.isActive;
+  createPerson.value = row.createPerson;
+  createDeal.value = row.createDeal;
+  pipelineId.value = row.pipelineId ?? '';
+  source.value = row.source ?? 'وب‌سایت';
+  thankYouMessage.value = row.thankYouMessage ?? '';
+  redirectUrl.value = row.redirectUrl ?? '';
+  assigneeIds.value = row.assigneeIds;
+}
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const [fRes, uRes, pRes] = await Promise.all([
+      api.get<LeadFormDto>(`/lead-forms/${id.value}`),
+      api.get<OrgUserDto[]>('/users'),
+      api.get<PipelineDto[]>('/pipelines'),
+    ]);
+    applyForm(fRes.data);
+    users.value = uRes.data;
+    pipelines.value = pRes.data;
+  } catch {
+    error.value = 'بارگذاری فرم ناموفق بود.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function save() {
+  saving.value = true;
+  error.value = '';
+  ok.value = '';
+  try {
+    const { data } = await api.patch<LeadFormDto>(`/lead-forms/${id.value}`, {
+      name: name.value.trim(),
+      description: description.value.trim() || null,
+      isActive: isActive.value,
+      createPerson: createPerson.value,
+      createDeal: createDeal.value,
+      pipelineId: pipelineId.value || null,
+      source: source.value.trim() || null,
+      thankYouMessage: thankYouMessage.value.trim() || null,
+      redirectUrl: redirectUrl.value.trim() || null,
+      assigneeIds: assigneeIds.value,
+      submitLabel: submitLabel.value.trim() || 'ارسال درخواست',
+      submitColor: submitColor.value,
+      fields: fields.value.map((f, i) => ({
+        key: f.key, label: f.label, fieldType: f.fieldType, required: f.required,
+        mapTo: f.mapTo, position: i, placeholder: f.placeholder, options: f.options,
+      })),
+    });
+    applyForm(data);
+    ok.value = 'تغییرات ذخیره شد.';
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      const msg = (e.response?.data as { message?: string | string[] })?.message;
+      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره ناموفق بود');
+    } else error.value = 'ذخیره ناموفق بود';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function uploadCover(ev: Event) {
+  const file = (ev.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  const body = new FormData();
+  body.append('file', file);
+  try {
+    const { data } = await api.post<LeadFormDto>(`/lead-forms/${id.value}/cover`, body);
+    applyForm(data);
+  } catch {
+    error.value = 'آپلود کاور ناموفق بود.';
+  }
+}
+
+async function clearCover() {
+  const { data } = await api.delete<LeadFormDto>(`/lead-forms/${id.value}/cover`);
+  applyForm(data);
+}
+
+async function loadResponses() {
+  tab.value = 'responses';
+  const { data } = await api.get<LeadFormSubmissionDto[]>(`/lead-forms/${id.value}/submissions`);
+  submissions.value = data;
+}
+
+async function copyText(text: string) {
+  await navigator.clipboard.writeText(text);
+  ok.value = 'کپی شد.';
+}
+
+function toggleAssignee(uid: string) {
+  assigneeIds.value = assigneeIds.value.includes(uid)
+    ? assigneeIds.value.filter((x) => x !== uid)
+    : [...assigneeIds.value, uid];
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <section class="page">
+    <header class="top">
+      <div>
+        <button class="back" type="button" @click="router.push({ name: 'lead-forms' })">بازگشت</button>
+        <h1>فرم‌ساز <UiIcon name="layers" :size="20" /></h1>
+        <p>فرم را بچینید، پیش‌نمایش بگیرید و پاسخ‌ها را ببینید.</p>
+      </div>
+      <div class="top-actions">
+        <a class="btn ghost" :href="form?.publicPath" target="_blank" rel="noopener">
+          <UiIcon name="eye" :size="15" /> پیش‌نمایش
+        </a>
+        <button class="btn primary" type="button" :disabled="saving" @click="save">
+          <UiIcon name="check" :size="15" /> ذخیره تغییرات
+        </button>
+      </div>
+    </header>
+    <p v-if="error" class="banner err">{{ error }}</p>
+    <p v-if="ok" class="banner ok">{{ ok }}</p>
+
+    <nav class="tabs">
+      <button type="button" :class="{ on: tab === 'edit' }" @click="tab = 'edit'">
+        <UiIcon name="pencil" :size="14" /> ویرایش فرم
+      </button>
+      <button type="button" :class="{ on: tab === 'settings' }" @click="tab = 'settings'">تنظیمات</button>
+      <button type="button" :class="{ on: tab === 'share' }" @click="tab = 'share'">اشتراک‌گذاری</button>
+      <button type="button" :class="{ on: tab === 'responses' }" @click="loadResponses">پاسخ‌ها</button>
+    </nav>
+
+    <div v-if="tab === 'edit'" class="workspace">
+      <aside class="preview-col">
+        <div class="device-toggle">
+          <button type="button" @click="desktopPreviewOpen = true">دسکتاپ</button>
+          <button type="button" class="on">موبایل</button>
+        </div>
+        <div class="phone">
+          <div class="cover" :style="{ background: submitColor }">
+            <img v-if="coverSrc" :src="coverSrc" alt="" />
+            <UiIcon v-else name="layers" :size="28" />
+          </div>
+          <div class="preview-body">
+            <h3>{{ name || 'عنوان فرم' }}</h3>
+            <p>{{ description || 'توضیح کوتاه فرم اینجاست.' }}</p>
+            <template v-for="f in fields" :key="f.key">
+              <p v-if="f.fieldType === 'heading'" class="heading">{{ f.label }}</p>
+              <label v-else>
+                {{ f.label }}
+                <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
+                <select v-else-if="f.fieldType === 'select'" disabled>
+                  <option>{{ f.placeholder || 'انتخاب کنید' }}</option>
+                  <option v-for="o in f.options" :key="o">{{ o }}</option>
+                </select>
+                <div v-else-if="f.fieldType === 'radio' || f.fieldType === 'checkbox'" class="opts">
+                  <span v-for="o in f.options" :key="o">{{ f.fieldType === 'checkbox' ? '☐' : '○' }} {{ o }}</span>
+                </div>
+                <div v-else-if="f.fieldType === 'rating'" class="stars">★★★★★</div>
+                <input v-else disabled :placeholder="f.placeholder || ''" />
+              </label>
+            </template>
+            <button type="button" class="send" :style="{ background: submitColor }">
+              <UiIcon name="send" :size="14" /> {{ submitLabel }}
+            </button>
+            <small>اطلاعات شما محرمانه می‌ماند.</small>
+          </div>
+        </div>
+      </aside>
+
+      <section class="canvas">
+        <button class="cover-box" type="button" @click="coverInput?.click()">
+          <img v-if="coverSrc" :src="coverSrc" alt="" />
+          <span v-else>+ افزودن لوگو یا تصویر کاور</span>
+        </button>
+        <input ref="coverInput" type="file" accept="image/*" hidden @change="uploadCover" />
+        <button v-if="coverSrc" class="link" type="button" @click="clearCover">حذف کاور</button>
+
+        <div class="title-card">
+          <input v-model="name" class="title" />
+          <textarea v-model="description" rows="2" placeholder="توضیح فرم را بنویسید" />
+        </div>
+
+        <article
+          v-for="f in fields"
+          :key="f.key"
+          class="field-card"
+          draggable="true"
+          @dragstart="onDragStart(f.key)"
+          @dragover.prevent
+          @drop="onDrop(f.key)"
+        >
+          <span class="grip"><UiIcon name="grip" :size="16" /></span>
+          <div>
+            <strong>{{ f.label }}</strong>
+            <small>{{ typeLabel[f.fieldType] || f.fieldType }}</small>
+          </div>
+          <div class="fops">
+            <button type="button" title="کپی" @click="duplicateField(f)"><UiIcon name="layers" :size="14" /></button>
+            <button type="button" class="danger" title="حذف" @click="removeField(f.key)"><UiIcon name="trash" :size="14" /></button>
+            <button type="button" title="ویرایش" @click="editFieldKey = f.key"><UiIcon name="pencil" :size="14" /></button>
+          </div>
+        </article>
+
+        <button class="add-field" type="button" @click="addField('text')">+ افزودن فیلد جدید</button>
+
+        <div class="submit-card">
+          <label>متن دکمه ارسال
+            <input v-model="submitLabel" />
+          </label>
+          <label>رنگ دکمه
+            <input v-model="submitColor" type="color" />
+          </label>
+        </div>
+
+        <button class="adv" type="button" @click="advancedOpen = !advancedOpen">تنظیمات پیشرفته</button>
+        <div v-if="advancedOpen" class="adv-box">
+          <label class="chk"><input v-model="createPerson" type="checkbox" /> ساخت شخص</label>
+          <label class="chk"><input v-model="createDeal" type="checkbox" /> ساخت معامله</label>
+        </div>
+      </section>
+
+      <aside class="toolbox">
+        <h3>افزودن فیلد</h3>
+        <div class="tools">
+          <button v-for="t in toolbox" :key="t.type" type="button" @click="addField(t.type)">
+            <UiIcon :name="t.icon" :size="16" />
+            {{ t.label }}
+          </button>
+        </div>
+        <h3>فیلدهای آماده</h3>
+        <div v-for="g in readyGroups" :key="g.key" class="ready">
+          <button type="button" @click="readyOpen = readyOpen === g.key ? null : g.key">{{ g.title }}</button>
+          <div v-if="readyOpen === g.key">
+            <button
+              v-for="item in g.items"
+              :key="item.label"
+              type="button"
+              @click="addField(item.fieldType, item)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
+      </aside>
+    </div>
+
+    <section v-else-if="tab === 'settings'" class="panel">
+      <label class="chk"><input v-model="isActive" type="checkbox" /> فرم فعال باشد</label>
+      <label>منبع بازاریابی <input v-model="source" /></label>
+      <label>کاریز مقصد
+        <select v-model="pipelineId">
+          <option value="">پیش‌فرض سازمان</option>
+          <option v-for="p in pipelines" :key="p.id" :value="p.id">{{ p.name }}</option>
+        </select>
+      </label>
+      <label>پیام تشکر <input v-model="thankYouMessage" /></label>
+      <label>آدرس بعد از ارسال <input v-model="redirectUrl" /></label>
+      <p>توزیع نوبتی مسئولان</p>
+      <div class="chips">
+        <button
+          v-for="u in users"
+          :key="u.id"
+          type="button"
+          class="chip"
+          :class="{ on: assigneeIds.includes(u.id) }"
+          @click="toggleAssignee(u.id)"
+        >
+          {{ u.fullName }}
+        </button>
+      </div>
+      <button class="btn primary" type="button" @click="save">ذخیره تنظیمات</button>
+    </section>
+
+    <section v-else-if="tab === 'share'" class="panel">
+      <label>لینک عمومی
+        <div class="row">
+          <input :value="publicUrl" readonly />
+          <button class="btn ghost" type="button" @click="copyText(publicUrl)">کپی</button>
+        </div>
+      </label>
+      <label>کد iframe
+        <div class="row">
+          <input :value="iframeSnippet" readonly />
+          <button class="btn ghost" type="button" @click="copyText(iframeSnippet)">کپی</button>
+        </div>
+      </label>
+      <img v-if="publicUrl" :src="qrUrl" alt="QR" width="140" height="140" />
+    </section>
+
+    <section v-else class="panel">
+      <p v-if="!submissions.length">هنوز پاسخی ثبت نشده.</p>
+      <article v-for="s in submissions" :key="s.id" class="sub">
+        <small>{{ new Date(s.createdAt).toLocaleString('fa-IR') }}</small>
+        <p v-for="(val, key) in s.values" :key="key"><b>{{ key }}:</b> {{ val }}</p>
+      </article>
+    </section>
+
+    <div v-if="desktopPreviewOpen" class="overlay desk-overlay" @click.self="desktopPreviewOpen = false">
+      <div class="desk-sheet" role="dialog" aria-label="پیش‌نمایش دسکتاپ">
+        <header>
+          <strong>پیش‌نمایش دسکتاپ</strong>
+          <button class="btn ghost" type="button" @click="desktopPreviewOpen = false">بستن</button>
+        </header>
+        <div class="desk-form">
+          <div class="cover" :style="{ background: submitColor }">
+            <img v-if="coverSrc" :src="coverSrc" alt="" />
+            <UiIcon v-else name="layers" :size="36" />
+          </div>
+          <div class="preview-body desk-body">
+            <h3>{{ name || 'عنوان فرم' }}</h3>
+            <p>{{ description || 'توضیح کوتاه فرم اینجاست.' }}</p>
+            <div class="desk-fields">
+              <template v-for="f in fields" :key="'d-' + f.key">
+                <p v-if="f.fieldType === 'heading'" class="heading wide">{{ f.label }}</p>
+                <label v-else :class="{ wide: f.fieldType === 'textarea' || f.fieldType === 'checkbox' }">
+                  {{ f.label }}
+                  <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
+                  <select v-else-if="f.fieldType === 'select'" disabled>
+                    <option>{{ f.placeholder || 'انتخاب کنید' }}</option>
+                    <option v-for="o in f.options" :key="o">{{ o }}</option>
+                  </select>
+                  <div v-else-if="f.fieldType === 'radio' || f.fieldType === 'checkbox'" class="opts">
+                    <span v-for="o in f.options" :key="o">{{ f.fieldType === 'checkbox' ? '☐' : '○' }} {{ o }}</span>
+                  </div>
+                  <div v-else-if="f.fieldType === 'rating'" class="stars">★★★★★</div>
+                  <input v-else disabled :placeholder="f.placeholder || ''" />
+                </label>
+              </template>
+            </div>
+            <button type="button" class="send" :style="{ background: submitColor }">
+              <UiIcon name="send" :size="14" /> {{ submitLabel }}
+            </button>
+            <small>اطلاعات شما محرمانه می‌ماند.</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="editingField" class="overlay" @click.self="editFieldKey = null">
+      <div class="sheet">
+        <h3>ویرایش فیلد</h3>
+        <label>عنوان <input v-model="editingField.label" /></label>
+        <label>متن راهنما <input v-model="editingField.placeholder" /></label>
+        <label class="chk"><input v-model="editingField.required" type="checkbox" /> الزامی</label>
+        <label>اتصال به
+          <select v-model="editingField.mapTo">
+            <option value="person.fullName">نام کامل</option>
+            <option value="person.firstName">نام</option>
+            <option value="person.lastName">نام خانوادگی</option>
+            <option value="person.mobile">موبایل</option>
+            <option value="person.email">ایمیل</option>
+            <option value="person.phone">تلفن</option>
+            <option value="person.position">سمت</option>
+            <option value="deal.title">عنوان معامله</option>
+            <option value="deal.notes">یادداشت معامله</option>
+            <option value="notes">یادداشت شخص</option>
+            <option value="custom">فقط در پاسخ فرم</option>
+          </select>
+        </label>
+        <label v-if="['select','radio','checkbox'].includes(editingField.fieldType)">
+          گزینه‌ها (هر خط یکی)
+          <textarea
+            :value="editingField.options.join('\n')"
+            rows="4"
+            @input="editingField.options = ($event.target as HTMLTextAreaElement).value.split('\n').map(s => s.trim()).filter(Boolean)"
+          />
+        </label>
+        <button class="btn primary" type="button" @click="editFieldKey = null">تمام</button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.page { --teal: #14b8a6; display: grid; gap: 0.85rem; }
+.top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
+h1 { margin: 0; font-size: 1.55rem; font-weight: 800; display: inline-flex; gap: 0.35rem; align-items: center; }
+h1 :deep(.ico) { color: var(--teal); }
+.top p, .back { color: #64748b; }
+.back { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
+.top-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
+.btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0.45rem 0.9rem; border-radius: 12px; font: inherit; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
+.btn.primary { background: var(--teal); color: #fff; }
+.btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; }
+.banner { margin: 0; padding: 0.6rem 0.8rem; border-radius: 12px; }
+.banner.err { background: #fef2f2; color: #b91c1c; }
+.banner.ok { background: #ecfdf5; color: #047857; }
+.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; background: #fff; padding: 0.35rem; border-radius: 14px; }
+.tabs button { border: 0; background: transparent; min-height: 38px; padding: 0 0.85rem; border-radius: 10px; font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
+.tabs button.on { background: var(--teal); color: #fff; }
+.workspace { display: grid; grid-template-columns: 280px minmax(0,1fr) 240px; gap: 0.85rem; align-items: start; }
+.preview-col, .canvas, .toolbox, .panel { background: #fff; border-radius: 16px; padding: 0.9rem; box-shadow: 0 8px 22px rgba(15,23,42,.04); }
+.device-toggle { display: flex; gap: 0.3rem; margin-bottom: 0.7rem; }
+.device-toggle button { flex: 1; border: 0; min-height: 34px; border-radius: 10px; font: inherit; font-weight: 700; background: #f1f5f9; cursor: pointer; }
+.device-toggle button.on { background: var(--teal); color: #fff; }
+.phone { border: 8px solid #0f172a; border-radius: 28px; overflow: hidden; background: #fff; max-width: 260px; margin: 0 auto; }
+.desk-overlay { padding: 1.2rem; }
+.desk-sheet {
+  width: min(920px, 100%);
+  max-height: calc(100vh - 2.4rem);
+  overflow: auto;
+  background: #eef2f6;
+  border-radius: 20px;
+  padding: 1rem 1.1rem 1.2rem;
+  display: grid;
+  gap: 0.75rem;
+}
+.desk-sheet header { display: flex; justify-content: space-between; align-items: center; }
+.desk-form { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(15,23,42,.08); }
+.desk-form .cover { height: 140px; }
+.desk-form .cover img { width: 100%; height: 140px; object-fit: cover; }
+.desk-body { padding: 1.2rem 1.4rem 1.4rem; }
+.desk-body h3 { font-size: 1.35rem; }
+.desk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
+.desk-fields .wide { grid-column: 1 / -1; }
+.desk-form .send { justify-self: start; min-width: 200px; }
+.cover { height: 86px; display: grid; place-items: center; color: #fff; overflow: hidden; }
+.cover img { width: 100%; height: 100%; object-fit: cover; }
+.preview-body { padding: 0.8rem; display: grid; gap: 0.5rem; }
+.preview-body h3 { margin: 0; font-size: 1rem; }
+.preview-body p, .preview-body small { margin: 0; color: #64748b; font-size: 0.78rem; }
+.preview-body label { display: grid; gap: 0.25rem; font-size: 0.78rem; color: #475569; }
+.preview-body input, .preview-body textarea, .preview-body select { border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.45rem 0.6rem; font: inherit; background: #f8fafc; }
+.send { border: 0; color: #fff; border-radius: 12px; min-height: 40px; font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; }
+.opts, .stars { color: #64748b; font-size: 0.75rem; display: grid; gap: 0.2rem; }
+.cover-box { width: 100%; min-height: 88px; border: 1.5px dashed #99f6e4; border-radius: 14px; background: #f0fdfa; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; }
+.cover-box img { width: 100%; height: 88px; object-fit: cover; display: block; }
+.title-card, .field-card, .submit-card, .adv-box { border: 1px solid #eef2f7; border-radius: 14px; padding: 0.8rem; display: grid; gap: 0.45rem; }
+.title { font-size: 1.15rem; font-weight: 800; border: 0; background: transparent; font: inherit; }
+.title-card textarea, .submit-card input, .panel input, .panel select, .sheet input, .sheet select, .sheet textarea {
+  border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.55rem 0.7rem; font: inherit; width: 100%;
+}
+.field-card { grid-template-columns: auto 1fr auto; align-items: center; cursor: grab; }
+.field-card small { color: #94a3b8; display: block; }
+.fops { display: flex; gap: 0.2rem; }
+.fops button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #f8fafc; cursor: pointer; color: #64748b; }
+.fops .danger { color: #dc2626; }
+.add-field { width: 100%; min-height: 44px; border: 1.5px dashed #14b8a6; background: #f0fdfa; color: #0f766e; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
+.adv { background: none; border: 0; font: inherit; font-weight: 700; color: #0f766e; cursor: pointer; text-align: right; }
+.toolbox h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
+.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 1rem; }
+.tools button, .ready div button { border: 1px solid #eef2f7; background: #f8fafc; border-radius: 10px; min-height: 52px; font: inherit; font-size: 0.75rem; cursor: pointer; display: grid; place-items: center; gap: 0.15rem; color: #334155; }
+.ready { border-bottom: 1px solid #f1f5f9; }
+.ready > button { width: 100%; background: none; border: 0; text-align: right; font: inherit; font-weight: 700; padding: 0.55rem 0; cursor: pointer; }
+.panel { display: grid; gap: 0.7rem; }
+.panel label, .sheet label { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 700; color: #334155; }
+.chk { display: flex !important; align-items: center; gap: 0.4rem; }
+.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
+.chip { border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; cursor: pointer; }
+.chip.on { background: #ccfbf1; border-color: #99f6e4; color: #0f766e; font-weight: 700; }
+.row { display: flex; gap: 0.4rem; }
+.row input { flex: 1; }
+.sub { border-bottom: 1px solid #f1f5f9; padding: 0.5rem 0; }
+.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); display: grid; place-items: center; z-index: 40; padding: 1rem; }
+.sheet { width: min(420px,100%); background: #fff; border-radius: 16px; padding: 1rem; display: grid; gap: 0.65rem; }
+.link { background: none; border: 0; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; }
+@media (max-width: 1100px) {
+  .workspace { grid-template-columns: 1fr; }
+  .preview-col { order: 3; }
+  .toolbox { order: 1; }
+  .canvas { order: 2; }
+  .tools { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 700px) {
+  .top, .top-actions { flex-direction: column; }
+  .tabs { display: grid; grid-template-columns: 1fr 1fr; }
+}
+</style>
+

apps/web/src/views/LeadFormPublicView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import type { PublicLeadFormDto, SubmitLeadFormResponse } from '@mento/shared';
@@ -12,9 +12,12 @@ const done = ref(false);
 const thankYou = ref('');
 const form = ref<PublicLeadFormDto | null>(null);
 const values = reactive<Record<string, string>>({});
-
 const token = String(route.params.token || '');
 
+const coverUrl = computed(() =>
+  form.value?.coverPath || (form.value?.hasCover ? `/api/public/forms/${token}/cover` : ''),
+);
+
 async function load() {
   loading.value = true;
   error.value = '';
@@ -22,6 +25,7 @@ async function load() {
     const { data } = await axios.get<PublicLeadFormDto>(`/api/public/forms/${token}`);
     form.value = data;
     for (const field of data.fields) {
+      if (field.fieldType === 'heading') continue;
       values[field.key] = values[field.key] ?? '';
     }
   } catch {
@@ -32,6 +36,17 @@ async function load() {
   }
 }
 
+function setMulti(key: string, option: string, on: boolean) {
+  const cur = new Set((values[key] || '').split(',').map((s) => s.trim()).filter(Boolean));
+  if (on) cur.add(option);
+  else cur.delete(option);
+  values[key] = [...cur].join(', ');
+}
+
+function hasMulti(key: string, option: string) {
+  return (values[key] || '').split(',').map((s) => s.trim()).includes(option);
+}
+
 async function submit() {
   if (!form.value) return;
   saving.value = true;
@@ -43,16 +58,12 @@ async function submit() {
     );
     thankYou.value = data.thankYouMessage || 'ثبت شد. متشکریم.';
     done.value = true;
-    if (data.redirectUrl) {
-      window.location.assign(data.redirectUrl);
-    }
+    if (data.redirectUrl) window.location.assign(data.redirectUrl);
   } catch (e) {
     if (axios.isAxiosError(e)) {
       const msg = (e.response?.data as { message?: string | string[] })?.message;
       error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ارسال ناموفق بود');
-    } else {
-      error.value = 'ارسال ناموفق بود';
-    }
+    } else error.value = 'ارسال ناموفق بود';
   } finally {
     saving.value = false;
   }
@@ -64,10 +75,15 @@ onMounted(load);
 <template>
   <main class="shell">
     <div class="panel">
+      <div v-if="coverUrl" class="cover" :style="{ background: form?.submitColor || '#14b8a6' }">
+        <img :src="coverUrl" alt="" />
+      </div>
+      <div v-else class="cover" :style="{ background: form?.submitColor || '#14b8a6' }" />
+
       <header>
-        <p class="brand">منتو</p>
         <h1 v-if="form">{{ form.name }}</h1>
-        <h1 v-else>فرم سرنخ</h1>
+        <h1 v-else>فرم</h1>
+        <p v-if="form?.description">{{ form.description }}</p>
       </header>
 
       <p v-if="loading" class="muted">در حال بارگذاری…</p>
@@ -79,26 +95,72 @@ onMounted(load);
       </div>
 
       <form v-else-if="form" class="fields" @submit.prevent="submit">
-        <label v-for="field in form.fields" :key="field.key">
-          {{ field.label }}
-          <span v-if="field.required" class="req">*</span>
-          <textarea
-            v-if="field.fieldType === 'textarea'"
-            v-model="values[field.key]"
-            rows="4"
-            :required="field.required"
-          />
-          <input
-            v-else
-            v-model="values[field.key]"
-            :type="field.fieldType === 'email' ? 'email' : field.fieldType === 'phone' ? 'tel' : 'text'"
-            :required="field.required"
-          />
-        </label>
+        <template v-for="field in form.fields" :key="field.key">
+          <p v-if="field.fieldType === 'heading'" class="heading">{{ field.label }}</p>
+          <label v-else>
+            {{ field.label }}
+            <span v-if="field.required" class="req">*</span>
+            <textarea
+              v-if="field.fieldType === 'textarea'"
+              v-model="values[field.key]"
+              rows="4"
+              :placeholder="field.placeholder || ''"
+              :required="field.required"
+            />
+            <select
+              v-else-if="field.fieldType === 'select'"
+              v-model="values[field.key]"
+              :required="field.required"
+            >
+              <option value="">{{ field.placeholder || 'انتخاب کنید' }}</option>
+              <option v-for="o in field.options" :key="o" :value="o">{{ o }}</option>
+            </select>
+            <div v-else-if="field.fieldType === 'radio'" class="opts">
+              <label v-for="o in field.options" :key="o">
+                <input v-model="values[field.key]" type="radio" :value="o" :required="field.required" />
+                {{ o }}
+              </label>
+            </div>
+            <div v-else-if="field.fieldType === 'checkbox'" class="opts">
+              <label v-for="o in field.options" :key="o">
+                <input
+                  type="checkbox"
+                  :checked="hasMulti(field.key, o)"
+                  @change="setMulti(field.key, o, ($event.target as HTMLInputElement).checked)"
+                />
+                {{ o }}
+              </label>
+            </div>
+            <div v-else-if="field.fieldType === 'rating'" class="stars">
+              <button
+                v-for="n in 5"
+                :key="n"
+                type="button"
+                :class="{ on: Number(values[field.key]) >= n }"
+                @click="values[field.key] = String(n)"
+              >
+                ★
+              </button>
+            </div>
+            <input
+              v-else
+              v-model="values[field.key]"
+              :type="field.fieldType === 'email' ? 'email' : field.fieldType === 'phone' ? 'tel' : field.fieldType === 'date' ? 'date' : field.fieldType === 'number' ? 'number' : field.fieldType === 'file' ? 'text' : 'text'"
+              :placeholder="field.placeholder || (field.fieldType === 'file' ? 'نام فایل یا لینک' : '')"
+              :required="field.required"
+            />
+          </label>
+        </template>
         <p v-if="error" class="error">{{ error }}</p>
-        <button class="btn" type="submit" :disabled="saving">
-          {{ saving ? 'در حال ارسال…' : 'ارسال' }}
+        <button
+          class="btn"
+          type="submit"
+          :disabled="saving"
+          :style="{ background: form.submitColor || '#14b8a6' }"
+        >
+          {{ saving ? 'در حال ارسال…' : (form.submitLabel || 'ارسال درخواست') }}
         </button>
+        <small>اطلاعات شما محرمانه می‌ماند.</small>
       </form>
     </div>
   </main>
@@ -110,88 +172,32 @@ onMounted(load);
   display: grid;
   place-items: center;
   padding: 1.5rem;
-  background:
-    radial-gradient(circle at top left, rgba(15, 107, 92, 0.12), transparent 30%),
-    linear-gradient(180deg, #f7faf8 0%, #eef2f0 100%);
+  background: #f4f7f8;
 }
-
 .panel {
-  width: min(520px, 100%);
+  width: min(440px, 100%);
   background: #fff;
-  border: 1px solid #d5ddd8;
-  border-radius: 18px;
-  box-shadow: 0 16px 40px rgba(23, 33, 28, 0.08);
-  padding: 1.35rem;
-  display: grid;
-  gap: 1rem;
+  border-radius: 22px;
+  overflow: hidden;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
 }
-
-.brand {
-  margin: 0;
-  color: #0f6b5c;
-  font-weight: 700;
-}
-
-h1 {
-  margin: 0.25rem 0 0;
-  font-size: 1.45rem;
-}
-
-.fields {
-  display: grid;
-  gap: 0.85rem;
-}
-
-label {
-  display: grid;
-  gap: 0.35rem;
-  color: #5b6b63;
-  font-size: 0.92rem;
-}
-
-.req {
-  color: #b42318;
-}
-
-input,
-textarea {
-  border: 1px solid #d5ddd8;
-  border-radius: 12px;
-  padding: 0.75rem 0.9rem;
-  font: inherit;
-  width: 100%;
-}
-
-.btn {
-  border: 0;
-  background: #0f6b5c;
-  color: #fff;
-  border-radius: 12px;
-  padding: 0.85rem 1rem;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.muted {
-  color: #5b6b63;
-}
-
-.error {
-  color: #b42318;
-  margin: 0;
-}
-
-.success {
-  display: grid;
-  gap: 0.4rem;
-  background: #e7f6ef;
-  border-radius: 12px;
-  padding: 1rem;
-}
-
-.success p {
-  margin: 0;
-  color: #5b6b63;
+.cover { height: 110px; }
+.cover img { width: 100%; height: 110px; object-fit: cover; display: block; }
+header, .fields, .success { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: 0.75rem; }
+h1 { margin: 0; font-size: 1.35rem; }
+header p, .muted, small { margin: 0; color: #64748b; }
+label { display: grid; gap: 0.35rem; color: #475569; font-size: 0.92rem; }
+.req { color: #b42318; }
+input, textarea, select {
+  border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.75rem 0.9rem; font: inherit; width: 100%; background: #f8fafc;
 }
+.btn { border: 0; color: #fff; border-radius: 12px; padding: 0.85rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
+.error { color: #b42318; margin: 0; }
+.success { background: #e7f6ef; }
+.opts { display: grid; gap: 0.35rem; }
+.opts label { display: flex; align-items: center; gap: 0.4rem; }
+.stars { display: flex; gap: 0.25rem; }
+.stars button { border: 0; background: none; font-size: 1.3rem; color: #cbd5e1; cursor: pointer; }
+.stars button.on { color: #eab308; }
+.heading { margin: 0; font-weight: 700; color: #0f172a; }
 </style>

apps/web/src/views/LeadFormsSettingsView.vue

@@ -1,121 +1,59 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import { RouterLink, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
-import type {
-  CreateLeadFormRequest,
-  LeadFormDto,
-  OrgUserDto,
-  PipelineDto,
-} from '@mento/shared';
+import UiIcon from '@/components/UiIcon.vue';
+import type { LeadFormDto } from '@mento/shared';
+import { toFaDigits } from '@/lib/jalali';
 
+const router = useRouter();
 const loading = ref(false);
 const saving = ref(false);
 const error = ref('');
 const forms = ref<LeadFormDto[]>([]);
-const users = ref<OrgUserDto[]>([]);
-const pipelines = ref<PipelineDto[]>([]);
-
-const name = ref('فرم تماس سایت');
-const source = ref('وب‌سایت');
-const pipelineId = ref('');
-const thankYouMessage = ref('پیام شما ثبت شد. به‌زودی با شما تماس می‌گیریم.');
-const assigneeIds = ref<string[]>([]);
-
-const origin = computed(() => window.location.origin);
 
 async function load() {
   loading.value = true;
   error.value = '';
   try {
-    const [formsRes, usersRes, pipesRes] = await Promise.all([
-      api.get<LeadFormDto[]>('/lead-forms'),
-      api.get<OrgUserDto[]>('/users'),
-      api.get<PipelineDto[]>('/pipelines'),
-    ]);
-    forms.value = formsRes.data;
-    users.value = usersRes.data;
-    pipelines.value = pipesRes.data;
-    if (!pipelineId.value && pipesRes.data[0]) {
-      pipelineId.value = pipesRes.data.find((p) => p.isDefault)?.id ?? pipesRes.data[0].id;
-    }
+    const { data } = await api.get<LeadFormDto[]>('/lead-forms');
+    forms.value = data;
   } catch (e) {
-    if (axios.isAxiosError(e) && !e.response) {
-      error.value = 'اتصال به API برقرار نشد.';
-    } else {
-      error.value = 'بارگذاری فرم‌ها ناموفق بود.';
-    }
+    error.value = axios.isAxiosError(e) && !e.response
+      ? 'اتصال به API برقرار نشد.'
+      : 'بارگذاری فرم‌ها ناموفق بود.';
   } finally {
     loading.value = false;
   }
 }
 
 async function createForm() {
-  if (!name.value.trim()) {
-    error.value = 'نام فرم را وارد کنید.';
-    return;
-  }
   saving.value = true;
   error.value = '';
   try {
-    const payload: CreateLeadFormRequest = {
-      name: name.value.trim(),
-      source: source.value.trim() || 'فرم وب',
-      pipelineId: pipelineId.value || null,
-      thankYouMessage: thankYouMessage.value.trim() || null,
-      assigneeIds: assigneeIds.value,
+    const { data } = await api.post<LeadFormDto>('/lead-forms', {
+      name: 'درخواست مشاوره',
+      description: 'فرم دریافت درخواست مشاوره مشتریان',
+      source: 'وب‌سایت',
       createPerson: true,
       createDeal: true,
-    };
-    await api.post('/lead-forms', payload);
-    name.value = 'فرم تماس سایت';
-    await load();
-  } catch (e) {
-    if (axios.isAxiosError(e)) {
-      const msg = (e.response?.data as { message?: string | string[] })?.message;
-      error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ساخت فرم ناموفق بود');
-    } else {
-      error.value = 'ساخت فرم ناموفق بود';
-    }
+    });
+    await router.push({ name: 'lead-form-builder', params: { id: data.id } });
+  } catch {
+    error.value = 'ساخت فرم ناموفق بود.';
   } finally {
     saving.value = false;
   }
 }
 
-async function toggleActive(form: LeadFormDto) {
-  await api.patch(`/lead-forms/${form.id}`, { isActive: !form.isActive });
-  await load();
-}
-
 async function removeForm(form: LeadFormDto) {
   if (!confirm(`فرم «${form.name}» حذف شود؟`)) return;
   await api.delete(`/lead-forms/${form.id}`);
   await load();
 }
 
-function publicUrl(form: LeadFormDto) {
-  return `${origin.value}${form.publicPath}`;
-}
-
-function iframeSnippet(form: LeadFormDto) {
-  return `<iframe src="${publicUrl(form)}" width="100%" height="640" style="border:0;border-radius:12px" title="${form.name}"></iframe>`;
-}
-
-function qrUrl(form: LeadFormDto) {
-  return `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(publicUrl(form))}`;
-}
-
-async function copyText(text: string) {
-  await navigator.clipboard.writeText(text);
-}
-
-function toggleAssignee(id: string) {
-  if (assigneeIds.value.includes(id)) {
-    assigneeIds.value = assigneeIds.value.filter((x) => x !== id);
-  } else {
-    assigneeIds.value = [...assigneeIds.value, id];
-  }
-}
+const countLabel = computed(() => toFaDigits(forms.value.length));
 
 onMounted(load);
 </script>
@@ -123,312 +61,57 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div class="head-copy">
-        <h1>فرم‌ساز سرنخ</h1>
-        <p class="lead">
-          فرم وب بسازید، لینک یا iframe بگیرید؛ ارسال‌ها به‌صورت شخص و معامله در کاریز ثبت می‌شوند.
-        </p>
+      <div>
+        <h1>
+          فرم‌ساز
+          <UiIcon name="layers" :size="22" />
+        </h1>
+        <p class="lead">فرم وب بسازید، فیلدها را بچینید و پاسخ‌ها را در باشگاه مشتریان و کاریز ببینید.</p>
       </div>
-    </header>
-
-    <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
-
-    <form class="panel" @submit.prevent="createForm">
-      <h2>فرم جدید</h2>
-      <div class="grid">
-        <label>
-          نام فرم
-          <input v-model="name" required maxlength="120" />
-        </label>
-        <label>
-          منبع بازاریابی
-          <input v-model="source" maxlength="80" placeholder="وب‌سایت / لندینگ" />
-        </label>
-        <label>
-          کاریز مقصد
-          <select v-model="pipelineId">
-            <option v-for="p in pipelines" :key="p.id" :value="p.id">
-              {{ p.name }}{{ p.isDefault ? ' (پیش‌فرض)' : '' }}
-            </option>
-          </select>
-        </label>
-        <label class="full">
-          پیام تشکر
-          <input v-model="thankYouMessage" maxlength="500" />
-        </label>
-      </div>
-      <div class="assignees">
-        <p class="muted">توزیع نوبتی بین مسئولان (اختیاری)</p>
-        <div class="chips">
-          <button
-            v-for="u in users"
-            :key="u.id"
-            type="button"
-            class="chip"
-            :class="{ on: assigneeIds.includes(u.id) }"
-            @click="toggleAssignee(u.id)"
-          >
-            {{ u.fullName }}
-          </button>
-        </div>
-      </div>
-      <button class="btn primary" type="submit" :disabled="saving">
-        {{ saving ? 'در حال ساخت…' : 'ساخت فرم با فیلدهای پیش‌فرض' }}
+      <button class="btn primary" type="button" :disabled="saving" @click="createForm">
+        + فرم جدید
       </button>
-    </form>
+    </header>
+    <p v-if="error" class="err">{{ error }}</p>
+    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
+    <p v-else class="muted">{{ countLabel }} فرم</p>
 
     <div class="list">
       <article v-for="form in forms" :key="form.id" class="card">
-        <header class="card-head">
-          <div>
-            <strong>{{ form.name }}</strong>
-            <p class="muted">
-              {{ form.isActive ? 'فعال' : 'غیرفعال' }}
-              · منبع: {{ form.source || '—' }}
-              · {{ form.fields.length }} فیلد
-            </p>
-          </div>
-          <div class="actions">
-            <button type="button" @click="toggleActive(form)">
-              {{ form.isActive ? 'غیرفعال' : 'فعال' }}
-            </button>
-            <button type="button" class="danger" @click="removeForm(form)">حذف</button>
-          </div>
-        </header>
-
-        <div class="share">
-          <label>
-            لینک عمومی
-            <div class="row">
-              <input :value="publicUrl(form)" readonly />
-              <button type="button" class="btn ghost" @click="copyText(publicUrl(form))">کپی</button>
-              <a class="btn ghost" :href="form.publicPath" target="_blank" rel="noopener">بازکردن</a>
-            </div>
-          </label>
-          <label>
-            کد iframe
-            <div class="row">
-              <input :value="iframeSnippet(form)" readonly />
-              <button type="button" class="btn ghost" @click="copyText(iframeSnippet(form))">کپی</button>
-            </div>
-          </label>
-          <div class="qr">
-            <img :src="qrUrl(form)" :alt="`QR ${form.name}`" width="120" height="120" />
-            <p class="muted">QR برای اشتراک‌گذاری سریع</p>
-          </div>
+        <div>
+          <strong>{{ form.name }}</strong>
+          <p>{{ form.isActive ? 'فعال' : 'غیرفعال' }} · {{ toFaDigits(form.fields.length) }} فیلد · {{ toFaDigits(form.submissionCount ?? 0) }} پاسخ</p>
+        </div>
+        <div class="ops">
+          <RouterLink class="btn ghost" :to="{ name: 'lead-form-builder', params: { id: form.id } }">ویرایش</RouterLink>
+          <a class="btn ghost" :href="form.publicPath" target="_blank" rel="noopener">پیش‌نمایش</a>
+          <button class="link danger" type="button" @click="removeForm(form)">حذف</button>
         </div>
       </article>
-      <p v-if="!loading && !forms.length" class="muted empty">هنوز فرمی نساخته‌اید.</p>
+      <p v-if="!loading && !forms.length" class="empty">هنوز فرمی نساخته‌اید.</p>
     </div>
   </section>
 </template>
 
 <style scoped>
-.page {
-  display: grid;
-  gap: 1rem;
-  max-width: 900px;
-  min-width: 0;
-  overflow-x: clip;
-}
-
-.page-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: flex-start;
-}
-
-.head-copy {
-  min-width: 0;
-}
-
-h1 {
-  margin: 0 0 0.3rem;
-  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
-  font-weight: 800;
-}
-
-.lead,
-.muted {
-  margin: 0;
-  color: #64748b;
-}
-
-.error {
-  margin: 0;
-  color: #b91c1c;
-}
-
-.panel,
-.card {
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 18px;
-  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
-  padding: 1.1rem;
-  display: grid;
-  gap: 0.85rem;
-}
-
-.panel h2 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 700;
-  color: #0f172a;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
-}
-
-.full {
-  grid-column: 1 / -1;
-}
-
-label {
-  display: grid;
-  gap: 0.35rem;
-  font-size: 0.9rem;
-  color: #64748b;
-}
-
-input,
-select {
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 0.7rem 0.85rem;
-  font: inherit;
-  background: #fff;
-  color: #0f172a;
-  width: 100%;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 42px;
-  padding: 0.55rem 1rem;
-  border-radius: 12px;
-  font-weight: 700;
-  border: 1px solid transparent;
-  cursor: pointer;
-  font: inherit;
-  text-decoration: none;
-}
-
-.btn.primary {
-  background: #14b8a6;
-  color: #fff;
-  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
-}
-
-.btn.ghost {
-  background: #fff;
-  color: #0f766e;
-  border-color: #99f6e4;
-  box-shadow: none;
-}
-
-.chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.4rem;
-}
-
-.chip {
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  border-radius: 999px;
-  padding: 0.35rem 0.75rem;
-  font: inherit;
-  cursor: pointer;
-}
-
-.chip.on {
-  background: #f0fdfa;
-  border-color: #99f6e4;
-  color: #0f766e;
-  font-weight: 700;
-}
-
-.list {
-  display: grid;
-  gap: 0.85rem;
-}
-
-.card-head,
-.actions,
-.row {
-  display: flex;
-  gap: 0.55rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.card-head {
-  justify-content: space-between;
-}
-
-.card-head p {
-  margin: 0.25rem 0 0;
-}
-
-.actions button {
-  border: 0;
-  background: transparent;
-  color: #64748b;
-  cursor: pointer;
-  font: inherit;
-  font-weight: 600;
-}
-
-.actions .danger {
-  color: #b91c1c;
-}
-
-.share {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.row input {
-  flex: 1;
-  min-width: 0;
-}
-
-.qr {
-  display: flex;
-  gap: 0.85rem;
-  align-items: center;
-}
-
-.qr img {
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-}
-
-.empty {
-  padding: 1rem;
-  border: 1px dashed #e2e8f0;
-  border-radius: 18px;
-}
-
+.page { display: grid; gap: 1rem; }
+.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
+h1 { margin: 0; font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 800; display: inline-flex; gap: 0.4rem; align-items: center; }
+h1 :deep(.ico) { color: #14b8a6; }
+.lead, .muted { margin: 0.25rem 0 0; color: #64748b; }
+.err { color: #b91c1c; }
+.btn, .link { font: inherit; cursor: pointer; }
+.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.5rem 0.95rem; border-radius: 12px; font-weight: 700; border: 1px solid transparent; text-decoration: none; }
+.btn.primary { background: #14b8a6; color: #fff; }
+.btn.ghost { background: #fff; color: #0f766e; border-color: #99f6e4; }
+.link { background: none; border: 0; font-weight: 700; }
+.danger { color: #b91c1c; }
+.list { display: grid; gap: 0.75rem; }
+.card { background: #fff; border-radius: 16px; padding: 1rem 1.05rem; box-shadow: 0 8px 22px rgba(15,23,42,.04); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
+.card p { margin: 0.25rem 0 0; color: #64748b; font-size: 0.88rem; }
+.ops { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
+.empty { padding: 1rem; border: 1px dashed #e2e8f0; border-radius: 16px; color: #64748b; text-align: center; }
 @media (max-width: 700px) {
-  .grid {
-    grid-template-columns: 1fr;
-  }
-
-  .card-head,
-  .row,
-  .actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
+  .page-head, .card, .ops { flex-direction: column; align-items: stretch; }
 }
 </style>