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>
2026-06-19 19:56:13 -03:00
parent e8a4a1b3e0
commit 6d14e64f33
8 changed files with 354 additions and 117 deletions
--- a/src/auth/AuthContext.tsx
+++ b/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>
  )
--- a/src/auth/SupabaseAuthService.ts
+++ b/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
-          const user = this.buildAuthUser(session.user)
+          // Leer company y name editado desde la tabla users (pueden diferir del user_metadata de Google)
+          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)
--- a/src/auth/types.ts
+++ b/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 {
--- a/src/components/AppHeader.tsx
+++ b/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,8 +40,10 @@ function UserAvatar({ name, avatarUrl }: { name: string; avatarUrl?: string }) {

 export function AppHeader() {
  const { user, signOut } = useAuth()
+  const [profileOpen, setProfileOpen] = useState(false)

  return (
+    <>
      <header
        style={{
          background: 'linear-gradient(135deg, #F59845 0%, #ED3E8F 100%)',
@@ -84,8 +88,16 @@ export function AppHeader() {
                <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
@@ -95,5 +107,8 @@ export function AppHeader() {
          )}
        </div>
      </header>
+
+      <ProfileSheet open={profileOpen} onOpenChange={setProfileOpen} />
+    </>
  )
 }
--- a/src/components/ProfileSheet.tsx
+++ b/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>
+  )
+}
--- a/src/features/resources/ResourceCatalogPage.tsx
+++ b/src/features/resources/ResourceCatalogPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { useNavigate, useSearch } from '@tanstack/react-router'
-import { Users2, Search, Plus, Pencil, Trash2, ArrowLeft, CornerUpLeft } from 'lucide-react'
+import { useNavigate, useSearch, Link } from '@tanstack/react-router'
+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,11 +201,16 @@ 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) => {
+                const count = processCounts[resource.id] ?? 0
+                const isExpanded = expandedResourceId === resource.id
+                return (
+                  <>
                    <TableRow key={resource.id}>
                      <TableCell>
                        <div className="flex items-center gap-2.5">
@@ -208,6 +232,20 @@ export function ResourceCatalogPage() {
                      </TableCell>
                      <TableCell className="font-mono text-[13px]">{formatCostPerHour(resource.costPerHour)}</TableCell>
                      <TableCell className="text-[13px] text-muted-foreground">{resource.creatorName}</TableCell>
+                      <TableCell>
+                        {count > 0 ? (
+                          <button
+                            type="button"
+                            onClick={() => toggleExpanded(resource.id)}
+                            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"
+                          >
+                            {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+                            {count} {count === 1 ? 'proceso' : 'procesos'}
+                          </button>
+                        ) : (
+                          <span className="text-muted-foreground text-[13px]">—</span>
+                        )}
+                      </TableCell>
                      <TableCell className="text-right">
                        {confirmingDeleteId === resource.id ? (
                          <div className="flex items-center justify-end gap-1.5">
@@ -243,7 +281,38 @@ export function ResourceCatalogPage() {
                        )}
                      </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>
+                    )}
+                  </>
+                )
+              })}
            </TableBody>
          </Table>
        )}
--- a/src/persistence/supabase/resource-repo.ts
+++ b/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
--- a/supabase/migrations/013_add_company_to_users.sql
+++ b/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;