@zauru-sdk/components 1.0.112 → 1.0.113

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.113](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.112...v1.0.113) (2024-09-25)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [1.0.112](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.111...v1.0.112) (2024-09-19)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/HOC/ValidateEmployeeAccess/index.d.ts

@@ -0,0 +1,5 @@
+export declare const ValidateEmployeeAccess: ({ children, permissionVariableName, showIfNoPermission, }: {
+    children: React.ReactNode;
+    permissionVariableName: string;
+    showIfNoPermission?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const ErrorLayout: () => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/index.d.ts

@@ -1 +1,2 @@
 export * from "./homeLayout/index.js";
+export * from "./errorLayout/index.js";

package/dist/cjs/Buttons/Button.js

@@ -49,13 +49,13 @@ const Button = (props) => {
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = ((0, jsx_runtime_1.jsx)("button", { type: type, name: "action", disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
-            ? " bg-opacity-25 "
-            : ""} ${loading
-            ? " cursor-progress"
-            : `${disabled || (enableFormErrorsValidation && formHasErrors)
-                ? ""
-                : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", name: "action", value: name }), (0, jsx_runtime_1.jsx)("button", { type: type, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
+                    ? " bg-opacity-25 "
+                    : ""} ${loading
+                    ? " cursor-progress"
+                    : `${disabled || (enableFormErrorsValidation && formHasErrors)
+                        ? ""
+                        : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside })] }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                 (enableFormErrorsDescriptions && errorMessage) ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-end mb-2", children: (0, jsx_runtime_1.jsx)("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
 };

package/dist/cjs/Form/ReactZodForm/index.js

@@ -23,9 +23,7 @@ const ReactZodForm = (props) => {
             submit(event?.target, { method });
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(react_1.Form, { onSubmit: onSubmit ? methods.handleSubmit(onSubmit) : undefined, 
-            //onSubmit={methods.handleSubmit(handleSubmit)}
-            method: method, id: id, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, { ...methods, children: (0, jsx_runtime_1.jsx)(react_1.Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, children: children }) }));
 };
 exports.ReactZodForm = ReactZodForm;
 exports.default = exports.ReactZodForm;

package/dist/cjs/Form/SelectField/index.js

@@ -7,7 +7,7 @@ const react_1 = require("react");
 const index_js_1 = require("../../Skeletons/index.js");
 const react_hook_form_1 = require("react-hook-form");
 const SelectField = (props) => {
-    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, required, } = props;
+    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, required = false, } = props;
     const [value, setValue] = (0, react_1.useState)(defaultValue || null);
     const [valueMulti, setValueMulti] = (0, react_1.useState)(defaultValueMulti);
     const [inputValue, setInputValue] = (0, react_1.useState)(defaultValue?.label || "");
@@ -20,8 +20,13 @@ const SelectField = (props) => {
     const [isTabPressed, setIsTabPressed] = (0, react_1.useState)(false);
     const [isEnterPressed, setIsEnterPressed] = (0, react_1.useState)(false);
     const [isSearching, setIsSearching] = (0, react_1.useState)(false);
-    const { control, formState: { errors }, setValue: setFormValue, } = (0, react_hook_form_1.useFormContext)() || { formState: {} };
+    const { register: tempRegister, formState: { errors }, setValue: setFormValue, } = (0, react_hook_form_1.useFormContext)() || { formState: {} };
     const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", {
+            required,
+        })
+        : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const isReadOnly = disabled || readOnly;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
@@ -40,7 +45,7 @@ const SelectField = (props) => {
         if (defaultValue) {
             setValue(defaultValue);
             setInputValue(defaultValue.label);
-            setFormValue(name || "", defaultValue);
+            setFormValue(name || "", defaultValue.value);
         }
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
@@ -49,6 +54,9 @@ const SelectField = (props) => {
     }, []);
     const handleInputChange = (e) => {
         const newValue = e.target.value;
+        if (register) {
+            register.onChange(e);
+        }
         setInputValue(newValue);
         onInputChange && onInputChange(newValue);
         setIsSearching(true);
@@ -61,13 +69,13 @@ const SelectField = (props) => {
                 : [...valueMulti, option];
             setValueMulti(newValue);
             onChangeMulti && onChangeMulti(newValue);
-            setFormValue(name || "", newValue);
+            setFormValue(name || "", newValue.map((v) => v.value));
         }
         else {
             setValue(option);
             setInputValue(option.label);
             onChange && onChange(option);
-            setFormValue(name || "", option);
+            setFormValue(name || "", option.value);
         }
         setIsOpen(false);
     };
@@ -80,7 +88,7 @@ const SelectField = (props) => {
         else {
             setValue(null);
             onChange && onChange(null);
-            setFormValue(name || "", null);
+            setFormValue(name || "", "");
         }
         setInputValue("");
     };
@@ -145,10 +153,9 @@ const SelectField = (props) => {
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
                     ? "text-red-700 dark:text-red-500"
-                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => ((0, jsx_runtime_1.jsx)("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
-                                field.onChange(e);
-                                handleInputChange(e);
-                            }, autoComplete: "off" })) }), isClearable && (value || valueMulti.length > 0) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && ((0, jsx_runtime_1.jsx)("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
+                            ? valueMulti.map((v) => v.value).join(",")
+                            : value?.value || "" }), isClearable && (value || valueMulti.length > 0) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && ((0, jsx_runtime_1.jsx)("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
                                 ? valueMulti.some((v) => v.value === option.value)
                                 : value?.value === option.value)
                                 ? "text-white bg-indigo-600"

package/dist/cjs/Form/TextField/index.js

@@ -9,7 +9,7 @@ const TextField = (props) => {
     const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className, hint, required, } = props;
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)(defaultValue);
-    const { register: tempRegister, formState: { errors }, } = (0, react_hook_form_1.useFormContext)() || { formState: {} }; // Obtener el contexto solo si existe
+    const { register: tempRegister, formState: { errors }, setValue: setOnFormValue, } = (0, react_hook_form_1.useFormContext)() || { formState: {} }; // Obtener el contexto solo si existe
     const error = errors ? errors[props.name ?? "-1"] : undefined;
     const register = tempRegister
         ? tempRegister(props.name ?? "-1", {
@@ -23,9 +23,11 @@ const TextField = (props) => {
     const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
     (0, react_1.useEffect)(() => {
+        setOnFormValue(name ?? "-1", defaultValue);
         setValue(defaultValue);
     }, [defaultValue]);
     const handleInputChange = (event) => {
+        const newValue = event.target.value;
         if (register) {
             register.onChange(event);
         }
@@ -33,18 +35,8 @@ const TextField = (props) => {
             event.stopPropagation();
             event.preventDefault();
         }
-        if (integer && type === "number") {
-            const value = event.target.value;
-            const isInteger = /^[0-9]*$/.test(value);
-            if (isInteger || value === "") {
-                setValue(value);
-                onChange && onChange(value, event);
-            }
-        }
-        else {
-            setValue(event.target.value);
-            onChange && onChange(event.target.value, event);
-        }
+        setValue(newValue);
+        onChange && onChange(newValue, event);
     };
     const handleKeyDown = (event) => {
         if (integer && type === "number") {
@@ -63,9 +55,9 @@ const TextField = (props) => {
         }
     };
     if (hidden) {
-        return ((0, jsx_runtime_1.jsx)("input", { type: "hidden", id: id ?? name, value: value, readOnly: true, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
+        return ((0, jsx_runtime_1.jsx)("input", { type: type, id: id ?? name, value: value, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
     }
-    const inputComponent = ((0, jsx_runtime_1.jsx)("input", { type: type, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
+    const inputComponent = ((0, jsx_runtime_1.jsx)("input", { type: type, readOnly: isReadOnly, disabled: disabled, id: id ?? name, autoComplete: "off", value: value, onWheel: (e) => {
             e.currentTarget.blur();
         }, step: type === "number" ? 0.01 : undefined, onKeyDown: (event) => {
             handleKeyDown(event);

package/dist/cjs/HOC/ValidateEmployeeAccess/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidateEmployeeAccess = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("@zauru-sdk/hooks");
+const react_1 = require("@remix-run/react");
+const ValidateEmployeeAccess = ({ children, permissionVariableName, showIfNoPermission = false, }) => {
+    const { data: employee } = (0, hooks_1.useGetEmployeeProfile)();
+    const variable_string = (0, hooks_1.useGetSessionAttribute)(permissionVariableName, "sessionVariable");
+    const variable = variable_string?.split(",");
+    const hasPermission = variable?.includes(employee?.id?.toString() || "-1");
+    if (showIfNoPermission && !hasPermission) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), (0, jsx_runtime_1.jsx)("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Acceso Denegado!" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full max-w-2xl", children: (0, jsx_runtime_1.jsx)("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: "Lo sentimos, no tienes permiso para acceder a esta p\u00E1gina." }) }), (0, jsx_runtime_1.jsx)(react_1.Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-12 text-gray-500", children: (0, jsx_runtime_1.jsx)("p", { children: "Si crees que esto es un error, por favor contacta a soporte." }) })] }));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasPermission ? children : null });
+};
+exports.ValidateEmployeeAccess = ValidateEmployeeAccess;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@remix-run/react");
+const ErrorLayout = () => {
+    const error = (0, react_1.useRouteError)();
+    return ((0, jsx_runtime_1.jsxs)("html", { lang: "es", className: "bg-gray-900 text-white", children: [(0, jsx_runtime_1.jsxs)("head", { children: [(0, jsx_runtime_1.jsx)("meta", { charSet: "utf-8" }), (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), (0, jsx_runtime_1.jsx)("title", { children: "\u00A1Ups! Algo sali\u00F3 mal" }), (0, jsx_runtime_1.jsx)(react_1.Meta, {}), (0, jsx_runtime_1.jsx)(react_1.Links, {})] }), (0, jsx_runtime_1.jsxs)("body", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [(0, jsx_runtime_1.jsx)("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), (0, jsx_runtime_1.jsx)("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), (0, jsx_runtime_1.jsx)("div", { className: "w-full max-w-2xl", children: (0, jsx_runtime_1.jsx)("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: (0, react_1.isRouteErrorResponse)(error)
+                                ? `Error ${error.status}: ${error.statusText}`
+                                : error instanceof Error
+                                    ? error.message
+                                    : "Ha ocurrido un error inesperado" }) }), (0, jsx_runtime_1.jsx)(react_1.Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-12 text-gray-500", children: (0, jsx_runtime_1.jsx)("p", { children: "Si el problema persiste, por favor contacta a soporte." }) }), (0, jsx_runtime_1.jsx)(react_1.Scripts, {})] })] }));
+};
+exports.ErrorLayout = ErrorLayout;

package/dist/cjs/Layouts/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./homeLayout/index.js"), exports);
+__exportStar(require("./errorLayout/index.js"), exports);

package/dist/cjs/index.js

@@ -39,3 +39,4 @@ __exportStar(require("./Tooltip/index.js"), exports);
 __exportStar(require("./WithTooltip/index.js"), exports);
 __exportStar(require("./Wizards/index.js"), exports);
 __exportStar(require("./Zendesk/index.js"), exports);
+__exportStar(require("./HOC/ValidateEmployeeAccess/index.js"), exports);

package/dist/esm/Buttons/Button.js

@@ -46,13 +46,13 @@ export const Button = (props) => {
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = (_jsx("button", { type: type, name: "action", disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), value: name, onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
-            ? " bg-opacity-25 "
-            : ""} ${loading
-            ? " cursor-progress"
-            : `${disabled || (enableFormErrorsValidation && formHasErrors)
-                ? ""
-                : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }));
+    const buttonContent = (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: "action", value: name }), _jsx("button", { type: type, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
+                    ? " bg-opacity-25 "
+                    : ""} ${loading
+                    ? " cursor-progress"
+                    : `${disabled || (enableFormErrorsValidation && formHasErrors)
+                        ? ""
+                        : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside })] }));
     return (_jsxs(_Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                 (enableFormErrorsDescriptions && errorMessage) ? (_jsx("div", { className: "flex flex-col items-end mb-2", children: _jsx("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: _jsx("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
 };

package/dist/esm/Form/ReactZodForm/index.js

@@ -20,8 +20,6 @@ export const ReactZodForm = (props) => {
             submit(event?.target, { method });
         }
     };
-    return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: onSubmit ? methods.handleSubmit(onSubmit) : undefined, 
-            //onSubmit={methods.handleSubmit(handleSubmit)}
-            method: method, id: id, children: children }) }));
+    return (_jsx(FormProvider, { ...methods, children: _jsx(Form, { onSubmit: methods.handleSubmit(handleSubmit), method: method, id: id, children: children }) }));
 };
 export default ReactZodForm;

package/dist/esm/Form/SelectField/index.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { IdeaIconSVG } from "@zauru-sdk/icons";
 import { useEffect, useState, useRef } from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
-import { useFormContext, Controller } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 export const SelectField = (props) => {
-    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, required, } = props;
+    const { id, name, title, defaultValue, defaultValueMulti = [], helpText, hint, options, onChange, onChangeMulti, isClearable = false, disabled = false, readOnly = false, isMulti = false, loading = false, className = "", onInputChange, required = false, } = props;
     const [value, setValue] = useState(defaultValue || null);
     const [valueMulti, setValueMulti] = useState(defaultValueMulti);
     const [inputValue, setInputValue] = useState(defaultValue?.label || "");
@@ -17,8 +17,13 @@ export const SelectField = (props) => {
     const [isTabPressed, setIsTabPressed] = useState(false);
     const [isEnterPressed, setIsEnterPressed] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
-    const { control, formState: { errors }, setValue: setFormValue, } = useFormContext() || { formState: {} };
+    const { register: tempRegister, formState: { errors }, setValue: setFormValue, } = useFormContext() || { formState: {} };
     const error = errors ? errors[props.name ?? "-1"] : undefined;
+    const register = tempRegister
+        ? tempRegister(props.name ?? "-1", {
+            required,
+        })
+        : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const isReadOnly = disabled || readOnly;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
@@ -37,7 +42,7 @@ export const SelectField = (props) => {
         if (defaultValue) {
             setValue(defaultValue);
             setInputValue(defaultValue.label);
-            setFormValue(name || "", defaultValue);
+            setFormValue(name || "", defaultValue.value);
         }
         document.addEventListener("mousedown", handleClickOutside);
         return () => {
@@ -46,6 +51,9 @@ export const SelectField = (props) => {
     }, []);
     const handleInputChange = (e) => {
         const newValue = e.target.value;
+        if (register) {
+            register.onChange(e);
+        }
         setInputValue(newValue);
         onInputChange && onInputChange(newValue);
         setIsSearching(true);
@@ -58,13 +66,13 @@ export const SelectField = (props) => {
                 : [...valueMulti, option];
             setValueMulti(newValue);
             onChangeMulti && onChangeMulti(newValue);
-            setFormValue(name || "", newValue);
+            setFormValue(name || "", newValue.map((v) => v.value));
         }
         else {
             setValue(option);
             setInputValue(option.label);
             onChange && onChange(option);
-            setFormValue(name || "", option);
+            setFormValue(name || "", option.value);
         }
         setIsOpen(false);
     };
@@ -77,7 +85,7 @@ export const SelectField = (props) => {
         else {
             setValue(null);
             onChange && onChange(null);
-            setFormValue(name || "", null);
+            setFormValue(name || "", "");
         }
         setInputValue("");
     };
@@ -142,10 +150,9 @@ export const SelectField = (props) => {
     }
     return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, ref: selectRef, children: [title && (_jsxs("label", { htmlFor: error ? `${name}-error` : `${name}-success`, className: `block text-sm font-medium ${color === "red"
                     ? "text-red-700 dark:text-red-500"
-                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx(Controller, { name: name || "", control: control, rules: { required }, defaultValue: defaultValue || (isMulti ? [] : null), render: ({ field }) => (_jsx("input", { ...field, type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onBlur: handleBlur, onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", onChange: (e) => {
-                                field.onChange(e);
-                                handleInputChange(e);
-                            }, autoComplete: "off" })) }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
+                    : "text-gray-700 dark:text-gray-500"}`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", id: id, value: inputValue, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, readOnly: isReadOnly, disabled: disabled, className: `block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`, placeholder: isMulti ? "Select options..." : "Select an option...", autoComplete: "off", onChange: handleInputChange, onBlur: handleBlur, required: required }), _jsx("input", { type: "hidden", ...(register ?? {}), name: name, value: isMulti
+                            ? valueMulti.map((v) => v.value).join(",")
+                            : value?.value || "" }), isClearable && (value || valueMulti.length > 0) && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: "\u00D7" })), isOpen && !isReadOnly && (_jsx("ul", { ref: optionsRef, className: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm", children: filteredOptions.map((option, index) => (_jsx("li", { className: `cursor-pointer select-none relative py-2 pl-3 pr-9 ${(isMulti
                                 ? valueMulti.some((v) => v.value === option.value)
                                 : value?.value === option.value)
                                 ? "text-white bg-indigo-600"

package/dist/esm/Form/TextField/index.js

@@ -6,7 +6,7 @@ export const TextField = (props) => {
     const { id, name, defaultValue = "", hidden, type = "text", onChange, onKeyDown, disabled = false, readOnly = false, min, integer = false, stopChangeEvents, style, title, helpText, className, hint, required, } = props;
     const [showTooltip, setShowTooltip] = useState(false);
     const [value, setValue] = useState(defaultValue);
-    const { register: tempRegister, formState: { errors }, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+    const { register: tempRegister, formState: { errors }, setValue: setOnFormValue, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
     const error = errors ? errors[props.name ?? "-1"] : undefined;
     const register = tempRegister
         ? tempRegister(props.name ?? "-1", {
@@ -20,9 +20,11 @@ export const TextField = (props) => {
     const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
     useEffect(() => {
+        setOnFormValue(name ?? "-1", defaultValue);
         setValue(defaultValue);
     }, [defaultValue]);
     const handleInputChange = (event) => {
+        const newValue = event.target.value;
         if (register) {
             register.onChange(event);
         }
@@ -30,18 +32,8 @@ export const TextField = (props) => {
             event.stopPropagation();
             event.preventDefault();
         }
-        if (integer && type === "number") {
-            const value = event.target.value;
-            const isInteger = /^[0-9]*$/.test(value);
-            if (isInteger || value === "") {
-                setValue(value);
-                onChange && onChange(value, event);
-            }
-        }
-        else {
-            setValue(event.target.value);
-            onChange && onChange(event.target.value, event);
-        }
+        setValue(newValue);
+        onChange && onChange(newValue, event);
     };
     const handleKeyDown = (event) => {
         if (integer && type === "number") {
@@ -60,9 +52,9 @@ export const TextField = (props) => {
         }
     };
     if (hidden) {
-        return (_jsx("input", { type: "hidden", id: id ?? name, value: value, readOnly: true, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
+        return (_jsx("input", { type: type, id: id ?? name, value: value, hidden: true, ...(register ?? {}), name: name, onChange: handleInputChange }));
     }
-    const inputComponent = (_jsx("input", { type: type, readOnly: readOnly, disabled: disabled, id: id ?? name, autoComplete: "given-name", value: value, onWheel: (e) => {
+    const inputComponent = (_jsx("input", { type: type, readOnly: isReadOnly, disabled: disabled, id: id ?? name, autoComplete: "off", value: value, onWheel: (e) => {
             e.currentTarget.blur();
         }, step: type === "number" ? 0.01 : undefined, onKeyDown: (event) => {
             handleKeyDown(event);

package/dist/esm/HOC/ValidateEmployeeAccess/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGetEmployeeProfile, useGetSessionAttribute, } from "@zauru-sdk/hooks";
+import { Link } from "@remix-run/react";
+export const ValidateEmployeeAccess = ({ children, permissionVariableName, showIfNoPermission = false, }) => {
+    const { data: employee } = useGetEmployeeProfile();
+    const variable_string = useGetSessionAttribute(permissionVariableName, "sessionVariable");
+    const variable = variable_string?.split(",");
+    const hasPermission = variable?.includes(employee?.id?.toString() || "-1");
+    if (showIfNoPermission && !hasPermission) {
+        return (_jsxs("div", { className: "bg-gray-900 text-white 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: "\u00A1Acceso Denegado!" }), _jsx("div", { className: "w-full max-w-2xl", children: _jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: "Lo sentimos, no tienes permiso para acceder a esta p\u00E1gina." }) }), _jsx(Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), _jsx("div", { className: "mt-12 text-gray-500", children: _jsx("p", { children: "Si crees que esto es un error, por favor contacta a soporte." }) })] }));
+    }
+    return _jsx(_Fragment, { children: hasPermission ? children : null });
+};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isRouteErrorResponse, Links, Meta, Scripts, useRouteError, Link, } from "@remix-run/react";
+export const ErrorLayout = () => {
+    const error = useRouteError();
+    return (_jsxs("html", { lang: "es", className: "bg-gray-900 text-white", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("title", { children: "\u00A1Ups! Algo sali\u00F3 mal" }), _jsx(Meta, {}), _jsx(Links, {})] }), _jsxs("body", { 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!" }), _jsx("div", { className: "w-full max-w-2xl", children: _jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
+                                ? `Error ${error.status}: ${error.statusText}`
+                                : error instanceof Error
+                                    ? error.message
+                                    : "Ha ocurrido un error inesperado" }) }), _jsx(Link, { to: "/", className: "bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105", children: "Regresar al inicio" }), _jsx("div", { className: "mt-12 text-gray-500", children: _jsx("p", { children: "Si el problema persiste, por favor contacta a soporte." }) }), _jsx(Scripts, {})] })] }));
+};

package/dist/esm/Layouts/index.js

@@ -1 +1,2 @@
 export * from "./homeLayout/index.js";
+export * from "./errorLayout/index.js";

package/dist/esm/index.js

@@ -23,3 +23,4 @@ export * from "./Tooltip/index.js";
 export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
+export * from "./HOC/ValidateEmployeeAccess/index.js";

package/dist/index.d.ts

@@ -23,3 +23,4 @@ export * from "./Tooltip/index.js";
 export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
+export * from "./HOC/ValidateEmployeeAccess/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.112",
+  "version": "1.0.113",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -38,7 +38,7 @@
     "@zauru-sdk/hooks": "^1.0.112",
     "@zauru-sdk/icons": "^1.0.60",
     "@zauru-sdk/types": "^1.0.109",
-    "@zauru-sdk/utils": "^1.0.111",
+    "@zauru-sdk/utils": "^1.0.113",
     "framer-motion": "^11.0.8",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -50,5 +50,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "965e3203a40d354fd5d512e985ad68cb821d6a32"
+  "gitHead": "32d6e9f7c23ac5b58be802d23f007f86b4aea904"
 }

package/src/Buttons/Button.tsx

@@ -83,34 +83,35 @@ export const Button = (props: Props) => {
     : "";
 
   const buttonContent = (
-    <button
-      type={type}
-      name="action"
-      disabled={
-        loading || disabled || (enableFormErrorsValidation && formHasErrors)
-      }
-      value={name}
-      onClick={onClickSave}
-      className={`ml-2 ${
-        loading || disabled || (enableFormErrorsValidation && formHasErrors)
-          ? " bg-opacity-25 "
-          : ""
-      } ${
-        loading
-          ? " cursor-progress"
-          : `${
-              disabled || (enableFormErrorsValidation && formHasErrors)
-                ? ""
-                : `hover:${color.bg700}`
-            }`
-      } inline-flex justify-center rounded-md border border-transparent ${
-        color.bg600
-      } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
-        color.ring500
-      } focus:ring-offset-2 ${className}`}
-    >
-      {loading ? loadingText : inside}
-    </button>
+    <>
+      <input type="hidden" name="action" value={name} />
+      <button
+        type={type}
+        disabled={
+          loading || disabled || (enableFormErrorsValidation && formHasErrors)
+        }
+        onClick={onClickSave}
+        className={`ml-2 ${
+          loading || disabled || (enableFormErrorsValidation && formHasErrors)
+            ? " bg-opacity-25 "
+            : ""
+        } ${
+          loading
+            ? " cursor-progress"
+            : `${
+                disabled || (enableFormErrorsValidation && formHasErrors)
+                  ? ""
+                  : `hover:${color.bg700}`
+              }`
+        } inline-flex justify-center rounded-md border border-transparent ${
+          color.bg600
+        } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
+          color.ring500
+        } focus:ring-offset-2 ${className}`}
+      >
+        {loading ? loadingText : inside}
+      </button>
+    </>
   );
 
   return (

package/src/Form/ReactZodForm/index.tsx

@@ -46,8 +46,7 @@ export const ReactZodForm = (props: Props) => {
   return (
     <FormProvider {...methods}>
       <Form
-        onSubmit={onSubmit ? methods.handleSubmit(onSubmit) : undefined}
-        //onSubmit={methods.handleSubmit(handleSubmit)}
+        onSubmit={methods.handleSubmit(handleSubmit)}
         method={method}
         id={id}
       >

package/src/Form/SelectField/index.tsx

@@ -2,7 +2,7 @@ import { IdeaIconSVG } from "@zauru-sdk/icons";
 import { SelectFieldOption } from "@zauru-sdk/types";
 import React, { useEffect, useState, useRef, KeyboardEvent } from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
-import { useFormContext, Controller } from "react-hook-form";
+import { useFormContext } from "react-hook-form";
 
 type Props = {
   id?: string;
@@ -45,7 +45,7 @@ export const SelectField = (props: Props) => {
     loading = false,
     className = "",
     onInputChange,
-    required,
+    required = false,
   } = props;
 
   const [value, setValue] = useState<SelectFieldOption | null>(
@@ -64,11 +64,16 @@ export const SelectField = (props: Props) => {
   const [isEnterPressed, setIsEnterPressed] = useState<boolean>(false);
   const [isSearching, setIsSearching] = useState<boolean>(false);
   const {
-    control,
+    register: tempRegister,
     formState: { errors },
     setValue: setFormValue,
   } = useFormContext() || { formState: {} };
   const error = errors ? errors[props.name ?? "-1"] : undefined;
+  const register = tempRegister
+    ? tempRegister(props.name ?? "-1", {
+        required,
+      })
+    : undefined; // Solo usar register si está disponible
 
   const color = error ? "red" : "gray";
   const isReadOnly = disabled || readOnly;
@@ -93,7 +98,7 @@ export const SelectField = (props: Props) => {
     if (defaultValue) {
       setValue(defaultValue);
       setInputValue(defaultValue.label);
-      setFormValue(name || "", defaultValue);
+      setFormValue(name || "", defaultValue.value);
     }
 
     document.addEventListener("mousedown", handleClickOutside);
@@ -104,6 +109,9 @@ export const SelectField = (props: Props) => {
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
+    if (register) {
+      register.onChange(e);
+    }
     setInputValue(newValue);
     onInputChange && onInputChange(newValue);
     setIsSearching(true);
@@ -121,12 +129,15 @@ export const SelectField = (props: Props) => {
         : [...valueMulti, option];
       setValueMulti(newValue);
       onChangeMulti && onChangeMulti(newValue);
-      setFormValue(name || "", newValue);
+      setFormValue(
+        name || "",
+        newValue.map((v) => v.value)
+      );
     } else {
       setValue(option);
       setInputValue(option.label);
       onChange && onChange(option);
-      setFormValue(name || "", option);
+      setFormValue(name || "", option.value);
     }
     setIsOpen(false);
   };
@@ -139,7 +150,7 @@ export const SelectField = (props: Props) => {
     } else {
       setValue(null);
       onChange && onChange(null);
-      setFormValue(name || "", null);
+      setFormValue(name || "", "");
     }
     setInputValue("");
   };
@@ -245,33 +256,30 @@ export const SelectField = (props: Props) => {
         </label>
       )}
       <div className="relative">
-        <Controller
-          name={name || ""}
-          control={control}
-          rules={{ required }}
-          defaultValue={defaultValue || (isMulti ? [] : null)}
-          render={({ field }) => (
-            <input
-              {...field}
-              type="text"
-              id={id}
-              value={inputValue}
-              onFocus={() => setIsOpen(true)}
-              onBlur={handleBlur}
-              onKeyDown={handleKeyDown}
-              readOnly={isReadOnly}
-              disabled={disabled}
-              className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
-              placeholder={
-                isMulti ? "Select options..." : "Select an option..."
-              }
-              onChange={(e) => {
-                field.onChange(e);
-                handleInputChange(e);
-              }}
-              autoComplete="off"
-            />
-          )}
+        <input
+          type="text"
+          id={id}
+          value={inputValue}
+          onFocus={() => setIsOpen(true)}
+          onKeyDown={handleKeyDown}
+          readOnly={isReadOnly}
+          disabled={disabled}
+          className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+          placeholder={isMulti ? "Select options..." : "Select an option..."}
+          autoComplete="off"
+          onChange={handleInputChange}
+          onBlur={handleBlur}
+          required={required}
+        />
+        <input
+          type="hidden"
+          {...(register ?? {})}
+          name={name}
+          value={
+            isMulti
+              ? valueMulti.map((v) => v.value).join(",")
+              : value?.value || ""
+          }
         />
         {isClearable && (value || valueMulti.length > 0) && (
           <button

package/src/Form/TextField/index.tsx

@@ -53,6 +53,7 @@ export const TextField = (props: Props) => {
   const {
     register: tempRegister,
     formState: { errors },
+    setValue: setOnFormValue,
   } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
   const error = errors ? errors[props.name ?? "-1"] : undefined;
   const register = tempRegister
@@ -70,10 +71,13 @@ export const TextField = (props: Props) => {
   const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
 
   useEffect(() => {
+    setOnFormValue(name ?? "-1", defaultValue);
     setValue(defaultValue);
   }, [defaultValue]);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+
     if (register) {
       register.onChange(event);
     }
@@ -81,17 +85,9 @@ export const TextField = (props: Props) => {
       event.stopPropagation();
       event.preventDefault();
     }
-    if (integer && type === "number") {
-      const value = event.target.value;
-      const isInteger = /^[0-9]*$/.test(value);
-      if (isInteger || value === "") {
-        setValue(value);
-        onChange && onChange(value, event);
-      }
-    } else {
-      setValue(event.target.value);
-      onChange && onChange(event.target.value, event);
-    }
+
+    setValue(newValue);
+    onChange && onChange(newValue, event);
   };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
@@ -114,11 +110,10 @@ export const TextField = (props: Props) => {
   if (hidden) {
     return (
       <input
-        type={"hidden"}
+        type={type}
         id={id ?? name}
         value={value}
-        readOnly={true}
-        hidden={true}
+        hidden
         {...(register ?? {})}
         name={name}
         onChange={handleInputChange}
@@ -129,10 +124,10 @@ export const TextField = (props: Props) => {
   const inputComponent = (
     <input
       type={type}
-      readOnly={readOnly}
+      readOnly={isReadOnly}
       disabled={disabled}
       id={id ?? name}
-      autoComplete="given-name"
+      autoComplete="off"
       value={value}
       onWheel={(e: React.WheelEvent<HTMLInputElement>) => {
         e.currentTarget.blur();

package/src/HOC/ValidateEmployeeAccess/index.tsx

@@ -0,0 +1,51 @@
+import {
+  useGetEmployeeProfile,
+  useGetSessionAttribute,
+} from "@zauru-sdk/hooks";
+import { Link } from "@remix-run/react";
+
+export const ValidateEmployeeAccess = ({
+  children,
+  permissionVariableName,
+  showIfNoPermission = false,
+}: {
+  children: React.ReactNode;
+  permissionVariableName: string;
+  showIfNoPermission?: boolean;
+}) => {
+  const { data: employee } = useGetEmployeeProfile();
+  const variable_string = useGetSessionAttribute(
+    permissionVariableName,
+    "sessionVariable"
+  );
+
+  const variable = variable_string?.split(",");
+  const hasPermission = variable?.includes(employee?.id?.toString() || "-1");
+
+  if (showIfNoPermission && !hasPermission) {
+    return (
+      <div className="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
+        <img src="/logo.png" alt="Zauru Logo" className="mb-8 h-20" />
+        <h1 className="text-5xl font-extrabold text-red-500 mb-6">
+          ¡Acceso Denegado!
+        </h1>
+        <div className="w-full max-w-2xl">
+          <p className="text-2xl text-gray-300 mb-8 text-center">
+            Lo sentimos, no tienes permiso para acceder a esta página.
+          </p>
+        </div>
+        <Link
+          to="/"
+          className="bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105"
+        >
+          Regresar al inicio
+        </Link>
+        <div className="mt-12 text-gray-500">
+          <p>Si crees que esto es un error, por favor contacta a soporte.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{hasPermission ? children : null}</>;
+};

package/src/Layouts/errorLayout/index.tsx

@@ -0,0 +1,47 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Scripts,
+  useRouteError,
+  Link,
+} from "@remix-run/react";
+
+export const ErrorLayout = () => {
+  const error = useRouteError();
+
+  return (
+    <html lang="es" className="bg-gray-900 text-white">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>¡Ups! Algo salió mal</title>
+        <Meta />
+        <Links />
+      </head>
+      <body className="min-h-screen flex flex-col items-center justify-center p-4">
+        <img src="/logo.png" alt="Zauru Logo" className="mb-8 h-20" />
+        <h1 className="text-5xl font-extrabold text-red-500 mb-6">¡Ups!</h1>
+        <div className="w-full max-w-2xl">
+          <p className="text-2xl text-gray-300 mb-8 text-center">
+            {isRouteErrorResponse(error)
+              ? `Error ${error.status}: ${error.statusText}`
+              : error instanceof Error
+              ? error.message
+              : "Ha ocurrido un error inesperado"}
+          </p>
+        </div>
+        <Link
+          to="/"
+          className="bg-blue-600 text-white py-3 px-8 rounded-full text-lg font-semibold hover:bg-blue-700 transition duration-300 transform hover:scale-105"
+        >
+          Regresar al inicio
+        </Link>
+        <div className="mt-12 text-gray-500">
+          <p>Si el problema persiste, por favor contacta a soporte.</p>
+        </div>
+        <Scripts />
+      </body>
+    </html>
+  );
+};

package/src/Layouts/index.ts

@@ -1 +1,2 @@
 export * from "./homeLayout/index.js";
+export * from "./errorLayout/index.js";

package/src/index.ts

@@ -23,3 +23,4 @@ export * from "./Tooltip/index.js";
 export * from "./WithTooltip/index.js";
 export * from "./Wizards/index.js";
 export * from "./Zendesk/index.js";
+export * from "./HOC/ValidateEmployeeAccess/index.js";