CRM_Montzar/apps/web/src/views/VoipSettingsView.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
import { RouterLink } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import type {
  CreateVoipConnectionRequest,
  VoipCallLogDto,
  VoipConnectionDto,
} from '@mento/shared';
import {
  UiButton,
  UiCard,
  UiEmptyState,
  UiField,
  UiInput,
  UiPageHeader,
} from '@/components/ui';
import UiIcon from '@/components/UiIcon.vue';
import { formatJalaliNumeric, rewriteGregorianDates, toFaDigits } from '@/lib/jalali';

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const items = ref<VoipConnectionDto[]>([]);
const calls = ref<VoipCallLogDto[]>([]);

const form = reactive({
  label: 'سانترال اصلی',
  webhookSecret: '',
  clickToCallUrl: '',
  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 statusLabel: Record<string, string> = {
  ringing: 'زنگ',
  answered: 'پاسخ',
  missed: 'از دست‌رفته',
  completed: 'تمام‌شده',
  failed: 'ناموفق',
};

const summaryLabel: Record<string, string> = {
  none: '—',
  pending: 'در صف',
  processing: 'در حال ساخت',
  done: 'آماده',
  failed: 'ناموفق',
  skipped: 'رد شده',
};

function noteLink(c: VoipCallLogDto): string | null {
  if (!c.summaryNoteId) return null;
  if (c.personId) return `/contacts/people/${c.personId}`;
  return '/notes';
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [connRes, callRes] = await Promise.all([
      api.get<VoipConnectionDto[]>('/integrations/voip/connections'),
      api.get<VoipCallLogDto[]>('/integrations/voip/calls'),
    ]);
    items.value = connRes.data;
    calls.value = callRes.data;
  } catch (e) {
    if (axios.isAxiosError(e) && e.response?.status === 403) {
      error.value = 'ماژول تلفن سازمانی برای این محیط فعال نیست.';
    } else {
      error.value = 'بارگذاری ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function create() {
  if (!form.label.trim()) {
    error.value = 'نام اتصال را وارد کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  try {
    const payload: CreateVoipConnectionRequest = {
      label: form.label.trim(),
      webhookSecret: form.webhookSecret.trim() || undefined,
      clickToCallUrl: form.clickToCallUrl.trim() || null,
      enabled: form.enabled,
    };
    await api.post('/integrations/voip/connections', payload);
    form.webhookSecret = '';
    ok.value = 'اتصال ذخیره شد.';
    await load();
  } catch (e) {
    error.value = axios.isAxiosError(e)
      ? String((e.response?.data as { message?: string })?.message ?? 'ذخیره ناموفق بود.')
      : 'ذخیره ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

async function remove(id: string) {
  if (!confirm('این اتصال حذف شود؟')) return;
  try {
    await api.delete(`/integrations/voip/connections/${id}`);
    await load();
  } catch {
    error.value = 'حذف ناموفق بود.';
  }
}

async function copyWebhook() {
  if (!webhookUrl.value) return;
  try {
    await navigator.clipboard.writeText(webhookUrl.value);
    ok.value = 'آدرس وب‌هوک کپی شد.';
  } catch {
    error.value = 'کپی ممکن نشد.';
  }
}

onMounted(() => {
  void load();
});
</script>

<template>
  <div class="page">
    <UiPageHeader
      title="تلفن سازمانی"
      description="ثبت خودکار تماس، خلاصه گفتگو و اعلان تماس ورودی"
    >
      <template #actions>
        <UiButton variant="secondary" :disabled="loading" @click="load">
          <UiIcon name="refresh" />
          بروزرسانی
        </UiButton>
      </template>
    </UiPageHeader>

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

    <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="!calls.length"
        title="تماسی نیست"
        description="پس از ارسال رویداد از سانترال اینجا دیده می‌شوند."
      />
      <div v-else class="table-wrap">
        <div class="tc-row">
          <TableColumnsMenu table-key="voip.calls" align="end" />
        </div>
        <table v-table-cols="'voip.calls'">
          <thead>
            <tr>
              <th>جهت</th>
              <th>وضعیت</th>
              <th>از / به</th>
              <th>مشتری</th>
              <th>مدت</th>
              <th>خلاصه</th>
              <th>زمان</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="c in calls" :key="c.id">
              <td>{{ c.direction === 'outbound' ? 'خروجی' : 'ورودی' }}</td>
              <td>{{ statusLabel[c.status] ?? c.status }}</td>
              <td>{{ c.fromNumber || '—' }} → {{ c.toNumber || '—' }}</td>
              <td>{{ c.personName || '—' }}</td>
              <td>
                {{
                  c.durationSec != null
                    ? `${toFaDigits(c.durationSec)} ثانیه`
                    : '—'
                }}
              </td>
              <td class="summary-cell">
                <span
                  class="summary-badge"
                  :data-status="c.summaryStatus || 'none'"
                >
                  {{ summaryLabel[c.summaryStatus] ?? c.summaryStatus ?? '—' }}
                </span>
                <p v-if="c.summary" class="summary-preview">
                  {{ rewriteGregorianDates(c.summary).slice(0, 120) }}{{ c.summary.length > 120 ? '…' : '' }}
                </p>
                <p v-if="c.summaryError && c.summaryStatus === 'failed'" class="warn">
                  {{ c.summaryError }}
                </p>
                <RouterLink
                  v-if="noteLink(c)"
                  class="note-link"
                  :to="noteLink(c)!"
                >
                  مشاهده در پرونده
                </RouterLink>
              </td>
              <td>{{ formatJalaliNumeric(new Date(c.startedAt)) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </UiCard>
  </div>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
}
.hint,
.muted {
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.7;
}
.hint code {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  font-size: 0.8rem;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.list {
  display: grid;
  gap: 0.75rem;
}
.item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #eef2f7;
  border-radius: var(--radius);
}
.webhook {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: var(--radius);
  display: grid;
  gap: 0.5rem;
}
.webhook code {
  word-break: break-all;
  font-size: 0.85rem;
}
.warn {
  color: #b45309;
  font-size: 0.85rem;
}
.error {
  color: #b91c1c;
  font-weight: 600;
}
.ok {
  color: #0f766e;
  font-weight: 600;
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th,
td {
  text-align: right;
  padding: 0.55rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}
th {
  color: #64748b;
  font-size: 0.8rem;
}
.summary-cell {
  max-width: 16rem;
}
.summary-badge {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}
.summary-badge[data-status='done'] {
  background: #ecfdf5;
  color: #047857;
}
.summary-badge[data-status='pending'],
.summary-badge[data-status='processing'] {
  background: #eff6ff;
  color: #1d4ed8;
}
.summary-badge[data-status='failed'] {
  background: #fef2f2;
  color: #b91c1c;
}
.summary-preview {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.5;
}
.note-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #0f766e;
}
@media (max-width: 800px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>