SisApps UI Shell

🔥 Antes — Código duplicado

• Mismo base.html en 3 repos distintos
• Mismo CSS copiado (~600 líneas cada uno)
• Mismo JS de tema, admin dropdown y confirm dialog
• Filtros Jinja datefmt y timesince definidos 3 veces
• Cambio de estilo = tocar 3 apps por separado
• Sin navegación entre apps

✅ Ahora — Fuente única

• Un paquete instalado en todas las apps
• shell.css centralizado con todos los estilos comunes
• shell.js único: tema, sidebar, admin dropdown, confirm
• Filtros registrados automáticamente por el paquete
• Cambio de estilo = tocar 1 fichero
• Sidebar lateral con navegación entre todas las apps

🔌 init_app() — integración en Flask

# En app.py de cada app:
from sisapps_ui import init_app as init_shell

init_shell(app,
    app_id='sisalerts',
    app_name='SIS Alerts',
    app_icon='🔔',
    nav_links=[
        {'label': 'Dashboard', 'href': '/'},
        {'label': 'Alertas', 'href': '/alerts'},
    ],
    admin_links=[
        {'label': 'Buzones', 'href': '/admin/mailboxes'},
    ],
)

Registra el blueprint, inyecta context processors y registra los filtros Jinja comunes.

📄 base.html tras la migración

{# base.html de cada app — solo lo específico #}
{% extends "sisapps/shell_base.html" %}

{% block app_css %}
<link rel="stylesheet"
      href="{{ url_for('static', filename='global.css') }}">
{% endblock %}

{% block user_info %}
  {# avatar/iniciales específico de la app #}
{% endblock %}

global.css queda reducido a variables --primary y estilos exclusivos de la app.

🌟 Cookie de tema — sisapps_theme

Almacena dark o light. Al navegar de una app a otra, el tema se mantiene porque la cookie se comparte en el mismo hostname independientemente del puerto.

// shell.js — toggle de tema
function toggleTheme() {
  const theme = doc.body.dataset.theme === 'dark'
    ? 'light' : 'dark';
  doc.body.dataset.theme = theme;
  setCookie('sisapps_theme', theme, 365);
}

Migra automáticamente desde los keys antiguos de localStorage (sisalerts-theme, secmon-theme, hvmon-theme).

☰ Cookie de sidebar — sisapps_sidebar

Almacena collapsed o expanded. Si el usuario colapsa la sidebar en una app, llega colapsada a las demás.

// Sidebar: 48px icono / 220px expandida
.sisapps-sidebar {
  width: 220px;
  transition: width 0.22s ease;
}
.sisapps-sidebar.collapsed {
  width: 48px;
}

En móvil (<768px) la sidebar se oculta y se activa con el hamburger de la navbar.

👥 SISAPPS_ADMINS — Lista compartida

Lista de UPNs en app-config.json › sisapps.admins que son admin en todas las apps automáticamente. init_app() la carga y la pone en app.config['SISAPPS_ADMINS'].

// app-config.json
{
  "sisapps": {
    "admins": ["[email protected]"]
  }
}

✅ auto_admin — Todos los SSO son admins

Para equipos pequeños donde el SSO ya filtra quién tiene acceso: cualquier usuario que pase el App Proxy se convierte en admin automáticamente.

// app-config.json
{
  "sso": {
    "auto_admin": true
  }
}

El SSO de Entra ID Application Proxy inyecta X-MS-CLIENT-PRINCIPAL-NAME y actua como barrera de acceso.

🚀 Primer deploy (manual)

# En el servidor, en el venv de cada app:
pip install -e C:\apps\jmfernandez\sisapps-ui

# Verificar:
python -c "import sisapps_ui; print('OK')"

Con -e (editable) los cambios en el paquete se reflejan sin reinstalar. Solo hay que hacer restart del servicio.

🔄 Actualizaciones via deploy.ps1

# deploy.ps1 de cada app incluye:
git -C C:\apps\jmfernandez pull
pip install -e C:\apps\jmfernandez\sisapps-ui
# ... restart WinSW service

El paquete está en sparse checkout del repo en el servidor. Un git pull actualiza el paquete y todas las apps que lo usan.