# Migración al layout nuevo de Tailwind **Estado:** propuesta · 23/10/2026 **Norma visual:** [layout.md](layout.md) (tokens, componentes, navegación). Este documento es el **plan** para llegar a ella en este repositorio. **Prerrequisito:** fase 7 de [MigracionLaravel10.MD](MigracionLaravel10.MD) (Livewire 3) cerrada. El layout usa `wire:navigate`, `app/Livewire` y la inyección de Alpine de Livewire 3. **Orden (decidido 23/10/2026):** fase 7 → **este plan** → fases 8 y 9 (Laravel 11 y 12). --- ## 1. Objetivo 1. Las vistas Bootstrap (`layouts.planti`) se reescriben con Tailwind según `layout.md`. Tablas y formularios usan los tokens y los componentes `x-*`. 2. Los componentes Livewire que hoy se pintan en un iframe pasan a pintarse directamente dentro del layout. 3. Al terminar no queda Bootstrap, ni iframes de contenido, ni clases armadas con `session('color…')`. ### 1.1 Decisiones (23/10/2026) | # | Decisión | |---|---| | D1 | La infraestructura del layout **se construye desde `layout.md`**. No hay código previo que portar. | | D2 | **Se incluye el selector de empresa (Alt + S).** Solo aparece en los grupos empresariales con más de una compañía, y solo para los usuarios cuyo rol lo habilite. **Preselecciona el filtro de compañía de cada módulo; no restringe consultas** (decidido 24/10/2026, §4). | | D3 | El plan arranca **después de la fase 7** y antes de las fases 8 y 9. | | D4 | **Los permisos conviven en dos modelos**, cada uno con una tarea distinta: perfiles + `aplicaciones` deciden qué *pantallas* ve un usuario (como hoy), y spatie decide qué *acciones* puede hacer (§5). | ### 1.2 Reglas del plan 1. **El aislamiento por tenant no cambia.** `session('GrupoEmpresarial')` sigue saliendo del subdominio y **ninguna** pieza del layout lo modifica. El selector de empresa solo *reduce* el conjunto de compañías dentro del grupo (§4). 2. **El sitio nunca queda a medias.** Desde L1 todo el sitio usa el shell nuevo. Las pantallas que aún no se migran siguen funcionando en un iframe *dentro* del shell nuevo (§3, L1). 3. **Una pantalla sale del iframe solo cuando no le queda nada de Bootstrap**, ni CSS ni JS. El *preflight* de Tailwind y Bootstrap no conviven en el mismo documento. 4. **Gemelos juntos.** Una pantalla de importaciones y su gemela de exportaciones se migran en la misma tarea (CLAUDE.md §7). 5. **Sin cambios funcionales.** Mismos filtros, mismas columnas, mismas exportaciones y mismos permisos. Solo cambia la presentación. 6. **Sin `migrate`.** Los cambios de esquema y de datos (columna `modulos_neutros`, permisos nuevos, `menus.ruta`) se entregan como SQL en este documento y los aplica a mano el responsable (CLAUDE.md §3). --- ## 2. Punto de partida (23/10/2026) ### 2.1 Lo que `layout.md` da por hecho y aquí no existe | Pieza | Estado | |---|---| | `layouts/app.blade.php` | Existe, pero es el layout viejo de laravel/ui (Bootstrap). Se reemplaza. | | `partials/tema-empresa`, `TemaEmpresa`, `PaletaAcento`, `MenuNavegacion`, `config/modulos.php` | No existen. | | Componentes `x-app-layout`, `x-button`, `x-secondary-button`, `x-danger-button`, `x-input`, `x-label`, `x-input-error`, `x-checkbox`, `x-dialog-modal`, `x-confirmation-modal`, `x-icono-modulo` | No existen. Los que hay (`button-primary`, `input-search`…) son los que `layout.md` §6.4 prohíbe. | | Tailwind compilado | No hay. Solo el CDN JIT en `layouts.tailwind`. El proyecto compila con Mix y no tiene `tailwind.config.js`. | | `grupo_empresarial.color_p` / `color_s` | ✅ Existen con datos. | | `grupo_empresarial.modulos_neutros` | ❌ No existe. | | Paquete de roles y permisos | Las tablas de spatie existen (`roles`: `admin`, `directivo`; 25 `permissions`; 6 filas en `model_has_roles`), pero **el paquete no está instalado** y ningún código las consulta. `users.rol` es texto libre. | ### 2.2 Tamaño | Qué | Cantidad | |---|---| | Vistas sobre `layouts.planti` | 306 | | Vistas contenedoras con iframe | 51 | | Vistas sobre `layouts.tailwind` | 8 | | Vistas Livewire (con clases Bootstrap) | 176 (49) | | Vistas con JS atado a jQuery o Bootstrap (`.modal()`, DataTables, select2, `data-toggle`) | 140 | | Vistas con clases armadas con `session('color…')` | 29 | | Menú activo | 4 módulos (nivel 1), 12 grupos (nivel 2), 153 enlaces (nivel 3) | | Sitios que calculan las compañías del grupo por su cuenta | 80 archivos (+12 que leen `session('companias')`) | ### 2.3 Ajustes a `layout.md` para este repositorio (aplicados el 23/10/2026) | Sección | Ajuste | |---|---| | §7.1 | "Solo se muestran filas con `estado = 1`" **no basta**. `MenuNavegacion` debe conservar los filtros del sidebar actual: `id IN compania.aplicaciones`, `perfiles` (`JSONARRAY_VERIFY_DATA` por perfil y por usuario), **ni uno más**. Las aplicaciones salen de la primera compañía activa. `regimen` e `id_grupo_empresarial` no filtran hoy, y añadirlos cambiaría lo que ve cada cliente (corregido 24/10/2026). | | §7.2 | Además de insertar la fila de nivel 3, hay que añadir su `id` a `compania.aplicaciones` (CLAUDE.md, "Cómo agregar un módulo"). | | §8 | Los permisos `empresa-personalizar` y `empresa-seleccionar` se crean con SQL (tarea L0.7), no con migraciones. | | §11 | Las "migraciones sin correr" se sustituyen por el SQL de L0.7. | | §1 (selector) | El selector elige **compañías dentro del grupo**; nunca cambia `GrupoEmpresarial` (§4). | --- ## 3. Fases | Fase | Contenido | Estimado\* | |---|---|---| | L0 | Base: Tailwind compilado, tokens, layout, componentes, menú, tema de empresa, roles | 8–12 días | | L1 | Shell nuevo en todo el sitio, con las pantallas viejas en iframe dentro del shell | 3–5 días | | L2 | Componentes Livewire que ya son Tailwind salen del iframe | 5–8 días | | L3 | Vistas Bootstrap a Tailwind, módulo por módulo | 35–60 días | | L4 | Selector de empresa: preselección del filtro de compañía en unos 12 componentes | 2–3 días | | L5 | Limpieza: quitar Bootstrap, `planti`, `tailwind`, claves de sesión heredadas | 2–3 días | \* Días de desarrollo de una persona, sin la validación de los usuarios. **Total aproximado: 55–91 días.** L3 domina y se puede repartir. L4 puede ir en paralelo con L2 y L3. ### Fase L0 — Base | # | Tarea | |---|---| | L0.1 | Tailwind compilado con **Vite** (Laravel 10 lo trae; se retira Mix). `tailwind.config.js` con `content` sobre `resources/views/**` y `app/Livewire/**`, `darkMode: 'class'`. El CDN deja de usarse en producción. | | L0.2 | `partials/tema-empresa.blade.php`: tokens de `layout.md` §3 para `:root` y `:root.dark`; fuentes Plus Jakarta Sans y Archivo. | | L0.3 | `App\Support\PaletaAcento`: rampa de `--acento-*` y `--secundario-*` a partir de un hex, con contraste AA en claro y oscuro (`--acento-texto` ≥ 4.5:1; `--acento-contraste` blanco o casi negro). Se prueba con los colores reales de `grupo_empresarial`, incluido el amarillo `#FCB404`. | | L0.4 | `App\Services\TemaEmpresa`: lee `color_p`, `color_s` y `modulos_neutros` del grupo de la sesión, con caché `tema-empresa:{id}` de 10 minutos y borrado al guardar `GrupoEmpresarial`. | | L0.5 | `App\Services\MenuNavegacion`: árbol módulo → grupo → enlace con los filtros de §2.3. La consulta del sidebar actual (que hoy concatena valores en el SQL) pasa a parámetros enlazados. `config/modulos.php` con las 4 llaves y `panel`. | | L0.6 | `layouts/app.blade.php` nuevo (encabezado, barra de módulos, sidebar, menú de usuario, modo oscuro) y los componentes `x-*` de §2.1. `config/livewire.php` → `layouts.app`. Alpine lo pone Livewire 3, sin CDN aparte. | | L0.7 | Roles: instalar `spatie/laravel-permission` compatible con las tablas existentes (verificar columnas antes de instalar) y `HasRoles` en `App\Models\User`. SQL para la columna `modulos_neutros` y los permisos `empresa-personalizar` y `empresa-seleccionar` (§7). Alcance según §5: solo acciones, no pantallas. | | L0.8 | `ColorEmpresa` (modal de colores), solo con `empresa-personalizar`. La escritura en `grupo_empresarial` se prueba únicamente con el grupo 2. | **Salida:** una ruta de muestra (`/layout/muestra`) con todos los componentes en claro y oscuro, revisada con los grupos 1, 2 y 3 y con un primario claro. #### Avance de L0 (24/10/2026, rama `feature/layout-tailwind`) | # | Resultado | |---|---| | L0.1 | Vite 5 + Tailwind 3.4 + `@tailwindcss/forms`. Entradas: `resources/css/ctc.css` y `resources/js/ctc.js`. Se retiró Mix (`webpack.mix.js`); `public/css/app.css` y `public/js/app.js` siguen como archivos ya compilados para las vistas antiguas. Sale en **`public/ctc`** (no en `public/build`, que ya usa el tema de `planti` y Vite vaciaría), y **se versiona**, porque el despliegue es por subida de archivos (ver MigracionLaravel10.MD §6): se ejecuta `npm run build` antes de cada commit que toque vistas del layout. | | L0.2 | `partials/tema-empresa.blade.php`: tokens claro/oscuro, colores de módulo por `[data-mod]` y "Módulos en gris". | | L0.3 | `App\Support\PaletaAcento`: rampa con contraste AA. Probada con #FCB404 (AVGUST), #15803D, #BE123C, #1A3A95 y #000000: `--acento-texto` cumple 4.5:1 en los dos modos. | | L0.4 | `App\Services\TemaEmpresa` (caché `tema-empresa:{id}`, 10 min). Reutiliza `PaletaTenant::normalizarHex`, porque `color_p` trae espacios y valores vacíos. Los dos modelos `GrupoEmpresarial` borran la caché al guardar. También da `razon_social`: la sesión no siempre la trae. | | L0.5 | `App\Services\MenuNavegacion` con los filtros exactos del sidebar actual, con parámetros enlazados. Con el usuario 14 del grupo 2 muestra las mismas opciones que el sidebar actual; la única diferencia es un grupo sin enlaces (Configuración de Exportaciones), que se oculta. | | L0.6 | `layouts/app.blade.php` nuevo y componentes `x-app-layout`, `x-button`, `x-secondary-button`, `x-danger-button`, `x-input`, `x-label`, `x-input-error`, `x-checkbox`, `x-modal`, `x-dialog-modal`, `x-confirmation-modal` y `x-icono-modulo`. El layout viejo de laravel/ui pasó a `layouts/app-ui` (7 vistas de auth). El menú lateral es Blade + Alpine dentro del layout, no un componente Livewire. **`wire:navigate` no se activa hasta L5**: navegar sin recargar hacia una pantalla Bootstrap la rompería. | | L0.7 | `spatie/laravel-permission` 6.25 sobre las tablas existentes (mismo esquema, sin migraciones). `HasRoles` en `App\User`, que es el modelo de autenticación: **los roles se asignan con `model_type = 'App\User'`**. Las 6 filas heredadas usan `App\Models\User` y no aplican. Pendiente: el SQL de §7 y asignar roles (P1). | | L0.8 | `Layout\ColorEmpresa`: solo con `empresa-personalizar`, comprobado al abrir y al guardar. El grupo sale de la sesión al guardar. Sin probar la escritura (no hay roles asignados todavía). | | Muestra | `/layout/muestra` (`Layout\Muestra`, página completa Livewire sobre `layouts.app`, datos fijos de ejemplo). Revisada con capturas en claro, oscuro, móvil (390 px) y con el diálogo abierto, con el grupo 2 (#BE123C) y con AVGUST (#FCB404). Sin errores de JavaScript. | ### Fase L1 — Shell nuevo con convivencia | # | Tarea | |---|---| | L1.1 | Una vista puente: dentro de `layouts.app`, un iframe sin bordes que ocupa todo `
` y carga la pantalla vieja sin el shell de `planti` (una variante `planti-contenido` que solo trae CSS y JS de Bootstrap). | | L1.2 | Las rutas de menú apuntan al shell nuevo. El iframe se ajusta al alto de su contenido y los enlaces internos navegan el documento padre (`target="_top"` o `postMessage`). | | L1.3 | El iframe recibe el modo oscuro y los colores por parámetro, para que la convivencia no se vea rota (aunque esas pantallas no tengan modo oscuro todavía). | | L1.4 | El sidebar viejo (`Plantilla\Sidebar`) se retira cuando todas las rutas pasan por el shell. | | L1.5 | Control de acceso por ruta **en modo registro** (§5.3, paso 1): un middleware con la misma lógica de `MenuNavegacion` anota en el log los accesos que negaría, sin negarlos. | **Salida:** todo el sitio con la navegación nueva y ninguna pantalla perdida. La prueba de humo debe dar 0 regresiones. #### Avance de L1 (24/10/2026) | # | Resultado | |---|---| | L1.1 | **`/marco?u=`** (`resources/views/layout/marco.blade.php`): el layout nuevo con un iframe que ocupa todo `
` y tiene su propio scroll. No se creó una variante `planti-contenido`: el mismo `planti` tiene un **modo solo contenido**. Dentro de `/marco` oculta el sidebar, la barra superior y el pie, y conserva scripts y modales. Con HTTPS lo decide el servidor (`Sec-Fetch-Dest: iframe`) y ni siquiera arma el menú viejo; sin esa cabecera lo hace un script del `` antes del primer pintado. `u` solo admite un path local: una URL externa, `javascript:` o `/marco` dentro de `/marco` caen en `/home`. | | L1.2 | Los enlaces del menú nuevo van a `/marco`, igual que el Dashboard y "Cambiar mi contraseña". Al navegar dentro del iframe se actualizan la URL (`history.replaceState`), el título y el enlace marcado, y se abre su grupo y su módulo. **No hace falta ajustar el alto del iframe:** ocupa todo el contenido y hace su propio scroll. Un enlace con `target="_top"` sale del layout. | | — | **Middleware `EnvolverEnMarco`:** una pantalla del menú (o `home` y `user/password`) abierta directo se redirige a `/marco` antes de ejecutar el controlador, así que no corre dos veces. Solo con `Sec-Fetch-Dest: document`, que los navegadores mandan **solo por HTTPS**. Por HTTP, una pantalla abierta directo (un marcador, por ejemplo) se ve como hoy. `?sin_marco=1` la abre sin el layout nuevo. Las subpantallas, exportaciones, PDF y la app móvil no se tocan. | | — | **Todas las pantallas Bootstrap dentro del layout (24/10/2026).** Las subpantallas, las ventanas emergentes y las respuestas de formularios también se envuelven. `planti` lleva la marca ``. Con HTTPS, `EnvolverEnMarco` revisa la respuesta después del controlador: si es una página de planti pedida en la ventana principal, guarda su HTML (caché de 5 minutos, ligado a la sesión) y devuelve `/marco` con un iframe que lo pide una sola vez (`?__ctc_marco=`). Así la pantalla no se ejecuta dos veces y funciona también con POST. Por HTTP lo hace un script de planti, solo para GET; esa pantalla sí se ejecuta dos veces. Descargas, JSON, la app móvil y las pantallas ya migradas no llevan la marca y no se tocan. El login de escritorio entra directo a `/marco?u=/home`. | | — | **Botón para mostrar y ocultar el menú lateral** en el encabezado. En escritorio lo oculta y se recuerda (`localStorage.lateral_oculto`); en móvil abre el cajón. Elegir un módulo en la barra lo vuelve a mostrar. | | — | El login y el layout nuevo salen a la ventana superior si se cargan dentro de un iframe: la sesión vencida no deja el login dentro del marco, ni un layout dentro de otro. | | L1.3 | No hecho. Dentro del modo oscuro, las pantallas Bootstrap se siguen viendo claras; se resuelve al migrarlas en L3. | | L1.4 | El sidebar viejo sigue en `planti` para las pantallas abiertas fuera de `/marco`. Se retira en L5. | | L1.5 | **`RegistrarAccesoRuta`** anota en `storage/logs/acceso-*.log` (60 días) cada página que un usuario abre fuera de su menú, sin negarla: `es_menu: true` si es un enlace del menú de otra empresa o perfil, `false` si no está en ningún menú. Se apaga con `CONTROL_ACCESO_RUTAS=off`. | **Probado:** - `rpo`, `home` y `rkpi` en Chrome dentro de `/marco`: se ven sin el sidebar viejo, con el enlace marcado y sin errores nuevos de JavaScript. El error de `rkpi` ("Invalid or unexpected token") ya existía: viene del script de impresión de `KPI/index.blade.php`, que no cambió. - El middleware y la validación de `u`, con 10 casos simulando las cabeceras de HTTPS. - El registro de accesos, con una ruta del menú propio, una del menú de otra empresa y una fuera de todo menú. **Pendiente de comprobar en el servidor con HTTPS:** la redirección directa a `/marco`, porque Herd sirve el sitio local por HTTP. ### Fase L2 — Livewire fuera del iframe | # | Tarea | |---|---| | L2.1 | Los componentes que hoy usan `layouts.tailwind` se pintan directamente en `layouts.app`. Se quita la ruta del iframe (o redirige a la nueva) y se actualiza `menus.ruta`. | | L2.2 | Colores fijos y `session('color…')` pasan a tokens (`layout.md` §10). | | L2.3 | Scripts en línea y `$(document).ready` pasan a `livewire:navigated`, `@script` o Alpine, para que funcionen con `wire:navigate`. | | L2.4 | Gráficas: los colores se leen de los tokens en el navegador (`layout.md` §6.8), incluidas las de `App\Charts\Base`, y se repintan al cambiar el modo. | #### L2 se divide en dos (decidido 24/10/2026) Las pantallas de iframe usan 803 clases armadas con el color de la sesión (`text-{{ $color }}-700`, en 84 archivos), cargan sus librerías por CDN y no están preparadas para el modo oscuro. Rediseñarlas a tokens al mismo tiempo que se sacan del iframe sería hacer L3 a ciegas. Por eso: - **L2a (mecánica, todas):** la pantalla sale del iframe con **el mismo aspecto que hoy**. Ver el avance abajo. - **L2b (L2.2 a L2.4):** rediseño a tokens, modo oscuro y gráficas con tokens, pantalla por pantalla junto con L3. `L2.3` se hace al activar `wire:navigate` en L5: hasta entonces cada pantalla carga completa y los `$(document).ready` siguen funcionando. #### Avance de L2a (24/10/2026) **Infraestructura:** - **Familia de color `empresa`:** `text-empresa-700`, `bg-empresa-100`… La escala 50–950 sale del primario (`PaletaAcento::escala`) en variables CSS. Los componentes migrados ponen `$this->color = 'empresa'` en lugar de `session('color')`. La familia completa va en el `safelist` de Tailwind, porque las vistas la arman con `{{ $color }}`. - **`@tailwindcss/forms` con `strategy: 'class'`:** solo estiliza los campos con `form-input`/`form-select`/`form-checkbox` (los `x-*` nuevos). Los campos de las pantallas heredadas se ven como antes. - **``:** modo claro fijo (sin botón de tema), las librerías de `layouts.tailwind` (`layout.librerias-heredadas`: jQuery, select2, Highcharts, SweetAlert 1 y 2, toastr) y el partial de eventos del navegador. - **`config('ctc.pantallas_layout')`:** lista de paths migrados. El menú los enlaza directo y `EnvolverEnMarco` no los toca. **Pantallas:** 35 pasan a `resources/views/pantallas/…`: - **Piloto:** Pedidos en curso, hecha a mano. - **Resto:** 34 con un script que extrae el `` (o la sección `content`) de la vista del iframe y deja en el `` sus estilos y scripts propios. Quita las librerías ya incluidas, pasa los colores de los componentes (y de sus hijos) a `empresa` y apunta las dos rutas, contenedor y contenido, a la vista nueva. - **Retiradas:** las 68 vistas viejas, contenedor y contenido. - **Ajustes a mano:** - RIM v2 y PO v2 traían reglas de `html, body` pensadas para el iframe; pasaron a un contenedor propio. - Se quitaron 4 `@stack('scripts')` que habrían duplicado los scripts. - `TorreControlController` (perfil 20) apuntaba al contenedor `pedido-curso`. - **Corrección de paso:** tres vistas se pedían como `expo.*` y viven en `ExPo/`. En Linux, que distingue mayúsculas, no se habrían encontrado; las nuevas usan la misma ruta en los dos lados. **Segunda tanda (24/10/2026):** - **Qué faltaba:** las subpantallas Tailwind a las que llevan los botones de acción de las pantallas de L2a: seguimiento y campos dinámicos del DO (importación y exportación), pendientes, históricos, formularios de orden de compra y de productos, seguimiento de contenedor y reportes. - **Por qué:** antes se abrían dentro del iframe del contenedor; al sacar su pantalla del iframe en L2a quedaban sueltas, fuera del layout. Eran documentos HTML completos con Tailwind por CDN. - **Conversión:** 24 vistas convertidas igual que en la primera tanda, más 6 contenedores sencillos (reportes globales de importación y Brenntag, recobro, recobro de bodegaje, consulta de fecha BL y declaraciones juramentadas). - **Controladores:** `IndicadoresController` y `ReporteControlContenedoresController` apuntan a las vistas nuevas. - **Seguridad:** 13 de esas rutas no tenían `->middleware('auth')` y ahora lo tienen. Antes se podían abrir sin sesión, aunque sin datos del grupo. Entre ellas: `seguimiento-imp`, `dinamicos-imp`, sus gemelas de exportación y varios reportes. - **Prueba de humo:** 200, salvo tres que ya fallaban igual en la línea base porque necesitan parámetros (`impo/purchase-procesar`, `config/productos-procesar`, `charts`). - **En Chrome:** el seguimiento del DO abierto desde Pedidos en curso queda dentro del layout. **Fuera de L2a, quedan para L3:** - **Contenedores con parámetros o closures:** Dashboard v2 y pendientes de pedido. - **Páginas Bootstrap que incrustan iframes:** Torre de Control, KPI, `iframe.index` y `menuws`. **Pruebas:** - **Prueba de humo de las 35:** todas como en la línea base, salvo `pedido/proceso`. Antes daba 200 porque solo pintaba el contenedor; su contenido (`pedido/procesows`) ya pasaba el límite de 120 s en la línea base, y ahora esa consulta corre en la misma página. Para el usuario no cambia. - **En Chrome:** Pedidos en curso (también el botón Consultar, que responde 200), Dashboard, PO v2 y RIM v2, sin errores de JavaScript. - **Ojo:** el CDN de Highcharts responde 403 a navegadores sin interfaz ("HeadlessChrome"). Las pruebas automáticas usan el agente de Chrome normal. ### Fase L3 — Vistas Bootstrap Se migra por módulo (Importaciones, Exportaciones, CIA, Administración y Dashboard). Dentro de cada módulo se empieza por los enlaces más usados. Por cada pantalla y su gemela: 1. Plantilla de página `layout.md` §5, tablas §6.3, formularios §6.4 y estados §6.6. 2. Modales Bootstrap a `x-dialog-modal` o Alpine (§6.5). DataTables y select2 se reemplazan o se envuelven con estilos de tokens. Se decide una sola vez, en la primera pantalla que los use, y se documenta aquí. 3. La pantalla sale del iframe puente y se actualiza su `menus.ruta`. 4. Se pasa la lista de revisión de `layout.md` §10 y su fila de [MigracionListaPruebas.MD](MigracionListaPruebas.MD). #### Cómo se avanza en L3 (24/10/2026) - **Orden por uso real.** El menú registra cada clic en `seguimiento_apps`. En los últimos 180 días, las pantallas Bootstrap más usadas son: | Pantalla | Clics | |---|---| | `/rpo` | 3.358 | | `/rexpo` | 1.515 | | Archivo digital | 1.196 | | `/rtorrecontrol` | 914 | | Productos Websimex | 840 | | `/rreport` | 678 | | `/rhistorico` | 664 | Se convierten en ese orden, cada una con su gemela. - **Por familias:** una pantalla, sus subpantallas y los componentes Livewire que incrusta. Un componente incrustado con modales Bootstrap no puede verse bien en los dos layouts a la vez. - **Lotes:** primero las pantallas de consulta. Crear y editar van en un lote aparte, porque escriben en producción y necesitan la prueba de escritura del responsable con el grupo 2. - **Convivencia:** `pantalla($url)` (en `JMetodos`) da el enlace directo si la pantalla ya está migrada y uno por `/marco` si sigue en Bootstrap. `config('ctc.pantallas_layout')` admite prefijos (`'searchpo*'`). - **Kit** (`resources/views/components`): `x-encabezado-pagina`, `x-tarjeta`, `x-campo`, `x-select`, `x-alerta`, `x-enlace-boton`, `x-boton-icono` y la paginación `vendor.pagination.ctc`. - **Avisos globales:** los avisos SweetAlert que estaban dentro de `planti` ahora están en `partials.eventos-planti`, y `planti` y el layout nuevo los incluyen. El layout nuevo carga SweetAlert 1 y 2. jQuery no se carga: las vistas convertidas usan Alpine y `fetch`. - **Tailwind:** cada carpeta convertida se añade a `content` en `tailwind.config.js`. Escanear todas las vistas compilaría las clases de Bootstrap. #### Lote 1: Orden de compra de importación, consulta (24/10/2026) **Convertido:** - **Vistas:** - `Po.index`, usada por `rpo`, `searchpo*`, `rposearchout*` y por `POController@show`. Esta última solo le pasa `$po`; ya fallaba y ahora tolera los datos ausentes. - `Po.historico` (`rhistorico`). - `Po.anular` (`rpoviewinac`). - La tabla de columnas dinámicas, compartida en `Po._tabla`. - **Componentes:** `po.facturacion` (diálogo de facturas y gastos por fila), `po.actualizar-orden-compra` y `po.linea-orden-compra-act`. **Cambios de comportamiento:** - **Ninguno en los datos.** Mismos campos, nombres, acciones y rutas. - **Interfaz:** - Los modales Bootstrap pasan a Alpine. - El acordeón de facturas y gastos pasa a pestañas. - "Actualizar fechas" recorre las rutas con `fetch`, una tras otra, en lugar de `$.ajax` síncrono, y muestra el avance. - **Se quitó código muerto:** el modal de documentos y su manejador (`.openModal`, que ningún elemento usaba) y los estilos para ocultar DataTables. **Probado:** - Prueba de humo de `rpo`, `searchpo` y `rhistorico`: 200. - En Chrome, en claro y oscuro: el listado, el diálogo de facturas (abrir y cerrar) y la sincronización (consulta de pendientes, 200). Sin errores de JavaScript. **Convención de colores (24/10/2026):** - Cada fila se marca entera con el color de su estado (`COLORCON` o `COLOR`): barra lateral y fondo suave. - Las filas sin estado en los datos no se marcan, igual que antes. - **Verificado por el responsable con Tenaris.** **Pendiente de prueba de escritura (responsable, grupo 2):** - Agregar, editar y eliminar una factura y un gasto. - "Actualizar orden de compra" en la sincronización. - "Actualizar fechas". - Anular una orden. **Ya existía y se mantiene:** - `eliminarFactura`/`eliminarGastoPo` se escuchan en todos los componentes de la página: cada fila marca inactivo el mismo registro. - `FacturacionPo::find($id)` no filtra por grupo empresarial (H13). **Sigue en Bootstrap (lote 2):** `rpo/create` y `rpo/{id}/edit` (`Po.create`, 948 líneas; `Po.edit`, 2.284). Desde el listado se abren por `/marco`. #### Lote 2: Orden de cargue de exportación, consulta (24/10/2026) Gemela del lote 1. **Convertido:** - **Vistas:** `ExPo.index` (`rexpo`, `searchexpo*`, `rexposearchout*`), `ExPo.historico` (`rexhistorico`) y `ExPo.anular` (`rexpoviewinac`). La tabla, compartida en `ExPo._tabla`. - **Componente:** `ex-po.ex-po-facturacion`. Su diálogo y el de importación salen de un mismo parcial (`livewire/partials/facturacion-orden`); el grupo 28 agrega número y fecha de BL y "Related Parties". **Diferencias que se conservan respecto de importación:** - El listado no colorea filas (en Bootstrap tampoco: la leyenda y el color estaban comentados). El histórico sí, con el mismo estilo de fila marcada de `/rpo`. - Los enlaces de rastreo que vienen en los datos (`http…`) se muestran como botón. - Ver orden (PDF/XLS) y notificar por correo solo con `operacion_ex = 'E'`. Antes sus encabezados salían siempre y las celdas no: la tabla quedaba desalineada. **Corregido de paso:** en el listado Bootstrap, las celdas incluían `COLOR` y `COLORCON` pero los encabezados no, y las columnas se corrían. Ahora se omiten en los dos. **Rendimiento (R2):** - Facturas, conceptos y gastos se consultan al abrir el diálogo. - La sincronización de facturas desde Websimex pasó al momento de abrir el diálogo (decidido el 24/10/2026). `/rexpo` quedó en 15 consultas. - `/rexpo` (Tenaris) pasó de **116 a 65 consultas** y de 19,7 s a 11,5 s en local. Lo que queda es esa sincronización: una consulta a la orden y otra a Websimex por fila. **Probado:** - Las cuatro pantallas responden 200, en un solo proceso. - En Chrome: el listado, el histórico y el diálogo de facturas, que carga al abrir. Sin errores de JavaScript. **Pendiente de prueba de escritura (responsable, grupo 2):** las mismas acciones del lote 1, en exportación, más el envío de la orden por correo. #### Lote 3: Archivo digital (24/10/2026) **Convertido:** - `Documentos.archivodigital` y el componente `documentos.archivodigital`: filtros, tabla, descarga en ZIP y comentarios de revisión. - La ventana de comentarios es de Alpine; antes era un modal Bootstrap con jQuery. **Seguridad:** los comentarios se insertaban como HTML sin escapar (`innerHTML`), así que un comentario con HTML o script se ejecutaba en el navegador de quien lo abría. Ahora se muestran como texto. **Rendimiento:** - **Qué pasaba:** el filtro traía **todos** los pedidos del importador con todos sus documentos y aplicaba el rango de fechas en PHP; en la consulta estaba comentado. Con Tenaris agotaba la memoria y la pantalla no abría. - **Fecha de apertura:** el rango se filtra ahora en la consulta de pedidos. - **Fecha de subida:** se filtran los documentos que se cargan. Están en otra base (`cti`), así que no se pueden filtrar los pedidos por ellos en la misma consulta. - **Estado del componente:** la lista ya no se guarda en él; se calcula en cada render, como antes. El ZIP vuelve a calcularla con los filtros actuales. - **Resultados comparados** con la versión anterior, con los mismos parámetros: - grupo 2, un mes y 2023–2026: idénticos; - Tenaris, septiembre–octubre: los mismos 3.413 y 4.613 documentos. En el modo por apertura cambia el orden, porque ninguna de las dos consultas tiene `ORDER BY`. - Tenaris por apertura: de 11,1 s a 2,0 s. - **Pendiente:** la tabla no se pagina (como antes). Con Tenaris son ~1.200 filas por mes y 4 MB de HTML. **Ya existía y se mantiene:** `guardarComentario` busca el documento por id sin comprobar que sea del grupo (H13). **Probado:** - 200 con el grupo 2 y con Tenaris. - En Chrome, en modo oscuro, con la ventana de comentarios abierta (sin guardar). Sin errores de JavaScript. **Pendiente de prueba (responsable):** guardar un comentario y descargar el ZIP. #### Lote 4: Torre de Control, importación y exportación (24/10/2026) **Convertido:** - `TorreControl.index` (`rtorrecontrol`) y su gemela `ExTorreControl.index` (`rtorrecontrol_ex`, controlador `Ex_TorreControlController`). - **Partes de cada pantalla:** - indicadores por estado, con el color de categoría como barra lateral; - por cada estado, su tabla y su gráfica (Chart.js 2, el mismo que cargaba `planti`), con los textos y líneas de la gráfica tomados de los tokens; - en exportación, la gráfica general cuando `grafica_global = SI`; - el grupo 27 sigue viendo la tabla dinámica de Central en un iframe. **Comportamiento que se conserva:** - El perfil 14 no ve la torre y el perfil 20 va a pedidos en curso. - El doble clic lleva a `rposearchout/{estado}/{valor}` en importación y abre `/rexdatosordenes/{estado}` en exportación. **Cambia:** - El "Generar reporte" de exportación imprimía desde una ventana emergente con estilos Bootstrap; ahora imprime la página. - El layout tiene estilos de impresión: oculta menú, encabezado y barra de módulos. - Se quitó código muerto: `PrintElem`/`Popup` en importación (ningún botón lo llamaba) y un JSON de ejemplo que el controlador asignaba y nunca usaba. **Rendimiento (R5, parcial):** - **Qué pasaba:** el controlador de importación registraba en Central una tabla dinámica por estado, **para todos los clientes**, con un POST tras otro: 9 s en local con Tenaris. Solo el grupo 27 las ve. - **Ahora:** se piden solo para el grupo 27, y en paralelo (`Http::pool`). Tenaris pasó de 9,3 s a 0,08 s fuera de SQL. - **Lo que queda:** los 32 s de SQL, que son las consultas configuradas por cliente en `definicion_control_tower` (`sql_nro` y `sql_detalle`, una por estado). Con Tenaris pasan el límite de 30 s de PHP de Herd en local; en producción depende de su `max_execution_time` y de la latencia a la base. **Probado:** - Las dos pantallas responden 200 con el grupo 2. - En Chrome, en claro y en oscuro, con las gráficas dibujadas. Sin errores de JavaScript. #### Lote 5: Productos creados en Websimex (24/10/2026) **Convertido:** - `websimex.productos` (`websimexproductos`) y su componente `Websimex\Productos`. - No tiene gemela: la misma pantalla trae las dos pestañas, importación (`ProductosWS`, Websimex) y exportación (`ProductosExpoCIA`). - Las pestañas son de Alpine (antes, Bootstrap con jQuery). Los filtros van en un formulario: Enter también busca. - Los iconos de aprobado y bloqueado se pintan en la vista; se quitó la propiedad `$icono`, que guardaba su HTML en el estado del componente. **Comportamiento que se conserva:** filtros, columnas (clase y familia solo para el importador 2691) y las dos descargas a Excel. **Rendimiento (R6, hecho por decisión del responsable):** - **Qué pasaba:** la búsqueda sin filtros traía **todos** los productos del cliente a una propiedad pública: con Tenaris, 13.290 filas, unos 25 s hasta pintarlas. Esas filas viajaban en cada petición de Livewire. - **Ahora:** los resultados no se guardan en el estado. La tabla se pagina en la base (50 por página, `WithPagination`, una página por pestaña) y la descarga hace su propia consulta, completa. - Al pulsar Buscar se guardan los filtros (`filtro_impo`, `filtro_expo`): la tabla y la descarga usan esos, como antes, aunque después se escriba otra cosa. - Tenaris: buscar pasa de ~25 s a 2,2 s, y la página pesa 400 KB. - Orden estable para paginar: por `ID_PRODUCTO` (importación) y por `id` (exportación). - Nueva vista de paginación para Livewire: `vendor.pagination.ctc-livewire`. **Seguridad:** el importador era una propiedad pública que las búsquedas usaban antes de que `render()` la volviera a tomar de la sesión. En Livewire 3 el navegador puede cambiarla, así que se podían consultar los productos de otro importador. Ahora sale siempre de `session('websimexid')`. **Probado:** - La pantalla responde 200 con Tenaris. - En Chrome, en claro y en oscuro: búsqueda en las dos pestañas, paso a la página 2 y descarga de importación (13.290 filas en el Excel). Todo de solo lectura. Sin errores de JavaScript. #### Lote 6: kit ui-ctc y Pedidos en Curso (24/10/2026) **Qué es:** el diseño "Rediseño de Pedidos en Curso" (Claude Design, entregado por el responsable) pasa a ser la norma de las pantallas. Queda escrito como skill en `.claude/skills/ui-ctc/SKILL.md`, que dice qué aplicar en cada tipo de pantalla y cómo conservar su funcionalidad. **Kit (`resources/views/components`, `resources/css/ctc.css`):** - nuevos: `x-pagina`, `x-indicador`, `x-barra-busqueda`, `x-chip-filtro`, `x-pestana`, `x-etiqueta`, `x-orden-columna`, `x-icono`, `x-icono-simbolos`; - CSS: `ctc-tabla-caja` + `ctc-tabla` (cabecera fija siempre), `ctc-fija` (columnas fijas), `ctc-accion`; - `x-encabezado-pagina` con migas y título de 26 px; las dos paginaciones con el estilo del diseño. **Íconos: Heroicons v2** (decisión del responsable). `blade-ui-kit/blade-heroicons` pasa de 1.7 a 2.6 (solo ese paquete en `composer.lock`). Los nombres de la versión 1 que usaban 12 vistas se cambiaron por los de la 2 (`mail` → `envelope`, `exclamation` → `exclamation-triangle`, `refresh` → `arrow-path`…). **Pedidos en Curso (`impo/pedidos`) con el diseño:** - Deja de ser heredada: modo oscuro completo y sin las librerías antiguas. - Se conserva todo: indicadores que filtran por status, los filtros (procesos, sucursales, tipo de declaración, importador, segmento, status, pendientes, fechas de apertura), búsqueda con Enter, orden por ETA y fecha de arribo, las dos pestañas, las acciones de cada DO con sus mismas condiciones, el detalle (detalle, facturas con ítems, unidades de carga), el diálogo de pendientes y anotaciones, la descarga y el enlace al histórico. - **Cambia:** - la lista se pagina (50 por página y por pestaña); antes salía completa; - otro clic en el indicador activo quita el filtro; - etiquetas de filtros aplicados, cada una con su botón para quitarla; - las fechas de arribo, levante, liberación y entrega se marcan "Pendiente" cuando el hito anterior ya se cumplió (es presentación: se calcula de las mismas fechas); - se quitó la gráfica de anticipadas de la tarjeta "Arribo sin levante" (no está en el diseño). - **Rendimiento:** `etapasEh` ya no es propiedad pública, la descarga ya no sube la lista desde el navegador, y las acciones de fila ya no son un componente Livewire por fila. Con Tenaris, el estado del componente pasa de ~5,7 MB a 0,23 MB. - **Seguridad:** - el detalle del DO (`/detalle-importacion`) y los pendientes se pintaban con HTML armado en PHP sin escapar; ahora son partials Blade (`partials/detalle-importacion/*`, `partials/pendientes-operacion`); - `orderBy` (viene de la URL) solo acepta las dos columnas de orden. - Las otras pantallas que piden `/detalle-importacion` (DTA, zona franca, programación de arribos) reciben el mismo HTML nuevo. **Probado (Tenaris, solo lectura, claro y oscuro):** - indicadores, filtros y etiquetas, orden, pestañas, detalle con facturas y unidades, diálogo de pendientes; - la cabecera y las tres primeras columnas fijas al desplazar; - sin errores de JavaScript; - `verificar.php` con 200 en pedidos, histórico, programación de arribos, DTA, zona franca, regalías, RIM, purchase order (v1 y v2), productos y dashboard. **Para el responsable:** probar la descarga a Excel y las acciones de fila con el grupo 2. **Sigue:** aplicar el skill a la gemela (`exportaciones.pedidos-curso`) y a las pantallas ya convertidas (L3 y L2a). **Histórico de pedidos (`impo/ordenes-compra-historico`), con el skill:** - Pantalla de tabla y filtros (sin indicadores). Usa la misma tabla que Pedidos en curso, sin la columna de declaración, que nunca tuvo. - El detalle de cada DO sale de los datos que ya trae la consulta. Se normaliza a la forma de la API, para pintarlo con los mismos partials, ahora con el panel compartido `partials/detalle-importacion/panel`. - Se conserva todo: consulta solo al pulsar Consultar (o con filtros en la URL), filtros, búsqueda, orden, paginación en la base (10 por página), acciones de fila, pendientes, descarga y "Regresar a Pedidos". - `etapasEh` deja de viajar en el estado. El orden queda con lista blanca, también en la descarga. Los pendientes se pintan escapados: trait `Concerns\ConDetallePendientes`, compartido con Pedidos en curso. - **Probado (Tenaris, solo lectura):** consulta (2.904 registros), detalle con facturas y unidades, orden, página 2, diálogo, claro y oscuro, sin errores de JavaScript. **Control de operaciones de exportación (`expo/pedidos`), gemela, con el skill (diseño completo):** - Se conserva todo: indicadores, filtros (procesos, sucursales, status, importador, fechas de apertura), búsqueda, los filtros por rol (incluido el 35 de bolsa de análisis), semáforos de cut off, el detalle (reserva de contenedores, SAE y unidades de carga), seguimiento, información personalizada, descarga e histórico. - **Cambia:** - los indicadores filtran por status (antes no eran clicables); - la lista se pagina (50 por página); - etiquetas de filtros aplicados; - el encabezado "Cut off físico" ordenaba por el cut off documental: ahora cada uno ordena por su fecha; - se quitó la ventana de selectividad, a la que no se llegaba (su botón estaba comentado); - ya no carga Font Awesome (no se usaba). - **Rendimiento:** las acciones de fila ya no son un componente Livewire por fila (cada uno consultaba `ex_po`), y `etapasEh` ya no viaja en el estado. - **Seguridad:** la descarga vuelve a consultar en el servidor (antes recibía la lista desde el navegador), y el orden tiene lista blanca. - **Probado (Tenaris, solo lectura, claro y oscuro):** indicadores y filtro, etiquetas, orden, detalle con unidades de carga; sin errores de JavaScript. **Programación de Arribos (`impo/programacion-arribos`), con el skill:** - Deja de ser heredada: carga solo Highcharts (cdnjs, versión fija), no el resto de librerías antiguas. - Las gráficas laterales toman textos y bordes de los tokens, y se redibujan al cambiar de tema. Las porciones sin dato se llaman "Sin información". - Métricas del mes con `x-indicador estatico` (nuevo modo del indicador, sin acción). - Se conserva todo: - filtros aplicados solo al pulsar Consultar, búsqueda y orden por ETA, paginación (25); - semáforo de ETA, filas de pedidos notificados, validación documental con los pendientes en el `title`; - detalle del DO (ahora con el panel compartido), descarga, gráficas; - para clientes que administran transporte: asignación de transportador y planta, y envío de prealerta. - El estado del detalle (`ctcDetalleDo()`) pasa a `resources/js/ctc.js`, compartido con Pedidos en curso. - **Ojo, ya pasaba antes:** al abrir la pantalla se escriben registros en `po_transporte` (`migrarTransporteFase3`, `firstOrCreate` de los DO con transportador en la fase 3). Por eso no se probó en vivo en el navegador. - **Probado:** - la página se pintó con `guardar_html.php` (transacción revertida) y se revisó ese HTML en Chrome, claro y oscuro, sin peticiones de escritura (bloqueadas en la prueba); - en esa revisión: indicadores, filtros, tabla con cabecera y columnas fijas, detalle desplegable, gráficas, paginación; - sin errores de JavaScript. - **Para el responsable (grupo 2):** Consultar con filtros, etiquetas, orden, detalle con datos, asignar transporte, prealerta y descarga. **Control de contenedores V2 (`impo/contenedores`), con el skill (tabla y búsqueda):** - Se conserva todo: búsqueda mientras se escribe, pestañas En proceso / Finalizados con su conteo, orden por ETA, enlace al seguimiento de cada contenedor y las 23 columnas, con los semáforos de bodegajes y demoras. - **Cambia:** - la lista se pagina (50 por pestaña); antes pintaba las 1.763 filas de Tenaris; - el resultado se guarda 5 minutos por usuario y búsqueda (solo los campos de la tabla, 1,6 MB): cambiar de pestaña o de página pasa de ~7 s a ~1 s. El botón Consultar trae los datos al momento; - la pantalla usa directamente la consulta: el componente que la envolvía consultaba importadores en cada petición sin mostrarlos; - ya no carga Font Awesome. - **Error previo corregido:** con la sesión abierta por `/login` (página antigua), `control_contenedor` no existe y la pantalla daba error 500. Ahora muestra la lista vacía. La entrada real (`/`) sí carga esa configuración. - Kit: mensaje de tabla vacía en `ctc-vacio` (visible aunque la tabla sea más ancha que la caja), aplicado también a Pedidos en curso, su gemela y Programación de Arribos. - **Probado (Tenaris, solo lectura, claro y oscuro):** 1.763 unidades en proceso, pestañas, página 2, búsqueda con etiqueta, orden, cabecera y columnas fijas; sin errores de JavaScript. **Control de operaciones EXPO, bolsa específica (`expo/control-pedidos`), con el skill (diseño completo):** - Se conserva todo: indicadores por status con el conteo de posibles inconsistencias, filtros (procesos, sucursales, fechas, status, inconsistencias, importador), búsqueda, orden, semáforos de gestión del grupo de apoyo, cut off, inspecciones, notificaciones, ETS y DEX, asistente, cambio de viaje, filas con posible inconsistencia, y el detalle (reserva, SAE y unidades, con el mismo partial que su gemela). - **Errores previos corregidos:** - la lista solo se armaba en `mount()` y en algunas acciones; al ser privada, cualquier otra petición de Livewire la dejaba vacía. Ahora se arma en cada `render()`, como en su gemela; - división por cero en los indicadores cuando todos los DO estaban cerrados; - "Cut off físico" ordenaba por el cut off documental. - **Cambia:** - los indicadores ya filtraban; ahora otro clic en el activo quita el filtro; - paginación (50) y etiquetas de filtros; - los semáforos son datos (`x-semaforo`, componente nuevo del kit) en vez de HTML armado en PHP; - sin foto del asistente se muestran sus iniciales (antes, una foto de archivo de una persona cualquiera); - ya no carga Font Awesome. - **Probado (Tenaris, solo lectura, claro y oscuro):** 18 operaciones, indicador y filtro, etiqueta, orden por cut off físico, otra petición sin perder la lista, detalle con unidades; sin errores de JavaScript. **Órdenes de compra V2 (`impo/purchase-order-v2`, `impo/order-v2`), con el skill (diseño completo):** - El componente ya estaba bien hecho (paginación en el servidor, agregados en SQL, detalle bajo demanda, alcance de terceros); el cambio es de presentación. - Se conserva todo: - embudo de cuatro fases que filtra (otro clic lo quita), conversión del embudo; - búsqueda por pedido, supplier, SED o contenedor; año y segmento al cambiar; - estado comercial (Todas, Abiertas, Cerradas, En riesgo), ahora como pestañas de la lista; - detalle de la orden bajo la fila, aviso de coincidencias en otros años; - editar y anular con sus mismas condiciones, importación masiva, nueva orden; - avisos de tercero sin grupos y de enlace mixto. - **Cambia:** - usa los tokens del layout (`--acento` es el color de la empresa activa), así que sigue el modo oscuro. Ya no calcula su propia paleta `--brand` desde `color_p` ni carga IBM Plex; - el filtro de fase y la búsqueda salen como etiquetas; - el botón de importación masiva usa el kit (su diálogo se convierte con las pantallas de creación y edición, que escriben). - `_filtros.blade.php` se eliminó (la barra de búsqueda y las pestañas lo reemplazan). - **Probado (Tenaris, solo lectura, claro y oscuro):** embudo y filtro por fase con etiqueta, pestañas, detalle con líneas, búsqueda sin resultados, cabecera fija; sin errores de JavaScript. No se tocó anular, nueva orden ni importación masiva. **Formulario de la orden V2 (`impo/purchase-procesar-v2`), con el skill (formulario), 28/10/2026:** - Deja de ser heredada: `` sin `heredado`, sin IBM Plex y sin la paleta `--brand` que el componente calculaba desde `colorp` (se quitaron sus propiedades y funciones de color). Sigue el modo oscuro. - Se conserva todo: carga del documento (zona de carga, barra en modo manual, resumen de la lectura con Re-extraer, Reemplazar y Quitar), visor, cotejo campo por campo con su etiqueta de confianza y su procedencia, Número DO con su verificación, puerto con sugerencias, proveedor por crear, resumen de errores y avisos de la validación, productos con cotejo por línea, diálogo de producto con búsqueda en el maestro, trazabilidad, modalidad bloqueada con su diálogo "Cambiar" e historial, Guardar borrador y Confirmar con sus mismas condiciones. - **Cambia:** encabezado de página con las acciones; una tarjeta por sección; tabla de productos con cabecera fija; diálogos del kit (`x-teleport`, Escape cierra); el visor solo aparece cuando hay documento (antes un panel vacío) y se queda fijo al desplazar; en una OC abierta para editar, un campo vacío ya no se pinta como cotejado. - `x-encabezado-pagina`: las acciones pasan a otra línea en pantallas angostas (antes se salían del borde). Aplica a todas las pantallas que lo usan. - **Probado (grupo 2, solo lectura, claro, oscuro y 390 px):** nueva, manual, línea agregada, guardar con errores (sin escribir), OC con modalidad (diálogo "Cambiar") y OC legacy; sin errores de JavaScript ni desplazamiento horizontal. Guardar, confirmar, cambiar la modalidad y leer un documento real quedan para el responsable. #### Lote 7: Reportes específicos y personalizados (25/10/2026) Siguiente por uso (`/rreport`, 678 clics), con su gemela `/rexreport`. Pantalla de formulario y tabla, con el skill ui-ctc. **Convertido:** - `Reportes.index` (`rreport`, `searchreport`) y `ExReportes.index` (`rexreport`, `searchexreport`). - Partes compartidas: `Reportes._formulario` (reporte, fechas y descripción) y `Reportes._resultado` (tabla con cabecera fija y conteo). - El rango de fechas aparece según `campo_filtro`, la misma regla de `rvalidar`/`rexvalidar`, pero calculada en la vista con Alpine en vez de una llamada AJAX en cada cambio. Las rutas `rvalidar` y `rexvalidar` se conservan. - La descripción del reporte, que solo mostraba exportación (con jQuery), sale en las dos cuando tiene texto. **Se conserva:** - El SQL configurado por cliente (`reportes.sql`, `?IdGrupo`, `?Filtro`) y su ejecución, sin cambios. El aislamiento sigue en `?IdGrupo` y en el filtro por grupo de la tabla `reportes`. - Importación pagina de a 20 (`PaginasArray`) y exportación muestra todo, como antes. - La etiqueta `DIAS_RESTANTES`: roja si es mayor que 0 y verde si no. - Las descargas: `/exportReporte/{id}/{título}` (importación) **también envía el Excel por correo** al grupo del reporte; el botón lo dice en su `title`. `/exportExReporte/{id}` solo descarga. **Cambia:** - Los reportes 229 y 230 de importación abrían sus pantallas (ya en el layout nuevo desde L2a) dentro de un iframe de planti (`iframe.index`). Ahora redirigen a ellas directamente. - Los reportes de exportación en construcción (24 a 28) muestran el aviso en la misma página, en lugar de `layouts.enconstruccion`. Esa vista se conserva para los KPI. - Si el reporte no trae filas, aparece el mensaje de tabla vacía. Antes no salía nada. - Las fechas se deshabilitan al elegir un reporte sin `campo_filtro`. Antes viajaban las de la consulta anterior y el SQL quedaba con `AND between …` sin campo. - Se quitó código muerto: el modal de documentos y su `.openModal` (ningún elemento lo usaba) y los estilos de DataTables. **Errores previos corregidos:** - `ReportesController@search` ejecutaba el SQL del reporte **dos veces** (bloque repetido). - `ExReportesController@search` sin reporte elegido fallaba: `compact()` con `$titulo` sin asignar. **Ya existía y se mantiene:** en `ReportesController@search`, la condición de Paccar (`dtpFechaIni != null && id == 305 || id == 306`) no tiene paréntesis. **Probado (grupo 2, solo lectura):** - Las dos pantallas, el resultado y los 302 de 229 y 230: 200 en un solo proceso, con transacción revertida. - En Chrome, en claro, en oscuro y a 360 px: fechas visibles y ocultas según el reporte; "Reporte Vencimiento Mercancía" con 3.040 registros, página 2, cabecera fija al desplazar; exportación con resultado vacío. Sin errores de JavaScript. - No se probaron las descargas: la de importación envía correo. **Para el responsable (grupo 2):** las dos descargas, con y sin fechas. #### Kit ui-ctc en los lotes 1 a 5 (25/10/2026) Las pantallas de los lotes 1 a 5, convertidas antes del kit, pasan al diseño del skill. Un commit por lote. Funcionalidad, rutas, nombres de campo y acciones sin cambios, salvo lo que se dice abajo. **Común:** - `x-pagina` como contenedor. - Íconos Heroicons (`x-icono`) en vez de SVG pegados. En las filas, en sprite. - Tablas con `ctc-tabla-caja` y `ctc-tabla`: cabecera fija y, donde hay acciones, esa columna fija a la izquierda. - Barra de la tabla con el conteo y la leyenda de colores. Mensaje de tabla vacía en `ctc-vacio`. Paginación dentro de la tarjeta. - Vacíos como `—`. Excel con `table-cells` en verde. **Orden de compra y Orden de cargue (lotes 1 y 2):** - Filas marcadas por estado: el fondo se mezcla con la superficie (opaco), para que la columna fija de acciones tenga el mismo color. - Estado con `x-etiqueta :color`. Acciones de fila con `ctc-accion`. - La leyenda de estados pasa a la barra de la tabla y aparece también en los dos históricos (la vista ya recibía los estados). - En exportación, PDF y XLS de la orden pasan a íconos (`document-text`, `table-cells`). - Diálogo de facturas y gastos: pestañas `x-pestana` y tablas `ctc-tabla`. La sincronización de órdenes usa `x-etiqueta`. **Archivo digital (lote 3):** - Búsqueda en `x-barra-busqueda` (DO, pedido u OC; Enter consulta), con los demás filtros desplegados al abrir. El ZIP pasa al encabezado. - Etiquetas para texto, régimen y tipos de documento: `limpiarFiltro` y `limpiarFiltros`, con lista blanca. - **Cambia:** la lista se pagina (50 por página). Antes salía completa: con Tenaris, ~1.200 filas por mes. La consulta y el ZIP no cambian. - Probado con Tenaris, septiembre–octubre: 3.413 documentos, los mismos del lote 3. - Con Tenaris desde 2023, la consulta agota la memoria (512 MB) en local. Ya pasaba antes: trae todos los pedidos del rango con sus documentos. **Torre de Control (lote 4):** - Indicadores con `x-indicador`, que ahora admite: - `href` (la tarjeta es un enlace); - slot al pie (varios enlaces, con `estatico`); - `:insignia="false"`, cuando el % es una proporción y no un avance. - La barra de cada indicador es la proporción del estado sobre el total, con el color de categoría del cliente. - Importación: la tarjeta lleva a la búsqueda del estado, como antes. - Exportación: conserva sus dos enlaces ("Ver tabla" y "Ver detalle") y el texto de `sql_porcentaje`. - Tablas por estado con cabecera fija. El doble clic no cambia. **Productos de Websimex (lote 5):** - Una barra de búsqueda por pestaña, con sus filtros y etiquetas. Las etiquetas muestran los filtros con que se buscó. - `limpiarFiltro` con lista blanca vuelve a buscar en esa pestaña. - Pestañas `x-pestana` con el conteo. La descarga a Excel pasa al encabezado, la de la pestaña activa. **Probado (solo lectura):** - Las 14 rutas responden 200 en un solo proceso: lotes 1 a 7, Pedidos en curso y las de anular (solo el formulario). - En Chrome, en claro y oscuro, sin errores de JavaScript: - `/rpo` (grupo 2): cabecera y acciones fijas al desplazar, y el diálogo de facturas. Se abrió solo el de importación: el de exportación sincroniza facturas al abrir; - histórico con leyenda y `/rexpo`; - Archivo digital (Tenaris): rango, página 2, filtro con etiqueta y quitarla, diálogo de comentarios; - las dos torres (grupo 2); - Productos (Tenaris): 13.290 productos, página 2, filtro "Aprobado" con etiqueta (10.071), pestaña de exportación. - `/rpo` también a 360 px. #### Kit ui-ctc en las pantallas de L2a (25/10/2026, en curso) Las pantallas que salieron del iframe en L2a con su aspecto de siempre (``) pasan al kit y dejan de ser heredadas: modo oscuro, sin las librerías antiguas y sin Font Awesome. Quedaban **52 vistas** heredadas: las 35 de L2a, sus subpantallas y los contenedores sencillos. **Orden:** por uso real (`seguimiento_apps`, últimos 180 días). Cada pantalla se prueba con el cliente que más la usa, solo lectura. Un commit por pantalla. **Hechas:** | Pantalla | Clics (180 d) | Probada con | Errores previos corregidos | |---|---|---|---| | Reportes específicos (`reportes-espe`) | 1.290 | Tenaris | Resultado en el estado dos veces (HTML armado en PHP sin escapar y las filas). Ahora va en caché por usuario y componente, y la tabla está paginada | | Pedidos en Curso DTA (`impo/pedidos-dta`) | 761 | Fruselva | Vencimiento y pendientes eran HTML armado en PHP (ahora son datos y partials). La descarga recibía la lista del navegador. El orden no tenía lista blanca. Sin resultados, los indicadores no se recalculaban | | Detalle de la OC (`detalleoc`) | 534 | Adama | **La búsqueda siempre respondía 500**: escribía el texto dentro del SQL (inyección) y además pasaba 4 parámetros que el SQL no tenía. Ahora usa parámetros enlazados, también en la compañía y la descarga | | Dashboard de importaciones (`dashboard/impo`) | 513 | Imusa | El mapa recibía `'empresa'` como color. Se quitó el enlace "View all", que no llevaba a ninguna parte | | Indicadores KPI V2 (`kpi-graph`) | 411 | Brinsa | **La gráfica no aparecía tras consultar**: era un `