Improve realtime feed

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>