sme-pos-package 1.0.7 → 1.0.9

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

@@ -0,0 +1,179 @@
+import { EmptyState } from "@components/common/empty-state";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { TBasicOrder } from "@type/order";
+import { add7Hours, onFindTable } from "@utils/functions";
+import moment from "moment";
+import { useEffect, useMemo, useState } from "react";
+import OrderStatus from "./order-status";
+
+type Props = {
+  orderData?: TBasicOrder[];
+  handleClick: (order: any) => void;
+  isLoading: boolean;
+};
+
+const TABLE_HEADERS = [
+  "Ngày tạo",
+  "Mã đơn hàng",
+  "Số đơn hàng",
+  "Bàn",
+  "Nhân viên",
+  "Tên khách hàng",
+  "Trạng thái",
+  "Tổng tiền",
+];
+
+export default function OrderTable({
+  orderData,
+  handleClick,
+  isLoading,
+}: Props) {
+  const { getData, isModePosRestaurant } = useSale();
+  const { onGetCurrentUser } = useOrder();
+  const [userMap, setUserMap] = useState<Record<number, string>>({});
+
+  const floors = getData(LoadDataModel.RESTAURANT_FLOOR);
+  const tables = getData(LoadDataModel.RESTAURANT_TABLE);
+  const partners = getData(LoadDataModel.RES_PARTNER);
+
+  const tableHeader = useMemo(() => {
+    if (isModePosRestaurant) return TABLE_HEADERS;
+
+    return TABLE_HEADERS.filter((_, index) => index !== 2);
+  }, [isModePosRestaurant]);
+
+  useEffect(() => {
+    if (!orderData?.length) return;
+
+    const loadUsers = async () => {
+      const result: Record<number, string> = {};
+
+      for (const order of orderData) {
+        const userId = order?.user_id;
+
+        if (!result[userId]) {
+          const matchedUser = await onGetCurrentUser({ userId });
+          result[userId] = matchedUser ?? "Chưa xác định";
+        }
+      }
+
+      setUserMap(result);
+    };
+
+    loadUsers();
+  }, [orderData]);
+
+  return (
+    <div className="bg-white shadow-sm overflow-hidden">
+      <div className="overflow-x-auto max-h-[600px] overflow-y-auto border-y border-stroke-disabled">
+        <table className="min-w-full divide-y divide-stroke-disabled table-fixed">
+          <thead className="bg-white sticky top-0 z-10 border-b border-stroke-disabled">
+            <tr>
+              {tableHeader.map((header, idx) => (
+                <th
+                  key={idx}
+                  className="px-5 py-3 text-left text-sm font-semibold text-text-primary border-r border-stroke-disabled bg-white"
+                >
+                  <div
+                    className={
+                      [isModePosRestaurant ? [5, 6] : 4, 5].includes(idx)
+                        ? "flex justify-end items-center"
+                        : ""
+                    }
+                  >
+                    {header}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+
+          {/* Body */}
+          <tbody className="bg-white divide-y divide-stroke-disabled [&>tr]:h-11">
+            {orderData?.length ? (
+              orderData.map((order) => {
+                const orderDateIn7Hours = add7Hours(order.create_date);
+                const orderDateFormatted = moment(orderDateIn7Hours).format(
+                  "HH:mm:ss DD-MM-YYYY"
+                );
+
+                return (
+                  <tr
+                    key={order.id}
+                    className="hover:bg-gray-50 cursor-pointer text-sm text-text-primary font-medium leading-5 tracking-[-0.12px]"
+                    onClick={() => handleClick(order)}
+                  >
+                    <td className="px-5 text-text-disable text-sm border-r border-stroke-disabled leading-5 tracking-[-0.12px] italic">
+                      {orderDateFormatted}
+                    </td>
+
+                    <td className="px-5 border-r border-stroke-disabled">
+                      {order.pos_reference}
+                    </td>
+
+                    <td className="px-5 border-r border-stroke-disabled">
+                      {order.id}
+                    </td>
+
+                    {isModePosRestaurant && (
+                      <td className="px-5 border-r border-stroke-disabled">
+                        {onFindTable({
+                          order,
+                          tables,
+                          floors,
+                        })}
+                      </td>
+                    )}
+
+                    <td className="px-5 border-r border-stroke-disabled">
+                      {userMap[order.user_id]}
+                    </td>
+
+                    <td className="px-5 border-r border-stroke-disabled">
+                      {
+                        partners?.find(
+                          (item: any) => item.id === Number(order.partner_id)
+                        )?.name
+                      }
+                    </td>
+
+                    <td className="px-5 whitespace-nowrap border-r border-stroke-disabled">
+                      <div className="flex justify-end items-center">
+                        <OrderStatus status={order.state} />
+                      </div>
+                    </td>
+
+                    <td className="px-5 border-r border-stroke-disabled">
+                      <div className="flex justify-end items-center">
+                        {Number(order.amount_total).toLocaleString()} ₫
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            ) : (
+              <tr>
+                <td
+                  colSpan={TABLE_HEADERS.length}
+                  className="text-center text-sm text-gray-500 py-6"
+                >
+                  {isLoading ? (
+                    "Đang tải đơn hàng..."
+                  ) : (
+                    <EmptyState
+                      image="/assets/images/order-empty-state.png"
+                      imageAlt="empty-order"
+                      description="Chưa có đơn"
+                      imageClassName="size-[200px]"
+                    />
+                  )}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { cn } from "@utils/functions";
+
+type TProps = {
+  activeTab: string;
+  onActiveTabChange: (tab: string) => void;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  tabs: { key: string; label: string }[];
+};
+
+const OrderTabs = ({
+  activeTab,
+  onActiveTabChange,
+  tabs,
+  onPageChange,
+  onPageSizeChange,
+}: TProps) => {
+  return (
+    <div className="flex items-center justify-start">
+      {tabs.map((tab) => (
+        <button
+          key={tab.key}
+          className={cn("p-3 rounded-lg ", {
+            "bg-surface-primary": activeTab === tab.key,
+          })}
+          onClick={() => {
+            onActiveTabChange(tab.key);
+            onPageChange(1);
+            onPageSizeChange(10);
+          }}
+        >
+          <span
+            className={cn(
+              "text-sm font-medium leading-5 text-secondary tracking-[-0.12px]",
+              {
+                "text-text-active": activeTab === tab.key,
+              }
+            )}
+          >
+            {tab.label}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default OrderTabs;

package/src/components/pos-management/add-product-from-barcode/index.tsx

@@ -0,0 +1,97 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { TProduct } from "@type/product/product";
+import { useEffect, useRef, useState } from "react";
+
+export const AddProductFromBarcode = ({
+  productsData,
+}: {
+  productsData: TProduct[];
+}) => {
+  const { changeProductQty } = useOrder();
+  const { getQuery } = useQueryParams();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+
+  const [productBarcode, setProductBarCode] = useState("");
+
+  const onClear = () => {
+    setProductBarCode("");
+
+    inputRef.current &&
+      inputRef.current.value === "" &&
+      inputRef.current.focus();
+  };
+
+  const handleAddToCart = async ({
+    qty,
+    product,
+  }: {
+    qty: number;
+    product: TProduct;
+  }) => {
+    if (!product) return;
+
+    try {
+      await changeProductQty({
+        product,
+        qty,
+        orderId: Number(orderId),
+      });
+      onClear();
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const productMatched = productsData.find(
+      (product: TProduct) => product.barcode == Number(productBarcode)
+    );
+
+    if (e.key === "Enter") {
+      if (productMatched) {
+        handleAddToCart({
+          qty: 1,
+          product: productMatched,
+        });
+      } else {
+        onClear();
+      }
+    }
+  };
+
+  useEffect(() => {
+    const input = inputRef.current;
+
+    if (!input) return;
+
+    input.focus();
+
+    const handleBlur = () => input.focus();
+
+    input.addEventListener("blur", handleBlur);
+
+    return () => {
+      input.removeEventListener("blur", handleBlur);
+    };
+  }, []);
+
+  return (
+    <input
+      ref={inputRef}
+      type="number"
+      className="absolute w-12 aspect-square text-center border-b-2 border-brand-default outline-none opacity-0"
+      onChange={(e) => {
+        setProductBarCode(e.target.value);
+      }}
+      autoFocus
+      value={productBarcode}
+      onKeyDown={(e) => {
+        handleKeyDown(e);
+      }}
+    />
+  );
+};

package/src/components/pos-management/cart-content/action-line.tsx

@@ -0,0 +1,81 @@
+import { IcPrint } from "@assets/icons/breadcrumbs-icon";
+import ButtonAction from "@components/common/button-action";
+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 } from "@store/states/cart.state";
+import { t } from "i18next";
+import { useMemo } from "react";
+import { toast } from "react-toastify";
+
+type Props = {
+  cartItemsArr: CartItemType[];
+  showPayment?: boolean;
+  setShowPayment: (e: boolean) => void;
+};
+
+export const ActionLine = ({
+  showPayment,
+  cartItemsArr,
+  setShowPayment,
+}: Props) => {
+  const { taxAmount, totalAmount } = useOrderDetail();
+  const { onProcessOrder } = useOrder();
+  const { displayDataQueryResult, isPosMapKitchen } = useKitchen();
+  const { getQuery } = useQueryParams();
+
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+  const refetchDisplayDataResult = displayDataQueryResult?.refetch;
+
+  const onCallDish = async () => {
+    if (!orderId) return;
+    try {
+      await onProcessOrder.mutateAsync(Number(orderId));
+      refetchDisplayDataResult();
+      toast.success(t("callDishSuccess"));
+    } catch (error: any) {
+      toast.error(error);
+    }
+  };
+  const isNewLine = useMemo(() => {
+    return cartItemsArr?.some((item: any) => !item.ordered);
+  }, [cartItemsArr]);
+
+  return (
+    <div className="h-[56px] w-full flex text-text-btn">
+      <div className="min-w-[60px] h-full flex items-center justify-center text-text-active bg-surface-primary">
+        <IcPrint />
+      </div>
+      {showPayment ? (
+        <ButtonAction
+          onClick={() => setShowPayment(false)}
+          className={`button-primary h-full border-l-0 border-b-0 border-t border-stroke-disabled rounded-none w-full !px-0`}
+          text={t("back_dish")}
+        />
+      ) : (
+        isPosMapKitchen && (
+          <ButtonAction
+            onClick={onCallDish}
+            className={`button-primary !px-0 h-full border-l-0 border-b-0 border-t border-stroke-disabled rounded-none w-full`}
+            text={t("call_dish")}
+            disabled={!isNewLine}
+            style={{
+              background: "#0C66E4",
+              color: "#fff",
+            }}
+          />
+        )
+      )}
+      {!showPayment && (
+        <ButtonAction
+          disabled={taxAmount + totalAmount == 0}
+          onClick={() => setShowPayment(true)}
+          text={t("purchases")}
+          className="button-primary h-full rounded-none w-full "
+        />
+      )}
+    </div>
+  );
+};

package/src/components/pos-management/cart-content/cancel-order-line-modal.tsx

@@ -0,0 +1,41 @@
+import ButtonAction from "@components/common/button-action";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { useTranslation } from "react-i18next";
+
+const CancelOrderLineConfirm = ({
+  onClose,
+  onCancelOrderLine,
+}: {
+  onClose: () => void;
+  onCancelOrderLine: () => void;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <ModalZoom
+      isOpen
+      onClose={onClose}
+      className="p-0 py-4 px-5"
+      modalClassName="w-[50%]"
+      title="Xác nhận hủy món" //TODO
+      footer={
+        <div className="flex gap-2 justify-end p-4">
+          <ButtonAction
+            onClick={() => onClose()}
+            text={t("cancel_button")}
+            className="button-secondary w-full"
+          />
+          <ButtonAction
+            onClick={() => onCancelOrderLine()}
+            text={t("confirm_button")}
+            className="button-primary w-full"
+          />
+        </div>
+      }
+    >
+      <p>Bạn có chắc muốn huỷ món hàng này không?</p>
+    </ModalZoom>
+  );
+};
+
+export default CancelOrderLineConfirm;

package/src/components/pos-management/cart-content/cart-item.tsx

@@ -0,0 +1,173 @@
+import { IcPlus, IcSubtract } from "@assets/icons/common";
+import { IcKitchenOrder } from "@assets/icons/order-icon";
+import { VNCurrency } from "@components/common/header";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useKitchen } from "@provider/pos-provider/kitchen-provider";
+import {
+  getTotalProductPrice,
+  useOrder,
+} from "@provider/pos-provider/order-provider";
+import { CartItemType, useCartStore } from "@store/states/cart.state";
+import { getKey } from "@utils/functions";
+import { useMemo } from "react";
+
+const cartItemStatus = {
+  ordered: {
+    display_name: "Đã gọi",
+    color: "#5946F9",
+    backgroundColor: "#DCD5FF",
+    border: "#5946F9",
+  },
+  ["non-ordered"]: {
+    display_name: "Chưa gọi",
+    color: "#666",
+    backgroundColor: "#F6F6F6",
+    border: "#E5E5E5",
+  },
+  ["not-preparing"]: {
+    display_name: "Không chế biến",
+    color: "#995E1F",
+    backgroundColor: "rgba(153, 94, 31, 0.08)",
+    border: "rgba(153, 94, 31, 0.20)",
+  },
+};
+
+export const CartItem = ({
+  item,
+  setCancelOrder,
+}: {
+  item: CartItemType;
+  setCancelOrder: (value: CartItemType) => void;
+}) => {
+  const { changeProductQty } = useOrder();
+  const { setActiveProduct } = useCartStore();
+  const { getQuery } = useQueryParams();
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+
+  const { displayDataQueryResult } = useKitchen();
+
+  const status = useMemo(() => {
+    const kitchenCategories =
+      displayDataQueryResult?.data?.categories?.map(
+        (category: any) => category.id
+      ) || [];
+    return !kitchenCategories.some((catId: number) =>
+      item?.product?.pos_categ_ids?.includes(catId)
+    )
+      ? "not-preparing"
+      : item.ordered
+      ? "ordered"
+      : "non-ordered";
+  }, [displayDataQueryResult, item]);
+
+  const onAddProductToCart = () => {
+    changeProductQty({
+      product: { ...item.product },
+      qty: 1,
+      orderId: Number(orderId),
+    });
+  };
+
+  const onSubtractProductFromCart = () => {
+    if (item.qty > 1)
+      changeProductQty({
+        product: { ...item.product },
+        qty: -1,
+        orderId: Number(orderId),
+      });
+    else {
+      setCancelOrder(item);
+    }
+  };
+
+  const attributeValue = useMemo(() => {
+    const pickAttributeValue = item?.product?.pickAttributeValue;
+    return pickAttributeValue?.filter((item) => item.value_string?.length > 0);
+  }, [item?.product?.pickAttributeValue]);
+
+  const onClickCartItem = () => {
+    setActiveProduct({ id: getKey(item.product), isFromCart: true });
+  };
+  return (
+    <div
+      className="p-3 flex flex-col gap-2 border-b border-stroke-disabled cursor-pointer"
+      onClick={() => onClickCartItem()}
+    >
+      <div className="flex justify-between gap-5">
+        <div className="flex flex-col flex-1 gap-[6px]">
+          <p>{item.product.name}</p>
+          <div className="flex justify-between items-center">
+            <div className="flex gap-4 items-center">
+              {(item?.orderedNumber ?? 0) > 0 && (
+                <div className="flex gap-1 items-center text-colored-primary">
+                  <IcKitchenOrder />
+                  <span className="text-sm font-medium">
+                    {item?.orderedNumber}
+                  </span>
+                </div>
+              )}
+              <div
+                className={` border rounded w-fit h-6 flex items-center text-xs p-2`}
+                style={{
+                  borderColor: cartItemStatus[status]?.border,
+                  color: cartItemStatus[status]?.color,
+                  backgroundColor: cartItemStatus[status]?.backgroundColor,
+                }}
+              >
+                {cartItemStatus[status].display_name}
+              </div>
+            </div>
+            <p className="text-text-primary">
+              {(getTotalProductPrice(item.product) * item.qty).toLocaleString()}{" "}
+              {VNCurrency}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <div
+            className={`size-10 cursor-pointer rounded-full border border-stroke-disabled flex justify-center items-center ${
+              item.qty <= 1 ? "text-[#BDBDBD]" : "text-[#575757]"
+            }`}
+            onClick={(e) => {
+              e.stopPropagation();
+              onSubtractProductFromCart();
+            }}
+          >
+            <IcSubtract />
+          </div>
+          <p>{item.qty}</p>
+          <div
+            className={`size-10 cursor-pointer rounded-full border border-stroke-disabled flex justify-center items-center text-[#575757]`}
+            onClick={(e) => {
+              e.stopPropagation();
+              onAddProductToCart();
+            }}
+          >
+            <IcPlus />
+          </div>
+        </div>
+      </div>
+      {attributeValue &&
+        attributeValue?.length > 0 &&
+        attributeValue.map((item) => (
+          <div className="border-t border-dashed">
+            <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) => item?.name).join(", ")}
+              </span>
+            </p>
+          </div>
+        ))}
+      {item.note && (
+        <div className="border-t border-dashed text-xs pt-2">
+          <span className="text-tertiary font-semibold">Ghi chú:</span>
+          <span className="font-medium"> {item.note}</span>
+        </div>
+      )}
+    </div>
+  );
+};