feat(ui): add realtime feed view

ui/src/components/realtime/RealtimeEventCard.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="realtime-event">
+    <p class="text-xs text-gray-500 mb-1">
+      {{ event.operation }} · {{ event.table }} • {{ formatTimestamp(event.receivedAt) }}
+    </p>
+    <component v-if="component" :is="component" v-bind="componentProps" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import CardPlanilla from '@/components/planillas/cardPlanilla.vue'
+import CardEmpleado from '@/components/empleados/cardEmpleado.vue'
+import CardTarea from '@/components/tareas/cardTarea.vue'
+import CardAsistencia from '@/components/asistencias/cardAsistencia.vue'
+
+const props = defineProps({
+  event: { type: Object, required: true }
+})
+
+const componentMap = {
+  Planilla: CardPlanilla,
+  Cliente: CardEmpleado,
+  TareaRealizada: CardTarea,
+  Asistencia: CardAsistencia,
+}
+
+const component = computed(() => componentMap[props.event.table] || null)
+
+const itemData = computed(() =>
+  props.event.operation === 'DELETE' ? props.event.old : props.event.new
+)
+
+const componentProps = computed(() => {
+  const data = itemData.value || {}
+  switch (props.event.table) {
+    case 'Planilla':
+      return { planilla: data }
+    case 'Cliente':
+      return { employee: data }
+    case 'TareaRealizada':
+      return { tarea: data }
+    case 'Asistencia':
+      return { asistencia: data }
+    default:
+      return {}
+  }
+})
+
+const formatTimestamp = (ts) => {
+  if (!ts) return ''
+  return new Date(ts).toLocaleString('es-HN', { hour12: true })
+}
+</script>
+
+<style scoped>
+.realtime-event {
+  margin-bottom: 1rem;
+}
+</style>

ui/src/components/ui/NavBar.vue

@@ -12,6 +12,7 @@ const links = [
   { to: '/tareas',      label: 'Tareas',      icon: '📋' },
   { to: '/planillas',   label: 'Planillas',   icon: '📂' },
   { to: '/asistencias', label: 'Asistencias', icon: '⏰' },
+  { to: '/feed',        label: 'Feed',        icon: '📰' },
   { to: '/config',      label: 'Config',      icon: '⚙️' },
 ]
 
@@ -24,6 +25,7 @@ const accentColorForPath = (path) => {
   if (path.startsWith('/tareas')) return ui.accentColorTareas
   if (path.startsWith('/planillas')) return ui.accentColorPlanillas
   if (path.startsWith('/asistencias')) return ui.accentColorAsistencias
+  if (path.startsWith('/feed')) return ui.primaryColor
   if (path.startsWith('/config')) return ui.accentColorConfiguracion
   return ui.accentColorChat
 }