Files
whatsappNucleo/app/components/common/MetricCard.vue
josedario87 faedec47d7
Some checks failed
Build and Deploy / build-and-deploy (push) Failing after 6m46s
feat: WhatsApp Nucleo con Nuxt 4 + Baileys v7
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
2025-12-02 17:54:31 -06:00

55 lines
1.3 KiB
Vue

<template>
<div class="instance-card p-6">
<div class="flex items-center justify-between mb-4">
<div
class="w-10 h-10 rounded-lg flex items-center justify-center"
:class="iconBgClass"
>
<UIcon :name="icon" class="w-5 h-5" :class="iconClass" />
</div>
<div v-if="total" class="text-sm text-[var(--wa-text-muted)]">
de {{ total }}
</div>
</div>
<div class="text-2xl font-bold text-[var(--wa-text)]">{{ value }}</div>
<div class="text-sm text-[var(--wa-text-muted)]">{{ title }}</div>
</div>
</template>
<script setup lang="ts">
interface Props {
title: string
value: number | string
total?: number
icon: string
color?: 'green' | 'blue' | 'purple' | 'amber' | 'red'
}
const props = withDefaults(defineProps<Props>(), {
color: 'green'
})
const iconBgClass = computed(() => {
const classes: Record<string, string> = {
green: 'bg-green-500/20',
blue: 'bg-blue-500/20',
purple: 'bg-purple-500/20',
amber: 'bg-amber-500/20',
red: 'bg-red-500/20'
}
return classes[props.color]
})
const iconClass = computed(() => {
const classes: Record<string, string> = {
green: 'text-green-500',
blue: 'text-blue-500',
purple: 'text-purple-500',
amber: 'text-amber-500',
red: 'text-red-500'
}
return classes[props.color]
})
</script>