@zauru-sdk/components 6.5.5 → 6.6.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.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)
+
+
+### Bug Fixes
+
+* resolver width % de ZauruTable contra el contenedor ([9518a4d](https://github.com/intuitiva/zauru-typescript-sdk/commit/9518a4d8d40d7655b26e0e25450e20cba271ac34))
+
+
+
+
+
 ## [6.5.5](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.5.4...@zauru-sdk/components@6.5.5) (2026-09-16)
 
 

package/dist/DiscountHistory/RejectionPercentageHistoryList.d.ts

@@ -0,0 +1,23 @@
+export type RejectionPercentageHistoryItem = {
+    discount: number;
+    description?: string;
+    agency_id?: number;
+    employee_id?: number;
+    employee_name?: string;
+    created_at?: string;
+    type?: string;
+};
+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/esm/DiscountHistory/RejectionPercentageHistoryList.js

@@ -0,0 +1,55 @@
+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 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: 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: isAutomatic
+                                            ? "font-semibold text-indigo-800"
+                                            : "font-semibold text-blue-600", children: formatSignedPercentage(Number(item.discount) || 0, isAutomatic) }), 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: 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/Table/ZauruTable.js

@@ -13,15 +13,15 @@ const headerTextWrapStyle = {
     wordBreak: "normal",
     lineHeight: "1.25",
 };
-const fullContentWidthStyle = {
-    width: "max-content",
+const fillContainerWidthStyle = {
+    width: "100%",
     minWidth: "100%",
     maxWidth: "none",
 };
 const customStyles = {
     table: {
         style: {
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
     },
     tableWrapper: {
@@ -43,7 +43,7 @@ const customStyles = {
     },
     head: {
         style: {
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
     },
     headRow: {
@@ -51,7 +51,7 @@ const customStyles = {
             minHeight: "40px",
             height: "auto",
             alignItems: "stretch",
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
         denseStyle: {
             minHeight: "36px",
@@ -98,7 +98,7 @@ const customStyles = {
     },
     rows: {
         style: {
-            ...fullContentWidthStyle,
+            ...fillContainerWidthStyle,
         },
         highlightOnHoverStyle: {
             backgroundColor: "rgb(230, 244, 244)",
@@ -233,7 +233,18 @@ export const ZauruTable = (props) => {
             if (!column || typeof column !== "object") {
                 return column;
             }
-            return { wrap: true, ...column };
+            const next = { wrap: true, ...column };
+            // RDT `width` sets both min-width and max-width, wiping a px floor.
+            // Keep % as flex-basis so minWidth/maxWidth/grow still apply.
+            if (typeof next.width === "string" && next.width.endsWith("%")) {
+                const pct = next.width;
+                delete next.width;
+                next.style = {
+                    flexBasis: pct,
+                    ...next.style,
+                };
+            }
+            return next;
         })
         : columns;
     return (_jsx("div", { className: "w-full min-w-0 max-w-full overflow-x-auto", children: _jsx(DataTable, { className: className, subHeaderWrap: true, theme: theme ?? "solarized", columns: normalizedColumns, conditionalRowStyles: conditionalRowStyles, data: filteredData, customStyles: customStyles, progressPending: loading, highlightOnHover: true, pointerOnHover: true, dense: true, striped: true, pagination: !whitOutPagination, persistTableHead: true, responsive: true, noHeader: true, expandableRows: !!expandable, expandOnRowClicked: !!expandable, expandableRowExpanded: expandable ? expandable.expandableRowExpanded : undefined, expandableRowsComponent: expandable ? expandable.expandableRowsComponent : undefined, subHeader: loadSubHeader, subHeaderComponent: subHeaderComponent, paginationServer: !!pagination, paginationTotalRows: pagination?.totalRows ?? undefined, onChangeRowsPerPage: pagination ? handlePerRowsChange : undefined, onChangePage: pagination ? handlePageChange : undefined, paginationComponentOptions: paginationComponentOptions, paginationRowsPerPageOptions: pagination?.rowsPerPageOptions

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.5",
+  "version": "6.6.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/common": "^6.7.0",
+    "@zauru-sdk/hooks": "^6.3.12",
     "@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/redux": "^6.5.10",
+    "@zauru-sdk/types": "^6.17.0",
+    "@zauru-sdk/utils": "^6.17.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": "c157999c77c4d4a5cbb926466b8f3947b00f12f4"
+  "gitHead": "d3483aa3b55a9a692f955e6a56d13f33b70db1c4"
 }

package/src/DiscountHistory/RejectionPercentageHistoryList.tsx

@@ -0,0 +1,145 @@
+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;
+};
+
+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 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={
+              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={
+                    isAutomatic
+                      ? "font-semibold text-indigo-800"
+                      : "font-semibold text-blue-600"
+                  }
+                >
+                  {formatSignedPercentage(Number(item.discount) || 0, isAutomatic)}
+                </span>
+                {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={
+                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/Table/ZauruTable.tsx

@@ -20,8 +20,8 @@ const headerTextWrapStyle = {
   lineHeight: "1.25",
 } as const;
 
-const fullContentWidthStyle = {
-  width: "max-content",
+const fillContainerWidthStyle = {
+  width: "100%",
   minWidth: "100%",
   maxWidth: "none",
 } as const;
@@ -29,7 +29,7 @@ const fullContentWidthStyle = {
 const customStyles: TableStyles = {
   table: {
     style: {
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
   },
   tableWrapper: {
@@ -51,7 +51,7 @@ const customStyles: TableStyles = {
   },
   head: {
     style: {
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
   },
   headRow: {
@@ -59,7 +59,7 @@ const customStyles: TableStyles = {
       minHeight: "40px",
       height: "auto",
       alignItems: "stretch",
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
     denseStyle: {
       minHeight: "36px",
@@ -106,7 +106,7 @@ const customStyles: TableStyles = {
   },
   rows: {
     style: {
-      ...fullContentWidthStyle,
+      ...fillContainerWidthStyle,
     },
     highlightOnHoverStyle: {
       backgroundColor: "rgb(230, 244, 244)",
@@ -312,7 +312,18 @@ export const ZauruTable = (props: Props) => {
         if (!column || typeof column !== "object") {
           return column;
         }
-        return { wrap: true, ...column };
+        const next = { wrap: true, ...column };
+        // RDT `width` sets both min-width and max-width, wiping a px floor.
+        // Keep % as flex-basis so minWidth/maxWidth/grow still apply.
+        if (typeof next.width === "string" && next.width.endsWith("%")) {
+          const pct = next.width;
+          delete next.width;
+          next.style = {
+            flexBasis: pct,
+            ...next.style,
+          };
+        }
+        return next;
       })
     : columns;
 

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