sme-pos-package 1.0.14 → 1.0.15

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

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

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

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

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

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

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

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

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

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