@zauru-sdk/components 6.3.2 → 6.5.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.4.0...@zauru-sdk/components@6.5.0) (2026-09-16)
+
+
+### Features
+
+* extraer CloudWatch y observabilidad de Remix al SDK ([425af0d](https://github.com/intuitiva/zauru-typescript-sdk/commit/425af0dcd1955d2739204b3f69f9d77090553141))
+
+
+
+
+
+# [6.4.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.3.2...@zauru-sdk/components@6.4.0) (2026-09-16)
+
+
+### Features
+
+* extraer login, logout, home e index a factories del SDK ([83312db](https://github.com/intuitiva/zauru-typescript-sdk/commit/83312db6778188df9852aa2afbf7d45ae3782b47))
+
+
+
+
+
 ## [6.3.2](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.3.1...@zauru-sdk/components@6.3.2) (2026-09-16)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Containers/BodyContainer.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
+    appVersion?: string;
+    /** Default true. Captures window.onerror / unhandledrejection. */
+    reportClientErrors?: boolean;
 };
 export declare const BodyContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Layouts/errorLayout/index.d.ts

@@ -1,8 +1,10 @@
-export declare const ErrorLayout: ({ from, isRootLevel, error: parentError, onError, }: {
+export declare const ErrorLayout: ({ from, isRootLevel, error: parentError, onError, reportErrors, }: {
     from?: string;
     isRootLevel?: boolean;
     error?: Error;
     onError?: (error: Error, meta: {
         from?: string;
     }) => void;
+    /** Default true. POSTs to `/api/client-errors` unless `onError` is passed. */
+    reportErrors?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Routes/ZauruHomePage.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export type ZauruHomePageProps = {
+    title: string;
+    includeAgency?: boolean;
+    extra?: ReactNode;
+};
+export declare function ZauruHomePage({ title, includeAgency, extra, }: ZauruHomePageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruIndexPage.d.ts

@@ -0,0 +1,7 @@
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+export type ZauruIndexPageProps = {
+    title: string;
+    description?: string;
+    color?: ZauruHomeLayoutColor;
+};
+export declare function ZauruIndexPage({ title, description, color, }: ZauruIndexPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruLoginPage.d.ts

@@ -0,0 +1,7 @@
+import { cleanLocalStorage } from "@zauru-sdk/redux";
+export type ZauruHomeLayoutColor = "green" | "blue" | "red" | "purple" | "yellow";
+export type ZauruLoginPageProps = {
+    cleanLocalStorageArgs?: Parameters<typeof cleanLocalStorage>[0];
+    color?: ZauruHomeLayoutColor;
+};
+export declare function ZauruLoginPage({ cleanLocalStorageArgs, color, }: ZauruLoginPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruLogoutPage.d.ts

@@ -0,0 +1,7 @@
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+export type ZauruLogoutPageProps = {
+    requireOnline?: boolean;
+    beforeLogout?: () => boolean | void;
+    color?: ZauruHomeLayoutColor;
+};
+export declare function ZauruLogoutPage({ requireOnline, beforeLogout, color, }: ZauruLogoutPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/ZauruReloadCatalogsPage.d.ts

@@ -0,0 +1,8 @@
+export type ZauruReloadCatalogItem = {
+    name: string;
+    loading: boolean;
+};
+export type ZauruReloadCatalogsPageProps = {
+    items: ZauruReloadCatalogItem[];
+};
+export declare function ZauruReloadCatalogsPage({ items, }: ZauruReloadCatalogsPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Routes/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./zauruRouteErrorBoundary.js";
+export * from "./ZauruLoginPage.js";
+export * from "./ZauruLogoutPage.js";
+export * from "./ZauruHomePage.js";
+export * from "./ZauruIndexPage.js";
+export * from "./ZauruReloadCatalogsPage.js";

package/dist/Routes/zauruRouteErrorBoundary.d.ts

@@ -0,0 +1,4 @@
+export declare function zauruRouteErrorBoundary(from: string): {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/esm/Containers/BodyContainer.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useZauruClientErrorReporting } from "../observability/useZauruClientErrorReporting.js";
 export const BodyContainer = (props) => {
-    const { children } = props;
+    const { children, appVersion, reportClientErrors = true } = props;
+    useZauruClientErrorReporting({
+        appVersion,
+        enabled: reportClientErrors,
+    });
     return _jsx("body", { className: "flex flex-col min-h-screen m-0", children: children });
 };

package/dist/esm/Layouts/errorLayout/index.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRouteErrorResponse, Links, Meta, Scripts, useRouteError, Link, } from "@remix-run/react";
 import { useEffect, useState } from "react";
-export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, onError, }) => {
+import { sendClientError } from "../../observability/sendClientError.js";
+export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, onError, reportErrors = true, }) => {
     try {
         const error = useRouteError();
         const [showDetails, setShowDetails] = useState(!!parentError);
@@ -10,7 +11,25 @@ export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, onEr
             if (reportable instanceof Error) {
                 onError?.(reportable, { from });
             }
-        }, [error, parentError, from, onError]);
+            if (!reportErrors || onError)
+                return;
+            if (reportable instanceof Error) {
+                sendClientError({
+                    message: reportable.message,
+                    stack: reportable.stack,
+                    source: "errorBoundary",
+                    url: from,
+                });
+                return;
+            }
+            if (isRouteErrorResponse(error)) {
+                sendClientError({
+                    message: `Error en request: ${error.status}: ${error.statusText}`,
+                    source: "errorBoundary",
+                    url: from,
+                });
+            }
+        }, [error, parentError, from, onError, reportErrors]);
         const baseError = (_jsxs("div", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), _jsxs("div", { className: "w-full max-w-2xl flex flex-col items-center", children: [_jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
                                 ? `Error en request: ${error.status}: ${error.statusText} - PATH: ${error.data.path} - MESSAGE: ${error.data.message}`
                                 : error instanceof Error

package/dist/esm/Routes/ZauruHomePage.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useGetAgencyProfile, useGetUserProfile } from "@zauru-sdk/hooks";
+import { getInitialProfileInfo } from "@zauru-sdk/utils";
+import { LabelArray } from "../Titles/LabelArray.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+import { Container } from "../Containers/Container.js";
+import { DoubleContainer } from "../Containers/DoubleContainer.js";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+export function ZauruHomePage({ title, includeAgency = true, extra, }) {
+    try {
+        const [isClient, setIsClient] = useState(false);
+        const { data: userProfile } = useGetUserProfile();
+        const { data: agencyProfile, loading: loadingAgencyProfile } = useGetAgencyProfile();
+        useEffect(() => {
+            setIsClient(true);
+        }, []);
+        const { profileLabelInfo, membershipsInfo } = getInitialProfileInfo(userProfile);
+        const conditionalRowStyles = [
+            {
+                when: (row) => row.odd,
+                style: {
+                    backgroundColor: "white",
+                    "&:hover": {
+                        cursor: "pointer",
+                    },
+                },
+            },
+            {
+                when: (row) => row.entityId === userProfile?.profile?.selected_entity_id,
+                style: () => ({ backgroundColor: "lightgreen" }),
+            },
+        ];
+        const columns = [
+            {
+                name: "Entidad",
+                selector: (row) => row.entity,
+            },
+            {
+                name: "Contrato Expira",
+                selector: (row) => row.contractExpiration,
+                width: "10rem",
+            },
+            {
+                name: "Pagado hasta",
+                selector: (row) => row.nextPay,
+                width: "10rem",
+            },
+        ];
+        if (!isClient) {
+            return _jsx(LoadingWindow, { description: "Cargando home..." });
+        }
+        const pageTitle = includeAgency
+            ? loadingAgencyProfile || !agencyProfile
+                ? "Cargando..."
+                : `${title} (${agencyProfile?.name ?? "Usuario sin agencia asignada"})`
+            : title;
+        const profileAndMemberships = (_jsxs(_Fragment, { children: [_jsx(SubContainer, { title: "Perfil", children: _jsx(LabelArray, { info: profileLabelInfo }) }), _jsx(SubContainer, { title: "Suscripciones", children: _jsx(ZauruTable, { columns: columns, conditionalRowStyles: conditionalRowStyles, data: membershipsInfo }) })] }));
+        return (_jsx(MainContainer, { children: extra ? (_jsxs(DoubleContainer, { title: pageTitle, children: [profileAndMemberships, extra] })) : (_jsx(Container, { title: pageTitle, children: profileAndMemberships })) }));
+    }
+    catch (error) {
+        return (_jsx(ErrorLayout, { from: "/home/index.tsx", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/ZauruIndexPage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+export function ZauruIndexPage({ title, description = "Inicie sesión para poder continuar.", color, }) {
+    try {
+        return _jsx(HomeLayout, { title: title, description: description, color: color });
+    }
+    catch (error) {
+        return _jsx(ErrorLayout, { from: "/index.tsx", error: error, isRootLevel: false });
+    }
+}

package/dist/esm/Routes/ZauruLoginPage.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFetcher } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { useValidateNotifications } from "@zauru-sdk/hooks";
+import { cleanLocalStorage, profileFetchSuccess, useAppDispatch, } from "@zauru-sdk/redux";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+export function ZauruLoginPage({ cleanLocalStorageArgs, color, }) {
+    try {
+        const fetcher = useFetcher();
+        const dispatch = useAppDispatch();
+        const [isClient, setIsClient] = useState(false);
+        useValidateNotifications({ fetcher });
+        useEffect(() => {
+            if (fetcher.data?.employeeProfile) {
+                dispatch(profileFetchSuccess({
+                    name: "agencyProfile",
+                    data: fetcher.data.agencyProfile,
+                }));
+                dispatch(profileFetchSuccess({
+                    name: "employeeProfile",
+                    data: fetcher.data.employeeProfile,
+                }));
+                dispatch(profileFetchSuccess({
+                    name: "userProfile",
+                    data: fetcher.data.userProfile,
+                }));
+                dispatch(profileFetchSuccess({
+                    name: "oauthProfile",
+                    data: fetcher.data.oauthProfile,
+                }));
+                fetcher.submit({
+                    action: "redirect",
+                    cookie: fetcher.data?.cookie,
+                }, { method: "post" });
+            }
+        }, [fetcher.data]);
+        useEffect(() => {
+            setIsClient(true);
+        }, []);
+        useEffect(() => {
+            cleanLocalStorage(cleanLocalStorageArgs);
+            fetcher.submit({ action: "login" }, { method: "post" });
+        }, []);
+        if (!isClient) {
+            return _jsx(LoadingWindow, {});
+        }
+        return (_jsx(HomeLayout, { loading: true, color: color, title: fetcher.data?.title ? "Error al inciar sesión!" : "Iniciando sesión....", description: fetcher.data?.description ??
+                "Cargando (Perfil zauru, perfil oauth, agencia, membresías, webapptables)..." }));
+    }
+    catch (error) {
+        console.log(error);
+        return (_jsx(ErrorLayout, { from: "/login/index.tsx", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/ZauruLogoutPage.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFetcher, useNavigate } from "@remix-run/react";
+import { useEffect } from "react";
+import { showAlert, useIsOnline } from "@zauru-sdk/hooks";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+export function ZauruLogoutPage({ requireOnline = true, beforeLogout, color, }) {
+    try {
+        const fetcher = useFetcher();
+        const navigate = useNavigate();
+        const isOnline = useIsOnline();
+        useEffect(() => {
+            if (beforeLogout?.() === false) {
+                return;
+            }
+            if (requireOnline && !isOnline) {
+                showAlert({
+                    title: "No es posible cerrar sesión",
+                    description: "No hay conexión a internet",
+                    type: "error",
+                });
+                navigate("/home");
+                return;
+            }
+            fetcher.submit({ action: "logout" }, { method: "post" });
+        }, []);
+        return (_jsx(HomeLayout, { color: color, title: "Cerrando sesi\u00F3n", description: "Espere mientras se cierra su sesi\u00F3n..." }));
+    }
+    catch (error) {
+        return (_jsx(ErrorLayout, { from: "/logout/index.tsx", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/ZauruReloadCatalogsPage.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+export function ZauruReloadCatalogsPage({ items, }) {
+    try {
+        const [isClient, setIsClient] = useState(false);
+        useEffect(() => {
+            setIsClient(true);
+        }, []);
+        if (!isClient) {
+            return _jsx(LoadingWindow, {});
+        }
+        const loading = items.some((item) => item.loading);
+        return (_jsx(LoadingWindow, { description: loading
+                ? "Cargando catálogos..."
+                : "Catálogos cargados correctamente ✅", loadingItems: items }));
+    }
+    catch (error) {
+        return (_jsx(ErrorLayout, { from: "/reload-catalogs", error: error, isRootLevel: false }));
+    }
+}

package/dist/esm/Routes/index.js

@@ -0,0 +1,6 @@
+export * from "./zauruRouteErrorBoundary.js";
+export * from "./ZauruLoginPage.js";
+export * from "./ZauruLogoutPage.js";
+export * from "./ZauruHomePage.js";
+export * from "./ZauruIndexPage.js";
+export * from "./ZauruReloadCatalogsPage.js";

package/dist/esm/Routes/zauruRouteErrorBoundary.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+export function zauruRouteErrorBoundary(from) {
+    function ZauruRouteErrorBoundary() {
+        return _jsx(ErrorLayout, { from: from });
+    }
+    ZauruRouteErrorBoundary.displayName = `ZauruRouteErrorBoundary(${from})`;
+    return ZauruRouteErrorBoundary;
+}

package/dist/esm/index.js

@@ -24,4 +24,6 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
+export * from "./observability/index.js";

package/dist/esm/observability/ZauruObservability.js

@@ -0,0 +1,9 @@
+import { useZauruClientErrorReporting } from "./useZauruClientErrorReporting.js";
+/**
+ * Optional drop-in for apps that do not use `BodyContainer`.
+ * `BodyContainer` already installs the same listeners.
+ */
+export function ZauruObservability(options) {
+    useZauruClientErrorReporting(options);
+    return null;
+}

package/dist/esm/observability/index.js

@@ -0,0 +1,3 @@
+export * from "./sendClientError.js";
+export * from "./useZauruClientErrorReporting.js";
+export * from "./ZauruObservability.js";

package/dist/esm/observability/sendClientError.js

@@ -0,0 +1,48 @@
+/**
+ * Client helper to report errors to `/api/client-errors`, which forwards
+ * them to CloudWatch Logs (with host logs as fallback).
+ *
+ * `keepalive: true` keeps the request alive if the page unloads right after.
+ */
+const ENDPOINT = "/api/client-errors";
+let lastReportedKey = "";
+let defaultAppVersion;
+export function setClientErrorAppVersion(version) {
+    defaultAppVersion = version;
+}
+/**
+ * Sends a client error to the server. Best-effort: never throws.
+ * Deduplicates identical consecutive reports so re-renders of the same
+ * error do not flood CloudWatch.
+ */
+export function sendClientError(payload) {
+    if (typeof window === "undefined")
+        return;
+    const body = {
+        message: payload.message,
+        stack: payload.stack,
+        source: payload.source ?? "unknown",
+        url: payload.url ?? window.location.href,
+        userAgent: payload.userAgent ?? navigator.userAgent,
+        appVersion: payload.appVersion ?? defaultAppVersion,
+        timestamp: payload.timestamp ?? Date.now(),
+    };
+    const dedupKey = `${body.source}|${body.message}|${body.url}`;
+    if (dedupKey === lastReportedKey)
+        return;
+    lastReportedKey = dedupKey;
+    try {
+        fetch(ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(body),
+            keepalive: true,
+            credentials: "same-origin",
+        }).catch(() => {
+            // Silent: reporting must not break UX.
+        });
+    }
+    catch {
+        // Silent.
+    }
+}

package/dist/esm/observability/useZauruClientErrorReporting.js

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { sendClientError, setClientErrorAppVersion, } from "./sendClientError.js";
+/**
+ * Captures `window.onerror` and `unhandledrejection` and POSTs them to
+ * `/api/client-errors`. Used by `BodyContainer` by default.
+ */
+export function useZauruClientErrorReporting(options) {
+    const enabled = options?.enabled !== false;
+    const appVersion = options?.appVersion;
+    useEffect(() => {
+        if (!enabled || typeof window === "undefined")
+            return;
+        if (appVersion)
+            setClientErrorAppVersion(appVersion);
+        const onError = (event) => {
+            sendClientError({
+                message: event.message || "Error no capturado (window.onerror)",
+                stack: event.error instanceof Error ? event.error.stack : undefined,
+                source: "window.onerror",
+            });
+        };
+        const onRejection = (event) => {
+            const reason = event.reason;
+            sendClientError({
+                message: reason instanceof Error
+                    ? reason.message
+                    : typeof reason === "string"
+                        ? reason
+                        : "Promesa rechazada no manejada",
+                stack: reason instanceof Error ? reason.stack : undefined,
+                source: "unhandledrejection",
+            });
+        };
+        window.addEventListener("error", onError);
+        window.addEventListener("unhandledrejection", onRejection);
+        return () => {
+            window.removeEventListener("error", onError);
+            window.removeEventListener("unhandledrejection", onRejection);
+        };
+    }, [enabled, appVersion]);
+}

package/dist/index.d.ts

@@ -24,4 +24,6 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
+export * from "./observability/index.js";

package/dist/observability/ZauruObservability.d.ts

@@ -0,0 +1,6 @@
+import type { ZauruClientErrorReportingOptions } from "./useZauruClientErrorReporting.js";
+/**
+ * Optional drop-in for apps that do not use `BodyContainer`.
+ * `BodyContainer` already installs the same listeners.
+ */
+export declare function ZauruObservability(options: ZauruClientErrorReportingOptions): null;

package/dist/observability/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./sendClientError.js";
+export * from "./useZauruClientErrorReporting.js";
+export * from "./ZauruObservability.js";

package/dist/observability/sendClientError.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Client helper to report errors to `/api/client-errors`, which forwards
+ * them to CloudWatch Logs (with host logs as fallback).
+ *
+ * `keepalive: true` keeps the request alive if the page unloads right after.
+ */
+export interface ClientErrorPayload {
+    message: string;
+    stack?: string;
+    /** Sub-origin: errorBoundary, window.onerror, unhandledrejection. */
+    source?: string;
+    url?: string;
+    userAgent?: string;
+    appVersion?: string;
+    timestamp?: number;
+    [key: string]: unknown;
+}
+export declare function setClientErrorAppVersion(version?: string): void;
+/**
+ * Sends a client error to the server. Best-effort: never throws.
+ * Deduplicates identical consecutive reports so re-renders of the same
+ * error do not flood CloudWatch.
+ */
+export declare function sendClientError(payload: ClientErrorPayload): void;

package/dist/observability/useZauruClientErrorReporting.d.ts

@@ -0,0 +1,9 @@
+export type ZauruClientErrorReportingOptions = {
+    appVersion?: string;
+    enabled?: boolean;
+};
+/**
+ * Captures `window.onerror` and `unhandledrejection` and POSTs them to
+ * `/api/client-errors`. Used by `BodyContainer` by default.
+ */
+export declare function useZauruClientErrorReporting(options?: ZauruClientErrorReportingOptions): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.3.2",
+  "version": "6.5.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -49,7 +49,7 @@
     "@zauru-sdk/icons": "^6.0.0",
     "@zauru-sdk/redux": "^6.5.9",
     "@zauru-sdk/types": "^6.16.0",
-    "@zauru-sdk/utils": "^6.14.0",
+    "@zauru-sdk/utils": "^6.16.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "b0d95fcc90a6789ba2bf4bdcb0f54070c7583e85"
+  "gitHead": "41f536143a03ddca17bbf467c027ef0179493479"
 }

package/src/Containers/BodyContainer.tsx

@@ -1,10 +1,18 @@
 import React from "react";
+import { useZauruClientErrorReporting } from "../observability/useZauruClientErrorReporting.js";
 
 type Props = {
   children: React.ReactNode;
+  appVersion?: string;
+  /** Default true. Captures window.onerror / unhandledrejection. */
+  reportClientErrors?: boolean;
 };
 
 export const BodyContainer = (props: Props) => {
-  const { children } = props;
+  const { children, appVersion, reportClientErrors = true } = props;
+  useZauruClientErrorReporting({
+    appVersion,
+    enabled: reportClientErrors,
+  });
   return <body className="flex flex-col min-h-screen m-0">{children}</body>;
 };

package/src/Layouts/errorLayout/index.tsx

@@ -7,17 +7,21 @@ import {
   Link,
 } from "@remix-run/react";
 import { useEffect, useState } from "react";
+import { sendClientError } from "../../observability/sendClientError.js";
 
 export const ErrorLayout = ({
   from,
   isRootLevel = true,
   error: parentError,
   onError,
+  reportErrors = true,
 }: {
   from?: string;
   isRootLevel?: boolean;
   error?: Error;
   onError?: (error: Error, meta: { from?: string }) => void;
+  /** Default true. POSTs to `/api/client-errors` unless `onError` is passed. */
+  reportErrors?: boolean;
 }) => {
   try {
     const error = useRouteError();
@@ -28,7 +32,24 @@ export const ErrorLayout = ({
       if (reportable instanceof Error) {
         onError?.(reportable, { from });
       }
-    }, [error, parentError, from, onError]);
+      if (!reportErrors || onError) return;
+      if (reportable instanceof Error) {
+        sendClientError({
+          message: reportable.message,
+          stack: reportable.stack,
+          source: "errorBoundary",
+          url: from,
+        });
+        return;
+      }
+      if (isRouteErrorResponse(error)) {
+        sendClientError({
+          message: `Error en request: ${error.status}: ${error.statusText}`,
+          source: "errorBoundary",
+          url: from,
+        });
+      }
+    }, [error, parentError, from, onError, reportErrors]);
 
     const baseError = (
       <div className="min-h-screen flex flex-col items-center justify-center p-4">

package/src/Routes/ZauruHomePage.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { useGetAgencyProfile, useGetUserProfile } from "@zauru-sdk/hooks";
+import { getInitialProfileInfo } from "@zauru-sdk/utils";
+import { LabelArray } from "../Titles/LabelArray.js";
+import { ZauruTable } from "../Table/ZauruTable.js";
+import { Container } from "../Containers/Container.js";
+import { DoubleContainer } from "../Containers/DoubleContainer.js";
+import { MainContainer } from "../Containers/MainContainer.js";
+import { SubContainer } from "../Containers/SubContainer.js";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+
+export type ZauruHomePageProps = {
+  title: string;
+  includeAgency?: boolean;
+  extra?: ReactNode;
+};
+
+export function ZauruHomePage({
+  title,
+  includeAgency = true,
+  extra,
+}: ZauruHomePageProps) {
+  try {
+    const [isClient, setIsClient] = useState(false);
+    const { data: userProfile } = useGetUserProfile();
+    const { data: agencyProfile, loading: loadingAgencyProfile } =
+      useGetAgencyProfile();
+
+    useEffect(() => {
+      setIsClient(true);
+    }, []);
+
+    const { profileLabelInfo, membershipsInfo } =
+      getInitialProfileInfo(userProfile);
+
+    const conditionalRowStyles = [
+      {
+        when: (row: { odd: any; entityId: any }) => row.odd,
+        style: {
+          backgroundColor: "white",
+          "&:hover": {
+            cursor: "pointer",
+          },
+        },
+      },
+      {
+        when: (row: { entityId: any }) =>
+          row.entityId === userProfile?.profile?.selected_entity_id,
+        style: () => ({ backgroundColor: "lightgreen" }),
+      },
+    ];
+
+    const columns: any = [
+      {
+        name: "Entidad",
+        selector: (row: any) => row.entity,
+      },
+      {
+        name: "Contrato Expira",
+        selector: (row: any) => row.contractExpiration,
+        width: "10rem",
+      },
+      {
+        name: "Pagado hasta",
+        selector: (row: any) => row.nextPay,
+        width: "10rem",
+      },
+    ];
+
+    if (!isClient) {
+      return <LoadingWindow description="Cargando home..." />;
+    }
+
+    const pageTitle = includeAgency
+      ? loadingAgencyProfile || !agencyProfile
+        ? "Cargando..."
+        : `${title} (${agencyProfile?.name ?? "Usuario sin agencia asignada"})`
+      : title;
+
+    const profileAndMemberships = (
+      <>
+        <SubContainer title="Perfil">
+          <LabelArray info={profileLabelInfo} />
+        </SubContainer>
+        <SubContainer title="Suscripciones">
+          <ZauruTable
+            columns={columns}
+            conditionalRowStyles={conditionalRowStyles}
+            data={membershipsInfo}
+          />
+        </SubContainer>
+      </>
+    );
+
+    return (
+      <MainContainer>
+        {extra ? (
+          <DoubleContainer title={pageTitle}>
+            {profileAndMemberships}
+            {extra}
+          </DoubleContainer>
+        ) : (
+          <Container title={pageTitle}>{profileAndMemberships}</Container>
+        )}
+      </MainContainer>
+    );
+  } catch (error: any) {
+    return (
+      <ErrorLayout from="/home/index.tsx" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/ZauruIndexPage.tsx

@@ -0,0 +1,21 @@
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+
+export type ZauruIndexPageProps = {
+  title: string;
+  description?: string;
+  color?: ZauruHomeLayoutColor;
+};
+
+export function ZauruIndexPage({
+  title,
+  description = "Inicie sesión para poder continuar.",
+  color,
+}: ZauruIndexPageProps) {
+  try {
+    return <HomeLayout title={title} description={description} color={color} />;
+  } catch (error: any) {
+    return <ErrorLayout from="/index.tsx" error={error} isRootLevel={false} />;
+  }
+}

package/src/Routes/ZauruLoginPage.tsx

@@ -0,0 +1,100 @@
+import { useFetcher } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { useValidateNotifications } from "@zauru-sdk/hooks";
+import {
+  cleanLocalStorage,
+  profileFetchSuccess,
+  useAppDispatch,
+} from "@zauru-sdk/redux";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+
+export type ZauruHomeLayoutColor = "green" | "blue" | "red" | "purple" | "yellow";
+
+export type ZauruLoginPageProps = {
+  cleanLocalStorageArgs?: Parameters<typeof cleanLocalStorage>[0];
+  color?: ZauruHomeLayoutColor;
+};
+
+export function ZauruLoginPage({
+  cleanLocalStorageArgs,
+  color,
+}: ZauruLoginPageProps) {
+  try {
+    const fetcher = useFetcher<any>();
+    const dispatch = useAppDispatch();
+    const [isClient, setIsClient] = useState(false);
+
+    useValidateNotifications({ fetcher });
+
+    useEffect(() => {
+      if (fetcher.data?.employeeProfile) {
+        dispatch(
+          profileFetchSuccess({
+            name: "agencyProfile",
+            data: fetcher.data.agencyProfile,
+          }),
+        );
+        dispatch(
+          profileFetchSuccess({
+            name: "employeeProfile",
+            data: fetcher.data.employeeProfile,
+          }),
+        );
+        dispatch(
+          profileFetchSuccess({
+            name: "userProfile",
+            data: fetcher.data.userProfile,
+          }),
+        );
+        dispatch(
+          profileFetchSuccess({
+            name: "oauthProfile",
+            data: fetcher.data.oauthProfile,
+          }),
+        );
+
+        fetcher.submit(
+          {
+            action: "redirect",
+            cookie: fetcher.data?.cookie,
+          },
+          { method: "post" },
+        );
+      }
+    }, [fetcher.data]);
+
+    useEffect(() => {
+      setIsClient(true);
+    }, []);
+
+    useEffect(() => {
+      cleanLocalStorage(cleanLocalStorageArgs);
+      fetcher.submit({ action: "login" }, { method: "post" });
+    }, []);
+
+    if (!isClient) {
+      return <LoadingWindow />;
+    }
+
+    return (
+      <HomeLayout
+        loading
+        color={color}
+        title={
+          fetcher.data?.title ? "Error al inciar sesión!" : "Iniciando sesión...."
+        }
+        description={
+          fetcher.data?.description ??
+          "Cargando (Perfil zauru, perfil oauth, agencia, membresías, webapptables)..."
+        }
+      />
+    );
+  } catch (error: any) {
+    console.log(error);
+    return (
+      <ErrorLayout from="/login/index.tsx" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/ZauruLogoutPage.tsx

@@ -0,0 +1,52 @@
+import { useFetcher, useNavigate } from "@remix-run/react";
+import { useEffect } from "react";
+import { showAlert, useIsOnline } from "@zauru-sdk/hooks";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { HomeLayout } from "../Layouts/homeLayout/index.js";
+import type { ZauruHomeLayoutColor } from "./ZauruLoginPage.js";
+
+export type ZauruLogoutPageProps = {
+  requireOnline?: boolean;
+  beforeLogout?: () => boolean | void;
+  color?: ZauruHomeLayoutColor;
+};
+
+export function ZauruLogoutPage({
+  requireOnline = true,
+  beforeLogout,
+  color,
+}: ZauruLogoutPageProps) {
+  try {
+    const fetcher = useFetcher();
+    const navigate = useNavigate();
+    const isOnline = useIsOnline();
+
+    useEffect(() => {
+      if (beforeLogout?.() === false) {
+        return;
+      }
+      if (requireOnline && !isOnline) {
+        showAlert({
+          title: "No es posible cerrar sesión",
+          description: "No hay conexión a internet",
+          type: "error",
+        });
+        navigate("/home");
+        return;
+      }
+      fetcher.submit({ action: "logout" }, { method: "post" });
+    }, []);
+
+    return (
+      <HomeLayout
+        color={color}
+        title="Cerrando sesión"
+        description="Espere mientras se cierra su sesión..."
+      />
+    );
+  } catch (error: any) {
+    return (
+      <ErrorLayout from="/logout/index.tsx" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/ZauruReloadCatalogsPage.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+import { LoadingWindow } from "../Skeletons/LoadingWindow.js";
+
+export type ZauruReloadCatalogItem = {
+  name: string;
+  loading: boolean;
+};
+
+export type ZauruReloadCatalogsPageProps = {
+  items: ZauruReloadCatalogItem[];
+};
+
+export function ZauruReloadCatalogsPage({
+  items,
+}: ZauruReloadCatalogsPageProps) {
+  try {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => {
+      setIsClient(true);
+    }, []);
+
+    if (!isClient) {
+      return <LoadingWindow />;
+    }
+
+    const loading = items.some((item) => item.loading);
+
+    return (
+      <LoadingWindow
+        description={
+          loading
+            ? "Cargando catálogos..."
+            : "Catálogos cargados correctamente ✅"
+        }
+        loadingItems={items}
+      />
+    );
+  } catch (error: any) {
+    return (
+      <ErrorLayout from="/reload-catalogs" error={error} isRootLevel={false} />
+    );
+  }
+}

package/src/Routes/index.ts

@@ -0,0 +1,6 @@
+export * from "./zauruRouteErrorBoundary.js";
+export * from "./ZauruLoginPage.js";
+export * from "./ZauruLogoutPage.js";
+export * from "./ZauruHomePage.js";
+export * from "./ZauruIndexPage.js";
+export * from "./ZauruReloadCatalogsPage.js";

package/src/Routes/zauruRouteErrorBoundary.tsx

@@ -0,0 +1,9 @@
+import { ErrorLayout } from "../Layouts/errorLayout/index.js";
+
+export function zauruRouteErrorBoundary(from: string) {
+  function ZauruRouteErrorBoundary() {
+    return <ErrorLayout from={from} />;
+  }
+  ZauruRouteErrorBoundary.displayName = `ZauruRouteErrorBoundary(${from})`;
+  return ZauruRouteErrorBoundary;
+}

package/src/index.ts

@@ -24,4 +24,6 @@ export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
 export * from "./HOC/ValidateEmployeeAccess/index.js";
+export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
+export * from "./observability/index.js";

package/src/observability/ZauruObservability.tsx

@@ -0,0 +1,11 @@
+import { useZauruClientErrorReporting } from "./useZauruClientErrorReporting.js";
+import type { ZauruClientErrorReportingOptions } from "./useZauruClientErrorReporting.js";
+
+/**
+ * Optional drop-in for apps that do not use `BodyContainer`.
+ * `BodyContainer` already installs the same listeners.
+ */
+export function ZauruObservability(options: ZauruClientErrorReportingOptions) {
+  useZauruClientErrorReporting(options);
+  return null;
+}

package/src/observability/index.ts

@@ -0,0 +1,3 @@
+export * from "./sendClientError.js";
+export * from "./useZauruClientErrorReporting.js";
+export * from "./ZauruObservability.js";

package/src/observability/sendClientError.ts

@@ -0,0 +1,64 @@
+/**
+ * Client helper to report errors to `/api/client-errors`, which forwards
+ * them to CloudWatch Logs (with host logs as fallback).
+ *
+ * `keepalive: true` keeps the request alive if the page unloads right after.
+ */
+
+export interface ClientErrorPayload {
+  message: string;
+  stack?: string;
+  /** Sub-origin: errorBoundary, window.onerror, unhandledrejection. */
+  source?: string;
+  url?: string;
+  userAgent?: string;
+  appVersion?: string;
+  timestamp?: number;
+  [key: string]: unknown;
+}
+
+const ENDPOINT = "/api/client-errors";
+
+let lastReportedKey = "";
+let defaultAppVersion: string | undefined;
+
+export function setClientErrorAppVersion(version?: string): void {
+  defaultAppVersion = version;
+}
+
+/**
+ * Sends a client error to the server. Best-effort: never throws.
+ * Deduplicates identical consecutive reports so re-renders of the same
+ * error do not flood CloudWatch.
+ */
+export function sendClientError(payload: ClientErrorPayload): void {
+  if (typeof window === "undefined") return;
+
+  const body = {
+    message: payload.message,
+    stack: payload.stack,
+    source: payload.source ?? "unknown",
+    url: payload.url ?? window.location.href,
+    userAgent: payload.userAgent ?? navigator.userAgent,
+    appVersion: payload.appVersion ?? defaultAppVersion,
+    timestamp: payload.timestamp ?? Date.now(),
+  };
+
+  const dedupKey = `${body.source}|${body.message}|${body.url}`;
+  if (dedupKey === lastReportedKey) return;
+  lastReportedKey = dedupKey;
+
+  try {
+    fetch(ENDPOINT, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      keepalive: true,
+      credentials: "same-origin",
+    }).catch(() => {
+      // Silent: reporting must not break UX.
+    });
+  } catch {
+    // Silent.
+  }
+}

package/src/observability/useZauruClientErrorReporting.ts

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import {
+  sendClientError,
+  setClientErrorAppVersion,
+} from "./sendClientError.js";
+
+export type ZauruClientErrorReportingOptions = {
+  appVersion?: string;
+  enabled?: boolean;
+};
+
+/**
+ * Captures `window.onerror` and `unhandledrejection` and POSTs them to
+ * `/api/client-errors`. Used by `BodyContainer` by default.
+ */
+export function useZauruClientErrorReporting(
+  options?: ZauruClientErrorReportingOptions,
+): void {
+  const enabled = options?.enabled !== false;
+  const appVersion = options?.appVersion;
+
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+
+    if (appVersion) setClientErrorAppVersion(appVersion);
+
+    const onError = (event: ErrorEvent) => {
+      sendClientError({
+        message: event.message || "Error no capturado (window.onerror)",
+        stack: event.error instanceof Error ? event.error.stack : undefined,
+        source: "window.onerror",
+      });
+    };
+
+    const onRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      sendClientError({
+        message:
+          reason instanceof Error
+            ? reason.message
+            : typeof reason === "string"
+              ? reason
+              : "Promesa rechazada no manejada",
+        stack: reason instanceof Error ? reason.stack : undefined,
+        source: "unhandledrejection",
+      });
+    };
+
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    return () => {
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    };
+  }, [enabled, appVersion]);
+}