feat(sprint-5/etapa-4): procesos por recurso + campo empresa en perfil

Feature A — Ver procesos asociados a un recurso:
- resource-repo.ts: getProcessCountsPerResource() (una query, N+1 evitado)
- resource-repo.ts: getProcessesForResource() (on-demand al expandir)
- ResourceCatalogPage: carga conteos en paralelo, columna "Procesos" con
  badge naranja clicable, fila expandida con links a /workspace/:id

Feature B — Campo empresa en perfil:
- 013_add_company_to_users.sql: ALTER TABLE users ADD COLUMN IF NOT EXISTS company text
- AuthUser: agrega company? opcional
- SupabaseAuthService: lee company y name de tabla users en onAuthStateChange
- AuthContext: agrega updateUser() para reflejar cambios sin recargar
- ProfileSheet.tsx: Sheet con nombre/empresa editables, email read-only
- AppHeader: muestra empresa en dropdown + item "Editar perfil"

528 tests Vitest verdes. Build limpio.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/auth/AuthContext.tsx

@@ -7,6 +7,7 @@ interface AuthContextValue {
   loading: boolean
   signIn: () => Promise<void>
   signOut: () => Promise<void>
+  updateUser: (updates: Partial<Pick<AuthUser, 'name' | 'company'>>) => void
 }
 
 const AuthContext = createContext<AuthContextValue | null>(null)
@@ -78,8 +79,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setUser(null)
   }, [])
 
+  const updateUser = useCallback((updates: Partial<Pick<AuthUser, 'name' | 'company'>>) => {
+    setUser((prev) => prev ? { ...prev, ...updates } : prev)
+  }, [])
+
   return (
-    <AuthContext.Provider value={{ user, loading, signIn, signOut }}>
+    <AuthContext.Provider value={{ user, loading, signIn, signOut, updateUser }}>
       {children}
     </AuthContext.Provider>
   )

src/auth/SupabaseAuthService.ts

@@ -60,8 +60,19 @@ export class SupabaseAuthService implements AuthService {
             if (upsertError) console.error('Error al crear usuario en DB:', upsertError)
           }
 
-          // buildAuthUser es sincrónico — sin DB query, usa metadatos de la sesión
+          // Leer company y name editado desde la tabla users (pueden diferir del user_metadata de Google)
-          const user = this.buildAuthUser(session.user)
+          const { data: userRow } = await supabase
+            .from('users')
+            .select('company, name')
+            .eq('id', session.user.id)
+            .maybeSingle()
+
+          const base = this.buildAuthUser(session.user)
+          const user: AuthUser = {
+            ...base,
+            company: (userRow?.company as string | null) ?? undefined,
+            name: (userRow?.name as string | null) ?? base.name,
+          }
           callback(user)
         } catch (err) {
           console.error('Error en onAuthStateChange:', err)

src/auth/types.ts

@@ -4,6 +4,7 @@ export interface AuthUser {
   name: string
   avatarUrl?: string
   platformRole: 'platform_admin' | 'member' | 'guest'
+  company?: string
 }
 
 export interface AuthService {

src/components/AppHeader.tsx

@@ -1,5 +1,6 @@
+import { useState } from 'react'
 import { Link } from '@tanstack/react-router'
-import { LogOut } from 'lucide-react'
+import { LogOut, UserPen } from 'lucide-react'
 import { useAuth } from '@/auth/AuthContext'
 import {
   DropdownMenu,
@@ -9,6 +10,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu'
+import { ProfileSheet } from './ProfileSheet'
 
 function initials(name: string): string {
   const parts = name.trim().split(/\s+/)
@@ -38,62 +40,75 @@ function UserAvatar({ name, avatarUrl }: { name: string; avatarUrl?: string }) {
 
 export function AppHeader() {
   const { user, signOut } = useAuth()
+  const [profileOpen, setProfileOpen] = useState(false)
 
   return (
-    <header
+    <>
-      style={{
+      <header
-        background: 'linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)',
+        style={{
-        height: 44,
+          background: 'linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)',
-        display: 'flex',
+          height: 44,
-        alignItems: 'center',
+          display: 'flex',
-        justifyContent: 'space-between',
+          alignItems: 'center',
-        paddingLeft: 20,
+          justifyContent: 'space-between',
-        paddingRight: 20,
+          paddingLeft: 20,
-        flexShrink: 0,
+          paddingRight: 20,
-      }}
+          flexShrink: 0,
-    >
+        }}
-      <Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
+      >
-        <img
+        <Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
-          src="/inquality-logo-white.png"
+          <img
-          alt="InQuality"
+            src="/inquality-logo-white.png"
-          style={{ height: 24, objectFit: 'contain', cursor: 'pointer' }}
+            alt="InQuality"
-        />
+            style={{ height: 24, objectFit: 'contain', cursor: 'pointer' }}
-      </Link>
+          />
-      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-        <Link
-          to="/"
-          style={{
-            color: 'white',
-            fontSize: 13,
-            fontWeight: 600,
-            letterSpacing: '0.04em',
-            opacity: 0.92,
-            textDecoration: 'none',
-          }}
-        >
-          InQ ROI
         </Link>
-        {user && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-          <DropdownMenu>
+          <Link
-            <DropdownMenuTrigger asChild>
+            to="/"
-              <button className="rounded-full focus:outline-none focus:ring-2 focus:ring-white/60" title={user.name}>
+            style={{
-                <UserAvatar name={user.name} avatarUrl={user.avatarUrl} />
+              color: 'white',
-              </button>
+              fontSize: 13,
-            </DropdownMenuTrigger>
+              fontWeight: 600,
-            <DropdownMenuContent align="end">
+              letterSpacing: '0.04em',
-              <DropdownMenuLabel>
+              opacity: 0.92,
-                <p className="text-sm font-medium leading-tight">{user.name}</p>
+              textDecoration: 'none',
-                <p className="text-xs text-muted-foreground leading-tight mt-0.5">{user.email}</p>
+            }}
-              </DropdownMenuLabel>
+          >
-              <DropdownMenuSeparator />
+            InQ ROI
-              <DropdownMenuItem onClick={() => signOut()} className="text-destructive focus:text-destructive">
+          </Link>
-                <LogOut className="h-3.5 w-3.5" />
+          {user && (
-                Cerrar sesión
+            <DropdownMenu>
-              </DropdownMenuItem>
+              <DropdownMenuTrigger asChild>
-            </DropdownMenuContent>
+                <button className="rounded-full focus:outline-none focus:ring-2 focus:ring-white/60" title={user.name}>
-          </DropdownMenu>
+                  <UserAvatar name={user.name} avatarUrl={user.avatarUrl} />
-        )}
+                </button>
-      </div>
+              </DropdownMenuTrigger>
-    </header>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>
+                  <p className="text-sm font-medium leading-tight">{user.name}</p>
+                  <p className="text-xs text-muted-foreground leading-tight mt-0.5">{user.email}</p>
+                  {user.company && (
+                    <p className="text-xs text-muted-foreground leading-tight mt-0.5">{user.company}</p>
+                  )}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setProfileOpen(true)}>
+                  <UserPen className="h-3.5 w-3.5" />
+                  Editar perfil
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => signOut()} className="text-destructive focus:text-destructive">
+                  <LogOut className="h-3.5 w-3.5" />
+                  Cerrar sesión
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </header>
+
+      <ProfileSheet open={profileOpen} onOpenChange={setProfileOpen} />
+    </>
   )
 }

src/components/ProfileSheet.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react'
+import { Check } from 'lucide-react'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetFooter } from '@/components/ui/sheet'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { supabase } from '@/lib/supabase'
+import { useAuth } from '@/auth/AuthContext'
+
+interface ProfileSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function ProfileSheet({ open, onOpenChange }: ProfileSheetProps) {
+  const { user, updateUser } = useAuth()
+  const [name, setName] = useState('')
+  const [company, setCompany] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (open && user) {
+      setName(user.name)
+      setCompany(user.company ?? '')
+    }
+  }, [open, user])
+
+  async function handleSave() {
+    if (!user || !name.trim()) return
+    setSaving(true)
+    try {
+      const { error } = await supabase
+        .from('users')
+        .update({ name: name.trim(), company: company.trim() || null })
+        .eq('id', user.id)
+      if (error) throw error
+      updateUser({ name: name.trim(), company: company.trim() || undefined })
+      onOpenChange(false)
+    } catch (err) {
+      console.error('Error al guardar perfil:', err)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Editar perfil</SheetTitle>
+        </SheetHeader>
+
+        <div className="space-y-4 mt-6">
+          <div className="space-y-1.5">
+            <Label className="text-xs">Nombre</Label>
+            <Input
+              autoFocus
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Tu nombre"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">Empresa</Label>
+            <Input
+              value={company}
+              onChange={(e) => setCompany(e.target.value)}
+              placeholder="InQuality"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">Email</Label>
+            <Input value={user?.email ?? ''} readOnly className="bg-muted text-muted-foreground cursor-not-allowed" />
+          </div>
+        </div>
+
+        <SheetFooter className="mt-6 flex gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+            Cancelar
+          </Button>
+          <Button onClick={handleSave} disabled={!name.trim() || saving} className="gap-1.5">
+            <Check className="h-4 w-4" />
+            Guardar
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}

src/features/resources/ResourceCatalogPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { useNavigate, useSearch } from '@tanstack/react-router'
+import { useNavigate, useSearch, Link } from '@tanstack/react-router'
-import { Users2, Search, Plus, Pencil, Trash2, ArrowLeft, CornerUpLeft } from 'lucide-react'
+import { Users2, Search, Plus, Pencil, Trash2, ArrowLeft, CornerUpLeft, ChevronDown, ChevronRight } from 'lucide-react'
 import { AppHeader } from '@/components/AppHeader'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
@@ -24,6 +24,9 @@ export function ResourceCatalogPage() {
   const fromProcess = (search_ as { fromProcess?: string }).fromProcess
   const [fromProcessName, setFromProcessName] = useState<string | null>(null)
   const [resources, setResources] = useState<ResourceWithCreator[]>([])
+  const [processCounts, setProcessCounts] = useState<Record<string, number>>({})
+  const [expandedResourceId, setExpandedResourceId] = useState<string | null>(null)
+  const [expandedProcesses, setExpandedProcesses] = useState<Record<string, { id: string; name: string }[]>>({})
   const [isLoading, setIsLoading] = useState(true)
   const [search, setSearch] = useState('')
   const [typeFilter, setTypeFilter] = useState<ResourceType | 'all'>('all')
@@ -44,8 +47,12 @@ export function ResourceCatalogPage() {
   async function load() {
     setIsLoading(true)
     try {
-      const data = await supabaseResourceRepo.getAllWithCreator()
+      const [data, counts] = await Promise.all([
+        supabaseResourceRepo.getAllWithCreator(),
+        supabaseResourceRepo.getProcessCountsPerResource(),
+      ])
       setResources(data)
+      setProcessCounts(counts)
     } finally {
       setIsLoading(false)
     }
@@ -55,6 +62,18 @@ export function ResourceCatalogPage() {
     load()
   }, [])
 
+  async function toggleExpanded(resourceId: string) {
+    if (expandedResourceId === resourceId) {
+      setExpandedResourceId(null)
+      return
+    }
+    setExpandedResourceId(resourceId)
+    if (!expandedProcesses[resourceId]) {
+      const processes = await supabaseResourceRepo.getProcessesForResource(resourceId)
+      setExpandedProcesses((prev) => ({ ...prev, [resourceId]: processes }))
+    }
+  }
+
   const filtered = resources.filter((r) => {
     const matchesName = r.name.toLowerCase().includes(search.toLowerCase())
     const matchesType = typeFilter === 'all' || r.type === typeFilter
@@ -182,68 +201,118 @@ export function ResourceCatalogPage() {
                 <TableHead>Tipo</TableHead>
                 <TableHead>Costo/h</TableHead>
                 <TableHead>Creado por</TableHead>
+                <TableHead>Procesos</TableHead>
                 <TableHead className="text-right">Acciones</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {filtered.map((resource) => (
+              {filtered.map((resource) => {
-                <TableRow key={resource.id}>
+                const count = processCounts[resource.id] ?? 0
-                  <TableCell>
+                const isExpanded = expandedResourceId === resource.id
-                    <div className="flex items-center gap-2.5">
+                return (
-                      <ResourceTypeAvatar type={resource.type} size={28} />
+                  <>
-                      <span className="text-[13px] font-medium">{resource.name}</span>
+                    <TableRow key={resource.id}>
-                    </div>
+                      <TableCell>
-                  </TableCell>
+                        <div className="flex items-center gap-2.5">
-                  <TableCell>
+                          <ResourceTypeAvatar type={resource.type} size={28} />
-                    <Badge
+                          <span className="text-[13px] font-medium">{resource.name}</span>
-                      variant="outline"
+                        </div>
-                      style={{
+                      </TableCell>
-                        background: RESOURCE_TYPE_STYLES[resource.type].bg,
+                      <TableCell>
-                        color: RESOURCE_TYPE_STYLES[resource.type].fg,
+                        <Badge
-                        borderColor: 'transparent',
+                          variant="outline"
-                      }}
+                          style={{
-                    >
+                            background: RESOURCE_TYPE_STYLES[resource.type].bg,
-                      {RESOURCE_TYPE_LABELS[resource.type]}
+                            color: RESOURCE_TYPE_STYLES[resource.type].fg,
-                    </Badge>
+                            borderColor: 'transparent',
-                  </TableCell>
+                          }}
-                  <TableCell className="font-mono text-[13px]">{formatCostPerHour(resource.costPerHour)}</TableCell>
+                        >
-                  <TableCell className="text-[13px] text-muted-foreground">{resource.creatorName}</TableCell>
+                          {RESOURCE_TYPE_LABELS[resource.type]}
-                  <TableCell className="text-right">
+                        </Badge>
-                    {confirmingDeleteId === resource.id ? (
+                      </TableCell>
-                      <div className="flex items-center justify-end gap-1.5">
+                      <TableCell className="font-mono text-[13px]">{formatCostPerHour(resource.costPerHour)}</TableCell>
-                        <span className="text-[11px] text-muted-foreground">¿Eliminar?</span>
+                      <TableCell className="text-[13px] text-muted-foreground">{resource.creatorName}</TableCell>
-                        <Button size="sm" variant="destructive" className="h-7 text-[11px]" onClick={() => handleDelete(resource.id)}>
+                      <TableCell>
-                          Sí
+                        {count > 0 ? (
-                        </Button>
+                          <button
-                        <Button size="sm" variant="outline" className="h-7 text-[11px]" onClick={() => setConfirmingDeleteId(null)}>
+                            type="button"
-                          No
+                            onClick={() => toggleExpanded(resource.id)}
-                        </Button>
+                            className="inline-flex items-center gap-1 text-xs font-medium text-orange-600 bg-orange-50 hover:bg-orange-100 rounded-md px-2 py-0.5 transition-colors"
-                      </div>
+                          >
-                    ) : (
+                            {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
-                      <div className="flex items-center justify-end gap-1">
+                            {count} {count === 1 ? 'proceso' : 'procesos'}
-                        {fromProcess && (
+                          </button>
-                          <Tooltip>
+                        ) : (
-                            <TooltipTrigger asChild>
+                          <span className="text-muted-foreground text-[13px]">—</span>
-                              <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground" onClick={backToProcess}>
-                                <CornerUpLeft className="h-3.5 w-3.5" />
-                              </Button>
-                            </TooltipTrigger>
-                            <TooltipContent side="top" className="max-w-48 text-xs">
-                              Volver al workspace para asignar este recurso a una actividad
-                            </TooltipContent>
-                          </Tooltip>
                         )}
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground" onClick={() => startEdit(resource)}>
+                      </TableCell>
-                          <Pencil className="h-3.5 w-3.5" />
+                      <TableCell className="text-right">
-                        </Button>
+                        {confirmingDeleteId === resource.id ? (
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-destructive" onClick={() => setConfirmingDeleteId(resource.id)}>
+                          <div className="flex items-center justify-end gap-1.5">
-                          <Trash2 className="h-3.5 w-3.5" />
+                            <span className="text-[11px] text-muted-foreground">¿Eliminar?</span>
-                        </Button>
+                            <Button size="sm" variant="destructive" className="h-7 text-[11px]" onClick={() => handleDelete(resource.id)}>
-                      </div>
+                              Sí
+                            </Button>
+                            <Button size="sm" variant="outline" className="h-7 text-[11px]" onClick={() => setConfirmingDeleteId(null)}>
+                              No
+                            </Button>
+                          </div>
+                        ) : (
+                          <div className="flex items-center justify-end gap-1">
+                            {fromProcess && (
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground" onClick={backToProcess}>
+                                    <CornerUpLeft className="h-3.5 w-3.5" />
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent side="top" className="max-w-48 text-xs">
+                                  Volver al workspace para asignar este recurso a una actividad
+                                </TooltipContent>
+                              </Tooltip>
+                            )}
+                            <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground" onClick={() => startEdit(resource)}>
+                              <Pencil className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-destructive" onClick={() => setConfirmingDeleteId(resource.id)}>
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
+                        )}
+                      </TableCell>
+                    </TableRow>
+
+                    {isExpanded && (
+                      <TableRow key={`${resource.id}-processes`} className="bg-orange-50/40 hover:bg-orange-50/40">
+                        <TableCell colSpan={6} className="px-4 pb-3 pt-1">
+                          <p className="text-[10px] font-semibold text-slate-400 uppercase tracking-wide mb-1.5">
+                            Procesos que usan este recurso
+                          </p>
+                          {expandedProcesses[resource.id] ? (
+                            <div className="flex flex-wrap gap-2">
+                              {expandedProcesses[resource.id].map((p) => (
+                                <Link
+                                  key={p.id}
+                                  to="/workspace/$processId"
+                                  params={{ processId: p.id }}
+                                  className="text-xs text-blue-600 hover:underline"
+                                >
+                                  {p.name}
+                                </Link>
+                              ))}
+                              {expandedProcesses[resource.id].length === 0 && (
+                                <span className="text-xs text-muted-foreground">Sin procesos encontrados</span>
+                              )}
+                            </div>
+                          ) : (
+                            <span className="text-xs text-muted-foreground">Cargando...</span>
+                          )}
+                        </TableCell>
+                      </TableRow>
                     )}
-                  </TableCell>
+                  </>
-                </TableRow>
+                )
-              ))}
+              })}
             </TableBody>
           </Table>
         )}

src/persistence/supabase/resource-repo.ts

@@ -56,6 +56,48 @@ export const supabaseResourceRepo = {
     return (data ?? []).map((row) => fromRowWithCreator(row as Record<string, unknown>))
   },
 
+  // Devuelve un map resourceId → cantidad de procesos DISTINTOS que usan ese recurso.
+  // Una sola query para evitar N+1; agregación client-side con Set.
+  async getProcessCountsPerResource(): Promise<Record<string, number>> {
+    const { data, error } = await supabase
+      .from('activity_resource_assignments')
+      .select('resource_id, activity:activities!inner(process_id)')
+    if (error) throw error
+    if (!data) return {}
+
+    const processSets: Record<string, Set<string>> = {}
+    for (const row of data) {
+      const resourceId = row.resource_id as string
+      const processId = (row.activity as unknown as { process_id: string }).process_id
+      if (!processSets[resourceId]) processSets[resourceId] = new Set()
+      processSets[resourceId].add(processId)
+    }
+    return Object.fromEntries(
+      Object.entries(processSets).map(([k, v]) => [k, v.size])
+    )
+  },
+
+  // Devuelve los procesos distintos que usan el recurso (llamada on-demand al expandir fila).
+  async getProcessesForResource(resourceId: string): Promise<{ id: string; name: string }[]> {
+    const { data, error } = await supabase
+      .from('activity_resource_assignments')
+      .select('activity:activities!inner(process:processes!inner(id, name))')
+      .eq('resource_id', resourceId)
+    if (error) throw error
+    if (!data) return []
+
+    const seen = new Set<string>()
+    const result: { id: string; name: string }[] = []
+    for (const row of data) {
+      const process = (row.activity as unknown as { process: { id: string; name: string } }).process
+      if (!seen.has(process.id)) {
+        seen.add(process.id)
+        result.push({ id: process.id, name: process.name })
+      }
+    }
+    return result
+  },
+
   // No elimina si el recurso tiene asignaciones activas en activity_resource_assignments
   async delete(resourceId: string): Promise<void> {
     const { count, error: countError } = await supabase

supabase/migrations/013_add_company_to_users.sql

@@ -0,0 +1,3 @@
+-- Agrega campo empresa al perfil de usuario (Sprint 5 Etapa 4).
+-- Nullable sin default: no rompe filas existentes.
+ALTER TABLE users ADD COLUMN IF NOT EXISTS company text;