feat: SMS campaigns for people or leads with filters and batching

Add audience tabs, province/city filters, select-all ids, dynamic SMS tokens, and 50-sized create/send chunks.

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

apps/web/src/views/SmsCampaignsView.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import type {
+  FilteredIdsResponse,
+  LeadDto,
+  LeadStageDto,
   PaginatedResponse,
   PersonDto,
   SmsCampaignDto,
   SmsCampaignListResponse,
 } from '@mento/shared';
+import {
+  MESSAGE_AUTOMATION_FIELDS,
+  SMS_CAMPAIGN_CHUNK_SIZE,
+} from '@mento/shared';
 import {
   UiButton,
   UiCard,
@@ -21,19 +28,34 @@ import {
 import UiIcon from '@/components/UiIcon.vue';
 import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
 
+type AudienceTab = 'people' | 'leads';
+
 const router = useRouter();
 const loading = ref(false);
-const peopleLoading = ref(false);
+const listLoading = ref(false);
 const saving = ref(false);
 const error = ref('');
 const ok = ref('');
 const campaigns = ref<SmsCampaignDto[]>([]);
-const people = ref<PersonDto[]>([]);
+const audience = ref<AudienceTab>('people');
 const selectedIds = ref<string[]>([]);
 const name = ref('');
 const body = ref('');
 const queueNow = ref(true);
-const peopleQ = ref('');
+const fieldsOpen = ref(false);
+
+const q = ref('');
+const province = ref('');
+const city = ref('');
+const region = ref('');
+const stageId = ref('');
+const hasMobile = ref(true);
+const page = ref(1);
+const pageSize = 40;
+const total = ref(0);
+const people = ref<PersonDto[]>([]);
+const leads = ref<LeadDto[]>([]);
+const stages = ref<LeadStageDto[]>([]);
 
 const statusLabel: Record<string, string> = {
   draft: 'پیش‌نویس',
@@ -43,19 +65,67 @@ const statusLabel: Record<string, string> = {
   cancelled: 'لغو شده',
 };
 
-async function loadPeople(q?: string) {
-  peopleLoading.value = true;
+const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize)));
+
+const filterParams = computed(() => {
+  const base: Record<string, string | number | boolean> = {
+    q: q.value.trim() || undefined,
+    hasMobile: hasMobile.value ? '1' : undefined,
+  } as Record<string, string | number | boolean>;
+  if (audience.value === 'people') {
+    if (province.value.trim()) base.province = province.value.trim();
+    if (city.value.trim()) base.city = city.value.trim();
+  } else {
+    if (city.value.trim()) base.city = city.value.trim();
+    if (region.value.trim()) base.region = region.value.trim();
+    if (stageId.value) base.stageId = stageId.value;
+  }
+  return Object.fromEntries(
+    Object.entries(base).filter(([, v]) => v !== undefined && v !== ''),
+  );
+});
+
+function cleanParams(extra: Record<string, unknown> = {}) {
+  const merged = { ...filterParams.value, ...extra };
+  return Object.fromEntries(
+    Object.entries(merged).filter(([, v]) => v !== undefined && v !== '' && v !== null),
+  );
+}
+
+async function loadList() {
+  listLoading.value = true;
   try {
-    const { data } = await api.get<PaginatedResponse<PersonDto>>('/people', {
-      params: {
-        page: 1,
-        limit: 100,
-        ...(q?.trim() ? { q: q.trim() } : {}),
-      },
-    });
-    people.value = data.items;
+    if (audience.value === 'people') {
+      const { data } = await api.get<PaginatedResponse<PersonDto>>('/people', {
+        params: cleanParams({ page: page.value, limit: pageSize }),
+      });
+      people.value = data.items;
+      total.value = data.total;
+      leads.value = [];
+    } else {
+      const { data } = await api.get<PaginatedResponse<LeadDto>>('/leads', {
+        params: cleanParams({ page: page.value, limit: pageSize }),
+      });
+      leads.value = data.items;
+      total.value = data.total;
+      people.value = [];
+    }
   } finally {
-    peopleLoading.value = false;
+    listLoading.value = false;
+  }
+}
+
+async function loadCampaigns() {
+  const { data } = await api.get<SmsCampaignListResponse>('/sms-campaigns');
+  campaigns.value = data.items;
+}
+
+async function loadStages() {
+  try {
+    const { data } = await api.get<LeadStageDto[]>('/leads/stages');
+    stages.value = data;
+  } catch {
+    stages.value = [];
   }
 }
 
@@ -63,11 +133,7 @@ async function load() {
   loading.value = true;
   error.value = '';
   try {
-    const [campRes] = await Promise.all([
-      api.get<SmsCampaignListResponse>('/sms-campaigns'),
-      loadPeople(peopleQ.value),
-    ]);
-    campaigns.value = campRes.data.items;
+    await Promise.all([loadCampaigns(), loadList(), loadStages()]);
   } catch (e) {
     if (axios.isAxiosError(e) && e.response?.status === 403) {
       error.value = 'ماژول پیامک گروهی برای این محیط فعال نیست.';
@@ -79,17 +145,46 @@ async function load() {
   }
 }
 
-let peopleSearchTimer: ReturnType<typeof setTimeout> | null = null;
-watch(peopleQ, (q) => {
-  if (peopleSearchTimer) clearTimeout(peopleSearchTimer);
-  peopleSearchTimer = setTimeout(() => {
-    void loadPeople(q).catch(() => {
-      error.value = 'جستجوی مخاطب ناموفق بود.';
+let searchTimer: ReturnType<typeof setTimeout> | null = null;
+function scheduleReload() {
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => {
+    page.value = 1;
+    void loadList().catch(() => {
+      error.value = 'بارگذاری مخاطب ناموفق بود.';
     });
   }, 300);
+}
+
+watch([q, province, city, region, stageId, hasMobile], scheduleReload);
+watch(page, () => {
+  void loadList().catch(() => {
+    error.value = 'بارگذاری مخاطب ناموفق بود.';
+  });
 });
 
-function togglePerson(id: string) {
+watch(audience, (next, prev) => {
+  if (next === prev) return;
+  if (selectedIds.value.length) {
+    const okSwitch = window.confirm(
+      'با تعویض تب، انتخاب‌های فعلی پاک می‌شود. ادامه می‌دهید؟',
+    );
+    if (!okSwitch) {
+      audience.value = prev;
+      return;
+    }
+  }
+  selectedIds.value = [];
+  q.value = '';
+  province.value = '';
+  city.value = '';
+  region.value = '';
+  stageId.value = '';
+  page.value = 1;
+  void loadList();
+});
+
+function toggleId(id: string) {
   if (selectedIds.value.includes(id)) {
     selectedIds.value = selectedIds.value.filter((x) => x !== id);
   } else {
@@ -98,10 +193,55 @@ function togglePerson(id: string) {
 }
 
 function selectVisible() {
-  const ids = people.value.map((p) => p.id);
+  const ids =
+    audience.value === 'people'
+      ? people.value.map((p) => p.id)
+      : leads.value.map((l) => l.id);
   selectedIds.value = [...new Set([...selectedIds.value, ...ids])];
 }
 
+async function selectAllFiltered() {
+  error.value = '';
+  try {
+    const path = audience.value === 'people' ? '/people/ids' : '/leads/ids';
+    const { data } = await api.get<FilteredIdsResponse>(path, {
+      params: cleanParams(),
+    });
+    if (!data.total) {
+      error.value = 'نتیجه‌ای با این فیلتر پیدا نشد.';
+      return;
+    }
+    const confirmed = window.confirm(
+      `${toFaDigits(data.total)} مخاطب مطابق فیلتر انتخاب شود؟`,
+    );
+    if (!confirmed) return;
+    selectedIds.value = data.ids;
+    ok.value = `${toFaDigits(data.ids.length)} مخاطب انتخاب شد.`;
+  } 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 = 'انتخاب همه ناموفق بود.';
+    }
+  }
+}
+
+function insertField(token: string) {
+  body.value = `${body.value}${token}`;
+  fieldsOpen.value = false;
+}
+
+function chunkIds(ids: string[]) {
+  const out: string[][] = [];
+  for (let i = 0; i < ids.length; i += SMS_CAMPAIGN_CHUNK_SIZE) {
+    out.push(ids.slice(i, i + SMS_CAMPAIGN_CHUNK_SIZE));
+  }
+  return out;
+}
+
 async function createCampaign() {
   if (!name.value.trim() || body.value.trim().length < 2) {
     error.value = 'نام و متن پیامک را کامل کنید.';
@@ -114,20 +254,38 @@ async function createCampaign() {
   saving.value = true;
   error.value = '';
   ok.value = '';
+  const chunks = chunkIds(selectedIds.value);
+  const wantQueue = queueNow.value;
   try {
-    await api.post('/sms-campaigns', {
+    const first = chunks[0]!;
+    const createBody =
+      audience.value === 'people'
+        ? { personIds: first }
+        : { leadIds: first };
+    const { data: campaign } = await api.post<SmsCampaignDto>('/sms-campaigns', {
       name: name.value.trim(),
       body: body.value.trim(),
-      personIds: selectedIds.value,
-      queueNow: queueNow.value,
+      queueNow: false,
+      ...createBody,
     });
+    for (let i = 1; i < chunks.length; i += 1) {
+      const part = chunks[i]!;
+      await api.post(`/sms-campaigns/${campaign.id}/recipients`, {
+        ...(audience.value === 'people'
+          ? { personIds: part }
+          : { leadIds: part }),
+      });
+    }
+    if (wantQueue) {
+      await api.post(`/sms-campaigns/${campaign.id}/queue`);
+    }
     name.value = '';
     body.value = '';
     selectedIds.value = [];
-    ok.value = queueNow.value
-      ? 'کمپین در صف ارسال قرار گرفت.'
+    ok.value = wantQueue
+      ? `کمپین با ${toFaDigits(chunks.reduce((n, c) => n + c.length, 0))} مخاطب در صف ارسال قرار گرفت.`
       : 'کمپین به‌صورت پیش‌نویس ذخیره شد.';
-    await load();
+    await loadCampaigns();
   } catch (e) {
     if (axios.isAxiosError(e)) {
       const msg = (e.response?.data as { message?: string | string[] })?.message;
@@ -143,7 +301,7 @@ async function createCampaign() {
 async function queue(id: string) {
   try {
     await api.post(`/sms-campaigns/${id}/queue`);
-    await load();
+    await loadCampaigns();
   } catch {
     error.value = 'صف‌بندی ناموفق بود.';
   }
@@ -152,7 +310,7 @@ async function queue(id: string) {
 async function cancel(id: string) {
   try {
     await api.post(`/sms-campaigns/${id}/cancel`);
-    await load();
+    await loadCampaigns();
   } catch {
     error.value = 'لغو ناموفق بود.';
   }
@@ -167,7 +325,7 @@ onMounted(() => {
   <div class="page">
     <UiPageHeader
       title="پیامک گروهی"
-      description="ارسال انبوه پیامک به مخاطبان انتخاب‌شده"
+      description="ارسال انبوه پیامک به اشخاص یا لیدهای فیلترشده"
     >
       <template #actions>
         <UiButton variant="secondary" :disabled="loading" @click="load">
@@ -190,39 +348,173 @@ onMounted(() => {
           ارسال فوری پس از ذخیره
         </label>
       </div>
-      <UiField label="متن پیامک">
+
+      <div class="body-block">
+        <div class="body-tools">
+          <span class="muted">متن پیامک</span>
+          <div class="pop-wrap">
+            <button
+              class="pill"
+              type="button"
+              @click="fieldsOpen = !fieldsOpen"
+            >
+              <b>{ }</b>
+              فیلدهای پویا
+            </button>
+            <div v-if="fieldsOpen" class="pop">
+              <button
+                v-for="item in MESSAGE_AUTOMATION_FIELDS"
+                :key="item.token"
+                type="button"
+                @click="insertField(item.token)"
+              >
+                <code>{{ item.token }}</code>
+                <span>{{ item.label }}</span>
+              </button>
+            </div>
+          </div>
+        </div>
         <UiTextarea
           v-model="body"
           :rows="4"
-          placeholder="متن پیامک را بنویسید… در صورت وجود لینک http(s)، برای هر مخاطب لینک یکتا ساخته می‌شود."
+          placeholder="متن پیامک را بنویسید… از فیلدهای پویا استفاده کنید. لینک http(s) برای هر مخاطب یکتا می‌شود."
         />
-      </UiField>
-
-      <div class="people-head">
-        <UiField label="جستجوی مخاطب">
-          <UiInput v-model="peopleQ" placeholder="نام یا موبایل…" />
-        </UiField>
-        <UiButton variant="secondary" @click="selectVisible">
-          انتخاب نتایج
-        </UiButton>
       </div>
-      <p class="muted">
-        انتخاب‌شده: {{ toFaDigits(selectedIds.length) }} نفر
-      </p>
-      <p v-if="peopleLoading" class="muted">در حال بارگذاری مخاطبان…</p>
-      <div class="people-list">
-        <label v-for="p in people" :key="p.id" class="person">
-          <input
-            type="checkbox"
-            :checked="selectedIds.includes(p.id)"
-            @change="togglePerson(p.id)"
-          />
-          <span>
-            <strong>{{ p.fullName }}</strong>
-            <small>{{ p.mobile || 'بدون موبایل' }}</small>
-          </span>
+
+      <div class="tabs" role="tablist">
+        <button
+          type="button"
+          role="tab"
+          :class="{ on: audience === 'people' }"
+          @click="audience = 'people'"
+        >
+          اشخاص
+        </button>
+        <button
+          type="button"
+          role="tab"
+          :class="{ on: audience === 'leads' }"
+          @click="audience = 'leads'"
+        >
+          لیدها
+        </button>
+      </div>
+
+      <div class="filters">
+        <UiField label="جستجو">
+          <UiInput v-model="q" placeholder="نام یا موبایل…" />
+        </UiField>
+        <UiField v-if="audience === 'people'" label="استان">
+          <UiInput v-model="province" placeholder="مثلاً اصفهان" />
+        </UiField>
+        <UiField :label="audience === 'people' ? 'شهر' : 'شهر'">
+          <UiInput v-model="city" placeholder="شهر…" />
+        </UiField>
+        <UiField v-if="audience === 'leads'" label="منطقه / استان">
+          <UiInput v-model="region" placeholder="منطقه یا استان…" />
+        </UiField>
+        <UiField v-if="audience === 'leads'" label="مرحله">
+          <select v-model="stageId" class="select">
+            <option value="">همه</option>
+            <option v-for="s in stages" :key="s.id" :value="s.id">
+              {{ s.name }}
+            </option>
+          </select>
+        </UiField>
+        <label class="check filter-check">
+          <input v-model="hasMobile" type="checkbox" />
+          فقط با موبایل
         </label>
       </div>
+
+      <div class="people-head">
+        <p class="muted">
+          انتخاب‌شده: {{ toFaDigits(selectedIds.length) }} نفر · نتایج فیلتر:
+          {{ toFaDigits(total) }}
+        </p>
+        <div class="head-actions">
+          <UiButton variant="secondary" @click="selectVisible">
+            انتخاب صفحه
+          </UiButton>
+          <UiButton variant="secondary" @click="selectAllFiltered">
+            انتخاب همهٔ نتایج فیلتر
+          </UiButton>
+        </div>
+      </div>
+
+      <p v-if="listLoading" class="muted">در حال بارگذاری…</p>
+      <div class="people-list">
+        <template v-if="audience === 'people'">
+          <label v-for="p in people" :key="p.id" class="person">
+            <input
+              type="checkbox"
+              :checked="selectedIds.includes(p.id)"
+              @change="toggleId(p.id)"
+            />
+            <span>
+              <strong>{{ p.fullName }}</strong>
+              <small>
+                {{ p.mobile || 'بدون موبایل' }}
+                <template v-if="p.company">
+                  · {{ p.company.name }}
+                  <template v-if="p.company.city || p.company.province">
+                    ·
+                    {{
+                      [p.company.city, p.company.province].filter(Boolean).join('، ')
+                    }}
+                  </template>
+                </template>
+              </small>
+            </span>
+          </label>
+        </template>
+        <template v-else>
+          <label v-for="l in leads" :key="l.id" class="person">
+            <input
+              type="checkbox"
+              :checked="selectedIds.includes(l.id)"
+              @change="toggleId(l.id)"
+            />
+            <span>
+              <strong>{{ l.contactName || l.title }}</strong>
+              <small>
+                {{ l.mobile || 'بدون موبایل' }}
+                <template v-if="l.city || l.region">
+                  · {{ [l.city, l.region].filter(Boolean).join('، ') }}
+                </template>
+                · {{ l.stageName }}
+              </small>
+            </span>
+          </label>
+        </template>
+        <p
+          v-if="!listLoading && !(audience === 'people' ? people.length : leads.length)"
+          class="muted empty-list"
+        >
+          موردی پیدا نشد.
+        </p>
+      </div>
+
+      <div class="pager">
+        <UiButton
+          variant="secondary"
+          :disabled="page <= 1"
+          @click="page -= 1"
+        >
+          قبلی
+        </UiButton>
+        <span class="muted">
+          صفحه {{ toFaDigits(page) }} از {{ toFaDigits(pageCount) }}
+        </span>
+        <UiButton
+          variant="secondary"
+          :disabled="page >= pageCount"
+          @click="page += 1"
+        >
+          بعدی
+        </UiButton>
+      </div>
+
       <UiButton :loading="saving" @click="createCampaign">ساخت کمپین</UiButton>
     </UiCard>
 
@@ -294,20 +586,123 @@ onMounted(() => {
   color: #334155;
   min-height: var(--control-h);
 }
-.people-head {
+.filter-check {
+  align-self: end;
+  margin-bottom: 0.35rem;
+}
+.body-block {
+  margin-bottom: 0.75rem;
+}
+.body-tools {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.35rem;
+}
+.pop-wrap {
+  position: relative;
+}
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  border-radius: 999px;
+  padding: 0.35rem 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  color: #0f172a;
+}
+.pill:hover {
+  background: #f8fafc;
+}
+.pop {
+  position: absolute;
+  inset-inline-end: 0;
+  top: calc(100% + 0.35rem);
+  z-index: 20;
+  min-width: 220px;
   display: grid;
-  grid-template-columns: 1fr auto;
+  gap: 0.2rem;
+  padding: 0.45rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+}
+.pop button {
+  display: flex;
+  justify-content: space-between;
   gap: 0.75rem;
-  align-items: end;
-  margin-top: 0.75rem;
+  border: 0;
+  background: transparent;
+  padding: 0.45rem 0.55rem;
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: start;
+}
+.pop button:hover {
+  background: #f1f5f9;
+}
+.pop code {
+  font-weight: 700;
+  color: #0f766e;
+}
+.tabs {
+  display: flex;
+  gap: 0.35rem;
+  margin: 0.5rem 0 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+.tabs button {
+  border: 0;
+  background: transparent;
+  padding: 0.55rem 0.9rem;
+  font-weight: 700;
+  color: #64748b;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.tabs button.on {
+  color: #0f766e;
+  border-bottom-color: #0f766e;
+}
+.filters {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 0.65rem;
+  margin-bottom: 0.5rem;
+}
+.select {
+  width: 100%;
+  min-height: var(--control-h);
+  border: 1px solid #e2e8f0;
+  border-radius: var(--radius);
+  padding: 0 0.65rem;
+  background: #fff;
+}
+.people-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+.head-actions {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
 }
 .people-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 0.45rem;
-  max-height: 280px;
+  max-height: 360px;
   overflow: auto;
-  margin: 0.75rem 0 1rem;
+  margin: 0.75rem 0 0.75rem;
   padding: 0.35rem;
   border: 1px solid #eef2f7;
   border-radius: var(--radius);
@@ -329,6 +724,17 @@ onMounted(() => {
 .person small {
   color: #64748b;
 }
+.empty-list {
+  grid-column: 1 / -1;
+  padding: 0.75rem;
+}
+.pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
 .campaigns {
   display: grid;
   gap: 0.75rem;
@@ -363,7 +769,6 @@ onMounted(() => {
 }
 @media (max-width: 800px) {
   .form-grid,
-  .people-head,
   .campaign {
     grid-template-columns: 1fr;
     flex-direction: column;