feat(web): make active tables sortable

web-v2/src/pages/VerificationPlanningPage.tsx

@@ -1,3 +1,4 @@
+import { SortableTable } from '../components/SortableTable';
 import { SearchableSelect } from '../components/SearchableSelect';
 import { useEffect, useMemo, useState } from 'react';
 import type { FormEvent } from 'react';
@@ -207,7 +208,7 @@ export function VerificationPlanningPage() {
     {success && <Alert type="success">{success}</Alert>}
     {loading ? <LoadingBlock label="Cargando verificaciones…" /> : items.length === 0 ? <EmptyState title="Sin verificaciones en esta vista" text="No hay Hallazgos abiertos con fecha de control que coincidan con el filtro seleccionado." /> : <div className="table-panel verification-planning-table">
       <div className="table-summary"><strong>{meta.total} hallazgo{meta.total === 1 ? '' : 's'}</strong><span>Seleccioná únicamente registros de una misma empresa y área</span></div>
-      <div className="table-scroll"><table><thead><tr><th /><th>Hallazgo</th><th>Empresa / área</th><th>Elemento</th><th>Fecha objetivo</th><th>Planificación</th><th /></tr></thead><tbody>{items.map((item) => {
+      <div className="table-scroll"><SortableTable><thead><tr><th /><th>Hallazgo</th><th>Empresa / área</th><th>Elemento</th><th>Fecha objetivo</th><th>Planificación</th><th /></tr></thead><tbody>{items.map((item) => {
         const key = groupKey(item);
         const blockedByGroup = Boolean(selectedGroup && selectedGroup !== key);
         const selectable = !item.verificationVisit && Boolean(item.company && item.area) && !blockedByGroup;
@@ -221,7 +222,7 @@ export function VerificationPlanningPage() {
           <td>{item.verificationVisit ? <Link className="text-link" to={`/inspecciones/${item.verificationVisit.id}`}><strong>{item.verificationVisit.code}</strong><small className="block-muted">{formatDate(item.verificationVisit.plannedStartAt)} · {inspectionVisitStatusLabel(item.verificationVisit.status)}</small></Link> : item.company && item.area ? <span className="status-badge pending">Sin inspección</span> : <span className="status-badge danger">Falta contexto</span>}</td>
           <td className="action-cell"><Link className="icon-button" to={`/hallazgos/${item.id}`} aria-label={`Abrir ${item.code}`}><Icon name="chevron" /></Link></td>
         </tr>;
-      })}</tbody></table></div>
+      })}</tbody></SortableTable></div>
       <div className="pagination"><button className="button secondary" disabled={page <= 1} onClick={() => setPage(page - 1)}>Anterior</button><span>{meta.total ? `${(page - 1) * meta.pageSize + 1}–${Math.min(page * meta.pageSize, meta.total)} de ${meta.total}` : '0 resultados'}</span><button className="button secondary" disabled={page >= meta.totalPages} onClick={() => setPage(page + 1)}>Siguiente</button></div>
     </div>}