fix(formacion): distinguir homonimos en calendario y seguimiento del catalogo

Bug reportado por Julio en produccion: dos fichas reales distintas de
"Pamela Guzman Velasquez" (1be0b366-... en Sala, 147289a6-... en Cocina)
parecian una sola tarjeta con 3 pendientes en "Que vence".

Verificado antes de tocar nada: tanto TrainingCalendarView.tsx (Map keyed
por g.employeeId) como training_gaps (RPC C2, ya aplicada -- select e.id as
employee_id desde employees, sin dedup ni join por nombre) y
resolveTrackingRows (filtra por e.id/at.employeeId) YA agrupaban por
employeeId real, nunca por nombre -- no encontre el punto exacto donde se
fusionaran dos ids distintos. Lo que si faltaba en los tres sitios: ninguna
tarjeta/fila mostraba nada aparte del nombre, asi que dos fichas homonimas
(reales, en distinta cuenta/local) eran indistinguibles a la vista aunque
estuvieran correctamente separadas por debajo.

Arreglo, en los dos sitios que senalo Julio:
- TrainingCalendarView.tsx: cada tarjeta/fila de "Que vence" y "Que caduca"
  (interno y externo) anade puesto + local bajo el nombre.
- coursesService.ts (TrackingRow) + CoursesPage.tsx (SeguimientoTab): cada
  fila de seguimiento anade puesto + area bajo el nombre.

Semaforo de ficha (StaffPage.tsx) revisado: no aplica -- esta scoped a UN
employee.id ya elegido al abrir esa ficha concreta, no hay lista donde
mezclar homonimos. Semaforo del cuadrante (CalendarioPage.tsx) tambien
revisado: cada chip es ya una persona asignada individualmente (assignedIds
por celda), no hay agrupacion por nombre que pudiera fusionar dos fichas.

Si el problema persiste con estos datos visibles, seria indicio de algo mas
profundo (p.ej. duplicados reales de employee_id) y merece RECON aparte --
avisar si se repite tras este cambio.

Author: Llorente29

src/components/personal/TrainingCalendarView.tsx

@@ -59,6 +59,7 @@ export default function TrainingCalendarView() {
   }, [activeAccountId])
 
   const empById = useMemo(() => new Map(staff.map(e => [e.id, e])), [staff])
+  const locationById = useMemo(() => new Map(locations.map(l => [l.id, l])), [locations])
   const positions = useMemo(() => [...new Set(staff.map(e => e.position).filter(Boolean))].sort(), [staff])
 
   function passesFilter(employeeId: string): boolean {
@@ -69,11 +70,25 @@ export default function TrainingCalendarView() {
     return true
   }
 
+  // Homónimos son reales (fichas distintas con el mismo nombre, en distinta
+  // cuenta/local) — visto en producción con dos "Pamela Guzmán Velásquez"
+  // (ids distintos, una en Sala y otra en Cocina). El Map de abajo agrupa por
+  // employeeId (nunca por nombre: dos ids nunca comparten entrada aquí), pero
+  // dos tarjetas con el mismo nombre y SIN nada más que las distinga eran
+  // indistinguibles a la vista — de ahí el aviso. Cada tarjeta lleva ahora
+  // puesto + local para que un vistazo baste.
+  function employeeDetail(employeeId: string): string {
+    const emp = empById.get(employeeId)
+    if (!emp) return ''
+    const loc = emp.locationId ? locationById.get(emp.locationId)?.name : null
+    return [emp.position, loc].filter(Boolean).join(' · ')
+  }
+
   const venceByEmployee = useMemo(() => {
-    const map = new Map<string, { name: string; items: TrainingGap[] }>()
+    const map = new Map<string, { name: string; detail: string; items: TrainingGap[] }>()
     for (const g of gaps) {
       if (!VENCE_KINDS.includes(g.gapKind) || !passesFilter(g.employeeId)) continue
-      const entry = map.get(g.employeeId) ?? { name: g.employeeName, items: [] }
+      const entry = map.get(g.employeeId) ?? { name: g.employeeName, detail: employeeDetail(g.employeeId), items: [] }
       entry.items.push(g)
       map.set(g.employeeId, entry)
     }
@@ -86,7 +101,7 @@ export default function TrainingCalendarView() {
       if (aBlocking !== bBlocking) return aBlocking ? -1 : 1
       return b[1].items.length - a[1].items.length
     })
-  }, [gaps, empById, locationFilter, positionFilter, blockingIds])
+  }, [gaps, empById, locationById, locationFilter, positionFilter, blockingIds])
 
   const caducaInternal = useMemo(
     () => gaps.filter(g => CADUCA_KINDS.includes(g.gapKind) && passesFilter(g.employeeId)),
@@ -159,12 +174,15 @@ export default function TrainingCalendarView() {
               <Card className="p-6 text-center text-sm text-text-secondary">Nadie tiene formación pendiente con este filtro.</Card>
             ) : (
               <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-                {venceByEmployee.map(([employeeId, { name, items }]) => {
+                {venceByEmployee.map(([employeeId, { name, detail, items }]) => {
                   const hasBlocking = items.some(i => blockingIds.has(i.courseId))
                   return (
                     <Card key={employeeId} className={`p-4 ${hasBlocking ? 'border-danger/40' : ''}`}>
                       <div className="flex items-center justify-between gap-2">
-                        <p className="font-semibold text-text-primary truncate">{name}</p>
+                        <div className="min-w-0">
+                          <p className="font-semibold text-text-primary truncate">{name}</p>
+                          {detail && <p className="text-xs text-text-secondary truncate">{detail}</p>}
+                        </div>
                         <Badge color={hasBlocking ? 'red' : 'gray'}>{items.length}</Badge>
                       </div>
                       <ul className="mt-2 space-y-1">
@@ -197,7 +215,9 @@ export default function TrainingCalendarView() {
                   <Card key={`int-${i}`} className="p-3 flex items-center justify-between gap-3">
                     <div className="min-w-0">
                       <p className="text-sm text-text-primary truncate">{g.employeeName} · {g.courseTitle}</p>
-                      <p className="text-xs text-text-secondary">Formación interna</p>
+                      <p className="text-xs text-text-secondary truncate">
+                        Formación interna{employeeDetail(g.employeeId) ? ` · ${employeeDetail(g.employeeId)}` : ''}
+                      </p>
                     </div>
                     <Badge color={g.gapKind === 'caducado' ? 'red' : 'yellow'}>
                       {g.gapKind === 'caducado' ? 'Caducado' : g.daysLeft != null ? `${g.daysLeft} días` : 'Caduca pronto'}
@@ -208,7 +228,9 @@ export default function TrainingCalendarView() {
                   <Card key={`ext-${i}`} className="p-3 flex items-center justify-between gap-3">
                     <div className="min-w-0">
                       <p className="text-sm text-text-primary truncate">{empById.get(formation.employeeId)?.name ?? '—'} · {formation.name}</p>
-                      <p className="text-xs text-text-secondary">Certificado externo</p>
+                      <p className="text-xs text-text-secondary truncate">
+                        Certificado externo{employeeDetail(formation.employeeId) ? ` · ${employeeDetail(formation.employeeId)}` : ''}
+                      </p>
                     </div>
                     <Badge color={status.color === 'red' ? 'red' : status.color === 'orange' ? 'yellow' : 'yellow'}>{status.label}</Badge>
                   </Card>

src/pages/CoursesPage.tsx

@@ -1521,7 +1521,14 @@ function SeguimientoTab({ course, staff }: { course: Course; staff: Employee[] }
           <tbody>
             {rows.map((r, i) => (
               <tr key={`${r.assignmentId}-${r.employeeId}-${i}`} className="border-t border-border-default">
-                <td className="px-3 py-2 text-text-primary">{r.employeeName}</td>
+                <td className="px-3 py-2 text-text-primary">
+                  {r.employeeName}
+                  {(r.employeePosition || r.employeeDepartment) && (
+                    <span className="block text-xs text-text-secondary font-normal">
+                      {[r.employeePosition, r.employeeDepartment].filter(Boolean).join(' · ')}
+                    </span>
+                  )}
+                </td>
                 <td className="px-3 py-2"><Badge color={TRACKING_BADGE[r.status].color}>{TRACKING_BADGE[r.status].label}</Badge></td>
                 <td className="px-3 py-2 text-text-secondary">{r.scorePct != null ? `${r.scorePct}%` : '—'}</td>
                 <td className="px-3 py-2 text-text-secondary">{r.signedAt ? new Date(r.signedAt).toLocaleString('es-ES') : '—'}</td>

src/services/coursesService.ts

@@ -750,6 +750,12 @@ export interface TrackingRow {
   attemptId: string | null
   employeeId: string
   employeeName: string
+  /** Puesto/área del empleado — homónimos son reales (fichas distintas con el
+   * mismo nombre, en distinta cuenta/local): sin esto, dos filas de personas
+   * diferentes son indistinguibles a la vista aunque estén correctamente
+   * separadas por employeeId. */
+  employeePosition: string | null
+  employeeDepartment: string | null
   dueAt: string | null
   overdue: boolean
   status: TrackingStatus
@@ -828,6 +834,8 @@ export function resolveTrackingRows(
         attemptId: lastAttempt?.id ?? null,
         employeeId: emp.id,
         employeeName: emp.name,
+        employeePosition: emp.position || null,
+        employeeDepartment: emp.department || null,
         dueAt: a.dueAt,
         overdue: !!a.dueAt && status !== 'firmado' && new Date(a.dueAt).getTime() < now,
         status,