Montify: robust pagination (beyond 50), endpoint diagnose button

apps/web/src/views/MontifySettingsView.vue

@@ -5,6 +5,7 @@ import { api } from '@/lib/api';
 import type {
   CreateMontifyConnectionRequest,
   MontifyConnectionDto,
+  MontifyDiagnoseDto,
   MontifyOrderDto,
   MontifyTestResultDto,
   UpdateMontifyConnectionRequest,
@@ -158,6 +159,17 @@ function test(c: MontifyConnectionDto) {
   });
 }
 
+const diagnoses = ref<Record<string, MontifyDiagnoseDto>>({});
+
+function diagnose(c: MontifyConnectionDto) {
+  return run(c.id, async () => {
+    const { data } = await api.post<MontifyDiagnoseDto>(
+      `/integrations/montify/connections/${c.id}/diagnose`,
+    );
+    diagnoses.value = { ...diagnoses.value, [c.id]: data };
+  });
+}
+
 function sync(c: MontifyConnectionDto, mode: 'incremental' | 'full') {
   if (
     mode === 'full' &&
@@ -314,11 +326,30 @@ onBeforeUnmount(() => {
               </template>
             </p>
             <p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
+            <div v-if="diagnoses[c.id]" class="diag">
+              <p class="muted">
+                بررسی مسیرها
+                <template v-if="diagnoses[c.id]!.customerId">
+                  (با مشتری {{ diagnoses[c.id]!.customerId }})
+                </template>
+              </p>
+              <ul>
+                <li v-for="ch in diagnoses[c.id]!.checks" :key="ch.path" :class="ch.ok ? 'ok-line' : 'bad-line'">
+                  <strong>{{ ch.ok ? '✓' : '✗' }} {{ ch.name }}</strong>
+                  <span class="code">{{ ch.status || 'خطای شبکه' }}</span>
+                  <span class="ltr path">{{ ch.path }}</span>
+                  <span class="info">{{ ch.info }}</span>
+                </li>
+              </ul>
+            </div>
           </div>
           <div class="actions">
             <UiButton size="sm" variant="secondary" :loading="busyId === c.id" @click="test(c)">
               تست اتصال
             </UiButton>
+            <UiButton size="sm" variant="secondary" :loading="busyId === c.id" @click="diagnose(c)">
+              بررسی مسیرها
+            </UiButton>
             <UiButton
               size="sm"
               :disabled="!c.enabled"
@@ -463,6 +494,38 @@ onBeforeUnmount(() => {
   justify-content: end;
   max-width: 340px;
 }
+.diag {
+  margin-top: 0.4rem;
+  padding: 0.6rem;
+  background: #f8fafc;
+  border-radius: var(--radius);
+}
+.diag ul {
+  list-style: none;
+  margin: 0.3rem 0 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.82rem;
+}
+.diag li {
+  display: grid;
+  gap: 0.1rem;
+}
+.diag .code {
+  font-weight: 700;
+}
+.diag .path,
+.diag .info {
+  color: #64748b;
+  word-break: break-all;
+}
+.ok-line strong {
+  color: #166534;
+}
+.bad-line strong {
+  color: #991b1b;
+}
 .warn {
   color: #b45309;
   font-size: 0.85rem;