diff --git a/database/schema.sql b/database/schema.sql
index 241fd90..0a37f84 100644
--- a/database/schema.sql
+++ b/database/schema.sql
@@ -106,6 +106,28 @@ ALTER TABLE a24c.database_nodes
     ADD COLUMN IF NOT EXISTS restore_target_id INTEGER
     REFERENCES a24c.restore_targets (id) ON DELETE SET NULL;
 
+-- Backfill único: la credencial SQL del nodo (database_nodes.sql_password, columna de a24c) se
+-- copia del restaurador asignado como sobre cifrado gcm: (el panel lo descifra al conectar).
+-- Idempotente: solo rellena nodos ya asignados sin contraseña; no pisa valores existentes.
+-- Guardado por si a24c aún no aprovisionó la columna sql_password (evita romper el init).
+-- Rollback: UPDATE a24c.database_nodes SET sql_password = NULL;
+DO $$
+BEGIN
+    IF EXISTS (
+        SELECT 1 FROM information_schema.columns
+        WHERE table_schema = 'a24c'
+          AND table_name = 'database_nodes'
+          AND column_name = 'sql_password'
+    ) THEN
+        UPDATE a24c.database_nodes n
+        SET sql_password = rt.sql_password_encrypted
+        FROM a24c.restore_targets rt
+        WHERE n.restore_target_id = rt.id
+          AND rt.sql_password_encrypted IS NOT NULL
+          AND (n.sql_password IS NULL OR n.sql_password = '');
+    END IF;
+END $$;
+
 -- Bitácora de restauraciones reportadas por CloudRestoreAS.
 CREATE TABLE IF NOT EXISTS a24c.restore_job_logs (
     id                  SERIAL PRIMARY KEY,
diff --git a/src/lib/components/AppShell.svelte b/src/lib/components/AppShell.svelte
index 10f21ef..38f4299 100644
--- a/src/lib/components/AppShell.svelte
+++ b/src/lib/components/AppShell.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { onMount, type Snippet } from 'svelte';
-    import { page } from '$app/stores';
-    import { afterNavigate } from '$app/navigation';
+    import { page, navigating } from '$app/stores';
+    import { afterNavigate, goto } from '$app/navigation';
+    import { panelViewsFor, type PanelView } from '$lib/nav';
     import aduanasoftLogo from '$lib/assets/logo.png';
 
     type ShellUser = {
@@ -15,23 +16,35 @@
         currentUser,
         title,
         children,
-        navExtra,
         headerActions
     }: {
         currentUser?: ShellUser;
         title: string;
         children: Snippet;
-        navExtra?: Snippet<[boolean]>;
         headerActions?: Snippet;
     } = $props();
 
     const STORAGE_KEY = 'sidebar-collapsed';
+    const PANEL_GROUP_KEY = 'sidebar-panel-group-open';
     let collapsed = $state(false);
     let mobileOpen = $state(false);
+    // Grupo "Panel Principal" abierto por defecto (patrón anexo76: collapsible persistido).
+    let panelGroupOpen = $state(true);
+    // Flyout de "Panel Principal" cuando el sidebar está colapsado (patrón anexo76).
+    let panelFlyoutOpen = $state(false);
+    let flyoutCloseTimer: ReturnType<typeof setTimeout> | null = null;
+    // El flyout usa `position: fixed` para escapar el `overflow` del <nav>, anclado a la
+    // posición real del icono trigger en el viewport.
+    let flyoutTriggerEl = $state<HTMLButtonElement | null>(null);
+    let flyoutTop = $state(0);
+    // Etiqueta flotante (tipo fila de dropdown) para los ítems de un solo link
+    // cuando el sidebar está colapsado, para no mostrar solo el icono.
+    let navTip = $state<{ label: string; icon: string; top: number } | null>(null);
 
     onMount(() => {
         try {
             collapsed = localStorage.getItem(STORAGE_KEY) === 'true';
+            panelGroupOpen = localStorage.getItem(PANEL_GROUP_KEY) !== 'false';
         } catch {
             /* localStorage no disponible */
         }
@@ -46,6 +59,46 @@
         }
     }
 
+    function togglePanelGroup() {
+        panelGroupOpen = !panelGroupOpen;
+        try {
+            localStorage.setItem(PANEL_GROUP_KEY, String(panelGroupOpen));
+        } catch {
+            /* ignore */
+        }
+    }
+
+    // Flyout colapsado: apertura inmediata al entrar, cierre diferido para permitir
+    // cruzar el pequeño gap entre el icono trigger y el panel flotante sin que se cierre.
+    function openPanelFlyout() {
+        if (flyoutCloseTimer) {
+            clearTimeout(flyoutCloseTimer);
+            flyoutCloseTimer = null;
+        }
+        if (flyoutTriggerEl) flyoutTop = flyoutTriggerEl.getBoundingClientRect().top;
+        panelFlyoutOpen = true;
+    }
+
+    function closePanelFlyout() {
+        if (flyoutCloseTimer) clearTimeout(flyoutCloseTimer);
+        flyoutCloseTimer = setTimeout(() => {
+            panelFlyoutOpen = false;
+            flyoutCloseTimer = null;
+        }, 120);
+    }
+
+    function togglePanelFlyout() {
+        panelFlyoutOpen = !panelFlyoutOpen;
+    }
+
+    // Etiqueta flotante de los ítems sin dropdown (solo en modo colapsado).
+    function showNavTip(item: NavItem, el: HTMLElement) {
+        navTip = { label: item.label, icon: item.icon, top: el.getBoundingClientRect().top };
+    }
+    function hideNavTip() {
+        navTip = null;
+    }
+
     // Cerrar el drawer móvil al navegar entre rutas.
     afterNavigate(() => {
         mobileOpen = false;
@@ -56,9 +109,19 @@
         currentUser?.nombre_completo || currentUser?.username || 'Usuario'
     );
 
+    // Vistas del panel principal visibles según rol (fuente única: $lib/nav).
+    const panelViews = $derived(panelViewsFor(isAdmin));
+
+    // Vista activa del panel: solo aplica en `/`; un ?view= inválido
+    // (o adminOnly sin permiso) cae en 'dashboard', igual que en +page.svelte.
+    const activePanelView = $derived.by(() => {
+        if ($page.url.pathname !== '/') return null;
+        const view = $page.url.searchParams.get('view');
+        return panelViews.some((v) => v.key === view) ? view : 'dashboard';
+    });
+
     type NavItem = { href: string; label: string; icon: string };
     const navGeneral: NavItem[] = [
-        { href: '/', label: 'Panel Principal', icon: 'dashboard' },
         { href: '/reportes', label: 'Reportes', icon: 'assessment' }
     ];
     const navAdmin: NavItem[] = [
@@ -70,30 +133,69 @@
         const path = $page.url.pathname;
         return href === '/' ? path === '/' : path.startsWith(href);
     }
+
+    function viewHref(view: PanelView): string {
+        return `/?view=${view.key}`;
+    }
+
+    // Navegamos con `goto` para que `$page.url` se actualice (pushState NO lo actualiza).
+    // El load de `/` no referencia `url`, así que cambiar solo el query string NO
+    // re-ejecuta el load (no recarga SQL): el cambio de vista es instantáneo en `/`,
+    // y desde otra ruta navega a `/` cargando los datos una sola vez.
+    function handleViewClick(event: MouseEvent, view: PanelView) {
+        event.preventDefault();
+        if ($page.url.pathname !== '/' || activePanelView !== view.key) {
+            goto(viewHref(view), { noScroll: true, keepFocus: true });
+        }
+        mobileOpen = false;
+        panelFlyoutOpen = false;
+    }
 </script>
 
 {#snippet navLink(item: NavItem, isCollapsed: boolean)}
     <a
         href={item.href}
+        aria-label={isCollapsed ? item.label : undefined}
+        onmouseenter={(e) => {
+            if (isCollapsed) showNavTip(item, e.currentTarget);
+        }}
+        onmouseleave={() => {
+            if (isCollapsed) hideNavTip();
+        }}
         class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] font-medium transition-colors ${
             isActive(item.href)
                 ? 'bg-sky-50 text-sky-800 border border-sky-100'
                 : 'text-slate-600 hover:bg-slate-100'
         } ${isCollapsed ? 'justify-center px-2' : 'px-2.5'}`}
-        title={isCollapsed ? item.label : ''}
     >
         <span class="material-icons-outlined text-xl">{item.icon}</span>
         {#if !isCollapsed}<span>{item.label}</span>{/if}
     </a>
 {/snippet}
 
+{#snippet viewLink(view: PanelView, isCollapsed: boolean)}
+    <a
+        href={viewHref(view)}
+        onclick={(event) => handleViewClick(event, view)}
+        class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] font-medium transition-colors ${
+            activePanelView === view.key
+                ? 'bg-sky-50 text-sky-800 border border-sky-100'
+                : 'text-slate-600 hover:bg-slate-100'
+        } ${isCollapsed ? 'justify-center px-2' : 'px-2.5'}`}
+        title={isCollapsed ? view.label : ''}
+    >
+        <span class="material-icons-outlined text-xl">{view.icon}</span>
+        {#if !isCollapsed}<span>{view.label}</span>{/if}
+    </a>
+{/snippet}
+
 {#snippet sidebarInner(isCollapsed: boolean, isMobile: boolean)}
     <div class="flex h-full flex-col">
         <!-- Brand -->
-        <div class={`flex h-20 items-center border-b bg-slate-50/80 ${isCollapsed && !isMobile ? 'flex-col justify-center gap-2 px-2' : 'justify-between px-4'}`}>
+        <div class={`flex h-20 items-center border-b bg-slate-50/80 ${isCollapsed && !isMobile ? 'flex-col justify-center gap-1 px-2' : 'justify-between px-4'}`}>
             <div class="flex items-center gap-3">
-                <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-100 shadow-sm ring-1 ring-sky-200/60">
-                    <img src={aduanasoftLogo} alt="Aduanasoft" class="h-9 w-9 object-contain" />
+                <div class={`flex items-center justify-center rounded-2xl bg-sky-100 shadow-sm ring-1 ring-sky-200/60 ${isCollapsed && !isMobile ? 'h-10 w-10' : 'h-12 w-12'}`}>
+                    <img src={aduanasoftLogo} alt="Aduanasoft" class={`object-contain ${isCollapsed && !isMobile ? 'h-7 w-7' : 'h-9 w-9'}`} />
                 </div>
                 {#if !isCollapsed || isMobile}
                     <div class="space-y-0.5">
@@ -113,10 +215,10 @@
             {:else}
                 <button
                     onclick={toggleCollapsed}
-                    class="flex items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100"
+                    class={`flex items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100 ${isCollapsed && !isMobile ? 'p-1' : 'p-2'}`}
                     title={isCollapsed ? 'Expandir menú' : 'Colapsar menú'}
                 >
-                    <span class="material-icons-outlined text-lg">{isCollapsed ? 'chevron_right' : 'chevron_left'}</span>
+                    <span class={`material-icons-outlined ${isCollapsed && !isMobile ? 'text-base' : 'text-lg'}`}>{isCollapsed ? 'chevron_right' : 'chevron_left'}</span>
                 </button>
             {/if}
         </div>
@@ -127,20 +229,60 @@
                 {#if !isCollapsed || isMobile}
                     <p class="mb-1 px-2 text-[0.65rem] font-semibold uppercase tracking-wide text-slate-500">General</p>
                 {/if}
+
+                <!-- Grupo colapsable "Panel Principal": siempre visible en toda ruta -->
+                {#if isCollapsed && !isMobile}
+                    <!-- Colapsado (a76): icono único + panel flotante con las vistas -->
+                    <div
+                        class="relative"
+                        role="group"
+                        onmouseenter={openPanelFlyout}
+                        onmouseleave={closePanelFlyout}
+                    >
+                        <button
+                            bind:this={flyoutTriggerEl}
+                            onclick={togglePanelFlyout}
+                            aria-expanded={panelFlyoutOpen}
+                            title="Panel Principal"
+                            class={`flex w-full items-center justify-center rounded-lg px-2 py-2 text-[0.75rem] font-medium transition-colors ${
+                                activePanelView
+                                    ? 'bg-sky-50 text-sky-800 border border-sky-100'
+                                    : 'text-slate-600 hover:bg-slate-100'
+                            }`}
+                        >
+                            <span class="material-icons-outlined text-xl">dashboard</span>
+                        </button>
+                        <!-- El panel flotante se renderiza en la raíz del componente
+                             (fuera del <nav>) para escapar su overflow y su stacking context. -->
+                    </div>
+                {:else}
+                    <button
+                        onclick={togglePanelGroup}
+                        aria-expanded={panelGroupOpen}
+                        class={`flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-[0.75rem] font-medium transition-colors ${
+                            activePanelView && !panelGroupOpen
+                                ? 'bg-sky-50 text-sky-800 border border-sky-100'
+                                : 'text-slate-600 hover:bg-slate-100'
+                        }`}
+                    >
+                        <span class="material-icons-outlined text-xl">dashboard</span>
+                        <span class="flex-1 text-left">Panel Principal</span>
+                        <span class={`material-icons-outlined text-base transition-transform duration-200 ${panelGroupOpen ? 'rotate-90' : ''}`}>chevron_right</span>
+                    </button>
+                    {#if panelGroupOpen}
+                        <div class="ml-4 space-y-1 border-l border-slate-200 pl-2">
+                            {#each panelViews as view (view.key)}
+                                {@render viewLink(view, false)}
+                            {/each}
+                        </div>
+                    {/if}
+                {/if}
+
                 {#each navGeneral as item (item.href)}
                     {@render navLink(item, isCollapsed && !isMobile)}
                 {/each}
             </div>
 
-            {#if navExtra}
-                <div class="space-y-1.5">
-                    {#if !isCollapsed || isMobile}
-                        <p class="mb-1 px-2 text-[0.65rem] font-semibold uppercase tracking-wide text-slate-500">Vistas</p>
-                    {/if}
-                    {@render navExtra(isCollapsed && !isMobile)}
-                </div>
-            {/if}
-
             {#if isAdmin}
                 <div class="space-y-1.5">
                     {#if !isCollapsed || isMobile}
@@ -193,11 +335,49 @@
 {/snippet}
 
 <div class="min-h-screen bg-slate-50">
+    <!-- Barra de progreso de navegación: da feedback inmediato mientras carga la ruta destino -->
+    {#if $navigating}
+        <div class="fixed inset-x-0 top-0 z-[60] h-0.5 animate-pulse bg-sky-500"></div>
+    {/if}
+
     <!-- Sidebar desktop -->
     <aside class={`fixed inset-y-0 left-0 z-30 hidden border-r bg-white transition-all duration-300 lg:block ${collapsed ? 'w-20' : 'w-64'}`}>
         {@render sidebarInner(collapsed, false)}
     </aside>
 
+    <!-- Flyout "Panel Principal" del sidebar contraído: se renderiza aquí, en la raíz, para
+         escapar el overflow del <nav> y el stacking context del <aside> (queda `fixed`,
+         relativo al viewport, por encima de todo). -->
+    {#if collapsed && panelFlyoutOpen}
+        <div
+            class="fixed z-50 hidden max-h-[calc(100vh-1rem)] w-56 overflow-y-auto rounded-lg border border-slate-200 bg-white p-1 shadow-lg lg:block"
+            style="top: {flyoutTop}px; left: 4.5rem;"
+            role="menu"
+            onmouseenter={openPanelFlyout}
+            onmouseleave={closePanelFlyout}
+        >
+            <p class="border-b border-slate-100 px-2 py-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-slate-500">
+                Panel Principal
+            </p>
+            <div class="mt-1 space-y-0.5">
+                {#each panelViews as view (view.key)}
+                    {@render viewLink(view, false)}
+                {/each}
+            </div>
+        </div>
+    {/if}
+
+    <!-- Etiqueta flotante (tipo fila de dropdown) para ítems sin dropdown, en modo colapsado. -->
+    {#if collapsed && navTip}
+        <div
+            class="fixed z-50 hidden items-center gap-2 whitespace-nowrap rounded-lg border border-slate-200 bg-white px-3 py-2 text-[0.75rem] font-medium text-slate-700 shadow-lg lg:flex"
+            style="top: {navTip.top}px; left: 4.5rem;"
+        >
+            <span class="material-icons-outlined text-lg">{navTip.icon}</span>
+            <span>{navTip.label}</span>
+        </div>
+    {/if}
+
     <!-- Drawer móvil -->
     {#if mobileOpen}
         <button
diff --git a/src/lib/nav.test.ts b/src/lib/nav.test.ts
new file mode 100644
index 0000000..84911c4
--- /dev/null
+++ b/src/lib/nav.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { PANEL_VIEWS, isPanelView, panelViewsFor } from './nav';
+
+describe('isPanelView', () => {
+    it('acepta todas las vistas definidas en PANEL_VIEWS', () => {
+        for (const view of PANEL_VIEWS) {
+            expect(isPanelView(view.key)).toBe(true);
+        }
+    });
+
+    it('rechaza valores desconocidos, null y undefined', () => {
+        expect(isPanelView('inexistente')).toBe(false);
+        expect(isPanelView('')).toBe(false);
+        expect(isPanelView(null)).toBe(false);
+        expect(isPanelView(undefined)).toBe(false);
+    });
+
+    it('rechaza variantes con mayúsculas o espacios (query params sucios)', () => {
+        expect(isPanelView('Dashboard')).toBe(false);
+        expect(isPanelView(' backups')).toBe(false);
+    });
+});
+
+describe('panelViewsFor', () => {
+    it('para admin devuelve todas las vistas', () => {
+        expect(panelViewsFor(true)).toHaveLength(PANEL_VIEWS.length);
+    });
+
+    it('para no-admin excluye únicamente las vistas adminOnly', () => {
+        const views = panelViewsFor(false);
+        expect(views.every((view) => !view.adminOnly)).toBe(true);
+        const excluded = PANEL_VIEWS.filter((view) => view.adminOnly).map((view) => view.key);
+        expect(excluded).toEqual(['clients', 'databases']);
+        expect(views.map((view) => view.key)).toEqual(
+            PANEL_VIEWS.filter((view) => !view.adminOnly).map((view) => view.key)
+        );
+    });
+});
diff --git a/src/lib/nav.ts b/src/lib/nav.ts
new file mode 100644
index 0000000..fcb4d6f
--- /dev/null
+++ b/src/lib/nav.ts
@@ -0,0 +1,36 @@
+/**
+ * Navegación centralizada del panel (fuente única de verdad).
+ * Consumida por AppShell (sidebar) y por la página raíz (+page.svelte).
+ */
+export type PanelView = {
+    key: string;
+    label: string;
+    icon: string;
+    adminOnly?: boolean;
+};
+
+const PANEL_VIEW_DEFS = [
+    { key: 'dashboard', label: 'Resumen', icon: 'insights' },
+    { key: 'backups', label: 'Respaldos Almacenados', icon: 'inventory_2' },
+    { key: 'restored', label: 'Respaldos Restaurados', icon: 'cloud_done' },
+    { key: 'failed', label: 'Restores Fallidos', icon: 'error_outline' },
+    { key: 'clients', label: 'Catálogo de Clientes', icon: 'group', adminOnly: true },
+    { key: 'alerts', label: 'Alertas Críticas', icon: 'warning_amber' },
+    { key: 'databases', label: 'Gestión de Bases de Datos', icon: 'dns', adminOnly: true }
+] as const satisfies readonly PanelView[];
+
+export type PanelViewKey = (typeof PANEL_VIEW_DEFS)[number]['key'];
+
+export const PANEL_VIEWS: readonly PanelView[] = PANEL_VIEW_DEFS;
+
+const PANEL_VIEW_KEYS: readonly string[] = PANEL_VIEWS.map((view) => view.key);
+
+/** Valida que un valor arbitrario (ej. query param) sea una vista conocida. */
+export function isPanelView(value: string | null | undefined): value is PanelViewKey {
+    return typeof value === 'string' && PANEL_VIEW_KEYS.includes(value);
+}
+
+/** Vistas visibles para el usuario según su rol. */
+export function panelViewsFor(isAdmin: boolean): readonly PanelView[] {
+    return isAdmin ? PANEL_VIEWS : PANEL_VIEWS.filter((view) => !view.adminOnly);
+}
diff --git a/src/lib/server/controldesk-pg.ts b/src/lib/server/controldesk-pg.ts
index d65345d..4b578ea 100644
--- a/src/lib/server/controldesk-pg.ts
+++ b/src/lib/server/controldesk-pg.ts
@@ -378,17 +378,19 @@ export async function insertDatabaseNode(row: {
     activo: number;
     restoreTargetId?: number | null;
 }): Promise<void> {
-    // server_name se deriva del servidor de restauración asignado (su IP); si el target
-    // aún no tiene IP configurada, se conserva el serverName recibido (puede ir vacío).
+    // server_name y sql_password se derivan del servidor de restauración asignado (su IP y su
+    // credencial SQL cifrada); si el target aún no tiene IP, se conserva el serverName recibido.
     await pgPool.query(
         `
         INSERT INTO ${qNodes()} (
             node_subnode_key, rfc, legal_name, branch_name,
-            notification_email, server_name, database_name, is_active, restore_target_id
+            notification_email, server_name, database_name, is_active, restore_target_id,
+            sql_password
         ) VALUES (
             $1, $2, $3, $4, $5,
             COALESCE((SELECT server_ip FROM ${qRestoreTargets()} WHERE id = $9), $6),
-            $7, $8, $9
+            $7, $8, $9,
+            (SELECT sql_password_encrypted FROM ${qRestoreTargets()} WHERE id = $9)
         )
         `,
         [
@@ -430,7 +432,8 @@ export async function updateDatabaseNode(
             server_name = COALESCE((SELECT server_ip FROM ${qRestoreTargets()} WHERE id = $9), $6),
             database_name = $7,
             is_active = $8,
-            restore_target_id = $9
+            restore_target_id = $9,
+            sql_password = (SELECT sql_password_encrypted FROM ${qRestoreTargets()} WHERE id = $9)
         WHERE id = $10
         `,
         [
@@ -829,9 +832,10 @@ export async function listNodesForAssignment(): Promise<AssignmentNode[]> {
 
 /**
  * Guarda el checklist manual de un restaurador: los `checkedNodeIds` quedan asignados a
- * `targetId` (reasignando desde donde estuvieran y derivando server_name de su IP); los nodos
- * que estaban en este restaurador y ya NO vienen marcados quedan sin asignar (NULL). Los nodos
- * de OTROS restauradores no marcados no se tocan. Transacción con prepared statements.
+ * `targetId` (reasignando desde donde estuvieran y derivando server_name y sql_password del
+ * target); los nodos que estaban en este restaurador y ya NO vienen marcados quedan sin asignar
+ * (restore_target_id y sql_password en NULL). Los nodos de OTROS restauradores no marcados no se
+ * tocan. Transacción con prepared statements.
  */
 export async function assignNodesToRestoreTarget(
     targetId: number,
@@ -841,21 +845,23 @@ export async function assignNodesToRestoreTarget(
     const client = await pgPool.connect();
     try {
         await client.query('BEGIN');
-        // 1) Asignar/reasignar los marcados a este restaurador (server_name = IP del target si existe).
+        // 1) Asignar/reasignar los marcados (server_name = IP del target; sql_password = su credencial cifrada).
         await client.query(
             `
             UPDATE ${qNodes()}
             SET restore_target_id = $1,
-                server_name = COALESCE((SELECT server_ip FROM ${qRestoreTargets()} WHERE id = $1), server_name)
+                server_name = COALESCE((SELECT server_ip FROM ${qRestoreTargets()} WHERE id = $1), server_name),
+                sql_password = (SELECT sql_password_encrypted FROM ${qRestoreTargets()} WHERE id = $1)
             WHERE id = ANY($2::int[])
             `,
             [targetId, ids]
         );
-        // 2) Quitar de este restaurador los que quedaron desmarcados (NULL); no toca otros targets.
+        // 2) Quitar de este restaurador los desmarcados (restore_target_id y sql_password a NULL); no toca otros targets.
         await client.query(
             `
             UPDATE ${qNodes()}
-            SET restore_target_id = NULL
+            SET restore_target_id = NULL,
+                sql_password = NULL
             WHERE restore_target_id = $1
               AND NOT (id = ANY($2::int[]))
             `,
@@ -872,8 +878,9 @@ export async function assignNodesToRestoreTarget(
 
 /**
  * Aplica un conjunto de asignaciones (distribución global o automática): cada par fija el
- * restore_target_id del nodo (y deriva server_name de la IP del restaurador si no es NULL).
- * Pares con targetId NULL dejan el nodo sin asignar (conservando server_name). Transacción.
+ * restore_target_id del nodo (y deriva server_name y sql_password del restaurador si no es NULL).
+ * Pares con targetId NULL dejan el nodo sin asignar (conservando server_name, sql_password a NULL).
+ * Transacción.
  */
 export async function applyNodeAssignments(
     pairs: { nodeId: number; targetId: number | null }[]
@@ -891,6 +898,10 @@ export async function applyNodeAssignments(
                     server_name = CASE
                         WHEN $2::int IS NULL THEN server_name
                         ELSE COALESCE((SELECT server_ip FROM ${qRestoreTargets()} WHERE id = $2), server_name)
+                    END,
+                    sql_password = CASE
+                        WHEN $2::int IS NULL THEN NULL
+                        ELSE (SELECT sql_password_encrypted FROM ${qRestoreTargets()} WHERE id = $2)
                     END
                 WHERE id = $1
                 `,
@@ -1234,6 +1245,57 @@ export async function listFailedRestoreJobLogs(limit = 100): Promise<FailedResto
     }
 }
 
+/** Restores completados/reenviados (todos los servidores) para el panel de restaurados. */
+export interface RestoredRestoreRow {
+    id: number;
+    restore_target_id: number | null;
+    server_name: string | null;
+    node_key: string | null;
+    client_name: string | null;
+    db_name: string | null;
+    filename: string;
+    rel_path: string | null;
+    size_bytes: number | null;
+    restored_at: Date;
+}
+
+/**
+ * Restores exitosos (`completed`/`forwarded`) desde restore_job_logs — lo que reporta
+ * CloudRestoreAS vía POST /api/restore/job-result. Resuelve node_key/client_name por nombre
+ * de base contra database_nodes (LATERAL … LIMIT 1 para no duplicar la fila del log si dos
+ * nodos comparten database_name). Cuando no hay match, ambos quedan null y la UI cae a db_name.
+ */
+export async function listRestoredRestoreJobLogs(limit = 200): Promise<RestoredRestoreRow[]> {
+    const capped = Math.min(Math.max(1, Math.trunc(limit)), 500);
+    try {
+        await ensureRestoreJobLogColumns();
+        const r = await pgPool.query(
+            `
+            SELECT
+                jl.id, jl.restore_target_id, rt.name AS server_name,
+                dn.node_subnode_key AS node_key, dn.legal_name AS client_name,
+                jl.filename, jl.db_name, jl.rel_path, jl.size_bytes, jl.restored_at
+            FROM ${qRestoreJobLogs()} jl
+            LEFT JOIN ${qRestoreTargets()} rt ON rt.id = jl.restore_target_id
+            LEFT JOIN LATERAL (
+                SELECT n.node_subnode_key, n.legal_name
+                FROM ${qNodes()} n
+                WHERE LOWER(TRIM(n.database_name)) = LOWER(TRIM(jl.db_name))
+                LIMIT 1
+            ) dn ON true
+            WHERE jl.status IN ('completed', 'forwarded')
+            ORDER BY jl.restored_at DESC
+            LIMIT $1
+            `,
+            [capped]
+        );
+        return r.rows as RestoredRestoreRow[];
+    } catch (e) {
+        if (isPgUndefinedTable(e)) return [];
+        throw e;
+    }
+}
+
 /** Carpetas de un restaurador para descarga por filesystem (input/processed reportados). */
 export interface RestoreTargetDownload {
     id: number;
diff --git a/src/lib/server/mssql-nodes.test.ts b/src/lib/server/mssql-nodes.test.ts
new file mode 100644
index 0000000..b3560fd
--- /dev/null
+++ b/src/lib/server/mssql-nodes.test.ts
@@ -0,0 +1,54 @@
+/**
+ * Pruebas de resolveNodeSqlPassword: la columna database_nodes.sql_password se autorrellena
+ * al asignar un restaurador copiando su sobre cifrado (gcm:), así que al resolverla hay que
+ * descifrarla. Cubre: sin valor → global, texto plano legado, sobre gcm: descifrado, y
+ * descifrado que falla → global (no debe tumbar el dashboard).
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { env } from '$env/dynamic/private';
+
+// Se conserva el isEncrypted real (trivial: prefijo gcm:) y solo se controla el descifrado.
+vi.mock('./crypto', async (importOriginal) => {
+    const actual = await importOriginal<typeof import('./crypto')>();
+    return { ...actual, decryptSecret: vi.fn() };
+});
+
+import { decryptSecret } from './crypto';
+import { resolveNodeSqlPassword } from './mssql-nodes';
+
+const decryptMock = vi.mocked(decryptSecret);
+
+beforeEach(() => {
+    vi.clearAllMocks();
+    env.PANEL_MSSQL_PASSWORD = 'GLOBAL_PWD';
+});
+
+describe('resolveNodeSqlPassword', () => {
+    it('sin valor (null/undefined/vacío/espacios) usa la contraseña global', () => {
+        expect(resolveNodeSqlPassword(null)).toBe('GLOBAL_PWD');
+        expect(resolveNodeSqlPassword(undefined)).toBe('GLOBAL_PWD');
+        expect(resolveNodeSqlPassword('')).toBe('GLOBAL_PWD');
+        expect(resolveNodeSqlPassword('   ')).toBe('GLOBAL_PWD');
+        expect(decryptMock).not.toHaveBeenCalled();
+    });
+
+    it('texto plano legado (sin prefijo gcm:) se usa tal cual y se recorta, sin descifrar', () => {
+        expect(resolveNodeSqlPassword('  MiPassPlano  ')).toBe('MiPassPlano');
+        expect(decryptMock).not.toHaveBeenCalled();
+    });
+
+    it('sobre cifrado gcm: se descifra y devuelve el texto plano', () => {
+        decryptMock.mockReturnValue('SecretoDescifrado');
+        const envelope = 'gcm:aXY=:dGFn:Y2lwaGVy';
+        expect(resolveNodeSqlPassword(envelope)).toBe('SecretoDescifrado');
+        expect(decryptMock).toHaveBeenCalledWith(envelope);
+    });
+
+    it('si el descifrado falla (sobre corrupto o clave equivocada) cae a la global sin propagar el error', () => {
+        decryptMock.mockImplementation(() => {
+            throw new Error('autenticación GCM inválida');
+        });
+        expect(resolveNodeSqlPassword('gcm:corrupto')).toBe('GLOBAL_PWD');
+        expect(decryptMock).toHaveBeenCalledOnce();
+    });
+});
diff --git a/src/lib/server/mssql-nodes.ts b/src/lib/server/mssql-nodes.ts
index c77f1cb..aeb1fa5 100644
--- a/src/lib/server/mssql-nodes.ts
+++ b/src/lib/server/mssql-nodes.ts
@@ -4,6 +4,13 @@
  */
 import sql from 'mssql';
 import { env } from '$env/dynamic/private';
+import { decryptSecret, isEncrypted } from './crypto';
+
+// Timeout de conexión acotado en TODOS los entornos: un SQL Server sano conecta en <1s,
+// así que 5s (alineado con el pool de PostgreSQL) es holgado. Antes eran 30s, lo que colgaba
+// la carga del dashboard cuando algún servidor no responde. Configurable por env si un
+// despliegue lo necesita.
+const MSSQL_CONNECT_TIMEOUT_MS = Number(env.PANEL_MSSQL_CONNECT_TIMEOUT_MS) || 5000;
 
 const MAX_POOLS = 16;
 // Se cachea la *promesa* del pool (no el pool ya resuelto) para que varias cargas de nodos
@@ -35,10 +42,22 @@ export function resolveMssqlUser(): string {
     );
 }
 
-/** Contraseña SQL: columna sql_password del nodo (texto plano) o variable global. */
+/**
+ * Contraseña SQL del nodo. La columna sql_password se autorrellena al asignar un
+ * restaurador copiando su sobre cifrado (gcm:), así que aquí se descifra al vuelo.
+ * Acepta también texto plano legado. Si no hay valor por nodo, cae a la variable global.
+ */
 export function resolveNodeSqlPassword(nodeSqlPassword: string | null | undefined): string {
     const raw = nodeSqlPassword != null ? String(nodeSqlPassword).trim() : '';
-    if (raw) return raw;
+    if (raw) {
+        if (!isEncrypted(raw)) return raw; // texto plano legado
+        try {
+            return decryptSecret(raw);
+        } catch {
+            // sobre corrupto o clave equivocada: caer al global en vez de tumbar el dashboard
+            return String(env.PANEL_MSSQL_PASSWORD || '').trim();
+        }
+    }
     return String(
         env.PANEL_MSSQL_PASSWORD || ''
     ).trim();
@@ -113,10 +132,13 @@ export async function getMssqlPoolMaster(serverHost: string, password: string):
         password,
         server,
         database: 'master',
+        // node-mssql gobierna el timeout de conexión con `connectionTimeout` (top-level);
+        // se replica en options.connectTimeout (tedious) para cubrir ambas rutas.
+        connectionTimeout: MSSQL_CONNECT_TIMEOUT_MS,
         options: {
             encrypt: true,
             trustServerCertificate: true,
-            connectTimeout: 30000
+            connectTimeout: MSSQL_CONNECT_TIMEOUT_MS
         }
     };
 
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 76d0a2c..6f5ecf7 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -7,7 +7,6 @@ import { verifyToken } from '$lib/server/auth';
 import { getUserById, filterDatabasesByUserPermissions } from '$lib/server/users';
 import { loadSqlDashboardFromNodes, type CatalogNodeRow } from '$lib/server/mssql-nodes';
 import { listBackupFiles } from '$lib/server/backup-files';
-import { scanRestoreInventory } from '$lib/server/restore-inventory';
 import { logger } from '$lib/server/logger';
 import {
     listClientsCatalog,
@@ -25,7 +24,7 @@ import {
     updatePortalUser,
     deletePortalUser,
     listRestoreTargets,
-    listNodeLastRestore,
+    listRestoredRestoreJobLogs,
     listFailedRestoreJobLogs
 } from '$lib/server/controldesk-pg';
 import {
@@ -89,6 +88,28 @@ async function getDiskSpace(drive: string) {
 }
 
 
+/** Rechaza si `promise` no resuelve dentro de `ms`; acota cargas que podrían colgarse. */
+function withTimeout<T>(promise: Promise<T>, ms: number, message: string): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+        const timer = setTimeout(() => reject(new Error(message)), ms);
+        promise.then(
+            (value) => {
+                clearTimeout(timer);
+                resolve(value);
+            },
+            (err) => {
+                clearTimeout(timer);
+                reject(err);
+            }
+        );
+    });
+}
+
+// Tope duro para la carga de métricas SQL Server: aun si varios servidores no responden,
+// el dashboard degrada a datos vacíos (con banner) en vez de colgarse. En producción, con
+// SQL sano (<2s), nunca se dispara. Configurable por env.
+const SQL_LOAD_TIMEOUT_MS = Number(env.PANEL_SQL_LOAD_TIMEOUT_MS) || 12000;
+
 export const load: PageServerLoad = async ({ cookies }) => {
     // 1. Auth Check - Verificar token JWT
     const token = cookies.get('session_token');
@@ -133,7 +154,8 @@ export const load: PageServerLoad = async ({ cookies }) => {
         primary: null as string | null,
         secondary: null as string | null,
         azure: null as string | null,
-        backups: null as string | null
+        backups: null as string | null,
+        restores: null as string | null
     };
 
     // --- 1. SQL Server: una conexión por servidor (master) según a24c.database_nodes ---
@@ -150,7 +172,11 @@ export const load: PageServerLoad = async ({ cookies }) => {
     // Dentro del catálogo, las 6 consultas también corren en paralelo (antes eran secuenciales).
     let controlDeskOk = false;
     const [bundleResult, catalogResult] = await Promise.allSettled([
-        loadSqlDashboardFromNodes(nodesForSql),
+        withTimeout(
+            loadSqlDashboardFromNodes(nodesForSql),
+            SQL_LOAD_TIMEOUT_MS,
+            `SQL Server: la carga de métricas excedió ${SQL_LOAD_TIMEOUT_MS} ms`
+        ),
         Promise.all([
             listClientsCatalog(),
             listDatabaseNodes(),
@@ -300,26 +326,19 @@ export const load: PageServerLoad = async ({ cookies }) => {
          console.error("Error processing backups/alerts hydration:", e);
     }
 
-    // Inventario "respaldos restaurados por nodo" (sobrevive a reasignación) y "restores
-    // fallidos", desde la BD (poblados vía job-result). Tolerante a fallos: si falla, se
-    // muestran vacíos sin romper el dashboard.
+    // Inventario "respaldos restaurados" y "restores fallidos", desde la BD (restore_job_logs,
+    // poblado por CloudRestoreAS vía POST /api/restore/job-result). Se lee de la BD y no del
+    // filesystem porque las carpetas Procesados/Fallados viven en los servidores de restauración
+    // (rutas Windows remotas) que el host del panel no ve. Si la BD falla, se registra en
+    // `errors.restores` para avisar en la UI en vez de degradar a "sin registros" en silencio.
     try {
-        // Escanea las carpetas Procesados/Fallados (derivadas de la Entrada reportada por cada
-        // restaurador) y refresca el cache node_last_restore. Refleja la realidad en cada carga.
-        const inv = await scanRestoreInventory();
-        restoredBackups = inv.restored;
-        failedRestores = inv.failed;
+        [restoredBackups, failedRestores] = await Promise.all([
+            listRestoredRestoreJobLogs(200),
+            listFailedRestoreJobLogs(200)
+        ]);
     } catch (e: any) {
-        console.error('Error escaneando inventario de restauraciones:', e);
-        // Fallback al cache/BD si el escaneo falla por completo (p.ej. sin acceso a carpetas).
-        try {
-            [restoredBackups, failedRestores] = await Promise.all([
-                listNodeLastRestore(),
-                listFailedRestoreJobLogs(200)
-            ]);
-        } catch (e2: any) {
-            console.error('Fallback de inventario de restauraciones también falló:', e2);
-        }
+        console.error('Error cargando inventario de restauraciones:', e);
+        errors.restores = `No se pudo cargar el inventario de restauraciones: ${e?.message ?? e}`;
     }
 
     // CALCULAR MÉTRICAS DE RESTAURACIÓN basadas en last_restore_date (ANTES del filtro)
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b69aaf3..adaec1f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import { untrack, tick } from 'svelte';
     import { deserialize } from '$app/forms';
-    import { invalidateAll, goto } from '$app/navigation';
+    import { invalidateAll, goto, afterNavigate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { PANEL_VIEWS, isPanelView, type PanelViewKey } from '$lib/nav';
     import AppShell from '$lib/components/AppShell.svelte';
 
     type KitActionPayload = { success?: boolean; message?: string };
@@ -77,31 +79,45 @@
         return val.toFixed(2);
     })());
 
-    // Estado de vista activa y paginación
-    let activeView = $state<
-        'dashboard' | 'backups' | 'restored' | 'failed' | 'clients' | 'alerts' | 'databases'
-    >('dashboard');
+    // Vista activa derivada de la URL (?view=); el sidebar global de AppShell la controla.
+    // Vistas adminOnly caen en 'dashboard' si el usuario no es admin.
+    const activeView = $derived.by<PanelViewKey>(() => {
+        const requested = $page.url.searchParams.get('view');
+        if (isPanelView(requested)) {
+            const def = PANEL_VIEWS.find((v) => v.key === requested);
+            if (def && (!def.adminOnly || data.currentUser?.es_admin)) return requested;
+        }
+        return 'dashboard';
+    });
 
-    // Persistencia de la vista activa del sidebar en localStorage
+    // Persistencia de la vista activa en localStorage
     const ACTIVE_VIEW_KEY = 'aduanasoft-dashboard-active-view';
 
-    if (typeof window !== 'undefined') {
-        const stored = window.localStorage.getItem(ACTIVE_VIEW_KEY);
-        if (stored) {
-            // Solo usamos el valor guardado si coincide con alguna vista conocida
-            if (
-                stored === 'dashboard' ||
-                stored === 'backups' ||
-                stored === 'restored' ||
-                stored === 'failed' ||
-                stored === 'clients' ||
-                stored === 'alerts' ||
-                stored === 'databases'
-            ) {
-                activeView = stored as typeof activeView;
-            }
+    // Capturada al inicializar, antes de que el $effect de persistencia escriba encima.
+    const storedInitialView = (() => {
+        if (typeof window === 'undefined') return null;
+        try {
+            const stored = window.localStorage.getItem(ACTIVE_VIEW_KEY);
+            return isPanelView(stored) ? stored : null;
+        } catch {
+            return null;
         }
-    }
+    })();
+
+    // Al entrar directo a `/` sin ?view=, restaurar la última vista usada.
+    // `goto` (no `pushState`/`replaceState`) para que `$page.url` refleje la vista y
+    // las derivaciones reaccionen; `replaceState: true` evita una entrada de historial.
+    afterNavigate(({ type }) => {
+        if (type !== 'enter') return;
+        if ($page.url.searchParams.get('view')) return;
+        if (storedInitialView && storedInitialView !== 'dashboard') {
+            goto(`/?view=${storedInitialView}`, {
+                replaceState: true,
+                noScroll: true,
+                keepFocus: true
+            });
+        }
+    });
     const PAGE_SIZE = 10;
     /** Altura fija del viewport con scroll; si fuera solo `max-h`, pocas filas no generan barra y el scroll infinito no dispara. */
     const TABLE_SCROLL_BODY_CLASS = 'h-[min(26rem,50vh)]';
@@ -1112,69 +1128,6 @@
 </script>
 
 <AppShell currentUser={data.currentUser} title="Panel de Control">
-    {#snippet navExtra(collapsed)}
-        <button
-            class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] transition-colors ${activeView === 'dashboard' ? 'bg-sky-50 text-sky-800 border border-sky-100' : 'text-slate-600 hover:bg-slate-100'} ${collapsed ? 'justify-center px-2' : 'px-2.5'}`}
-            onclick={() => (activeView = 'dashboard')}
-            title={collapsed ? 'Resumen' : ''}
-        >
-            <span class="material-icons-outlined text-xl">insights</span>
-            {#if !collapsed}<span>Resumen</span>{/if}
-        </button>
-        <button
-            class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] transition-colors ${activeView === 'backups' ? 'bg-sky-50 text-sky-800 border border-sky-100' : 'text-slate-600 hover:bg-slate-100'} ${collapsed ? 'justify-center px-2' : 'px-2.5'}`}
-            onclick={() => (activeView = 'backups')}
-            title={collapsed ? 'Respaldos Almacenados' : ''}
-        >
-            <span class="material-icons-outlined text-xl">inventory_2</span>
-            {#if !collapsed}<span>Respaldos Almacenados</span>{/if}
-        </button>
-        <button
-            class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] transition-colors ${activeView === 'restored' ? 'bg-sky-50 text-sky-800 border border-sky-100' : 'text-slate-600 hover:bg-slate-100'} ${collapsed ? 'justify-center px-2' : 'px-2.5'}`}
-            onclick={() => (activeView = 'restored')}
-            title={collapsed ? 'Respaldos Restaurados' : ''}
-        >
-            <span class="material-icons-outlined text-xl">cloud_done</span>
-            {#if !collapsed}<span>Respaldos Restaurados</span>{/if}
-        </button>
-        <button
-            class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] transition-colors ${activeView === 'failed' ? 'bg-sky-50 text-sky-800 border border-sky-100' : 'text-slate-600 hover:bg-slate-100'} ${collapsed ? 'justify-center px-2' : 'px-2.5'}`}
-            onclick={() => (activeView = 'failed')}
-            title={collapsed ? 'Restores Fallidos' : ''}
-        >
-            <span class="material-icons-outlined text-xl">error_outline</span>
-            {#if !collapsed}<span>Restores Fallidos</span>{/if}
-        </button>
-        {#if data.currentUser?.es_admin}
-        <button
-            class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] transition-colors ${activeView === 'clients' ? 'bg-sky-50 text-sky-800 border border-sky-100' : 'text-slate-600 hover:bg-slate-100'} ${collapsed ? 'justify-center px-2' : 'px-2.5'}`}
-            onclick={() => (activeView = 'clients')}
-            title={collapsed ? 'Catálogo de Clientes' : ''}
-        >
-            <span class="material-icons-outlined text-xl">group</span>
-            {#if !collapsed}<span>Catálogo de Clientes</span>{/if}
-        </button>
-        {/if}
-        <button
-            class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] transition-colors ${activeView === 'alerts' ? 'bg-sky-50 text-sky-800 border border-sky-100' : 'text-slate-600 hover:bg-slate-100'} ${collapsed ? 'justify-center px-2' : 'px-2.5'}`}
-            onclick={() => (activeView = 'alerts')}
-            title={collapsed ? 'Alertas Críticas' : ''}
-        >
-            <span class="material-icons-outlined text-xl">warning_amber</span>
-            {#if !collapsed}<span>Alertas Críticas</span>{/if}
-        </button>
-        {#if data.currentUser?.es_admin}
-        <button
-            class={`flex w-full items-center gap-2 rounded-lg py-2 text-[0.75rem] transition-colors ${activeView === 'databases' ? 'bg-sky-50 text-sky-800 border border-sky-100' : 'text-slate-600 hover:bg-slate-100'} ${collapsed ? 'justify-center px-2' : 'px-2.5'}`}
-            onclick={() => (activeView = 'databases')}
-            title={collapsed ? 'Gestión de Bases de Datos' : ''}
-        >
-            <span class="material-icons-outlined text-xl">dns</span>
-            {#if !collapsed}<span>Gestión de Bases de Datos</span>{/if}
-        </button>
-        {/if}
-    {/snippet}
-
         <div class="flex w-full min-h-[calc(100vh-5.5rem)] flex-1 flex-col rounded-2xl bg-white p-3 shadow-[0_16px_40px_rgba(15,23,42,0.03)] sm:p-5 lg:p-6">
             {#if activeView === 'dashboard'}
             <!-- Metric cards -->
@@ -1608,10 +1561,15 @@
                     <header>
                         <h2 class="text-base font-semibold text-slate-900">Respaldos restaurados</h2>
                         <p class="text-xs text-slate-500">
-                            Último respaldo restaurado por nodo, por servidor de restauración. Se
-                            conserva aunque el nodo se reasigne a otro restaurador.
+                            Historial de restauraciones exitosas por servidor, reportadas por
+                            CloudRestoreAS.
                         </p>
                     </header>
+                    {#if data.errors?.restores}
+                        <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
+                            {data.errors.restores}
+                        </div>
+                    {/if}
                     <div class="overflow-auto rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
                         <table class="min-w-full text-xs">
                             <thead class="bg-slate-50 text-slate-500">
@@ -1625,7 +1583,7 @@
                                 </tr>
                             </thead>
                             <tbody class="divide-y divide-slate-100">
-                                {#each restoredBackups as r (r.database_node_id)}
+                                {#each restoredBackups as r (r.id)}
                                     <tr class="hover:bg-slate-50/80">
                                         <td class="px-3 py-2">{r.server_name ?? '—'}</td>
                                         <td class="px-3 py-2 truncate">
@@ -1668,6 +1626,11 @@
                             para diagnóstico.
                         </p>
                     </header>
+                    {#if data.errors?.restores}
+                        <div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
+                            {data.errors.restores}
+                        </div>
+                    {/if}
                     <div class="overflow-auto rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
                         <table class="min-w-full text-xs">
                             <thead class="bg-slate-50 text-slate-500">