Sprint 4 — Etapa 7 completada. Build limpio, 521/521 tests verdes. Resumen:

Tipos: Resource.processId? eliminado (vestigial); ResourceType ya tenía los 5 valores correctos, sin cambios.

resource-repo.ts: agregado getAllWithCreator() con JOIN a users!created_by (mismo patrón que Etapa 6) y tipo ResourceWithCreator. delete() ahora valida que no haya asignaciones activas en activity_resource_assignments antes de borrar — lanza error explicativo si las hay. Verifiqué ambos contra Supabase real: el JOIN funciona (FK reconocida por PostgREST) y el conteo de guarda también.

Nuevo — src/features/resources/:

resource-display.tsx — labels, colores/íconos por tipo (Lucide: User/Briefcase/Server/Wrench/Package) y ResourceTypeAvatar compartido
ResourceFormSheet.tsx — Sheet reutilizable para crear/editar, usado tanto en el catálogo como en el panel del workspace
ResourceCatalogPage.tsx — página /recursos: búsqueda, filtro por tipo, tabla con badge de tipo, costo, "creado por", editar/eliminar con confirmación
Nuevo — src/components/ui/sheet.tsx: componente shadcn Sheet (no existía), construido sobre @radix-ui/react-dialog que ya estaba instalado — no agregué dependencias nuevas.

ResourcesPanel.tsx rediseñado: ahora solo muestra recursos usados en el proceso actual (derivado de assignedResources), con conteo de actividades por recurso. CRUD completo se mudó a /recursos; el panel solo permite "Nuevo" (catálogo global) y tiene el link "Ver catálogo completo".

Router: ruta /recursos registrada.

ActivityPanel no se tocó, como indicaba el scope.

src/features/workspace/ResourcesPanel.tsx

@@ -1,202 +1,97 @@
 import { useState } from 'react'
-import { PlusCircle, Pencil, Trash2, Check, X } from 'lucide-react'
-import { v4 as uuidv4 } from 'uuid'
-import { Label } from '@/components/ui/label'
-import { Input } from '@/components/ui/input'
+import { useNavigate } from '@tanstack/react-router'
+import { Plus, ExternalLink } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { useProcessStore } from '@/store/process-store'
 import { useAuth } from '@/auth/AuthContext'
 import { formatCurrency } from '@/lib/format'
-import type { Resource, ResourceType } from '@/domain/types'
-
-const RESOURCE_TYPE_LABELS: Record<ResourceType, string> = {
-  role: 'Rol',
-  person: 'Persona',
-  system: 'Sistema',
-  equipment: 'Equipo',
-  supply: 'Insumo',
-}
-
-const RESOURCE_TYPE_COLORS: Record<ResourceType, string> = {
-  role: 'bg-slate-100 text-slate-600',
-  person: 'bg-green-100 text-green-700',
-  system: 'bg-purple-100 text-purple-700',
-  equipment: 'bg-amber-100 text-amber-700',
-  supply: 'bg-slate-100 text-slate-700',
-}
-
-interface ResourceFormState {
-  name: string
-  type: ResourceType
-  costPerHour: string
-}
-
-const EMPTY_FORM: ResourceFormState = { name: '', type: 'role', costPerHour: '' }
+import { RESOURCE_TYPE_LABELS, ResourceTypeAvatar } from '@/features/resources/resource-display'
+import { ResourceFormSheet } from '@/features/resources/ResourceFormSheet'
+import type { Resource } from '@/domain/types'
 
 export function ResourcesPanel() {
-  const { currentProcess, resources, addResource, updateResource, deleteResource } = useProcessStore()
+  const { activities, resources, addResource } = useProcessStore()
   const { user } = useAuth()
-  const [showForm, setShowForm] = useState(false)
-  const [editingId, setEditingId] = useState<string | null>(null)
-  const [form, setForm] = useState<ResourceFormState>(EMPTY_FORM)
+  const navigate = useNavigate()
+  const [sheetOpen, setSheetOpen] = useState(false)
 
-  function startAdd() {
-    setForm(EMPTY_FORM)
-    setEditingId(null)
-    setShowForm(true)
-  }
+  const usedResourceIds = new Set(
+    activities.flatMap((a) => a.assignedResources ?? []).map((ar) => ar.resourceId)
+  )
+  const usedResources = resources.filter((r) => usedResourceIds.has(r.id))
+  const usageCount = (resourceId: string) =>
+    activities.filter((a) => (a.assignedResources ?? []).some((ar) => ar.resourceId === resourceId)).length
 
-  function startEdit(resource: Resource) {
-    setForm({ name: resource.name, type: resource.type, costPerHour: resource.costPerHour.toString() })
-    setEditingId(resource.id)
-    setShowForm(true)
-  }
-
-  function cancelForm() {
-    setShowForm(false)
-    setEditingId(null)
-    setForm(EMPTY_FORM)
-  }
-
-  async function handleSubmit() {
-    if (!form.name.trim() || !currentProcess) return
-    const costPerHour = parseFloat(form.costPerHour) || 0
-
-    if (editingId) {
-      const existing = resources.find((r) => r.id === editingId)
-      if (!existing) return
-      await updateResource({ ...existing, name: form.name.trim(), type: form.type, costPerHour }, user!.id)
-    } else {
-      const newResource: Resource = {
-        id: uuidv4(),
-        name: form.name.trim(),
-        type: form.type,
-        costPerHour,
-      }
-      await addResource(newResource, user!.id)
-    }
-    cancelForm()
+  async function handleSave(resource: Resource) {
+    await addResource(resource, user!.id)
   }
 
   return (
-    <ScrollArea className="h-full">
-      <div className="p-4 space-y-4">
-        {/* Header */}
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-xs font-medium text-slate-700">Recursos del proceso</p>
-            <p className="text-xs text-slate-400">{resources.length} definido{resources.length !== 1 ? 's' : ''}</p>
-          </div>
-          {!showForm && (
-            <Button size="sm" variant="outline" onClick={startAdd} className="h-7 text-xs gap-1">
-              <PlusCircle className="h-3.5 w-3.5" />
-              Nuevo
-            </Button>
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 pb-3 border-b border-slate-100">
+        <p className="text-xs font-medium text-slate-700">Recursos</p>
+        <Button
+          size="sm"
+          onClick={() => setSheetOpen(true)}
+          className="h-7 text-xs gap-1 text-white"
+          style={{ background: '#F59845' }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+          Nuevo
+        </Button>
+      </div>
+
+      {/* Cuerpo */}
+      <ScrollArea className="flex-1">
+        <div className="p-4 space-y-3">
+          <p className="text-xs font-medium text-slate-500">
+            Usados en este proceso <span className="text-slate-400">({usedResources.length})</span>
+          </p>
+
+          {usedResources.length === 0 ? (
+            <div className="text-center py-8">
+              <p className="text-xs text-slate-400">Ningún recurso asignado a actividades aún</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {usedResources.map((resource) => (
+                <div
+                  key={resource.id}
+                  className="flex items-center gap-2.5 p-3 rounded-lg border border-slate-100 bg-white"
+                >
+                  <ResourceTypeAvatar type={resource.type} size={32} />
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center justify-between gap-2">
+                      <p className="text-xs font-medium text-slate-800 truncate">{resource.name}</p>
+                      <p className="text-xs text-slate-500 font-mono shrink-0">{formatCurrency(resource.costPerHour)}/h</p>
+                    </div>
+                    <p className="text-[11px] text-slate-400 mt-0.5">
+                      {RESOURCE_TYPE_LABELS[resource.type]} · {usageCount(resource.id)} actividad{usageCount(resource.id) !== 1 ? 'es' : ''}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
           )}
         </div>
+      </ScrollArea>
 
-        {/* Formulario */}
-        {showForm && (
-          <div className="border border-primary/20 bg-primary/5 rounded-lg p-3 space-y-3">
-            <p className="text-xs font-semibold text-slate-700">{editingId ? 'Editar recurso' : 'Nuevo recurso'}</p>
-
-            <div className="space-y-1.5">
-              <Label className="text-xs">Nombre</Label>
-              <Input
-                autoFocus
-                placeholder="ej. Analista Senior"
-                value={form.name}
-                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-                className="h-8 text-xs"
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <Label className="text-xs">Tipo</Label>
-              <Select value={form.type} onValueChange={(v) => setForm((f) => ({ ...f, type: v as ResourceType }))}>
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {(Object.entries(RESOURCE_TYPE_LABELS) as [ResourceType, string][]).map(([value, label]) => (
-                    <SelectItem key={value} value={value} className="text-xs">{label}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="space-y-1.5">
-              <Label className="text-xs">Costo por hora</Label>
-              <Input
-                type="number"
-                min={0}
-                step={5}
-                placeholder="0.00"
-                value={form.costPerHour}
-                onChange={(e) => setForm((f) => ({ ...f, costPerHour: e.target.value }))}
-                className="h-8 text-xs font-mono"
-              />
-            </div>
-
-            <div className="flex gap-2">
-              <Button size="sm" onClick={handleSubmit} disabled={!form.name.trim()} className="flex-1 h-7 text-xs gap-1">
-                <Check className="h-3.5 w-3.5" />
-                {editingId ? 'Actualizar' : 'Crear'}
-              </Button>
-              <Button size="sm" variant="ghost" onClick={cancelForm} className="h-7 text-xs">
-                <X className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          </div>
-        )}
-
-        {/* Lista */}
-        {resources.length === 0 && !showForm ? (
-          <div className="text-center py-8">
-            <p className="text-xs text-slate-400 mb-2">Sin recursos definidos</p>
-            <p className="text-xs text-slate-300">Los recursos (roles, sistemas, equipos) se asignan a actividades para calcular su costo por hora</p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {resources.map((resource) => (
-              <div
-                key={resource.id}
-                className="flex items-center justify-between p-3 rounded-lg border border-slate-100 hover:border-slate-200 bg-white group"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2 mb-1">
-                    <p className="text-xs font-medium text-slate-800 truncate">{resource.name}</p>
-                    <span className={`shrink-0 text-[10px] font-medium px-1.5 py-0.5 rounded-full ${RESOURCE_TYPE_COLORS[resource.type]}`}>
-                      {RESOURCE_TYPE_LABELS[resource.type]}
-                    </span>
-                  </div>
-                  <p className="text-xs text-slate-500 font-mono">{formatCurrency(resource.costPerHour)}/hora</p>
-                </div>
-                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 text-slate-400 hover:text-slate-600"
-                    onClick={() => startEdit(resource)}
-                  >
-                    <Pencil className="h-3 w-3" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 text-slate-400 hover:text-destructive"
-                    onClick={() => deleteResource(resource.id, user!.id)}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
+      {/* Footer */}
+      <div className="p-4 pt-3 border-t border-slate-100 space-y-2">
+        <p className="text-[11px] text-slate-400 text-center">Recursos del catálogo global del equipo</p>
+        <Button
+          variant="outline"
+          className="w-full h-8 text-xs gap-1.5"
+          onClick={() => navigate({ to: '/recursos' })}
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+          Ver catálogo completo
+        </Button>
       </div>
-    </ScrollArea>
+
+      <ResourceFormSheet open={sheetOpen} onOpenChange={setSheetOpen} onSave={handleSave} />
+    </div>
   )
 }