@pisell/private-materials 3.4.104 → 3.4.106

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceConnectionsPanel.js

@@ -0,0 +1,235 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceConnectionsPanel.tsx
+var DeviceConnectionsPanel_exports = {};
+__export(DeviceConnectionsPanel_exports, {
+  default: () => DeviceConnectionsPanel_default
+});
+module.exports = __toCommonJS(DeviceConnectionsPanel_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_icons = require("@ant-design/icons");
+var import_constants = require("../../../constants");
+var import_utils = require("../../../utils");
+var import_ConnectExistingDeviceModal = __toESM(require("./ConnectExistingDeviceModal"));
+var import_DeviceConnectionsPanel = require("./DeviceConnectionsPanel.less");
+var DeviceConnectionsPanel = ({
+  activeKind,
+  currentDevice,
+  connections,
+  loading,
+  submitting,
+  deleting,
+  getText,
+  translation,
+  onCreateConnection,
+  onUpdateConnection,
+  onDeleteConnection
+}) => {
+  const [removingConnection, setRemovingConnection] = (0, import_react.useState)();
+  const [connectMode, setConnectMode] = (0, import_react.useState)();
+  const [editingConnection, setEditingConnection] = (0, import_react.useState)();
+  if (activeKind === "integrated") {
+    return null;
+  }
+  const isSmart = activeKind === "smart";
+  const getConnectedDevice = (connection) => (isSmart ? connection.target_device : connection.source_device) || null;
+  const getConnectedDeviceName = (connection) => {
+    if (!connection) return "";
+    const device = getConnectedDevice(connection);
+    return device ? translation(device.name) || String(device.id) : "-";
+  };
+  const title = getText(
+    isSmart ? "pisell2.saas.device-planning.drawer.connections.peripherals" : "pisell2.saas.device-planning.drawer.connections.connected-to"
+  );
+  const emptyText = getText(
+    isSmart ? "pisell2.saas.device-planning.drawer.connections.no-peripherals" : "pisell2.saas.device-planning.drawer.connections.not-connected-smart"
+  );
+  const menuItems = [
+    {
+      key: "connect-existing",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.LinkOutlined, null),
+      label: getText(
+        "pisell2.saas.device-planning.drawer.connections.connect-existing"
+      ),
+      onClick: () => setConnectMode("existing")
+    },
+    {
+      key: "add-new",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null),
+      label: getText(
+        "pisell2.saas.device-planning.drawer.connections.add-new"
+      ),
+      onClick: () => setConnectMode("new")
+    }
+  ];
+  const actionItems = (connection) => [
+    {
+      key: "edit",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.EditOutlined, null),
+      label: getText(
+        "pisell2.saas.device-planning.drawer.connections.edit-configuration"
+      ),
+      onClick: () => setEditingConnection(connection)
+    },
+    {
+      key: "remove",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null),
+      danger: true,
+      label: getText(
+        "pisell2.saas.device-planning.drawer.connections.remove"
+      ),
+      onClick: () => setRemovingConnection(connection)
+    }
+  ];
+  const connectButton = isSmart ? /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Dropdown,
+    {
+      menu: { items: menuItems },
+      trigger: ["click"],
+      placement: "bottomRight"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null) }, getText("pisell2.saas.device-planning.drawer.connections.connect"))
+  ) : /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null), onClick: () => setConnectMode("existing") }, getText("pisell2.saas.device-planning.drawer.connections.connect"));
+  const renderProfileTags = (connection) => (connection.profiles || []).map((profile) => /* @__PURE__ */ import_react.default.createElement("span", { key: profile.id, className: "device-detail-drawer__connection-tag" }, translation(profile.name) || profile.id));
+  const renderConnectionItem = (connection) => {
+    var _a, _b;
+    const device = getConnectedDevice(connection);
+    const connectionType = (0, import_utils.getConnectionTypeLabel)(
+      (_a = connection.config) == null ? void 0 : _a.connection_type
+    );
+    return /* @__PURE__ */ import_react.default.createElement("div", { key: connection.id, className: "device-detail-drawer__connection-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-icon" }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Icon,
+      {
+        type: ((_b = device == null ? void 0 : device.type) == null ? void 0 : _b.icon) || (isSmart ? "PrinterOutlined" : "DesktopOutlined")
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-main" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-name" }, device ? translation(device.name) || device.id : "-"), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-meta" }, /* @__PURE__ */ import_react.default.createElement("span", null, connectionType), renderProfileTags(connection))), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Dropdown,
+      {
+        menu: { items: actionItems(connection) },
+        trigger: ["click"],
+        placement: "bottomRight"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Button,
+        {
+          type: "text",
+          icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, null),
+          className: "device-detail-drawer__connection-more"
+        }
+      )
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections-title" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: isSmart ? "ApiOutlined" : "LinkOutlined" }), /* @__PURE__ */ import_react.default.createElement("span", null, title)), connectButton), /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: loading }, connections.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-list" }, connections.map(renderConnectionItem)) : /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections-empty" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Empty,
+    {
+      image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE,
+      description: emptyText
+    }
+  ))), removingConnection ? /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      open: true,
+      title: getText(
+        "pisell2.saas.device-planning.drawer.connections.remove-title"
+      ),
+      onCancel: () => setRemovingConnection(void 0),
+      okText: getText(
+        "pisell2.saas.device-planning.drawer.connections.remove"
+      ),
+      cancelText: getText(
+        "pisell2.saas.device-planning.drawer.connections.cancel"
+      ),
+      okButtonProps: {
+        block: true,
+        size: "large",
+        danger: true,
+        loading: deleting,
+        onClick: async () => {
+          await onDeleteConnection(removingConnection.id);
+          setRemovingConnection(void 0);
+        }
+      },
+      cancelButtonProps: {
+        block: true,
+        size: "large",
+        type: "default",
+        disabled: deleting,
+        onClick: () => setRemovingConnection(void 0)
+      },
+      width: 460,
+      headerDivider: false
+    },
+    (0, import_constants.formatToken)(
+      getText(
+        "pisell2.saas.device-planning.drawer.connections.remove-confirm"
+      ),
+      { DeviceName: getConnectedDeviceName(removingConnection) }
+    )
+  ) : null, connectMode ? /* @__PURE__ */ import_react.default.createElement(
+    import_ConnectExistingDeviceModal.default,
+    {
+      open: true,
+      mode: connectMode,
+      currentDevice,
+      connectedDeviceIds: connections.map(
+        (connection) => activeKind === "smart" ? connection.target_device_id : connection.source_device_id
+      ),
+      currentWorkAreaId: currentDevice.workarea_id,
+      getText,
+      translation,
+      submitting,
+      onClose: () => setConnectMode(void 0),
+      onSubmit: async (payload) => {
+        await onCreateConnection(payload);
+        setConnectMode(void 0);
+      }
+    }
+  ) : null, editingConnection ? /* @__PURE__ */ import_react.default.createElement(
+    import_ConnectExistingDeviceModal.default,
+    {
+      open: true,
+      mode: "edit",
+      currentDevice,
+      editConnection: editingConnection,
+      connectedDeviceIds: [],
+      currentWorkAreaId: currentDevice.workarea_id,
+      getText,
+      translation,
+      submitting,
+      onClose: () => setEditingConnection(void 0),
+      onUpdate: async (id, payload) => {
+        await onUpdateConnection(id, payload);
+        setEditingConnection(void 0);
+      }
+    }
+  ) : null);
+};
+var DeviceConnectionsPanel_default = DeviceConnectionsPanel;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceConnectionsPanel.less

@@ -0,0 +1,111 @@
+.device-detail-drawer {
+  &__connections {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 100%;
+  }
+
+  &__connections-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__connections-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.72);
+
+    .anticon {
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  &__connections-empty {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-height: 260px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 8px;
+    background: #fafafa;
+  }
+
+  &__connection-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__connection-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    background: #fafafa;
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      border-color: #d9d9d9;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &__connection-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: #1677ff;
+  }
+
+  &__connection-main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__connection-name {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    color: rgba(0, 0, 0, 0.88);
+  }
+
+  &__connection-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: 18px;
+    color: rgba(0, 0, 0, 0.55);
+  }
+
+  &__connection-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 6px;
+    font-size: 11px;
+    line-height: 16px;
+    color: rgba(0, 0, 0, 0.72);
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #fff;
+  }
+
+  &__connection-more {
+    flex: 0 0 auto;
+  }
+}

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceInfoPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DeviceRow } from '../../../types';
+import './DeviceInfoPanel.less';
+declare type GetText = (key: string) => string;
+interface DeviceInfoPanelProps {
+    record: DeviceRow;
+    getText: GetText;
+}
+declare const DeviceInfoPanel: React.FC<DeviceInfoPanelProps>;
+export default DeviceInfoPanel;

package/lib/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceInfoPanel.js

@@ -0,0 +1,218 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceInfoPanel.tsx
+var DeviceInfoPanel_exports = {};
+__export(DeviceInfoPanel_exports, {
+  default: () => DeviceInfoPanel_default
+});
+module.exports = __toCommonJS(DeviceInfoPanel_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_classnames = __toESM(require("classnames"));
+var import_LinkStatusTag = __toESM(require("../../shared/LinkStatusTag"));
+var import_OnlineStatus = __toESM(require("../../shared/OnlineStatus"));
+var import_DeviceInfoPanel = require("./DeviceInfoPanel.less");
+var EMPTY_VALUE = "-";
+var BYTE_PER_GB = 1024 * 1024 * 1024;
+var REPORT_GROUPS = [
+  {
+    key: "software",
+    fields: [{ key: "name" }, { key: "version" }]
+  },
+  {
+    key: "battery",
+    fields: [
+      {
+        key: "level",
+        value: (data, getText) => renderBatteryValue(data, getText)
+      }
+    ]
+  },
+  {
+    key: "network",
+    fields: [
+      { key: "type" },
+      { key: "local_ip" },
+      { key: "gateway" },
+      { key: "subnet_mask" },
+      { key: "ssid" }
+    ]
+  },
+  {
+    key: "hardware",
+    fields: [{ key: "model" }, { key: "os_version" }]
+  },
+  {
+    key: "storage",
+    fields: [
+      { key: "used", value: (data) => formatStorageValue(data.used) },
+      { key: "total", value: (data) => formatStorageValue(data.total) }
+    ]
+  }
+];
+var isPlainObject = (value) => Object.prototype.toString.call(value) === "[object Object]";
+var getReportText = (getText, key) => getText(`pisell2.saas.device-planning.detail.report.${key}`);
+var formatReportValue = (value, getText) => {
+  if (value === null || value === void 0 || value === "") {
+    return EMPTY_VALUE;
+  }
+  if (typeof value === "boolean") {
+    return getText(
+      `pisell2.saas.device-planning.detail.${value ? "yes" : "no"}`
+    );
+  }
+  if (Array.isArray(value) || isPlainObject(value)) {
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__json-value" }, JSON.stringify(value));
+  }
+  return String(value);
+};
+var formatStorageValue = (value) => {
+  const byteValue = typeof value === "number" || typeof value === "string" ? Number(value) : Number.NaN;
+  if (!Number.isFinite(byteValue)) {
+    return EMPTY_VALUE;
+  }
+  const gbValue = byteValue / BYTE_PER_GB;
+  const text = gbValue >= 10 ? String(Math.round(gbValue)) : gbValue.toFixed(2).replace(/\.?0+$/, "");
+  return `${text} GB`;
+};
+var formatLastSeen = (value) => typeof value === "string" && value.trim() ? value : EMPTY_VALUE;
+var renderBatteryValue = (data, getText) => {
+  const rawLevel = typeof data.level === "number" || typeof data.level === "string" ? Number(data.level) : Number.NaN;
+  const hasLevel = Number.isFinite(rawLevel);
+  const levelValue = hasLevel ? Math.max(0, Math.min(rawLevel, 100)) : 0;
+  const level = hasLevel ? `${rawLevel}%` : EMPTY_VALUE;
+  const charging = (data == null ? void 0 : data.charging) === true;
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__battery-value" }, /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: (0, import_classnames.default)("device-detail-drawer__battery-icon", {
+        "is-charging": charging
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "device-detail-drawer__battery-fill",
+        style: { width: `${levelValue}%` }
+      }
+    ),
+    charging ? /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__battery-bolt" }) : null
+  ), /* @__PURE__ */ import_react.default.createElement("span", null, level), /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__battery-status" }, getReportText(getText, charging ? "charging" : "not-charging")));
+};
+var DeviceInfoPanel = ({
+  record,
+  getText
+}) => {
+  const device = record._raw;
+  const showAdvancedInfo = device.type_kind === "smart";
+  const lastSeen = formatLastSeen(device.last_seen);
+  const reportGroups = (0, import_react.useMemo)(() => {
+    if (!isPlainObject(device.data)) return [];
+    return REPORT_GROUPS.reduce((list, group) => {
+      var _a;
+      const data = (_a = device.data) == null ? void 0 : _a[group.key];
+      if (isPlainObject(data)) {
+        list.push({ ...group, data });
+      }
+      return list;
+    }, []);
+  }, [device.data]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Card,
+    {
+      size: "small",
+      title: getText("pisell2.saas.device-planning.detail.basic-info"),
+      className: "device-detail-drawer__card"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.name")), /* @__PURE__ */ import_react.default.createElement("strong", null, record.name)), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.type")), /* @__PURE__ */ import_react.default.createElement("strong", null, record.typeName)), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.model")), /* @__PURE__ */ import_react.default.createElement("strong", null, record.modelName)), showAdvancedInfo ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-two-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.profile")), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__profile-card" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "FileTextOutlined" }), record.profileName)) : null)
+  ), showAdvancedInfo ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Card,
+    {
+      size: "small",
+      title: getText("pisell2.saas.device-planning.detail.status"),
+      className: "device-detail-drawer__card"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.link-status")), /* @__PURE__ */ import_react.default.createElement(
+      import_LinkStatusTag.default,
+      {
+        value: record.link,
+        getText,
+        style: { marginRight: 0 }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ import_react.default.createElement("span", null, getText("pisell2.saas.device-planning.detail.online-status")), /* @__PURE__ */ import_react.default.createElement(
+      import_OnlineStatus.default,
+      {
+        value: record.status,
+        getText,
+        className: "device-detail-drawer__online-status",
+        dotClassName: "device-detail-drawer__status-dot"
+      }
+    )))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Card,
+    {
+      size: "small",
+      title: getText("pisell2.saas.device-planning.detail.report-info"),
+      extra: /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__last-seen" }, getText("pisell2.saas.device-planning.detail.last-seen"), lastSeen),
+      className: "device-detail-drawer__card"
+    },
+    reportGroups.length > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__report-list" }, reportGroups.map((group) => /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Card,
+      {
+        key: group.key,
+        size: "small",
+        type: "inner",
+        title: getReportText(getText, `group.${group.key}`),
+        className: "device-detail-drawer__report-card"
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__report-rows" }, group.fields.map((field) => /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: field.key,
+          className: "device-detail-drawer__report-row"
+        },
+        /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__report-label" }, getReportText(getText, `field.${field.key}`)),
+        /* @__PURE__ */ import_react.default.createElement("span", { className: "device-detail-drawer__report-value" }, field.value ? field.value(group.data, getText) : formatReportValue(
+          group.data[field.key],
+          getText
+        ))
+      )))
+    ))) : /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Empty,
+      {
+        image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE,
+        description: getText(
+          "pisell2.saas.device-planning.detail.no-report-info"
+        )
+      }
+    )
+  )) : null);
+};
+var DeviceInfoPanel_default = DeviceInfoPanel;