sme-pos-package 1.0.7 → 1.0.9

package/src/components/kitchen-management/kitchen-order/index.tsx

@@ -0,0 +1,153 @@
+import { FileListFillIcon } from "@assets/icons/common";
+import { Line } from "@assets/icons/customer-view-icon";
+import { useKitchen } from "@provider/pos-provider/kitchen-provider";
+import {
+  TChangeOrderStatusPayload,
+  TKitchenOrder,
+  TKitchenOrderLineWithComplete,
+} from "@type/order";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import ChangeStatusConfirmModal from "../change-status-confirm-modal";
+import KitchenOrderLine from "./line";
+
+type TProps = {
+  order: TKitchenOrder;
+  isCompleteOrder: boolean;
+};
+
+const KitchenOrder = ({ order, isCompleteOrder }: TProps) => {
+  const { t } = useTranslation();
+  const { changeOrderPreparationState } = useKitchen();
+  const params = useParams();
+  const preparationDisplayId = params.kitchenId;
+  const { displayDataQueryResult } = useKitchen();
+  const [openConfirmModal, setOpenConfirmModal] = useState(false);
+  const [orderLines, setOrderLines] = useState<TKitchenOrderLineWithComplete[]>(
+    []
+  );
+  const nextOrderStatusName = useMemo(() => {
+    const stage = displayDataQueryResult.data?.stages.find(
+      (item: any) => item.id === order.stage_id + 1
+    );
+    return stage?.name;
+  }, [displayDataQueryResult.data?.stages, order.stage_id]);
+
+  const onCancelProductInOrder = (id: number) => {
+    setOrderLines((prev) =>
+      prev.map((line) =>
+        line.id === id ? { ...line, isComplete: false } : line
+      )
+    );
+  };
+
+  useEffect(() => {
+    setOrderLines(
+      order.orderlines.map((line) => ({ ...line, isComplete: false }))
+    );
+  }, [order]);
+
+  const onChangeOrderStatus = () => {
+    const payload: TChangeOrderStatusPayload = {
+      orderId: order.id,
+      stageId: order.stage_id + 1,
+      preparationDisplayId: Number(preparationDisplayId),
+    };
+
+    changeOrderPreparationState.mutateAsync(payload).then(() => {
+      toast.success(t("changeOrderStatusSuccess"));
+      return displayDataQueryResult.refetch();
+    });
+  };
+
+  const onCompleteProductInOrder = (id: number) => {
+    setOrderLines((prev) => {
+      const updated = prev.map((line) =>
+        line.id === id ? { ...line, isComplete: true } : line
+      );
+
+      const allCompleteNow = updated.every((line) => line.isComplete);
+
+      if (allCompleteNow) {
+        onChangeOrderStatus();
+      }
+
+      return updated;
+    });
+  };
+
+  return (
+    <div
+      style={{
+        boxShadow: "0 16px 32px -12px rgba(88, 92, 95, 0.10)",
+      }}
+      className="p-2 flex flex-col gap-2 rounded-xl border border-stroke-disabled bg-white"
+    >
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-2 ">
+          <div className="w-7 rounded-lg aspect-square bg-brand-50 flex items-center justify-center">
+            <FileListFillIcon />
+          </div>
+
+          <div>
+            <p className="text-sm font-medium leading-5 tracking-[-0.12px] text-text-secondary">
+              {t("order")}{" "}
+              <span className="text-black">DH-{order.pos_order_id}</span>
+            </p>
+            <p className="text-xs font-semibold">
+              {t("table")} {order.table.table_number}
+            </p>
+          </div>
+        </div>
+        {!isCompleteOrder && (
+          <div
+            onClick={() => setOpenConfirmModal(true)}
+            className="flex gap-1 items-center cursor-pointer"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="8"
+              viewBox="0 0 12 8"
+              fill="none"
+            >
+              <path
+                d="M4.79985 5.9035L10.315 0.387695L11.164 1.2361L4.79985 7.6003L0.981445 3.7819L1.82985 2.9335L4.79985 5.9035Z"
+                fill="#1FC163"
+              />
+            </svg>
+            <p className="text-colored-success text-sm">{t("mark_as_done")}</p>
+          </div>
+        )}
+      </div>
+
+      <Line />
+
+      <div className="flex flex-col justify-center gap-1">
+        {orderLines.map((orderLine: TKitchenOrderLineWithComplete) => (
+          <KitchenOrderLine
+            isCompleteOrder={isCompleteOrder}
+            key={orderLine.id}
+            orderLine={orderLine}
+            onCancelProductInOrder={onCancelProductInOrder}
+            onCompleteProductInOrder={onCompleteProductInOrder}
+          />
+        ))}
+      </div>
+
+      {openConfirmModal && (
+        <ChangeStatusConfirmModal
+          onChangeOrderStatus={onChangeOrderStatus}
+          isOpen={openConfirmModal}
+          onClose={() => setOpenConfirmModal(false)}
+          orderId={order.pos_order_id}
+          toOrderStatus={nextOrderStatusName}
+        />
+      )}
+    </div>
+  );
+};
+
+export default KitchenOrder;

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

@@ -0,0 +1,78 @@
+import { CheckBoxStick } from "@assets/icons/common";
+import { TKitchenOrderLineWithComplete } from "@type/order";
+
+type TProps = {
+  orderLine: TKitchenOrderLineWithComplete;
+  onCompleteProductInOrder: (id: number) => void;
+  onCancelProductInOrder: (id: number) => void;
+  isCompleteOrder: boolean;
+};
+
+function KitchenOrderLine({
+  orderLine,
+  onCancelProductInOrder,
+  onCompleteProductInOrder,
+  isCompleteOrder,
+}: TProps) {
+  return (
+    <div className="px-2 rounded bg-neutral-50-98">
+      <div className="flex items-center gap-2 py-[10px]">
+        <p className="text-sm font-medium leading-5 text-text-secondary tracking-[-0.12px]">
+          x{orderLine.product_quantity}
+        </p>
+
+        <p className="text-sm font-semibold flex-1 leading-5 tracking-[-0.12px] text-text-primary">
+          {orderLine.product_name}
+        </p>
+
+        {!isCompleteOrder &&
+          (orderLine.isComplete ? (
+            <button
+              onClick={() => onCancelProductInOrder(orderLine.id)}
+              className="cursor-pointer"
+            >
+              <CheckBoxStick />
+            </button>
+          ) : (
+            <div
+              onClick={() => onCompleteProductInOrder(orderLine.id)}
+              className="w-5 h-5 rounded border-[1.5px] border-stroke-disabled bg-white cursor-pointer"
+            />
+          ))}
+      </div>
+      {((orderLine.pickAttributeValue &&
+        orderLine.pickAttributeValue.length > 0) ||
+        orderLine.product_cancelled > 0) && (
+        <div className="flex flex-col pl-4 border-l-2 border-stroke-disabled ml-2 py-3">
+          {orderLine.product_cancelled > 0 && (
+            <div className="flex justify-between items-center text-xs font-semibold text-error">
+              <div className=" flex gap-1 items-center">
+                <span>x{orderLine.product_cancelled}</span>
+                <span className="line-through">{orderLine.product_name}</span>
+              </div>
+              <div className="h-6 p-2 flex items-center rounded bg-danger">
+                Huỷ
+              </div>
+            </div>
+          )}
+          {orderLine.pickAttributeValue?.map((attributeLine: any) => {
+            return (
+              <div key={attributeLine.id} className="flex gap-1 items-start">
+                <span className="text-xs font-semibold text-text-secondary">
+                  {attributeLine.name}:
+                </span>
+                <span className="text-xs font-medium text-text-secondary">
+                  {attributeLine.value_string
+                    .map((val: any) => val.name)
+                    .join(",")}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default KitchenOrderLine;

package/src/components/kitchen-management/kitchen-order/state.tsx

@@ -0,0 +1,52 @@
+import { QUERY_KEYS } from "@constants/query.constant"
+import useGetQuery from "@hooks/common/use-get-query"
+import { useQueryParams } from "@hooks/common/use-query-params"
+import { useEffect } from "react"
+
+type TProps = {
+  kitchenOrderStages: any
+}
+
+const OrderState = ({ kitchenOrderStages }: TProps) => {
+  const { updateQuery } = useQueryParams()
+  const { kitchenOrderStatus } = useGetQuery()
+
+  useEffect(() => {
+    !kitchenOrderStatus &&
+      kitchenOrderStages[0]?.id &&
+      updateQuery(QUERY_KEYS.KITCHEN_ORDER_STATUS, kitchenOrderStages[0]?.id)
+  }, [kitchenOrderStatus, kitchenOrderStages])
+
+  return (
+    <div className="flex justify-center">
+      {kitchenOrderStages.map((status: any) => {
+        const isActive = kitchenOrderStatus === status.id
+        return (
+          <button
+            key={status.id}
+            onClick={() =>
+              updateQuery(QUERY_KEYS.KITCHEN_ORDER_STATUS, status.id)
+            }
+            className={`px-5 py-3 h-11 flex items-center border-b-[3px] justify-center ${
+              isActive
+                ? "bg-brand-50 border-brand-default"
+                : "border-transparent"
+            }`}
+          >
+            <p
+              className={`text-sm  leading-5 tracking-[-0.12px] ${
+                isActive
+                  ? "text-text-primary font-semibold"
+                  : "text-text-secondary font-medium"
+              }`}
+            >
+              {status.display_name}
+            </p>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default OrderState

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

@@ -0,0 +1,69 @@
+type TStage = {
+  alert_timer: number;
+  color: string;
+  display_name: string;
+  id: number;
+  name: string;
+  sequence: number;
+  write_date: string;
+  icon_url: string;
+};
+
+type TProps = {
+  stages: TStage[];
+};
+
+const KitchenStatus = (props: TProps) => {
+  if (!props?.stages?.length || props?.stages?.length === 0) return null;
+
+  const imgUrl = (iconUrl: string) => {
+    const url = `https://sme-api-dev.atomsolution.vn/wesap/${iconUrl}`;
+
+    return url;
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {props.stages.map((stage: TStage, index) => {
+        return (
+          <div
+            style={{
+              backgroundColor: stage.color + "33",
+            }}
+            key={index}
+            className="flex flex-col gap-1 p-2 rounded-lg"
+          >
+            <div className="flex items-center justify-between">
+              {/* <p
+                style={{
+                  color: stage.color,
+                }}
+                className="text-lg font-semibold leading-[26px]"
+              >
+                {stage.sequence}
+              </p> */}
+
+              <img
+                src={imgUrl(stage.icon_url)}
+                className="w-6 aspect-square "
+              />
+            </div>
+
+            <p
+              style={{
+                color: stage.color,
+              }}
+              className="text-sm font-medium leading-5 tracking-[-0.2px]"
+            >
+              {stage.display_name}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default KitchenStatus;
+
+const StatusStyle = {};

package/src/components/kitchen-management/orders-kitchen-management.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useMemo } from "react";
+
+import { QUERY_KEYS } from "@constants/query.constant";
+import { EmptyTable } from "@fctc/sme-widget-ui";
+import { useQueryParams } from "@hooks/common/use-query-params";
+
+import useGetQuery from "@hooks/common/use-get-query";
+import usePos from "@hooks/common/use-pos";
+import useOrders from "@hooks/order/use-orders";
+import { useKitchen } from "@provider/pos-provider/kitchen-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import {
+  convertMessage,
+  useSocketData,
+} from "@provider/pos-provider/socket-provider";
+import { TKitchenOrder } from "@type/order";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import { SearchBar } from "../common/search-bar";
+import KitchenOrder from "./kitchen-order";
+import OrderState from "./kitchen-order/state";
+
+const OrdersKitchenManagement = () => {
+  const { displayDataQueryResult, displayDataRefresh } = useKitchen();
+  const { getData } = useSale();
+  const { onSearchChange, kitchenOrdersFiltered } = useOrders();
+  const { getQuery, updateQuery } = useQueryParams();
+  const { dataUser } = usePos();
+  const { kitchenOrderStatus } = useGetQuery();
+  const { clientMtqq } = useSocketData();
+  const { t } = useTranslation();
+
+  const displayData = useMemo(() => {
+    return displayDataQueryResult?.data;
+  }, [displayDataQueryResult.data]);
+
+  const kitchenOrderStages = useMemo(
+    () => displayData?.stages ?? [],
+    [displayData]
+  );
+
+  const kitchenAccessToken = useMemo(() => {
+    return displayData?.access_token;
+  }, [displayData]);
+
+  useEffect(() => {
+    clientMtqq &&
+      displayData?.access_token &&
+      clientMtqq.subscribe(
+        `["${dataUser?.x_node}","${displayData?.access_token}"]`
+      );
+    clientMtqq?.on("message", (topic: any, payload: any) => {
+      const messages = convertMessage(payload.toString());
+      if (messages?.type === "LOAD_ORDERS") {
+        toast.success(t("noti_new_order"));
+        displayDataRefresh();
+      }
+    });
+  }, [clientMtqq, kitchenAccessToken]);
+
+  useEffect(() => {
+    const mapKitchenWithPOS = getData(
+      LoadDataModel.POS_PREPARATION_DISPLAY_DISPLAY
+    );
+    const posSession = mapKitchenWithPOS?.pos_config_ids?.find(
+      (item: any) => item.current_session_id
+    );
+    if (posSession && !getQuery(QUERY_KEYS.SESSION_ID)) {
+      updateQuery(QUERY_KEYS.SESSION_ID, posSession?.current_session_id);
+    }
+  }, []);
+
+  return (
+    <div className="flex flex-col justify-center h-full bg-gray-50">
+      <div className="bg-white border-b border-stroke-disabled">
+        <OrderState kitchenOrderStages={kitchenOrderStages} />
+      </div>
+
+      <div className="py-4 flex justify-center">
+        <SearchBar
+          onSearchChange={onSearchChange}
+          placeholder="Nhập tên bàn, mã đơn..."
+          className="w-full!"
+        />
+      </div>
+
+      <div className="flex-1 p-4 overflow-y-auto">
+        {kitchenOrderStages && kitchenOrdersFiltered.length > 0 ? (
+          <div className="grid grid-cols-3 gap-2">
+            {kitchenOrdersFiltered.map((order: TKitchenOrder) => {
+              return (
+                <KitchenOrder
+                  order={order}
+                  key={order.id}
+                  isCompleteOrder={
+                    kitchenOrderStatus ===
+                    kitchenOrderStages[kitchenOrderStages.length - 1]?.id
+                  }
+                />
+              );
+            })}
+          </div>
+        ) : (
+          <div className="w-full flex justify-center">
+            <EmptyTable />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OrdersKitchenManagement;

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

@@ -0,0 +1,128 @@
+import { ORDER_STATE } from "@constants/order-state";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { TBasicOrder } from "@type/order";
+import { TOrder } from "@type/sale";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import OrderHeader from "./order-header";
+import OrderPagination from "./order-pagination";
+import OrderTable from "./order-table";
+import POSPath from "@constants/routes.constants";
+
+export const ManagementOrder = () => {
+  const [selectedStatus, setSelectedStatus] = useState(ORDER_STATE.ALL);
+  const [selectedType, setSelectedType] = useState(OrderTab.ALL);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchValue, setSearchValue] = useState("");
+  const [searchParams] = useSearchParams();
+  const { orders } = useOrder();
+  const navigate = useNavigate();
+
+  const filterOrderType = (
+    type: OrderTab,
+    state: ORDER_STATE
+  ): TBasicOrder[] => {
+    return orders
+      .filter((order) => {
+        switch (type) {
+          case OrderTab.AT_TABLE:
+            return order.table_id;
+          case OrderTab.TAKE_AWAY:
+            return !order.table_id;
+          default:
+            return true;
+        }
+      })
+      .filter((order) => {
+        return state === ORDER_STATE.ALL ? true : order.state === state;
+      });
+  };
+
+  const orderFilteredData = useMemo(() => {
+    const filterOrdersType = filterOrderType(selectedType, selectedStatus);
+    return searchValue
+      ? filterOrdersType.filter((item) => {
+          const sv = searchValue.toLowerCase();
+          item.pos_reference?.toString().toLowerCase().includes(sv);
+        })
+      : filterOrdersType;
+  }, [selectedType, orders, searchValue, selectedStatus, pageSize, page]);
+
+  const totalPages = useMemo(
+    () => Math.ceil(orderFilteredData.length / pageSize),
+    [orderFilteredData, pageSize]
+  );
+
+  const orderLinesByPage = useMemo(
+    () => orderFilteredData.slice(0 + (page - 1) * pageSize, pageSize * page),
+    [page, orderFilteredData]
+  );
+
+  const onViewOrderDetail = (order: TOrder) => {
+    const keys = [
+      QUERY_KEYS.POS_ID,
+      QUERY_KEYS.SESSION_ID,
+      QUERY_KEYS.ORDER_ID,
+      QUERY_KEYS.TABLE_ID,
+      QUERY_KEYS.FLOOR,
+    ];
+
+    const finalQuery = new URLSearchParams(
+      keys.map((key) => [
+        key,
+        key === QUERY_KEYS.ORDER_ID
+          ? String(order.id)
+          : searchParams.get(key) ?? "",
+      ])
+    );
+
+    navigate({
+      pathname: POSPath.ORDER_DETAIL,
+      search: finalQuery.toString(),
+    });
+  };
+
+  useEffect(() => {
+    setPage(1);
+  }, [selectedType, selectedStatus, pageSize]);
+
+  return (
+    <div className="flex flex-col h-full bg-white">
+      <div className="flex flex-col flex-1 overflow-y-auto">
+        <OrderHeader
+          onRefreshOrder={() => {}}
+          searchValue={searchValue}
+          setSearchValue={setSearchValue}
+          onStatusChange={setSelectedStatus}
+          activeTab={selectedType}
+          onActiveTabChange={(tab) => setSelectedType(tab as OrderTab)}
+          selectedStatus={selectedStatus}
+        />
+
+        <div className="flex-1 overflow-y-auto">
+          <OrderTable
+            orderData={orderLinesByPage}
+            handleClick={onViewOrderDetail}
+            isLoading={false}
+          />
+        </div>
+
+        <OrderPagination
+          page={page}
+          setPage={setPage}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          totalPages={totalPages}
+        />
+      </div>
+    </div>
+  );
+};
+
+export enum OrderTab {
+  ALL = "all",
+  AT_TABLE = "at-table",
+  TAKE_AWAY = "take-away",
+}

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

@@ -0,0 +1,46 @@
+import { IcPlus } from "@assets/icons/breadcrumbs-icon";
+import ButtonAction from "@components/common/button-action";
+import { useTranslation } from "react-i18next";
+
+const OrderActions = ({
+  orderStatus,
+  onAddItem,
+  onPayment,
+  onIssueInvoice,
+  onPrintInvoice,
+}: {
+  orderStatus: string;
+  onAddItem?: () => void;
+  onPayment?: () => void;
+  onIssueInvoice?: () => void;
+  onPrintInvoice?: () => void;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center gap-3 justify-center">
+      <ButtonAction
+        className="button-secondary"
+        onClick={() => {
+          orderStatus === "draft"
+            ? onAddItem && onAddItem()
+            : onIssueInvoice && onIssueInvoice();
+        }}
+        iconSrc={<IcPlus />}
+        text={orderStatus === "draft" ? t("add_dish") : t("create_invoice")}
+      />
+
+      <ButtonAction
+        className="button-primary"
+        onClick={() => {
+          orderStatus === "draft"
+            ? onPayment && onPayment()
+            : onPrintInvoice && onPrintInvoice();
+        }}
+        text={orderStatus === "draft" ? t("payment") : t("print_invoice")}
+      />
+    </div>
+  );
+};
+
+export default OrderActions;

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

@@ -0,0 +1,37 @@
+import useBack from "@hooks/common/use-back";
+import { useMemo } from "react";
+import OrderStatus from "../order-status";
+import { TBasicOrder } from "@type/order";
+
+type TProps = {
+  orderDetailData: TBasicOrder;
+};
+
+const Header = ({ orderDetailData }: TProps) => {
+  const onBack = useBack();
+
+  const orderState = useMemo(() => {
+    return orderDetailData?.state;
+  }, [orderDetailData]);
+
+  return (
+    <div className="flex items-center justify-between p-4">
+      <div className="flex items-center justify-center gap-2">
+        <button
+          onClick={onBack}
+          className="w-12 aspect-square cursor-pointer bg-neutral-disabled rounded-lg"
+        >
+          ‹
+        </button>
+        <div className="flex items-center gap-4">
+          <p className="text-2xl font-semibold leading-8 text-text-primary tracking-[-0.24px]">
+            {orderDetailData?.pos_reference}
+          </p>
+          <OrderStatus status={orderState} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

package/src/components/order-management/order-detail/index.ts

@@ -0,0 +1,3 @@
+export { default as Header } from "./header";
+export { default as OrderDetailInformation } from "./information";
+export { default as OrderDetailSummary } from "./summary";