@zauru-sdk/components 6.5.6 → 6.7.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.7.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.6.0...@zauru-sdk/components@6.7.0) (2026-09-18)
+
+
+### Features
+
+* descuento sucesivo en porcentajes de rechazo ([c437bbd](https://github.com/intuitiva/zauru-typescript-sdk/commit/c437bbd6a1305fd417c4ac55f8e07eb244f2fe3d))
+
+
+
+
+
+# [6.6.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.6...@zauru-sdk/components@6.6.0) (2026-09-18)
+
+
+### Features
+
+* registrar reglas automáticas de % rechazo en el historial ([4784849](https://github.com/intuitiva/zauru-typescript-sdk/commit/4784849904f9ac6570e60543895a858dece8e039))
+
+
+
+
+
 ## [6.5.6](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.5...@zauru-sdk/components@6.5.6) (2026-09-17)
 
 

package/dist/DiscountHistory/RejectionPercentageHistoryList.d.ts

@@ -0,0 +1,24 @@
+export type RejectionPercentageHistoryItem = {
+    discount: number;
+    description?: string;
+    agency_id?: number;
+    employee_id?: number;
+    employee_name?: string;
+    created_at?: string;
+    type?: string;
+    successive?: boolean;
+};
+type NamedRecord = {
+    id?: number;
+    name?: string;
+};
+export type RejectionPercentageHistoryListProps = {
+    items: RejectionPercentageHistoryItem[];
+    employees?: NamedRecord[];
+    agencies?: NamedRecord[];
+    actorLabel?: string;
+    emptyText?: string;
+    className?: string;
+};
+export declare const RejectionPercentageHistoryList: ({ items, employees, agencies, actorLabel, emptyText, className, }: RejectionPercentageHistoryListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/DiscountHistory/index.d.ts

@@ -0,0 +1 @@
+export * from "./RejectionPercentageHistoryList.js";

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

@@ -10,6 +10,8 @@ type Props = {
     disabled?: boolean;
     borderColor?: string;
     required?: boolean;
+    helpText?: string;
+    helpAriaLabel?: string;
 };
 export declare const CheckBox: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/DiscountHistory/RejectionPercentageHistoryList.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isAutomaticRejectionRuleHistoryType, toFixedIfNeeded, } from "@zauru-sdk/common";
+const formatHistoryDate = (value) => {
+    if (!value)
+        return "";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return new Intl.DateTimeFormat("es-GT", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+    })
+        .format(date)
+        .replace(",", "");
+};
+const formatSignedPercentage = (value, forceSign) => {
+    const formatted = toFixedIfNeeded(Math.abs(value));
+    if (value < 0)
+        return `-${formatted}%`;
+    if (forceSign && value > 0)
+        return `+${formatted}%`;
+    return `${formatted}%`;
+};
+const findName = (records, id) => {
+    if (id == null)
+        return undefined;
+    return records?.find((record) => record.id === id)?.name;
+};
+export const RejectionPercentageHistoryList = ({ items, employees, agencies, actorLabel = "Empleado", emptyText = "No hay historial de porcentajes registrado", className = "", }) => {
+    if (!items.length) {
+        return _jsx("p", { className: "text-gray-500 italic", children: emptyText });
+    }
+    return (_jsx("div", { className: `space-y-3 max-h-60 overflow-y-auto ${className}`.trim(), children: items.map((item, index) => {
+            const isAutomatic = isAutomaticRejectionRuleHistoryType(item.type);
+            const isSuccessive = item.successive === true;
+            const employeeName = item.employee_name?.trim() ||
+                findName(employees, item.employee_id) ||
+                (item.employee_id != null ? `ID: ${item.employee_id}` : "No especificado");
+            const agencyName = findName(agencies, item.agency_id) ||
+                (item.agency_id != null ? `ID: ${item.agency_id}` : "No especificada");
+            const description = item.description || "Sin descripción";
+            return (_jsxs("div", { className: isSuccessive
+                    ? "border border-amber-200 rounded-lg p-3 bg-amber-50"
+                    : isAutomatic
+                        ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
+                        : "border border-gray-100 rounded-lg p-3 bg-gray-50", children: [_jsxs("div", { className: "flex justify-between items-start gap-3 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: isSuccessive
+                                            ? "font-semibold text-amber-800"
+                                            : isAutomatic
+                                                ? "font-semibold text-indigo-800"
+                                                : "font-semibold text-blue-600", children: formatSignedPercentage(Number(item.discount) || 0, isAutomatic) }), isSuccessive ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800", children: "Sucesivo" })) : null, isAutomatic ? (_jsx("span", { className: "shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800", children: "Autom\u00E1tico" })) : null] }), item.created_at ? (_jsx("span", { className: "text-xs text-gray-500 shrink-0", children: formatHistoryDate(item.created_at) })) : null] }), _jsx("p", { className: isSuccessive
+                            ? "text-sm text-amber-900 mb-1"
+                            : isAutomatic
+                                ? "text-sm text-indigo-900 mb-1"
+                                : "text-sm text-gray-700 mb-1", title: description, children: description }), _jsxs("div", { className: "flex justify-between gap-3 text-xs text-gray-500", children: [_jsx("span", { className: "min-w-0", children: isAutomatic
+                                    ? "Aplicado por el sistema"
+                                    : `${actorLabel}: ${employeeName}` }), _jsxs("span", { className: "shrink-0", children: ["Agencia: ", agencyName] })] })] }, `${item.created_at ?? "entry"}-${item.type ?? "manual"}-${index}`));
+        }) }));
+};

package/dist/esm/DiscountHistory/index.js

@@ -0,0 +1 @@
+export * from "./RejectionPercentageHistoryList.js";

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { QuestionMarkIconSVG } from "@zauru-sdk/icons";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 export const CheckBox = (props) => {
-    const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, } = props;
+    const { id, name, defaultValue = false, onChange, disabled = false, label, required = false, helpText, helpAriaLabel = "Más información", } = props;
     const [checked, setChecked] = useState(defaultValue);
+    const [showHelp, setShowHelp] = useState(false);
     useEffect(() => {
         setChecked(defaultValue);
     }, [defaultValue]);
@@ -27,9 +29,10 @@ export const CheckBox = (props) => {
         : undefined; // Solo usar register si está disponible
     const color = error ? "red" : "gray";
     const borderColor = disabled ? "border-gray-300" : `border-${color}-500`;
-    const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, checked: checked, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled, ...(register ?? {}), name: name, onChange: handleInputChange }));
-    if (!error && !label) {
+    const inputComponent = (_jsx("input", { type: "checkbox", id: id ?? name, checked: checked, className: `form-checkbox h-4 w-4 text-indigo-600 ${borderColor} ${disabled ? "cursor-not-allowed" : "cursor-pointer"} focus:border-indigo-500 focus:ring-indigo-500`, disabled: disabled, ...(register ?? {}), name: name, onChange: handleInputChange }));
+    const helpButton = helpText ? (_jsxs("div", { className: "relative ml-2 shrink-0", children: [_jsx("button", { type: "button", className: "cursor-pointer inline-flex items-center justify-center text-gray-500 hover:text-indigo-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-full", "aria-label": helpAriaLabel, "aria-expanded": showHelp, onMouseEnter: () => setShowHelp(true), onMouseLeave: () => setShowHelp(false), onFocus: () => setShowHelp(true), onBlur: () => setShowHelp(false), children: _jsx(QuestionMarkIconSVG, {}) }), showHelp ? (_jsx("div", { className: "absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 max-w-[min(18rem,calc(100vw-2rem))] rounded border border-gray-200 bg-white p-2 text-left text-sm text-black shadow motion-reduce:transition-none", children: helpText })) : null] })) : null;
+    if (!error && !label && !helpText) {
         return inputComponent;
     }
-    return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsxs("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && _jsx("span", { className: "text-red-500", children: "*" })] }))] }), 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()] }))] }));
+    return (_jsxs("div", { className: "col-span-6 sm:col-span-3", children: [_jsxs("div", { className: `flex items-center ${borderColor}`, children: [inputComponent, label && (_jsxs("label", { htmlFor: id ?? name, className: `ml-2 block text-sm font-medium text-${color}-700 dark:text-${color}-500`, children: [label, required && _jsx("span", { className: "text-red-500", children: "*" })] })), helpButton] }), 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()] }))] }));
 };

package/dist/esm/index.js

@@ -27,3 +27,4 @@ export * from "./HOC/ValidateEmployeeAccess/index.js";
 export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
 export * from "./observability/index.js";
+export * from "./DiscountHistory/index.js";

package/dist/index.d.ts

@@ -27,3 +27,4 @@ export * from "./HOC/ValidateEmployeeAccess/index.js";
 export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
 export * from "./observability/index.js";
+export * from "./DiscountHistory/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.5.6",
+  "version": "6.7.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.6.0",
-    "@zauru-sdk/hooks": "^6.3.11",
-    "@zauru-sdk/icons": "^6.0.0",
-    "@zauru-sdk/redux": "^6.5.9",
-    "@zauru-sdk/types": "^6.16.0",
-    "@zauru-sdk/utils": "^6.16.1",
+    "@zauru-sdk/common": "^6.8.0",
+    "@zauru-sdk/hooks": "^6.3.13",
+    "@zauru-sdk/icons": "^6.1.0",
+    "@zauru-sdk/redux": "^6.5.11",
+    "@zauru-sdk/types": "^6.18.0",
+    "@zauru-sdk/utils": "^6.18.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "563f879c95b2f3e76bc28623a9e09c8a103c599e"
+  "gitHead": "c5b785baa29fdd2ab7f42a9077ba5cbe5c7c9707"
 }

package/src/DiscountHistory/RejectionPercentageHistoryList.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+import {
+  isAutomaticRejectionRuleHistoryType,
+  toFixedIfNeeded,
+} from "@zauru-sdk/common";
+
+export type RejectionPercentageHistoryItem = {
+  discount: number;
+  description?: string;
+  agency_id?: number;
+  employee_id?: number;
+  employee_name?: string;
+  created_at?: string;
+  type?: string;
+  successive?: boolean;
+};
+
+type NamedRecord = {
+  id?: number;
+  name?: string;
+};
+
+export type RejectionPercentageHistoryListProps = {
+  items: RejectionPercentageHistoryItem[];
+  employees?: NamedRecord[];
+  agencies?: NamedRecord[];
+  actorLabel?: string;
+  emptyText?: string;
+  className?: string;
+};
+
+const formatHistoryDate = (value?: string): string => {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("es-GT", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  })
+    .format(date)
+    .replace(",", "");
+};
+
+const formatSignedPercentage = (
+  value: number,
+  forceSign: boolean,
+): string => {
+  const formatted = toFixedIfNeeded(Math.abs(value));
+  if (value < 0) return `-${formatted}%`;
+  if (forceSign && value > 0) return `+${formatted}%`;
+  return `${formatted}%`;
+};
+
+const findName = (
+  records: NamedRecord[] | undefined,
+  id: number | undefined,
+): string | undefined => {
+  if (id == null) return undefined;
+  return records?.find((record) => record.id === id)?.name;
+};
+
+export const RejectionPercentageHistoryList = ({
+  items,
+  employees,
+  agencies,
+  actorLabel = "Empleado",
+  emptyText = "No hay historial de porcentajes registrado",
+  className = "",
+}: RejectionPercentageHistoryListProps) => {
+  if (!items.length) {
+    return <p className="text-gray-500 italic">{emptyText}</p>;
+  }
+
+  return (
+    <div className={`space-y-3 max-h-60 overflow-y-auto ${className}`.trim()}>
+      {items.map((item, index) => {
+        const isAutomatic = isAutomaticRejectionRuleHistoryType(item.type);
+        const isSuccessive = item.successive === true;
+        const employeeName =
+          item.employee_name?.trim() ||
+          findName(employees, item.employee_id) ||
+          (item.employee_id != null ? `ID: ${item.employee_id}` : "No especificado");
+        const agencyName =
+          findName(agencies, item.agency_id) ||
+          (item.agency_id != null ? `ID: ${item.agency_id}` : "No especificada");
+        const description = item.description || "Sin descripción";
+
+        return (
+          <div
+            key={`${item.created_at ?? "entry"}-${item.type ?? "manual"}-${index}`}
+            className={
+              isSuccessive
+                ? "border border-amber-200 rounded-lg p-3 bg-amber-50"
+                : isAutomatic
+                ? "border border-indigo-200 rounded-lg p-3 bg-indigo-50"
+                : "border border-gray-100 rounded-lg p-3 bg-gray-50"
+            }
+          >
+            <div className="flex justify-between items-start gap-3 mb-2">
+              <div className="flex items-center gap-2 min-w-0">
+                <span
+                  className={
+                    isSuccessive
+                      ? "font-semibold text-amber-800"
+                      : isAutomatic
+                      ? "font-semibold text-indigo-800"
+                      : "font-semibold text-blue-600"
+                  }
+                >
+                  {formatSignedPercentage(Number(item.discount) || 0, isAutomatic)}
+                </span>
+                {isSuccessive ? (
+                  <span className="shrink-0 whitespace-nowrap rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
+                    Sucesivo
+                  </span>
+                ) : null}
+                {isAutomatic ? (
+                  <span className="shrink-0 whitespace-nowrap rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-800">
+                    Automático
+                  </span>
+                ) : null}
+              </div>
+              {item.created_at ? (
+                <span className="text-xs text-gray-500 shrink-0">
+                  {formatHistoryDate(item.created_at)}
+                </span>
+              ) : null}
+            </div>
+            <p
+              className={
+                isSuccessive
+                  ? "text-sm text-amber-900 mb-1"
+                  : isAutomatic
+                  ? "text-sm text-indigo-900 mb-1"
+                  : "text-sm text-gray-700 mb-1"
+              }
+              title={description}
+            >
+              {description}
+            </p>
+            <div className="flex justify-between gap-3 text-xs text-gray-500">
+              <span className="min-w-0">
+                {isAutomatic
+                  ? "Aplicado por el sistema"
+                  : `${actorLabel}: ${employeeName}`}
+              </span>
+              <span className="shrink-0">Agencia: {agencyName}</span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/DiscountHistory/index.ts

@@ -0,0 +1 @@
+export * from "./RejectionPercentageHistoryList.js";

package/src/Form/Checkbox/index.tsx

@@ -1,3 +1,4 @@
+import { QuestionMarkIconSVG } from "@zauru-sdk/icons";
 import React, { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 
@@ -13,6 +14,8 @@ type Props = {
   disabled?: boolean;
   borderColor?: string;
   required?: boolean;
+  helpText?: string;
+  helpAriaLabel?: string;
 };
 
 export const CheckBox = (props: Props) => {
@@ -24,9 +27,12 @@ export const CheckBox = (props: Props) => {
     disabled = false,
     label,
     required = false,
+    helpText,
+    helpAriaLabel = "Más información",
   } = props;
 
   const [checked, setChecked] = useState(defaultValue);
+  const [showHelp, setShowHelp] = useState(false);
 
   useEffect(() => {
     setChecked(defaultValue);
@@ -63,7 +69,9 @@ export const CheckBox = (props: Props) => {
       type="checkbox"
       id={id ?? name}
       checked={checked}
-      className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} focus:border-indigo-500 focus:ring-indigo-500`}
+      className={`form-checkbox h-4 w-4 text-indigo-600 ${borderColor} ${
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      } focus:border-indigo-500 focus:ring-indigo-500`}
       disabled={disabled}
       {...(register ?? {})}
       name={name}
@@ -71,7 +79,29 @@ export const CheckBox = (props: Props) => {
     />
   );
 
-  if (!error && !label) {
+  const helpButton = helpText ? (
+    <div className="relative ml-2 shrink-0">
+      <button
+        type="button"
+        className="cursor-pointer inline-flex items-center justify-center text-gray-500 hover:text-indigo-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded-full"
+        aria-label={helpAriaLabel}
+        aria-expanded={showHelp}
+        onMouseEnter={() => setShowHelp(true)}
+        onMouseLeave={() => setShowHelp(false)}
+        onFocus={() => setShowHelp(true)}
+        onBlur={() => setShowHelp(false)}
+      >
+        <QuestionMarkIconSVG />
+      </button>
+      {showHelp ? (
+        <div className="absolute z-50 left-1/2 -translate-x-1/2 bottom-full mb-2 w-72 max-w-[min(18rem,calc(100vw-2rem))] rounded border border-gray-200 bg-white p-2 text-left text-sm text-black shadow motion-reduce:transition-none">
+          {helpText}
+        </div>
+      ) : null}
+    </div>
+  ) : null;
+
+  if (!error && !label && !helpText) {
     return inputComponent;
   }
 
@@ -88,6 +118,7 @@ export const CheckBox = (props: Props) => {
             {required && <span className="text-red-500">*</span>}
           </label>
         )}
+        {helpButton}
       </div>
       {error && (
         <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>

package/src/index.ts

@@ -27,3 +27,4 @@ export * from "./HOC/ValidateEmployeeAccess/index.js";
 export * from "./Routes/index.js";
 export * from "./SidePanel/index.js";
 export * from "./observability/index.js";
+export * from "./DiscountHistory/index.js";