ViewIslands Reference

Overview

Los ViewIslands son componentes SolidJS interactivos que manejan la lógica de visualización y edición de datos. Cada ViewIsland se conecta con un endpoint del Orchestrator API.

Arquitectura: ADR-004: Frontend Framework

Estructura de un ViewIsland

Todos los ViewIslands siguen un patrón común:

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>
  );
}

Payroll Module

EmployeesViewIsland

Archivo: src/components/islands/payroll/EmployeesViewIsland.tsx

Propósito: CRUD de empleados del tenant.

Endpoint	Método	Descripción
`/api/query/employees`	GET	Listar empleados
`/api/command/employees`	POST	Crear empleado
`/api/command/employees/:id`	PUT	Actualizar empleado
`/api/command/employees/:id`	DELETE	Eliminar empleado

ContractsViewIsland

Archivo: src/components/islands/payroll/ContractsViewIsland.tsx

Propósito: Gestión de contratos laborales.

Endpoint	Método	Descripción
`/api/query/contracts`	GET	Listar contratos
`/api/command/contracts`	POST	Crear contrato
`/api/command/contracts/:id`	PUT	Renovar/modificar

PayrollViewIsland

Archivo: src/components/islands/payroll/PayrollViewIsland.tsx

Propósito: Visualización y cálculo de nóminas mensuales.

Endpoint	Método	Descripción
`/api/query/payroll`	GET	Listar nóminas
`/api/command/payroll/calculate`	POST	Calcular nómina
`/api/command/payroll/close`	POST	Cerrar período

APVContractsViewIsland

Archivo: src/components/islands/payroll/APVContractsViewIsland.tsx

Propósito: Gestión de contratos de Ahorro Previsional Voluntario.

Endpoint	Método	Descripción
`/api/query/apv-contracts`	GET	Listar contratos APV
`/api/command/apv-contracts`	POST	Crear contrato APV

AttendanceViewIsland

Archivo: src/components/islands/payroll/AttendanceViewIsland.tsx

Propósito: Control de asistencia y marcaciones.

Endpoint	Método	Descripción
`/api/query/attendance`	GET	Listar registros
`/api/command/attendance`	POST	Registrar marcación

CargosViewIsland

Archivo: src/components/islands/payroll/CargosViewIsland.tsx

Propósito: Gestión de cargos y posiciones laborales.

Endpoint	Método	Descripción
`/api/query/cargos`	GET	Listar cargos
`/api/command/cargos`	POST	Crear cargo

DepartmentsViewIsland

Archivo: src/components/islands/payroll/DepartmentsViewIsland.tsx

Propósito: Gestión de departamentos/áreas.

Endpoint	Método	Descripción
`/api/query/departments`	GET	Listar departamentos
`/api/command/departments`	POST	Crear departamento

FiniquitosViewIsland

Archivo: src/components/islands/payroll/FiniquitosViewIsland.tsx

Propósito: Cálculo y gestión de finiquitos laborales.

Endpoint	Método	Descripción
`/api/query/finiquitos`	GET	Listar finiquitos
`/api/command/finiquitos/calculate`	POST	Calcular finiquito
`/api/command/finiquitos/generate`	POST	Generar documento

HonorariosViewIsland

Archivo: src/components/islands/payroll/HonorariosViewIsland.tsx

Propósito: Gestión de pagos por honorarios (boletas).

Endpoint	Método	Descripción
`/api/query/honorarios`	GET	Listar honorarios
`/api/command/honorarios`	POST	Registrar pago

IsapreContractsViewIsland

Archivo: src/components/islands/payroll/IsapreContractsViewIsland.tsx

Propósito: Gestión de contratos con ISAPREs.

Endpoint	Método	Descripción
`/api/query/isapre-contracts`	GET	Listar contratos
`/api/command/isapre-contracts`	POST	Crear contrato

PrevisionsViewIsland

Archivo: src/components/islands/payroll/PrevisionsViewIsland.tsx

Propósito: Cálculo y visualización de previsiones (AFP, salud).

Endpoint	Método	Descripción
`/api/query/previsions`	GET	Listar previsiones
`/api/command/previsions/generate`	POST	Generar previsiones

VacationsViewIsland

Archivo: src/components/islands/payroll/VacationsViewIsland.tsx

Propósito: Gestión de vacaciones y feriados.

Endpoint	Método	Descripción
`/api/query/vacations`	GET	Listar vacaciones
`/api/command/vacations`	POST	Solicitar vacaciones

WorkingDayViewIsland

Archivo: src/components/islands/payroll/WorkingDayViewIsland.tsx

Propósito: Configuración de jornadas laborales.

Endpoint	Método	Descripción
`/api/query/working-days`	GET	Listar jornadas
`/api/command/working-days`	POST	Crear jornada

PermissionsViewIsland

Archivo: src/components/islands/payroll/PermissionsViewIsland.tsx

Propósito: Gestión de permisos laborales (licencias, permisos).

Endpoint	Método	Descripción
`/api/query/permissions`	GET	Listar permisos
`/api/command/permissions`	POST	Registrar permiso

Declaraciones Module

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

Admin Module

TenantsViewIsland

Archivo: src/components/islands/admin/TenantsViewIsland.tsx

Propósito: Gestión de tenants (superadmin only).

Endpoint	Método	Descripción
`/api/admin/tenants`	GET	Listar tenants
`/api/admin/tenants`	POST	Crear tenant
`/api/admin/tenants/:id/activate`	POST	Activar/desactivar

CompanyViewIsland

Archivo: src/components/islands/admin/CompanyViewIsland.tsx

Propósito: Configuración de empresa del tenant actual.

Endpoint	Método	Descripción
`/api/query/company`	GET	Obtener datos empresa
`/api/command/company`	PUT	Actualizar datos

ChartOfAccountsViewIsland

Archivo: src/components/islands/admin/ChartOfAccountsViewIsland.tsx

Propósito: Plan de cuentas contable.

Endpoint	Método	Descripción
`/api/query/chart-of-accounts`	GET	Listar cuentas
`/api/command/chart-of-accounts`	POST	Crear cuenta

EtlViewIsland

Archivo: src/components/islands/admin/EtlViewIsland.tsx

Propósito: Monitoreo y ejecución de procesos ETL.

Endpoint	Método	Descripción
`/api/query/etl/status`	GET	Estado de ETL
`/api/command/etl/run`	POST	Ejecutar ETL manual

SessionsViewIsland

Archivo: src/components/islands/admin/SessionsViewIsland.tsx

Propósito: Ver sesiones activas de usuarios.

Endpoint	Método	Descripción
`/api/admin/sessions`	GET	Listar sesiones
`/api/admin/sessions/:id/revoke`	POST	Revocar sesión

SystemConfigViewIsland

Archivo: src/components/islands/admin/SystemConfigViewIsland.tsx

Propósito: Configuración del sistema.

Endpoint	Método	Descripción
`/api/query/system-config`	GET	Obtener config
`/api/command/system-config`	PUT	Actualizar config

MonitoringViewIsland

Archivo: src/components/islands/admin/MonitoringViewIsland.tsx

Propósito: Dashboard de métricas del sistema.

Endpoint	Método	Descripción
`/api/admin/metrics`	GET	Obtener métricas
`/api/admin/health`	GET	Health check

LegalRepresentativesViewIsland

Archivo: src/components/islands/admin/LegalRepresentativesViewIsland.tsx

Propósito: Gestión de representantes legales.

Endpoint	Método	Descripción
`/api/query/legal-representatives`	GET	Listar reps
`/api/command/legal-representatives`	POST	Crear rep

CapitalViewIsland

Archivo: src/components/islands/admin/CapitalViewIsland.tsx

Propósito: Gestión de capital social.

Endpoint	Método	Descripción
`/api/query/capital`	GET	Obtener capital
`/api/command/capital`	PUT	Actualizar capital

Accounting Module

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

Registry Module

RegistryViewIsland

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

Propósito: Registro de eventos del sistema.

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

Dashboard Widgets

DocumentationWidget

Archivo: src/components/islands/DocumentationWidget.tsx

Propósito: Widget de enlaces rápidos a documentación.

SystemStatusWidget

Archivo: src/components/islands/SystemStatusWidget.tsx

Propósito: Widget de estado del sistema (health, versión).

Endpoint	Método	Descripción
`/api/health`	GET	Health check

Changelog

Fecha	Version	Cambios
2026-01-18	1.0	Documentación inicial - 26 ViewIslands