sme-pos-package 1.0.13 → 1.0.15

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

@@ -1,179 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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>
-  );
-};