From 5dae4a20d340cd251205220015d81842e2dca3cf Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Mon, 9 Jun 2025 19:40:29 -0600
Subject: [PATCH 1/4] feat(ui): add realtime feed view

---
 README.md                                     |  2 +
 ui/README.md                                  |  4 ++
 .../components/realtime/RealtimeEventCard.vue | 60 +++++++++++++++++++
 ui/src/components/ui/NavBar.vue               |  2 +
 ui/src/router/index.js                        |  3 +
 ui/src/stores/useRealtime.js                  | 16 +++--
 ui/src/views/RealtimeFeedView.vue             | 53 ++++++++++++++++
 7 files changed, 134 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/components/realtime/RealtimeEventCard.vue
 create mode 100644 ui/src/views/RealtimeFeedView.vue

diff --git a/README.md b/README.md
index 9ed4356..07d1427 100644
--- a/README.md
+++ b/README.md
@@ -147,6 +147,8 @@ source.onmessage = (e) => {
 };
 ```
 
+La interfaz incluye una vista **Feed** accesible desde la barra lateral. Allí se muestran en tiempo real las tarjetas de cada módulo conforme llegan estos eventos.
+
 #### Card Animation
 The data cards implemented in `ui/src/components/ui/NucleoDataCard.vue` now feature a subtle growing animation when hovered over. This animation is implemented purely with CSS using keyframes and transitions defined within the component's `<style scoped>` section, ensuring the styles are encapsulated and don't affect other elements.
 
diff --git a/ui/README.md b/ui/README.md
index 02f6020..7cf57f4 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -103,3 +103,7 @@ const handleEditAsistencia = (asistenciaId) => {
 ```
 The specific prop name matches the module (e.g., `asistencia` for `cardAsistencia`, `employee` for `cardEmpleado`, `planilla` for `cardPlanilla`, `tarea` for `cardTarea`).
 
+## Realtime Feed
+
+The UI provides a *Feed* view that consumes the realtime events generated by the backend. You can access it via the sidebar link "Feed". Each incoming event is rendered using these standardized cards so you can monitor inserts, updates and deletes as they happen.
+
diff --git a/ui/src/components/realtime/RealtimeEventCard.vue b/ui/src/components/realtime/RealtimeEventCard.vue
new file mode 100644
index 0000000..d35db34
--- /dev/null
+++ b/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>
diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index 34f862b..06db6a1 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/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
 }
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index ea9a22c..d4a9628 100644
--- a/ui/src/router/index.js
+++ b/ui/src/router/index.js
@@ -25,6 +25,9 @@ const routes = [
   { path: '/asistencias/nuevo',   name: 'asistencias-new',   component: () => import('@/views/asistencias/AsistenciaForm.vue') },
   { path: '/asistencias/:id',     name: 'asistencias-edit',  component: () => import('@/views/asistencias/AsistenciaForm.vue'), props: true },
 
+  // ────── Feed en tiempo real ──────
+  { path: '/feed', name: 'feed', component: () => import('@/views/RealtimeFeedView.vue') },
+
   // 404
   { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFound.vue') }
 ]
diff --git a/ui/src/stores/useRealtime.js b/ui/src/stores/useRealtime.js
index a567cdf..a46edd1 100644
--- a/ui/src/stores/useRealtime.js
+++ b/ui/src/stores/useRealtime.js
@@ -7,6 +7,7 @@ import { useAsistenciasStore } from './useAsistencias'
 export const useRealtimeStore = defineStore('realtime', {
   state: () => ({
     _sse: null,
+    events: [],
   }),
   actions: {
     init() {
@@ -19,13 +20,16 @@ export const useRealtimeStore = defineStore('realtime', {
         console.log('🟢 Conexión SSE establecida correctamente');
       };
 
-        this._sse.onmessage = (e) => {
-          console.log('📩 SSE message raw:', e.data);
+      this._sse.onmessage = (e) => {
+        console.log('📩 SSE message raw:', e.data);
 
-          try {
-            const payload = JSON.parse(e.data);
-            console.log('📦 Payload parseado:', payload);
-            console.log('🧪 Tabla recibida:', payload.table);
+        try {
+          const payload = JSON.parse(e.data);
+          console.log('📦 Payload parseado:', payload);
+          console.log('🧪 Tabla recibida:', payload.table);
+
+          // store event for feed
+          this.events.unshift({ ...payload, receivedAt: new Date().toISOString() });
 
           switch (payload.table) {
             case 'Planilla':
diff --git a/ui/src/views/RealtimeFeedView.vue b/ui/src/views/RealtimeFeedView.vue
new file mode 100644
index 0000000..16e4fd0
--- /dev/null
+++ b/ui/src/views/RealtimeFeedView.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useRealtimeStore } from '@/stores/useRealtime'
+import RealtimeEventCard from '@/components/realtime/RealtimeEventCard.vue'
+
+const realtime = useRealtimeStore()
+
+onMounted(() => {
+  realtime.init()
+})
+</script>
+
+<template>
+  <div class="realtime-feed-container">
+    <header class="page-header">
+      <h1>Feed en Tiempo Real</h1>
+    </header>
+
+    <div class="feed-list overflow-auto pr-2" style="max-height: calc(100vh - 160px);">
+      <RealtimeEventCard
+        v-for="(ev, idx) in realtime.events"
+        :key="idx"
+        :event="ev"
+      />
+      <div v-if="realtime.events.length === 0" class="text-center text-gray-500 mt-4">
+        No hay eventos aún.
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.realtime-feed-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.page-header h1 {
+  color: var(--primary-color);
+  font-size: 2.2em;
+  font-weight: 600;
+}
+</style>

From 9030469fe7ff11c81ccb664200f5e83802a8520d Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Mon, 9 Jun 2025 19:49:24 -0600
Subject: [PATCH 2/4] Improve realtime feed

---
 README.md                                     |  2 +-
 ui/README.md                                  |  2 +-
 .../components/realtime/RealtimeEventCard.vue | 46 ++++++++++++++++---
 ui/src/views/RealtimeFeedView.vue             | 19 ++++++--
 4 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 07d1427..54d6be2 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ source.onmessage = (e) => {
 };
 ```
 
-La interfaz incluye una vista **Feed** accesible desde la barra lateral. Allí se muestran en tiempo real las tarjetas de cada módulo conforme llegan estos eventos.
+La interfaz incluye una vista **Feed** accesible desde la barra lateral. Allí se muestran en tiempo real las tarjetas de cada módulo conforme llegan estos eventos. Las actualizaciones exhiben la tarjeta anterior y la nueva con una flecha que indica el cambio.
 
 #### Card Animation
 The data cards implemented in `ui/src/components/ui/NucleoDataCard.vue` now feature a subtle growing animation when hovered over. This animation is implemented purely with CSS using keyframes and transitions defined within the component's `<style scoped>` section, ensuring the styles are encapsulated and don't affect other elements.
diff --git a/ui/README.md b/ui/README.md
index 7cf57f4..f2c57b0 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -105,5 +105,5 @@ The specific prop name matches the module (e.g., `asistencia` for `cardAsistenci
 
 ## Realtime Feed
 
-The UI provides a *Feed* view that consumes the realtime events generated by the backend. You can access it via the sidebar link "Feed". Each incoming event is rendered using these standardized cards so you can monitor inserts, updates and deletes as they happen.
+The UI provides a *Feed* view that consumes the realtime events generated by the backend. You can access it via the sidebar link "Feed". Each incoming event is rendered using these standardized cards so you can monitor inserts, updates and deletes as they happen. Update events show the old card followed by the new one with an arrow in between.
 
diff --git a/ui/src/components/realtime/RealtimeEventCard.vue b/ui/src/components/realtime/RealtimeEventCard.vue
index d35db34..d8ac00f 100644
--- a/ui/src/components/realtime/RealtimeEventCard.vue
+++ b/ui/src/components/realtime/RealtimeEventCard.vue
@@ -3,7 +3,28 @@
     <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" />
+    <template v-if="event.operation === 'UPDATE'">
+      <div class="flex items-center space-x-2">
+        <component
+          v-if="component"
+          :is="component"
+          v-bind="componentPropsOld"
+          class="old-card opacity-70"
+        />
+        <span class="text-2xl">→</span>
+        <component
+          v-if="component"
+          :is="component"
+          v-bind="componentPropsNew"
+          class="new-card"
+        />
+      </div>
+    </template>
+    <component
+      v-else-if="component"
+      :is="component"
+      v-bind="componentProps"
+    />
   </div>
 </template>
 
@@ -31,22 +52,28 @@ const itemData = computed(() =>
   props.event.operation === 'DELETE' ? props.event.old : props.event.new
 )
 
-const componentProps = computed(() => {
-  const data = itemData.value || {}
+const buildProps = (data) => {
   switch (props.event.table) {
     case 'Planilla':
-      return { planilla: data }
+      return { planilla: data || {} }
     case 'Cliente':
-      return { employee: data }
+      return { employee: data || {} }
     case 'TareaRealizada':
-      return { tarea: data }
+      return { tarea: data || {} }
     case 'Asistencia':
-      return { asistencia: data }
+      return { asistencia: data || {} }
     default:
       return {}
   }
+}
+
+const componentProps = computed(() => {
+  return buildProps(itemData.value)
 })
 
+const componentPropsOld = computed(() => buildProps(props.event.old))
+const componentPropsNew = computed(() => buildProps(props.event.new))
+
 const formatTimestamp = (ts) => {
   if (!ts) return ''
   return new Date(ts).toLocaleString('es-HN', { hour12: true })
@@ -57,4 +84,9 @@ const formatTimestamp = (ts) => {
 .realtime-event {
   margin-bottom: 1rem;
 }
+
+.old-card,
+.new-card {
+  flex: 1 1 0%;
+}
 </style>
diff --git a/ui/src/views/RealtimeFeedView.vue b/ui/src/views/RealtimeFeedView.vue
index 16e4fd0..82c66a0 100644
--- a/ui/src/views/RealtimeFeedView.vue
+++ b/ui/src/views/RealtimeFeedView.vue
@@ -16,16 +16,16 @@ onMounted(() => {
       <h1>Feed en Tiempo Real</h1>
     </header>
 
-    <div class="feed-list overflow-auto pr-2" style="max-height: calc(100vh - 160px);">
+    <transition-group name="feed" tag="div" class="feed-list overflow-auto pr-2" style="max-height: calc(100vh - 160px);">
       <RealtimeEventCard
         v-for="(ev, idx) in realtime.events"
-        :key="idx"
+        :key="ev.receivedAt + idx"
         :event="ev"
       />
       <div v-if="realtime.events.length === 0" class="text-center text-gray-500 mt-4">
         No hay eventos aún.
       </div>
-    </div>
+    </transition-group>
   </div>
 </template>
 
@@ -50,4 +50,17 @@ onMounted(() => {
   font-size: 2.2em;
   font-weight: 600;
 }
+
+.feed-enter-active,
+.feed-leave-active {
+  transition: all 0.3s ease-out;
+}
+.feed-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+.feed-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
 </style>

From a311c811d70299a427a079b6acf1f36ec45f0145 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Mon, 9 Jun 2025 20:10:52 -0600
Subject: [PATCH 3/4] style(feed): highlight insert/delete events

---
 .../components/realtime/RealtimeEventCard.vue  | 10 +++++++++-
 ui/src/views/RealtimeFeedView.vue              | 18 ++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/realtime/RealtimeEventCard.vue b/ui/src/components/realtime/RealtimeEventCard.vue
index d8ac00f..39d171e 100644
--- a/ui/src/components/realtime/RealtimeEventCard.vue
+++ b/ui/src/components/realtime/RealtimeEventCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="realtime-event">
+  <div :class="['realtime-event', eventBgClass]">
     <p class="text-xs text-gray-500 mb-1">
       {{ event.operation }} · {{ event.table }} • {{ formatTimestamp(event.receivedAt) }}
     </p>
@@ -78,11 +78,19 @@ const formatTimestamp = (ts) => {
   if (!ts) return ''
   return new Date(ts).toLocaleString('es-HN', { hour12: true })
 }
+
+const eventBgClass = computed(() => {
+  if (props.event.operation === 'DELETE') return 'bg-red-100/40'
+  if (props.event.operation === 'INSERT') return 'bg-green-100/40'
+  return ''
+})
 </script>
 
 <style scoped>
 .realtime-event {
   margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
 }
 
 .old-card,
diff --git a/ui/src/views/RealtimeFeedView.vue b/ui/src/views/RealtimeFeedView.vue
index 82c66a0..e7ab2ec 100644
--- a/ui/src/views/RealtimeFeedView.vue
+++ b/ui/src/views/RealtimeFeedView.vue
@@ -16,7 +16,12 @@ onMounted(() => {
       <h1>Feed en Tiempo Real</h1>
     </header>
 
-    <transition-group name="feed" tag="div" class="feed-list overflow-auto pr-2" style="max-height: calc(100vh - 160px);">
+    <transition-group
+      name="feed"
+      tag="div"
+      class="feed-list pr-2"
+      style="max-height: calc(100vh - 160px);"
+    >
       <RealtimeEventCard
         v-for="(ev, idx) in realtime.events"
         :key="ev.receivedAt + idx"
@@ -32,7 +37,7 @@ onMounted(() => {
 <style scoped>
 .realtime-feed-container {
   padding: 20px;
-  max-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
 }
 
@@ -63,4 +68,13 @@ onMounted(() => {
   opacity: 1;
   transform: translateY(0);
 }
+
+.feed-list {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none; /* Firefox */
+}
+.feed-list::-webkit-scrollbar {
+  display: none; /* Chrome, Safari */
+}
 </style>

From 6f5490ed4df27f35be95f181b8619361afe232c3 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 9 Jun 2025 21:00:40 -0600
Subject: [PATCH 4/4] live feed termiando 60%

---
 .../components/realtime/RealtimeEventCard.vue | 76 ++++++++++++++++++-
 ui/src/views/RealtimeFeedView.vue             | 10 ++-
 2 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/realtime/RealtimeEventCard.vue b/ui/src/components/realtime/RealtimeEventCard.vue
index 39d171e..be49024 100644
--- a/ui/src/components/realtime/RealtimeEventCard.vue
+++ b/ui/src/components/realtime/RealtimeEventCard.vue
@@ -1,6 +1,7 @@
 <template>
   <div :class="['realtime-event', eventBgClass]">
-    <p class="text-xs text-gray-500 mb-1">
+    <p class="event-chip mb-2" :class="operationClass">
+      <span class="event-icon">{{ operationIcon }}</span>
       {{ event.operation }} · {{ event.table }} • {{ formatTimestamp(event.receivedAt) }}
     </p>
     <template v-if="event.operation === 'UPDATE'">
@@ -10,6 +11,7 @@
           :is="component"
           v-bind="componentPropsOld"
           class="old-card opacity-70"
+          style="max-width: 350px;"
         />
         <span class="text-2xl">→</span>
         <component
@@ -17,6 +19,7 @@
           :is="component"
           v-bind="componentPropsNew"
           class="new-card"
+          style="max-width: 350px;"
         />
       </div>
     </template>
@@ -24,6 +27,7 @@
       v-else-if="component"
       :is="component"
       v-bind="componentProps"
+      style="max-width: 400px;"
     />
   </div>
 </template>
@@ -80,21 +84,85 @@ const formatTimestamp = (ts) => {
 }
 
 const eventBgClass = computed(() => {
-  if (props.event.operation === 'DELETE') return 'bg-red-100/40'
-  if (props.event.operation === 'INSERT') return 'bg-green-100/40'
+  if (props.event.operation === 'DELETE') return 'delete-card'
+  if (props.event.operation === 'INSERT') return 'insert-card'
   return ''
 })
+
+const operationIcon = computed(() => {
+  switch (props.event.operation) {
+    case 'INSERT': return '➕'
+    case 'DELETE': return '🗑️'
+    case 'UPDATE': return '✏️'
+    default: return ''
+  }
+})
+
+const operationClass = computed(() => {
+  switch (props.event.operation) {
+    case 'INSERT': return 'insert-chip'
+    case 'DELETE': return 'delete-chip'
+    case 'UPDATE': return 'update-chip'
+    default: return ''
+  }
+})
+
+
 </script>
 
 <style scoped>
 .realtime-event {
   margin-bottom: 1rem;
   padding: 0.5rem;
-  border-radius: 0.375rem;
 }
 
 .old-card,
 .new-card {
   flex: 1 1 0%;
 }
+.delete-card {
+  opacity: 0.7;
+}
+.insert-card {
+  opacity:  0.7;
+
+}
+.event-chip {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to top left, rgba(255, 255, 255, 0.3), transparent);
+}
+
+
+.event-icon {
+  margin-right: 0.4rem;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+/* Colores con efecto degradado y contraste 3D */
+.insert-chip {
+  background-color: #d1fae5;
+  color: #065f46;
+  background-image: linear-gradient(to top left, #e3f7ea, #36f190);
+}
+
+.delete-chip {
+  background-color: #fecaca;
+  color: #7f1d1d;
+  background-image: linear-gradient(to top left, #ffd3d3, #ee2424);
+}
+
+.update-chip {
+  background-color: #fef08a;
+  color: #000000;
+  background-image: linear-gradient(to top left, #8a898a, #9a10e9);
+}
+
 </style>
diff --git a/ui/src/views/RealtimeFeedView.vue b/ui/src/views/RealtimeFeedView.vue
index e7ab2ec..2392f31 100644
--- a/ui/src/views/RealtimeFeedView.vue
+++ b/ui/src/views/RealtimeFeedView.vue
@@ -19,13 +19,14 @@ onMounted(() => {
     <transition-group
       name="feed"
       tag="div"
-      class="feed-list pr-2"
-      style="max-height: calc(100vh - 160px);"
+      class="feed-list"
+      style="max-height: calc(100vh - 160px); min-width: 60vw;"
     >
       <RealtimeEventCard
         v-for="(ev, idx) in realtime.events"
         :key="ev.receivedAt + idx"
         :event="ev"
+        style="max-width: 100%; border-bottom: white 1px solid; padding: 20px 0 40px 20px ;"
       />
       <div v-if="realtime.events.length === 0" class="text-center text-gray-500 mt-4">
         No hay eventos aún.
@@ -37,7 +38,7 @@ onMounted(() => {
 <style scoped>
 .realtime-feed-container {
   padding: 20px;
-  max-width: 1500px;
+  width: 70vw;
   margin: 0 auto;
 }
 
@@ -70,8 +71,9 @@ onMounted(() => {
 }
 
 .feed-list {
+  overflow-x: hidden !important;
   overflow-y: auto;
-  overflow-x: hidden;
+  max-width: 100%;
   scrollbar-width: none; /* Firefox */
 }
 .feed-list::-webkit-scrollbar {