josedario87
faedec47d7
Some checks failed
Build and Deploy / build-and-deploy (push) Failing after 6m46s
Reemplazo completo de Evolution API por implementación directa con Baileys. Características: - Dashboard completo con Nuxt UI v4 - Soporte para múltiples instancias de WhatsApp - Conexión via QR code o pairing code - Persistencia de mensajes en PostgreSQL - API REST para integraciones externas - Webhooks con firma HMAC - SSE para actualizaciones en tiempo real - Autenticación con Authentik
114 lines
3.4 KiB
Vue
114 lines
3.4 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<MetricCard
|
|
title="Instancias Activas"
|
|
:value="stats.connectedInstances"
|
|
:total="stats.totalInstances"
|
|
icon="i-lucide-smartphone"
|
|
color="green"
|
|
/>
|
|
<MetricCard
|
|
title="Mensajes Hoy"
|
|
:value="stats.messagesToday"
|
|
icon="i-lucide-message-square"
|
|
color="blue"
|
|
/>
|
|
<MetricCard
|
|
title="Webhooks Activos"
|
|
:value="stats.activeWebhooks"
|
|
icon="i-lucide-webhook"
|
|
color="purple"
|
|
/>
|
|
<MetricCard
|
|
title="Chats Activos"
|
|
:value="stats.activeChats"
|
|
icon="i-lucide-users"
|
|
color="amber"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Instances Overview -->
|
|
<div class="instance-card p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-[var(--wa-text)]">Instancias</h3>
|
|
<UButton
|
|
to="/instances"
|
|
variant="ghost"
|
|
size="sm"
|
|
trailing-icon="i-lucide-arrow-right"
|
|
>
|
|
Ver todas
|
|
</UButton>
|
|
</div>
|
|
|
|
<div v-if="instances.length === 0" class="text-center py-8">
|
|
<UIcon name="i-lucide-smartphone" class="w-12 h-12 text-[var(--wa-text-muted)] mx-auto mb-3" />
|
|
<p class="text-[var(--wa-text-muted)]">No hay instancias configuradas</p>
|
|
<UButton
|
|
to="/instances"
|
|
variant="soft"
|
|
class="mt-4"
|
|
>
|
|
Crear primera instancia
|
|
</UButton>
|
|
</div>
|
|
|
|
<div v-else class="space-y-3">
|
|
<div
|
|
v-for="instance in instances.slice(0, 3)"
|
|
:key="instance.id"
|
|
class="flex items-center justify-between p-3 rounded-lg bg-[var(--wa-bg-light)]"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="w-3 h-3 rounded-full"
|
|
:class="instance.status === 'connected' ? 'bg-[var(--wa-green-light)]' : 'bg-red-500'"
|
|
/>
|
|
<div>
|
|
<p class="font-medium text-[var(--wa-text)]">{{ instance.name }}</p>
|
|
<p class="text-sm text-[var(--wa-text-muted)]">{{ instance.phoneNumber || 'Sin conectar' }}</p>
|
|
</div>
|
|
</div>
|
|
<StatusBadge :status="instance.status" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="instance-card p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-[var(--wa-text)]">Actividad Reciente</h3>
|
|
</div>
|
|
|
|
<div class="text-center py-8">
|
|
<UIcon name="i-lucide-activity" class="w-12 h-12 text-[var(--wa-text-muted)] mx-auto mb-3" />
|
|
<p class="text-[var(--wa-text-muted)]">La actividad aparecera aqui</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'dashboard',
|
|
title: 'Dashboard',
|
|
icon: 'i-lucide-layout-dashboard'
|
|
})
|
|
|
|
// TODO: Conectar con datos reales
|
|
const stats = ref({
|
|
totalInstances: 0,
|
|
connectedInstances: 0,
|
|
messagesToday: 0,
|
|
activeWebhooks: 0,
|
|
activeChats: 0
|
|
})
|
|
|
|
const instances = ref<any[]>([])
|
|
</script>
|