@m4l/gclick 0.1.0 → 0.2.0-JAEBeta.0

package/@types/deviceData.d.ts

@@ -1,7 +1,8 @@
 import { Maybe } from '@m4l/core';
 import { GNSSEnumMotionStatus, GNSSEnumSignal } from './constants';
 import { OperationalRoles, PropertyValue, PropertyValueWithTrack } from './general';
-import { VPTCurrentMultiple, VPTCurrentADCPower, VPTCurrentDIX, VPTCurrentModem, VPTSettingsDIX, VPTCurrentOWTempX } from './vpts';
+import { VPTMultiple, VPTCurrentADCPower, VPTCurrentDIX, VPTCurrentModem, VPTSettingsDIX, VPTCurrentOWTempX, VPTSettingsModem } from './vpts';
+import { HexColor } from '@m4l/graphics';
 export type DeviceDataGeofence = {
     id: number;
     name: string;
@@ -18,7 +19,7 @@ export type DeviceCurrentVPTGnss = {
     gnssHdop: PropertyValue<number>;
     gnssLatitude: PropertyValue<number>;
     gnssLongitude: PropertyValue<number>;
-    gnssSatelliteQuantity: PropertyValue<number>;
+    gnssSatellitesInUse: PropertyValue<number>;
     gnssSpeed: PropertyValue<number>;
     gnssAddress: PropertyValue<string>;
     gnssMotionStatus: PropertyValueWithTrack<GNSSEnumMotionStatus>;
@@ -33,15 +34,15 @@ export type DeviceCurrentVPTGnss = {
 export type DeviceCurrent = {
     reportProfiles?: {
         trackerEvents?: {
-            lastEvent?: {
+            modemLastEvent?: {
                 date: string;
             };
         };
     };
     vpts?: {
         vptGnss?: DeviceCurrentVPTGnss;
-        vptDiX?: VPTCurrentMultiple<VPTCurrentDIX>;
-        vptOWTempX?: VPTCurrentMultiple<VPTCurrentOWTempX>;
+        vptDiX?: VPTMultiple<VPTCurrentDIX>;
+        vptOWTempX?: VPTMultiple<VPTCurrentOWTempX>;
         vptModem?: VPTCurrentModem;
         vptADCPower?: VPTCurrentADCPower;
     };
@@ -49,8 +50,7 @@ export type DeviceCurrent = {
 export type SettingsGroup = {
     id: number;
     name: string;
-    bgColor: string;
-    color: string;
+    bgColor: HexColor;
 };
 export type PropertyType = 'string' | 'number' | 'boolean' | 'date' | 'time' | 'datetime' | 'array' | 'object' | 'function' | 'symbol' | 'undefined' | 'null' | 'unknown';
 export type Property = {
@@ -65,16 +65,19 @@ export type Properties = {
  */
 export type DeviceSettings = {
     name: string;
+    alias?: string;
     inTechinalOrder: PropertyValue<boolean>;
     adminStatus: PropertyValue<string>;
     active: boolean;
     blocked?: boolean;
-    imageUrl: string;
+    iconId: string;
     operationalRoles?: OperationalRoles;
     group?: Maybe<SettingsGroup>;
+    iconBgColor?: HexColor;
     properties?: Properties;
     vpts?: {
-        vptDix?: VPTSettingsDIX;
+        vptModem?: VPTSettingsModem;
+        vptDix?: VPTMultiple<VPTSettingsDIX>;
     };
 };
 export type DeviceDataType = {

package/@types/general.d.ts

@@ -1,7 +1,7 @@
 import { GNSSEnumMotionStatus } from './constants';
 export type PropertyValueWithTrack<T> = {
     value: T;
-    udaptedAt?: string;
+    updatedAt?: string;
 };
 export type PropertyValue<T> = T;
 export type GNSSSatus = keyof typeof GNSSEnumMotionStatus;

package/@types/index.d.ts

@@ -1,2 +1,2 @@
-export type { DeviceDataType, SettingsGroup } from './deviceData';
-export { GNSSEnumMotionStatus as GNSSEnumStatus } from './constants';
+export type { DeviceDataType, SettingsGroup, DeviceCurrent, DeviceCurrentVPTGnss } from './deviceData';
+export { GNSSEnumMotionStatus, GNSSEnumSignal } from './constants';

package/@types/types.d.ts

@@ -1,27 +1,41 @@
 import { ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
 import { MapPopupDeviceGpsOwnerState, MapPopupDeviceGpsSlotsType } from '../components/maps/components/GpsMap/popups/MapPopupDevice/types';
 import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../formatters/CourseFormatter/types';
+import { DeviceOwnerState, DeviceSlotsType } from '../components/Device/types';
 import { IndicatorCSQOwnerState, IndicatorCSQSlotsType } from '../components/indicators/IndicatorCSQ/types';
 import { IndicatorBatteryOwnerState, IndicatorBatterySlotsType } from '../components/indicators/IndicatorBattery/types';
 import { IndicatorValueStatusSlotsType } from '../components/indicators/IndicatorValueStatus/types';
+import { MapOwnerState, MapSlotsType } from '../components/maps/components/GpsMap/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
+    M4LMap: MapSlotsType;
     M4LMapPopupDevice:  MapPopupDeviceGpsSlotsType;
     M4LCourseFormatter: CourseFormatterSlotsType;
+    M4LDevice: DeviceSlotsType;
+
     M4LCSQSignal: IndicatorCSQSlotsType;
     M4LIndicatorBattery: IndicatorBatterySlotsType;
     M4LIndicatorValueStatus: IndicatorValueStatusSlotsType;
+    M4LIndicatorValueAndMagnitude: IndicatorValueAndMagnitudeSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
+    M4LMap: Partial<MapOwnerState>;
     M4LMapPopupDevice:  Partial<MapPopupDeviceGpsOwnerState>;
     M4LCourseFormatter:  Partial<CourseFormatterOwnerState>;
+    M4LDevice:  Partial<DeviceOwnerState>;
     M4LCSQSignal:  Partial<IndicatorCSQOwnerState>;
     M4LIndicatorBattery:  Partial<IndicatorBatteryOwnerState>;
     M4LIndicatorValueStatus:  Partial<IndicatorValueStatusOwnerState>;
+    M4LIndicatorValueAndMagnitude:  Partial<IndicatorValueAndMagnitudeOwnerState>;
   }
   interface Components {
+    M4LMap?: {
+      defaultProps?: ComponentsPropsList['M4LMap'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LMap'];
+      variants?: ComponentsVariants['M4LMap'];
+    };
     M4LMapPopupDevice?: {
       defaultProps?: ComponentsPropsList['M4LMapPopupDevice'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LMapPopupDevice'];
@@ -32,6 +46,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCourseFormatter'];
       variants?: ComponentsVariants['M4LCourseFormatter'];
     };
+    M4LDevice?: {
+      defaultProps?: ComponentsPropsList['M4LDevice'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDevice'];
+      variants?: ComponentsVariants['M4LDevice'];
+    };
     M4LCSQSignal?: {
       defaultProps?: ComponentsPropsList['M4LCSQSignal'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LCSQSignal'];
@@ -47,5 +66,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorValueStatus'];
       variants?: ComponentsVariants['M4LIndicatorValueStatus'];
     };
-   }
+    M4LIndicatorValueAndMagnitude?: {
+      defaultProps?: ComponentsPropsList['M4LIndicatorValueAndMagnitude'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LIndicatorValueAndMagnitude'];
+      variants?: ComponentsVariants['M4LIndicatorValueAndMagnitude'];
+    };
+  }
 }

package/@types/vpts.d.ts

@@ -8,7 +8,7 @@ export type VPTCurrentDIX = {
     diXValue: PropertyValueWithTrack<boolean>;
     diXStatus: PropertyValueWithTrack<boolean>;
 };
-export type VPTCurrentMultiple<T> = {
+export type VPTMultiple<T> = {
     [key: number]: T;
 };
 export type VPTSettingsDIX = {
@@ -42,8 +42,11 @@ export type VPTCurrentADCPower = {
     backupChargeLevel: PropertyValue<number>;
 };
 export type VPTCurrentModem = {
-    lastConnection: string;
-    lastEvent: string;
+    modemLastConnection: string;
+    modemLastEvent: string;
     modemCsq: PropertyValue<number>;
     callActive: PropertyValue<boolean>;
 };
+export type VPTSettingsModem = {
+    modemLineNumber?: string;
+};

package/components/Device/Device.d.ts

@@ -0,0 +1,6 @@
+import { DeviceProps } from './types';
+/**
+ * Componente que muestra un dispositivo con su icono y descripción, basada en las propiedades del dispositivo que son
+ * reemplazadas de acuerdo a la etiqueta de visualización que normalmente viene de las preferencias del usuario autenticado.
+ */
+export declare const Device: (props: DeviceProps) => import("react/jsx-runtime").JSX.Element;

package/components/Device/Device.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { D as DeviceRootStyled, a as DeviceStatusIconStyled, b as DeviceStatusRigthContainerStyled, c as DeviceTitleContainerStyled, d as DeviceStatusLabelStyled } from "./slots/DeviceSlots.js";
+import { useComponentSize, Typography } from "@m4l/components";
+import { u as useDevice } from "./hooks/useDevice.js";
+const Device = (props) => {
+  const { deviceData, size, variant = "withStatus" } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { iconKey, color, palletColor, name, alias, stausOrIdLabel } = useDevice({ deviceData, variant });
+  const { currentSize } = useComponentSize(size);
+  const src = `${host_static_assets}/${environment_assets}/frontend/components/device_status/assets/icons/${iconKey}.svg`;
+  const ownerState = {
+    iconKey,
+    size: currentSize,
+    color,
+    palletColor,
+    variant
+  };
+  return /* @__PURE__ */ jsxs(DeviceRootStyled, { ownerState, children: [
+    /* @__PURE__ */ jsx(DeviceStatusIconStyled, { src, color, ownerState }),
+    /* @__PURE__ */ jsxs(DeviceStatusRigthContainerStyled, { ownerState, children: [
+      /* @__PURE__ */ jsxs(DeviceTitleContainerStyled, { ownerState, children: [
+        alias && /* @__PURE__ */ jsx(Typography, { variant: "bodyDens", color: "text.secondary", children: alias }),
+        /* @__PURE__ */ jsx(Typography, { variant: alias ? "body" : "bodyDens", color: "text.secondary", children: name })
+      ] }),
+      /* @__PURE__ */ jsx(DeviceStatusLabelStyled, { ownerState, variant: variant === "withStatus" ? "bodyDens" : "body", children: stausOrIdLabel })
+    ] })
+  ] });
+};
+export {
+  Device as D
+};

package/components/Device/Device.styles.d.ts

@@ -0,0 +1,2 @@
+import { DeviceStyles } from './types';
+export declare const deviceStatusStyles: DeviceStyles;

package/components/Device/Device.styles.js

@@ -0,0 +1,95 @@
+import { getSizeStyles } from "@m4l/components";
+import { g as getColors } from "./helpers.js";
+const deviceStatusStyles = {
+  /**
+   * TODO: Documentar
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexGrow: 1,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    height: "32px",
+    gap: `${theme.vars.size.baseSpacings["sp2-5"]}`,
+    overflow: "hidden"
+  }),
+  /**
+   * Estilos del icono del estado del dispositivo
+   */
+  statusIcon: ({ theme, ownerState }) => {
+    const { colorIcon, colorBackground, colorBackgroundHover } = getColors(theme, ownerState);
+    return {
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "box",
+        (size) => {
+          return {
+            width: size,
+            height: size
+          };
+        }
+      ),
+      flexShrink: 0,
+      boxShadow: `0 2px 6px 0 ${colorBackgroundHover}`,
+      borderRadius: `${theme.vars.size.borderRadius["r2"]}`,
+      backgroundColor: colorBackground,
+      "& .M4LIcon-icon": {
+        backgroundColor: `${colorIcon} !important`,
+        height: "20px",
+        width: "20px"
+      }
+    };
+  },
+  /**
+   * Estilos del contenedor del nombre y el alias del dispositivo
+   */
+  statusRigthContainer: () => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    overflow: "hidden"
+  }),
+  /**
+   * Contenedor del nombre y el alias del dispositivo
+   */
+  titleContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: `${theme.vars.size.baseSpacings["sp2"]}`
+  }),
+  // /**
+  //  *
+  //  */
+  // titleName: () => ({
+  //   fontSize: '14px',
+  //   fontWeight: 'bold',
+  // }),
+  // /**
+  //  *
+  //  */
+  // titleAlias: () => ({
+  //   fontSize: '12px',
+  //   fontWeight: 'normal',
+  // }),
+  /**
+   * Estilos del label del estado del dispositivo
+   */
+  statusLabel: ({ theme, ownerState }) => {
+    const { colorText } = getColors(theme, ownerState);
+    return {
+      whiteSpace: "nowrap",
+      width: "100%",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      fontSize: "12px",
+      fontWeight: "normal",
+      ...ownerState?.variant === "withStatus" && {
+        color: `${colorText} !important`
+      }
+    };
+  }
+};
+export {
+  deviceStatusStyles as d
+};

package/components/Device/constants.d.ts

@@ -0,0 +1,14 @@
+import { ChipColorOptions } from '@m4l/styles';
+import { GNSSEnumMotionStatus } from '../../@types/constants';
+import { IconColorDeep } from '@m4l/components';
+export declare const COMPONENT_DEVICE_TEST_ID = "M4LDevice";
+export declare const COMPONET_DEVICE_KEY_COMPONENT = "M4LDevice";
+export type DeviceData = {
+    id: GNSSEnumMotionStatus;
+    statusLabelId: string;
+    iconKey: string;
+    color: IconColorDeep;
+    palletColor: ChipColorOptions;
+    name: string;
+    alias?: string;
+};

package/components/Device/constants.js

@@ -0,0 +1,4 @@
+const COMPONET_DEVICE_KEY_COMPONENT = "M4LDevice";
+export {
+  COMPONET_DEVICE_KEY_COMPONENT as C
+};

package/components/Device/dictionary.d.ts

@@ -0,0 +1,14 @@
+export declare const MDS_DICTIONARY_ID = "device";
+export declare function getDeviceComponentsDictionary(): string[];
+export declare const MDS_DICTIONARY: {
+    readonly LABEL_OFF: "device.label_off";
+    readonly LABEL_MOVING: "device.label_moving";
+    readonly LABEL_STOPPED: "device.label_stopped";
+    readonly LABEL_STOPPED_RALENTI: "device.label_stopped_ralenti";
+    readonly LABEL_STOPPED_E_RALENTI: "device.label_stopped_e_ralenti";
+    readonly LABEL_TOWING: "device.label_towing";
+    readonly LABEL_NO_GPS_SIGNAL: "device.label_no_gps_signal";
+    readonly LABEL_POWER_SAVING: "device.label_power_saving";
+    readonly LABEL_MAX_SPEED: "device.label_max_speed";
+    readonly LABEL_ID: "device.label_id";
+};

package/components/Device/dictionary.js

@@ -0,0 +1,19 @@
+const MDS_DICTIONARY_ID = "device";
+function getDeviceComponentsDictionary() {
+  return [MDS_DICTIONARY_ID].concat();
+}
+const MDS_DICTIONARY = {
+  LABEL_OFF: `${MDS_DICTIONARY_ID}.label_off`,
+  LABEL_MOVING: `${MDS_DICTIONARY_ID}.label_moving`,
+  LABEL_STOPPED: `${MDS_DICTIONARY_ID}.label_stopped`,
+  LABEL_STOPPED_RALENTI: `${MDS_DICTIONARY_ID}.label_stopped_ralenti`,
+  LABEL_STOPPED_E_RALENTI: `${MDS_DICTIONARY_ID}.label_stopped_e_ralenti`,
+  LABEL_TOWING: `${MDS_DICTIONARY_ID}.label_towing`,
+  LABEL_POWER_SAVING: `${MDS_DICTIONARY_ID}.label_power_saving`,
+  LABEL_MAX_SPEED: `${MDS_DICTIONARY_ID}.label_max_speed`,
+  LABEL_ID: `${MDS_DICTIONARY_ID}.label_id`
+};
+export {
+  MDS_DICTIONARY as M,
+  getDeviceComponentsDictionary as g
+};

package/components/{DeviceStatus/hooks/helper.d.ts → Device/helpers/helperDeviceStatus.d.ts}

@@ -1,5 +1,5 @@
 import { DeviceDataType } from '../../../@types';
-import { StatusDeviceData } from './constants';
+import { StatusDeviceData } from '../hooks/constants';
 /**
  * Hook encargado de memonizar y obtener el id del icono, el color y el label, y como usa speed para tomar decisiones,
  * tambien lo devuelve para ser usado en partes donde lo necesiten

package/components/{DeviceStatus/hooks/helper.js → Device/helpers/helperDeviceStatus.js}

@@ -1,10 +1,10 @@
-import { getPropertyByString } from "@m4l/core";
 import { G as GNSSEnumMotionStatus } from "../../../@types/constants.js";
-import { D as DEVICE_STATUSES_CONFIG } from "./constants.js";
+import { D as DEVICE_STATUSES_CONFIG } from "../hooks/constants.js";
+import { g as getVptValueWithGuard } from "../../../utils/getVptValueWithGuard.js";
 const getDeviceStatusByData = (deviceData) => {
-  const status = deviceData?.current?.vpts?.vptGnss?.gnssMotionStatus?.value || GNSSEnumMotionStatus.off;
-  const course = getPropertyByString(deviceData, "current.vpts.vptGnss.course", 0);
-  const speed = Number(getPropertyByString(deviceData, "current.vpts.vptGnss.speed", 0).toFixed(0));
+  const status = getVptValueWithGuard(deviceData?.current?.vpts?.vptGnss?.gnssMotionStatus, GNSSEnumMotionStatus.off);
+  const course = getVptValueWithGuard(deviceData?.current?.vpts?.vptGnss?.gnssCourse, 0);
+  const speed = getVptValueWithGuard(deviceData?.current?.vpts?.vptGnss?.gnssSpeed, 0);
   let statusData;
   try {
     statusData = { course, speed, ...DEVICE_STATUSES_CONFIG[status] };

package/components/Device/helpers.d.ts

@@ -0,0 +1,18 @@
+import { DeviceDataType } from '../../@types';
+import { DeviceData } from './constants';
+import { Theme } from '@mui/material/styles';
+import { DeviceOwnerState } from './types';
+/**
+ * Hook encargado de memonizar y obtener el id del icono, el color y el label, y como usa speed para tomar decisiones,
+ * tambien lo devuelve para ser usado en partes donde lo necesiten
+ */
+export declare const getDeviceByData: (deviceData: DeviceDataType) => DeviceData;
+/**
+ * Obtiene los colores del chip
+ */
+export declare const getColors: (theme: Theme, ownerState: Partial<DeviceOwnerState>) => {
+    colorText: string;
+    colorIcon: string;
+    colorBackground: string;
+    colorBackgroundHover: string;
+};

package/components/Device/helpers.js

@@ -0,0 +1,27 @@
+import { getPropertyByString } from "@m4l/core";
+import { G as GNSSEnumMotionStatus } from "../../@types/constants.js";
+import { D as DEVICE_STATUSES_CONFIG } from "./hooks/constants.js";
+const getDeviceByData = (deviceData) => {
+  const status = deviceData?.current?.vpts?.vptGnss?.gnssMotionStatus?.value || GNSSEnumMotionStatus.off;
+  const name = getPropertyByString(deviceData, "settings.name", "");
+  const alias = getPropertyByString(deviceData, "settings.alias", void 0);
+  let statusDeviceData;
+  try {
+    statusDeviceData = { name, alias, ...DEVICE_STATUSES_CONFIG[status] };
+  } catch (_error) {
+    statusDeviceData = { name, alias, ...DEVICE_STATUSES_CONFIG[GNSSEnumMotionStatus.stopped] };
+  }
+  return statusDeviceData;
+};
+const getColors = (theme, ownerState) => {
+  const finalPalette = theme.vars.palette.chips[ownerState?.palletColor ?? "default"]["contained"];
+  const colorBackground = finalPalette.backgroundColorTone;
+  const colorText = finalPalette.color;
+  const colorIcon = finalPalette.colorTone;
+  const colorBackgroundHover = finalPalette.backgroundHover;
+  return { colorText, colorIcon, colorBackground, colorBackgroundHover };
+};
+export {
+  getDeviceByData as a,
+  getColors as g
+};

package/components/Device/hooks/constants.d.ts

@@ -0,0 +1,16 @@
+import { ChipColorOptions } from '@m4l/styles';
+import { GNSSEnumMotionStatus } from '../../../@types/constants';
+import { IconProps } from '@m4l/components';
+export type BaseStatusDeviceData = {
+    id: GNSSEnumMotionStatus;
+    statusLabelId: string;
+    iconKey: string;
+    color: Required<IconProps>['color'];
+    palletColor: ChipColorOptions;
+    course?: number;
+};
+export type StatusDeviceData = BaseStatusDeviceData & {
+    course?: number;
+    speed?: number;
+};
+export declare const DEVICE_STATUSES_CONFIG: Record<GNSSEnumMotionStatus, BaseStatusDeviceData>;

package/components/{DeviceStatus → Device}/hooks/constants.js

@@ -1,11 +1,11 @@
 import { G as GNSSEnumMotionStatus } from "../../../@types/constants.js";
 import { M as MDS_DICTIONARY } from "../dictionary.js";
-import { M as MDS_ICONS } from "../icons.js";
+import { D as DEVICE_ICONS } from "../icons.js";
 const DEVICE_STATUSES_CONFIG = {
   [GNSSEnumMotionStatus.moving]: {
     id: GNSSEnumMotionStatus.moving,
     statusLabelId: MDS_DICTIONARY.LABEL_MOVING,
-    iconKey: MDS_ICONS.MOVING,
+    iconKey: DEVICE_ICONS.MOVING,
     color: "success.main",
     //Ready
     palletColor: "success"
@@ -13,27 +13,25 @@ const DEVICE_STATUSES_CONFIG = {
   [GNSSEnumMotionStatus.off]: {
     id: GNSSEnumMotionStatus.off,
     statusLabelId: MDS_DICTIONARY.LABEL_OFF,
-    iconKey: MDS_ICONS.OFF,
+    iconKey: DEVICE_ICONS.OFF,
     color: "info.main",
     //Ready
     palletColor: "info",
-    course: 0,
-    speed: 0
+    course: 0
   },
   [GNSSEnumMotionStatus.stopped]: {
     id: GNSSEnumMotionStatus.stopped,
     statusLabelId: MDS_DICTIONARY.LABEL_STOPPED,
-    iconKey: MDS_ICONS.STOPPED,
+    iconKey: DEVICE_ICONS.STOPPED,
     color: "text.secondary",
     //Ready
     palletColor: "default",
-    course: 0,
-    speed: 0
+    course: 0
   },
   [GNSSEnumMotionStatus.stoppedRalenti]: {
     id: GNSSEnumMotionStatus.stoppedRalenti,
     statusLabelId: MDS_DICTIONARY.LABEL_STOPPED_RALENTI,
-    iconKey: MDS_ICONS.STOPPED_RALENTI,
+    iconKey: DEVICE_ICONS.STOPPED_RALENTI,
     color: "warning.active",
     //Ready
     palletColor: "warning",
@@ -42,24 +40,24 @@ const DEVICE_STATUSES_CONFIG = {
   [GNSSEnumMotionStatus.stoppedExcesiveRalenti]: {
     id: GNSSEnumMotionStatus.stoppedExcesiveRalenti,
     statusLabelId: MDS_DICTIONARY.LABEL_STOPPED_E_RALENTI,
-    iconKey: MDS_ICONS.STOPPED_E_RALENTI,
+    iconKey: DEVICE_ICONS.STOPPED_E_RALENTI,
     color: "error.enabled",
     //Ready
-    palletColor: "error",
+    palletColor: "orange",
     course: 0
   },
   [GNSSEnumMotionStatus.towing]: {
     id: GNSSEnumMotionStatus.towing,
     statusLabelId: MDS_DICTIONARY.LABEL_TOWING,
-    iconKey: MDS_ICONS.TOWING,
+    iconKey: DEVICE_ICONS.TOWING,
     color: "success.active",
     //Ready
-    palletColor: "success"
+    palletColor: "forest"
   },
   [GNSSEnumMotionStatus.powerSaving]: {
     id: GNSSEnumMotionStatus.powerSaving,
     statusLabelId: MDS_DICTIONARY.LABEL_POWER_SAVING,
-    iconKey: MDS_ICONS.POWER_SAVING,
+    iconKey: DEVICE_ICONS.POWER_SAVING,
     color: "text.secondary",
     //Ready
     palletColor: "default",
@@ -68,7 +66,7 @@ const DEVICE_STATUSES_CONFIG = {
   [GNSSEnumMotionStatus.maxSpeed]: {
     id: GNSSEnumMotionStatus.maxSpeed,
     statusLabelId: MDS_DICTIONARY.LABEL_MAX_SPEED,
-    iconKey: MDS_ICONS.MAX_SPEED,
+    iconKey: DEVICE_ICONS.MAX_SPEED,
     color: "error.enabled",
     //Ready
     palletColor: "error"

package/components/Device/hooks/useDevice.d.ts

@@ -0,0 +1,12 @@
+import { useDeviceProps } from '../types';
+/**
+ * Hook encargado de memonizar y obtener el id del icono, el color y el label
+ */
+export declare const useDevice: (props: useDeviceProps) => {
+    name: string;
+    alias: string | undefined;
+    iconKey: string;
+    stausOrIdLabel: string;
+    color: string;
+    palletColor: import('@m4l/styles').ChipColorOptions;
+};

package/components/Device/hooks/useDevice.js

@@ -0,0 +1,23 @@
+import { useModuleDictionary } from "@m4l/core";
+import { useMemo } from "react";
+import { a as getDeviceByData } from "../helpers.js";
+import { M as MDS_DICTIONARY } from "../dictionary.js";
+const useDevice = (props) => {
+  const { deviceData, variant = "withStatus" } = props;
+  const { getLabel } = useModuleDictionary();
+  return useMemo(() => {
+    const { iconKey, statusLabelId, color, palletColor, name, alias } = getDeviceByData(deviceData);
+    const stausOrIdLabel = variant === "withStatus" ? getLabel(statusLabelId) : `${getLabel(MDS_DICTIONARY.LABEL_ID, deviceData.resourceSerialId)}`;
+    return {
+      name,
+      alias,
+      iconKey,
+      stausOrIdLabel,
+      color,
+      palletColor
+    };
+  }, [deviceData, getLabel, variant]);
+};
+export {
+  useDevice as u
+};

package/components/{DeviceStatus → Device}/hooks/useDeviceStatus.d.ts

@@ -6,7 +6,7 @@ export declare const useDeviceStatus: (props: useDeviceStatusProps) => {
     iconKey: string;
     label: string | undefined;
     color: string;
-    filteredCourse: number | undefined;
-    palletColor: string;
+    course: number | undefined;
+    palletColor: import('@m4l/styles').ChipColorOptions;
     speed: number | undefined;
 };

package/components/{DeviceStatus → Device}/hooks/useDeviceStatus.js

@@ -1,20 +1,20 @@
 import { useModuleDictionary } from "@m4l/core";
 import { useMemo } from "react";
-import { g as getDeviceStatusByData } from "./helper.js";
+import { g as getDeviceStatusByData } from "../helpers/helperDeviceStatus.js";
 const useDeviceStatus = (props) => {
   const { deviceData, withLabel = false } = props;
   const { getLabel } = useModuleDictionary();
   return useMemo(() => {
-    const { iconKey, statusLabelId: stutusLabelId, color, course, palletColor, speed } = getDeviceStatusByData(deviceData);
+    const { iconKey, statusLabelId, color, course, palletColor, speed } = getDeviceStatusByData(deviceData);
     let label;
     if (withLabel) {
-      label = getLabel(stutusLabelId);
+      label = getLabel(statusLabelId);
     }
     return {
       iconKey,
       label,
       color,
-      filteredCourse: course,
+      course,
       palletColor,
       speed
     };

package/components/Device/icons.d.ts

@@ -0,0 +1,11 @@
+export declare const DEVICE_ICONS: {
+    NO_GPS_SIGNAL: string;
+    OFF: string;
+    MOVING: string;
+    STOPPED: string;
+    STOPPED_RALENTI: string;
+    STOPPED_E_RALENTI: string;
+    TOWING: string;
+    POWER_SAVING: string;
+    MAX_SPEED: string;
+};

package/components/{DeviceStatus → Device}/icons.js

@@ -1,4 +1,4 @@
-const MDS_ICONS = {
+const DEVICE_ICONS = {
   OFF: "i_cmp_device_status_main_off",
   MOVING: "i_cmp_device_status_main_movement",
   STOPPED: "i_cmp_device_status_main_stopped",
@@ -9,5 +9,5 @@ const MDS_ICONS = {
   MAX_SPEED: "i_cmp_device_status_main_max_speed"
 };
 export {
-  MDS_ICONS as M
+  DEVICE_ICONS as D
 };

package/components/Device/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Device';
+export { getDeviceComponentsDictionary } from './dictionary';
+export { getDeviceByData } from './helpers';
+export { getDeviceStatusByData } from './helpers/helperDeviceStatus';
+export { DEVICE_STATUSES_CONFIG } from '../Device/hooks/constants';
+export { useDeviceStatus } from '../Device/hooks/useDeviceStatus';