rearrange code

"use client";
import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
import moment from "moment";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import printJS from "print-js";
import React, { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";
import { AiFillPlusSquare, AiOutlinePrinter } from "react-icons/ai";
import { BiSolidShoppingBag, BiDetail } from "react-icons/bi";
// import { BsFillInfoCircleFill } from "react-icons/bs";
import {
  FaShippingFast,
  FaShareSquare,
  FaUserCircle,
  FaTags,
  FaDownload,
  FaTruckLoading,
  FaWarehouse,
  FaEdit,
} from "react-icons/fa";
import { FcApproval } from "react-icons/fc";
import { GrCreditCard } from "react-icons/gr";
import { IoIosCopy } from "react-icons/io";
import { useSelector } from "react-redux";
import Select, { components } from "react-select";

import PaymentDetails from "./PaymentDetails";

import { CreateOrderAPI } from "../../AddNewOrder/api";
import { CustomersApi } from "../../Customer/api";
import AdminPanelNotes from "../AdminPanelNotes";
import { OrderAPI } from "../api";
import CopyMessage from "../CopyMessage";
import CustomerBehaviorModal from "../CustomerBehaviorModal";
import CustomerBehavior from "../CustomerBehaviour";
import EditOrderDataTableByID from "../DataTable/EditOrderDataTableByID";
import OrderDataTableById from "../DataTable/OrderDataTableByID";
import AddTagModal from "../Modal/AddTagModal";
import PathaoModal from "../Modal/PathaoModal";
import RefundModal from "../Modal/RefundModal";
import ReturnReasonModal from "../Modal/ReturnReasonModal";

import ConfirmDeleteModal from "@/components/Admin/common/ConfirmDeleteModal";
import Header from "@/components/Admin/common/Headers/Header";
import KlassyImage from "@/components/Admin/common/KlassyImage";
import PaymentModal from "@/components/Admin/common/Modal/PaymentModal/PaymentModal";
import SelectCustomSelectStyles from "@/components/Admin/common/SelectCustomStyle";
import { useStaffPermissions } from "@/hooks/useStaffPermissions";
import { handleCopy } from "@/utils/CopyText";
import { prefixImagePath } from "@/utils/imagePathFinder";

const Order_Status = [
  { label: "Order Placed", value: "order_placed" },
  { label: "Order On Hold", value: "order_on_hold" },
  { label: "Confirmed", value: "confirmed" },
  { label: "Processed", value: "processed" },
  { label: "Ready To Pick", value: "order_to_be_picked" },
  { label: "Ready To Pack", value: "order_to_be_packed" },
  { label: "Shipped", value: "shipped" },
  { label: "Delivered", value: "delivered" },
  { label: "Canceled", value: "cancelled" },
  { label: "Returned", value: "returned" },
];

const OptionContainer = (props) => {
  return (
    <components.Option {...props}>
      <div className={`py-1`}>{props.children}</div>
    </components.Option>
  );
};

const ShowOrder = ({ id, singleOrder, district, permissions }) => {
  const [addTagModal, setAddTagModal] = useState(false);
  const [matchedUser, setMatchedUser] = useState({});
  const [returnedModal, setReturnedModal] = useState(false);
  const [pathaoModal, setPathaoModal] = useState(false);
  const [openAddressEdit, setOpenAddressEdit] = useState(false);
  const [openEditProduct, setOpenEditProduct] = useState(false);
  const [openProductAddModal, setOpenProductAddModal] = useState(false);
  const [openDeleteModal, setOpenDeleteModal] = useState(false);
  const [updatedAddress, setUpdatedAddress] = useState(null);
  const [userBehavior, setUserBehavior] = useState(false);
  const [updatedAdditionalInfo, setUpdateAdditionalInfo] = useState(null);
  const [openRefundModal, setOpenRefundModal] = useState(false);
  const [productId, setProductId] = useState(null);
  const [printLoading, setPrintLoading] = useState(false);
  const [downloadLoading, setDownloadLoading] = useState(false);
  /* Payment states */
  const [paymentModal, setPaymentModal] = useState(false);
  const { register, handleSubmit, control, reset } = useForm();

  const queryClient = useQueryClient();
  const OrderContainerRef = useRef(null);

  const { getPermissions } = useStaffPermissions();

  const handleResetClick = (ref) => {
    ref.scrollIntoView({ behavior: "smooth" });
  };

  const { getOrderById } = CreateOrderAPI();
  const { getOfflineLabels } = CustomersApi();
  const {
    updateInfoOnOrder,
    downloadOrder,
    updateProductOnOrder,
    cancelOrder,
    deleteProductOnOrder,
    getFraudDate,
    addPayment,
  } = OrderAPI();

  const PAGINATION = useSelector((state) => state.entities.pagination);
  const query = useSearchParams();

  const params = {
    pages: query.has("pages") ? +query.get("pages") : PAGINATION.pages,
    pageSize: query.has("pageSize")
      ? +query.get("pageSize")
      : PAGINATION.pageSize,
  };

  const [{ data: orderDataById }, { data: allLabels }] = useQueries({
    queries: [
      {
        queryKey: ["single_order", +id],
        queryFn: async () => await getOrderById(id),
        initialData: singleOrder,
      },
      {
        queryKey: ["manage_labels"],
        queryFn: async () => await getOfflineLabels(),
      },
    ],
  });

  const pathaoTranHistory = Object.assign(
    {},
    ...orderDataById?.pathao_invoice_transaction_history
  );
  const [productData, setProductData] = useState([]);

  useEffect(() => {
    const productDataArray = [];

    orderDataById.order_details.map((e) => {
      const finalProductData = {
        id: e.id,
        product: e.products,
        thumbnail_img: e.products.thumbnail_img,
        variation: e?.product_variations,
        name: e.products.name,
        quantity: e.quantity,
        discount: e.unit_discount,
        price: e.unit_price,
        total_price: e.total_price,
        product_id: e.product_id,
        product_variation_id: e.product_variation_id,
      };
      productDataArray.push(finalProductData);
    });

    setProductData(productDataArray);
  }, [orderDataById, openEditProduct]);

  const StatusUpdateMutation = useMutation({
    mutationFn: async (formData) => {
      const data = await updateInfoOnOrder(+id, formData);
      return data;
    },
    onMutate: async (newStatus) => {
      await queryClient.cancelQueries({
        queryKey: ["single_order", +id],
      });

      const previousData = queryClient.getQueryData(["single_order", +id]);

      if (previousData) {
        queryClient.setQueryData(["single_order", +id], (old) => ({
          ...old,
          payment_status: newStatus.payment_status
            ? newStatus.payment_status
            : old.payment_status,
          delivery_status: newStatus.delivery_status
            ? newStatus.delivery_status
            : old.delivery_status,
        }));
      }
      return { previousData };
    },
    onSuccess: (data) => {
      toast.success(data?.message);
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message);
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["single_order", +id],
      });
    },
  });

  const AddressUpdateMutation = useMutation({
    mutationFn: async (formData) => {
      const data = await updateInfoOnOrder(+id, formData);
      return data;
    },
    onMutate: async (newStatus) => {
      await queryClient.cancelQueries({
        queryKey: ["single_order", +id],
      });

      const previousData = queryClient.getQueryData(["single_order", +id]);

      if (previousData) {
        queryClient.setQueryData(["single_order", +id], (old) => ({
          ...old,
          delivery_address: newStatus.delivery_address
            ? newStatus.delivery_address
            : old.delivery_address,
        }));
      }
      return { previousData };
    },
    onSuccess: (data) => {
      toast.success(data?.message);
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message);
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["single_order", +id],
      });
    },
  });
  const OrderUpdateMutation = useMutation({
    mutationFn: async (formData) => {
      const data = await updateProductOnOrder(+id, formData);
      return data;
    },
    onSuccess: (data) => {
      toast.success(data?.message);
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message);
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["single_order", +id],
      });
    },
  });

  const OrderDeleteMutation = useMutation({
    mutationFn: async (formData) => {
      const data = await deleteProductOnOrder(+id, formData);
      return data;
    },
    onSuccess: (data) => {
      toast.success(data?.message);
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message);
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["single_order", +id],
      });
    },
  });

  const CancelOrderMutation = useMutation({
    mutationFn: async () => {
      const data = await cancelOrder(+id);
      return data;
    },
    onSuccess: (data) => {
      toast.success(data?.message);
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message);
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["single_order", +id],
      });
    },
  });

  const onInvoiceDownload = async () => {
    try {
      setDownloadLoading(true);
      const pdfBlob = await downloadOrder(+id);
      const downloadLink = document.createElement("a");
      const fileName = `${orderDataById.order_code}.pdf`;
      downloadLink.href = URL.createObjectURL(pdfBlob);
      downloadLink.download = fileName;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    } catch (error) {
      toast.error("Error downloading invoice:", error);
    } finally {
      setDownloadLoading(false);
    }
  };

  const onInvoicePrint = async () => {
    try {
      setPrintLoading(true);
      const pdfBlob = await downloadOrder(+id);
      const blobURL = URL.createObjectURL(pdfBlob);
      printJS(blobURL);
    } catch (error) {
      toast.error("Error printing invoice:", error);
    } finally {
      setPrintLoading(false);
    }
  };

  const handleModalForTag = (id, type) => {
    setMatchedUser({ userID: id, type: type });
    setAddTagModal(true);
  };

  const handleCloseModalForTag = () => {
    queryClient.invalidateQueries({
      queryKey: ["single_order", +id],
    });
    setAddTagModal(false);
  };

  const handleCloseModalForReturn = () => {
    queryClient.invalidateQueries({
      queryKey: ["single_order", +id],
    });
    setReturnedModal(false);
  };

  // Third party fraud checking
  const FraudCheckMutation = useMutation({
    mutationFn: async (formData) => {
      const data = await getFraudDate(formData);
      return data;
    },
    onSuccess: () => {
      toast.success("Successfully Re-Checked");
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message);
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["single_order", +id],
      });
    },
  });

  // manage all labels
  const labelName = allLabels?.customer_labels?.map((label) => ({
    value: label.name,
    label: label.name,
    icon: label.icon,
    id: label?.id,
  }));

  const disableOption = (option, selected) => {
    if (permissions && permissions.role_type === "ADMIN") {
      if (selected === "cancelled") {
        return true;
      } else {
        if (option.value === selected) {
          return true;
        }
        return false;
      }
    } else {
      if (option.value === selected) {
        return true;
      }
      if (selected == "shipped") {
        if (option.value == "delivered" || option.value == "returned") {
          return false;
        } else {
          true;
        }
      }

      if (selected === "processed_with_courier") {
        if (option.value == "order_on_hold") {
          return false;
        } else {
          true;
        }
      }

      if (selected == "delivered") {
        if (option.value == "returned") {
          return false;
        } else {
          true;
        }
      }
      if (selected == "order_placed" || selected == "order_on_hold") {
        if (
          option.value == "order_on_hold" ||
          option.value == "confirmed" ||
          option.value == "order_placed" ||
          option.value == "cancelled"
        ) {
          return false;
        } else {
          true;
        }
      }

      if (selected == "confirmed") {
        if (
          option.value == "order_on_hold" ||
          option.value == "processed" ||
          option.value == "order_placed" ||
          option.value == "cancelled"
        ) {
          return false;
        } else {
        }
      }

      if (selected == "processed") {
        if (option.value == "order_on_hold") {
          return false;
        } else {
          true;
        }
      }

      return true;
    }
  };

  const handleQtyUpdate = async (type, data) => {
    const filteredData = productData.filter(
      (item) => item.product.id == data.product.id
    );
    const productDataArray = [];

    const excludeProduct = productData.filter(
      (item) => item.product.id !== data.product.id
    );

    filteredData.map((item) => {
      const finalProductData = {
        product_id: item.product.id,
        total_price:
          type == "increase"
            ? item.price * (item.quantity + 1)
            : item.price * (item.quantity - 1),
        unit_price: item.price,
        quantity: 1,
        product_variation_id: null,
        action: type ? type : null,
      };
      productDataArray.push(finalProductData);
    });

    const orderDetailsCalculation = [...excludeProduct, ...productDataArray];

    const sub_total = orderDetailsCalculation.reduce(
      (acc, product) => acc + product.total_price,
      0
    );

    const finalData = {
      sub_total: +sub_total,
      grand_total: +sub_total + orderDataById?.shipping_charge,
      paid_amount: orderDataById?.paid_amount,
      due_amount:
        +sub_total +
        orderDataById?.shipping_charge -
        orderDataById?.paid_amount,
      total_saved: 0,
      order_details: productDataArray,
    };

    await OrderUpdateMutation.mutateAsync(finalData);
  };

  const handleAddProduct = async (type, data) => {
    const excludeProduct = productData.filter(
      (item) => item.product.id !== data.product_id
    );

    const productDataArray = [];

    const finalProductData = {
      product_id: data.product_id,
      total_price: data?.amount,
      unit_price: data.price,
      unit_discount: data.discount,
      quantity: data?.quantity,
      product_variation_id: data?.product_variation_id,
      action: type ? type : null,
      discount_type: "amount",
    };

    productDataArray.push(finalProductData);

    const orderDetailsCalculation = [...excludeProduct, ...productDataArray];

    const sub_total = orderDetailsCalculation.reduce(
      (acc, product) => acc + product.total_price,
      0
    );

    const finalData = {
      sub_total: +sub_total,
      grand_total: +sub_total + orderDataById?.shipping_charge,
      paid_amount: orderDataById?.paid_amount,
      due_amount:
        +sub_total +
        orderDataById?.shipping_charge -
        orderDataById?.paid_amount,
      total_saved: 0,
      order_details: productDataArray,
    };

    await OrderUpdateMutation.mutateAsync(finalData);
  };

  const handleDeleteModal = (deleteID) => {
    setOpenDeleteModal(true);
    setProductId(deleteID);
  };

  const handleDeleteProduct = async () => {
    const updatedData = productData.filter((e) => e.product?.id == productId);

    const excludeProduct = productData.filter(
      (item) => item.product.id !== productId
    );

    const productDataArray = [];

    const finalProductData = {
      product_id: updatedData[0].product.id,
      product_variation_id: updatedData[0]?.product?.product_variation_id,
    };

    productDataArray.push(finalProductData);

    const sub_total = excludeProduct.reduce(
      (acc, product) => acc + product.total_price,
      0
    );
    const finalData = {
      sub_total: +sub_total,
      grand_total: +sub_total + orderDataById?.shipping_charge,
      paid_amount: orderDataById?.paid_amount,
      due_amount:
        +sub_total +
        orderDataById?.shipping_charge -
        orderDataById?.paid_amount,

      order_details: productDataArray,
      order_details_id: updatedData[0].id,
    };

    await OrderDeleteMutation.mutateAsync(finalData);
  };

  // third party fraud check
  const handFraudRecheck = async (data) => {
    const finalData = {
      order_id: +id,
      phone: data[0].phone,
      check_type: "ORDER",
    };
    await FraudCheckMutation.mutateAsync(finalData);
  };

  /*   const handleSave = async () => {
    const productDataArray = [];

    productData.map((item) => {
      const finalProductData = {
        product_id: item.id,
        total_price: item.amount,
        unit_price: item.price,
        quantity: item.quantity,
        product_variation_id: null,
        action: item?.action ? item?.action : null,
      };
      productDataArray.push(finalProductData);
    });

    const filteredData = productDataArray.filter(
      (item) => item.action !== null
    );

    const finalData = {
      order_details: filteredData,
    };

    await OrderUpdateMutation.mutateAsync(finalData);
  }; */

  //   ? order_delivery_type.Express
  // : dto?.delivery_type === 'Super_Express'
  // ? order_delivery_type.Super_Express

  const PaymentSubmitMutation = useMutation({
    mutationFn: async (formData) => {
      const data = await addPayment(id, formData);
      return data;
    },
    onSuccess: () => {
      toast.success("Successfully Added!");
    },
    onError: (err) => {
      toast.error(err?.response?.data?.message);
    },
    /* onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ["single_order", +id],
      });
    }, */
  });

  const paymentModalSubmit = async (data) => {
    console.log(data);
    const paymentData = {
      method: data?.TypeSelect.value,
      payout: orderDataById?.grand_total,
      collected_amount: data?.collectedAmount,
      cod_fee: data?.COD,
      delivery_charge: data?.deliveryCharge,
      additional_charge: data?.additionalCharge,
      transaction_id: data?.transactionID,
    };
    await PaymentSubmitMutation.mutateAsync(paymentData);
  };

  return (
    <div>
      {/*       {openProductAddModal && (
        <ModalForEditProductInOrder
          body={() => (
            <ProductAddSectionInCreateOrder
              productData={productData}
              setProductData={setProductData}
            />
          )}
          title={"Add Product"}
          handleSave={() => null}
          handleClose={() => setOpenProductAddModal(false)}
        />
      )} */}
      {userBehavior && (
        <CustomerBehaviorModal
          setUserBehavior={setUserBehavior}
          customerData={orderDataById?.courier_transaction_security}
          handFraudRecheck={handFraudRecheck}
          isLoading={FraudCheckMutation.isPending}
        />
      )}

      {openDeleteModal && (
        <ConfirmDeleteModal
          handleClose={() => setOpenDeleteModal(false)}
          handleDelete={() => {
            handleDeleteProduct();
            setOpenDeleteModal(false);
          }}
        />
      )}
      {addTagModal && (
        <AddTagModal
          handleCloseModal={handleCloseModalForTag}
          allLabel={allLabels}
          customer={matchedUser}
          customersLabel={labelName}
          params={params}
          orderID={orderDataById?.id}
        />
      )}

      {returnedModal && (
        <ReturnReasonModal
          handleCloseModal={handleCloseModalForReturn}
          allLabel={allLabels}
          orderID={orderDataById?.id}
          returnAmount={orderDataById?.paid_amount}
        />
      )}
      {openRefundModal && (
        <RefundModal
          handleCloseModal={() => setOpenRefundModal(false)}
          orderID={orderDataById?.id}
          paymentData={
            orderDataById.payment_response.length > 0
              ? orderDataById.payment_response[0]
              : null
          }
        />
      )}
      {pathaoModal && district && (
        <PathaoModal
          handleCloseModal={() => setPathaoModal(false)}
          allLabel={allLabels}
          orderData={orderDataById}
          orderID={orderDataById?.id}
          returnAmount={orderDataById?.paid_amount}
          district={district}
        />
      )}
      <Header header={"Sales"} />
      <div className="rounded-sm bg-[#F4F6F9] dark:bg-[#0d0e10]">
        <div className="sm:flex sm:flex-col xs:flex-col md:flex-row lg:flex-row justify-between bg-white dark:bg-[#222529] px-4 md:px-6 py-3  text-black dark:text-gray-300">
          <div className="flex items-center mb-4 md:mb-0 justify-start text[16px] sm:text-[17px] md:text-xl font-semibold ">
            Order {orderDataById?.order_code}
            <div
              onClick={() =>
                handleCopy(CopyMessage(orderDataById), "Payment link copied")
              }
            >
              <IoIosCopy className="ml-3 hover:text-[#E0A800] cursor-pointer" />
            </div>
          </div>
          <div className="md:flex md:items-center xs:ml-0">
            <div className=" md:mr-1 lg:mr-5 xl:mr-7">
              <div className="mb-4 md:mb-0">
                <p
                  htmlFor="paymentStatus"
                  className="mb-1 text-sm md:text-[16px] font-bold"
                >
                  Payment Status
                </p>
                <Select
                  classNamePrefix="select"
                  className="select-container text-center w-full md:w-[130px]"
                  styles={SelectCustomSelectStyles}
                  isSearchable={false}
                  options={[
                    {
                      value: "paid",
                      label: "PAID",
                    },
                    {
                      value: "unpaid",
                      label: "UNPAID",
                    },
                  ]}
                  defaultValue={{
                    label: orderDataById?.payment_status?.toUpperCase(),
                  }}
                  onChange={async (selected) => {
                    await StatusUpdateMutation.mutateAsync({
                      payment_status: selected.value,
                      action: "payment_status",
                    });
                  }}
                />
              </div>
            </div>
            <div className="">
              <div className="mb-4 md:mb-0">
                <p
                  htmlFor="paymentStatus"
                  className="mb-1 text-sm md:text-[16px] font-bold"
                >
                  Delivery Status
                </p>
                <Select
                  classNamePrefix="select"
                  className="disabled:cursor-not-allowed select-container w-full md:w-[180px] text-center"
                  styles={SelectCustomSelectStyles}
                  options={Order_Status}
                  isSearchable={false}
                  defaultValue={{
                    label: orderDataById?.delivery_status
                      ?.replace(/_/g, " ")
                      ?.replace(/\b\w/g, (match) => match.toUpperCase()),
                  }}
                  onChange={async (selected) => {
                    orderDataById?.delivery_status === selected.value
                      ? toast.error(
                          `Change Order Status from ${selected.value?.replace(
                            /_/g,
                            " "
                          )} to Update`
                        )
                      : selected.value === "returned"
                        ? setReturnedModal(true)
                        : selected.value === "cancelled"
                          ? await CancelOrderMutation.mutateAsync()
                          : await StatusUpdateMutation.mutateAsync({
                              delivery_status: selected.value,
                              action: "delivery_status",
                            });
                  }}
                  components={{ Option: OptionContainer }}
                  isOptionDisabled={(option) =>
                    disableOption(option, orderDataById?.delivery_status)
                  }
                />
              </div>
            </div>
          </div>

          {/* other service customer order success rate */}
          {orderDataById?.courier_transaction_security.length > 0 && (
            <CustomerBehavior
              setUserBehavior={setUserBehavior}
              customerData={orderDataById?.courier_transaction_security}
            />
          )}

          <div className="flex flex-col items-center justify-center align-middle">
            <div className="flex justify-between md:ml-4 ml-0 basis-[28%]">
              {downloadLoading ? (
                <div className="flex  items-center justify-center mr-3 sm:mr-2 xs:justify-start select-none text-white text-sm bg-[#626167] cursor-not-allowed dark:bg-[#222529] px-3 py-1 border rounded-md">
                  <span className="loading loading-bars loading-sm"></span>
                  <span className="ml-1.5"> Downloading</span>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center mr-3 sm:mr-2 xs:justify-start">
                  <button
                    type="button"
                    onClick={async () => await onInvoiceDownload()}
                    className="button select-none text-white text-sm bg-black dark:bg-[#222529] px-3 py-1 border rounded-md"
                  >
                    <FaDownload className="inline w-4 h-4 mr-2 text-white" />
                    Download
                  </button>
                </div>
              )}

              {printLoading ? (
                <div className="flex cursor-not-allowed select-none items-center justify-center text-white text-sm bg-[#626167] dark:bg-[#222529] px-3 py-1 border rounded-md">
                  <span className="loading loading-bars loading-sm"></span>
                  <span className="ml-1.5"> Printing</span>
                </div>
              ) : (
                <div
                  onClick={async () => await onInvoicePrint()}
                  className="flex items-center justify-center"
                >
                  <button
                    type="button"
                    className=" button select-none text-white text-sm bg-black dark:bg-[#222529] px-4 py-1 border rounded-md"
                  >
                    <AiOutlinePrinter className="inline w-5 h-5 mr-2 text-white" />
                    Print
                  </button>
                </div>
              )}
            </div>

            {orderDataById?.delivery_status === "confirmed" ||
              (orderDataById?.delivery_status === "processed" && (
                <div
                  type="button"
                  onClick={() => setPathaoModal(true)}
                  className="cursor-pointer flex button text-black dark:test-white text-sm dark:bg-[#222529] px-2 py-1 mt-1  border border-gray-600 rounded-md"
                >
                  <Image
                    src="/images/pathao-icon.png"
                    width={22}
                    height={20}
                    alt="pathao logo"
                  />
                  <span className="pl-1">Entry</span>
                </div>
              ))}
          </div>
        </div>

        <div className="flex-col pt-2 sm:flex md:flex-row">
          <div className="md:basis-[40%] drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)] text-black dark:text-gray-300">
            <div className="block shadow-[1px 1px 4px 0px rgba(0, 0, 0, 0.15)] rounded-md sm:mr-3 sm:mb-2 mt-2 mb-[1.5rem] bg-white dark:bg-[#222529] text-black dark:text-gray-300">
              <div className="justify-between pt-6 pb-4 pl-6 pr-2 border-b md:pr-6 xs:flex border-neutral-200 dark:border-gray-400">
                <div>
                  <FaShippingFast className="inline w-5 h-5 mr-2" />
                  <span className="font-bold">Shipping Details</span>
                </div>

                {openAddressEdit ? (
                  <div className="flex justify-center mt-2 xs:mt-0 bg-red">
                    <button
                      onClick={() => setOpenAddressEdit(false)}
                      className="bg-gray-100 hover:bg-white border-[0.5px] border-gray-400 mr-2 flex justify-center align-middle items-center px-2 sm:px-1 md:px-2 py-[4px] text-[12px] md:text-sm rounded-sm text-black"
                    >
                      Cancel
                    </button>
                    <button
                      onClick={async () => {
                        await AddressUpdateMutation.mutateAsync({
                          delivery_address:
                            updatedAddress ?? orderDataById?.delivery_address,
                          additional_info:
                            updatedAdditionalInfo ??
                            orderDataById?.additional_info,
                          action: "address_status",
                        });
                        setOpenAddressEdit(false);
                      }}
                      className="text-[12px] md:text-sm px-[4px] md:px-[6px] py-[2px] bg-gray-800 dark:bg-black hover:bg-black rounded-sm text-white"
                    >
                      Save Changes
                    </button>
                  </div>
                ) : (
                  <div className="flex items-center justify-center mt-2 align-middle xs:mt-0">
                    <div
                      className="cursor-pointer hover:bg-gray-100  dark:hover:bg-gray-700 border-[0.5px] px-2 border-gray-400 rounded-sm flex justify-center align-middle items-center"
                      onClick={() => setOpenAddressEdit(true)}
                    >
                      Edit
                      <FaEdit className="ml-2" />
                    </div>
                  </div>
                )}
              </div>

              <div className="px-5 py-3 text-sm">
                <div className="flex items-center  text-[13px] mb-2 xs:text-[14px] md:text-[15px] font-semibold">
                  <p className="mr-1 ">Name: </p>
                  <p className="">
                    {" "}
                    {orderDataById?.offline_customer_id
                      ? orderDataById?.offline_customers?.name
                      : orderDataById?.users?.name}
                  </p>
                </div>
                <div className="flex items-center text-[13px] mb-2 xs:text-[14px] md:text-[15px] font-semibold">
                  <p className="mr-2 ">Phone: </p>
                  <p className="">
                    {" "}
                    {orderDataById?.offline_customer_id
                      ? orderDataById?.offline_customers?.phone
                      : orderDataById?.users?.phone}{" "}
                  </p>
                </div>
                <div className="block md:flex items-center text-[13px] mb-2 xs:text-[14px] md:text-[15px]  font-semibold">
                  <p className="mr-2  md:mb-0 mb-[4px]">Address: </p>
                  {openAddressEdit ? (
                    <textarea
                      defaultValue={orderDataById?.delivery_address}
                      onChange={(e) => setUpdatedAddress(e.target.value)}
                      className="h-20 w-full p-3 outline-none border-[1px]  border-gray-400  "
                    />
                  ) : (
                    <p className="">{orderDataById?.delivery_address}</p>
                  )}
                </div>

                {orderDataById?.alternative_phone && (
                  <div className="flex items-center text-[13px] mb-2 xs:text-[14px] md:text-[15px]  font-semibold">
                    <p className="mr-2">Alternative Phone:</p>
                    <p>{orderDataById?.alternative_phone}</p>
                  </div>
                )}

                <div className="flex items-center text-[13px] mb-2 xs:text-[14px] md:text-[15px]  font-semibold">
                  <p
                    className={` ${
                      orderDataById?.delivery_type === "Express" ||
                      orderDataById?.delivery_type === "Super_Express"
                        ? "bg-[#FFFF00] w-fit pl-[2px] dark:text-black text-black  font-bold"
                        : "dark:text-white text-black mr-2"
                    }`}
                  >
                    Delivery Type :
                  </p>
                  <p>
                    {orderDataById?.delivery_type === "Express" ||
                    orderDataById?.delivery_type === "Super_Express" ? (
                      <span className="font-bold dark:text-black text-black bg-[#FFFF00] p-[2px] pl-1">
                        {orderDataById?.delivery_type === "Express" && (
                          <span>Same Day Delivery</span>
                        )}
                        {orderDataById?.delivery_type === "Super_Express" && (
                          <span>Super Express Delivery</span>
                        )}
                        {/* {orderDataById?.delivery_type?.replace(/_/g, " ")} */}
                      </span>
                    ) : (
                      <span>
                        {orderDataById?.delivery_type?.replace(/_/g, " ")}{" "}
                        Delivery
                      </span>
                    )}
                  </p>
                </div>
                {orderDataById?.additional_info ? (
                  <div className="block md:flex items-center text-[13px] mb-2 xs:text-[14px] md:text-[15px] font-semibold">
                    <p className="mr-2 md:mb-0 mb-[4px] ">Delivery Notes: </p>
                    {openAddressEdit ? (
                      <textarea
                        defaultValue={orderDataById?.additional_info}
                        onChange={(e) =>
                          setUpdateAdditionalInfo(e.target.value)
                        }
                        className="h-20 w-full p-3 outline-none border-[1px]  border-gray-400  "
                      />
                    ) : (
                      <p className=" bg-[#FFFF00] w-fit pl-[4px] pr-[2px] py-[4px]  font-bold">
                        {orderDataById?.additional_info}
                      </p>
                    )}
                  </div>
                ) : (
                  openAddressEdit && (
                    <>
                      <div className="block md:flex items-center text-[13px] xs:text-[14px] md:text-[15px] font-semibold">
                        <p className="mr-2 ">Delivery Notes: </p>
                        <textarea
                          defaultValue={orderDataById?.additional_info}
                          onChange={(e) =>
                            setUpdateAdditionalInfo(e.target.value)
                          }
                          className="h-20 w-full p-3 outline-none border-[1px]  border-gray-400  "
                        />
                      </div>
                    </>
                  )
                )}
              </div>
            </div>

            <div
              className="block shadow-[1px 1px 4px 0px rgba(0, 0, 0, 0.15)] rounded-md sm:mr-3 sm:mb-2 pb-2 mt-2 mb-[1.5rem] bg-white dark:bg-[#222529]"
              style={{
                backgroundColor: orderDataById?.offline_customers
                  ? orderDataById?.offline_customers?.customer_lebels?.bg_color
                  : orderDataById?.users?.customer_lebels?.bg_color,
              }}
            >
              <div className="px-6 pt-6 pb-4 border-b border-neutral-200 dark:border-gray-400">
                <FaUserCircle className="inline w-5 h-5 mr-2" />
                <span className="font-bold">Customer Info</span>
              </div>
              <div className="flex flex-row pt-3 pl-5 pr-2 text-sm">
                <div className="basis-[15%] sm:basis-[17%] mr-7 sm:mr-0">
                  <p className="pb-2 text-[14px] xs:text-[15px] md:text-[16px] font-semibold">
                    Name:{" "}
                  </p>
                  {(orderDataById?.offline_customer_id ||
                    orderDataById?.user_id) &&
                  (orderDataById?.offline_customers?.email ||
                    orderDataById?.users?.email) ? (
                    <p className="pb-2 text-[14px] xs:text-[15px] md:text-[16px] font-semibold">
                      Email:{" "}
                    </p>
                  ) : null}

                  <p className="pb-2 text-[14px] xs:text-[15px] md:text-[16px] font-semibold">
                    Phone:{" "}
                  </p>
                </div>
                <div className="basis-[75%] sm:basis-[68%]">
                  <p className="pb-2 text-[14px] xs:text-[15px] md:text-[16px]  font-semibold">
                    {orderDataById?.offline_customer_id
                      ? orderDataById?.offline_customers?.name
                      : orderDataById?.users?.name}
                    <button
                      onClick={() => {
                        orderDataById?.offline_customer_id
                          ? handleModalForTag(
                              orderDataById?.offline_customer_id,
                              "offline"
                            )
                          : handleModalForTag(orderDataById?.user_id, "online");
                      }}
                      className="bg-[#D9D9D9] text-black hidden sm:inline px-1 border rounded-md ml-2 text-[10px]"
                    >
                      <FaTags className="inline " /> Add Tag
                    </button>
                  </p>

                  {orderDataById?.offline_customer_id ? (
                    orderDataById?.offline_customers?.email ? (
                      <p className="pb-2 text-[14px] xs:text-[15px] md:text-[16px]">
                        {orderDataById?.offline_customers?.email}
                      </p>
                    ) : null
                  ) : orderDataById?.users && orderDataById?.users?.email ? (
                    <p className="pb-2 text-[14px] xs:text-[15px] md:text-[16px]">
                      {orderDataById?.users?.email}
                    </p>
                  ) : null}

                  <p className="pb-2 text-[14px] xs:text-[15px] md:text-[16px]">
                    {orderDataById?.offline_customer_id
                      ? orderDataById?.offline_customers?.phone
                      : orderDataById?.users?.phone}
                  </p>
                </div>
                <div className="basis-[10%] sm:basis-[15%] flex flex-col justify-center items-center">
                  {orderDataById?.offline_customer_id ? (
                    <KlassyImage
                      className="w-5 h-5 col-span-1 md:w-7 md:h-7"
                      alt="Klassy Order Image"
                      width="24px"
                      height="24px"
                      src={prefixImagePath(
                        orderDataById?.offline_customers &&
                          orderDataById?.offline_customers?.customer_lebels &&
                          orderDataById?.offline_customers?.customer_lebels
                            ?.icon
                      )}
                    />
                  ) : (
                    <KlassyImage
                      className="w-5 h-5 col-span-1 md:w-7 md:h-7"
                      alt="Klassy Order Image"
                      width="28px"
                      height="28px"
                      src={prefixImagePath(
                        orderDataById?.users &&
                          orderDataById?.users?.customer_lebels &&
                          orderDataById?.users?.customer_lebels?.icon
                      )}
                    />
                  )}
                  <p className="text-center text-black text-[11px] sm:text-[12px] md:text-sm">
                    {orderDataById?.offline_customer_id
                      ? orderDataById.offline_customers.customer_lebels &&
                        orderDataById?.offline_customers?.customer_lebels?.name
                      : orderDataById?.users?.customer_lebels &&
                        orderDataById?.users?.customer_lebels?.name}
                  </p>
                </div>
              </div>

              <div className="flex items-center justify-center w-full align-middle sm:hidden">
                <button
                  onClick={() => {
                    orderDataById?.offline_customer_id
                      ? handleModalForTag(
                          orderDataById?.offline_customer_id,
                          "offline"
                        )
                      : handleModalForTag(orderDataById?.user_id, "online");
                  }}
                  className="bg-[#D9D9D9] text-black sm:hidden block px-1 border rounded-md ml-2 text-[10px]"
                >
                  <FaTags className="inline" /> Add Tag
                </button>
              </div>
            </div>

            {/* {orderDataById?.additional_info && (
              <div className="block shadow-[1px 1px 4px 0px rgba(0, 0, 0, 0.15)] min-h-[100px] rounded-md sm:mr-3 sm:mb-2 mt-2 mb-[1.5rem] bg-white dark:bg-[#222529] text-black dark:text-gray-300">
                <div className="px-6 pt-6 pb-4 border-b border-neutral-200 dark:border-gray-400">
                  <BsFillInfoCircleFill className="inline w-5 h-5 mr-2 text-black " />
                  <span className="font-bold">Delivery Notes</span>
                </div>
                <div className="px-4 py-3 text-[14px] xs:text-[15px] md:text-[16px]">
                  <ul>
                    <li>{orderDataById?.additional_info}</li>
                  </ul>
                </div>
              </div>
            )} */}
          </div>

          <div className="md:basis-[32%]">
            <div className="block drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)] rounded-md sm:mr-3 sm:mb-2 mt-2 mb-[1.5rem] bg-white dark:bg-[#222529] text-black dark:text-gray-300">
              <div className="px-5 pt-6 pb-4 border-b border-neutral-200 dark:border-gray-400">
                <GrCreditCard className="inline w-5 h-5 mr-2" />
                <span className="font-bold ">Payment Details</span>
              </div>
              <div className="px-5 py-3 flex flex-row text-[14px] xs:text-[15px] md:text-[16px]">
                <div className="basis-[53%] ">
                  <p className="pb-4 font-semibold">Payment Method : </p>

                  {orderDataById.payment_method == "bkash" ? (
                    orderDataById?.payment_details !== null ||
                    orderDataById?.payment_response.length > 0 ? (
                      <>
                        <p className="pb-4 font-semibold">TrxID : </p>
                        <p className="pb-4 font-semibold">bKash Number :</p>
                        <p className="pb-4 font-semibold">Payment Time :</p>
                        <p className="pb-4 font-semibold">Payment Date :</p>
                      </>
                    ) : null
                  ) : null}
                </div>
                <div className="basis-[47%] text-[14px] xs:text-[15px] md:text-[16px]">
                  <p className="pb-4 font-semibold">
                    {orderDataById?.payment_method
                      ?.replace(/_/g, " ")
                      ?.replace(/\b\w/g, (match) => match.toUpperCase())}
                  </p>
                  {orderDataById.payment_method == "bkash" ? (
                    orderDataById.payment_response.length == 0 ||
                    orderDataById?.payment_details !== null ? (
                      <>
                        <p className="pb-4">
                          {JSON.parse(orderDataById?.payment_details)?.trxID}
                        </p>
                        <p className="pb-4">
                          {
                            JSON.parse(orderDataById?.payment_details)
                              ?.customerMsisdn
                          }
                        </p>
                        <p className="pb-4">
                          {JSON.parse(
                            orderDataById?.payment_details
                          )?.updateTime.match(/\d{2}:\d{2}:\d{2}/g)}
                        </p>
                        <p>
                          {JSON.parse(
                            orderDataById?.payment_details
                          )?.updateTime.match(/\d{4}-\d{2}-\d{2}/g)}
                        </p>
                      </>
                    ) : (
                      <>
                        <p className="pb-4">
                          {orderDataById?.payment_response[0]?.trxID}
                        </p>
                        <p className="pb-4">
                          {orderDataById?.payment_response[0]?.customerMsisdn}
                        </p>
                        <p className="pb-4">
                          {moment(
                            orderDataById?.payment_response[0].paymentExecuteTime?.replace(
                              ":008",
                              ".008"
                            ),
                            "YYYY-MM-DDTHH:mm:ss.SSS Z"
                          ).format("hh:mm:ss A")}
                        </p>
                        <p>
                          {moment(
                            orderDataById?.payment_response[0].paymentExecuteTime?.replace(
                              ":008",
                              ".008"
                            ),
                            "YYYY-MM-DDTHH:mm:ss.SSS Z"
                          ).format("YYYY-MM-DD")}
                        </p>
                      </>
                    )
                  ) : null}
                </div>
              </div>
              {getPermissions({
                accessKey: "Orders",
                component: (
                  <div className="block w-full pb-5">
                    {orderDataById?.payment_method == "bkash" &&
                    orderDataById.payment_status == "paid" &&
                    orderDataById.refunded == 0 ? (
                      (orderDataById?.payment_details !== null ||
                        orderDataById?.payment_response.length > 0) && (
                        <button
                          onClick={() => setOpenRefundModal(true)}
                          className="py-2 block text-center px-4 w-[70%] m-auto border rounded-md bg-[#C60000]"
                        >
                          <FaShareSquare className="inline w-5 h-5 mr-2 text-white" />
                          <span className="text-white font-bold text-sm sm:text-[15px] text-center">
                            Refund Payment
                          </span>
                        </button>
                      )
                    ) : orderDataById.refunded === 1 ? (
                      <p className="py-2 block text-center px-4 w-[70%] m-auto border rounded-md bg-[#C60000]">
                        <span className="text-white">Refunded</span>
                      </p>
                    ) : null}
                  </div>
                ),
                childAccess: "can_refund",
              })}
            </div>

            <div className="block drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)] rounded-md sm:mr-3 sm:mb-2 mt-2 mb-[1.5rem] bg-white dark:bg-[#222529] text-black dark:text-gray-300">
              <div className="px-5 pt-6 pb-4 border-b border-neutral-200 dark:border-gray-400">
                <BiSolidShoppingBag className="inline w-5 h-5 mr-2" />
                <span className="font-bold">Order Details</span>
                {orderDataById?.is_exchange && (
                  <span className="px-2 py-1 ml-3 text-white bg-blue-400 rounded-md">
                    Exchange
                  </span>
                )}
              </div>
              <div className="grid items-center justify-center grid-cols-2 gap-5 px-5 py-3 align-middle">
                <div className="col-span-1 text-[12px] xs:text-[13px] md:text-[14px]">
                  <p className="pb-2">Order CODE: </p>
                  <p className="pb-2">Order Date: </p>
                  <p className="pb-2">Order Time: </p>
                </div>
                <div className="col-span-1 text-[12px] xs:text-[13px] md:text-[14px]">
                  <p className="pb-2">{orderDataById?.code}</p>
                  <p className="pb-2">
                    {new Date(orderDataById?.created_at).toLocaleDateString(
                      "en-US",
                      { year: "numeric", day: "numeric", month: "short" }
                    )}
                  </p>
                  <p className="pb-2">
                    {new Date(orderDataById?.created_at).toLocaleTimeString(
                      "en-US",
                      {
                        hour12: true,
                        hour: "2-digit",
                        minute: "2-digit",
                        second: "2-digit",
                      }
                    )}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="md:basis-[28%] ">
            <AdminPanelNotes orderDataById={orderDataById} />

            {orderDataById.refunded == 1 &&
              orderDataById?.refund_response.length > 0 && (
                <div className="block drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)] rounded-md  sm:mb-2 mt-2 mb-[1.5rem] bg-white dark:bg-[#222529] text-black dark:text-gray-300">
                  <div className="px-5 pt-6 pb-4 border-b border-neutral-200 dark:border-gray-400">
                    <BiSolidShoppingBag className="inline w-5 h-5 mr-2" />
                    <span className="font-bold">Refund Details</span>
                  </div>
                  <div className="grid items-center justify-center grid-cols-2 gap-5 px-5 py-3 align-middle">
                    <div className="col-span-1 text-[12px] xs:text-[13px] md:text-[14px]">
                      <p className="pb-2">Refund Amount: </p>
                      <p className="pb-2">Refund TrxID: </p>
                      <p className="pb-2">Refund Date: </p>
                      <p className="pb-2">Refund Time: </p>
                    </div>
                    <div className="col-span-1 text-[12px] xs:text-[13px] md:text-[14px]">
                      <p className="pb-2">
                        {orderDataById?.refund_response[0]?.amount} TK
                      </p>
                      <p className="pb-2">
                        {orderDataById?.refund_response[0]?.refundTrxID}
                      </p>
                      <p className="pb-2">
                        {moment(
                          orderDataById?.refund_response[0].completedTime?.replace(
                            ":008",
                            ".008"
                          ),
                          "YYYY-MM-DDTHH:mm:ss.SSS Z"
                        ).format("YYYY-MM-DD")}
                      </p>
                      <p className="pb-2">
                        {moment(
                          orderDataById?.refund_response[0].completedTime?.replace(
                            ":008",
                            ".008"
                          ),
                          "YYYY-MM-DDTHH:mm:ss.SSS Z"
                        ).format("hh:mm:ss A")}
                      </p>
                    </div>
                  </div>
                </div>
              )}
          </div>
        </div>
        <div ref={OrderContainerRef} className=" sm:flex sm:flex-row">
          <div className="block sm:basis-[72%] sm:mr-3 sm:mb-5 mt-2 mb-[1.5rem] drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)] rounded-md">
            <div className="block rounded-md bg-white dark:bg-[#222529]  text-black dark:text-gray-300  sticky top-3">
              <div className="items-center justify-between align-middle border-b md:flex border-neutral-200 dark:border-gray-400">
                <div className="px-6 pt-6 pb-2 md:pb-4">
                  <BiDetail className="inline w-6 h-6 mr-2 " />
                  <span className="font-bold">Order Product Details</span>
                </div>
                {orderDataById.delivery_status !==
                "order_placed" ? null : openEditProduct ? (
                  <div className="flex items-center justify-center mb-3 mr-3 align-middle md:mb-0">
                    <button
                      onClick={() => setOpenProductAddModal(true)}
                      className="bg-black flex justify-center align-middle items-center px-3 py-[6px] text-sm rounded-sm text-white hover:bg-blue-400"
                    >
                      <AiFillPlusSquare className="inline w-6 h-6 mr-3 cursor-pointer " />
                      Add New Product
                    </button>
                  </div>
                ) : (
                  <div className="flex items-center justify-center mt-2 mb-3 mr-0 align-middle md:mb-0 xs:mt-0 md:mr-3">
                    <div
                      className="cursor-pointer hover:bg-gray-100  dark:hover:bg-gray-700 border-[0.5px] px-2 border-gray-400 rounded-sm flex justify-center align-middle items-center"
                      onClick={() => setOpenEditProduct(true)}
                    >
                      Edit
                      <FaEdit className="ml-2" />
                    </div>
                  </div>
                )}
              </div>

              {openEditProduct ? (
                <EditOrderDataTableByID
                  productData={productData}
                  setProductData={setProductData}
                  orderData={orderDataById}
                  addNewProduct={openProductAddModal}
                  handleAddProduct={handleAddProduct}
                  handleClose={() => {
                    setOpenEditProduct(false);
                    setOpenProductAddModal(false);
                    handleResetClick(OrderContainerRef.current);
                  }}
                  handleDeleteProduct={handleDeleteModal}
                  // handleSave={handleSave}
                  handleQtyUpdate={handleQtyUpdate}
                />
              ) : (
                <OrderDataTableById orderData={orderDataById} />
              )}
            </div>
          </div>

          <div className="block basis-[28%] sm:mb-2 mt-2 mb-[1.5rem] rounded-md bg-[#F4F6F9] dark:bg-[#14181d]">
            <div className="block rounded-md mb-3 drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)] bg-white dark:bg-[#222529] text-black dark:text-gray-300 ">
              <div className="px-6 pt-6 pb-4 border-b border-neutral-200 dark:border-gray-400">
                <FaTruckLoading className="inline w-5 h-5 mr-2 " />
                <span className="font-bold">Order Timeline</span>
              </div>
              {orderDataById?.pathao_webhook_response &&
                orderDataById?.pathao_webhook_response?.payload.length > 0 && (
                  <div className="px-4 py-3">
                    <div className="flex justify-center">
                      <Image
                        src="/images/logo_pathao_courier.svg"
                        width={80}
                        height={40}
                        alt="pathao logo"
                      />
                    </div>
                    <ol className="relative border-l border-green-100 dark:border-gray-700">
                      {orderDataById?.pathao_webhook_response.payload
                        .slice()
                        .reverse()
                        .map((item, index) => (
                          <li key={index} className="mt-3 mb-10 ml-4">
                            <div className="absolute w-3 h-3 bg-green-500 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>

                            <p>{item?.order_status}</p>
                            <time className="my-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
                              {moment(item?.updated_at).format(
                                "MMMM Do , YYYY, h:mm:ss a"
                              )}
                            </time>
                          </li>
                        ))}{" "}
                    </ol>
                  </div>
                )}
              <div className="px-4 py-3">
                <ol className="relative border-l border-green-100 dark:border-gray-700">
                  {orderDataById?.order_updates.length > 0 ? (
                    orderDataById?.order_updates.map((item, index) => {
                      return (
                        <li key={index} className="mt-3 mb-10 ml-4">
                          <div className="absolute w-3 h-3 bg-green-500 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
                          <h4>
                            {item.note
                              ?.replace(/_/g, " ")
                              ?.replace(/\b\w/g, (match) =>
                                match.toUpperCase()
                              )}{" "}
                            by {item?.admin?.full_name}
                          </h4>
                          <time className="my-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
                            {moment(item?.created_at).format(
                              "MMMM Do , YYYY, h:mm:ss a"
                            )}
                          </time>
                        </li>
                      );
                    })
                  ) : (
                    <p className="text-sm text-center text-gray-600">
                      No Order Log Found
                    </p>
                  )}
                </ol>
              </div>
            </div>
            <div className="block rounded-md drop-shadow-[2px_2px_2px_rgba(0,0,0,0.15)] mt-6 bg-white dark:bg-[#222529] text-black dark:text-gray-300  ">
              <div className="px-6 pt-6 pb-4 border-b border-neutral-200 dark:border-gray-400">
                <FaWarehouse className="inline w-5 h-5 mr-2 " />
                <span className="font-bold">Warehouse Timeline</span>
              </div>
              <div className="px-4 py-3">
                <div className="relative border-l border-green-100 dark:border-gray-700">
                  {orderDataById?.warehouse_shipping_dispatch_logs.length >
                  0 ? (
                    orderDataById?.warehouse_shipping_dispatch_logs.map(
                      (item, index) => {
                        const types = ["PICKED", "PACKED"];
                        return (
                          <div key={index} className="mt-3 mb-10 ml-4">
                            <div className="absolute w-3 h-3 bg-green-500 rounded-full mt-1.5 -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
                            <h5>
                              <span className="mr-1"> Order</span>
                              <span className="mr-1">
                                {item.types
                                  ?.replace(/_/g, " ")
                                  ?.replace(/\b\w/g, (match) =>
                                    match.toUpperCase()
                                  )}
                              </span>
                              {types.includes(item.types) && (
                                <>
                                  <span className="mr-2 italic">
                                    {`"${item.products[0].name}"`}
                                  </span>
                                  <span className="mr-1 text-center bg-[#D6FFDA] px-[4px] py-[1px] rounded-sm w-fit inline-block">
                                    <FcApproval className="inline mb-1 mr-1" />
                                    <span className="text-[#00820D]">
                                      Verified
                                    </span>
                                  </span>
                                </>
                              )}
                              <span className="mr-1"> by</span>
                              {item?.admin?.full_name}
                            </h5>
                            <time className="my-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
                              {moment(item?.created_at).format(
                                "MMMM Do , YYYY, h:mm:ss a"
                              )}
                            </time>
                          </div>
                        );
                      }
                    )
                  ) : (
                    <p className="text-sm text-center text-gray-600">
                      No Warehouse Log Found{" "}
                    </p>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="w-[71.5%] drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)] rounded-md bg-[#F4F6F9] mb-20 mt-5">
          {/* Add payment section */}
          <PaymentModal
            register={register}
            control={control}
            handleSubmit={handleSubmit}
            paymentModalSubmit={paymentModalSubmit}
            payout={orderDataById?.grand_total}
            reset={reset}
          />
          {orderDataById?.pathao_invoice_transaction_history?.length === 0 ? (
            <div className="flex items-center justify-between p-6 bg-white">
              <div>
                <h5 className="">Payment Data Missing!</h5>
                <p className="text-sm">
                  No payment data found. Please check or add it manually to mark
                  the invoice as paid.
                </p>
              </div>
              <button
                className="px-3 py-1 text-white bg-black rounded"
                onClick={() => my_modal_2.showModal()}
              >
                Add Payment
              </button>
            </div>
          ) : (
            <PaymentDetails data={pathaoTranHistory} />
          )}
        </div>
      </div>
    </div>
  );
};

export default ShowOrder;