Islands — Componentes Interactivos

Las islands son componentes SolidJS que inyectan interactividad en el HTML estático generado por Astro. Se usan para lógica de cliente compleja: formularios dinámicos, tablas de datos, navegación SPA, dashboards en tiempo real.

Sevastopol organiza sus islands en dos familias: ViewIslands (lógica CRUD por módulo de negocio) e Islands de Administración (gestión central del sistema).

---

Patrón Base

Toda island usa IslandBase como envoltorio para consistencia visual y manejo de errores.

Imports Comunes

imports comunes

import { createSignal, onMount, Show, createMemo, createEffect } from "solid-js";
import {
  ToastProvider,
  useToast,
  Input,
  DataTable,
  Select,
  Checkbox,
  Button,
  Modal,
  TableAction,
  ActionIcons
} from "@/components/atoms";
import { IslandBase } from "@/components/templates/IslandBase";
import { StatCard } from "@/components/molecules";
import { authenticatedFetch } from "@/lib/authFetch";
import { useTenants } from "@/lib/hooks/useTenants";

IslandBase

IslandBase wrapper

export default function EjemploIsla() {
  const { tenants } = useTenants();

  return (
    <IslandBase title="Gestión de Recursos">
      <div class="p-4">
        {/* Lógica de UI */}
      </div>
    </IslandBase>
  );
}

ViewRouter

El ViewRouter intercepta clics en enlaces internos y carga contenido dinámicamente sin recargar la página. Es el corazón de la navegación tipo SPA de Sevastopol.

---

ViewIslands — Patrón

Los ViewIslands manejan lógica de visualización y edición de datos. Cada uno se conecta con un endpoint del Orchestrator API.

ViewIsland.tsx

// Ejemplo: EmployeesViewIsland.tsx
import { createSignal, createResource, For } from 'solid-js';
import { fetchData, postData } from '@/lib/api';

interface Employee {
  id: string;
  rut: string;
  name: string;
}

export default function EmployeesViewIsland() {
  const [employees] = createResource(() => fetchData('/api/query/employees'));
  const [selected, setSelected] = createSignal<Employee | null>(null);

  return (
    <div class="view-container">
      <header class="view-header">
        <h2>Empleados</h2>
        <button onClick={handleCreate}>Nuevo</button>
      </header>

      <table class="data-table">
        <For each={employees()}>
          {(emp) => <EmployeeRow data={emp} onSelect={setSelected} />}
        </For>
      </table>

      {selected() && <EmployeeModal data={selected()} />}
    </div>
  );
}

---

Módulo Remuneraciones

Island	Archivo	Propósito
EmployeesViewIsland	payroll/EmployeesViewIsland.tsx	CRUD de empleados
ContractsViewIsland	payroll/ContractsViewIsland.tsx	Contratos laborales
PayrollViewIsland	payroll/PayrollViewIsland.tsx	Nóminas mensuales
APVContractsViewIsland	payroll/APVContractsViewIsland.tsx	Contratos APV
AttendanceViewIsland	payroll/AttendanceViewIsland.tsx	Control de asistencia
CargosViewIsland	payroll/CargosViewIsland.tsx	Cargos y posiciones
DepartmentsViewIsland	payroll/DepartmentsViewIsland.tsx	Departamentos/áreas
FiniquitosViewIsland	payroll/FiniquitosViewIsland.tsx	Finiquitos laborales
HonorariosViewIsland	payroll/HonorariosViewIsland.tsx	Pagos por honorarios
IsapreContractsViewIsland	payroll/IsapreContractsViewIsland.tsx	Contratos ISAPRE
PrevisionsViewIsland	payroll/PrevisionsViewIsland.tsx	Previsiones AFP/salud
VacationsViewIsland	payroll/VacationsViewIsland.tsx	Vacaciones y feriados
WorkingDayViewIsland	payroll/WorkingDayViewIsland.tsx	Jornadas laborales
PermissionsViewIsland	payroll/PermissionsViewIsland.tsx	Permisos laborales

Endpoints representativos:

Island	Endpoint	Método	Descripción
EmployeesViewIsland	/api/query/employees	GET	Listar empleados
EmployeesViewIsland	/api/command/employees	POST	Crear empleado
ContractsViewIsland	/api/query/contracts	GET	Listar contratos
PayrollViewIsland	/api/command/payroll/calculate	POST	Calcular nómina
PayrollViewIsland	/api/command/payroll/close	POST	Cerrar período
FiniquitosViewIsland	/api/command/finiquitos/calculate	POST	Calcular finiquito
PrevisionsViewIsland	/api/command/previsions/generate	POST	Generar previsiones

---

Módulo Declaraciones

DeclaracionesViewIsland

Archivo: src/components/islands/declaraciones/DeclaracionesViewIsland.tsx

Propósito: Gestión de declaraciones juradas (F29, DJ1879, etc.).

Endpoint	Método	Descripción
/api/query/declaraciones	GET	Listar declaraciones
/api/query/declaraciones/f29	GET	Obtener F29
/api/command/declaraciones/generate	POST	Generar declaración

Tip

Las declaraciones se generan automáticamente a partir de los datos de nómina del período cerrado.

---

Módulo Operaciones (Contabilidad)

OperationsViewIsland

Archivo: src/components/islands/accounting/OperationsViewIsland.tsx

Propósito: Operaciones contables (compras, ventas).

Endpoint	Método	Descripción
/api/query/operations	GET	Listar operaciones
/api/command/operations	POST	Registrar operación

---

Módulo Registry

RegistryViewIsland

Archivo: src/components/islands/registry/RegistryViewIsland.tsx

Propósito: Registro de eventos del sistema en tiempo real.

Endpoint	Método	Descripción
/api/query/registry	GET	Listar eventos

---

Islands de Administración

El módulo Admin contiene islands para la gestión central del sistema: empresa, capital, plan contable, representantes legales y monitoreo. Solo accesibles para roles ADMIN / SUPER_ADMIN.

Estructura de Archivos

• Directorysevastopol/src/components/islands/admin/

  • BootstrapCierreIsland.tsx
  • CapitalViewIsland.tsx
  • ChartOfAccountsViewIsland.tsx
  • CommonDataExplorerIsland.tsx
  • CompanyViewIsland.tsx
  • ConfigContableViewIsland.tsx
  • EtlViewIsland.tsx
  • LegalRepresentativesViewIsland.tsx
  • MonitoringViewIsland.tsx
  • SessionsViewIsland.tsx
  • SystemConfigViewIsland.tsx
  • TenantsViewIsland.tsx

Patrón Común Admin

XxxViewIsland — patrón admin

export default function XxxViewIsland() {
  return (
    <ToastProvider>
      <XxxView />
    </ToastProvider>
  );
}

function XxxView() {
  const toast = useToast();
  const [isLoading, setLoading] = createSignal(true);
  const [data, setData] = createSignal([]);
  const [tenants, setTenants] = createSignal<Tenant[]>([]);
  const [selectedTenantId, setSelectedTenantId] = createSignal("");

  async function fetchData() {
    const url = selectedTenantId()
      ? `${API_BASE}?tenant_id=${selectedTenantId()}`
      : API_BASE;
    const r = await authenticatedFetch(url);
    // ...
  }

  onMount(() => {
    fetchTenants();
    fetchData();
  });

  return (
    <IslandBase
      module="ADMIN"
      title="Título"
      tenants={tenants()}
      selectedTenantId={selectedTenantId()}
      onTenantChange={setSelectedTenantId}
      stats={<StatCard ... />}
      filters={<Select ... />}
    >
      <DataTable items={data()} headers={HEADERS} />
    </IslandBase>
  );
}

Catálogo

Island	Propósito	Acceso
CapitalViewIsland	Movimientos de capital social	ADMIN
ChartOfAccountsViewIsland	Plan de cuentas contable jerárquico	ADMIN
CompanyViewIsland	Datos corporativos del tenant	ADMIN
LegalRepresentativesViewIsland	Representantes legales y apoderados	ADMIN
MonitoringViewIsland	Dashboard de métricas de salud	ADMIN
SystemConfigViewIsland	Configuraciones dinámicas del sistema	ADMIN
TenantsViewIsland	Gestión multi-empresa (tenants)	SUPER_ADMIN
SessionsViewIsland	Sesiones activas de usuarios	ADMIN
CommonDataExplorerIsland	Parámetros y catálogos globales	ADMIN
ConfigContableViewIsland	Configuración contable del tenant	ADMIN
BootstrapCierreIsland	Apertura/cierre del ejercicio	ADMIN
EtlViewIsland	Procesos ETL desde administración	ADMIN

APIs Consumidas — Admin

Island	Endpoint	Servicio
CapitalViewIsland	/api/admin/capital	CapitalService
ChartOfAccountsViewIsland	/api/admin/chart-of-accounts	ChartOfAccountsService
CompanyViewIsland	/api/admin/company	CompanyService
LegalRepresentativesViewIsland	/api/admin/representatives	LegalRepService
MonitoringViewIsland	/api/admin/metrics, /api/admin/health	—
SystemConfigViewIsland	/api/admin/system-config	SystemConfigService
TenantsViewIsland	/api/admin/tenants	TenantService
SessionsViewIsland	/api/admin/sessions	—
CommonDataExplorerIsland	/api/parameters	—
ConfigContableViewIsland	/api/admin/config-contable	—
BootstrapCierreIsland	/api/reportes/bootstrap-cierre	—
EtlViewIsland	/api/etl/trigger, /api/etl/status/:pid	ETL Controller

Notas por Island

CapitalViewIsland — CRUD de movimientos con filtros por estado y tipo. Tipos: APORTE_INICIAL, AUMENTO_CAPITAL, REDUCCION_CAPITAL, CAPITALIZACION_UTILIDADES, REVALORIZACION.

ChartOfAccountsViewIsland — Vista en árbol jerárquico con badges de tipo (ACTIVO/PASIVO/etc.) e imputabilidad. Soporte IFRS con código alternativo.

MonitoringViewIsland — Métricas: disk_usage_pct, cpu_load_pct, memory_usage_pct, active_connections, failed_jobs_last_24h, api_errors_last_24h. Colores: verde < 50%, naranja 50–80%, rojo > 80%.

TenantsViewIsland — Lista tenants, crea nuevos, activa/desactiva. Solo SUPER_ADMIN.

CommonDataExplorerIsland — Catálogos: vida_util_activos (SII), correccion_monetaria, indicadores (UF, rentas mínimas, etc.).

BootstrapCierreIsland — Operación crítica de apertura del ejercicio. Requiere confirmación explícita.

---

Dashboard Widgets

Widget	Archivo	Propósito
DocumentationWidget	islands/DocumentationWidget.tsx	Links rápidos a documentación
SystemStatusWidget	islands/SystemStatusWidget.tsx	Estado del sistema (health, versión)

SystemStatusWidget consume /api/health (GET).