@zauru-sdk/components 2.0.118 → 2.0.120

package/src/Modal/ItemModal.tsx

@@ -1,28 +1,46 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { createRoot } from "react-dom/client";
 
 // Tipos de datos
 type Item = {
+  item_id: string;
   name: string;
   code: string;
   unitPrice: number;
   stock: number;
   currencyPrefix: string;
   imageUrl: string;
+  quantity: number;
+  flexiblePrice: boolean;
+  priceText: string;
 };
 
-type ItemCategory = { name: string; items: Item[] };
+export type ItemModalCategory = { name: string; items: Item[] };
+
+type OnCloseType = (selectedItem: Item | null) => void;
 
 type ItemModalProps = {
-  itemList: ItemCategory[];
-  onClose: (selectedItem: Item | null) => void;
-  config?: { itemSize: { width: string; height: string } }; // Tamaño configurable
+  itemList: ItemModalCategory[];
+  onClose: OnCloseType;
+  config?: {
+    itemSize?: {
+      width: string;
+      height: string;
+    };
+  };
+  /**
+   * Controla cómo se muestran las categorías.
+   * - "text": Estilo por defecto (un simple título con flecha).
+   * - "card": Tarjeta más grande y ancha, útil para pantallas táctiles (tablet).
+   */
+  categoryViewMode?: "text" | "card";
 };
 
 const ItemSelectionModal: React.FC<ItemModalProps> = ({
   itemList,
   onClose,
   config,
+  categoryViewMode = "text",
 }) => {
   const defaultConfig = {
     itemSize: {
@@ -35,17 +53,12 @@ const ItemSelectionModal: React.FC<ItemModalProps> = ({
   const [expandedCategories, setExpandedCategories] = useState<{
     [key: string]: boolean;
   }>({});
+  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
+  const [quantity, setQuantity] = useState<number>(1);
+  const [customPrice, setCustomPrice] = useState<number | null>(null);
 
-  const toggleCategory = (categoryName: string) => {
-    setExpandedCategories((prev) => ({
-      ...prev,
-      [categoryName]: !prev[categoryName],
-    }));
-  };
-
-  const handleItemClick = (item: Item) => {
-    onClose(item);
-  };
+  // Ref para forzar el scroll al tope cuando seleccionamos un ítem
+  const modalContentRef = useRef<HTMLDivElement>(null);
 
   const filteredList = itemList
     .map((category) => ({
@@ -60,96 +73,336 @@ const ItemSelectionModal: React.FC<ItemModalProps> = ({
         category.items.length > 0
     );
 
+  const toggleCategory = (categoryName: string) => {
+    setExpandedCategories((prev) => ({
+      ...prev,
+      [categoryName]: !prev[categoryName],
+    }));
+  };
+
+  const handleItemClick = (item: Item) => {
+    setSelectedItem(item);
+    setQuantity(1);
+    // Si el ítem tiene precio flexible, inicializamos el customPrice con su precio actual
+    setCustomPrice(item.flexiblePrice ? item.unitPrice : null);
+
+    // Forzar scroll a la parte superior del contenido, ya que antes se iniciaba el scroll desde donde se había quedado.
+    if (modalContentRef.current) {
+      modalContentRef.current.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  const handleConfirmQuantity = () => {
+    if (selectedItem) {
+      // (5) Devolver el precio correcto
+      const finalPrice = selectedItem.flexiblePrice
+        ? // si el precio es flexible, tomar lo que el usuario haya ingresado (o fallback al precio original)
+          customPrice ?? selectedItem.unitPrice
+        : // si NO es flexible, solo usamos el precio que ya tenía
+          selectedItem.unitPrice;
+
+      onClose({
+        ...selectedItem,
+        quantity,
+        unitPrice: finalPrice,
+      });
+    }
+  };
+
+  const handleCancelQuantity = () => {
+    setSelectedItem(null);
+    setQuantity(1);
+    setCustomPrice(null);
+  };
+
+  const handleCloseModal = () => {
+    onClose(null);
+  };
+
   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">
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+      onClick={handleCloseModal}
+    >
+      <div
+        //Le ponemos ref para poder scrollear al tope
+        ref={modalContentRef}
+        className="bg-white p-4 rounded-lg shadow-lg w-11/12 max-w-4xl h-5/6 overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* 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 className="flex justify-between items-center mb-4">
+          <h2 className="text-2xl font-bold">
+            {selectedItem ? "Confirmar selección" : "Seleccionar un Ítem"}
+          </h2>
+          <button
+            className="text-gray-500 hover:text-gray-800 text-3xl"
+            onClick={handleCloseModal}
+          >
+            &times;
+          </button>
         </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))`,
-                  }}
+        {/* 
+          Render condicional: 
+          - Si NO hay item seleccionado => mostramos la búsqueda + listado de ítems.
+          - Si YA hay un item seleccionado => mostramos selector de cantidad y (si aplica) selector de precio.
+        */}
+        {!selectedItem ? (
+          /* ==============================
+             PASO 1: SELECCIONAR ÍTEM
+             ============================== */
+          <>
+            {/* Barra de búsqueda */}
+            <div className="relative mb-4">
+              <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"
+              />
+              {searchTerm && (
+                <button
+                  className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-800"
+                  onClick={() => setSearchTerm("")}
                 >
-                  {category.items.map((item) => (
+                  &times;
+                </button>
+              )}
+            </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) => {
+                const isExpanded = expandedCategories[category.name];
+
+                // Estilos condicionales para "text" vs. "card"
+                const categoryContainerClasses =
+                  categoryViewMode === "card"
+                    ? "w-full mb-2 px-4 py-3 bg-blue-50 rounded-md flex justify-between items-center cursor-pointer hover:bg-blue-100"
+                    : "text-lg font-semibold mb-2 cursor-pointer flex justify-between items-center hover:text-blue-600";
+
+                return (
+                  <div key={category.name} className="mb-4">
+                    {/* Cabecera de la categoría (texto o card) */}
                     <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,
-                      }}
+                      className={categoryContainerClasses}
+                      onClick={() => toggleCategory(category.name)}
                     >
-                      <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>
+                        {category.name}{" "}
+                        <span className="text-gray-500">
+                          ({category.items.length})
                         </span>
-                      </div>
+                      </span>
+                      <span
+                        className={`transform transition-transform duration-200 ${
+                          isExpanded ? "rotate-90" : ""
+                        }`}
+                      >
+                        ▶
+                      </span>
                     </div>
-                  ))}
+
+                    {/* Ítems dentro de la categoría */}
+                    {isExpanded && (
+                      <div
+                        className="grid gap-5"
+                        style={{
+                          gridTemplateColumns: `repeat(auto-fit, minmax(${defaultConfig.itemSize.width}, 1fr))`,
+                        }}
+                      >
+                        {category.items.map((item) => {
+                          // Verificamos si es un "paquete" usando item_id
+                          const isPackage = item.item_id.startsWith("b");
+
+                          return (
+                            <div
+                              key={item.code}
+                              onClick={() => handleItemClick(item)}
+                              className={`border rounded-lg shadow-lg hover:shadow-xl cursor-pointer relative ${
+                                isPackage ? "bg-yellow-50" : ""
+                              }`}
+                              style={{
+                                backgroundImage: `url(${item.imageUrl})`,
+                                backgroundSize: "cover",
+                                backgroundPosition: "center",
+                                width: defaultConfig.itemSize.width,
+                                height: defaultConfig.itemSize.height,
+                              }}
+                            >
+                              {/* Franja superior (nombre) */}
+                              <div
+                                className={`p-2 rounded absolute top-0 left-0 right-0 ${
+                                  isPackage
+                                    ? "bg-yellow-300 text-black"
+                                    : "bg-white bg-opacity-80"
+                                }`}
+                              >
+                                <h4 className="font-semibold text-sm text-center">
+                                  {item.name}
+                                </h4>
+                              </div>
+                              <div
+                                className={`absolute bottom-0 left-0 p-2 rounded ${
+                                  isPackage
+                                    ? "bg-yellow-300"
+                                    : "bg-white bg-opacity-80"
+                                }`}
+                              >
+                                <span className="text-xs font-normal">
+                                  Stock: {item.stock}
+                                </span>
+                              </div>
+                              <div
+                                className={`absolute bottom-0 right-0 p-2 rounded ${
+                                  isPackage
+                                    ? "bg-yellow-300"
+                                    : "bg-white bg-opacity-80"
+                                }`}
+                              >
+                                <span className="text-xs font-normal">
+                                  {item.currencyPrefix}
+                                  {item.priceText}
+                                </span>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </>
+        ) : (
+          /* ==============================
+             PASO 2: CONFIRMAR SELECCIÓN
+             ============================== */
+          <div className="flex flex-col items-center justify-center">
+            <img
+              src={selectedItem.imageUrl}
+              alt={selectedItem.name}
+              className="w-40 h-40 object-cover rounded mb-4 shadow-md"
+            />
+            <p className="mb-2 text-xl font-bold">{selectedItem.name}</p>
+            <p className="mb-2 text-base font-semibold text-gray-700">
+              Stock disponible:
+              <span className="ml-1 font-normal text-gray-800">
+                {selectedItem.stock}
+              </span>
+            </p>
+
+            {/* Si el ítem NO es flexible, mostramos el precio fijo */}
+            {!selectedItem.flexiblePrice && (
+              <p className="mb-4 text-base font-semibold text-gray-700">
+                Precio unitario:
+                <span className="ml-1 font-normal text-gray-800">
+                  {selectedItem.currencyPrefix}
+                  {selectedItem.priceText}
+                </span>
+              </p>
+            )}
+
+            {/* 
+              Selector de cantidad 
+            */}
+            <div className="mb-4 w-full max-w-sm flex flex-col items-center">
+              <p className="text-base font-semibold text-gray-700 mb-2">
+                Seleccionar cantidad
+              </p>
+              <div className="flex items-center space-x-4">
+                <button
+                  className="bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400"
+                  onClick={() =>
+                    setQuantity((prev) => (prev > 1 ? prev - 1 : 1))
+                  }
+                >
+                  -
+                </button>
+                <input
+                  className="w-16 text-center border rounded text-lg"
+                  type="number"
+                  min={1}
+                  value={quantity}
+                  onChange={(e) => {
+                    const val = parseInt(e.target.value, 10);
+                    setQuantity(isNaN(val) || val < 1 ? 1 : val);
+                  }}
+                />
+                <button
+                  className="bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400"
+                  onClick={() => setQuantity((prev) => prev + 1)}
+                >
+                  +
+                </button>
+              </div>
+            </div>
+
+            {/* 
+              Si el ítem SÍ es flexible, ponemos un selector de precio 
+            */}
+            {selectedItem.flexiblePrice && (
+              <div className="mb-4 w-full max-w-sm flex flex-col items-center">
+                <p className="text-base font-semibold text-gray-700 mb-2">
+                  Seleccionar precio
+                </p>
+                <div className="flex items-center space-x-4">
+                  <button
+                    className="bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400"
+                    onClick={() =>
+                      setCustomPrice((prev) => {
+                        const newVal = (prev ?? 0) - 1;
+                        return newVal < 0 ? 0 : newVal;
+                      })
+                    }
+                  >
+                    -
+                  </button>
+                  <input
+                    className="w-16 text-center border rounded text-lg"
+                    type="number"
+                    min={0}
+                    value={customPrice ?? 0}
+                    onChange={(e) => {
+                      const val = parseInt(e.target.value, 10);
+                      setCustomPrice(isNaN(val) || val < 0 ? 0 : val);
+                    }}
+                  />
+                  <button
+                    className="bg-gray-300 rounded-full w-12 h-12 flex justify-center items-center text-2xl font-bold hover:bg-gray-400"
+                    onClick={() =>
+                      setCustomPrice((prev) => (prev == null ? 1 : prev + 1))
+                    }
+                  >
+                    +
+                  </button>
                 </div>
-              )}
+              </div>
+            )}
+
+            {/* Botones de Confirmar y Volver */}
+            <div className="flex space-x-4 mt-6">
+              <button
+                className="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
+                onClick={handleCancelQuantity}
+              >
+                Volver
+              </button>
+              <button
+                className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+                onClick={handleConfirmQuantity}
+              >
+                Confirmar
+              </button>
             </div>
-          ))
+          </div>
         )}
       </div>
     </div>
@@ -158,8 +411,9 @@ const ItemSelectionModal: React.FC<ItemModalProps> = ({
 
 // Función para crear el modal
 export const createItemModal = (
-  itemList: ItemCategory[],
-  config?: ItemModalProps["config"]
+  itemList: ItemModalCategory[],
+  config?: ItemModalProps["config"],
+  categoryViewMode?: ItemModalProps["categoryViewMode"]
 ): Promise<Item | null> => {
   return new Promise((resolve) => {
     const handleClose = (selectedItem: Item | null) => {
@@ -180,6 +434,7 @@ export const createItemModal = (
         itemList={itemList}
         onClose={handleClose}
         config={config}
+        categoryViewMode={categoryViewMode}
       />
     );
   });

package/src/NavBar/NavBar.tsx

@@ -12,7 +12,7 @@ import type {
   NavBarItem,
   NavBarProps,
 } from "./NavBar.types.js";
-import { Link, useNavigate } from "@remix-run/react";
+import { Link, useNavigate, useLocation } from "@remix-run/react";
 import { useAppSelector } from "@zauru-sdk/redux";
 
 const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
@@ -52,6 +52,9 @@ const NavItem = ({
   childrens = [],
   reduxNotificationBadge,
 }: NavBarItem) => {
+  const location = useLocation();
+  const isActive = location.pathname === link;
+
   const specialColor: ColorInterface = selectedColor
     ? COLORS[selectedColor]
     : COLORS["slate"];
@@ -69,43 +72,51 @@ const NavItem = ({
     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`}
-        >
+  // Si este NavItem tiene elementos hijos, renderiza el botón desplegable:
+  if (childrens.length > 0) {
+    return (
+      <OptionsDropDownButton
+        name={name}
+        color={specialColor}
+        options={childrens.map((x, index) => (
           <Link
-            className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative"
-            to={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`}
           >
-            <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>
-            )}
+            {x.name}
           </Link>
-        </div>
-      )}
+        ))}
+      />
+    );
+  }
+
+  // Si NO tiene elementos hijos, se renderiza como un ítem simple:
+  return (
+    <li className="nav-item relative">
+      <div
+        // Si está activo, usamos color de fondo más oscuro (bg900)
+        // De lo contrario, usamos el color normal (bg700)
+        className={`${
+          isActive ? specialColor.bg900 : 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
+          className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative"
+          to={link}
+        >
+          <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>
     </li>
   );
 };
@@ -165,6 +176,7 @@ export const NavBar = ({
             color={color}
             options={[
               <Link
+                key="cerrar-sesion"
                 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"
               >
@@ -187,19 +199,12 @@ export const NavBar = ({
           <Link
             className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
             to={"/home"}
-            children={
-              <>
-                <div className="inline-block mr-2 mb-2 align-middle">
-                  <img
-                    className="w-auto h-7"
-                    src="/logo.png"
-                    alt="logo-zauru"
-                  />
-                </div>
-                {title}
-              </>
-            }
-          />
+          >
+            <div className="inline-block mr-2 mb-2 align-middle">
+              <img className="w-auto h-7" src="/logo.png" alt="logo-zauru" />
+            </div>
+            {title}
+          </Link>
           {version !== currentVersion && (
             <button
               className={`ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`}

package/src/NavBar/NavBar.types.ts

@@ -3,7 +3,14 @@ export type NavBarItem = {
   link: string;
   loggedIn: boolean;
   icon?: any;
-  selectedColor?: "green";
+  selectedColor?:
+    | "pink"
+    | "purple"
+    | "slate"
+    | "green"
+    | "yellow"
+    | "red"
+    | "sky";
   color?: ColorInterface;
   childrens?: Exclude<NavBarItem, "loggedIn">[];
   reduxNotificationBadge?: (state: any) => string | number;
@@ -35,6 +42,7 @@ export type ColorInterface = {
   bg700: string;
   bg600: string;
   bg500: string;
+  bg200: string;
   ring600: string;
   ring500: string;
 };