feat(voip): add Daftaresoma provider tab with webhook and click-to-call

Map portal call events into CRM logs, store the API token for OutgoingCall, and surface a dedicated settings tab for wiring the webhook URL.

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

apps/web/src/views/VoipSettingsView.vue

@@ -20,12 +20,15 @@ import {
 import UiIcon from '@/components/UiIcon.vue';
 import { formatJalaliNumeric, rewriteGregorianDates, toFaDigits } from '@/lib/jalali';
 
+type TabKey = 'generic' | 'daftareshoma';
+
 const loading = ref(false);
 const saving = ref(false);
 const error = ref('');
 const ok = ref('');
 const items = ref<VoipConnectionDto[]>([]);
 const calls = ref<VoipCallLogDto[]>([]);
+const tab = ref<TabKey>('daftareshoma');
 
 const form = reactive({
   label: 'سانترال اصلی',
@@ -34,12 +37,34 @@ const form = reactive({
   enabled: true,
 });
 
-const webhookUrl = computed(() => {
-  if (!items.value[0]) return '';
-  const origin = typeof window !== 'undefined' ? window.location.origin : '';
-  return `${origin}/api/public/integrations/voip/${items.value[0].id}/webhook`;
+const daftaForm = reactive({
+  label: 'دفتر شما',
+  apiToken: '',
+  fromNumber: '',
+  callerExtension: '',
+  enabled: true,
 });
 
+const genericItems = computed(() =>
+  items.value.filter((c) => c.provider !== 'daftareshoma'),
+);
+const daftaItems = computed(() =>
+  items.value.filter((c) => c.provider === 'daftareshoma'),
+);
+
+const activeDafta = computed(() => daftaItems.value[0] ?? null);
+
+const webhookUrlFor = (id: string | undefined) => {
+  if (!id) return '';
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+  return `${origin}/api/public/integrations/voip/${id}/webhook`;
+};
+
+const genericWebhookUrl = computed(() =>
+  webhookUrlFor(genericItems.value[0]?.id),
+);
+const daftaWebhookUrl = computed(() => webhookUrlFor(activeDafta.value?.id));
+
 const statusLabel: Record<string, string> = {
   ringing: 'زنگ',
   answered: 'پاسخ',
@@ -73,6 +98,7 @@ async function load() {
     ]);
     items.value = connRes.data;
     calls.value = callRes.data;
+    fillDaftaFromActive();
   } catch (e) {
     if (axios.isAxiosError(e) && e.response?.status === 403) {
       error.value = 'ماژول تلفن سازمانی برای این محیط فعال نیست.';
@@ -84,16 +110,18 @@ async function load() {
   }
 }
 
-async function create() {
+async function createGeneric() {
   if (!form.label.trim()) {
     error.value = 'نام اتصال را وارد کنید.';
     return;
   }
   saving.value = true;
   error.value = '';
+  ok.value = '';
   try {
     const payload: CreateVoipConnectionRequest = {
       label: form.label.trim(),
+      provider: 'generic',
       webhookSecret: form.webhookSecret.trim() || undefined,
       clickToCallUrl: form.clickToCallUrl.trim() || null,
       enabled: form.enabled,
@@ -111,6 +139,69 @@ async function create() {
   }
 }
 
+async function saveDafta() {
+  if (!daftaForm.label.trim()) {
+    error.value = 'نام اتصال را وارد کنید.';
+    return;
+  }
+  if (!activeDafta.value && !daftaForm.apiToken.trim()) {
+    error.value = 'توکن API دفتر شما را وارد کنید.';
+    return;
+  }
+  if (!daftaForm.fromNumber.trim() || !daftaForm.callerExtension.trim()) {
+    error.value = 'شماره مبدأ و خط / داخلی را وارد کنید.';
+    return;
+  }
+  saving.value = true;
+  error.value = '';
+  ok.value = '';
+  try {
+    if (activeDafta.value) {
+      await api.patch(`/integrations/voip/connections/${activeDafta.value.id}`, {
+        label: daftaForm.label.trim(),
+        fromNumber: daftaForm.fromNumber.trim(),
+        callerExtension: daftaForm.callerExtension.trim(),
+        enabled: daftaForm.enabled,
+        ...(daftaForm.apiToken.trim()
+          ? { apiToken: daftaForm.apiToken.trim() }
+          : {}),
+      });
+      daftaForm.apiToken = '';
+      ok.value = 'اتصال دفتر شما بروزرسانی شد.';
+    } else {
+      const payload: CreateVoipConnectionRequest = {
+        label: daftaForm.label.trim(),
+        provider: 'daftareshoma',
+        apiToken: daftaForm.apiToken.trim(),
+        fromNumber: daftaForm.fromNumber.trim(),
+        callerExtension: daftaForm.callerExtension.trim(),
+        enabled: daftaForm.enabled,
+      };
+      await api.post('/integrations/voip/connections', payload);
+      daftaForm.apiToken = '';
+      ok.value =
+        'اتصال دفتر شما ذخیره شد. آدرس وب‌هوک را در پرتال دفتر شما ثبت کنید.';
+    }
+    await load();
+  } catch (e) {
+    error.value = axios.isAxiosError(e)
+      ? String((e.response?.data as { message?: string })?.message ?? 'ذخیره ناموفق بود.')
+      : 'ذخیره ناموفق بود.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+function fillDaftaFromActive() {
+  const c = activeDafta.value;
+  if (!c) return;
+  daftaForm.label = c.label;
+  daftaForm.fromNumber = c.fromNumber ?? '';
+  daftaForm.callerExtension = c.callerExtension ?? '';
+  daftaForm.enabled = c.enabled;
+  daftaForm.apiToken = '';
+}
+
 async function remove(id: string) {
   if (!confirm('این اتصال حذف شود؟')) return;
   try {
@@ -121,18 +212,19 @@ async function remove(id: string) {
   }
 }
 
-async function copyWebhook() {
-  if (!webhookUrl.value) return;
+async function copyText(text: string, msg: string) {
+  if (!text) return;
   try {
-    await navigator.clipboard.writeText(webhookUrl.value);
-    ok.value = 'آدرس وب‌هوک کپی شد.';
+    await navigator.clipboard.writeText(text);
+    ok.value = msg;
   } catch {
     error.value = 'کپی ممکن نشد.';
   }
 }
 
-onMounted(() => {
-  void load();
+onMounted(async () => {
+  await load();
+  fillDaftaFromActive();
 });
 </script>
 
@@ -150,79 +242,189 @@ onMounted(() => {
       </template>
     </UiPageHeader>
 
+    <nav class="tabs" aria-label="نوع اتصال تلفن">
+      <button
+        type="button"
+        :class="{ on: tab === 'daftareshoma' }"
+        @click="tab = 'daftareshoma'"
+      >
+        دفتر شما
+      </button>
+      <button
+        type="button"
+        :class="{ on: tab === 'generic' }"
+        @click="tab = 'generic'"
+      >
+        وب‌هوک عمومی
+      </button>
+    </nav>
+
     <p v-if="error" class="error">{{ error }}</p>
     <p v-if="ok" class="ok">{{ ok }}</p>
 
-    <UiCard title="اتصال جدید">
-      <p class="hint">
-        سانترال یا سرویس VoIP شما باید رویداد تماس را با JSON به آدرس وب‌هوک بفرستد.
-        فیلدهای اصلی:
-        <code>callId</code>،
-        <code>direction</code> (inbound/outbound)،
-        <code>status</code>،
-        <code>from</code>،
-        <code>to</code>.
-        برای خلاصه خودکار یکی از
-        <code>recordingUrl</code>
-        (لینک فایل ضبط) یا
-        <code>transcript</code>
-        (متن آماده) را بفرستید؛ پس از
-        <code>completed</code>
-        /
-        <code>answered</code>
-        صف خلاصه ساخته می‌شود.
-        امضا اختیاری با هدر
-        <code>X-Voip-Signature</code>
-        (HMAC-SHA256 هگز).
-      </p>
-      <div class="form-grid">
-        <UiField label="نام">
-          <UiInput v-model="form.label" placeholder="سانترال اصلی" />
-        </UiField>
-        <UiField label="رمز وب‌هوک (اختیاری)">
-          <UiInput v-model="form.webhookSecret" placeholder="برای تأیید امضا" />
-        </UiField>
-        <UiField label="آدرس Click-to-Call (اختیاری)">
-          <UiInput
-            v-model="form.clickToCallUrl"
-            placeholder="https://pbx.example/originate?num={number}"
-          />
-        </UiField>
-      </div>
-      <UiButton :loading="saving" @click="create">ذخیره اتصال</UiButton>
-    </UiCard>
+    <template v-if="tab === 'daftareshoma'">
+      <UiCard title="اتصال دفتر شما">
+        <p class="hint">
+          توکن API را از پرتال دفتر شما (توسعه‌دهندگان → API) بگیرید.
+          پس از ذخیره، آدرس وب‌هوک زیر را در
+          <strong>تنظیمات → هوک</strong>
+          پرتال ثبت کنید و رویدادهای شروع/پایان تماس ورودی و پایان تماس خروجی را فعال کنید.
+          برای تماس خروجی از CRM، توکن باید دسترسی «تماس خروجی» داشته باشد؛ برای خلاصه خودکار، «گزارش تماس» و «دریافت فایل تماس» هم لازم است.
+        </p>
+        <div class="form-grid">
+          <UiField label="نام">
+            <UiInput v-model="daftaForm.label" placeholder="دفتر شما" />
+          </UiField>
+          <UiField
+            :label="activeDafta?.apiTokenSet ? 'توکن API (خالی = بدون تغییر)' : 'توکن API'"
+          >
+            <UiInput
+              v-model="daftaForm.apiToken"
+              type="password"
+              placeholder="توکن از پرتال دفتر شما"
+              autocomplete="off"
+            />
+          </UiField>
+          <UiField label="شماره مبدأ (from_number)">
+            <UiInput
+              v-model="daftaForm.fromNumber"
+              placeholder="مثلاً 0912…"
+              dir="ltr"
+            />
+          </UiField>
+          <UiField label="خط / داخلی (caller_extension)">
+            <UiInput
+              v-model="daftaForm.callerExtension"
+              placeholder="مثلاً 02128…"
+              dir="ltr"
+            />
+          </UiField>
+        </div>
+        <UiButton :loading="saving" @click="saveDafta">
+          {{ activeDafta ? 'بروزرسانی اتصال' : 'ذخیره اتصال دفتر شما' }}
+        </UiButton>
+      </UiCard>
 
-    <UiCard title="اتصال‌ها">
-      <UiEmptyState
-        v-if="!loading && !items.length"
-        title="اتصالی نیست"
-        description="یک اتصال برای دریافت رویداد تماس بسازید."
-      />
-      <div v-else class="list">
-        <article v-for="c in items" :key="c.id" class="item">
-          <div>
-            <strong>{{ c.label }}</strong>
-            <p class="muted">
-              تماس‌های ثبت‌شده {{ toFaDigits(c.callCount) }}
-              ·
-              {{
-                c.lastEventAt
-                  ? `آخرین رویداد ${formatJalaliNumeric(new Date(c.lastEventAt))}`
-                  : 'هنوز رویدادی نیامده'
-              }}
-            </p>
-            <p v-if="c.clickToCallUrl" class="muted">Click-to-Call فعال</p>
-            <p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
-          </div>
-          <UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
-        </article>
-      </div>
-      <div v-if="webhookUrl" class="webhook">
-        <p class="hint">آدرس وب‌هوک:</p>
-        <code>{{ webhookUrl }}</code>
-        <UiButton variant="secondary" @click="copyWebhook">کپی</UiButton>
-      </div>
-    </UiCard>
+      <UiCard title="اتصال‌های دفتر شما">
+        <UiEmptyState
+          v-if="!loading && !daftaItems.length"
+          title="اتصالی نیست"
+          description="توکن و مشخصات خط را ذخیره کنید."
+        />
+        <div v-else class="list">
+          <article v-for="c in daftaItems" :key="c.id" class="item">
+            <div>
+              <strong>{{ c.label }}</strong>
+              <p class="muted">
+                تماس‌های ثبت‌شده {{ toFaDigits(c.callCount) }}
+                ·
+                {{
+                  c.lastEventAt
+                    ? `آخرین رویداد ${formatJalaliNumeric(new Date(c.lastEventAt))}`
+                    : 'هنوز رویدادی نیامده'
+                }}
+              </p>
+              <p class="muted">
+                مبدأ {{ c.fromNumber || '—' }} · خط {{ c.callerExtension || '—' }}
+                · توکن {{ c.apiTokenSet ? 'ثبت شده' : 'ندارد' }}
+              </p>
+              <p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
+            </div>
+            <UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
+          </article>
+        </div>
+        <div v-if="daftaWebhookUrl" class="webhook">
+          <p class="hint">
+            آدرس وب‌هوک برای پرتال دفتر شما (رویدادها را با JSON به این آدرس POST کنید):
+          </p>
+          <code>{{ daftaWebhookUrl }}</code>
+          <UiButton
+            variant="secondary"
+            @click="copyText(daftaWebhookUrl, 'آدرس وب‌هوک دفتر شما کپی شد.')"
+          >
+            کپی
+          </UiButton>
+        </div>
+      </UiCard>
+    </template>
+
+    <template v-else>
+      <UiCard title="اتصال جدید">
+        <p class="hint">
+          سانترال یا سرویس VoIP شما باید رویداد تماس را با JSON به آدرس وب‌هوک بفرستد.
+          فیلدهای اصلی:
+          <code>callId</code>،
+          <code>direction</code> (inbound/outbound)،
+          <code>status</code>،
+          <code>from</code>،
+          <code>to</code>.
+          برای خلاصه خودکار یکی از
+          <code>recordingUrl</code>
+          (لینک فایل ضبط) یا
+          <code>transcript</code>
+          (متن آماده) را بفرستید؛ پس از
+          <code>completed</code>
+          /
+          <code>answered</code>
+          صف خلاصه ساخته می‌شود.
+          امضا اختیاری با هدر
+          <code>X-Voip-Signature</code>
+          (HMAC-SHA256 هگز).
+        </p>
+        <div class="form-grid">
+          <UiField label="نام">
+            <UiInput v-model="form.label" placeholder="سانترال اصلی" />
+          </UiField>
+          <UiField label="رمز وب‌هوک (اختیاری)">
+            <UiInput v-model="form.webhookSecret" placeholder="برای تأیید امضا" />
+          </UiField>
+          <UiField label="آدرس Click-to-Call (اختیاری)">
+            <UiInput
+              v-model="form.clickToCallUrl"
+              placeholder="https://pbx.example/originate?num={number}"
+            />
+          </UiField>
+        </div>
+        <UiButton :loading="saving" @click="createGeneric">ذخیره اتصال</UiButton>
+      </UiCard>
+
+      <UiCard title="اتصال‌ها">
+        <UiEmptyState
+          v-if="!loading && !genericItems.length"
+          title="اتصالی نیست"
+          description="یک اتصال برای دریافت رویداد تماس بسازید."
+        />
+        <div v-else class="list">
+          <article v-for="c in genericItems" :key="c.id" class="item">
+            <div>
+              <strong>{{ c.label }}</strong>
+              <p class="muted">
+                تماس‌های ثبت‌شده {{ toFaDigits(c.callCount) }}
+                ·
+                {{
+                  c.lastEventAt
+                    ? `آخرین رویداد ${formatJalaliNumeric(new Date(c.lastEventAt))}`
+                    : 'هنوز رویدادی نیامده'
+                }}
+              </p>
+              <p v-if="c.clickToCallUrl" class="muted">Click-to-Call فعال</p>
+              <p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
+            </div>
+            <UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
+          </article>
+        </div>
+        <div v-if="genericWebhookUrl" class="webhook">
+          <p class="hint">آدرس وب‌هوک:</p>
+          <code>{{ genericWebhookUrl }}</code>
+          <UiButton
+            variant="secondary"
+            @click="copyText(genericWebhookUrl, 'آدرس وب‌هوک کپی شد.')"
+          >
+            کپی
+          </UiButton>
+        </div>
+      </UiCard>
+    </template>
 
     <UiCard title="آخرین تماس‌ها">
       <UiEmptyState
@@ -294,6 +496,28 @@ onMounted(() => {
   display: grid;
   gap: 1rem;
 }
+.tabs {
+  display: flex;
+  justify-content: flex-start;
+  gap: 1.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+.tabs button {
+  appearance: none;
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  padding: 0.55rem 0.15rem;
+  color: #94a3b8;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.tabs button.on {
+  color: #0d9488;
+  border-bottom-color: #14b8a6;
+}
 .hint,
 .muted {
   color: #64748b;