I am developing the online web shop and making the page for the user to view their orders.
the following javascript for reader the ui of orders:
const STATUS_ARR = ["待付款", "待出貨", "運送中", "派送中", "已送達", "已收貨"];
  
  // DOM Elements
  const container = document.getElementById("new-order-list-content");
  const searchInput = document.getElementById("new-order-list-search-input");
  const searchResultsDiv = document.getElementById("new-order-list-search-results");

  // 格式化日期 (僅年月日)
  function formatDateOnly(dateStr) {
    if (!dateStr) return "";
    const d = new Date(dateStr.replace(/-/g, "/"));
    if (isNaN(d)) return dateStr;
    return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
  }

  // 格式化完整日期時間(年月日 HH:mm)
  function formatDateTime(dtStr) {
    if (!dtStr) return "";
    const d = new Date(dtStr.replace(/-/g, "/"));
    if (isNaN(d)) return dtStr;
    return (
      `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 ` +
      `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`
    );
  }

  // 格式化價格HKD最多1位小數
  function formatPriceHKD(value) {
    return "HK$" + (Math.round(value * 10) / 10).toFixed(1);
  }

  // 建立產品項目
  function createProductItem(product, sellerInfo, orderInfo) {
    const item = document.createElement("div");
    item.className = "new-order-list-product-item";
    item.setAttribute(
      "aria-label",
      `${product.name}，${product.spec || "無規格"}，數量${product.quantity}，目前狀態：${STATUS_ARR[product.status]}`
    );

    // 產品圖片
    const img = document.createElement("img");
    img.className = "new-order-list-product-image";
    img.src = product.image;
    img.alt = product.name;
    img.loading = "lazy";
    item.appendChild(img);

    // 名稱與規格
    const nameQtyDiv = document.createElement("div");
    nameQtyDiv.className = "new-order-list-product-name-qty";

    const nameSpan = document.createElement("span");
    nameSpan.textContent = product.name;
    nameQtyDiv.appendChild(nameSpan);

    if (product.spec) {
      const specSpan = document.createElement("span");
      specSpan.className = "new-order-list-product-spec";
      specSpan.textContent = product.spec;
      nameQtyDiv.appendChild(specSpan);
    }
    item.appendChild(nameQtyDiv);

    // 數量與價格
    const qtyPriceDiv = document.createElement("div");
    qtyPriceDiv.className = "new-order-list-product-qty-price";

    const qtySpan = document.createElement("span");
    qtySpan.textContent = `${product.quantity} 件`;
    qtyPriceDiv.appendChild(qtySpan);

    const priceSpan = document.createElement("span");
    priceSpan.textContent = `共${formatPriceHKD(product.total_price)}`;
    qtyPriceDiv.appendChild(priceSpan);

    item.appendChild(qtyPriceDiv);

    // 狀態與預計送達時間(右上方)
    const statusWrapper = document.createElement("div");
    statusWrapper.className = "new-order-list-product-status-wrapper";

    const statusLabel = document.createElement("div");
    statusLabel.className = "new-order-list-product-status-label";
    statusLabel.textContent = STATUS_ARR[product.status];
    statusWrapper.appendChild(statusLabel);
    item.appendChild(statusWrapper);

    // 按鈕區
    const btnsDiv = document.createElement("div");
    btnsDiv.className = "new-order-list-product-buttons-wrap";

    if (product.status === 4) {
      const confirmBtn = document.createElement("button");
      confirmBtn.type = "button";
      confirmBtn.className = "new-order-list-btn new-order-list-btn-confirm";
      confirmBtn.textContent = "確定收貨";
      confirmBtn.setAttribute("aria-label", `確定收貨：${product.name}`);
      confirmBtn.addEventListener("click", () => {
        alert(`您已確定收貨：${product.name}`);
        product.status = 5;
        product.confirmed = true;
        renderCurrentList();
      });
      btnsDiv.appendChild(confirmBtn);
    }

    if (product.status === 5) {
      const reviewBtn = document.createElement("button");
      reviewBtn.type = "button";
      reviewBtn.className = "new-order-list-btn new-order-list-btn-review";
      reviewBtn.textContent = "寫評價";
      reviewBtn.setAttribute("aria-label", `寫評價：${product.name}`);
      reviewBtn.addEventListener("click", () => {
        alert(`跳轉寫評價頁面：${product.name}`);
      });
      btnsDiv.appendChild(reviewBtn);
    }

    // 查看詳情
    const detailBtn = document.createElement("button");
    detailBtn.type = "button";
    detailBtn.className = "new-order-list-btn new-order-list-btn-detail";
    detailBtn.textContent = "查看詳情";
    detailBtn.setAttribute("aria-label", `查看詳情：${product.name}`);
    detailBtn.addEventListener("click", () => openPopup(product, sellerInfo, orderInfo));
    btnsDiv.appendChild(detailBtn);

    if (product.status === 3 && product.eta) {
      const etaSpan = document.createElement("div");
      etaSpan.className = "new-order-list-product-eta";
      etaSpan.textContent = `預計於${formatDateTime(product.eta)}送達`;
      item.appendChild(etaSpan);
    }

    item.appendChild(btnsDiv);

    return item;
  }

  // 根據日期->訂單->商家->產品分組資料
  function groupOrders(data) {
    const result = {};
    data.forEach(({ seller_id, seller_name, seller_icon, orders }) => {
      orders.forEach(order => {
        const dateKey = order.purchase_date.split(" ")[0];
        if (!result[dateKey]) result[dateKey] = {};
        if (!result[dateKey][order.order_number]) {
          result[dateKey][order.order_number] = {
            purchase_date: order.purchase_date,
            order_number: order.order_number,
            payment_method: order.payment_method,
            payment_voucher: order.payment_voucher,
            payment_date: order.payment_date,
            sellers: {}
          };
        }
        const orderGroup = result[dateKey][order.order_number];
        if (!orderGroup.sellers[seller_id]) {
          orderGroup.sellers[seller_id] = {
            seller_id,
            seller_name,
            seller_icon,
            products: []
          };
        }
        orderGroup.sellers[seller_id].products.push(...order.products);
      });
    });
    return result;
  }

  // 渲染分組資料
  function renderGroupedOrders(groupedData) {
    container.innerHTML = "";
    const dateKeys = Object.keys(groupedData).sort((a, b) => new Date(b) - new Date(a));
    dateKeys.forEach(dateKey => {
      const dateGroupDiv = document.createElement("div");
      dateGroupDiv.className = "new-order-list-date-group";

      const dateTitle = document.createElement("div");
      dateTitle.className = "new-order-list-date-title";
      dateTitle.textContent = formatDateOnly(dateKey);
      dateGroupDiv.appendChild(dateTitle);

      const ordersInDate = groupedData[dateKey];
      const orderNumbers = Object.keys(ordersInDate).sort((a, b) => a.localeCompare(b));

      orderNumbers.forEach(orderNumber => {
        const orderData = ordersInDate[orderNumber];
        const orderDiv = document.createElement("div");
        orderDiv.className = "new-order-list-order-group";
        orderDiv.style.marginBottom = "24px";

        const orderHeader = document.createElement("div");
        orderHeader.style.marginBottom = "8px";
        orderHeader.innerHTML = `<strong>訂單編號：</strong>${orderData.order_number} &nbsp;&nbsp; <strong>購買時間：</strong>${formatDateTime(orderData.purchase_date)} &nbsp;&nbsp; <strong>付款狀況：</strong>${orderData.payment_date ? '已付款' : '未付款'}`;
        //orderDiv.appendChild(orderHeader);

        const sellers = orderData.sellers;
        const sellerIds = Object.keys(sellers).sort((a, b) => sellers[a].seller_name.localeCompare(sellers[b].seller_name));

        sellerIds.forEach(sellerId => {
          const sellerData = sellers[sellerId];
          const sellerGroup = document.createElement("div");
          sellerGroup.className = "new-order-list-seller-subgroup";

          const sellerHeader = document.createElement("div");
          sellerHeader.className = "new-order-list-seller-header";

          const sellerIcon = document.createElement("img");
          sellerIcon.className = "new-order-list-seller-icon";
          sellerIcon.src = sellerData.seller_icon;
          sellerIcon.alt = sellerData.seller_name + " 商店圖示";
          sellerHeader.appendChild(sellerIcon);

          const sellerNameEl = document.createElement("h3");
          sellerNameEl.className = "new-order-list-seller-name";
          sellerNameEl.textContent = sellerData.seller_name;
          sellerHeader.appendChild(sellerNameEl);

          sellerGroup.appendChild(sellerHeader);

          const productListDiv = document.createElement("div");
          productListDiv.className = "new-order-list-product-list";

          sellerData.products.forEach(product => {
            productListDiv.appendChild(createProductItem(product, sellerData, orderData));
          });

          sellerGroup.appendChild(productListDiv);
          orderDiv.appendChild(sellerGroup);
        });

        dateGroupDiv.appendChild(orderDiv);
      });

      container.appendChild(dateGroupDiv);
    });
  }

  // 搜尋用展平資料
  function flattenAllSearchItems(data) {
    const items = [];
    for (const seller of data) {
      items.push({
        type: "seller",
        id: seller.seller_id,
        name: seller.seller_name,
        ref: seller,
      });
      for (const order of seller.orders) {
        for (const product of order.products) {
          items.push({
            type: "product",
            id: product.id,
            name: product.name,
            ref: product,
            sellerName: seller.seller_name,
          });
        }
      }
    }
    return items;
  }
  const allSearchItems = flattenAllSearchItems(orderData);

  // 搜尋函式
  function searchItems(keyword, limit = 20) {
    if (!keyword) return [];
    keyword = keyword.trim().toLowerCase();
    if (!keyword) return [];
    const results = [];
    for (let i = 0; i < allSearchItems.length && results.length < limit; i++) {
      const item = allSearchItems[i];
      const t1 = item.name.toLowerCase();
      const t2 = item.sellerName ? item.sellerName.toLowerCase() : "";
      if (t1.includes(keyword) || t2.includes(keyword)) results.push(item);
    }
    return results;
  }

  // 根據關鍵字過濾原始訂單資料，返回分組好的結果
  function filterOrderDataByKeyword(keyword) {
    if (!keyword) return groupOrders(orderData);

    const k = keyword.trim().toLowerCase();
    if (!k) return groupOrders(orderData);

    const filtered = [];

    orderData.forEach(seller => {
      const newSeller = {
        seller_id: seller.seller_id,
        seller_name: seller.seller_name,
        seller_icon: seller.seller_icon,
        orders: [],
      };

      seller.orders.forEach(order => {
        const filteredProducts = order.products.filter(p => {
          const prodName = p.name.toLowerCase();
          const sellerName = seller.seller_name.toLowerCase();
          return prodName.includes(k) || sellerName.includes(k);
        });
        if (filteredProducts.length > 0) {
          newSeller.orders.push({
            ...order,
            products: filteredProducts
          });
        }
      });

      if (newSeller.orders.length > 0) {
        filtered.push(newSeller);
      }
    });

    return groupOrders(filtered);
  }

  // 創建搜尋結果DOM元素
  function createSearchResultItem(item) {
    const div = document.createElement("div");
    div.className = "new-order-list-search-item";
    div.tabIndex = 0;
    div.setAttribute("role", "button");
    div.setAttribute("aria-label", `${item.type === "seller" ? "商家" : "產品"}：${item.name}`);

    const nameSpan = document.createElement("span");
    nameSpan.textContent = item.name;
    div.appendChild(nameSpan);

    const typeBadge = document.createElement("span");
    typeBadge.className = "new-order-list-search-type";
    typeBadge.textContent = item.type === "seller" ? "商家" : "產品";
    div.appendChild(typeBadge);

    div.addEventListener("click", () => {
      onSelectSearchItem(item);
    });
    return div;
  }

  function clearSearchResults() {
    searchResultsDiv.innerHTML = "";
  }

  function renderSearchResults(items) {
    clearSearchResults();
    items.forEach(item => {
      searchResultsDiv.appendChild(createSearchResultItem(item));
    });
  }

  function onSelectSearchItem(item) {
    searchInput.value = item.name;
    clearSearchResults();
    const filteredGrouped = filterOrderDataByKeyword(item.name);
    renderGroupedOrders(filteredGrouped);
  }

  // 搜尋框監聽
  searchInput.addEventListener("input", e => {
    const val = e.target.value.trim();

    if (!val) {
      clearSearchResults();
      renderGroupedOrders(groupOrders(orderData));
      return;
    }
    const results = searchItems(val);
    renderSearchResults(results);
  });

  // 點擊外部消除搜尋結果
  document.addEventListener("click", e => {
    if (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {
      clearSearchResults();
    }
  });

  // openPopup函式

  function openPopup(product, sellerInfo, orderInfo) {
    console.log(orderInfo);
    const backdrop = document.createElement("div");
    backdrop.className = "new-order-list-popup-backdrop";
    backdrop.setAttribute("role", "dialog");
    backdrop.setAttribute("aria-modal", "true");
    backdrop.setAttribute("aria-label", `產品${product.name} 詳細資訊`);
    backdrop.tabIndex = -1;
  
    const popup = document.createElement("div");
    popup.className = "new-order-list-popup-container";
  
    // 頂部訂單資訊（保留前面商店Logo/名稱代替原本位置）
    const topInfo = document.createElement("div");
    topInfo.className = "new-order-list-popup-top-info";
  
    function appendTopInfo(label, value) {
      const div = document.createElement("div");
      const lbl = document.createElement("label");
      lbl.textContent = label;
      const val = document.createElement("div");
      val.className = "value";
      val.textContent = value || "-";
      div.appendChild(lbl);
      div.appendChild(val);
      topInfo.appendChild(div);
    }
    appendTopInfo("訂單編號", orderInfo.order_number);
    let totalOrderPrice = 0;
    Object.entries(orderInfo.sellers).forEach(([k,v]) => {
      v.products.forEach((p) => (totalOrderPrice += p.total_price));
    });
    appendTopInfo("訂單總額", formatPriceHKD(totalOrderPrice));
    appendTopInfo("付款方式", orderInfo.payment_method);
    appendTopInfo("付款憑證編號", orderInfo.payment_voucher);
    appendTopInfo("付款成功日期", formatDateTime(orderInfo.payment_date));
    popup.appendChild(topInfo);
  
    const paid = !!orderInfo.payment_date;
  
    if (!paid) {
      const payBtn = document.createElement("button");
      payBtn.type = "button";
      payBtn.className = "new-order-list-btn new-order-list-btn-confirm new-order-list-popup-btn-pay";
      payBtn.textContent = "前往付款";
      payBtn.setAttribute("aria-label","前往付款");
      payBtn.addEventListener("click", () => alert("導向付款頁面（示範）"));
      topInfo.appendChild(payBtn);

      const closeBtn = document.createElement("button");
      closeBtn.className = "new-order-list-popup-close-btn";
      closeBtn.type = "button";
      closeBtn.textContent = "關閉";
      closeBtn.setAttribute("aria-label", "關閉詳情視窗");
      closeBtn.addEventListener("click", ()=>document.body.removeChild(backdrop));
      popup.appendChild(closeBtn);

      backdrop.appendChild(popup);
      document.body.appendChild(backdrop);
      backdrop.focus();

      backdrop.addEventListener("click", e=>{
        if(e.target === backdrop) document.body.removeChild(backdrop);
      });
      document.addEventListener("keydown", function escHandler(event){
        if(event.key === "Escape"){
          if(document.body.contains(backdrop)){
            document.body.removeChild(backdrop);
            document.removeEventListener("keydown", escHandler);
          }
        }
      });
      return;
    }
  
    // 付款，顯示狀態圓點與文字 (無連線條，置中)
    const statusCol = document.createElement("div");
    statusCol.className = "new-order-list-popup-status-col";
  
    const statusList = document.createElement("div");
    statusList.className = "new-order-list-popup-status-list";
    statusList.style.justifyContent = "center"; // 置中
  
    STATUS_ARR.forEach((statusName, idx) => {
      const node = document.createElement("div");
      node.className = "new-order-list-popup-status-node";
  
      const circle = document.createElement("div");
      circle.className = "new-order-list-popup-status-circle";
      if (idx < product.status)
        circle.classList.add("new-order-list-popup-status-circle--past");
      else if (idx === product.status)
        circle.classList.add("new-order-list-popup-status-circle--current");
      else circle.classList.add("new-order-list-popup-status-circle--future");
      node.appendChild(circle);
  
      const label = document.createElement("div");
      label.className = "new-order-list-popup-status-label";
      if (idx < product.status) {
        label.classList.add("new-order-list-popup-status-text-past");
        label.style.fontWeight = "700";
      } else if (idx === product.status) {
        label.classList.add("new-order-list-popup-status-text-current");
        label.style.fontWeight = "700";
      } else {
        label.classList.add("new-order-list-popup-status-text-black");
        label.style.fontWeight = "400";
      }
      label.textContent = statusName;
      node.appendChild(label);
  
      statusList.appendChild(node);
    });
  
    statusCol.appendChild(statusList);
    popup.appendChild(statusCol);
  
    // 狀態詳情可收合區塊控件
    const statusDetailToggle = document.createElement("button");
    statusDetailToggle.className = "new-order-list-status-details-toggle";
    statusDetailToggle.type = "button";
    statusDetailToggle.textContent = "顯示狀態詳情 ▼";
    
  
    const statusDetailsWrap = document.createElement("div");
    statusDetailsWrap.className = "new-order-list-status-details-wrap";
    popup.appendChild(statusDetailsWrap);
    popup.appendChild(statusDetailToggle);
  
    // 狀態詳情資料（根據狀態時間及特殊需求製作陣列）
    const detailItems = [];
  
    for (let idx = 0; idx < STATUS_ARR.length; idx++) {
      const statusTime = product.status_times ? product.status_times[idx] : null;
      if (!statusTime && idx > product.status) continue; // 未發生狀態跳過
      // 組合文字
      let timeText = "";
      if (statusTime) {
        timeText = formatDateTime(statusTime);
      }
      // 特殊狀態文字補充
      let extraText = "";
      if (idx === 3 && statusTime) {
        // 派送中
        if(product.eta) extraText = `預計於${product.eta}送達`;
      } else if (idx === 4 && statusTime) {
        // 已送達
        extraText = `已於${timeText}送達`;
        timeText = ""; // dont重複時間展示
      } else if (idx === 5 && statusTime) {
        // 已確定收貨
        extraText = `已於${timeText}確認收貨`;
        timeText = "";
      }
  
      let detailText = (extraText ? extraText + "<br>" : "") + "更新於" + statusTime;
  
      detailItems.push({
        statusName: STATUS_ARR[idx],
        detailText: detailText.trim(),
        sortTime: statusTime ? new Date(statusTime.replace(/-/g,"/")) : new Date("1970/01/01"),
      });
    }
  
    // 依狀態更新時間由新到舊排序
    detailItems.sort((a, b) => b.sortTime - a.sortTime);
  
    // 插入狀態詳情行
    detailItems.forEach((item) => {
      const detailRow = document.createElement("div");
      detailRow.className = "new-order-list-status-detail-item";
  
      const nameDiv = document.createElement("div");
      nameDiv.className = "new-order-list-status-detail-name";
      nameDiv.textContent = item.statusName;
  
      const timeDiv = document.createElement("div");
      timeDiv.className = "new-order-list-status-detail-time";
      timeDiv.innerHTML = item.detailText;
  
      detailRow.appendChild(nameDiv);
      detailRow.appendChild(timeDiv);
  
      statusDetailsWrap.appendChild(detailRow);
    });
  
    // 狀態詳情可收合功能事件綁定
    statusDetailToggle.addEventListener("click", () => {
      const isOpen = statusDetailsWrap.classList.toggle("open");
      statusDetailToggle.textContent = isOpen ? "隱藏狀態詳情 ▲" : "顯示狀態詳情 ▼";
    });
  
    // 修改產品詳情裡商店Logo與名稱位置
    // 移到產品圖片及名稱上方，構造如下：
    const detailsCol = document.createElement("div");
    detailsCol.className = "new-order-list-popup-details";
  
    // 商店標題放置的容器
    const storeBanner = document.createElement("div");
    storeBanner.className = "new-order-list-popup-detail-seller";
  
    const sellerIcon = document.createElement("img");
    sellerIcon.src = sellerInfo.seller_icon || "";
    sellerIcon.alt = sellerInfo.seller_name + " 商店圖示";
    storeBanner.appendChild(sellerIcon);
  
    const sellerNameLabel = document.createElement("div");
    sellerNameLabel.className = "new-order-list-popup-detail-seller-name";
    sellerNameLabel.textContent = sellerInfo.seller_name;
    storeBanner.appendChild(sellerNameLabel);
  
    detailsCol.appendChild(storeBanner);
  
    // 產品部分 (之前的detailProductDiv) 加到detailsCol
    const detailProductDiv = document.createElement("div");
    detailProductDiv.className = "new-order-list-popup-detail-product";
  
    const productImg = document.createElement("img");
    productImg.src = product.image;
    productImg.alt = product.name;
    productImg.loading = "lazy";
    detailProductDiv.appendChild(productImg);
  
    const productInfoDiv = document.createElement("div");
    productInfoDiv.className = "new-order-list-popup-detail-info";
  
    const productName = document.createElement("div");
    productName.className = "new-order-list-popup-detail-name";
    productName.textContent = product.name;
    productInfoDiv.appendChild(productName);
  
    if (product.spec) {
      const productSpec = document.createElement("div");
      productSpec.className = "new-order-list-popup-detail-spec";
      productSpec.textContent = product.spec;
      productInfoDiv.appendChild(productSpec);
    }
  
    const qtyPrice = document.createElement("div");
    qtyPrice.className = "new-order-list-popup-detail-qtyprice";
    qtyPrice.textContent = `${product.quantity} 件|共${formatPriceHKD(product.total_price)}`;
    productInfoDiv.appendChild(qtyPrice);
  
    detailProductDiv.appendChild(productInfoDiv);
    detailsCol.appendChild(detailProductDiv);

    // 同訂單其他產品 (可折疊)
    /*
    const others = orderInfo.products.filter((p) => p.id !== product.id);
    if (others.length > 0) {
      const otherWrap = document.createElement("div");
      otherWrap.className = "new-order-list-other-products";

      const toggleBtn = document.createElement("button");
      toggleBtn.className = "new-order-list-other-products-toggle";
      toggleBtn.type = "button";
      toggleBtn.textContent = `同訂單其他產品 (${others.length}) ▼`;
      otherWrap.appendChild(toggleBtn);

      const otherContent = document.createElement("div");
      otherContent.className = "new-order-list-other-products-content";
      otherWrap.appendChild(otherContent);

      others.forEach((p) => {
        const prodItem = document.createElement("div");
        prodItem.className = "new-order-list-other-product-item";

        const img = document.createElement("img");
        img.className = "new-order-list-other-product-image";
        img.src = p.image;
        img.alt = p.name;
        img.loading = "lazy";
        prodItem.appendChild(img);

        const nameDiv = document.createElement("div");
        nameDiv.className = "new-order-list-other-product-name";
        nameDiv.textContent = p.name;
        prodItem.appendChild(nameDiv);

        const qtyDiv = document.createElement("div");
        qtyDiv.className = "new-order-list-other-product-qty";
        qtyDiv.textContent = `×${p.quantity}`;
        prodItem.appendChild(qtyDiv);

        const totalDiv = document.createElement("div");
        totalDiv.className = "new-order-list-other-product-total";
        totalDiv.textContent = formatPriceHKD(p.total_price);
        prodItem.appendChild(totalDiv);

        otherContent.appendChild(prodItem);
      });

      toggleBtn.addEventListener("click", () => {
        const isOpen = otherContent.classList.toggle("open");
        toggleBtn.textContent = isOpen
          ? `同訂單其他產品 (${others.length}) ▲`
          : `同訂單其他產品 (${others.length}) ▼`;
      });
      detailsCol.appendChild(otherWrap);
    }
    */

    const closeBtn = document.createElement("button");
    closeBtn.className = "new-order-list-popup-close-btn";
    closeBtn.type = "button";
    closeBtn.textContent = "關閉";
    closeBtn.setAttribute("aria-label", "關閉詳情視窗");
    closeBtn.addEventListener("click", () => document.body.removeChild(backdrop));
    detailsCol.appendChild(closeBtn);

    if (popup.querySelector(".new-order-list-popup-details")) {
      popup.querySelector(".new-order-list-popup-details").remove();
    }
    popup.appendChild(detailsCol);
    backdrop.appendChild(popup);
    document.body.appendChild(backdrop);
    backdrop.focus();

    backdrop.addEventListener("click", (e) => {
      if (e.target === backdrop) document.body.removeChild(backdrop);
    });

    document.addEventListener(
      "keydown",
      function escHandler(event) {
        if (event.key === "Escape") {
          if (document.body.contains(backdrop)) {
            document.body.removeChild(backdrop);
            document.removeEventListener("keydown", escHandler);
          }
        }
      }
    );
  }


  // 初始化渲染
  function renderCurrentList() {
    renderGroupedOrders(groupOrders(orderData));
  }

  renderCurrentList();

And the data will be used in the render process like the following:
let orderData = [
    {
      seller_id: "seller_001",
      seller_name: "商店A",
      seller_icon: "https://picsum.photos/100",
      orders: [
        {
          purchase_date: "2025-06-19 10:00",
          order_number: "ORD20250619001",
          payment_method: "信用卡",
          payment_voucher: "VOUCHER0001",
          payment_date: "2025-06-19 10:30",
          products: [
            {
              id: "p_101",
              name: "商店A產品",
              spec: "紅色 / L碼",
              total_price: 350.5,
              quantity: 1,
              image: "https://picsum.photos/100",
              status: 4,
              eta: null,
              confirmed: false,
              status_times: {
                0: "2025-06-18 08:57",
                1: "2025-06-18 09:00",
                2: "2025-06-18 11:00",
                3: "2025-06-20 13:00",
                4: "2025-06-21 15:00",
                5: null,
              },
            },
            {
              id: "p_103",
              name: "商店B產品",
              spec: "白色 / M碼",
              total_price: 521.5,
              quantity: 1,
              image: "https://picsum.photos/100",
              status: 4,
              eta: null,
              confirmed: true,
              status_times: {
                0: "2025-06-18 08:57",
                1: "2025-06-18 09:00",
                2: "2025-06-18 11:00",
                3: "2025-06-20 13:00",
                4: "2025-06-21 15:00",
                5: null,
              },
            },
          ],
        },
        {
          purchase_date: "2025-06-17 09:00",
          order_number: "ORD20250617001",
          payment_method: "ATM轉帳",
          payment_voucher: "VOUCHER0002",
          payment_date: "2025-06-17 09:30",
          products: [
            {
              id: "p_102",
              name: "商店C產品",
              spec: "藍色 / XL碼",
              total_price: 999.9,
              quantity: 2,
              image: "https://picsum.photos/100",
              status: 2,
              eta: "2025-06-22 14:00",
              confirmed: false,
              status_times: {
                0: "2025-06-17 09:00",
                1: "2025-06-18 11:00",
                2: "2025-06-19 08:30",
                3: null,
                4: null,
              },
            },
          ],
        },
      ],
    },
    {
      seller_id: "seller_002",
      seller_name: "商店B",
      seller_icon: "https://picsum.photos/100",
      orders: [
        {
          purchase_date: "2025-06-17 08:00",
          order_number: "ORD20250617002",
          payment_method: "信用卡",
          payment_voucher: "VOUCHER0003",
          payment_date: "2025-06-17 08:15",
          products: [
            {
              id: "p_201",
              name: "商店B產品",
              spec: "綠色 / M碼",
              total_price: 150.5,
              quantity: 3,
              image: "https://picsum.photos/100",
              status: 3,
              eta: "2025-06-20 16:00",
              confirmed: false,
              status_times: {
                0: "2025-06-17 08:00",
                1: "2025-06-17 09:00",
                2: "2025-06-18 10:00",
                3: "2025-06-19 16:00",
                4: null,
                5: null,
              },
            },
          ],
        },
      ],
    },
    {
      seller_id: "seller_003",
      seller_name: "網上商店",
      seller_icon: "https://picsum.photos/100",
      orders: [
        {
          purchase_date: "2025-06-17 08:00",
          order_number: "ORD20250617002",
          payment_method: "信用卡",
          payment_voucher: "VOUCHER0003",
          payment_date: "2025-06-17 08:15",
          products: [
            {
              id: "p_201",
              name: "網上商店C產品",
              spec: "綠色 / M碼",
              total_price: 200.0,
              quantity: 3,
              image: "https://picsum.photos/100",
              status: 3,
              eta: "2025-06-20 16:00",
              confirmed: false,
              status_times: {
                0: "2025-06-17 08:00",
                1: "2025-06-18 09:00",
                2: "2025-06-19 10:00",
                3: "2025-06-21 16:00",
                4: null,
                5: null,
              },
            },
          ],
        },
        {
          purchase_date: "2025-06-17 08:00",
          order_number: "ORD20250617003",
          payment_method: null,
          payment_voucher: null,
          payment_date: null,
          products: [
            {
              id: "p_204",
              name: "網上商店產品",
              spec: "綠色 / M碼",
              total_price: 150.5,
              quantity: 3,
              image: "https://picsum.photos/100",
              status: 0,
              eta: null,
              confirmed: false,
              status_times: {
                0: "2025-06-17 08:00",
                1: null,
                2: null,
                3: null,
                4: null,
                5: null,
              },
            },
          ],
        },
      ],
    },
  ];

Now I want to update the above script that can handle the data with the updated structure like following:
{
    "2": {
        "seller_id": "2",
        "seller_name": "網上商店",
        "seller_icon": "uploads/seller/YYMART_Square_Black.webp",
        "orders": {
            "34": {
                "purchase_date": "2025-07-09 10:30:25",
                "order_number": null,
                "payment_method": "AliPayHK",
                "payment_voucher": "2025070922001311301431781214",
                "payment_date": null,
                "products": [
                    {
                        "id": "63",
                        "name": "內部測試產品",
                        "spec": "",
                        "total_price": 0.1,
                        "quantity": 1,
                        "image": "uploads/media/2025/temp_product.png",
                        "status": 1,
                        "eta": null,
                        "confirmed": false,
                        "status_times": [
                            "2025-07-08 15:15:22",
                            "2025-07-08 18:15:22",
                            "2025-07-08 20:15:22",
                            null,
                            null,
                            null
                        ]
                    }
                ]
            },
            "35": {
                "purchase_date": "2025-07-09 11:24:40",
                "order_number": null,
                "payment_method": "AliPayHK",
                "payment_voucher": "2025070922001311301432778325",
                "payment_date": null,
                "products": [
                    {
                        "id": "64",
                        "name": "內部測試產品",
                        "spec": "",
                        "total_price": 0.2,
                        "quantity": 2,
                        "image": "uploads/media/2025/temp_product.png",
                        "status": 0,
                        "eta": null,
                        "confirmed": false,
                        "status_times": [
                            null,
                            null,
                            null,
                            null,
                            null,
                            null
                        ]
                    }
                ]
            }
        }
    }
}

Can you help to update the functions to handle with new data structure?