auth con avatar

src/features/library/LibraryPage.tsx

@@ -7,8 +7,8 @@ import {
 } from 'lucide-react'
 import { useLibraryStore } from '@/store/library-store'
 import { useAuth } from '@/auth/AuthContext'
-import { supabaseProcessRepo } from '@/persistence/supabase/process-repo'
-import { formatCurrency } from '@/lib/format'
+import { supabaseProcessRepo, type ProcessWithUserNames } from '@/persistence/supabase/process-repo'
+import { formatCurrency, formatSimulationTimestamp } from '@/lib/format'
 import type { Process, ProcessGroup, Simulation } from '@/domain/types'
 import { AppHeader } from '@/components/AppHeader'
 
@@ -123,18 +123,21 @@ function KpiBadge({ process, simulation }: { process: Process; simulation: Simul
 
 // ─── Process Card ─────────────────────────────────────────────────────────────
 
-function ProcessCard({ process, simulation, showGroupChip, groupName, onDelete, currentUserId, onShared }: {
-  process: Process
+function ProcessCard({ process, simulation, showGroupChip, groupName, onDelete, currentUserId, currentUserName, onShared }: {
+  process: ProcessWithUserNames
   simulation: Simulation | null | undefined
   showGroupChip?: boolean
   groupName?: string
   onDelete?: () => void
   currentUserId: string
+  currentUserName: string
   onShared?: () => void
 }) {
   const navigate = useNavigate()
   const [menuState, setMenuState] = useState<null | 'menu' | 'confirm'>(null)
   const isOwn = process.ownerId === currentUserId
+  const updatedByMe = process.updaterName === currentUserName
+  const fullDate = formatSimulationTimestamp(process.updatedAt)
 
   // Cierra el menú al hacer click fuera de él
   useEffect(() => {
@@ -164,9 +167,11 @@ function ProcessCard({ process, simulation, showGroupChip, groupName, onDelete,
           <p className="text-[13px] font-medium truncate">{process.name || 'Sin nombre'}</p>
           <OwnershipBadge process={process} currentUserId={currentUserId} />
         </div>
-        <div className="flex items-center gap-1 mt-0.5">
+        <div className="flex items-center gap-1 mt-0.5" title={`${fullDate.date} a las ${fullDate.time}`}>
           <Clock className="h-3 w-3 text-muted-foreground" />
-          <span className="text-[11px] text-muted-foreground">Modificado {relativeDate(process.updatedAt)}</span>
+          <span className="text-[11px] text-muted-foreground">
+            Actualizado por {updatedByMe ? 'vos' : process.updaterName} · {relativeDate(process.updatedAt)}
+          </span>
         </div>
         {(process.tags.length > 0 || showGroupChip) && (
           <div className="flex flex-wrap gap-1 mt-1">
@@ -373,12 +378,14 @@ function HomeView({
   onImport,
   ownerFilter,
   currentUserId,
+  currentUserName,
   onShared,
 }: {
   onNavigateToGroup: (groupId: string | null) => void
   onImport: (groupId?: string) => void
   ownerFilter: 'all' | 'mine'
   currentUserId: string
+  currentUserName: string
   onShared: () => void
 }) {
   const { groups, processes, settings, createGroup, isLoading, error, load } = useLibraryStore()
@@ -512,6 +519,7 @@ function HomeView({
                 showGroupChip
                 groupName={group?.name}
                 currentUserId={currentUserId}
+                currentUserName={currentUserName}
                 onShared={onShared}
               />
             )
@@ -614,11 +622,12 @@ function HomeView({
 
 // ─── ProcessCardWithSim (carga simulación lazy) ───────────────────────────────
 
-function ProcessCardWithSim({ process, showGroupChip, groupName, currentUserId, onShared }: {
-  process: Process
+function ProcessCardWithSim({ process, showGroupChip, groupName, currentUserId, currentUserName, onShared }: {
+  process: ProcessWithUserNames
   showGroupChip?: boolean
   groupName?: string
   currentUserId: string
+  currentUserName: string
   onShared: () => void
 }) {
   const { getLatestSimulation, deleteProcess } = useLibraryStore()
@@ -640,6 +649,7 @@ function ProcessCardWithSim({ process, showGroupChip, groupName, currentUserId,
       groupName={groupName}
       onDelete={() => deleteProcess(process.id)}
       currentUserId={currentUserId}
+      currentUserName={currentUserName}
       onShared={onShared}
     />
   )
@@ -651,12 +661,14 @@ function GroupView({
   groupId,
   onBack,
   currentUserId,
+  currentUserName,
   ownerFilter,
   onShared,
 }: {
   groupId: string | null
   onBack: () => void
   currentUserId: string
+  currentUserName: string
   ownerFilter: 'all' | 'mine'
   onShared: () => void
 }) {
@@ -721,6 +733,7 @@ function GroupView({
             key={p.id}
             process={p}
             currentUserId={currentUserId}
+            currentUserName={currentUserName}
             onShared={onShared}
           />
         ))}
@@ -773,6 +786,7 @@ export function LibraryPage() {
   }
 
   const currentUserId = user!.id
+  const currentUserName = user!.name
   const totalGroups = groups.length
 
   return (
@@ -841,6 +855,7 @@ export function LibraryPage() {
               onImport={handleImport}
               ownerFilter={ownerFilter}
               currentUserId={currentUserId}
+              currentUserName={currentUserName}
               onShared={() => showToast('Proceso compartido con el equipo')}
             />
           ) : (
@@ -848,6 +863,7 @@ export function LibraryPage() {
               groupId={activeGroupId}
               onBack={navigateHome}
               currentUserId={currentUserId}
+              currentUserName={currentUserName}
               ownerFilter={ownerFilter}
               onShared={() => showToast('Proceso compartido con el equipo')}
             />