sme-pos-package 1.0.7 → 1.0.9

package/src/components/order-management/order-detail/information.tsx

@@ -0,0 +1,96 @@
+import StarIcon from "@assets/icons/star-icon";
+import useGetPointReward from "@hooks/order/use-get-point-reward";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { CartItemType } from "@store/states/cart.state";
+import { formatCurrency } from "@utils/functions";
+import { useMemo } from "react";
+import { OrderLineItem } from "./order-line";
+
+type TProps = {
+  orderDetailData: any;
+  cartItemsArr: CartItemType[];
+};
+
+const OrderDetailInformation = ({ orderDetailData, cartItemsArr }: TProps) => {
+  const orderState = useMemo(() => {
+    return orderDetailData?.state;
+  }, [orderDetailData]);
+
+  const amountTotal = useMemo(() => {
+    return orderDetailData?.amount_total;
+  }, [orderDetailData]);
+
+  const { pointReward } = useGetPointReward({
+    totalAmountWithoutTax: amountTotal,
+  });
+  const { taxAmount, totalAmount } = useOrderDetail();
+
+  return (
+    <div className="border-r border-stroke-disabled flex h-full flex-col overflow-auto w-full">
+      <div className="flex flex-col gap-4 flex-1 p-6 overflow-auto">
+        {cartItemsArr.length > 0 ? (
+          cartItemsArr?.map((item: CartItemType) => {
+            return <OrderLineItem item={item} key={item.lineId?.toString()} />;
+          })
+        ) : (
+          <div className="size-full flex items-center justify-center flex-col gap-3">
+            <img
+              src="/assets/images/empty-cart.svg"
+              alt=""
+              className="w-[280px] h-[168px] object-cover"
+            />
+
+            <p className="text-sm font-medium leading-5 tracking-[-0.12px] text-text-primary">
+              Đơn hàng không có sản phẩm nào
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-stroke-soft-200 relative">
+        {(orderState === "paid" || orderState === "invoiced") && (
+          <img
+            src="/assets/images/payment-success-label.png"
+            alt=""
+            draggable="false"
+            className="w-[157px] h-[134px] object-contain absolute bottom-[10px] left-[110px]"
+          />
+        )}
+
+        <div className="flex flex-col w-full">
+          <div className="flex w-full border-b h-[52px]">
+            <div className="border-r flex-[0.7] flex items-center justify-end">
+              <p className="text-sm font-medium leading-[18px] text-secondary tracking-[-0.3px] px-[10px]">
+                Điểm
+              </p>
+            </div>
+
+            <div className="flex-[0.3] flex items-center justify-end">
+              <div className="flex items-center gap-1 px-[10px]">
+                <StarIcon />
+                <p className="font-semibold leading-5 text-text-primary tracking-[-0.26px]">
+                  {pointReward}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex w-full border-b h-[52px]">
+            <div className="border-r flex-[0.7] flex items-center justify-end">
+              <p className="text-sm font-medium leading-[18px] text-secondary tracking-[-0.3px] px-[10px]">
+                Thành tiền (đã bao gồm VAT)
+              </p>
+            </div>
+            <div className="flex-[0.3] flex items-center justify-end">
+              <p className="font-semibold leading-5 text-primary px-[10px]">
+                {formatCurrency(taxAmount + totalAmount) || 0}đ
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderDetailInformation;

package/src/components/order-management/order-detail/order-detail.tsx

@@ -0,0 +1,84 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useKitchen } from "@provider/pos-provider/kitchen-provider";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { CartItemType, useCartStore } from "@store/states/cart.state";
+import { arraysEqual } from "@utils/functions";
+import { useMemo } from "react";
+import { OrderDetailInformation, OrderDetailSummary } from ".";
+import Header from "./header";
+
+const OrderDetail = () => {
+  const { displayDataQueryResult } = useKitchen();
+
+  const { items, customer } = useOrderDetail();
+  const customerName = customer?.name;
+  const { orderDetailById, onGetCurrentUser } = useOrder();
+  const { cartItems } = useCartStore();
+  const { getQuery, removeParam, updateMultipleQuery } = useQueryParams();
+
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+
+  const orderedLine = useMemo(() => {
+    const orders = displayDataQueryResult?.data?.orders
+      ?.filter((item: any) => item?.pos_order_id === Number(orderId))
+      ?.map((item: any) => item.orderlines)
+      ?.flat()
+      ?.reduce((acc: any, item: any) => {
+        if (!acc[item.product_id]) {
+          acc[item.product_id] = { ...item };
+        } else {
+          acc[item.product_id].product_quantity += item.product_quantity;
+          acc[item.product_id].product_cancelled += item.product_cancelled;
+        }
+        return acc;
+      }, {});
+    return orders;
+  }, [displayDataQueryResult, orderId]);
+  const cartItemsArr = useMemo(() => {
+    const items = Object.values(cartItems);
+    return items?.map((item: CartItemType) => {
+      const orderLine = orderedLine?.[item.product.id];
+      return {
+        ...item,
+        ordered:
+          orderLine?.product_id == item.product.id &&
+          orderLine.product_quantity - orderLine.product_cancelled ==
+            item.qty &&
+          arraysEqual(
+            orderLine?.attribute_ids ?? [],
+            item?.product?.attributeValueIds ?? []
+          ),
+        orderedNumber:
+          (orderLine?.product_quantity ?? 0) -
+          (orderLine?.product_cancelled ?? 0),
+      };
+    });
+  }, [cartItems, orderedLine]);
+  return (
+    orderDetailById && (
+      <div className="bg-white size-full flex flex-col h-screen">
+        <div className="w-full border-b border-stroke-disabled">
+          <Header orderDetailData={orderDetailById} />
+        </div>
+
+        <div className="flex items-start justify-center flex-1 overflow-y-auto w-full">
+          <OrderDetailInformation
+            cartItemsArr={cartItemsArr}
+            orderDetailData={orderDetailById}
+          />
+
+          <OrderDetailSummary
+            orderDetailData={orderDetailById}
+            customerName={customerName}
+            orderLinesData={items}
+            onGetCurrentUser={onGetCurrentUser}
+          />
+        </div>
+      </div>
+    )
+  );
+};
+
+export default OrderDetail;

package/src/components/order-management/order-detail/order-line.tsx

@@ -0,0 +1,56 @@
+import { CartItemType } from "@store/states/cart.state";
+import { formatCurrency } from "@utils/functions";
+import { useMemo } from "react";
+
+export const OrderLineItem = ({ item }: { item: CartItemType }) => {
+  const attributeValue = useMemo(() => {
+    const pickAttributeValue = item?.product?.pickAttributeValue;
+    return pickAttributeValue?.filter((item) => item.value_string?.length > 0);
+  }, [item?.product?.pickAttributeValue]);
+
+  return (
+    <div
+      key={item.lineId?.toString()}
+      className="flex items-start justify-between gap-2"
+    >
+      <div className="flex items-start gap-4">
+        <img
+          src={item.product.image_128}
+          alt="product image"
+          className="w-20 h-20 object-cover rounded-lg border-[0.5px] border-stroke-disabled"
+        />
+
+        <div className="flex flex-col gap-[10px] justify-start">
+          <p className="font-medium leading-6 text-text-primary tracking-[-0.24px]">
+            {item.product.name}
+          </p>
+
+          {attributeValue &&
+            attributeValue?.length > 0 &&
+            attributeValue.map((item: any) => (
+              <p className="text-xs pt-2 flex gap-1 items-center">
+                <span className="text-tertiary font-semibold">
+                  {item?.name}:{" "}
+                </span>
+                <span className="font-medium">
+                  {item?.value_string
+                    ?.map((item: any) => item?.name)
+                    .join(", ")}
+                </span>
+              </p>
+            ))}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-[10px]">
+        <p className="text-lg font-semibold leading-[26px] text-primary">
+          {formatCurrency(item.product.lst_price)}đ
+        </p>
+
+        <p className="text-sm text-end font-medium leading-[18px] text-text-primary">
+          x{item.qty}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/components/order-management/order-detail/summary.tsx

@@ -0,0 +1,221 @@
+import ButtonAction from "@components/common/button-action";
+import { ORDER_STATE } from "@constants/order-state";
+import { QUERY_KEYS } from "@constants/query.constant";
+import POSPath from "@constants/routes.constants";
+import useGetBillInformation from "@hooks/bill/use-get-bill-information";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { usePosAppProvider } from "@provider/app-provider";
+import { useOrderDetail } from "@provider/pos-provider/order-detail-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { usePaymentStore } from "@store/states/payment.state";
+import { OrderDetailItemType } from "@type/index";
+import { add7Hours, onFindTable } from "@utils/functions";
+import moment from "moment";
+import { useEffect, useMemo, useState } from "react";
+import { createSearchParams, useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+type TProps = {
+  orderDetailData: any;
+  customerName: string;
+  orderLinesData: OrderDetailItemType[];
+  onGetCurrentUser: ({ userId }: { userId: number }) => Promise<any>;
+};
+
+const commonKeys = [
+  QUERY_KEYS.POS_ID,
+  QUERY_KEYS.SESSION_ID,
+  QUERY_KEYS.ORDER_ID,
+  QUERY_KEYS.TABLE_ID,
+  QUERY_KEYS.FLOOR,
+];
+
+const OrderDetailSummary = ({
+  orderDetailData,
+  customerName,
+  orderLinesData,
+  onGetCurrentUser,
+}: TProps) => {
+  const [cashierName, setCashierName] = useState<string>("");
+
+  const navigate = useNavigate();
+  const { formatQuery } = useQueryParams();
+  const { company, userProfile } = usePosAppProvider();
+  const { onCreateEInvoice, isEInvoiceCreating } = useOrderDetail();
+  const { setShowPayment } = usePaymentStore();
+  const { getData, isModePosRestaurant } = useSale();
+
+  const { brandLogo, addressFormat, paymentMethod, amountTotalWithoutTax } =
+    useGetBillInformation();
+
+  const isOrderCanPrint = useMemo(() => {
+    return ![ORDER_STATE.NEW].includes(orderDetailData?.state);
+  }, [orderDetailData]);
+
+  const isInPaidOrder = useMemo(() => {
+    return orderDetailData?.state === ORDER_STATE.IN_PAID;
+  }, [orderDetailData]);
+
+  const isOrderCanExportEInvoice = useMemo(() => {
+    return orderDetailData?.state === ORDER_STATE.PAID;
+  }, [orderDetailData]);
+
+  const floors = getData(LoadDataModel.RESTAURANT_FLOOR);
+  const tables = getData(LoadDataModel.RESTAURANT_TABLE);
+
+  const onAddDish = () => {
+    navigate({
+      pathname: POSPath.MENUS,
+      search: formatQuery(commonKeys).toString(),
+    });
+  };
+
+  const handlePrintBillByText = async () => {
+    return toast.info("Tính năng không hỗ trợ trên website");
+  };
+
+  const onPayment = () => {
+    const tableMatched = tables?.find(
+      (table: any) => table.id === orderDetailData?.table_id
+    );
+    const floorMatched = floors?.find(
+      (floor: any) => floor.id === tableMatched?.floor_id
+    );
+    setShowPayment(true);
+    navigate({
+      pathname: POSPath.MENUS,
+      search: `${formatQuery([
+        QUERY_KEYS.POS_ID,
+        QUERY_KEYS.SESSION_ID,
+      ])}&${createSearchParams({
+        [QUERY_KEYS.ORDER_ID]: orderDetailData?.id.toString(),
+        [QUERY_KEYS.TABLE_ID]: tableMatched.id.toString(),
+        [QUERY_KEYS.FLOOR]: floorMatched.id.toString(),
+      })}`,
+    });
+  };
+
+  useEffect(() => {
+    if (!orderDetailData) return;
+
+    const onFindCustomer = async () => {
+      const cashierName = await onGetCurrentUser({
+        userId: orderDetailData?.user_id,
+      });
+
+      setCashierName(cashierName);
+    };
+
+    onFindCustomer();
+  }, [orderDetailData?.user_id]);
+
+  return (
+    <div className="min-w-[35%] w-[35%] p-6 flex flex-col gap-4 size-full">
+      <p className="font-semibold leading-6 text-text-primary tracking-[-0.24px]">
+        Chi tiết đơn hàng
+      </p>
+
+      <div className="flex flex-col gap-1 flex-1">
+        {[
+          {
+            label: "Mã đơn hàng",
+            value: orderDetailData?.pos_reference,
+          },
+          {
+            label: "Số đơn hàng",
+            value: orderDetailData?.id,
+          },
+          {
+            label: "Mã tra cứu HĐĐT",
+            value: orderDetailData?.e_invoice_search_code,
+          },
+          {
+            label: "Bàn",
+            value: isModePosRestaurant
+              ? onFindTable({
+                  order: orderDetailData,
+                  tables,
+                  floors,
+                })
+              : undefined,
+          },
+          {
+            label: "Thời gian tạo",
+            value: moment(add7Hours(orderDetailData?.date_order)).format(
+              "DD/MM/YYYY HH:mm:ss"
+            ),
+          },
+          {
+            label: "Khách hàng",
+            value: customerName,
+          },
+          {
+            label: "Phương thức thanh toán",
+            value: paymentMethod || "Chưa xác định",
+          },
+          {
+            label: "Nhân viên",
+            value: cashierName,
+          },
+        ]
+          .filter((item) => item.value)
+          .map((item, index) => (
+            <div
+              key={index}
+              className={`flex items-center justify-between rounded-lg px-2 py-[10px] ${
+                index % 2 !== 0 ? "bg-neutral-100-96" : "bg-white"
+              }`}
+            >
+              <p className="text-sm flex-1 font-medium leading-5 tracking-[-0.12px]">
+                {item.label}
+              </p>
+
+              <p className="text-sm flex-1 text-end font-semibold text-text-primary leading-5 tracking-[-0.12px]">
+                {item.value}
+              </p>
+            </div>
+          ))}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {orderDetailData?.state === ORDER_STATE.NEW && (
+          <ButtonAction onClick={onAddDish} className="button-primary">
+            Thêm món
+          </ButtonAction>
+        )}
+
+        {isOrderCanPrint && (
+          <button
+            style={{
+              boxShadow: "0 1px 2px 0 rgba(228, 229, 231, 0.24)",
+            }}
+            onClick={handlePrintBillByText}
+            className="rounded-lg border border-stroke-disabled bg-white px-3 py-[6px] h-12"
+          >
+            <span className="text-sm font-semibold leading-5 tracking-[-0.12px] text-text-primary">
+              {isInPaidOrder ? "In phiếu tạm tính" : "In đơn hàng"}
+            </span>
+          </button>
+        )}
+
+        {isOrderCanExportEInvoice && (
+          <ButtonAction
+            onClick={onCreateEInvoice}
+            disabled={isEInvoiceCreating}
+            className="button-primary"
+          >
+            Xuất hoá đơn
+          </ButtonAction>
+        )}
+
+        {orderDetailData?.state === ORDER_STATE.IN_PAID && (
+          <ButtonAction onClick={onPayment} className="button-primary">
+            Thanh toán
+          </ButtonAction>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OrderDetailSummary;

package/src/components/order-management/order-header.tsx

@@ -0,0 +1,113 @@
+import { IcSearch } from "@assets/icons/breadcrumbs-icon";
+import { IcCheckFill } from "@assets/icons/common";
+import { ButtonIcon } from "@components/common/button-icon";
+import DropdownSelector from "@components/common/dropdown";
+import RefreshButton from "@components/common/refresh-button";
+import { TabsLayout } from "@components/common/tabs-layout";
+import Search from "@components/pos-management/search";
+import { ORDER_STATE } from "@constants/order-state";
+import { useState } from "react";
+import { OrderTab } from ".";
+
+type TProps = {
+  onRefreshOrder: () => void;
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  onStatusChange: (value: ORDER_STATE) => void;
+  selectedStatus: string;
+  activeTab: string;
+  onActiveTabChange: (tab: string) => void;
+};
+
+const statusOptions: { key: ORDER_STATE; label: string }[] = [
+  { key: ORDER_STATE.ALL, label: "Tất cả" },
+  { key: ORDER_STATE.NEW, label: "Mới" },
+  { key: ORDER_STATE.CANCEL, label: "Đã huỷ" },
+  { key: ORDER_STATE.PAID, label: "Đã thanh toán" },
+  { key: ORDER_STATE.IN_PAID, label: "Đang thanh toán" },
+  { key: ORDER_STATE.INVOICED, label: "Đã xuất hóa đơn" },
+];
+const OrderHeader = ({
+  onRefreshOrder,
+  searchValue,
+  setSearchValue,
+  onStatusChange,
+  activeTab,
+  onActiveTabChange,
+  selectedStatus,
+}: TProps) => {
+  const currentStatus = statusOptions.find((s) => s.key === selectedStatus)!;
+  const [isSearchMode, setIsSearchMode] = useState(false);
+
+  return (
+    <div className="sticky top-0 z-[9999] items-center flex justify-between gap-3">
+      {isSearchMode ? (
+        <Search
+          placeholder="Tìm kiếm đơn hàng"
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          onClose={() => setIsSearchMode(false)}
+          isNumericMode={false}
+        />
+      ) : (
+        <div className="flex-1">
+          <TabsLayout
+            tabs={[
+              { id: OrderTab.ALL, name: "Tất cả" },
+              { id: OrderTab.AT_TABLE, name: "Tại bàn" },
+              { id: OrderTab.TAKE_AWAY, name: "Mang đi" },
+            ]}
+            queryKey="orderType"
+            activeValue={activeTab}
+            onClick={(tab: any) => onActiveTabChange(tab.id)}
+            rightButton={
+              <div className="flex items-center gap-4">
+                <ButtonIcon
+                  iconSrc={<IcSearch />}
+                  onClick={() => setIsSearchMode(true)}
+                />
+                <DropdownSelector
+                  options={statusOptions}
+                  selectedValue={{
+                    label: currentStatus?.label,
+                  }}
+                  onSelect={(opt) => {
+                    onStatusChange(opt.key);
+                  }}
+                  renderItem={(opt) => (
+                    <>
+                      <div className="flex justify-between" key={opt.key}>
+                        <button
+                          onClick={() => {
+                            onStatusChange(opt.key);
+                          }}
+                          className={`w-full gap-2 px-2 py-[6px] flex items-center justify-between text-sm rounded-md ${
+                            selectedStatus === opt.key
+                              ? "bg-gray-100 text-primary font-medium"
+                              : "hover:bg-gray-50 text-text-primary"
+                          }`}
+                        >
+                          <span className="font-normal">{opt.label}</span>
+                          {selectedStatus === opt.key && <IcCheckFill />}
+                        </button>
+                      </div>
+                      {opt.key === "all" && (
+                        <div className="border-t border-gray-200 mt-2" />
+                      )}
+                    </>
+                  )}
+                  buttonClassName="flex items-center justify-between gap-2 px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm text-text-primary hover:bg-gray-50 focus:outline-none focus:ring-2 h-11 w-[170px]"
+                  dropdownClassName="w-[170px] top-[calc(100%_+_4px)] p-2 flex flex-col gap-1"
+                />
+                <RefreshButton onRefresh={onRefreshOrder} />
+              </div>
+            }
+            className="h-[56px]"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OrderHeader;

package/src/components/order-management/order-pagination.tsx

@@ -0,0 +1,49 @@
+import DropdownSelector from "@components/common/dropdown";
+import { Pagination } from "@components/common/pagination";
+
+type TProps = {
+  page: number;
+  setPage: (page: number) => void;
+  pageSize: number;
+  setPageSize: (pageSize: number) => void;
+  totalPages: number;
+};
+
+const OrderPagination = ({
+  page,
+  setPage,
+  pageSize,
+  setPageSize,
+  totalPages,
+}: TProps) => {
+  const options = [10, 20, 50, 100];
+  return (
+    <div className="flex justify-between items-center py-2">
+      <div />
+      <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
+      <div className="flex items-center text-sm text-gray-600 mr-4 gap-3">
+        <span>Số dòng</span>
+        <DropdownSelector<number>
+          options={options}
+          selectedValue={{
+            label: pageSize.toString(),
+          }}
+          onSelect={(value) => setPageSize(value)}
+          renderItem={(item) => (
+            <div
+              className={`px-3 py-2 text-sm hover:bg-gray-50 ${
+                pageSize === item ? "bg-gray-100 text-primary font-medium" : ""
+              }`}
+            >
+              {item}
+            </div>
+          )}
+          buttonClassName="px-2 py-1 border border-gray-300 rounded-md text-gray-700 bg-white w-[60px] flex justify-between items-center"
+          dropdownClassName="w-[60px] bottom-10"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default OrderPagination;

package/src/components/order-management/order-status.tsx

@@ -0,0 +1,58 @@
+import { ORDER_STATE } from "@constants/order-state";
+import { useTranslation } from "react-i18next";
+
+const STATUS = [
+  {
+    id: 1,
+    value: ORDER_STATE.NEW,
+    color: "#F6B51E",
+    background: "#FFFAEB",
+  },
+  {
+    id: 2,
+    value: ORDER_STATE.PAID,
+    color: "#1FC163",
+    background: "#E0FAEB",
+  },
+  {
+    id: 3,
+    value: ORDER_STATE.INVOICED,
+    color: "#35ADE9",
+    background: "#EBF1FF",
+  },
+  {
+    id: 4,
+    value: ORDER_STATE.CANCEL,
+    color: "#FB2B3D",
+    background: "#FFEBEC",
+  },
+  {
+    id: 5,
+    value: ORDER_STATE.IN_PAID,
+    color: "#1FC163",
+    background: "#E0FAEB",
+  },
+];
+
+const OrderStatus = ({ status }: { status: string }) => {
+  const { t } = useTranslation();
+  const currentStatus = STATUS.find((item) => {
+    return item.value === status;
+  });
+  return (
+    <div
+      style={{
+        borderColor: currentStatus?.color,
+        backgroundColor: currentStatus?.background,
+        color: currentStatus?.color,
+      }}
+      className="px-2 py-1 rounded border w-fit"
+    >
+      <p className="text-xs font-medium leading-4">
+        {t(currentStatus?.value || "")}
+      </p>
+    </div>
+  );
+};
+
+export default OrderStatus;