@pisell/private-materials 6.3.15 → 6.4.1

package/lib/components/ticketBooking/components/bookingDataPanel/bookingList/index.js

@@ -0,0 +1,210 @@
+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/components/ticketBooking/components/bookingDataPanel/bookingList/index.tsx
+var bookingList_exports = {};
+__export(bookingList_exports, {
+  default: () => bookingList_default
+});
+module.exports = __toCommonJS(bookingList_exports);
+var import_materials = require("@pisell/materials");
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_serve = require("../../../serve");
+var import_utils2 = require("./utils");
+var import_constants = require("../constants");
+var import_index = require("./index.less");
+var BookingList = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const { bookingTimeStartBetween, onBookingClick, bookingId } = props;
+    const [bookingList, setBookingList] = (0, import_react.useState)([]);
+    const [search, setSearch] = (0, import_react.useState)("");
+    const [sort, setSort] = (0, import_react.useState)("");
+    const [listSelectType, setListSelectType] = (0, import_react.useState)("all");
+    const [open, setOpen] = (0, import_react.useState)(false);
+    const params = (0, import_react.useMemo)(() => {
+      return {
+        ["with"]: [
+          "order",
+          "order.customer",
+          "contacts",
+          "item",
+          "appointmentForm.formRecord",
+          "holder.formRecord"
+        ],
+        /** 创建时间范围 */
+        booking_time_start_between: bookingTimeStartBetween,
+        child_booking: 1,
+        skip: 1,
+        num: 1e3
+      };
+    }, [bookingTimeStartBetween]);
+    (0, import_react.useEffect)(() => {
+      getBookingList(params);
+    }, [params]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      refresh: () => {
+        getBookingList(params);
+      }
+    }));
+    const showList = (0, import_react.useMemo)(() => {
+      return (0, import_utils2.formatShowList)(bookingList, {
+        search,
+        listSelectType,
+        sort
+      });
+    }, [bookingList, search, listSelectType, sort]);
+    const getBookingList = async (params2) => {
+      const res = await (0, import_serve.getBookingList2)(params2);
+      setBookingList(res.list);
+    };
+    const sortProps = (0, import_react.useMemo)(() => {
+      return {
+        list: [
+          {
+            label: import_utils.locales.getText("pisell2.ticket-booking.start-time"),
+            name: "startDateTime",
+            type: "date",
+            isCustom: false
+          },
+          {
+            label: import_utils.locales.getText("pisell2.ticket-booking.create-time"),
+            name: "created_at",
+            type: "date",
+            isCustom: false
+          },
+          {
+            label: import_utils.locales.getText("pisell2.ticket-booking.customer"),
+            name: "customer",
+            type: "string",
+            isCustom: false
+          },
+          {
+            label: import_utils.locales.getText("pisell2.ticket-booking.total"),
+            name: "total_amount",
+            type: "number",
+            isCustom: false
+          }
+        ],
+        value: sort,
+        onChange: (value) => {
+          setSort(value);
+        }
+      };
+    }, [sort]);
+    const handleBookingClick = (booking) => {
+      if ((0, import_utils2.getBookingType)(booking) === "pisell1") {
+        setOpen(true);
+        return;
+      }
+      onBookingClick(booking);
+    };
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-ticket-booking-list" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-ticket-booking-list-header" }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Input,
+      {
+        size: "large",
+        placeholder: import_utils.locales.getText("pisell2.ticket-booking.search"),
+        value: search,
+        onChange: (e) => setSearch(e.target.value)
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_materials.Sort, { ...sortProps })), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-ticket-booking-list-content" }, /* @__PURE__ */ import_react.default.createElement(
+      BookingListTable,
+      {
+        list: showList,
+        onBookingClick: handleBookingClick,
+        bookingId
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellModal.Information,
+      {
+        title: import_utils.locales.getText("pisell2.ticket-booking.inform"),
+        describe: import_utils.locales.getText("pisell2.ticket-booking.check-management"),
+        okText: import_utils.locales.getText("pisell2.ticket-booking.confirm"),
+        open,
+        okVisible: true,
+        footerDivider: true,
+        closable: true,
+        cancelVisible: false,
+        onOk: () => {
+          setOpen(false);
+        },
+        onCancel: () => {
+          setOpen(false);
+        }
+      }
+    ));
+  }
+);
+var BookingListTable = (0, import_react.memo)(
+  (props) => {
+    const { list, onBookingClick, bookingId } = props;
+    const renderCustomerName = (record) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      const display_name = (((_b = (_a = record == null ? void 0 : record.order) == null ? void 0 : _a.customer) == null ? void 0 : _b.display_name) || "").trim();
+      const nickname = (((_d = (_c = record == null ? void 0 : record.order) == null ? void 0 : _c.customer) == null ? void 0 : _d.nickname) || "").trim();
+      if (!((_e = record == null ? void 0 : record.order) == null ? void 0 : _e.customer) || [0, 1].includes((_g = (_f = record == null ? void 0 : record.order) == null ? void 0 : _f.customer) == null ? void 0 : _g.id)) {
+        return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-ticket-booking-list-customer-walk-in" }, "Walk-In");
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-ticket-booking-list-customer-name" }, display_name || nickname), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-ticket-booking-list-customer-contact" }, (_i = (_h = record == null ? void 0 : record.order) == null ? void 0 : _h.customer) == null ? void 0 : _i.phone), /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-ticket-booking-list-customer-contact" }, (_k = (_j = record == null ? void 0 : record.order) == null ? void 0 : _j.customer) == null ? void 0 : _k.email));
+    };
+    const renderPaymentStatus = (record) => {
+      var _a, _b;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-ticket-booking-list-payment-status",
+          style: {
+            backgroundColor: import_constants.payStatusColorMap[(_a = record.order) == null ? void 0 : _a.payment_status]
+          }
+        },
+        (0, import_constants.getPayStatusMap)()[(_b = record.order) == null ? void 0 : _b.payment_status]
+      );
+    };
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-ticket-booking-list-table" }, !list.length ? /* @__PURE__ */ import_react.default.createElement(import_materials.PisellEmpty, null) : list.map((item) => {
+      var _a, _b;
+      const isActive = bookingId === item.order.id;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: item.id,
+          className: "pisell-ticket-booking-list-table-item",
+          onClick: () => onBookingClick(item),
+          style: {
+            backgroundColor: isActive ? "#fff" : "rgba(255, 255, 255, 0.07)",
+            zIndex: isActive ? 10 : 1,
+            color: isActive ? "#000" : "#fff"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-ticket-booking-list-table-item-left" }, /* @__PURE__ */ import_react.default.createElement("div", null, item.start_time), /* @__PURE__ */ import_react.default.createElement("div", null, renderCustomerName(item))),
+        /* @__PURE__ */ import_react.default.createElement("div", null, renderPaymentStatus(item)),
+        /* @__PURE__ */ import_react.default.createElement("div", null, `${((_a = item == null ? void 0 : item.order) == null ? void 0 : _a.currency_symbol) || "-"}${((_b = item == null ? void 0 : item.order) == null ? void 0 : _b.total_amount) || "0.00"}`)
+      );
+    }));
+  }
+);
+var bookingList_default = BookingList;

package/lib/components/ticketBooking/components/bookingDataPanel/bookingList/index.less

@@ -0,0 +1,69 @@
+.pisell-ticket-booking-list {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .pisell-ticket-booking-list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    gap: 12px;
+    .pisell-ticket-booking-list-scan-btn {
+      flex-shrink: 0;
+      background-color: rgba(255, 255, 255, 0.07);
+      color: var(--Gray-400, #98a2b3);
+      height: 40px;
+      width: 40px;
+    }
+  }
+  .pisell-ticket-booking-list-content {
+    flex: 1;
+    overflow: auto;
+  }
+  .pisell-ticket-booking-list-table {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    .pisell-ticket-booking-list-table-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 8px;
+      border-radius: 8px;
+      background: rgba(255, 255, 255, 0.07);
+      color: rgb(255, 255, 255);
+      position: relative;
+      .pisell-ticket-booking-list-table-item-left {
+        max-width: 265px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        .pisell-ticket-booking-list-customer-walk-in {
+          font-weight: 600;
+        }
+        
+        .pisell-ticket-booking-list-customer-name {
+          font-weight: 600;
+          display: inline-block;
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        
+        .pisell-ticket-booking-list-customer-contact {
+          display: block;
+        }
+      }
+    }
+  }
+  .pisell-ticket-booking-list-payment-status {
+    border-radius: 16px;
+    padding: 4px 10px;
+    white-space: nowrap;
+    display: inline-block;
+    color: #101828;
+  }
+}

package/lib/components/ticketBooking/components/bookingDataPanel/bookingList/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const formatShowList: (list: any[], options: {
+    search: string;
+    listSelectType: string;
+    sort: string;
+}) => any[];
+export declare const getBookingType: (record: any) => "pisell2" | "pisell1";

package/lib/components/ticketBooking/components/bookingDataPanel/bookingList/utils.js

@@ -0,0 +1,105 @@
+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/components/ticketBooking/components/bookingDataPanel/bookingList/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  formatShowList: () => formatShowList,
+  getBookingType: () => getBookingType
+});
+module.exports = __toCommonJS(utils_exports);
+var import_dayjs = __toESM(require("dayjs"));
+var formatShowList = (list, options) => {
+  const { search, listSelectType, sort } = options;
+  let showList = [];
+  list.forEach((item) => {
+    var _a, _b, _c, _d, _e, _f;
+    let searchBol = true;
+    let typeBol = true;
+    if (search) {
+      searchBol = JSON.stringify(item).includes(search);
+    }
+    if (listSelectType) {
+      if (listSelectType === "all") {
+        typeBol = true;
+      } else if (listSelectType === "notStarted") {
+        typeBol = ["new", "confirmed", "arrived"].includes(
+          item.appointment_status
+        );
+      } else if (listSelectType === "started") {
+        typeBol = ["started"].includes(item.appointment_status);
+      } else if (listSelectType === "finished") {
+        typeBol = ["completed"].includes(item.appointment_status);
+      } else if (listSelectType === "canceled") {
+        typeBol = ["cancelled"].includes(item.appointment_status);
+      }
+    }
+    if (searchBol && typeBol) {
+      showList.push({
+        ...item,
+        startDateTime: `${item.start_date} ${item.start_time}`,
+        endDateTime: `${item.end_date} ${item.end_time}`,
+        total_amount: (_a = item == null ? void 0 : item.order) == null ? void 0 : _a.total_amount,
+        customer: ((_d = (_c = (_b = item == null ? void 0 : item.order) == null ? void 0 : _b.customer) == null ? void 0 : _c.display_name) == null ? void 0 : _d.trim()) || (((_f = (_e = item == null ? void 0 : item.order) == null ? void 0 : _e.customer) == null ? void 0 : _f.nickname) || "").trim()
+      });
+    }
+  });
+  if (sort) {
+    const [key, order] = sort.split(":");
+    showList = showList.sort((a, b) => {
+      let valueA, valueB;
+      if (["startDateTime", "created_at"].includes(key)) {
+        valueA = (0, import_dayjs.default)(a[key]);
+        valueB = (0, import_dayjs.default)(b[key]);
+      } else {
+        valueA = a[key];
+        valueB = b[key];
+      }
+      if (order === "asc") {
+        if (valueA < valueB) return -1;
+        if (valueA > valueB) return 1;
+      } else {
+        if (valueA > valueB) return -1;
+        if (valueA < valueB) return 1;
+      }
+      return 0;
+    });
+  }
+  return showList;
+};
+var getBookingType = (record) => {
+  if (record.parent_id > 0 && record.item_type !== "recurring_booking") {
+    return "pisell2";
+  }
+  return "pisell1";
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatShowList,
+  getBookingType
+});

package/lib/components/ticketBooking/components/bookingDataPanel/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const getPayStatusMap: () => {
+    authorized: any;
+    paid: any;
+    partially_paid: any;
+    partially_refunded: any;
+    payment_pending: any;
+    refunded: any;
+    unpaid: any;
+    voided: any;
+    payment_processing: any;
+};
+export declare const payStatusColorMap: {
+    authorized: string;
+    paid: string;
+    partially_paid: string;
+    partially_refunded: string;
+    payment_pending: string;
+    refunded: string;
+    unpaid: string;
+    voided: string;
+    payment_processing: string;
+};

package/lib/components/ticketBooking/components/bookingDataPanel/constants.js

@@ -0,0 +1,57 @@
+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/components/ticketBooking/components/bookingDataPanel/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  getPayStatusMap: () => getPayStatusMap,
+  payStatusColorMap: () => payStatusColorMap
+});
+module.exports = __toCommonJS(constants_exports);
+var import_utils = require("@pisell/utils");
+var getPayStatusMap = () => {
+  return {
+    authorized: import_utils.locales.getText("pisell2.ticket-booking.authorized"),
+    paid: import_utils.locales.getText("pisell2.ticket-booking.paid"),
+    partially_paid: import_utils.locales.getText("pisell2.ticket-booking.partially-paid"),
+    partially_refunded: import_utils.locales.getText(
+      "pisell2.ticket-booking.partially-refunded"
+    ),
+    payment_pending: import_utils.locales.getText("pisell2.ticket-booking.payment-pending"),
+    refunded: import_utils.locales.getText("pisell2.ticket-booking.refunded"),
+    unpaid: import_utils.locales.getText("pisell2.ticket-booking.unpaid"),
+    voided: import_utils.locales.getText("pisell2.ticket-booking.voided"),
+    payment_processing: import_utils.locales.getText("pisell2.ticket-booking.pending")
+  };
+};
+var payStatusColorMap = {
+  authorized: "var(--Gray-200, #EAECF0)",
+  paid: "var(--Success-100, #DCFAE6)",
+  partially_paid: "var(--Moss-100, #E6F4D7)",
+  partially_refunded: "var(--Pink-100, #FCE7F6)",
+  payment_pending: "var(--Warning-100, #FEF0C7)",
+  refunded: "var(--Error-100, #FEE4E2)",
+  unpaid: "var(--Blue-100, #D1E9FF)",
+  voided: "var(--Gray-200, #EAECF0)",
+  payment_processing: "var(--Warning-100, #FEF0C7)"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getPayStatusMap,
+  payStatusColorMap
+});

package/lib/components/ticketBooking/components/bookingDataPanel/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+interface BookingDataPanelProps {
+    currentDate: string;
+    onBookingClick: (booking: any) => void;
+    bookingId?: number;
+}
+declare const BookingDataPanel: React.ForwardRefExoticComponent<BookingDataPanelProps & React.RefAttributes<unknown>>;
+export default BookingDataPanel;

package/lib/components/ticketBooking/components/bookingDataPanel/index.js

@@ -0,0 +1,113 @@
+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/components/ticketBooking/components/bookingDataPanel/index.tsx
+var bookingDataPanel_exports = {};
+__export(bookingDataPanel_exports, {
+  default: () => bookingDataPanel_default
+});
+module.exports = __toCommonJS(bookingDataPanel_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_icons = require("@ant-design/icons");
+var import_bookingDashboard = __toESM(require("./bookingDashboard"));
+var import_bookingList = __toESM(require("./bookingList"));
+var import_useToast = __toESM(require("../../../../hooks/useToast"));
+var import_index = require("./index.less");
+var BookingDataPanel = (0, import_react.forwardRef)((props, ref) => {
+  const { currentDate, onBookingClick, bookingId } = props;
+  const Toast = (0, import_useToast.default)();
+  const bookingListRef = (0, import_react.useRef)(null);
+  const bookingDashboardRef = (0, import_react.useRef)(null);
+  const bookingTimeStartBetween = (0, import_react.useMemo)(() => {
+    return [`${currentDate} 00:00:00`, `${currentDate} 23:59:59`];
+  }, [currentDate]);
+  const items = (0, import_react.useMemo)(() => {
+    return [
+      {
+        label: import_utils.locales.getText("pisell2.ticket-booking.dashboard"),
+        key: "data-board",
+        children: /* @__PURE__ */ import_react.default.createElement(import_bookingDashboard.default, { bookingTimeStartBetween, ref: bookingDashboardRef })
+      },
+      {
+        label: import_utils.locales.getText("pisell2.ticket-booking.booking-list"),
+        key: "booking-list",
+        children: /* @__PURE__ */ import_react.default.createElement(
+          import_bookingList.default,
+          {
+            bookingTimeStartBetween,
+            onBookingClick,
+            bookingId,
+            ref: bookingListRef
+          }
+        )
+      }
+    ];
+  }, [currentDate, bookingId]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    refresh: () => {
+      var _a, _b;
+      (_a = bookingListRef.current) == null ? void 0 : _a.refresh();
+      (_b = bookingDashboardRef.current) == null ? void 0 : _b.refresh();
+    }
+  }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-ticket-booking-data-panel" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-ticket-booking-data-panel-mask",
+      style: { display: bookingId ? "block" : "none" },
+      onClick: () => {
+        onBookingClick({});
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.Tabs,
+    {
+      type: "line",
+      items,
+      tabBarExtraContent: /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pisell-ticket-booking-data-panel-tab-extra",
+          onClick: () => {
+            var _a, _b;
+            (_a = bookingListRef.current) == null ? void 0 : _a.refresh();
+            (_b = Toast == null ? void 0 : Toast.success) == null ? void 0 : _b.call(Toast, import_utils.locales.getText("pisell2.ticket-booking.refresh-success"));
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, null)
+      ),
+      tabBarStyle: {
+        margin: "0 0 0 16px",
+        height: "40px"
+      }
+    }
+  ));
+});
+var bookingDataPanel_default = BookingDataPanel;

package/lib/components/ticketBooking/components/bookingDataPanel/index.less

@@ -0,0 +1,61 @@
+.pisell-ticket-booking-data-panel {
+  position: relative;
+  height: 100%;
+  .pisell-lowcode-tabs-tabpane, .pisell-lowcode-tabs-content{
+    height: 100%;
+  }
+  .pisell-lowcode-tabs {
+    width: 100%;
+    height: 100%;
+  }
+  .pisell-lowcode-tabs-content-holder {
+    overflow: auto;
+  }
+  .pisell-ticket-booking-data-panel-tab-extra {
+    padding: 12px;
+    color: rgb(152, 162, 179);
+    font-size: 20px;
+    cursor: pointer;
+  }
+  .pisell-ticket-booking-data-panel-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 9;
+  }
+  .pisell-lowcode-dropdown-trigger {
+    background: rgba(255, 255, 255, 0.07);
+    color: var(--Gray-400, #98a2b3);
+    border: none;
+    box-shadow: none;
+  }
+  .pisell-lowcode-sort-button-active {
+    background-color: var(--Primary-100, #F4EBFF);
+  }
+  .pisell-lowcode-badge {
+    color: inherit;
+  }
+  .pisell-lowcode-tabs-top>.pisell-lowcode-tabs-nav::before {
+    border-bottom: 1px solid var(--Gray-600, #475467);
+  }
+  
+  .pisell-lowcode-tabs {
+    .pisell-lowcode-tabs-tab {
+      color: #fff;
+      .pisell-lowcode-tab-bar-label {
+        color: inherit !important;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+    .pisell-lowcode-input-lg {
+      background: rgba(255, 255, 255, 0.07);
+      border: none;
+      color: #fff;
+    }
+  }
+}

package/lib/components/ticketBooking/components/bookingDataPanel/pisellFloatingPanel/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface PisellFloatingPanelProps {
+    currentDate: string;
+    onBookingClick: (booking: any) => void;
+    bookingId?: number;
+}
+export interface PisellFloatingPanelRef {
+    open: () => void;
+    close: () => void;
+    refresh: () => void;
+    getIsOpen: () => boolean;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<PisellFloatingPanelProps & React.RefAttributes<PisellFloatingPanelRef>>>;
+export default _default;