@zauru-sdk/components 2.0.96 → 2.0.97

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.
 
+## [2.0.97](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.96...v2.0.97) (2025-01-07)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.96](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.95...v2.0.96) (2025-01-03)
 
 **Note:** Version bump only for package @zauru-sdk/components

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

@@ -1,4 +1,5 @@
-export declare const ErrorLayout: ({ from, error: parentError, }: {
+export declare const ErrorLayout: ({ from, isRootLevel, error: parentError, }: {
     from?: string;
+    isRootLevel?: boolean;
     error?: Error;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/NavBar/NavBar.types.d.ts

@@ -1,15 +1,17 @@
-export type NavBarItemsSchema = {
+export type NavBarItem = {
     name: string;
     link: string;
     loggedIn: boolean;
     icon?: any;
-    color?: "green";
-    childrens?: Exclude<NavBarItemsSchema, "loggedIn">[];
+    selectedColor?: "green";
+    color?: ColorInterface;
+    childrens?: Exclude<NavBarItem, "loggedIn">[];
+    reduxNotificationBadge?: (state: any) => string | number;
 };
 export type NavBarProps = {
     title: string;
     loggedIn: boolean;
-    items: Array<NavBarItemsSchema>;
+    items: Array<NavBarItem>;
     selectedColor: "pink" | "purple" | "slate" | "green" | "yellow" | "red" | "sky";
     LinkComponent?: any;
     version?: string;
@@ -26,14 +28,6 @@ export type ColorInterface = {
     ring600: string;
     ring500: string;
 };
-export type NavItemProps = {
-    name: string;
-    link: string;
-    icon?: any;
-    color: ColorInterface;
-    specialColor?: ColorInterface;
-    childrens?: Exclude<NavItemProps, "index" | "color">[];
-};
 export type EntityNameType = {
     entityName: string;
 };

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

@@ -1,20 +1,24 @@
 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, }) => {
+export const ErrorLayout = ({ from, isRootLevel = true, error: parentError, }) => {
     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, {})] })] }));
+        const baseError = (_jsxs("div", { className: "min-h-screen flex flex-col items-center justify-center p-4", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-5xl font-extrabold text-red-500 mb-6", children: "\u00A1Ups!" }), _jsxs("div", { className: "w-full max-w-2xl flex flex-col items-center", children: [_jsx("p", { className: "text-2xl text-gray-300 mb-8 text-center", children: isRouteErrorResponse(error)
+                                ? `Error ${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." }) })] }));
+        if (!isRootLevel) {
+            return baseError;
+        }
+        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: [baseError, _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] })] }));
+        console.error("Error en el layout de error:", error);
+        return null;
     }
 };

package/dist/esm/NavBar/NavBar.js

@@ -3,11 +3,23 @@ import React, { useState, useEffect } from "react";
 import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "@zauru-sdk/icons";
 import { COLORS } from "./NavBar.utils.js";
 import { Link, useNavigate } from "@remix-run/react";
+import { useAppSelector } from "@zauru-sdk/redux";
 const OptionsDropDownButton = ({ color, options, name }) => {
     const [showOptionsMenu, setShowOptionsMenu] = useState(true);
     return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
 };
-const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, specialColor: specialColor, options: childrens.map((x, index) => (_jsx(Link, { to: x.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`, children: x.name }, index))) })) : (_jsx("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150`, children: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
+const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotificationBadge, }) => {
+    const specialColor = selectedColor
+        ? COLORS[selectedColor]
+        : COLORS["slate"];
+    // Selecciona solo la parte del estado relevante
+    const relevantState = useAppSelector((state) => reduxNotificationBadge ? reduxNotificationBadge(state) : undefined);
+    const [notificationBadge, setNotificationBadge] = useState();
+    useEffect(() => {
+        setNotificationBadge(relevantState);
+    }, [relevantState]);
+    return (_jsx("li", { className: "nav-item relative", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: specialColor, options: childrens.map((x, index) => (_jsx(Link, { to: x.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`, children: x.name }, index))) })) : (_jsx("div", { className: `${specialColor.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150`, children: _jsxs(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative", to: link, children: [_jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }), notificationBadge !== undefined && (_jsx("span", { className: "absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center w-5 h-5", children: notificationBadge }))] }) })) }));
+};
 export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
     const color = COLORS[selectedColor];
     const [NavBarOpen, setNavBarOpen] = useState(false);
@@ -22,15 +34,12 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
         navigate(0);
     };
     const renderNavItems = (items) => (_jsx("div", { className: "flex flex-col lg:flex-row w-full", children: items.map((item, index) => {
-            const specialColor = item.color
-                ? COLORS[item.color]
-                : undefined;
-            return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, specialColor: specialColor, color: color, childrens: item.childrens?.map((x) => {
+            return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, selectedColor: item.selectedColor, color: color, loggedIn: item.loggedIn, reduxNotificationBadge: item.reduxNotificationBadge, childrens: item.childrens?.map((x) => {
                     return { ...x };
                 }) }, index));
         }) }));
     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(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", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }),
                     ] })) })] }));
-    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 })] }) }));
+    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", 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/Table/ZauruTable.js

@@ -27,7 +27,6 @@ const customStyles = {
         highlightOnHoverStyle: {
             backgroundColor: "rgb(230, 244, 244)",
             borderBottomColor: "#FFFFFF",
-            borderRadius: "25px",
             outline: "1px solid #FFFFFF",
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "2.0.96",
+  "version": "2.0.97",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -34,8 +34,8 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
     "@zauru-sdk/common": "^2.0.94",
-    "@zauru-sdk/hooks": "^2.0.94",
-    "@zauru-sdk/icons": "^2.0.87",
+    "@zauru-sdk/hooks": "^2.0.97",
+    "@zauru-sdk/icons": "^2.0.97",
     "@zauru-sdk/types": "^2.0.92",
     "@zauru-sdk/utils": "^2.0.96",
     "framer-motion": "^11.7.0",
@@ -49,5 +49,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "b46314dae63e6d018c4913cc8fc7ecb0c6c51d91"
+  "gitHead": "3f46d9c99fafe5f245791a7ade3c8ab5f5e8da87"
 }

package/src/Layouts/errorLayout/index.tsx

@@ -10,80 +10,85 @@ import { useState } from "react";
 
 export const ErrorLayout = ({
   from,
+  isRootLevel = true,
   error: parentError,
 }: {
   from?: string;
+  isRootLevel?: boolean;
   error?: Error;
 }) => {
   try {
     const error = useRouteError();
     const [showDetails, setShowDetails] = useState(!!parentError);
 
+    const baseError = (
+      <div 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}
+            </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>
+      </div>
+    );
+
+    if (!isRootLevel) {
+      return baseError;
+    }
+
     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>
+          <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}
-              </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>
+          {baseError}
           <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>
-    );
+  } catch (error) {
+    console.error("Error en el layout de error:", error);
+    return null;
   }
 };

package/src/NavBar/NavBar.tsx

@@ -9,11 +9,11 @@ import { COLORS } from "./NavBar.utils.js";
 import type {
   ColorInterface,
   EntityProps,
-  NavBarItemsSchema,
+  NavBarItem,
   NavBarProps,
-  NavItemProps,
 } from "./NavBar.types.js";
 import { Link, useNavigate } from "@remix-run/react";
+import { useAppSelector } from "@zauru-sdk/redux";
 
 const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
   const [showOptionsMenu, setShowOptionsMenu] = useState(true);
@@ -48,46 +48,67 @@ const NavItem = ({
   name,
   link,
   icon,
-  color,
-  specialColor,
+  selectedColor,
   childrens = [],
-}: NavItemProps) => (
-  <li className="nav-item">
-    {childrens.length > 0 ? (
-      <OptionsDropDownButton
-        name={name}
-        color={color}
-        specialColor={specialColor}
-        options={childrens.map((x, index) => (
+  reduxNotificationBadge,
+}: NavBarItem) => {
+  const specialColor: ColorInterface = selectedColor
+    ? COLORS[selectedColor]
+    : COLORS["slate"];
+
+  // Selecciona solo la parte del estado relevante
+  const relevantState = useAppSelector((state) =>
+    reduxNotificationBadge ? reduxNotificationBadge(state) : undefined
+  );
+
+  const [notificationBadge, setNotificationBadge] = useState<
+    undefined | string | number
+  >();
+
+  useEffect(() => {
+    setNotificationBadge(relevantState);
+  }, [relevantState]);
+
+  return (
+    <li className="nav-item relative">
+      {childrens.length > 0 ? (
+        <OptionsDropDownButton
+          name={name}
+          color={specialColor}
+          options={childrens.map((x, index) => (
+            <Link
+              key={index}
+              to={x.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`}
+            >
+              {x.name}
+            </Link>
+          ))}
+        />
+      ) : (
+        <div
+          className={`${specialColor.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150`}
+        >
           <Link
-            key={index}
-            to={x.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`}
+            className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative"
+            to={link}
           >
-            {x.name}
+            <div className="mx-auto pt-2">
+              {icon}
+              <span>{name}</span>
+            </div>
+            {/* Badge de notificaciones */}
+            {notificationBadge !== undefined && (
+              <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center w-5 h-5">
+                {notificationBadge}
+              </span>
+            )}
           </Link>
-        ))}
-      />
-    ) : (
-      <div
-        className={`${
-          specialColor ? specialColor.bg700 : color.bg700
-        } container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150`}
-      >
-        <Link
-          className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75"
-          to={link}
-          prefetch="none"
-        >
-          <div className="mx-auto pt-2">
-            {icon}
-            <span>{name}</span>
-          </div>
-        </Link>
-      </div>
-    )}
-  </li>
-);
+        </div>
+      )}
+    </li>
+  );
+};
 
 export const NavBar = ({
   title,
@@ -111,20 +132,19 @@ export const NavBar = ({
     navigate(0);
   };
 
-  const renderNavItems = (items: NavBarItemsSchema[]) => (
+  const renderNavItems = (items: NavBarItem[]) => (
     <div className="flex flex-col lg:flex-row w-full">
       {items.map((item, index) => {
-        const specialColor: ColorInterface | undefined = item.color
-          ? COLORS[item.color]
-          : undefined;
         return (
           <NavItem
             key={index}
             name={item.name}
             link={item.link}
             icon={item.icon}
-            specialColor={specialColor}
+            selectedColor={item.selectedColor}
             color={color}
+            loggedIn={item.loggedIn}
+            reduxNotificationBadge={item.reduxNotificationBadge}
             childrens={item.childrens?.map((x) => {
               return { ...x } as any;
             })}
@@ -147,7 +167,6 @@ export const NavBar = ({
               <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"
               >
                 <div className="mx-auto pt-2">
                   {<LogoutDropDownSvgIcon />}
@@ -168,7 +187,6 @@ export const NavBar = ({
           <Link
             className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
             to={"/home"}
-            prefetch="none"
             children={
               <>
                 <div className="inline-block mr-2 mb-2 align-middle">

package/src/NavBar/NavBar.types.ts

@@ -1,16 +1,18 @@
-export type NavBarItemsSchema = {
+export type NavBarItem = {
   name: string;
   link: string;
   loggedIn: boolean;
   icon?: any;
-  color?: "green";
-  childrens?: Exclude<NavBarItemsSchema, "loggedIn">[];
+  selectedColor?: "green";
+  color?: ColorInterface;
+  childrens?: Exclude<NavBarItem, "loggedIn">[];
+  reduxNotificationBadge?: (state: any) => string | number;
 };
 
 export type NavBarProps = {
   title: string;
   loggedIn: boolean;
-  items: Array<NavBarItemsSchema>;
+  items: Array<NavBarItem>;
   selectedColor:
     | "pink"
     | "purple"
@@ -37,15 +39,6 @@ export type ColorInterface = {
   ring500: string;
 };
 
-export type NavItemProps = {
-  name: string;
-  link: string;
-  icon?: any;
-  color: ColorInterface;
-  specialColor?: ColorInterface;
-  childrens?: Exclude<NavItemProps, "index" | "color">[];
-};
-
 export type EntityNameType = {
   entityName: string;
 };

package/src/NavBar/index.tsx

@@ -1,5 +1,3 @@
 export * from "./NavBar.js";
-
 export * from "./NavBar.types.js";
-
 export * from "./NavBar.utils.js";

package/src/Table/ZauruTable.tsx

@@ -32,7 +32,6 @@ const customStyles: TableStyles = {
     highlightOnHoverStyle: {
       backgroundColor: "rgb(230, 244, 244)",
       borderBottomColor: "#FFFFFF",
-      borderRadius: "25px",
       outline: "1px solid #FFFFFF",
     },
   },