@zauru-sdk/components 1.0.112 → 1.0.114

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", {
@@ -18,11 +18,15 @@ export const TextField = (props) => {
     const isReadOnly = disabled || readOnly;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
     const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+    const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     useEffect(() => {
+        if (setOnFormValue) {
+            setOnFormValue(name ?? "-1", defaultValue);
+        }
         setValue(defaultValue);
     }, [defaultValue]);
     const handleInputChange = (event) => {
+        const newValue = event.target.value;
         if (register) {
             register.onChange(event);
         }
@@ -30,18 +34,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 +54,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/Form/TimePicker/index.js

@@ -14,7 +14,7 @@ export const FormTimePicker = (props) => {
     const color = error ? "red" : "gray";
     const isReadOnly = disabled;
     const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
-    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+    const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
     const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
     useEffect(() => {
         setValue(defaultValue);

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/SidePanel/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+// SVG icon for the left-pointing chevron
+const ChevronLeftIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: _jsx("path", { fillRule: "evenodd", d: "M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the right-pointing chevron
+const ChevronRightIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: _jsx("path", { fillRule: "evenodd", d: "M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z", clipRule: "evenodd" }) }));
+// SVG icon for the filter (bars filter icon)
+const FilterIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "h-6 w-6", children: _jsx("path", { fillRule: "evenodd", d: "M3 6a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 01-1-1zm0 6a1 1 0 011-1h4a1 1 0 110 2H4a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
+const SidePanel = ({ children, closeOnClickOutside = true, widthPercentage = 25, buttonIcon = "chevron", }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const panelRef = useRef(null);
+    const togglePanel = () => {
+        setIsOpen(!isOpen);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (closeOnClickOutside &&
+                panelRef.current &&
+                !panelRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [closeOnClickOutside]);
+    const renderIcon = () => {
+        if (typeof buttonIcon === "string") {
+            switch (buttonIcon) {
+                case "chevron":
+                    return isOpen ? _jsx(ChevronRightIcon, {}) : _jsx(ChevronLeftIcon, {});
+                case "filter":
+                    return _jsx(FilterIcon, {});
+                default:
+                    return _jsx(ChevronLeftIcon, {});
+            }
+        }
+        else {
+            return buttonIcon;
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { children: isOpen && (_jsxs(motion.div, { ref: panelRef, initial: { x: "100%" }, animate: { x: 0 }, exit: { x: "100%" }, transition: { type: "spring", stiffness: 300, damping: 30 }, className: "fixed top-0 right-0 h-full bg-white shadow-lg z-[9999] overflow-y-auto", style: { width: `${widthPercentage}%` }, children: [_jsx("button", { onClick: togglePanel, className: "absolute top-4 left-4 p-2 rounded-full bg-gray-200 hover:bg-gray-300 transition-colors", children: _jsx(ChevronRightIcon, {}) }), _jsx("div", { className: "p-6 mt-16", children: children })] })) }), !isOpen && (_jsx("button", { onClick: togglePanel, className: "fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-600 text-white p-3 rounded-l-lg shadow-md hover:bg-indigo-700 transition-colors z-[10000]", children: renderIcon() }))] }));
+};
+export default SidePanel;

package/dist/esm/index.js

@@ -23,3 +23,5 @@ 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";
+export * from "./SidePanel/index.js";

package/dist/index.d.ts

@@ -23,3 +23,5 @@ 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";
+export * from "./SidePanel/index.js";

package/package.json

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

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/DatePicker/index.tsx

@@ -61,7 +61,7 @@ export const FormDatePicker = (props: Props) => {
   };
 
   return (
-    <>
+    <div>
       {title && (
         <label
           htmlFor={error ? `${name}-error` : `${name}-success`}
@@ -130,6 +130,6 @@ export const FormDatePicker = (props: Props) => {
           {hint}
         </p>
       )}
-    </>
+    </div>
   );
 };

package/src/Form/ReactZodForm/index.tsx

@@ -15,6 +15,7 @@ type Props = {
   onSubmit?: SubmitHandler<FieldValues>;
   id?: string;
   method?: "post" | "put" | "delete" | "patch";
+  className?: string;
 };
 
 const emptySchema = z.any();
@@ -26,6 +27,7 @@ export const ReactZodForm = (props: Props) => {
     schema = emptySchema,
     onSubmit,
     id,
+    className,
   } = props;
 
   const submit = useSubmit();
@@ -46,10 +48,10 @@ 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}
+        className={className}
       >
         {children}
       </Form>

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,17 +64,22 @@ 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;
   const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
   const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
 
   useEffect(() => {
     setFilteredOptions(options);
@@ -93,7 +98,9 @@ export const SelectField = (props: Props) => {
     if (defaultValue) {
       setValue(defaultValue);
       setInputValue(defaultValue.label);
-      setFormValue(name || "", defaultValue);
+      if (setFormValue) {
+        setFormValue(name || "", defaultValue.value);
+      }
     }
 
     document.addEventListener("mousedown", handleClickOutside);
@@ -104,6 +111,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 +131,19 @@ export const SelectField = (props: Props) => {
         : [...valueMulti, option];
       setValueMulti(newValue);
       onChangeMulti && onChangeMulti(newValue);
-      setFormValue(name || "", newValue);
+      if (setFormValue) {
+        setFormValue(
+          name || "",
+          newValue.map((v) => v.value)
+        );
+      }
     } else {
       setValue(option);
       setInputValue(option.label);
       onChange && onChange(option);
-      setFormValue(name || "", option);
+      if (setFormValue) {
+        setFormValue(name || "", option.value);
+      }
     }
     setIsOpen(false);
   };
@@ -135,11 +152,15 @@ export const SelectField = (props: Props) => {
     if (isMulti) {
       setValueMulti([]);
       onChangeMulti && onChangeMulti([]);
-      setFormValue(name || "", []);
+      if (setFormValue) {
+        setFormValue(name || "", []);
+      }
     } else {
       setValue(null);
       onChange && onChange(null);
-      setFormValue(name || "", null);
+      if (setFormValue) {
+        setFormValue(name || "", "");
+      }
     }
     setInputValue("");
   };
@@ -245,33 +266,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
@@ -67,13 +68,18 @@ export const TextField = (props: Props) => {
   const isReadOnly = disabled || readOnly;
   const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
   const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
-  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
 
   useEffect(() => {
+    if (setOnFormValue) {
+      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 +87,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 +112,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 +126,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/Form/TimePicker/index.tsx

@@ -45,7 +45,7 @@ export const FormTimePicker = (props: Props) => {
 
   const isReadOnly = disabled;
   const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
-  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
   const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
 
   useEffect(() => {

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";