Almost all sections with mock data

src/components/performance/ProcessTable.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import type { ProcessItem } from './ProcessRow'
+import ProcessRow from './ProcessRow'
+
+interface ProcessTableProps {
+  processes: ProcessItem[]
+  noDevice?: boolean
+}
+
+export default function ProcessTable({ processes, noDevice }: ProcessTableProps) {
+  if (noDevice) {
+    return (
+      <div className="rounded-xl border border-white/10 bg-dark-300/50 overflow-hidden">
+        <div className="px-4 py-3 border-b border-white/10">
+          <h3 className="text-sm font-medium text-gray-400">
+            Procesos Activos (Top 10 por CPU)
+          </h3>
+        </div>
+        <div className="flex flex-col items-center justify-center py-16 text-gray-500">
+          Selecciona un dispositivo
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-xl border border-white/10 bg-dark-300/50 overflow-hidden">
+      <div className="px-4 py-3 border-b border-white/10">
+        <h3 className="text-sm font-medium text-gray-400">
+          Procesos Activos (Top 10 por CPU)
+        </h3>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b border-white/10 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
+              <th className="py-3 px-4">Proceso</th>
+              <th className="py-3 px-4 w-20">PID</th>
+              <th className="py-3 px-4 w-24">CPU %</th>
+              <th className="py-3 px-4 w-24">Memoria</th>
+              <th className="py-3 px-4 w-24">Estado</th>
+            </tr>
+          </thead>
+          <tbody>
+            {processes.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={5}
+                  className="py-8 text-center text-sm text-gray-500"
+                >
+                  Sin datos
+                </td>
+              </tr>
+            ) : (
+              processes.map((p) => (
+                <ProcessRow key={p.id} process={p} />
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}