@m4l/components 9.2.50 → 9.2.51-beta.1

package/components/ObjectLogs/hooks/useDetailFormatter.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { u as useModal } from "../../../hooks/useModal/index.js";
+import { useIsMobile } from "@m4l/graphics";
+import { D as DICTIONARY } from "../dictionary.js";
+import { W as WindowBaseStyled, S as StackStyled, D as DetailDialogComponent } from "../slots/ObjectLogsSlots.js";
+const useDetailFormatter = (type) => {
+  const { getLabel } = useModuleDictionary();
+  const { openModal, closeModal } = useModal();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isMobile = useIsMobile();
+  const getIconProps = useCallback(
+    (rowProps) => {
+      let logId;
+      if (type === "m4l") {
+        logId = rowProps.row.id;
+      } else {
+        logId = rowProps.row.uuid;
+      }
+      const iconConfig = {
+        iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/search.svg`,
+        tooltip: getLabel(DICTIONARY.LABEL_LOG_DETAIL),
+        dataTestId: `log-detail-${logId}`,
+        /**
+         * Función que se ejecuta al hacer clic en el icono
+         */
+        onClick: () => {
+          openModal({
+            window: /* @__PURE__ */ jsx(
+              WindowBaseStyled,
+              {
+                ownerState: {},
+                title: getLabel(`${DICTIONARY.LABEL_LOG_DETAIL}`),
+                onClose: closeModal,
+                children: /* @__PURE__ */ jsx(StackStyled, { ownerState: {}, direction: "column", flexGrow: 1, children: /* @__PURE__ */ jsx(DetailDialogComponent, { ownerState: {}, logId, type }) })
+              }
+            ),
+            fullScreen: isMobile,
+            initialWidth: 800,
+            initialHeight: 600
+          });
+        }
+      };
+      return iconConfig;
+    },
+    [type, host_static_assets, environment_assets, getLabel, openModal, closeModal, isMobile]
+  );
+  return getIconProps;
+};
+export {
+  useDetailFormatter as u
+};

package/components/ObjectLogs/hooks/useObjectLogsColumns.d.ts

@@ -0,0 +1,6 @@
+import { Column } from 'react-data-grid';
+import { RowLog } from '../types';
+/**
+ * Hook para gestionar las columnas del componente ObjectLogs
+ */
+export declare const useObjectLogsColumns: (type: "m4l" | "other") => Column<RowLog, unknown>[];

package/components/ObjectLogs/hooks/useObjectLogsColumns.js

@@ -0,0 +1,65 @@
+import { useMemo } from "react";
+import { useModuleDictionary } from "@m4l/core";
+import { D as DICTIONARY } from "../dictionary.js";
+import { u as useDetailFormatter } from "./useDetailFormatter.js";
+import { u as useColumnIcon } from "../../DataGrid/formatters/ColumnIconFormatter/useColumnIcon.js";
+import { u as useColumnDate } from "../../DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
+const useObjectLogsColumns = (type) => {
+  const { getLabel } = useModuleDictionary();
+  const columnDate = useColumnDate({
+    presentationType: "datetime",
+    fieldValue: "createdAt"
+  });
+  const getIconProps = useDetailFormatter(type);
+  const columIcon = useColumnIcon(
+    {
+      getIconProps
+    }
+  );
+  const columns = useMemo(
+    () => [
+      {
+        key: "createdAt",
+        name: getLabel(DICTIONARY.LABEL_CREATED_AT),
+        type: "date",
+        width: 300,
+        ...columnDate
+      },
+      {
+        key: type === "m4l" ? "email" : "userId",
+        name: getLabel(DICTIONARY.LABEL_USER),
+        type: "string",
+        width: 300
+      },
+      {
+        key: type === "m4l" ? "resourceName" : "serviceId",
+        name: getLabel(type === "m4l" ? DICTIONARY.LABEL_RESOURCE_NAME : DICTIONARY.LABEL_SERVICE_ID),
+        type: "string",
+        width: 120
+      },
+      {
+        key: "logPreview",
+        name: getLabel(DICTIONARY.LABEL_LOG_PREVIEW),
+        type: "string",
+        width: 250
+      },
+      {
+        key: "detail",
+        name: getLabel(DICTIONARY.LABEL_LOG_DETAIL),
+        type: "custom",
+        ...columIcon
+      },
+      {
+        key: "ip",
+        name: getLabel(DICTIONARY.LABEL_IP),
+        type: "string",
+        width: 120
+      }
+    ],
+    [getLabel, columnDate, type, columIcon]
+  );
+  return columns;
+};
+export {
+  useObjectLogsColumns as u
+};

package/components/ObjectLogs/index.d.ts

@@ -1 +1,3 @@
 export * from './ObjectLogs';
+export { getObjectLogsComponentsDictionary } from './dictionary';
+export type { ObjectLogsProps } from './types';

package/components/ObjectLogs/index.js

@@ -0,0 +1 @@
+

package/components/ObjectLogs/slots/ObjectLogsEnum.d.ts

@@ -0,0 +1,12 @@
+export declare enum ObjectLogsSlots {
+    root = "root",
+    actionsWrapperStyled = "actionsWrapperStyled",
+    gridWrapperStyled = "gridWrapperStyled",
+    stackStyled = "stackStyled",
+    windowBaseStyled = "windowBaseStyled",
+    detailDialogComponent = "detailDialogComponent",
+    tooltipStyled = "tooltipStyled",
+    iconButtonStyled = "iconButtonStyled",
+    iconStyled = "iconStyled",
+    reactJsonSlot = "reactJsonSlot"
+}

package/components/ObjectLogs/slots/ObjectLogsEnum.js

@@ -0,0 +1,16 @@
+var ObjectLogsSlots = /* @__PURE__ */ ((ObjectLogsSlots2) => {
+  ObjectLogsSlots2["root"] = "root";
+  ObjectLogsSlots2["actionsWrapperStyled"] = "actionsWrapperStyled";
+  ObjectLogsSlots2["gridWrapperStyled"] = "gridWrapperStyled";
+  ObjectLogsSlots2["stackStyled"] = "stackStyled";
+  ObjectLogsSlots2["windowBaseStyled"] = "windowBaseStyled";
+  ObjectLogsSlots2["detailDialogComponent"] = "detailDialogComponent";
+  ObjectLogsSlots2["tooltipStyled"] = "tooltipStyled";
+  ObjectLogsSlots2["iconButtonStyled"] = "iconButtonStyled";
+  ObjectLogsSlots2["iconStyled"] = "iconStyled";
+  ObjectLogsSlots2["reactJsonSlot"] = "reactJsonSlot";
+  return ObjectLogsSlots2;
+})(ObjectLogsSlots || {});
+export {
+  ObjectLogsSlots as O
+};

package/components/ObjectLogs/slots/ObjectLogsSlots.d.ts

@@ -0,0 +1,30 @@
+export declare const ContainerWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ActionsWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const GridWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const WindowBaseStyled: import('@emotion/styled').StyledComponent<Pick<import('../../WindowBase/types').WindowBaseProps, keyof import('../../WindowBase/types').WindowBaseProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const StackStyled: import('@emotion/styled').StyledComponent<Pick<import('../..').StackProps, keyof import('../..').StackProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const DetailDialogComponent: import('@emotion/styled').StyledComponent<Pick<import('../types').DetailDialogProps, keyof import('../types').DetailDialogProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const TooltipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Tooltip').TooltipProps, keyof import('../../mui_extended/Tooltip').TooltipProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "instaceDataTestId" | "rotationAngle" | "placement" | "tooltipContent" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeContent" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const ReactJsonSlot: import('@emotion/styled').StyledComponent<Pick<import('@microlink/react-json-view').ReactJsonViewProps, keyof import('@microlink/react-json-view').ReactJsonViewProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ObjectLogsOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -0,0 +1,60 @@
+import { styled } from "@mui/material/styles";
+import { O as OBJECT_LOGS_KEY_COMPONENT } from "../constants.js";
+import { o as objectLogsStyles } from "../ObjectLogs.styles.js";
+import { S as Stack } from "../../mui_extended/Stack/Stack.js";
+import { W as WindowBase } from "../../WindowBase/WindowBase.js";
+import { D as DetailDialog } from "../subcomponents/DetailDialog/index.js";
+import ReactJson from "@microlink/react-json-view";
+import { O as ObjectLogsSlots } from "./ObjectLogsEnum.js";
+import { T as Tooltip } from "../../mui_extended/Tooltip/Tooltip.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const ContainerWrapperStyled = styled("div", {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.root
+})(objectLogsStyles?.root);
+const ActionsWrapperStyled = styled("div", {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.actionsWrapperStyled
+})(objectLogsStyles?.actionsWrapperStyled);
+const GridWrapperStyled = styled("div", {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.gridWrapperStyled
+})(objectLogsStyles?.gridWrapperStyled);
+const WindowBaseStyled = styled(WindowBase, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.windowBaseStyled
+})(objectLogsStyles?.windowBaseStyled);
+const StackStyled = styled(Stack, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.stackStyled
+})(objectLogsStyles?.stackStyled);
+const DetailDialogComponent = styled(DetailDialog, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.detailDialogComponent
+})(objectLogsStyles?.detailDialogComponent);
+styled(Tooltip, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.tooltipStyled
+})(objectLogsStyles?.tooltipStyled);
+styled(IconButton, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.iconButtonStyled
+})(objectLogsStyles?.iconButtonStyled);
+const IconStyled = styled(Icon, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.iconStyled
+})(objectLogsStyles?.iconStyled);
+styled(ReactJson, {
+  name: OBJECT_LOGS_KEY_COMPONENT,
+  slot: ObjectLogsSlots.reactJsonSlot
+})(objectLogsStyles?.reactJsonSlot);
+export {
+  ActionsWrapperStyled as A,
+  ContainerWrapperStyled as C,
+  DetailDialogComponent as D,
+  GridWrapperStyled as G,
+  IconStyled as I,
+  StackStyled as S,
+  WindowBaseStyled as W
+};

package/components/ObjectLogs/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ObjectLogsEnum';
+export * from './ObjectLogsSlots';

package/components/ObjectLogs/slots/index.js

@@ -0,0 +1 @@
+

package/components/ObjectLogs/subcomponents/DetailDialog/index.d.ts

@@ -0,0 +1,6 @@
+import { DetailDialogProps } from '../../types';
+/**
+ * Componente que muestra el detalle de un log en un diálogo.
+ * Utiliza ReactJson para mostrar el contenido del log en formato JSON.
+ */
+export declare function DetailDialog(props: DetailDialogProps): import("react/jsx-runtime").JSX.Element;

package/components/ObjectLogs/{components → subcomponents}/DetailDialog/index.js

@@ -3,9 +3,9 @@ import { useState, useEffect } from "react";
 import { useNetwork } from "@m4l/core";
 import { useHostTheme } from "@m4l/graphics";
 import ReactJson from "@microlink/react-json-view";
-import { S as ScrollBar } from "../../../ScrollBar/ScrollBar.js";
+import { a as OBJECT_LOGS_M4L_END_POINT, b as OBJECT_LOGS_OTHERS_END_POINT } from "../../constants.js";
 function DetailDialog(props) {
-  const { log_id } = props;
+  const { logId, theme, type } = props;
   const { networkOperation } = useNetwork();
   const { hostThemeOptions } = useHostTheme();
   const [detail, setDetail] = useState({});
@@ -13,7 +13,10 @@ function DetailDialog(props) {
     let mounted = true;
     networkOperation({
       method: "GET",
-      endPoint: `logs/${log_id}`
+      endPoint: `${type === "m4l" ? OBJECT_LOGS_M4L_END_POINT : OBJECT_LOGS_OTHERS_END_POINT}/${logId}`
+      // data: {
+      //   ...(createdAt ? { created_at: createdAt } : {}),
+      // },
     }).then((response) => {
       if (mounted) {
         const parseData = JSON.parse(String(response.data.log_detail));
@@ -25,17 +28,18 @@ function DetailDialog(props) {
     };
   }, []);
   const modeTheme = hostThemeOptions.palette?.mode;
-  return /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(
+  const appliedTheme = theme || (modeTheme === "dark" ? "summerfruit" : "rjv-default");
+  return /* @__PURE__ */ jsx(
     ReactJson,
     {
-      theme: modeTheme === "dark" ? "summerfruit" : "rjv-default",
+      theme: appliedTheme,
       name: null,
       sortKeys: true,
       displayDataTypes: false,
       quotesOnKeys: false,
       src: detail
     }
-  ) });
+  );
 }
 export {
   DetailDialog as D

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.d.ts

@@ -0,0 +1,11 @@
+import { ObjectLogsBaseProps } from '../../types';
+import { Maybe } from '@m4l/core';
+export interface ObjectLogsByM4LProps extends Omit<ObjectLogsBaseProps, 'type'> {
+    objectId: Maybe<number | string>;
+    resourceId: Maybe<number | string>;
+}
+/**
+ * Es un componente de React que muestra y gestiona registros de logs asociados a un objeto específico.
+ * Incluye funcionalidades como paginación, filtrado dinámico y formateo de datos.
+ */
+export declare function ObjectLogsByM4L(props: ObjectLogsByM4LProps): import("react/jsx-runtime").JSX.Element;

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/ObjectLogsByM4L.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
+import { useEnvironment } from "@m4l/core";
+import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { C as ContainerWrapperStyled, A as ActionsWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { usePaginate } from "@m4l/graphics";
+import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
+import { a as OBJECT_LOGS_M4L_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { endOfDay, startOfMonth } from "date-fns";
+import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
+function ObjectLogsByM4L(props) {
+  const { resourceId, objectId, dataTestId = "" } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [backendQueryParams, setBackendQueryParams] = useState(() => {
+    return { resource_id: resourceId, object_id: objectId };
+  });
+  const columns = useObjectLogsColumns("m4l");
+  const { pagerState, rows, onPageChange, onRowsPerPageChange, clearRows, Refresh } = usePaginate({
+    endPoint: OBJECT_LOGS_M4L_END_POINT,
+    fireOnFirstLoad: false,
+    fireOnChangeParms: false,
+    queryParams: backendQueryParams,
+    bodyToSnakeCase: true,
+    responseToCamelCase: true
+  });
+  useEffect(() => {
+    clearRows();
+    setBackendQueryParams({ resource_id: resourceId, object_id: objectId });
+  }, [resourceId, objectId]);
+  const onChangeFilter = (_initFilters, rawFilters) => {
+    setBackendQueryParams((oldParms) => ({ ...oldParms, f: rawFilters }));
+    Refresh();
+  };
+  return /* @__PURE__ */ jsxs(
+    ContainerWrapperStyled,
+    {
+      ownerState: {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
+      ...getPropDataTestId(OBJECT_LOGS_KEY_COMPONENT, ObjectLogsSlots.root, dataTestId),
+      children: [
+        /* @__PURE__ */ jsx(ActionsWrapperStyled, { id: "objecuser_logstLogsActions", ownerState: {}, children: /* @__PURE__ */ jsx(
+          DynamicFilter,
+          {
+            withAllField: true,
+            onChangeFilters: onChangeFilter,
+            automatic: false,
+            fields: [
+              {
+                name: "user_logs.created_at",
+                dictionaryId: DICTIONARY.LABEL_CREATED_AT,
+                type: "datetime",
+                multiple: false,
+                presence: "fixed",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
+                defaultOperand1: startOfMonth(/* @__PURE__ */ new Date()),
+                defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
+              },
+              {
+                name: "users.email",
+                dictionaryId: DICTIONARY.LABEL_USER,
+                type: "string",
+                multiple: true,
+                presence: "optional",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
+              },
+              {
+                name: "user_logs.log_preview",
+                dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
+                type: "string",
+                multiple: true,
+                presence: "optional",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
+              },
+              {
+                name: "user_logs.log_detail",
+                dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
+                type: "string",
+                multiple: true,
+                presence: "optional",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
+              }
+            ],
+            initialAppliedFilters: []
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          GridWrapperStyled,
+          {
+            id: "GridWrapper",
+            ownerState: {},
+            children: /* @__PURE__ */ jsx(
+              DataGrid,
+              {
+                id: "users_logs_list",
+                dataTestId,
+                columns,
+                rows,
+                rowKeyGetter: (row) => row.id,
+                withActions: true,
+                actionsProps: {
+                  withPager: true,
+                  withLocalFilters: true,
+                  pagerOptions: {
+                    records: rows.length,
+                    totalRecords: pagerState.totalRecords,
+                    rowsPerPageOptions: [1, 2, 3, 4, 5, 10, 25],
+                    page: pagerState.page,
+                    rowsPerPage: pagerState.rowsPerPage,
+                    onPageChange,
+                    onRowsPerPageChange
+                  }
+                }
+              },
+              "users_list_logs"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ObjectLogsByM4L as O
+};

package/components/ObjectLogs/subcomponents/ObjectLogsByM4L/index.d.ts

@@ -0,0 +1 @@
+export * from './ObjectLogsByM4L';

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.d.ts

@@ -0,0 +1,10 @@
+import { ObjectLogsBaseProps } from '../../types';
+export interface ObjectLogsByOtherProps extends Omit<ObjectLogsBaseProps, 'type'> {
+    resourceSerialId: string;
+    resourceTypeId: string;
+}
+/**
+ * Es un componente de React que muestra y gestiona registros de logs asociados a un objeto específico.
+ * Incluye funcionalidades como paginación, filtrado dinámico y formateo de datos.
+ */
+export declare function ObjectLogsByOthers(props: ObjectLogsByOtherProps): import("react/jsx-runtime").JSX.Element;

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/ObjectLogsByOthers.js

@@ -0,0 +1,141 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { endOfDay, startOfDay } from "date-fns";
+import { D as DataGrid } from "../../../DataGrid/DataGrid.js";
+import { useEnvironment } from "@m4l/core";
+import { D as DynamicFilter } from "../../../DynamicFilter/DynamicFilter.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
+import { C as ContainerWrapperStyled, A as ActionsWrapperStyled, G as GridWrapperStyled } from "../../slots/ObjectLogsSlots.js";
+import { D as DICTIONARY } from "../../dictionary.js";
+import { useRows } from "@m4l/graphics";
+import { u as useObjectLogsColumns } from "../../hooks/useObjectLogsColumns.js";
+import { b as OBJECT_LOGS_OTHERS_END_POINT, O as OBJECT_LOGS_KEY_COMPONENT } from "../../constants.js";
+import { g as getPropDataTestId } from "../../../../test/getNameDataTestId.js";
+import { g as getRawFiltersForNetwork } from "../../../DynamicFilter/helpers/getRawFiltersForNetwork.js";
+import { g as getRawSortsForNetwork } from "../../../DynamicSort/helpers/getRawSortsForNetwork.js";
+import { O as ObjectLogsSlots } from "../../slots/ObjectLogsEnum.js";
+function ObjectLogsByOthers(props) {
+  const { dataTestId = "", resourceSerialId, resourceTypeId } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const [backendQueryParams, setBackendQueryParams] = useState({});
+  const columns = useObjectLogsColumns("other");
+  const { rows, clearRows, refresh } = useRows({
+    endPoint: OBJECT_LOGS_OTHERS_END_POINT,
+    fireOnFirstLoad: false,
+    fireOnChangeParms: false,
+    queryParams: backendQueryParams,
+    bodyToSnakeCase: true,
+    responseToCamelCase: true
+  });
+  useEffect(() => {
+    clearRows();
+  }, [resourceSerialId, resourceTypeId]);
+  const onChangeFilter = (_initFilters, rawFilters) => {
+    const fixedFields = [
+      {
+        n: "resourceTypeId",
+        o: "c",
+        o1: resourceTypeId,
+        ft: "string"
+      },
+      {
+        n: "resourceSerialId",
+        o: "c",
+        o1: resourceSerialId,
+        ft: "string"
+      }
+    ];
+    const sortFields = [
+      // {
+      //   n: 'created_at',
+      //   o: 'desc',
+      //   ft: 'string',
+      // } ,
+    ];
+    const allFields = [...fixedFields, ...rawFilters];
+    const parms = {
+      f: getRawFiltersForNetwork(allFields, "snakeCase"),
+      s: getRawSortsForNetwork(sortFields, "snakeCase")
+    };
+    setBackendQueryParams(parms);
+    refresh();
+  };
+  return /* @__PURE__ */ jsxs(
+    ContainerWrapperStyled,
+    {
+      ownerState: {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `m4ldatagrid-${dataTestId}` } : {},
+      ...getPropDataTestId(OBJECT_LOGS_KEY_COMPONENT, ObjectLogsSlots.root, dataTestId),
+      children: [
+        /* @__PURE__ */ jsx(ActionsWrapperStyled, { id: "objecuser_logstLogsActions", ownerState: {}, children: /* @__PURE__ */ jsx(
+          DynamicFilter,
+          {
+            withAllField: true,
+            onChangeFilters: onChangeFilter,
+            automatic: false,
+            fields: [
+              {
+                name: "createdAt",
+                dictionaryId: DICTIONARY.LABEL_CREATED_AT,
+                type: "datetime",
+                multiple: false,
+                presence: "initialized",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`,
+                defaultOperand1: startOfDay(/* @__PURE__ */ new Date()),
+                defaultOperand2: endOfDay(/* @__PURE__ */ new Date())
+              },
+              {
+                name: "userId",
+                dictionaryId: DICTIONARY.LABEL_USER,
+                type: "string",
+                multiple: true,
+                presence: "optional",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
+              },
+              {
+                name: "logPreview",
+                dictionaryId: DICTIONARY.LABEL_LOG_PREVIEW,
+                type: "string",
+                multiple: true,
+                presence: "optional",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
+              },
+              {
+                name: "logDetail",
+                dictionaryId: DICTIONARY.LABEL_LOG_DETAIL,
+                type: "string",
+                multiple: true,
+                presence: "optional",
+                urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
+              }
+            ],
+            initialAppliedFilters: []
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          GridWrapperStyled,
+          {
+            id: "GridWrapper",
+            ownerState: {},
+            children: /* @__PURE__ */ jsx(
+              DataGrid,
+              {
+                id: "users_logs_list",
+                dataTestId,
+                columns,
+                rows,
+                rowKeyGetter: (row) => row.id,
+                withActions: false,
+                actionsProps: {}
+              },
+              "users_list_logs"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ObjectLogsByOthers as O
+};

package/components/ObjectLogs/subcomponents/ObjectLogsByOthers/index.d.ts

@@ -0,0 +1 @@
+export * from './ObjectLogsByOthers';