dmencu 2.2.16 → 3.0.0

package/dist/unlogged/unlogged/render-formulario.tsx

@@ -7,7 +7,7 @@ import {
     scrollToTop,
     materialIoIconsSvgPath,
     useOnlineStatus,
-    RenderizadorJSON
+    RenderizadorJSON,
 } from "./render-general";
 import {
     Bloque, BotonFormulario,
@@ -24,7 +24,7 @@ import {
     Texto, Estructura, InformacionHdr, ConfiguracionSorteoFormulario, ResumenEstado, IdOperativo, IdEnc, Libre,
     iterator, empty, ConfiguracionHabilitarBotonFormulario,
     PMatriz,
-    ModoDM
+    ModoDM,
 } from "./tipos";
 import {
     accion_abrir_formulario,
@@ -34,16 +34,18 @@ import {
     calcularPermiteBorrarBF,
     calcularResumenVivienda,
     crearEncuesta,
+    hayDatosByPassAlmacenados,
     getDatosByPass,
     getFormulariosForValuePkRaiz,
     getMainFormForVivienda,
     intentarBackup,
     respuestasForPk,
-    setCalcularVariables
+    setCalcularVariables,
+    setDatosByPass,
+    setEstructura
 } from "./bypass-formulario"
 import {
-    dmTraerDatosFormulario, dispatchers,
-    gotoSincronizar,
+    crearStoreFormulario, dispatchers,
     gotoConsistir,
 } from "./redux-formulario";
 import { useState, useEffect } from "react";
@@ -56,6 +58,9 @@ import {
     AppBar, ButtonGroup, Checkbox,
     Dialog, DialogActions, DialogContent, DialogContentText,
     DialogTitle, Divider, Fab,
+    Icon,
+    ListItemIcon,
+    ListItemText,
     Menu, MenuItem, Paper, Popover,
     Table, TableBody, TableCell, TableHead, TableRow, Toolbar
 } from "@mui/material";
@@ -74,11 +79,23 @@ import {
     accion_id_pregunta,
     accion_agregar_formulario,
     NO_CAMBIAR__VERIFICAR_SI_ES_NECESARIO,
-    NO_CAMBIAR__SOLO_TRAER_STATUS,
-    MODO_DM_LOCALSTORAGE_KEY
+    NO_CAMBIAR__SOLO_TRAER_STATUS
 } from "./bypass-formulario"
 
 import { html, HtmlTag } from "js-to-html";
+import { FormRenderer, getFormRenderer, registrarCargarMotor } from "./render-config";
+
+// Registra la implementación de cargarMotor al cargar el módulo.
+// Esto evita la dependencia circular render-config ← bypass-formulario.
+registrarCargarMotor(async function cargarEstructuraYDatosEnMemoria() {
+    var formRenderer = getFormRenderer();
+    const estructura = await formRenderer.leerEstructura();
+    const datos = await formRenderer.leerDatos();
+    if(estructura && datos){
+        setEstructura(estructura);
+        setDatosByPass(datos);
+    }
+});
 
 const DELAY_SCROLL_3 = 50;
 
@@ -218,7 +235,8 @@ const TextField = (props: {
 const Typography = ({ children, ...others }: {
     children: any,
     component?: string
-    variant?: 'h6'
+    variant?: 'body2'|'h5'|'h6'
+    color?: ColorValues
 } & CommonAttributes) => React.createElement(others.variant || others.component || 'div', others, children);
 
 function Grid(props: {
@@ -247,6 +265,42 @@ function Grid(props: {
     >{children}</div>
 }
 
+interface FastSetupProps {
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+
+export function FastSetup(props: FastSetupProps): JSX.Element {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [open, setOpen] = React.useState(false);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+        setOpen((prev) => !prev);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button onClick={handleClick} disabled={props.disabled}>
+                <ICON.Settings />
+            </Button>
+
+            <Menu
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                onClick={handleClose}
+            >
+                {props.children}
+            </Menu>
+        </>
+    );
+}
+
 var p12 = 'p12' as IdVariable;
 var sp2 = 'sp2' as IdVariable;
 var sp3 = 'sp3' as IdVariable;
@@ -1558,8 +1612,7 @@ function useSelectorVivienda(forPk: ForPk) {
         var estructura = getEstructura();
         return {
             formulario: estructura.formularios[forPk.formulario].casilleros,
-            modoDespliegue: true || state.modo.demo ? state.opciones.modoDespliegue : 'relevamiento',
-            modo: state.modo,
+            modoDespliegue: state.opciones.modoDespliegue,
             opciones: state.opciones,
         }
     })
@@ -1690,44 +1743,6 @@ function MenuLetra(props: { tamannio: number, denominacion: string }) {
     >letra {props.denominacion}</MenuItem>
 }
 
-function FastSettup() {
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const [open, setOpen] = React.useState(false);
-    const handleClick = (event: any) => {
-        setAnchorEl(event.currentTarget);
-        setOpen((prev) => !prev);
-    };
-    const dispatch = useDispatch();
-    const cambiar = (modoDespliegue: ModoDespliegue) => {
-        dispatch(dispatchers.MODO_DESPLIEGUE({ modoDespliegue }));
-        setOpen(false)
-    }
-    const opciones = useSelector((state: CasoState) => state.opciones)
-    return <>
-        <Button onClick={handleClick}>
-            <ICON.Settings />
-        </Button>
-        <Menu open={open} anchorEl={anchorEl} onClose={() => setOpen(false)}>
-            <MenuItem onClick={() => cambiar("relevamiento")}>normal</MenuItem>
-            <MenuItem onClick={() => cambiar("PDF")}>PDF para relevamiento</MenuItem>
-            <MenuItem onClick={() => cambiar("metadatos")}>revisar metadatos</MenuItem>
-            <Divider />
-            <MenuLetra tamannio={12} denominacion="muy chica" />
-            <MenuLetra tamannio={14} denominacion="chica" />
-            <MenuLetra tamannio={16} denominacion="normal" />
-            <MenuLetra tamannio={19} denominacion="grande" />
-            <MenuLetra tamannio={22} denominacion="enorme" />
-            <Divider />
-            <MenuItem><label><Checkbox checked={opciones.conCampoOpciones} onChange={
-                () => dispatch(dispatchers.SET_OPCION({ opcion: 'conCampoOpciones', valor: !opciones.conCampoOpciones }))
-            } inputProps={{ 'aria-label': 'primary checkbox' }} />campo opciones</label></MenuItem>
-            <MenuItem><label><Checkbox checked={opciones.saltoAutomatico} onChange={
-                () => dispatch(dispatchers.SET_OPCION({ opcion: 'saltoAutomatico', valor: !opciones.saltoAutomatico }))
-            } inputProps={{ 'aria-label': 'primary checkbox' }} />salto automático</label></MenuItem>
-        </Menu>
-    </>;
-}
-
 function BarraDeNavegacion(props: { forPk: ForPk, soloLectura: boolean, modoDirecto: boolean }) {
     const dispatch = useDispatch();
     const forPk = props.forPk;
@@ -1749,7 +1764,7 @@ function BarraDeNavegacion(props: { forPk: ForPk, soloLectura: boolean, modoDire
     }
     var botonesFormulario = [];
     if (!opciones.modoDirecto) {
-        botonesFormulario.push({ que: 'hdr', abr: 'HdR', id: ID_BOTON_VOLVER_HDR, label: 'hoja de ruta', retroceso: 0 })
+        botonesFormulario.push({ que: 'hdr', abr: 'HdR', id: ID_BOTON_VOLVER_HDR, label: 'Hoja de Ruta', retroceso: 0 })
     }
     opciones.pilaForPk.forEach((forPk, i) =>
         botonesFormulario.push({ que: 'volver', abr: forPk.formulario.replace(/^F:/, ''), label: forPk.formulario, retroceso: opciones.pilaForPk.length - i })
@@ -1767,6 +1782,9 @@ function BarraDeNavegacion(props: { forPk: ForPk, soloLectura: boolean, modoDire
             elemento.setAttribute('resumen-estado', calcularResumenVivienda(forPk, feedbackAll, r).resumenEstado);
         }
     })
+    const cambiar = (modoDespliegue: ModoDespliegue) => {
+        dispatch(dispatchers.MODO_DESPLIEGUE({ modoDespliegue }));
+    }
     return <>
         <ButtonGroup key="formularios" className="barra-navegacion" solo-lectura={props.soloLectura ? 'si' : 'no'} >
             {botonesFormulario.map((b, i) =>
@@ -1784,6 +1802,7 @@ function BarraDeNavegacion(props: { forPk: ForPk, soloLectura: boolean, modoDire
                     }}
                 >
                     <span className="abr">{b.abr}</span>
+                    {b.que == 'hdr' ? <ICON.Assignment /> : null}
                     <span className="label">{b.label}</span>
                 </Button>
             )}
@@ -1861,7 +1880,24 @@ function BarraDeNavegacion(props: { forPk: ForPk, soloLectura: boolean, modoDire
                 <div key={k}><span>{k}</span><span>{v}</span></div>
             ).array()}
         </Typography>
-        <FastSettup />
+        <FastSetup>
+            <MenuItem onClick={() => cambiar("relevamiento")}>normal</MenuItem>
+            <MenuItem onClick={() => cambiar("PDF")}>PDF para relevamiento</MenuItem>
+            <MenuItem onClick={() => cambiar("metadatos")}>revisar metadatos</MenuItem>
+            <Divider />
+            <MenuLetra tamannio={12} denominacion="muy chica" />
+            <MenuLetra tamannio={14} denominacion="chica" />
+            <MenuLetra tamannio={16} denominacion="normal" />
+            <MenuLetra tamannio={19} denominacion="grande" />
+            <MenuLetra tamannio={22} denominacion="enorme" />
+            <Divider />
+            <MenuItem><label><Checkbox checked={opciones.conCampoOpciones} onChange={
+                () => dispatch(dispatchers.SET_OPCION({ opcion: 'conCampoOpciones', valor: !opciones.conCampoOpciones }))
+            } inputProps={{ 'aria-label': 'primary checkbox' }} />campo opciones</label></MenuItem>
+            <MenuItem><label><Checkbox checked={opciones.saltoAutomatico} onChange={
+                () => dispatch(dispatchers.SET_OPCION({ opcion: 'saltoAutomatico', valor: !opciones.saltoAutomatico }))
+            } inputProps={{ 'aria-label': 'primary checkbox' }} />salto automático</label></MenuItem>
+        </FastSetup>
     </>
 }
 
@@ -1888,7 +1924,7 @@ function BotonVolverEnDiv({ id }: { id: string }) {
 
 function FormularioDespliegue(props: { forPk: ForPk }) {
     var forPk = props.forPk;
-    var { formulario, modoDespliegue, modo, opciones }
+    var { formulario, modoDespliegue, opciones }
         = useSelectorVivienda(props.forPk);
     var soloLectura = getDatosByPass().soloLectura;
     const dispatch = useDispatch();
@@ -1948,28 +1984,20 @@ function FormularioDespliegue(props: { forPk: ForPk }) {
     })
     // @ts-expect-error especial hay que leerlo en el parser de casilleros si esto termina quedando así
     var pantallaCompleta = formulario.especial?.pantallaCompleta;
-    const modoDM: ModoDM = my.getLocalVar(MODO_DM_LOCALSTORAGE_KEY);
+    const modoDM: ModoDM = getFormRenderer().getModoDM();
     return (
         <>
-            <AppBar position="fixed" color={soloLectura ? 'secondary' : (modoDM == 'capa' ? 'success' : 'primary')}>
-                <Toolbar>
+            <AppBarPrincipal
+                modoDM={modoDM}
+                soloLectura={soloLectura}
+                barraNavFormulario={
                     <BarraDeNavegacion forPk={forPk} soloLectura={soloLectura || false} modoDirecto={opciones.modoDirecto} />
-                    <Typography><span style={{ marginLeft: '5px' }}>{modoDM == 'capa' ? ' MODO CAPACITACIÓN' : ''}</span></Typography>
-                </Toolbar>
+                }
+            >
                 <div id="mini-console"></div>
-            </AppBar>
+            </AppBarPrincipal>
             <main>
                 <Paper className="formulario" modo-despliegue={modoDespliegue} ver-num-opciones={opciones.conCampoOpciones ? 'SI' : 'NO'}>
-                    {modo.demo ? <div>
-                        <Typography component="span">Modo de despliegue:</Typography>
-                        <ButtonGroup>
-                            {listaModos.map(modo =>
-                                <Button key={modo} variant={modo == modoDespliegue ? "contained" : "outlined"} onClick={
-                                    () => dispatch(dispatchers.MODO_DESPLIEGUE({ modoDespliegue: modo }))
-                                }>{modo}</Button>
-                            )}
-                        </ButtonGroup>
-                    </div> : null}
                     {pantallaCompleta ? null : <BotonVolverEnDiv id="boton-volver-1" />}
                     {pantallaCompleta ? null : <FormularioEncabezado casillero={formulario} />}
                     <DesplegarContenidoInternoBloqueOFormulario bloqueOFormulario={formulario} formulario={formulario} forPk={forPk} multiple={false} />
@@ -2110,12 +2138,11 @@ setDesplegarCarga((props: {
         [formulario in PlainForPk]: FormStructureState<IdVariable, Valor, IdFin>
     }
 }) => {
-    const [newSurvey, setNewSurvey] = useState(0);
     const { carga, idCarga, informacionHdr, respuestas } = props;
     var estructura = getEstructura();
     let cantLineasResumen = likeAr(informacionHdr).filter((informacion) => informacion.tem.carga == idCarga).array().length;
     const dispatch = useDispatch();
-    const modoDM: ModoDM = my.getLocalVar(MODO_DM_LOCALSTORAGE_KEY);
+    const modoDM: ModoDM = getFormRenderer().getModoDM();
     return <Paper className="carga" style={{ marginBottom: '10px', padding: '10px' }}>
         <div className="informacion-carga">
             <div className="carga">Área: {idCarga}</div>
@@ -2232,66 +2259,496 @@ export function DesplegarTem(props: { tem: TEM }) {
     </div>
 }
 
-export type HojaDeRutaDespliegueType = (props: {}) => JSX.Element;
+export const handleLogout = async (): Promise<void> => {
+    await getFormRenderer().onLogout();
+};
+
+export type AppBarPrincipalProps = {
+    titulo?: React.ReactNode;
+    barraNavFormulario?: React.ReactNode;
+    modoDM: ModoDM;
+    soloLectura?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+};
+
+export function AppBarPrincipal(props: AppBarPrincipalProps): JSX.Element {
+    var color: 'secondary' | 'success' | 'primary' = props.soloLectura ? 'secondary' : props.modoDM === 'capa' ? 'success' : 'primary';
+    var { forPk, pantallaActual } = useSelector((state: CasoState) => state.opciones);
+    const mostrarBotoneraNavegacion = pantallaActual && pantallaActual !== 'sincronizacion_requerida' && !props.barraNavFormulario;
+    return (
+        <AppBar position="fixed" color={color}
+            style={props.disabled ? { pointerEvents: 'none', opacity: 0.9 } : {}}
+        >
+            <Toolbar>
+                {props.barraNavFormulario}
+                {mostrarBotoneraNavegacion ? (
+                    <BotoneraNavegacion disabled={props.disabled}/>  
+                ) : null} 
+                {props.modoDM === 'capa' && !props.barraNavFormulario ? (
+                    <Typography><span style={{ marginLeft: '5px' }}> MODO CAPACITACIÓN</span></Typography>
+                ) : null}
+                <UsuarioLogueadoYConfig mostrarSetup={!forPk} mostrarLogout={!!pantallaActual && !props.barraNavFormulario} onLogout={handleLogout} />
+            </Toolbar>
+            {props.children}
+        </AppBar>
+    );
+}
 
-export var HojaDeRutaDespliegue: HojaDeRutaDespliegueType
+export function BotoneraNavegacion(props: { disabled?: boolean }): JSX.Element {
+    const dispatch = useDispatch();
+    const { pantallaActual } = useSelector((state: CasoState) => state.opciones);
+    return (
+        <ButtonGroup variant="outlined" size="small" color="inherit">
+            <Button
+                onClick={() => 
+                    dispatch(dispatchers.SET_OPCION({ opcion: 'pantallaActual', valor: 'hdr' }))
+                }
+                disabled={pantallaActual === 'hdr' || props.disabled}
+                style={pantallaActual === 'hdr' ? { backgroundColor: 'rgba(255,255,255,0.1)' } : undefined}
+            >
+                <ICON.Assignment /> Hoja de Ruta
+            </Button>
+            
+            <Button
+                onClick={() =>
+                    dispatch(dispatchers.SET_OPCION({ opcion: 'pantallaActual', valor: 'sincronizacion' }))
+                }
+                disabled={pantallaActual === 'sincronizacion' || props.disabled}
+                style={pantallaActual === 'sincronizacion' ? { backgroundColor: 'rgba(255,255,255,0.1)' } : undefined}
+            >
+                <ICON.CloudSync /> Sincronización
+            </Button>
+        </ButtonGroup>
+    );
+}
 
-export const setHojaDeRutaDespliegue = (hojaDeRuta: HojaDeRutaDespliegueType) => HojaDeRutaDespliegue = hojaDeRuta
+export function UsuarioLogueadoYConfig(props: { 
+    mostrarSetup?: boolean,
+    mostrarLogout?: boolean,
+    onLogout?: () => void, 
+    navigationMenu?: React.ReactNode 
+}): JSX.Element {
+    var username: string | null = getFormRenderer().getUsernameLogueado();
+    var idper: string | null = getFormRenderer().getIdperLogueado();
+    var { pantallaActual } = useSelector((state: CasoState) => state.opciones);
+
+    var dispatch = useDispatch();
+    var [openDialog, setOpenDialog] = useState<boolean>(false);
+
+    var handleLogoutClick = (): void => {
+        setOpenDialog(true);
+    };
 
-setHojaDeRutaDespliegue((_props: {}) => {
-    var { cargas, num_sincro, informacionHdr, respuestas } = getDatosByPass();
-    var { modo } = useSelector((state: CasoState) => ({ modo: state.modo }));
-    var feedbackRowValidator = getFeedbackRowValidator()
-    const dispatch = useDispatch();
-    const online = useOnlineStatus();
-    const modoDM: ModoDM = my.getLocalVar(MODO_DM_LOCALSTORAGE_KEY);
+    var handleClose = (): void => {
+        setOpenDialog(false);
+    };
+
+    var handleConfirmLogout = async (): Promise<void> => {
+        setOpenDialog(false);
+        if (props.onLogout) {
+            await props.onLogout();
+        }
+    };
+
+    var datos = getDatosByPass();
+    var tieneEncuestas: boolean = !!(datos && datos.informacionHdr && Object.keys(datos.informacionHdr).length > 0);
+    const modoDM = getFormRenderer().getModoDM();
     return (
-        <>
-            <AppBar position="fixed" color={modoDM == 'capa' ? 'success' : 'primary'}>
-                <Toolbar>
-                    <Typography>
-                        HOJA DE RUTA
-                    </Typography>
-                    {
-                        //<IconButton style={{marginTop:'3px'}}
-                        //    color="inherit"
-                        //    //onClick={/*dispatch que lleva a pantalla opciones*/}
-                        //>
-                        //    <ICON.Settings/>
-                        //</IconButton>
-                    }
-                    {online ?
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+            {props.navigationMenu}
+            <Typography variant="body2" style={{ color: 'inherit', fontWeight: 'bold', marginLeft:'5px' }}>
+                {idper} - {username}
+            </Typography>
+            {props.mostrarSetup ? (
+                <FastSetup>
+                    <MenuItem 
+                        onClick={() => 
+                            dispatch(dispatchers.SET_OPCION({ opcion: 'pantallaActual', valor: 'modo' }))}
+                    >
+                        <ListItemIcon>{modoDM === 'capa' ? <ICON.BusinessCenter /> : <ICON.SportsEsports />} </ListItemIcon>
+                        <ListItemText>Cambio a modo {modoDM === 'capa' ? 'Producción' : 'Capacitación'}</ListItemText>
+                    </MenuItem>
+                    <Divider/>
+                    <MenuItem
+                        disabled={true}
+                    >
+                        <ListItemText>Soporte técnico</ListItemText>
+                    </MenuItem>
+                    <MenuItem 
+                        onClick={() => 
+                            dispatch(dispatchers.RESET_OPCIONES({}))}
+                    >
+                        <ListItemIcon><ICON.Refresh/></ListItemIcon>
+                        <ListItemText>Reset opciones</ListItemText>
+                    </MenuItem>
+                    <MenuItem
+                        onClick={() => {
+                            history.replaceState(null, '', `${location.origin + location.pathname}/../menu#i=sincronizar`);
+                            location.reload();
+                        }}  
+                    >
+                        <ListItemIcon><ICON.SyncAlt /></ListItemIcon>
+                        <ListItemText>Sincronización (link viejo)</ListItemText>
+                    </MenuItem>
+                </FastSetup>
+            ) : null}
+            {props.mostrarLogout ? (
+                <Button color="inherit" onClick={handleLogoutClick} style={{ minWidth: 'auto', padding: '6px' }}>
+                    <ICON.ExitToApp />
+                </Button>
+            ) : null}
+
+            <Dialog open={openDialog} onClose={handleClose}>
+                <DialogTitle>Cerrar Sesión</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        {tieneEncuestas
+                            ? "Hay encuestas cargadas en el dispositivo. Si sale de la aplicación sin sincronizar podría perder el trabajo realizado."
+                            : "¿Está seguro de que desea salir? Para volver a ingresar deberá iniciar sesión nuevamente."
+                        }
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    {tieneEncuestas ? (
                         <>
-                            <Button
-                                color="inherit"
-                                variant="outlined"
-                                style={{ margin: '0 8px' }}
-                                onClick={() => {
-                                    gotoSincronizar()
-                                }}
-                            >
-                                <ICON.SyncAlt />
+                            <Button onClick={handleConfirmLogout} color="secondary">
+                                Salir de todos modos
+                            </Button>
+                            <Button onClick={handleClose} color="primary" variant="contained">
+                                Continuar relevando
                             </Button>
                         </>
-                        : null}
-                    <Typography><span style={{ marginLeft: '5px' }}>{modoDM == 'capa' ? ' MODO CAPACITACIÓN' : ''}</span></Typography>
-                </Toolbar>
-            </AppBar>
+                    ) : (
+                        <>
+                            <Button onClick={handleClose} color="inherit">
+                                Cancelar
+                            </Button>
+                            <Button onClick={handleConfirmLogout} color="primary" variant="contained">
+                                Salir
+                            </Button>
+                        </>
+                    )}
+                </DialogActions>
+            </Dialog>
+        </div>
+    );
+}
+
+export interface LayoutAccionDispositivoProps {
+    tituloAppBar: React.ReactNode;
+    tituloPanel: string;
+    headerAdicional?: React.ReactNode;
+
+    modoDM: ModoDM;
+    online: boolean;
+
+    loading?: boolean;
+    aviso?: { tipo: 'info' | 'success' | 'error', mensaje: string } | null;
+
+    textoBotonAccion: React.ReactNode;
+    colorBotonAccion?: ColorValues;
+    onAccion: () => void;
+
+    deshabilitarBotonVolver?: boolean;
+    mensajeVacio?: string;
+
+    childrenModales?: React.ReactNode;
+}
+
+export function LayoutAccionDispositivo(props: LayoutAccionDispositivoProps): JSX.Element {
+    const datosByPass = getDatosByPass();
+    const estructura = getEstructura();
+    const dispatch = useDispatch();
+    useEffect(() => {
+        scrollToTop();
+    }, []);
+
+    const avisoRedux = useSelector((state: CasoState) => state.opciones.avisoPersistente);
+    const avisoAMostrar = props.aviso || avisoRedux;
+    useEffect(() => {
+        if (avisoRedux) {
+            const timer = setTimeout(() => {
+                dispatch(dispatchers.SET_OPCION({ opcion: 'avisoPersistente', valor: null }));
+            }, 5000);
+            return () => clearTimeout(timer);
+        }
+        return
+    }, [avisoRedux, dispatch]);
+
+    const cantCargas: number = hayDatosByPassAlmacenados() ? likeAr(datosByPass.cargas).array().length : 0;
+    const cantRespuestas: number = hayDatosByPassAlmacenados() && estructura ? likeAr(datosByPass.respuestas[estructura.uaPpal]).array().length : 0;
+
+    return (
+        <>
+            <AppBarPrincipal
+                modoDM={props.modoDM}
+                titulo={props.tituloAppBar}
+                disabled={props.loading}
+            />
             <div className="hoja-de-ruta">
-                <Paper style={{ marginBottom: '10px', padding: '10px' }}>
-                    {modo.demo ? <div>
-                        <Typography>Modo demo </Typography>
-                        <Button variant="outlined" color="secondary"
-                            onClick={() => dispatch(dispatchers.REINICIAR_DEMO({}))}
+                <InfoVersionSincroDespliegue/>
+                <Paper style={{ padding: '20px', margin: 'auto', marginBottom: '10px' }}>
+                    <Typography variant="h5">{props.tituloPanel}</Typography>
+
+                    {props.headerAdicional}
+
+                    {hayDatosByPassAlmacenados() ? (
+                        <div style={{ marginBottom: '20px' }}>
+                            <Typography variant="h6">Información del dispositivo:</Typography>
+                            <Typography>{cantCargas} áreas: {likeAr(datosByPass.cargas).keys().join(', ')}</Typography>
+                            <Typography>{cantRespuestas} {estructura?.uaPpal || 'viviendas'}</Typography>
+                        </div>
+                    ) : (
+                        props.mensajeVacio && props.mensajeVacio.trim() !== "" ? (
+                            <Typography style={{ marginBottom: '20px' }}>{props.mensajeVacio}</Typography>
+                        ) : null
+                    )}
+
+                    {avisoAMostrar && (
+                        <Paper style={{
+                            padding: '10px',
+                            marginBottom: '20px',
+                            backgroundColor: avisoAMostrar.tipo === 'success' ? '#e6fffa' : avisoAMostrar.tipo === 'error' ? '#fff5f5' : '#edf2f7',
+                            color: avisoAMostrar.tipo === 'success' ? '#234e52' : avisoAMostrar.tipo === 'error' ? '#9b2c2c' : '#2d3748',
+                            border: `1px solid ${avisoAMostrar.tipo === 'success' ? '#319795' : avisoAMostrar.tipo === 'error' ? '#e53e3e' : '#cbd5e0'}`
+                        }}>
+                            <Typography>{avisoAMostrar.mensaje}</Typography>
+                        </Paper>
+                    )}
+
+                    <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
+                        <Button
+                            variant="contained"
+                            color={props.colorBotonAccion || 'primary'}
+                            disabled={props.loading || !props.online}
+                            onClick={props.onAccion}
                         >
-                            reiniciar
-                        </Button>
-                    </div> : null}
-                    <div className="nombre-version">
-                        <div>Instituto de Estadística y Censos de la Ciudad Autónoma de Buenos Aires - IDECBA</div>
-                        <div>versión {my.getLocalVar('app-cache-version')} - sincro {num_sincro}</div>
+                            {props.textoBotonAccion}
+                        </Button>                        
+                    </div>
+                    <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
+                        {!props.online && (
+                            <Typography color="secondary" style={{ marginLeft: props.deshabilitarBotonVolver ? '0px' : '10px' }}>
+                                Debe estar conectado a internet para realizar esta acción.
+                            </Typography>
+                        )}
                     </div>
                 </Paper>
+            </div>
+
+            {props.childrenModales}
+        </>
+    );
+}
+
+interface PantallaSincronizacionProps {
+    // Props opcionales para el "sabor" requerida
+    requerida?: boolean;
+    mensajeRequerido?: React.ReactNode;
+}
+
+export function PantallaSincronizacion(props: PantallaSincronizacionProps): JSX.Element {
+    const [loading, setLoading] = useState<boolean>(false);
+    const avisoPersistente = useSelector((state: CasoState) => state.opciones.avisoPersistente);
+    const online: boolean = useOnlineStatus();
+    const dispatch = useDispatch();
+    const modoDM = getFormRenderer().getModoDM();
+
+    const handleSincronizar = async (): Promise<void> => {
+        setLoading(true);
+        try {
+            dispatch(dispatchers.SET_OPCION({ opcion: 'avisoPersistente', valor: null }));
+            const formRenderer = getFormRenderer();
+            const datos = await formRenderer.onSincronizar(await formRenderer.leerDatos(), false);
+            await formRenderer.cargarMotor();
+            const mensajeExito = `Sincronización exitosa. Sincro Nº ${datos.num_sincro}`;
+            dispatch(dispatchers.SET_PANTALLA_ACTUAL({ pantalla: 'sincronizacion', avisoPersistente: { tipo: 'success', mensaje: mensajeExito } }));
+        } catch (err) {
+            console.log(err)
+            dispatch(dispatchers.SET_PANTALLA_ACTUAL({
+                pantalla: props.requerida ? 'sincronizacion_requerida' : 'sincronizacion',
+                avisoPersistente: { tipo: 'error', mensaje: `Error de sincronización: ${unexpected(err).message}` }
+            }));
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Estilo para el mensaje cuando es requerida
+    const paragraphStyles = { fontSize: "1.2rem", fontWeight: 600, padding: "5px 10px", marginBottom: "15px" };
+
+    // Si es requerida, inyectamos el mensaje explicativo arriba
+    const headerAdicional = props.requerida && props.mensajeRequerido ? (
+        <Typography component="div" style={paragraphStyles}>
+            {props.mensajeRequerido}
+        </Typography>
+    ) : null;
+
+    return (
+        <LayoutAccionDispositivo
+            tituloAppBar={props.requerida ? `SINCRONIZACIÓN REQUERIDA${modoDM === 'capa' ? ' - CAPA' : ''}` : 'SINCRONIZACIÓN'}
+            modoDM={modoDM}
+            tituloPanel={props.requerida ? "Sincronización Requerida" : "Sincronizar Dispositivo"}
+            headerAdicional={headerAdicional}
+            aviso={avisoPersistente}
+            loading={loading}
+            online={online}
+            textoBotonAccion={
+                loading ? 
+                    'Sincronizando...'
+                :
+                    <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><ICON.CloudSync /> Sincronizar</span>
+            }
+            colorBotonAccion={modoDM === 'capa' ? 'success' : 'primary'}
+            onAccion={handleSincronizar}
+            mensajeVacio={props.requerida ? " " : "No hay información de formularios localmente."}
+        />
+    );
+}
+
+export function PantallaCambioModo(): JSX.Element {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [aviso, setAviso] = useState<{ tipo: 'info' | 'success' | 'error', mensaje: string } | null>(null);
+    const [password, setPassword] = useState<string>('');
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+    const [modoDM, setModoDM] = useState<ModoDM>('produc');
+    const [errorPassword, setErrorPassword] = useState<string | null>(null);
+    const online: boolean = useOnlineStatus();
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        const fetchModo = async (): Promise<void> => {
+            const m: ModoDM = getFormRenderer().getModoDM();
+            getFormRenderer().setModoDM(m);
+            setModoDM(m);
+        };
+        fetchModo();
+    }, []);
+
+    const handleConfirmarCambio = async (): Promise<void> => {
+        if (password !== '1234') {
+            setErrorPassword('Contraseña incorrecta.');
+            return;
+        }
+        setErrorPassword(null);
+        setDialogOpen(false);
+        setLoading(true);
+        setAviso(null);
+        try {
+            const nuevoModo: ModoDM = modoDM === 'produc' ? 'capa' : 'produc';
+            const formRenderer = getFormRenderer();
+            await formRenderer.onSincronizar(await formRenderer.leerDatos(), true);
+            formRenderer.setModoDM(nuevoModo);
+            setModoDM(nuevoModo);
+            await formRenderer.cargarMotor();
+            setAviso({ tipo: 'success', mensaje: `MODO ${nuevoModo.toUpperCase()} ACTIVADO Y DISPOSITIVO SINCRONIZADO` });
+            dispatch(dispatchers.SET_OPCION({ opcion: 'pantallaActual', valor: 'modo' }));
+        } catch (err) {
+            setAviso({ tipo: 'error', mensaje: `Error al cambiar de modo: ${unexpected(err).message}` });
+        } finally {
+            setLoading(false);
+            setPassword('');
+        }
+    };
+
+    const headerAdicionalText = (
+        <Typography style={{ marginBottom: '20px', fontWeight: 'bold' }}>
+            Modo actual: <span style={{ color: modoDM === 'capa' ? 'green' : 'blue', textTransform: 'uppercase' }}>{modoDM}</span>
+        </Typography>
+    );
+
+    return (
+        <LayoutAccionDispositivo
+            tituloAppBar="CAMBIO DE MODO"
+            modoDM={modoDM}
+            tituloPanel="Cambiar Modo del Dispositivo"
+            headerAdicional={headerAdicionalText}
+            aviso={aviso}
+            loading={loading}
+            online={online}
+            textoBotonAccion={`Cambiar a modo ${modoDM === 'produc' ? 'capa' : 'produc'}`}
+            colorBotonAccion={modoDM === 'produc' ? 'primary' : 'success'}
+            onAccion={() => { setErrorPassword(null); setDialogOpen(true); }}
+            childrenModales={
+                <Dialog open={dialogOpen} onClose={() => { setDialogOpen(false); setPassword(''); setErrorPassword(null); }}>
+                    <DialogTitle>Confirmar cambio de modo</DialogTitle>
+                    <DialogContent>
+                        <DialogContentText style={{ marginBottom: '15px' }}>
+                            Confirma cambio de modo "{modoDM}" a "{modoDM === 'produc' ? 'capa' : 'produc'}". Se sincronizará el dispositivo.
+                        </DialogContentText>
+                        {errorPassword && (
+                            <Typography style={{ color: '#d32f2f', marginBottom: '15px', fontWeight: 'bold' }}>
+                                {errorPassword}
+                            </Typography>
+                        )}
+                        <Typography variant="body2" style={{ marginBottom: '10px' }}>Por favor ingrese la contraseña:</Typography>
+                        <input
+                            type="password"
+                            value={password}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                setPassword(e.target.value);
+                                if (errorPassword) {
+                                    setErrorPassword(null);
+                                }
+                            }}
+                            style={{ width: '100%', padding: '10px', fontSize: '16px' }}
+                        />
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => { setDialogOpen(false); setPassword(''); setErrorPassword(null); }} color="inherit">
+                            Cancelar
+                        </Button>
+                        <Button onClick={handleConfirmarCambio} color="primary" variant="contained">
+                            Confirmar
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+            }
+        />
+    );
+}
+
+interface InfoVersionSincroDespliegueProps {
+}
+
+export function InfoVersionSincroDespliegue(_props: InfoVersionSincroDespliegueProps): JSX.Element {
+    const version = getFormRenderer().getAppCacheVersion();
+    const { num_sincro } = getDatosByPass();
+    return (
+        <Paper style={{ marginBottom: '10px', padding: '10px' }}>
+            <div className="nombre-version">
+                <div>Instituto de Estadística y Censos de la Ciudad Autónoma de Buenos Aires - IDECBA</div>
+                <div>versión {version} - {num_sincro ? `sincro: ${num_sincro.toString()}` : 'sin sincronizar'}</div>
+            </div>
+        </Paper>
+    );
+}
+
+export type HojaDeRutaDespliegueProps = {
+};
+
+export type HojaDeRutaDespliegueType = (props: HojaDeRutaDespliegueProps) => JSX.Element;
+
+export var HojaDeRutaDespliegue: HojaDeRutaDespliegueType
+
+export const setHojaDeRutaDespliegue = (hojaDeRuta: HojaDeRutaDespliegueType) => HojaDeRutaDespliegue = hojaDeRuta
+
+setHojaDeRutaDespliegue((_props: HojaDeRutaDespliegueProps) => {
+    useEffect(() => {
+        scrollToTop();
+    }, []);
+    var { cargas, num_sincro, informacionHdr, respuestas } = getDatosByPass();
+    var feedbackRowValidator = getFeedbackRowValidator();
+    const modoDM: ModoDM = getFormRenderer().getModoDM();
+    return (
+        <>
+            <AppBarPrincipal
+                modoDM={modoDM}
+                titulo="HOJA DE RUTA"
+            />
+            <div className="hoja-de-ruta">
+                <InfoVersionSincroDespliegue/>
                 {likeAr(cargas).map((carga, idCarga, _, posicion) =>
                     <DesplegarCarga key={idCarga} carga={carga} idCarga={idCarga} posicion={posicion} informacionHdr={informacionHdr} feedbackRowValidator={feedbackRowValidator} respuestas={respuestas} />
                 ).array()}
@@ -2306,41 +2763,6 @@ export function ListaTextos(props: { textos: string[] }) {
     </ul>;
 }
 
-export function BienvenidaDespliegue(props: { modo: CasoState["modo"] }) {
-    const dispatch = useDispatch();
-    return <Paper className="bienvenida">
-        {props.modo.demo ?
-            <>
-                <Typography>DEMO del sistema de relevamiento de DMENCU</Typography>
-                <Typography>En esta demo:</Typography>
-                <ListaTextos textos={[
-                    "Algunas viviendas aparecen relevadas (el botón está de color) sirven de ejemplo",
-                    "Lo que se carguen se guardan localmente pero no se trasmiten a la base de datos",
-                    "Se puede volver a la versión inicial (o sea borrar lo que se guardó localmente) desde la hoja de ruta boton [reiniciar demo]",
-                    "Todavía hay cosas que faltan o pueden cambiar",
-                ]} />
-            </>
-            : <>
-                <Typography>Encuesta de Seroprevalencia de COVID-19</Typography>
-            </>
-        }
-        <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => { gotoSincronizar(); }}
-        >
-            <span>Sincronizar </span> <ICON.SyncAlt />
-        </Button>
-        <Button
-            variant="contained"
-            color="primary"
-            onClick={() => dispatch(dispatchers.SET_OPCION({ opcion: 'bienvenido', valor: true }))}
-        >
-            <span>Continuar </span> <ICON.Send />
-        </Button>
-    </Paper>
-}
-
 //CONTROL DE PESTAÑAS
 var allOpenedTabs: { [x: string]: number } = {};
 var infoOpenedTabs = {
@@ -2366,88 +2788,50 @@ export function OpenedTabs() {
 }
 
 export function AppDmEncu() {
-    var { forPk, bienvenido, modo } = useSelector((state: CasoState) => ({ ...state.opciones, ...state.modo, ...state }));
-    if (!bienvenido) {
-        return <BienvenidaDespliegue modo={modo} />
-    } else if (forPk == null) {
-        return <HojaDeRutaDespliegue />
-    } else {
-        return <FormularioDespliegue forPk={forPk} />
-    }
-}
+    var { forPk, pantallaActual } = useSelector((state: CasoState) => state.opciones);
+    var datosByPass = getDatosByPass();
+    const dispatch = useDispatch();
 
-function PantallaInicialSinCarga(_props: {}) {
-    const online = useOnlineStatus();
+    // Determinar si la sincronización es requerida
+    const sincroRequerida = !hayDatosByPassAlmacenados()
+        || (hayDatosByPassAlmacenados() && datosByPass.idper !== getFormRenderer().getIdperLogueado());
 
-    const paragraphStyles = { fontSize: "1.2rem", fontWeight: 600, padding: "5px 10px" };
-    const modoDM: ModoDM = my.getLocalVar(MODO_DM_LOCALSTORAGE_KEY);
-    return (
-        <>
-            <AppBar position="fixed" color={modoDM == 'capa' ? 'success' : 'primary'}>
-                <Typography variant="h6" style={{ margin: 25 }}>
-                    Dispositivo sin carga - {modoDM == 'capa' ? 'MODO CAPACITACIÓN' : ''}
-                </Typography>
-            </AppBar>
-            <main>
-                <Paper style={{ height: '600px', padding: "15px", marginTop: 75 }}>
-                    <div>
-                        {online ?
-                            <>
-                                <Typography component="p" style={paragraphStyles}>
-                                    Sincronizar dispositivo
-                                    <span style={{ padding: '5px' }}>
-                                        <Button
-                                            color={modoDM == 'capa' ? 'success' : "primary"}
-                                            variant="contained"
-                                            onClick={() => {
-                                                gotoSincronizar()
-                                            }}
-                                        >
-                                            <ICON.SyncAlt />
-                                        </Button>
-                                    </span>
-                                </Typography>
-                            </>
-                            :
-                            <Typography component="p" style={paragraphStyles}>
-                                No hay conexión a internet, por favor conécte el dispositivo a una red para sincronizar una hoja de ruta.
-                            </Typography>
-                        }
-                    </div>
-                </Paper>
-            </main>
-        </>
-    );
-}
+    // Si la sincro es requerida, forzar pantallaActual vía Redux
+    useEffect(() => {
+        if (sincroRequerida && pantallaActual !== 'sincronizacion_requerida') {
+            dispatch(dispatchers.SET_OPCION({ opcion: 'pantallaActual', valor: 'sincronizacion_requerida' }));
+        }
+    }, [sincroRequerida, pantallaActual, dispatch]);
+
+    if (sincroRequerida) {
+        const mensaje = !hayDatosByPassAlmacenados()
+            ? <> Debe sincronizar el dispositivo para obtener una hoja de ruta.</>
+            : <> El usuario autenticado no coincide con el usuario asociado al
+                trabajo almacenado en la tablet.
+                <br />
+                Debe sincronizar antes de continuar.
+            </>;
+        return <PantallaSincronizacion requerida={true} mensajeRequerido={mensaje} />;
+    }
 
-export function PantallaInicial() {
-    var { forPk, bienvenido, modo } = useSelector((state: CasoState) => ({ ...state.opciones, ...state.modo, ...state }));
-    if (!bienvenido) {
-        return <BienvenidaDespliegue modo={modo} />
-    } else if (forPk == null) {
+    if (forPk == null) {
+        if (pantallaActual === 'sincronizacion') {
+            return <PantallaSincronizacion />
+        } else if (pantallaActual === 'modo') {
+            return <PantallaCambioModo />
+        }
         return <HojaDeRutaDespliegue />
     } else {
         return <FormularioDespliegue forPk={forPk} />
     }
 }
 
-export async function dmPantallaInicialSinCarga() {
-    try {
-        await loadCSS(BOOTSTRAP_5_1_3_SRC);
-    } catch (err) {
-        throw (err)
-    }
-    ReactDOM.render(
-        <PantallaInicialSinCarga />,
-        document.getElementById('main_layout')
-    )
-}
-
-export async function desplegarFormularioActual(opts: { modoDemo: boolean, forPkRaiz?: ForPkRaiz, operativo: IdOperativo }) {
-    // traer los metadatos en una "estructura"
-    // traer los datos de localStorage
-    // verificar el main Layout
-    const store = await dmTraerDatosFormulario(opts)
+export async function desplegarFormularioActual(
+    formRenderer: FormRenderer,
+    opts: { forPkRaiz?: ForPkRaiz } = {}
+) {
+    await formRenderer.cargarMotor();
+    const store = await crearStoreFormulario(opts)
     try {
         await loadCSS(BOOTSTRAP_5_1_3_SRC);
     } catch (err) {
@@ -2462,14 +2846,6 @@ export async function desplegarFormularioActual(opts: { modoDemo: boolean, forPk
     )
 }
 
-if (typeof window !== 'undefined') {
-    // @ts-ignore para hacerlo
-    window.desplegarFormularioActual = desplegarFormularioActual;
-    // @ts-ignore para hacerlo
-    window.dmPantallaInicialSinCarga = dmPantallaInicialSinCarga;
-}
-
-
 function loadInstance() {
     if (typeof BroadcastChannel === 'undefined') {
         return;