roadmap-kit 1.0.0

package/dashboard/src/components/SharedResources.jsx

@@ -0,0 +1,239 @@
+import React, { useState } from 'react';
+import { Package, Code, Database, Copy, Check, Layers, FileCode, ChevronDown, AlertTriangle } from 'lucide-react';
+
+export default function SharedResources({ resources = {} }) {
+  const [copiedItem, setCopiedItem] = useState(null);
+  const [expanded, setExpanded] = useState({ ui: true, utils: true, db: true });
+
+  const copyToClipboard = (text, id) => {
+    navigator.clipboard.writeText(text);
+    setCopiedItem(id);
+    setTimeout(() => setCopiedItem(null), 2000);
+  };
+
+  const { ui_components = [], utilities = [], database_tables = [] } = resources;
+  const total = ui_components.length + utilities.length + database_tables.length;
+
+  if (total === 0) {
+    return (
+      <div className="card-dark rounded-2xl p-12 text-center">
+        <Package className="w-12 h-12 mx-auto mb-4 text-gray-600" />
+        <h3 className="text-lg font-semibold text-gray-400 mb-2">Sin recursos compartidos</h3>
+        <p className="text-gray-500 text-sm">Agrega componentes en roadmap.json</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Summary */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 stagger">
+        <StatCard icon={Layers} label="Componentes UI" value={ui_components.length} gradient="from-blue-500 to-cyan-500" />
+        <StatCard icon={Code} label="Utilidades" value={utilities.length} gradient="from-cyan-500 to-teal-500" />
+        <StatCard icon={Database} label="Tablas DB" value={database_tables.length} gradient="from-teal-500 to-emerald-500" />
+      </div>
+
+      {/* UI Components */}
+      {ui_components.length > 0 && (
+        <Section
+          title="Componentes UI"
+          icon={Layers}
+          color="blue"
+          isOpen={expanded.ui}
+          onToggle={() => setExpanded(p => ({ ...p, ui: !p.ui }))}
+        >
+          <div className="space-y-2">
+            {ui_components.map((c, i) => (
+              <ResourceItem
+                key={i}
+                path={c.path}
+                description={c.description}
+                usage={c.usage}
+                color="blue"
+                copyId={`ui-${i}`}
+                copiedItem={copiedItem}
+                onCopy={copyToClipboard}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Utilities */}
+      {utilities.length > 0 && (
+        <Section
+          title="Utilidades"
+          icon={Code}
+          color="cyan"
+          isOpen={expanded.utils}
+          onToggle={() => setExpanded(p => ({ ...p, utils: !p.utils }))}
+        >
+          <div className="space-y-2">
+            {utilities.map((u, i) => (
+              <ResourceItem
+                key={i}
+                path={u.path}
+                description={u.description}
+                usage={u.usage}
+                exports={u.exports}
+                warning={u.warning}
+                color="cyan"
+                copyId={`util-${i}`}
+                copiedItem={copiedItem}
+                onCopy={copyToClipboard}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Database */}
+      {database_tables.length > 0 && (
+        <Section
+          title="Tablas de Base de Datos"
+          icon={Database}
+          color="emerald"
+          isOpen={expanded.db}
+          onToggle={() => setExpanded(p => ({ ...p, db: !p.db }))}
+        >
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {database_tables.map((t, i) => (
+              <TableCard
+                key={i}
+                table={t}
+                copyId={`table-${i}`}
+                copiedItem={copiedItem}
+                onCopy={copyToClipboard}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+    </div>
+  );
+}
+
+function StatCard({ icon: Icon, label, value, gradient }) {
+  return (
+    <div className="card-dark rounded-2xl p-5 hover:scale-[1.02] transition-all">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
+          <p className={`text-3xl font-bold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>{value}</p>
+        </div>
+        <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${gradient} flex items-center justify-center opacity-80`}>
+          <Icon className="w-6 h-6 text-white" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, icon: Icon, color, isOpen, onToggle, children }) {
+  const colors = {
+    blue: 'text-blue-400',
+    cyan: 'text-cyan-400',
+    emerald: 'text-emerald-400',
+  };
+
+  return (
+    <div className="card-dark rounded-2xl overflow-hidden">
+      <button
+        onClick={onToggle}
+        className="w-full px-6 py-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <Icon className={`w-5 h-5 ${colors[color]}`} />
+          <h3 className={`text-lg font-semibold ${colors[color]}`}>{title}</h3>
+        </div>
+        <ChevronDown className={`w-5 h-5 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+      {isOpen && <div className="px-6 pb-6 pt-2 border-t border-white/5">{children}</div>}
+    </div>
+  );
+}
+
+function ResourceItem({ path, description, usage, exports, warning, color, copyId, copiedItem, onCopy }) {
+  const [open, setOpen] = useState(false);
+  const colors = {
+    blue: 'text-blue-400 border-blue-500/20 bg-blue-500/5',
+    cyan: 'text-cyan-400 border-cyan-500/20 bg-cyan-500/5',
+  };
+
+  return (
+    <div className={`rounded-xl border ${colors[color]} overflow-hidden`}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full px-4 py-3 flex items-center gap-3 hover:bg-white/[0.02] transition-colors text-left"
+      >
+        <FileCode className={`w-4 h-4 flex-shrink-0 ${colors[color].split(' ')[0]}`} />
+        <div className="flex-1 min-w-0">
+          <code className={`text-sm ${colors[color].split(' ')[0]}`}>{path}</code>
+          <p className="text-xs text-gray-500 truncate mt-0.5">{description}</p>
+        </div>
+        <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div className="px-4 pb-4 pt-2 border-t border-white/5 space-y-3 animate-fade-in">
+          {exports?.length > 0 && (
+            <div>
+              <span className="text-[10px] text-gray-500 uppercase tracking-wider">Exports:</span>
+              <div className="flex flex-wrap gap-1.5 mt-1.5">
+                {exports.map((e, i) => (
+                  <span key={i} className="px-2 py-1 text-xs bg-white/5 text-blue-400 rounded border border-blue-500/20">{e}</span>
+                ))}
+              </div>
+            </div>
+          )}
+          {usage && (
+            <div>
+              <div className="flex items-center justify-between mb-1.5">
+                <span className="text-[10px] text-gray-500 uppercase tracking-wider">Uso:</span>
+                <button onClick={() => onCopy(usage, copyId)} className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1">
+                  {copiedItem === copyId ? <><Check className="w-3 h-3" /> Copiado</> : <><Copy className="w-3 h-3" /> Copiar</>}
+                </button>
+              </div>
+              <div className="bg-white/5 rounded-lg p-3 border border-white/5">
+                <code className="text-sm text-blue-400">{usage}</code>
+              </div>
+            </div>
+          )}
+          {warning && (
+            <div className="flex items-start gap-2 bg-orange-500/10 border border-orange-500/20 rounded-lg p-3">
+              <AlertTriangle className="w-4 h-4 text-orange-400 flex-shrink-0 mt-0.5" />
+              <span className="text-xs text-orange-300">{warning}</span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TableCard({ table, copyId, copiedItem, onCopy }) {
+  return (
+    <div className="bg-emerald-500/5 border border-emerald-500/20 rounded-xl p-4 hover:border-emerald-500/40 transition-all">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Database className="w-4 h-4 text-emerald-400" />
+          <code className="text-base font-semibold text-emerald-400">{table.name}</code>
+        </div>
+        <button onClick={() => onCopy(table.name, copyId)} className="p-1.5 hover:bg-white/5 rounded-lg transition-colors">
+          {copiedItem === copyId ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5 text-gray-500" />}
+        </button>
+      </div>
+      <p className="text-sm text-gray-400 mb-3">{table.description}</p>
+      {table.fields?.length > 0 && (
+        <div>
+          <span className="text-[10px] text-gray-500 uppercase tracking-wider">Campos:</span>
+          <div className="flex flex-wrap gap-1 mt-1.5">
+            {table.fields.map((f, i) => (
+              <span key={i} className="text-xs bg-white/5 px-2 py-1 rounded text-gray-300 border border-emerald-500/10">{f}</span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/TaskList.jsx

@@ -0,0 +1,273 @@
+import React, { useState } from 'react';
+import {
+  CheckCircle2, Clock, Circle, GitCommit, ExternalLink,
+  Copy, Check, ChevronDown, FileCode, Recycle, Bot, AlertTriangle
+} from 'lucide-react';
+
+export default function TaskList({ tasks = [], featureId = '', onUpdateStatus }) {
+  const [copiedItem, setCopiedItem] = useState(null);
+  const [expandedTask, setExpandedTask] = useState(null);
+
+  const copyToClipboard = (text, id) => {
+    navigator.clipboard.writeText(text);
+    setCopiedItem(id);
+    setTimeout(() => setCopiedItem(null), 2000);
+  };
+
+  const statusConfig = {
+    completed: {
+      icon: CheckCircle2,
+      label: 'Completado',
+      color: 'text-emerald-400',
+      bg: 'bg-emerald-500/10',
+      border: 'border-emerald-500/30',
+      glow: 'shadow-emerald-500/20'
+    },
+    in_progress: {
+      icon: Clock,
+      label: 'En Progreso',
+      color: 'text-amber-400',
+      bg: 'bg-amber-500/10',
+      border: 'border-amber-500/30',
+      glow: 'shadow-amber-500/20'
+    },
+    pending: {
+      icon: Circle,
+      label: 'Pendiente',
+      color: 'text-gray-400',
+      bg: 'bg-gray-500/10',
+      border: 'border-gray-500/30',
+      glow: ''
+    }
+  };
+
+  const priorityConfig = {
+    high: { label: 'Alta', color: 'text-rose-400', bg: 'bg-rose-500/10', border: 'border-rose-500/30' },
+    medium: { label: 'Media', color: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/30' },
+    low: { label: 'Baja', color: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/30' }
+  };
+
+  const cycleStatus = (current) => {
+    const order = ['pending', 'in_progress', 'completed'];
+    return order[(order.indexOf(current) + 1) % order.length];
+  };
+
+  if (!tasks?.length) {
+    return (
+      <div className="py-8 text-center">
+        <Circle className="w-10 h-10 mx-auto mb-3 text-gray-600" />
+        <p className="text-gray-500 text-sm">No hay tareas definidas</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {tasks.map((task) => {
+        const status = statusConfig[task.status] || statusConfig.pending;
+        const priority = priorityConfig[task.priority] || priorityConfig.medium;
+        const StatusIcon = status.icon;
+        const isExpanded = expandedTask === task.id;
+
+        return (
+          <div key={task.id} className={`rounded-xl border ${status.border} ${status.bg} transition-all hover:border-blue-500/30`}>
+            {/* Header */}
+            <div className="flex items-center gap-3 p-4">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (onUpdateStatus) {
+                    onUpdateStatus(featureId, task.id, cycleStatus(task.status));
+                  }
+                }}
+                className={`flex-shrink-0 w-8 h-8 rounded-lg ${status.bg} ${status.border} border flex items-center justify-center transition-all hover:scale-110 shadow-lg ${status.glow}`}
+                title={`Click para cambiar estado (Actual: ${status.label})`}
+              >
+                <StatusIcon className={`w-4 h-4 ${status.color}`} />
+              </button>
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <h4 className={`font-medium ${task.status === 'completed' ? 'text-gray-500 line-through' : 'text-white'}`}>
+                    {task.name}
+                  </h4>
+                  <span className={`px-2 py-0.5 text-[10px] font-medium rounded-full border ${priority.bg} ${priority.border} ${priority.color}`}>
+                    {priority.label}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-500 line-clamp-1 mt-0.5">{task.description}</p>
+              </div>
+
+              {/* Quick stats */}
+              <div className="hidden sm:flex items-center gap-3 text-xs text-gray-500">
+                {task.metrics?.lines_added > 0 && (
+                  <span>
+                    <span className="text-emerald-400">+{task.metrics.lines_added}</span>
+                    <span className="mx-0.5">/</span>
+                    <span className="text-rose-400">-{task.metrics.lines_removed}</span>
+                  </span>
+                )}
+                {task.technical_debt?.length > 0 && (
+                  <span className="flex items-center gap-1 text-orange-400">
+                    <AlertTriangle className="w-3 h-3" />
+                    {task.technical_debt.length}
+                  </span>
+                )}
+              </div>
+
+              <button
+                onClick={() => setExpandedTask(isExpanded ? null : task.id)}
+                className={`p-2 rounded-lg hover:bg-white/5 transition-all ${isExpanded ? 'bg-white/5' : ''}`}
+              >
+                <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
+              </button>
+            </div>
+
+            {/* Expanded */}
+            {isExpanded && (
+              <div className="px-4 pb-4 pt-2 border-t border-white/5 space-y-4 animate-fade-in">
+                <p className="text-sm text-gray-300">{task.description}</p>
+
+                {/* Metrics */}
+                {task.metrics?.lines_added > 0 && (
+                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                    <MetricCard label="Lineas" value={<><span className="text-emerald-400">+{task.metrics.lines_added}</span> / <span className="text-rose-400">-{task.metrics.lines_removed}</span></>} />
+                    <MetricCard label="Archivos" value={task.metrics.files_created + task.metrics.files_modified} color="text-blue-400" />
+                    <MetricCard label="Complejidad" value={`${task.metrics.complexity_score}/10`} color="text-amber-400" />
+                    <MetricCard label="Commits" value={task.git?.commits?.length || 0} color="text-cyan-400" />
+                  </div>
+                )}
+
+                {/* Files */}
+                {task.affected_files?.length > 0 && (
+                  <div>
+                    <h5 className="flex items-center gap-2 text-xs text-gray-500 uppercase tracking-wider mb-2">
+                      <FileCode className="w-3.5 h-3.5" /> Archivos
+                    </h5>
+                    <div className="flex flex-wrap gap-2">
+                      {task.affected_files.map((file, idx) => (
+                        <button
+                          key={idx}
+                          onClick={() => copyToClipboard(file, `file-${task.id}-${idx}`)}
+                          className="group flex items-center gap-2 text-xs bg-white/5 px-3 py-1.5 rounded-lg border border-white/10 hover:border-blue-500/30 transition-all"
+                        >
+                          <code className="text-blue-400">{file}</code>
+                          {copiedItem === `file-${task.id}-${idx}` ? (
+                            <Check className="w-3 h-3 text-emerald-400" />
+                          ) : (
+                            <Copy className="w-3 h-3 text-gray-500 group-hover:text-blue-400" />
+                          )}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Resources */}
+                {task.reused_resources?.length > 0 && (
+                  <div>
+                    <h5 className="flex items-center gap-2 text-xs text-gray-500 uppercase tracking-wider mb-2">
+                      <Recycle className="w-3.5 h-3.5" /> Recursos
+                    </h5>
+                    <div className="flex flex-wrap gap-2">
+                      {task.reused_resources.map((r, idx) => (
+                        <span key={idx} className="px-3 py-1.5 text-xs bg-cyan-500/10 text-cyan-400 rounded-lg border border-cyan-500/20">
+                          {r}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* AI Notes */}
+                {task.ai_notes?.trim() && (
+                  <div className="bg-blue-500/5 border border-blue-500/20 rounded-xl p-4">
+                    <h5 className="flex items-center gap-2 text-xs text-blue-400 uppercase tracking-wider mb-2">
+                      <Bot className="w-3.5 h-3.5" /> Notas IA
+                    </h5>
+                    <p className="text-sm text-gray-300">{task.ai_notes}</p>
+                  </div>
+                )}
+
+                {/* Debt */}
+                {task.technical_debt?.length > 0 && (
+                  <div className="bg-orange-500/5 border border-orange-500/20 rounded-xl p-4">
+                    <h5 className="flex items-center gap-2 text-xs text-orange-400 uppercase tracking-wider mb-3">
+                      <AlertTriangle className="w-3.5 h-3.5" /> Deuda ({task.technical_debt.length})
+                    </h5>
+                    <div className="space-y-2">
+                      {task.technical_debt.map((debt, idx) => (
+                        <div key={idx} className="flex items-start gap-3">
+                          <span className={`flex-shrink-0 px-2 py-0.5 text-[10px] font-bold rounded uppercase ${
+                            debt.severity === 'high' ? 'bg-rose-500 text-white' :
+                            debt.severity === 'medium' ? 'bg-amber-500 text-black' :
+                            'bg-blue-500 text-white'
+                          }`}>
+                            {debt.severity}
+                          </span>
+                          <div>
+                            <p className="text-sm text-gray-300">{debt.description}</p>
+                            <p className="text-xs text-gray-500 mt-1">{debt.estimated_effort}</p>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Git */}
+                {task.git?.last_commit && (
+                  <div className="flex items-center gap-4 pt-3 border-t border-white/5">
+                    <div className="flex items-center gap-2 text-xs text-gray-500">
+                      <GitCommit className="w-3.5 h-3.5" />
+                      <code className="text-blue-400">{task.git.last_commit.substring(0, 7)}</code>
+                    </div>
+                    {task.git.pr_url && (
+                      <a href={task.git.pr_url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1.5 text-xs text-cyan-400 hover:text-cyan-300">
+                        PR #{task.git.pr_number}
+                        <ExternalLink className="w-3 h-3" />
+                      </a>
+                    )}
+                  </div>
+                )}
+
+                {/* Status buttons */}
+                <div className="flex items-center gap-2 pt-3 border-t border-white/5">
+                  <span className="text-xs text-gray-500">Estado:</span>
+                  <div className="flex gap-1">
+                    {['pending', 'in_progress', 'completed'].map((s) => {
+                      const cfg = statusConfig[s];
+                      const Icon = cfg.icon;
+                      const active = task.status === s;
+                      return (
+                        <button
+                          key={s}
+                          onClick={() => onUpdateStatus?.(featureId, task.id, s)}
+                          className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition-all ${
+                            active ? `${cfg.bg} ${cfg.border} ${cfg.color}` : 'border-white/10 text-gray-500 hover:border-white/20'
+                          }`}
+                        >
+                          <Icon className="w-3 h-3" />
+                          {cfg.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function MetricCard({ label, value, color = 'text-white' }) {
+  return (
+    <div className="bg-white/5 rounded-lg p-3 border border-white/5">
+      <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1">{label}</div>
+      <div className={`text-lg font-bold ${color}`}>{value}</div>
+    </div>
+  );
+}

package/dashboard/src/components/TechnicalDebt.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { AlertTriangle, Clock, TrendingDown, Zap } from 'lucide-react';
+
+export default function TechnicalDebt({ roadmap = {} }) {
+  const allDebts = [];
+
+  if (roadmap.features) {
+    roadmap.features.forEach(feature => {
+      feature.tasks?.forEach(task => {
+        task.technical_debt?.forEach(debt => {
+          allDebts.push({
+            ...debt,
+            taskName: task.name,
+            featureName: feature.name,
+            taskId: task.id
+          });
+        });
+      });
+    });
+  }
+
+  const grouped = {
+    high: allDebts.filter(d => d.severity === 'high'),
+    medium: allDebts.filter(d => d.severity === 'medium'),
+    low: allDebts.filter(d => d.severity === 'low')
+  };
+
+  if (allDebts.length === 0) {
+    return (
+      <div className="card-dark rounded-2xl p-12 text-center">
+        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-500/10 flex items-center justify-center">
+          <TrendingDown className="w-8 h-8 text-emerald-400" />
+        </div>
+        <h3 className="text-lg font-semibold text-emerald-400 mb-2">Sin deuda tecnica</h3>
+        <p className="text-gray-500 text-sm">No hay deuda tecnica registrada</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 stagger">
+        <StatCard label="Total" value={allDebts.length} gradient="from-blue-500 to-cyan-500" icon={AlertTriangle} />
+        <StatCard label="Alta" value={grouped.high.length} gradient="from-rose-500 to-orange-500" icon={Zap} />
+        <StatCard label="Media" value={grouped.medium.length} gradient="from-amber-500 to-yellow-500" icon={AlertTriangle} />
+        <StatCard label="Baja" value={grouped.low.length} gradient="from-cyan-500 to-teal-500" icon={Clock} />
+      </div>
+
+      {/* Distribution Bar */}
+      <div className="card-dark rounded-2xl p-6">
+        <h3 className="text-sm text-gray-500 uppercase tracking-wider mb-4">Distribucion</h3>
+        <div className="flex h-4 rounded-full overflow-hidden bg-white/5">
+          {grouped.high.length > 0 && (
+            <div
+              className="bg-gradient-to-r from-rose-500 to-orange-500 transition-all"
+              style={{ width: `${(grouped.high.length / allDebts.length) * 100}%` }}
+            />
+          )}
+          {grouped.medium.length > 0 && (
+            <div
+              className="bg-gradient-to-r from-amber-500 to-yellow-500 transition-all"
+              style={{ width: `${(grouped.medium.length / allDebts.length) * 100}%` }}
+            />
+          )}
+          {grouped.low.length > 0 && (
+            <div
+              className="bg-gradient-to-r from-cyan-500 to-teal-500 transition-all"
+              style={{ width: `${(grouped.low.length / allDebts.length) * 100}%` }}
+            />
+          )}
+        </div>
+        <div className="flex justify-between mt-3 text-xs">
+          <span className="text-rose-400">{Math.round((grouped.high.length / allDebts.length) * 100)}% Alta</span>
+          <span className="text-amber-400">{Math.round((grouped.medium.length / allDebts.length) * 100)}% Media</span>
+          <span className="text-cyan-400">{Math.round((grouped.low.length / allDebts.length) * 100)}% Baja</span>
+        </div>
+      </div>
+
+      {/* Debt by Severity */}
+      {['high', 'medium', 'low'].map(sev => (
+        grouped[sev].length > 0 && (
+          <DebtSection key={sev} severity={sev} debts={grouped[sev]} />
+        )
+      ))}
+    </div>
+  );
+}
+
+function StatCard({ label, value, gradient, icon: Icon }) {
+  return (
+    <div className="card-dark rounded-2xl p-5 hover:scale-[1.02] transition-all">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
+          <p className={`text-3xl font-bold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>{value}</p>
+        </div>
+        <Icon className={`w-8 h-8 opacity-50 bg-gradient-to-r ${gradient} bg-clip-text`} style={{ color: 'currentColor' }} />
+      </div>
+    </div>
+  );
+}
+
+function DebtSection({ severity, debts }) {
+  const config = {
+    high: {
+      title: 'Severidad Alta',
+      textColor: 'text-rose-400',
+      bgColor: 'bg-rose-500/5',
+      borderColor: 'border-rose-500/20',
+      badgeBg: 'bg-gradient-to-r from-rose-500 to-orange-500',
+    },
+    medium: {
+      title: 'Severidad Media',
+      textColor: 'text-amber-400',
+      bgColor: 'bg-amber-500/5',
+      borderColor: 'border-amber-500/20',
+      badgeBg: 'bg-gradient-to-r from-amber-500 to-yellow-500',
+    },
+    low: {
+      title: 'Severidad Baja',
+      textColor: 'text-cyan-400',
+      bgColor: 'bg-cyan-500/5',
+      borderColor: 'border-cyan-500/20',
+      badgeBg: 'bg-gradient-to-r from-cyan-500 to-teal-500',
+    },
+  };
+
+  const cfg = config[severity];
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-3">
+        <AlertTriangle className={`w-5 h-5 ${cfg.textColor}`} />
+        <h3 className={`text-lg font-semibold ${cfg.textColor}`}>{cfg.title}</h3>
+        <span className={`px-2.5 py-0.5 text-xs font-bold text-white rounded-full ${cfg.badgeBg}`}>
+          {debts.length}
+        </span>
+      </div>
+
+      <div className="space-y-2">
+        {debts.map((debt, idx) => (
+          <div
+            key={idx}
+            className={`card-dark rounded-xl p-5 ${cfg.bgColor} ${cfg.borderColor} border hover:scale-[1.01] transition-all`}
+          >
+            <div className="flex items-start gap-4">
+              <div className={`p-2.5 bg-white/5 rounded-lg ${cfg.borderColor} border`}>
+                <AlertTriangle className={`w-5 h-5 ${cfg.textColor}`} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-white font-medium mb-2">{debt.description}</p>
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
+                  <span className="text-gray-500">Feature: <span className="text-blue-400">{debt.featureName}</span></span>
+                  <span className="text-gray-500">Tarea: <span className="text-cyan-400">{debt.taskName}</span></span>
+                  <span className="flex items-center gap-1 text-gray-500">
+                    <Clock className="w-3.5 h-3.5" /> {debt.estimated_effort}
+                  </span>
+                </div>
+              </div>
+              <span className={`flex-shrink-0 px-2.5 py-1 text-[10px] font-bold text-white rounded-full uppercase tracking-wider ${cfg.badgeBg}`}>
+                {severity}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}