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

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

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>