@zauru-sdk/components 2.0.77 → 2.0.79

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.79](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.78...v2.0.79) (2024-12-17)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [2.0.78](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.77...v2.0.78) (2024-12-17)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.77](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.76...v2.0.77) (2024-12-13)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/DynamicTable/GenericDynamicTable.d.ts

@@ -23,6 +23,8 @@ type Props = {
     withoutBg?: boolean;
     orientation?: "horizontal" | "vertical";
     maxRows?: number;
+    confirmDelete?: boolean;
+    addRowButtonHandler?: (tableData: RowDataType[], setTableData: (data: RowDataType[]) => void) => void;
 };
 /**
  *

package/dist/Footer/Footer.d.ts

@@ -1,7 +1,7 @@
 type FooterProps = {
     href: string;
     showConnection?: boolean;
-    selectedColor: "purple" | "pink" | "indigo" | "cyan" | "slate" | "green" | "red" | "sky";
+    selectedColor: "purple" | "pink" | "indigo" | "cyan" | "slate" | "green" | "red" | "sky" | "yellow";
     version?: string;
 };
 export declare const Footer: ({ href, selectedColor, showConnection, version, }: FooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/RadioButton/index.d.ts

@@ -0,0 +1,18 @@
+import { SelectFieldOption } from "@zauru-sdk/types";
+import React from "react";
+type Props = {
+    id?: string;
+    name: string;
+    title?: string;
+    options: SelectFieldOption[];
+    defaultValue?: string | number;
+    disabled?: boolean;
+    required?: boolean;
+    onChange?: (value: string | number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    helpText?: string;
+    hint?: string;
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+};
+export declare const RadioButton: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/index.d.ts

@@ -11,3 +11,4 @@ export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
 export * from "./ReactZodForm/index.js";
+export * from "./RadioButton/index.js";

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

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

package/dist/Modal/ItemModal.d.ts

@@ -0,0 +1,24 @@
+type Item = {
+    name: string;
+    code: string;
+    unitPrice: number;
+    stock: number;
+    currencyPrefix: string;
+    imageUrl: string;
+};
+type ItemCategory = {
+    name: string;
+    items: Item[];
+};
+type ItemModalProps = {
+    itemList: ItemCategory[];
+    onClose: (selectedItem: Item | null) => void;
+    config?: {
+        itemSize: {
+            width: string;
+            height: string;
+        };
+    };
+};
+export declare const createItemModal: (itemList: ItemCategory[], config?: ItemModalProps["config"]) => Promise<Item | null>;
+export {};

package/dist/Modal/index.d.ts

@@ -1 +1,2 @@
 export * from "./Modal.js";
+export * from "./ItemModal.js";

package/dist/esm/Containers/BodyContainer.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const BodyContainer = (props) => {
     const { children } = props;
-    return (_jsx(_Fragment, { children: _jsx("body", { className: "flex flex-col min-h-screen m-0", children: children }) }));
+    return _jsx("body", { className: "flex flex-col min-h-screen m-0", children: children });
 };

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -68,7 +68,7 @@ const GenericDynamicTableErrorComponent = ({ name }) => {
   />
  */
 export const GenericDynamicTable = (props) => {
-    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, } = props;
+    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, confirmDelete = true, addRowButtonHandler, } = props;
     try {
         const [tableData, setTableData] = useState(defaultValue);
         const [deletedData, setDeletedData] = useState([]);
@@ -181,14 +181,19 @@ export const GenericDynamicTable = (props) => {
         const renderDeleteButton = (rowData) => (_jsx("td", { className: "align-middle w-16", children: _jsx(WithTooltip, { text: "Eliminar", children: _jsx("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
-                        createModal({
-                            title: "¿Está seguro que quiere eliminar este registro?",
-                            description: "Una vez eliminada la información no podrá ser recuperada.",
-                        }).then((response) => {
-                            if (response === "OK") {
-                                removeRow(rowData.id);
-                            }
-                        });
+                        if (confirmDelete) {
+                            createModal({
+                                title: "¿Está seguro que quiere eliminar este registro?",
+                                description: "Una vez eliminada la información no podrá ser recuperada.",
+                            }).then((response) => {
+                                if (response === "OK") {
+                                    removeRow(rowData.id);
+                                }
+                            });
+                        }
+                        else {
+                            removeRow(rowData.id);
+                        }
                     }, type: "button", children: _jsx(TrashSvg, {}) }) }) }));
         const renderRows = () => {
             let mapeable = filteredTableData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
@@ -242,7 +247,12 @@ export const GenericDynamicTable = (props) => {
                                     .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), _jsxs("table", { className: "w-full", children: [orientation === "horizontal" && _jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), editable && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: orientation === "horizontal" ? columns.length + 1 : 2, className: "align-middle", children: (!maxRows || tableData.length < maxRows) && (_jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
                                                     event.preventDefault();
                                                     event.stopPropagation();
-                                                    addRow();
+                                                    if (addRowButtonHandler) {
+                                                        addRowButtonHandler(tableData, setTableData);
+                                                    }
+                                                    else {
+                                                        addRow();
+                                                    }
                                                 }, type: "button", children: "+" })) }) }) })), footerRow && (_jsx("tfoot", { className: "border-t-2 border-black", children: _jsxs("tr", { children: [columns.map((column, index) => {
                                                 const footerCell = footerRow.find((fc) => fc.name === column.name);
                                                 return (_jsx("td", { colSpan: orientation === "vertical" ? 2 : 1, className: `align-middle ${footerCell?.className || ""}`, children: footerCell ? footerCell.content : _jsx(_Fragment, {}) }, index));

package/dist/esm/Footer/Footer.js

@@ -9,8 +9,9 @@ const COLORS = {
     green: "bg-green-500",
     red: "bg-red-500",
     sky: "bg-sky-500",
+    yellow: "bg-yellow-500",
 };
 export const Footer = ({ href, selectedColor, showConnection = false, version = "2.0.5", }) => {
     const color = COLORS[selectedColor];
-    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.${version}`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
+    return (_jsx("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: _jsxs("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [_jsxs("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", _jsx("a", { href: href, children: "Zauru" }), " ", `con ❤️ v.${version}`] }), showConnection && (_jsx("div", { className: "ml-5", children: _jsx(ConnectionState, {}) }))] }) }));
 };

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+export const RadioButton = (props) => {
+    const { id, name, title, options, defaultValue, disabled = false, required = false, onChange, helpText, hint, className = "", orientation = "vertical", } = props;
+    const [selectedValue, setSelectedValue] = useState(defaultValue);
+    const { register: tempRegister, formState: { errors }, setValue: setOnFormValue, } = useFormContext() || { formState: {} };
+    const error = errors ? errors[name] : undefined;
+    const color = error ? "red" : "gray";
+    const register = tempRegister ? tempRegister(name, { required }) : undefined; // Solo usar register si está disponible
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        setSelectedValue(newValue);
+        if (register) {
+            register.onChange(event);
+        }
+        if (setOnFormValue) {
+            setOnFormValue(name, newValue);
+        }
+        onChange && onChange(newValue, event);
+    };
+    const containerClass = orientation === "horizontal"
+        ? "flex items-center gap-4 flex-wrap" // Estilo para disposición horizontal
+        : ""; // Vertical no necesita clase especial
+    return (_jsxs("div", { className: `col-span-6 sm:col-span-3 ${className}`, children: [title && (_jsxs("label", { htmlFor: id ?? name, className: `block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [title, required && _jsx("span", { className: "text-red-500", children: "*" })] })), _jsx("div", { className: containerClass, children: options.map((option) => (_jsxs("div", { className: `flex items-center mb-2 ${disabled ? "opacity-50 pointer-events-none" : ""}`, children: [_jsx("input", { type: "radio", id: `${name}-${option.value}`, value: option.value, disabled: disabled, checked: selectedValue === option.value, className: `h-4 w-4 text-indigo-600 border-${color}-300 focus:ring-indigo-500`, ...(register ?? {}), onChange: handleChange }), _jsx("label", { htmlFor: `${name}-${option.value}`, className: `ml-2 block text-sm font-medium text-${color}-900 dark:text-${color}-500`, children: option.label })] }, option.value))) }), helpText && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: helpText })), error && (_jsxs("p", { className: `mt-2 text-sm text-${color}-600 dark:text-${color}-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error.message?.toString()] })), !error && hint && (_jsx("p", { className: `mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`, children: hint }))] }));
+};

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

@@ -154,12 +154,8 @@ export const SelectField = (props) => {
         }
         else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
             e.preventDefault();
-            if (!isMulti) {
-                handleClear();
-            }
-            else {
-                setInputValue("");
-            }
+            handleClear();
+            setInputValue("");
             setFilteredOptions(options);
             setIsOpen(true);
         }

package/dist/esm/Form/index.js

@@ -11,3 +11,4 @@ export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
 export * from "./ReactZodForm/index.js";
+export * from "./RadioButton/index.js";

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

@@ -1,7 +1,7 @@
 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, }) => {
+export const ValidateEmployeeAccess = ({ children, permissionVariableName, showIfNoPermission = false, noPermissionComponent, }) => {
     const { data: employee } = useGetEmployeeProfile();
     const variable_string = useGetSessionAttribute(permissionVariableName, "sessionVariable");
     const variable = variable_string?.split(",");
@@ -9,5 +9,8 @@ export const ValidateEmployeeAccess = ({ children, permissionVariableName, showI
     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." }) })] }));
     }
+    if (noPermissionComponent && !hasPermission) {
+        return _jsx(_Fragment, { children: noPermissionComponent });
+    }
     return _jsx(_Fragment, { children: hasPermission ? children : null });
 };

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

@@ -2,13 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRouteErrorResponse, Links, Meta, Scripts, useRouteError, Link, } from "@remix-run/react";
 import { useState } from "react";
 export const ErrorLayout = ({ from, error: parentError, }) => {
-    const error = useRouteError();
-    const [showDetails, setShowDetails] = useState(!!parentError);
-    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!" }), _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 ${error.status}: ${error.statusText}`
-                                    : error instanceof Error
-                                        ? error.message
-                                        : "Ha ocurrido un error inesperado" }), from && (_jsxs("p", { className: "text-lg text-gray-400 mb-4 text-center", children: ["Error lanzado desde: ", from] })), parentError && (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("button", { onClick: () => setShowDetails(!showDetails), className: "text-blue-400 hover:text-blue-300 transition duration-300", children: showDetails ? "Ocultar detalles" : "Ver más detalles" }), showDetails && (_jsx("p", { className: "mt-2 text-gray-400 text-sm", children: parentError instanceof Error
-                                            ? parentError.message
-                                            : String(parentError) }))] }))] }), _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 text-center", children: _jsx("p", { children: "Si el problema persiste, por favor contacta a soporte." }) }), _jsx(Scripts, {})] })] }));
+    try {
+        const error = useRouteError();
+        const [showDetails, setShowDetails] = useState(!!parentError);
+        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!" }), _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 ${error.status}: ${error.statusText}`
+                                        : error instanceof Error
+                                            ? error.message
+                                            : "Ha ocurrido un error inesperado" }), from && (_jsxs("p", { className: "text-lg text-gray-400 mb-4 text-center", children: ["Error lanzado desde: ", from] })), parentError && (_jsxs("div", { className: "mb-4 text-center", children: [_jsx("button", { onClick: () => setShowDetails(!showDetails), className: "text-blue-400 hover:text-blue-300 transition duration-300", children: showDetails ? "Ocultar detalles" : "Ver más detalles" }), showDetails && (_jsx("p", { className: "mt-2 text-gray-400 text-sm", children: parentError instanceof Error
+                                                ? parentError.message
+                                                : String(parentError) }))] }))] }), _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 text-center", children: _jsx("p", { children: "Si el problema persiste, por favor contacta a soporte." }) }), _jsx(Scripts, {})] })] }));
+    }
+    catch (error) {
+        console.error(error);
+        return (_jsxs("html", { lang: "es", className: "bg-gray-900 text-white", children: [_jsx("head", { children: _jsx("title", { children: "\u00A1Ups! Algo sali\u00F3 mal" }) }), _jsxs("body", { children: ["Error al renderizar el layout de error ", error] })] }));
+    }
 };

package/dist/esm/Modal/ItemModal.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { createRoot } from "react-dom/client";
+const ItemSelectionModal = ({ itemList, onClose, config, }) => {
+    const defaultConfig = {
+        itemSize: {
+            width: config?.itemSize?.width || "150px",
+            height: config?.itemSize?.height || "200px",
+        },
+    };
+    const [searchTerm, setSearchTerm] = useState("");
+    const [expandedCategories, setExpandedCategories] = useState({});
+    const toggleCategory = (categoryName) => {
+        setExpandedCategories((prev) => ({
+            ...prev,
+            [categoryName]: !prev[categoryName],
+        }));
+    };
+    const handleItemClick = (item) => {
+        onClose(item);
+    };
+    const filteredList = itemList
+        .map((category) => ({
+        ...category,
+        items: category.items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase())),
+    }))
+        .filter((category) => category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        category.items.length > 0);
+    return (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50", children: _jsxs("div", { className: "bg-white p-4 rounded-lg shadow-lg w-11/12 max-w-4xl h-5/6 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col mb-4", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-2xl font-bold", children: "Seleccionar un \u00CDtem" }), _jsx("button", { className: "text-gray-500 hover:text-gray-800", onClick: () => onClose(null), children: "\u00D7" })] }), _jsx("input", { type: "text", placeholder: "Buscar por nombre o categor\u00EDa...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "p-2 border rounded-lg w-full" })] }), filteredList.length === 0 ? (_jsx("p", { className: "text-gray-500 text-center", children: "No se encontraron resultados." })) : (filteredList.map((category) => (_jsxs("div", { className: "mb-4", children: [_jsxs("h3", { className: "text-lg font-semibold mb-2 cursor-pointer flex justify-between items-center hover:text-blue-600", onClick: () => toggleCategory(category.name), children: [_jsxs("span", { children: [category.name, " ", _jsxs("span", { className: "text-gray-500", children: ["(", category.items.length, ")"] })] }), _jsx("span", { className: `transform transition-transform duration-200 ${expandedCategories[category.name] ? "rotate-90" : ""}`, children: "\u25B6" })] }), expandedCategories[category.name] && (_jsx("div", { className: "grid gap-5", style: {
+                                gridTemplateColumns: `repeat(auto-fit, minmax(${defaultConfig.itemSize.width}, 1fr))`,
+                            }, children: category.items.map((item) => (_jsxs("div", { className: "border rounded-lg shadow-lg hover:shadow-xl cursor-pointer relative", onClick: () => handleItemClick(item), style: {
+                                    backgroundImage: `url(${item.imageUrl})`,
+                                    backgroundSize: "cover",
+                                    backgroundPosition: "center",
+                                    width: defaultConfig.itemSize.width,
+                                    height: defaultConfig.itemSize.height,
+                                }, children: [_jsx("div", { className: "bg-white bg-opacity-80 p-2 rounded absolute top-0 left-0 right-0", children: _jsx("h4", { className: "font-bold text-sm text-center", children: item.name }) }), _jsx("div", { className: "absolute bottom-0 left-0 bg-white bg-opacity-80 p-2 rounded", children: _jsxs("span", { className: "text-xs", children: ["Stock: ", item.stock] }) }), _jsx("div", { className: "absolute bottom-0 right-0 bg-white bg-opacity-80 p-2 rounded", children: _jsxs("span", { className: "text-xs", children: [item.currencyPrefix, item.unitPrice] }) })] }, item.code))) }))] }, category.name))))] }) }));
+};
+// Función para crear el modal
+export const createItemModal = (itemList, config) => {
+    return new Promise((resolve) => {
+        const handleClose = (selectedItem) => {
+            resolve(selectedItem);
+            removeModal();
+        };
+        const removeModal = () => {
+            document.body.removeChild(modalWrapper);
+        };
+        const modalWrapper = document.createElement("div");
+        document.body.appendChild(modalWrapper);
+        const root = createRoot(modalWrapper);
+        root.render(_jsx(ItemSelectionModal, { itemList: itemList, onClose: handleClose, config: config }));
+    });
+};

package/dist/esm/Modal/index.js

@@ -1 +1,2 @@
 export * from "./Modal.js";
+export * from "./ItemModal.js";

package/dist/esm/NavBar/NavBar.js

@@ -11,25 +11,13 @@ const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) =>
 export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);
-    const [isDarkMode, setIsDarkMode] = useState(false);
     const [currentVersion, setCurrentVersion] = useState(version);
     const navigate = useNavigate();
-    useEffect(() => {
-        if (isDarkMode) {
-            document.documentElement.classList.add("dark");
-        }
-        else {
-            document.documentElement.classList.remove("dark");
-        }
-    }, [isDarkMode]);
     useEffect(() => {
         if (version !== currentVersion) {
             setCurrentVersion(version);
         }
     }, [version, currentVersion]);
-    const toggleDarkMode = () => {
-        setIsDarkMode(!isDarkMode);
-    };
     const refreshPage = () => {
         navigate(0);
     };
@@ -43,7 +31,6 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
         }) }));
     const options = (_jsxs(_Fragment, { children: [_jsx("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items.filter((item) => item.loggedIn === loggedIn)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
                         _jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/logout", prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }),
-                        _jsx("button", { className: `block w-full text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white`, onClick: toggleDarkMode, children: _jsxs("div", { className: "mx-auto pt-2", children: [isDarkMode ? "🌞" : "🌙", _jsx("span", { children: isDarkMode ? "Modo Claro" : "Modo Oscuro" })] }) }),
                     ] })) })] }));
     return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between items-center w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), version !== currentVersion && (_jsx("button", { className: `ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`, onClick: refreshPage, children: "\uD83D\uDD04 Actualizar versi\u00F3n" })), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} dark:bg-gray-900 shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
 };

package/dist/esm/Skeletons/LoadingWindow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
-export const LoadingWindow = ({ loadingItems, description = "Por favor, espere mientras se carga la página.", }) => {
-    return (_jsx("div", { className: "min-h-screen bg-gray-100 flex flex-col justify-center items-center", children: _jsxs(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, className: "text-center flex flex-col items-center", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-3xl font-bold text-gray-800 mb-4", children: "Cargando..." }), _jsx("p", { className: "text-gray-600 mb-4", children: description }), loadingItems && (_jsx("ul", { className: "text-left mb-4", children: loadingItems.map((item, index) => (_jsxs("li", { className: "flex items-center mb-2", children: [_jsx("svg", { className: `${item.loading ? "" : "hidden"} w-5 h-5 text-blue-500 mr-2 animate-spin loading-spinner`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), _jsx("svg", { className: `${item.loading ? "hidden" : ""} w-5 h-5 text-green-500 mr-2 check-mark`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), _jsx("span", { children: item.name })] }, index))) })), _jsx(motion.div, { animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" }, className: "mt-8", children: _jsx("svg", { className: "w-12 h-12 text-blue-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx(motion.path, { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" } }) }) })] }) }));
+export const LoadingWindow = ({ loadingItems = [], description = "Por favor, espere mientras se carga la página.", }) => {
+    return (_jsx("div", { className: "min-h-screen bg-gray-200 flex flex-col justify-center items-center", children: _jsxs(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, className: "text-center flex flex-col items-center", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-3xl font-bold text-gray-800 mb-4", children: "Cargando..." }), _jsx("p", { className: "text-gray-600 mb-4", children: description }), loadingItems && (_jsx("ul", { className: "text-left mb-4", children: loadingItems.map((item, index) => (_jsxs("li", { className: "flex items-center mb-2", children: [_jsx("svg", { className: `${item.loading ? "" : "hidden"} w-5 h-5 text-blue-500 mr-2 animate-spin loading-spinner`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), _jsx("svg", { className: `${item.loading ? "hidden" : ""} w-5 h-5 text-green-500 mr-2 check-mark`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), _jsx("span", { children: item.name })] }, index))) })), _jsx(motion.div, { animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" }, className: "mt-8", children: _jsx("svg", { className: "w-12 h-12 text-blue-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx(motion.path, { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" } }) }) })] }) }));
 };
 export default LoadingWindow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.77",
+  "version": "2.0.79",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -33,11 +33,11 @@
     "@hookform/resolvers": "^3.9.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^2.0.77",
-    "@zauru-sdk/hooks": "^2.0.77",
+    "@zauru-sdk/common": "^2.0.78",
+    "@zauru-sdk/hooks": "^2.0.78",
     "@zauru-sdk/icons": "^2.0.0",
-    "@zauru-sdk/types": "^2.0.70",
-    "@zauru-sdk/utils": "^2.0.77",
+    "@zauru-sdk/types": "^2.0.78",
+    "@zauru-sdk/utils": "^2.0.79",
     "framer-motion": "^11.7.0",
     "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
@@ -49,5 +49,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "127c74c34eccffe40b39ad76957297833a8fc04c"
+  "gitHead": "4055b172e4a8813f86234a8038303d759740cd6f"
 }

package/src/Containers/BodyContainer.tsx

@@ -6,9 +6,5 @@ type Props = {
 
 export const BodyContainer = (props: Props) => {
   const { children } = props;
-  return (
-    <>
-      <body className="flex flex-col min-h-screen m-0">{children}</body>
-    </>
-  );
+  return <body className="flex flex-col min-h-screen m-0">{children}</body>;
 };

package/src/DynamicTable/GenericDynamicTable.tsx

@@ -40,6 +40,11 @@ type Props = {
   withoutBg?: boolean;
   orientation?: "horizontal" | "vertical";
   maxRows?: number;
+  confirmDelete?: boolean;
+  addRowButtonHandler?: (
+    tableData: RowDataType[],
+    setTableData: (data: RowDataType[]) => void
+  ) => void;
 };
 
 const GenericDynamicTableErrorComponent = ({ name }: { name: string }) => {
@@ -127,6 +132,8 @@ export const GenericDynamicTable = (props: Props) => {
     withoutBg = false,
     orientation = "horizontal",
     maxRows,
+    confirmDelete = true,
+    addRowButtonHandler,
   } = props;
 
   try {
@@ -346,15 +353,19 @@ export const GenericDynamicTable = (props: Props) => {
             ) => {
               event.preventDefault();
               event.stopPropagation();
-              createModal({
-                title: "¿Está seguro que quiere eliminar este registro?",
-                description:
-                  "Una vez eliminada la información no podrá ser recuperada.",
-              }).then((response) => {
-                if (response === "OK") {
-                  removeRow(rowData.id);
-                }
-              });
+              if (confirmDelete) {
+                createModal({
+                  title: "¿Está seguro que quiere eliminar este registro?",
+                  description:
+                    "Una vez eliminada la información no podrá ser recuperada.",
+                }).then((response) => {
+                  if (response === "OK") {
+                    removeRow(rowData.id);
+                  }
+                });
+              } else {
+                removeRow(rowData.id);
+              }
             }}
             type="button"
           >
@@ -474,7 +485,11 @@ export const GenericDynamicTable = (props: Props) => {
                         ) => {
                           event.preventDefault();
                           event.stopPropagation();
-                          addRow();
+                          if (addRowButtonHandler) {
+                            addRowButtonHandler(tableData, setTableData);
+                          } else {
+                            addRow();
+                          }
                         }}
                         type="button"
                       >

package/src/Footer/Footer.tsx

@@ -11,7 +11,8 @@ type FooterProps = {
     | "slate"
     | "green"
     | "red"
-    | "sky";
+    | "sky"
+    | "yellow";
   version?: string;
 };
 
@@ -24,6 +25,7 @@ const COLORS = {
   green: "bg-green-500",
   red: "bg-red-500",
   sky: "bg-sky-500",
+  yellow: "bg-yellow-500",
 };
 
 export const Footer = ({
@@ -38,8 +40,7 @@ export const Footer = ({
     <footer className={`inset-x-0 bottom-0 px-2 py-[20px] ${color}`}>
       <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
         <p className="text-white text-[1.2rem]">
-          {`Creado en `} <a href={href}>Zauru</a>{" "}
-          {`con ❤️ ${new Date().getFullYear()} v.${version}`}
+          {`Creado en `} <a href={href}>Zauru</a> {`con ❤️ v.${version}`}
         </p>
         {showConnection && (
           <div className="ml-5">

package/src/Form/RadioButton/index.tsx

@@ -0,0 +1,130 @@
+import { SelectFieldOption } from "@zauru-sdk/types";
+import React, { useState } from "react";
+import { useFormContext } from "react-hook-form";
+
+type Props = {
+  id?: string;
+  name: string;
+  title?: string;
+  options: SelectFieldOption[];
+  defaultValue?: string | number;
+  disabled?: boolean;
+  required?: boolean;
+  onChange?: (
+    value: string | number,
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => void;
+  helpText?: string;
+  hint?: string;
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+};
+
+export const RadioButton = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    options,
+    defaultValue,
+    disabled = false,
+    required = false,
+    onChange,
+    helpText,
+    hint,
+    className = "",
+    orientation = "vertical",
+  } = props;
+
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const {
+    register: tempRegister,
+    formState: { errors },
+    setValue: setOnFormValue,
+  } = useFormContext() || { formState: {} };
+
+  const error = errors ? errors[name] : undefined;
+  const color = error ? "red" : "gray";
+
+  const register = tempRegister ? tempRegister(name, { required }) : undefined; // Solo usar register si está disponible
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setSelectedValue(newValue);
+
+    if (register) {
+      register.onChange(event);
+    }
+
+    if (setOnFormValue) {
+      setOnFormValue(name, newValue);
+    }
+
+    onChange && onChange(newValue, event);
+  };
+
+  const containerClass =
+    orientation === "horizontal"
+      ? "flex items-center gap-4 flex-wrap" // Estilo para disposición horizontal
+      : ""; // Vertical no necesita clase especial
+
+  return (
+    <div className={`col-span-6 sm:col-span-3 ${className}`}>
+      {title && (
+        <label
+          htmlFor={id ?? name}
+          className={`block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`}
+        >
+          {title}
+          {required && <span className="text-red-500">*</span>}
+        </label>
+      )}
+      <div className={containerClass}>
+        {options.map((option) => (
+          <div
+            key={option.value}
+            className={`flex items-center mb-2 ${
+              disabled ? "opacity-50 pointer-events-none" : ""
+            }`}
+          >
+            <input
+              type="radio"
+              id={`${name}-${option.value}`}
+              value={option.value}
+              disabled={disabled}
+              checked={selectedValue === option.value}
+              className={`h-4 w-4 text-indigo-600 border-${color}-300 focus:ring-indigo-500`}
+              {...(register ?? {})}
+              onChange={handleChange}
+            />
+            <label
+              htmlFor={`${name}-${option.value}`}
+              className={`ml-2 block text-sm font-medium text-${color}-900 dark:text-${color}-500`}
+            >
+              {option.label}
+            </label>
+          </div>
+        ))}
+      </div>
+      {helpText && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {helpText}
+        </p>
+      )}
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error.message?.toString()}
+        </p>
+      )}
+      {!error && hint && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {hint}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/Form/SelectField/index.tsx

@@ -226,11 +226,8 @@ export const SelectField = (props: Props) => {
       handleOptionClick(filteredOptions[highlightedIndex]);
     } else if (e.key === "Backspace" && (value || valueMulti.length > 0)) {
       e.preventDefault();
-      if (!isMulti) {
-        handleClear();
-      } else {
-        setInputValue("");
-      }
+      handleClear();
+      setInputValue("");
       setFilteredOptions(options);
       setIsOpen(true);
     }

package/src/Form/index.ts

@@ -11,3 +11,4 @@ export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
 export * from "./ReactZodForm/index.js";
+export * from "./RadioButton/index.js";

package/src/HOC/ValidateEmployeeAccess/index.tsx

@@ -8,10 +8,12 @@ export const ValidateEmployeeAccess = ({
   children,
   permissionVariableName,
   showIfNoPermission = false,
+  noPermissionComponent,
 }: {
   children: React.ReactNode;
   permissionVariableName: string;
   showIfNoPermission?: boolean;
+  noPermissionComponent?: React.ReactNode;
 }) => {
   const { data: employee } = useGetEmployeeProfile();
   const variable_string = useGetSessionAttribute(
@@ -47,5 +49,9 @@ export const ValidateEmployeeAccess = ({
     );
   }
 
+  if (noPermissionComponent && !hasPermission) {
+    return <>{noPermissionComponent}</>;
+  }
+
   return <>{hasPermission ? children : null}</>;
 };

package/src/Layouts/errorLayout/index.tsx

@@ -15,63 +15,75 @@ export const ErrorLayout = ({
   from?: string;
   error?: Error;
 }) => {
-  const error = useRouteError();
-  const [showDetails, setShowDetails] = useState(!!parentError);
+  try {
+    const error = useRouteError();
+    const [showDetails, setShowDetails] = useState(!!parentError);
 
-  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 flex flex-col items-center">
-          <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>
-          {from && (
-            <p className="text-lg text-gray-400 mb-4 text-center">
-              Error lanzado desde: {from}
+    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 flex flex-col items-center">
+            <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>
-          )}
-          {parentError && (
-            <div className="mb-4 text-center">
-              <button
-                onClick={() => setShowDetails(!showDetails)}
-                className="text-blue-400 hover:text-blue-300 transition duration-300"
-              >
-                {showDetails ? "Ocultar detalles" : "Ver más detalles"}
-              </button>
-              {showDetails && (
-                <p className="mt-2 text-gray-400 text-sm">
-                  {parentError instanceof Error
-                    ? parentError.message
-                    : String(parentError)}
-                </p>
-              )}
-            </div>
-          )}
-        </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 text-center">
-          <p>Si el problema persiste, por favor contacta a soporte.</p>
-        </div>
-        <Scripts />
-      </body>
-    </html>
-  );
+            {from && (
+              <p className="text-lg text-gray-400 mb-4 text-center">
+                Error lanzado desde: {from}
+              </p>
+            )}
+            {parentError && (
+              <div className="mb-4 text-center">
+                <button
+                  onClick={() => setShowDetails(!showDetails)}
+                  className="text-blue-400 hover:text-blue-300 transition duration-300"
+                >
+                  {showDetails ? "Ocultar detalles" : "Ver más detalles"}
+                </button>
+                {showDetails && (
+                  <p className="mt-2 text-gray-400 text-sm">
+                    {parentError instanceof Error
+                      ? parentError.message
+                      : String(parentError)}
+                  </p>
+                )}
+              </div>
+            )}
+          </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 text-center">
+            <p>Si el problema persiste, por favor contacta a soporte.</p>
+          </div>
+          <Scripts />
+        </body>
+      </html>
+    );
+  } catch (error: any) {
+    console.error(error);
+    return (
+      <html lang="es" className="bg-gray-900 text-white">
+        <head>
+          <title>¡Ups! Algo salió mal</title>
+        </head>
+        <body>Error al renderizar el layout de error {error}</body>
+      </html>
+    );
+  }
 };

package/src/Modal/ItemModal.tsx

@@ -0,0 +1,186 @@
+import React, { useState } from "react";
+import { createRoot } from "react-dom/client";
+
+// Tipos de datos
+type Item = {
+  name: string;
+  code: string;
+  unitPrice: number;
+  stock: number;
+  currencyPrefix: string;
+  imageUrl: string;
+};
+
+type ItemCategory = { name: string; items: Item[] };
+
+type ItemModalProps = {
+  itemList: ItemCategory[];
+  onClose: (selectedItem: Item | null) => void;
+  config?: { itemSize: { width: string; height: string } }; // Tamaño configurable
+};
+
+const ItemSelectionModal: React.FC<ItemModalProps> = ({
+  itemList,
+  onClose,
+  config,
+}) => {
+  const defaultConfig = {
+    itemSize: {
+      width: config?.itemSize?.width || "150px",
+      height: config?.itemSize?.height || "200px",
+    },
+  };
+
+  const [searchTerm, setSearchTerm] = useState("");
+  const [expandedCategories, setExpandedCategories] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const toggleCategory = (categoryName: string) => {
+    setExpandedCategories((prev) => ({
+      ...prev,
+      [categoryName]: !prev[categoryName],
+    }));
+  };
+
+  const handleItemClick = (item: Item) => {
+    onClose(item);
+  };
+
+  const filteredList = itemList
+    .map((category) => ({
+      ...category,
+      items: category.items.filter((item) =>
+        item.name.toLowerCase().includes(searchTerm.toLowerCase())
+      ),
+    }))
+    .filter(
+      (category) =>
+        category.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        category.items.length > 0
+    );
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+      <div className="bg-white p-4 rounded-lg shadow-lg w-11/12 max-w-4xl h-5/6 overflow-y-auto">
+        {/* Header */}
+        <div className="flex flex-col mb-4">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-2xl font-bold">Seleccionar un Ítem</h2>
+            <button
+              className="text-gray-500 hover:text-gray-800"
+              onClick={() => onClose(null)}
+            >
+              &times;
+            </button>
+          </div>
+          {/* Barra de búsqueda */}
+          <input
+            type="text"
+            placeholder="Buscar por nombre o categoría..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="p-2 border rounded-lg w-full"
+          />
+        </div>
+
+        {/* Lista de categorías e ítems */}
+        {filteredList.length === 0 ? (
+          <p className="text-gray-500 text-center">
+            No se encontraron resultados.
+          </p>
+        ) : (
+          filteredList.map((category) => (
+            <div key={category.name} className="mb-4">
+              <h3
+                className="text-lg font-semibold mb-2 cursor-pointer flex justify-between items-center hover:text-blue-600"
+                onClick={() => toggleCategory(category.name)}
+              >
+                <span>
+                  {category.name}{" "}
+                  <span className="text-gray-500">
+                    ({category.items.length})
+                  </span>
+                </span>
+                <span
+                  className={`transform transition-transform duration-200 ${
+                    expandedCategories[category.name] ? "rotate-90" : ""
+                  }`}
+                >
+                  ▶
+                </span>
+              </h3>
+              {expandedCategories[category.name] && (
+                <div
+                  className="grid gap-5"
+                  style={{
+                    gridTemplateColumns: `repeat(auto-fit, minmax(${defaultConfig.itemSize.width}, 1fr))`,
+                  }}
+                >
+                  {category.items.map((item) => (
+                    <div
+                      key={item.code}
+                      className="border rounded-lg shadow-lg hover:shadow-xl cursor-pointer relative"
+                      onClick={() => handleItemClick(item)}
+                      style={{
+                        backgroundImage: `url(${item.imageUrl})`,
+                        backgroundSize: "cover",
+                        backgroundPosition: "center",
+                        width: defaultConfig.itemSize.width,
+                        height: defaultConfig.itemSize.height,
+                      }}
+                    >
+                      <div className="bg-white bg-opacity-80 p-2 rounded absolute top-0 left-0 right-0">
+                        <h4 className="font-bold text-sm text-center">
+                          {item.name}
+                        </h4>
+                      </div>
+                      <div className="absolute bottom-0 left-0 bg-white bg-opacity-80 p-2 rounded">
+                        <span className="text-xs">Stock: {item.stock}</span>
+                      </div>
+                      <div className="absolute bottom-0 right-0 bg-white bg-opacity-80 p-2 rounded">
+                        <span className="text-xs">
+                          {item.currencyPrefix}
+                          {item.unitPrice}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Función para crear el modal
+export const createItemModal = (
+  itemList: ItemCategory[],
+  config?: ItemModalProps["config"]
+): Promise<Item | null> => {
+  return new Promise((resolve) => {
+    const handleClose = (selectedItem: Item | null) => {
+      resolve(selectedItem);
+      removeModal();
+    };
+
+    const removeModal = () => {
+      document.body.removeChild(modalWrapper);
+    };
+
+    const modalWrapper = document.createElement("div");
+    document.body.appendChild(modalWrapper);
+
+    const root = createRoot(modalWrapper);
+    root.render(
+      <ItemSelectionModal
+        itemList={itemList}
+        onClose={handleClose}
+        config={config}
+      />
+    );
+  });
+};

package/src/Modal/index.tsx

@@ -1 +1,2 @@
 export * from "./Modal.js";
+export * from "./ItemModal.js";

package/src/NavBar/NavBar.tsx

@@ -98,28 +98,15 @@ export const NavBar = ({
 }: NavBarProps) => {
   const color: ColorInterface = COLORS[selectedColor];
   const [NavBarOpen, setNavBarOpen] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(false);
   const [currentVersion, setCurrentVersion] = useState(version);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (isDarkMode) {
-      document.documentElement.classList.add("dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-    }
-  }, [isDarkMode]);
-
   useEffect(() => {
     if (version !== currentVersion) {
       setCurrentVersion(version);
     }
   }, [version, currentVersion]);
 
-  const toggleDarkMode = () => {
-    setIsDarkMode(!isDarkMode);
-  };
-
   const refreshPage = () => {
     navigate(0);
   };
@@ -167,15 +154,6 @@ export const NavBar = ({
                   <span>Cerrar sesión</span>
                 </div>
               </Link>,
-              <button
-                className={`block w-full text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white`}
-                onClick={toggleDarkMode}
-              >
-                <div className="mx-auto pt-2">
-                  {isDarkMode ? "🌞" : "🌙"}
-                  <span>{isDarkMode ? "Modo Claro" : "Modo Oscuro"}</span>
-                </div>
-              </button>,
             ]}
           />
         )}

package/src/Skeletons/LoadingWindow.tsx

@@ -12,11 +12,11 @@ interface LoadingWindowProps {
 }
 
 export const LoadingWindow: React.FC<LoadingWindowProps> = ({
-  loadingItems,
+  loadingItems = [],
   description = "Por favor, espere mientras se carga la página.",
 }) => {
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col justify-center items-center">
+    <div className="min-h-screen bg-gray-200 flex flex-col justify-center items-center">
       <motion.div
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}