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

app/components/webhooks/WebhookCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="instance-card p-6">
+    <div class="flex items-start justify-between mb-4">
+      <div class="flex items-center gap-3">
+        <div
+          class="w-10 h-10 rounded-lg flex items-center justify-center"
+          :class="webhook.isActive ? 'bg-green-500/20' : 'bg-gray-500/20'"
+        >
+          <UIcon
+            name="i-lucide-webhook"
+            class="w-5 h-5"
+            :class="webhook.isActive ? 'text-green-500' : 'text-gray-500'"
+          />
+        </div>
+        <div>
+          <h3 class="font-semibold text-[var(--wa-text)]">{{ webhook.name }}</h3>
+          <p class="text-sm text-[var(--wa-text-muted)] truncate max-w-md">{{ webhook.url }}</p>
+        </div>
+      </div>
+
+      <USwitch
+        :model-value="webhook.isActive"
+        @update:model-value="$emit('toggle', webhook.id, $event)"
+      />
+    </div>
+
+    <!-- Events -->
+    <div class="mb-4">
+      <p class="text-xs text-[var(--wa-text-muted)] mb-2">Eventos:</p>
+      <div class="flex flex-wrap gap-1">
+        <span
+          v-for="event in webhook.events"
+          :key="event"
+          class="bg-[var(--wa-bg-light)] text-[var(--wa-text-muted)] text-xs px-2 py-1 rounded"
+        >
+          {{ event }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Instance -->
+    <div v-if="webhook.instanceId" class="mb-4">
+      <p class="text-xs text-[var(--wa-text-muted)]">
+        Instancia: <span class="text-[var(--wa-text)]">{{ webhook.instanceName || webhook.instanceId }}</span>
+      </p>
+    </div>
+    <div v-else class="mb-4">
+      <p class="text-xs text-[var(--wa-text-muted)]">
+        Aplica a: <span class="text-[var(--wa-green-light)]">Todas las instancias</span>
+      </p>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex items-center gap-2">
+      <UButton
+        size="sm"
+        variant="soft"
+        icon="i-lucide-play"
+        @click="$emit('test', webhook.id)"
+      >
+        Probar
+      </UButton>
+      <UButton
+        size="sm"
+        variant="ghost"
+        icon="i-lucide-pencil"
+        @click="$emit('edit', webhook)"
+      >
+        Editar
+      </UButton>
+      <UButton
+        size="sm"
+        variant="ghost"
+        color="red"
+        icon="i-lucide-trash-2"
+        @click="$emit('delete', webhook.id)"
+      >
+        Eliminar
+      </UButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Webhook {
+  id: string
+  name: string
+  url: string
+  events: string[]
+  isActive: boolean
+  instanceId?: string
+  instanceName?: string
+}
+
+interface Props {
+  webhook: Webhook
+}
+
+defineProps<Props>()
+
+defineEmits<{
+  edit: [webhook: Webhook]
+  delete: [webhookId: string]
+  test: [webhookId: string]
+  toggle: [webhookId: string, active: boolean]
+}>()
+</script>

app/components/webhooks/WebhookFormModal.vue

@@ -0,0 +1,182 @@
+<template>
+  <UModal v-model:open="isOpen">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-lg font-semibold text-[var(--wa-text)]">
+              {{ webhook ? 'Editar Webhook' : 'Nuevo Webhook' }}
+            </h3>
+            <UButton
+              variant="ghost"
+              icon="i-lucide-x"
+              @click="isOpen = false"
+            />
+          </div>
+        </template>
+
+        <form @submit.prevent="handleSubmit">
+          <div class="space-y-4">
+            <UFormField label="Nombre" required>
+              <UInput
+                v-model="form.name"
+                placeholder="Ej: Notificaciones a n8n"
+              />
+            </UFormField>
+
+            <UFormField label="URL" required>
+              <UInput
+                v-model="form.url"
+                placeholder="https://..."
+                type="url"
+              />
+            </UFormField>
+
+            <UFormField label="Secret (opcional)">
+              <UInput
+                v-model="form.secret"
+                placeholder="Para firmar las peticiones con HMAC"
+                type="password"
+              />
+            </UFormField>
+
+            <UFormField label="Eventos">
+              <div class="grid grid-cols-2 gap-2">
+                <UCheckbox
+                  v-for="event in availableEvents"
+                  :key="event.value"
+                  v-model="form.events"
+                  :value="event.value"
+                  :label="event.label"
+                />
+              </div>
+            </UFormField>
+
+            <UFormField label="Instancia">
+              <USelectMenu
+                v-model="form.instanceId"
+                :items="instanceOptions"
+                placeholder="Todas las instancias"
+              />
+            </UFormField>
+          </div>
+
+          <div class="flex justify-end gap-3 mt-6">
+            <UButton
+              type="button"
+              variant="ghost"
+              @click="isOpen = false"
+            >
+              Cancelar
+            </UButton>
+            <UButton
+              type="submit"
+              :loading="loading"
+              :disabled="!isValid"
+            >
+              {{ webhook ? 'Guardar Cambios' : 'Crear Webhook' }}
+            </UButton>
+          </div>
+        </form>
+      </UCard>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+interface Webhook {
+  id: string
+  name: string
+  url: string
+  secret?: string
+  events: string[]
+  instanceId?: string
+}
+
+interface Props {
+  open: boolean
+  webhook?: Webhook | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  saved: [webhook: any]
+}>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value)
+})
+
+const loading = ref(false)
+
+const form = ref({
+  name: '',
+  url: '',
+  secret: '',
+  events: [] as string[],
+  instanceId: null as string | null
+})
+
+const availableEvents = [
+  { value: 'message.received', label: 'Mensaje recibido' },
+  { value: 'message.sent', label: 'Mensaje enviado' },
+  { value: 'message.status', label: 'Estado de mensaje' },
+  { value: 'instance.connected', label: 'Instancia conectada' },
+  { value: 'instance.disconnected', label: 'Instancia desconectada' },
+  { value: 'instance.qr', label: 'QR disponible' }
+]
+
+// TODO: Cargar instancias reales
+const instanceOptions = ref<any[]>([])
+
+const isValid = computed(() => {
+  return form.value.name.trim() && form.value.url.trim() && form.value.events.length > 0
+})
+
+// Watch for webhook changes to populate form
+watch(() => props.webhook, (webhook) => {
+  if (webhook) {
+    form.value = {
+      name: webhook.name,
+      url: webhook.url,
+      secret: webhook.secret || '',
+      events: [...webhook.events],
+      instanceId: webhook.instanceId || null
+    }
+  } else {
+    form.value = {
+      name: '',
+      url: '',
+      secret: '',
+      events: [],
+      instanceId: null
+    }
+  }
+}, { immediate: true })
+
+const handleSubmit = async () => {
+  if (!isValid.value) return
+
+  loading.value = true
+  try {
+    const method = props.webhook ? 'PUT' : 'POST'
+    const url = props.webhook
+      ? `/api/webhooks/${props.webhook.id}`
+      : '/api/webhooks'
+
+    const result = await $fetch(url, {
+      method,
+      body: form.value
+    })
+
+    emit('saved', result)
+  } catch (error) {
+    console.error('Error saving webhook:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>