@pisell/private-materials 6.3.159 → 6.3.161

package/lib/hooks/useCartProductStockCheck.js

@@ -0,0 +1,97 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useCartProductStockCheck.ts
+var useCartProductStockCheck_exports = {};
+__export(useCartProductStockCheck_exports, {
+  default: () => useCartProductStockCheck_default
+});
+module.exports = __toCommonJS(useCartProductStockCheck_exports);
+var import_react = require("react");
+var import_utils = require("../components/appointmentBooking/utils");
+var useCartProductStockCheck = () => {
+  const filterUnavailableProducts = async (cartProducts, data, callback, appointmentBooking) => {
+    if (!(cartProducts == null ? void 0 : cartProducts.length) || !(data == null ? void 0 : data.length)) return;
+    const unavailableIds = data.map(
+      (item) => item == null ? void 0 : item.product_id
+    );
+    let newCart = (cartProducts == null ? void 0 : cartProducts.filter(
+      (item) => {
+        var _a, _b;
+        return unavailableIds.includes(((_b = (_a = item == null ? void 0 : item._origin) == null ? void 0 : _a.product) == null ? void 0 : _b.product_id) || (item == null ? void 0 : item.id));
+      }
+    )) || [];
+    if (appointmentBooking) {
+      newCart.forEach((item) => {
+        appointmentBooking.deleteCart(item == null ? void 0 : item._id);
+      });
+      newCart = await appointmentBooking.getCart();
+    }
+    callback && callback(newCart);
+    return newCart;
+  };
+  const handleContinue = ({ cartProducts, data, callback, appointmentBooking }) => {
+    filterUnavailableProducts(cartProducts, data, callback, appointmentBooking);
+  };
+  const handleReturn = async ({
+    cartProducts,
+    data,
+    callback,
+    appointmentBooking,
+    setTimes,
+    isSkipClearData = true
+  }) => {
+    await filterUnavailableProducts(cartProducts, data, callback, appointmentBooking);
+    (0, import_utils.handleGoToStep)({
+      appointmentBooking,
+      setTimes,
+      isSkipClearData
+    });
+  };
+  const checkProductStock = (0, import_react.useCallback)(
+    (productStockModalRef, res, cartProducts) => {
+      var _a;
+      if (!(productStockModalRef == null ? void 0 : productStockModalRef.current)) return false;
+      const { unavailable_products } = res || {};
+      if (!(unavailable_products == null ? void 0 : unavailable_products.length) || !(cartProducts == null ? void 0 : cartProducts.length)) return false;
+      let _isAllItemsSoldOut = false;
+      const unavailableIds = unavailable_products.map(
+        (item) => item.product_id
+      );
+      const allUnavailable = cartProducts == null ? void 0 : cartProducts.every(
+        (item) => {
+          var _a2, _b;
+          return unavailableIds.includes(((_b = (_a2 = item == null ? void 0 : item._origin) == null ? void 0 : _a2.product) == null ? void 0 : _b.product_id) || (item == null ? void 0 : item.id));
+        }
+      );
+      _isAllItemsSoldOut = allUnavailable;
+      const needStop = (_a = productStockModalRef.current) == null ? void 0 : _a.open({
+        unavailableProducts: unavailable_products,
+        isAllItemsSoldOut: _isAllItemsSoldOut
+      });
+      return needStop;
+    },
+    []
+  );
+  return {
+    handleContinue,
+    handleReturn,
+    checkProductStock
+  };
+};
+var useCartProductStockCheck_default = useCartProductStockCheck;

package/lib/index.d.ts

@@ -55,6 +55,7 @@ export { default as SaasRegister } from './plus/saasRegister';
 export { default as SaasCreateOrganization } from './plus/saasCreateOrganization';
 export { default as PinModal } from './components/pinModal';
 export { default as PinVerifyModal } from './components/pinVerifyModal';
+export { default as ProductStockCheckModal } from './components/productStockCheckModal';
 export { ChannelAuthSetting, OAuthConfig, SaaSAdminAuth, OrgAdminAuth, CustomerAuth, CustomerOAuthConfig, DeviceAuth, POSOperatorAuth, OnlineShopAuth, SaaSManagermentAuth, } from './components/authentication/admin';
 export type { SaaSAdminAuthProps, OrgAdminAuthProps, DeviceAuthProps, POSOperatorAuthProps, CustomerOAuthConfigProps, } from './components/authentication/admin';
 export { default as ContactInfo } from './plus/contactInfo';

package/lib/index.js

@@ -92,6 +92,7 @@ __export(src_exports, {
   PisellVenueControlPage: () => import_pisellReservation.PisellVenueControlPage,
   ProNumberSelector: () => import_pisellNumberSelector.default,
   ProductExtension: () => import_productExtension.default,
+  ProductStockCheckModal: () => import_productStockCheckModal.default,
   Register2: () => import_Login2.Register2,
   RuleSetting: () => import_ruleSetting.default,
   SKUOptionsSelection: () => import_skuOptionsSelection.default,
@@ -190,6 +191,7 @@ var import_saasRegister = __toESM(require("./plus/saasRegister"));
 var import_saasCreateOrganization = __toESM(require("./plus/saasCreateOrganization"));
 var import_pinModal = __toESM(require("./components/pinModal"));
 var import_pinVerifyModal = __toESM(require("./components/pinVerifyModal"));
+var import_productStockCheckModal = __toESM(require("./components/productStockCheckModal"));
 var import_admin = require("./components/authentication/admin");
 var import_contactInfo = __toESM(require("./plus/contactInfo"));
 var import_contactInfoModal = __toESM(require("./plus/contactInfoModal"));
@@ -286,6 +288,7 @@ import_dayjs.default.extend(import_localeData.default);
   PisellVenueControlPage,
   ProNumberSelector,
   ProductExtension,
+  ProductStockCheckModal,
   Register2,
   RuleSetting,
   SKUOptionsSelection,

package/lib/plus/contactInfoModal/ContactInfoContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './index.less';
 declare const ContactInfoContent: (props: any) => JSX.Element;
 export default ContactInfoContent;

package/lib/plus/orderList/config.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * 获取表格列配置（支持多语言）
  * @param locales - 多语言对象
@@ -8,7 +9,7 @@ export declare const getTableColumns: (locales: any) => ({
     dataIndex: string;
     key: string;
     width: number;
-    render: (value: any, record: any) => JSX.Element | "-";
+    render: (value: any, record: any) => "-" | JSX.Element;
     isShow?: undefined;
 } | {
     title: any;
@@ -37,7 +38,7 @@ export declare const getTableColumns: (locales: any) => ({
     key: string;
     isShow: boolean;
     width: number;
-    render: (value: any) => JSX.Element | "-";
+    render: (value: any) => "-" | JSX.Element;
 })[];
 export declare const getQuickFilterList: (locales: any) => ({
     name: string;

package/lib/plus/pisellReservation/floorRoomCard/views/RoomCardIcons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const IconClock: () => JSX.Element;
 export declare const IconUsers: () => JSX.Element;
 export declare const IconWarn: () => JSX.Element;

package/lib/plus/pisellSalesManagement/components/BookingFormsPreview.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type BookingFormsPreviewProps = {
     value?: any;
     uniqueTables?: any[];

package/lib/plus/pisellSalesManagement/config/booking.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const getBookingStatusMap: () => Record<string, string>;
 export declare const BOOKING_STATUS_COLOR_MAP: Record<string, string>;
 export declare const getBookingPlatformMap: () => Record<string, string>;

package/lib/plus/pisellSalesManagement/hooks/useSalesGridData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface UseSalesGridDataParams {
     perspective: 'monitor' | 'handle';
     extParams?: {

package/lib/plus/saasCreateOrganization/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SCOProps } from './types';
 import './index.less';
 declare const SaasCreateOrganization: (props: SCOProps) => JSX.Element;

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

@@ -38,6 +38,93 @@ var import_materials = require("@pisell/materials");
 var import_icons = require("@ant-design/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_index = require("./index.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 DeviceDetailDrawer = ({
   open,
   record,
@@ -49,7 +136,19 @@ var DeviceDetailDrawer = ({
 }) => {
   var _a;
   const device = record == null ? void 0 : record._raw;
+  const reportData = device == null ? void 0 : device.data;
   const online = (record == null ? void 0 : record.status) === "online";
+  const lastSeen = formatLastSeen(device == null ? void 0 : device.last_seen);
+  const reportGroups = (0, import_react.useMemo)(() => {
+    if (!isPlainObject(reportData)) return [];
+    return REPORT_GROUPS.reduce((list, group) => {
+      const data = reportData[group.key];
+      if (isPlainObject(data)) {
+        list.push({ ...group, data });
+      }
+      return list;
+    }, []);
+  }, [reportData]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Drawer,
     {
@@ -67,25 +166,84 @@ var DeviceDetailDrawer = ({
       },
       bodyStyle: { padding: 0 }
     },
-    record ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__header" }, ((_a = device == null ? void 0 : device.type) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__icon" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: device.type.icon })) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__heading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__name" }, record.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__type" }, record.typeName)), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "text", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null), onClick: onClose })), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__section-title" }, getText("pisell2.saas.device-planning.detail.basic-info")), /* @__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)), /* @__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))), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__section-title" }, getText("pisell2.saas.device-planning.detail.status")), /* @__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_materials.Tag,
+    record ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__root" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__header" }, ((_a = device == null ? void 0 : device.type) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__icon" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: device.type.icon })) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__heading" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__name" }, record.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__type" }, record.typeName)), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "text", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null), onClick: onClose })), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__content" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Card,
       {
-        color: record.link === "linked" ? "green" : "gold",
-        style: { marginRight: 0 }
+        size: "small",
+        title: getText("pisell2.saas.device-planning.detail.basic-info"),
+        className: "device-detail-drawer__card"
       },
-      getText(
-        `pisell2.saas.device-planning.status.${record.link}`
-      ) || record.link
-    )), /* @__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("span", { className: "device-detail-drawer__online-status" }, /* @__PURE__ */ import_react.default.createElement(
-      "span",
+      /* @__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)), /* @__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)))
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Card,
       {
-        className: (0, import_classnames.default)("device-detail-drawer__status-dot", {
-          "is-online": online
-        })
-      }
-    ), getText(
-      `pisell2.saas.device-planning.status.${record.status}`
-    ) || record.status)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__footer" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { danger: true, size: "large", onClick: onDelete }, getText("pisell2.saas.device-planning.detail.delete")), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "primary", size: "large", onClick: onEdit }, getText("pisell2.saas.device-planning.detail.edit")))) : null
+        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_materials.Tag,
+        {
+          color: record.link === "linked" ? "green" : "gold",
+          style: { marginRight: 0 }
+        },
+        getText(
+          `pisell2.saas.device-planning.status.${record.link}`
+        ) || record.link
+      )), /* @__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("span", { className: "device-detail-drawer__online-status" }, /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: (0, import_classnames.default)(
+            "device-detail-drawer__status-dot",
+            {
+              "is-online": online
+            }
+          )
+        }
+      ), getText(
+        `pisell2.saas.device-planning.status.${record.status}`
+      ) || record.status)))
+    ), /* @__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"
+          )
+        }
+      )
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__footer" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { danger: true, size: "large", onClick: onDelete }, getText("pisell2.saas.device-planning.detail.delete")), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "primary", size: "large", onClick: onEdit }, getText("pisell2.saas.device-planning.detail.edit")))) : null
   );
 };
 var DeviceDetailDrawer_default = DeviceDetailDrawer;

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

@@ -61,14 +61,32 @@
   &__content {
     flex: 1;
     min-height: 0;
-    padding: 20px 24px;
+    padding: 20px 10px;
     overflow: auto;
+    background: #f5f6f8;
   }
 
-  &__section-title {
-    margin: 10px 0 12px;
-    font-size: 13px;
-    color: rgba(0, 0, 0, 0.45);
+  &__card {
+    border-radius: 10px;
+
+    & + & {
+      margin-top: 12px;
+    }
+
+    .ant-card-head {
+      min-height: 42px;
+      padding: 0 16px;
+    }
+
+    .ant-card-head-title {
+      padding: 10px 0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .ant-card-body {
+      padding: 16px;
+    }
   }
 
   &__info-list {
@@ -123,6 +141,124 @@
     color: rgba(0, 0, 0, 0.72);
   }
 
+  &__report-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__last-seen {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  &__report-card {
+    border-radius: 8px;
+    background: #fafafa;
+
+    .ant-card-head {
+      min-height: 38px;
+      padding: 0 12px;
+    }
+
+    .ant-card-head-title {
+      padding: 8px 0;
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    .ant-card-body {
+      padding: 12px;
+    }
+  }
+
+  &__report-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__report-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 14px;
+  }
+
+  &__report-label {
+    flex-shrink: 0;
+    color: rgba(0, 0, 0, 0.55);
+  }
+
+  &__report-value,
+  &__json-value {
+    min-width: 0;
+    color: rgba(0, 0, 0, 0.88);
+    text-align: right;
+    word-break: break-word;
+  }
+
+  &__battery-value {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  &__battery-icon {
+    position: relative;
+    box-sizing: border-box;
+    width: 24px;
+    height: 12px;
+    border: 1.5px solid rgba(0, 0, 0, 0.65);
+    border-radius: 3px;
+
+    &::before {
+      position: absolute;
+      top: 2px;
+      right: -4px;
+      width: 2px;
+      height: 6px;
+      border-radius: 0 2px 2px 0;
+      background: rgba(0, 0, 0, 0.65);
+      content: '';
+    }
+
+    &.is-charging {
+      border-color: #16a34a;
+
+      &::before {
+        background: #16a34a;
+      }
+    }
+  }
+
+  &__battery-fill {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    max-width: 17px;
+    height: 5px;
+    border-radius: 1px;
+    background: #16a34a;
+  }
+
+  &__battery-bolt {
+    position: absolute;
+    top: -3px;
+    left: 8px;
+    width: 7px;
+    height: 14px;
+    background: #f59e0b;
+    clip-path: polygon(45% 0, 100% 0, 62% 42%, 100% 42%, 35% 100%, 48% 56%, 0 56%);
+  }
+
+  &__battery-status {
+    color: #16a34a;
+  }
+
   &__online-status {
     display: inline-flex;
     align-items: center;