sme-pos-package 1.0.7 → 1.0.9

package/src/components/session-management/close-session-modal/draft-orders-confirm.tsx

@@ -0,0 +1,53 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { useSessionStore } from "@store/session";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import Actions from "./actions";
+import CloseSessionModalContainer from "./container";
+
+export const DraftOrdersConfirm = () => {
+  const { setStep } = useSessionStore();
+  const { t } = useTranslation();
+  const { removeParam } = useQueryParams();
+  const { draftOrders } = useOrder();
+  const { cancelOrder } = useOrder();
+
+  const numberOfUnpaidOrders = useMemo(() => {
+    return draftOrders.length;
+  }, [draftOrders]);
+
+  const onContinue = async () => {
+    await cancelOrder.mutateAsync(draftOrders.map((order) => Number(order.id)));
+    setStep(3);
+  };
+
+  const handleClose = () => {
+    setStep(0);
+    removeParam([QUERY_KEYS.OPEN]);
+  };
+
+  return (
+    <CloseSessionModalContainer
+      isOpen={true}
+      onClose={handleClose}
+      title={t("close_session")}
+    >
+      <div className="flex flex-col h-full ">
+        <p className="text-sm leading-5 overflow-auto flex-1 tracking-[-0.12px] text-text-secondary">
+          {t("orders_left")}{" "}
+          <span className="font-bold tracking-[-0.2px] text-text-primary">
+            {numberOfUnpaidOrders.toString().padStart(2, "0")}{" "}
+            {t("orders_not_paid")}
+          </span>{" "}
+          {t("orders_left_content")}
+          <br /> <br />
+          <span>{t("confirm_sure")}</span>
+        </p>
+
+        <Actions onContinue={onContinue} buttonLabel={t("yes_button")} />
+      </div>
+    </CloseSessionModalContainer>
+  );
+};

package/src/components/session-management/close-session-modal/draft-orders-summary.tsx

@@ -0,0 +1,82 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useSessionStore } from "@store/session";
+import { useCloseSessionStore } from "@store/states/close-session.state";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import Actions from "./actions";
+import CloseSessionModalContainer from "./container";
+import SessionSummary from "./session-summary";
+
+const schema = z.object({
+  cashCount: z.string().min(1, "Cash count is required"),
+  note: z.string(),
+});
+
+export const DraftOrdersSummary = () => {
+  const {
+    handleSubmit,
+    register,
+    watch,
+    formState: { errors },
+    setValue,
+  } = useForm({
+    defaultValues: {
+      cashCount: "",
+      note: "",
+    },
+    mode: "onChange",
+    resolver: zodResolver(schema),
+  });
+
+  const { setStep, setSessionConfirmParams } = useSessionStore();
+  const { setCloseSessionInfo } = useCloseSessionStore();
+  const { t } = useTranslation();
+  const { removeParam } = useQueryParams();
+
+  const onSubmit = handleSubmit((data) => {
+    setSessionConfirmParams({
+      cashCount: Number(data.cashCount),
+      note: data.note,
+    });
+    setCloseSessionInfo({
+      cashCount: Number(data.cashCount),
+      difference: 0,
+    });
+    setStep(4);
+  });
+
+  const handleClose = () => {
+    setStep(0);
+    removeParam([QUERY_KEYS.OPEN]);
+  };
+
+  return (
+    <CloseSessionModalContainer
+      isOpen={true}
+      onClose={handleClose}
+      title={t("close_session")}
+    >
+      <form onSubmit={onSubmit} className="flex flex-col h-full">
+        <SessionSummary
+          register={register}
+          errorMessage={errors.cashCount?.message}
+          cashCount={Number(watch("cashCount"))}
+          watch={watch}
+          setValue={setValue}
+        />
+
+        <Actions
+          onContinue={() => onSubmit()}
+          buttonLabel={t("yes_button")}
+          isDisabled={
+            errors.cashCount?.message !== undefined || watch("cashCount") === ""
+          }
+          className="flex items-center gap-2 w-full pt-6"
+        />
+      </form>
+    </CloseSessionModalContainer>
+  );
+};

package/src/components/session-management/close-session-modal/draft-orders.tsx

@@ -0,0 +1,34 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useSessionStore } from "@store/session";
+import { useTranslation } from "react-i18next";
+import Actions from "./actions";
+import CloseSessionModalContainer from "./container";
+import { OrdersInDraft } from "./order";
+
+export const DraftOrders = () => {
+  const { setStep } = useSessionStore();
+  const { t } = useTranslation();
+  const { removeParam } = useQueryParams();
+
+  const onContinue = () => setStep(2);
+
+  const handleClose = () => {
+    setStep(0);
+    removeParam([QUERY_KEYS.OPEN]);
+  };
+
+  return (
+    <CloseSessionModalContainer
+      isOpen={true}
+      onClose={handleClose}
+      title={t("close_session")}
+    >
+      <div className="flex flex-col h-full">
+        <OrdersInDraft />
+
+        <Actions onContinue={onContinue} buttonLabel={t("continue")} />
+      </div>
+    </CloseSessionModalContainer>
+  );
+};

package/src/components/session-management/close-session-modal/index.tsx

@@ -0,0 +1,35 @@
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider"
+import { useSessionStore } from "@store/session"
+import { CloseSessionConfirm } from "./close-session-confirm"
+import { DraftOrders } from "./draft-orders"
+import { DraftOrdersConfirm } from "./draft-orders-confirm"
+import { DraftOrdersSummary } from "./draft-orders-summary"
+
+type TProps = {
+  onBack: () => void
+}
+
+const CloseSessionModal = () => {
+  const { step } = useSessionStore()
+  const { getData } = useSale()
+  const posName = getData(LoadDataModel.POS_CONFIG)?.[0]?.name
+
+  const onShowModal = () => {
+    switch (step) {
+      case 1:
+        return <DraftOrders />
+      case 2:
+        return <DraftOrdersConfirm />
+      case 3:
+        return <DraftOrdersSummary />
+      case 4:
+        return <CloseSessionConfirm posName={posName} />
+      default:
+        return <></>
+    }
+  }
+
+  return onShowModal()
+}
+
+export default CloseSessionModal

package/src/components/session-management/close-session-modal/order/index.ts

@@ -0,0 +1 @@
+export { default as OrdersInDraft } from "./orders-in-draft";

package/src/components/session-management/close-session-modal/order/order-line.tsx

@@ -0,0 +1,64 @@
+import { FileListIcon } from "@assets/icons/order-icon";
+import { VNCurrency } from "@components/common/header";
+import { ORDER_STATE } from "@constants/order-state";
+import { TBasicOrder } from "@type/order";
+import { dd_mm_yyyy, hh_mm } from "@utils/functions";
+import { useTranslation } from "react-i18next";
+
+type TProps = {
+  order: TBasicOrder;
+};
+
+const OrderLine = (props: TProps) => {
+  const { order } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div className="rounded-2xl border border-stroke-default bg-white flex items-center gap-3 p-4">
+      <div className="min-w-14 aspect-square rounded-lg bg-neutral-100-96 flex items-center justify-center">
+        <FileListIcon />
+      </div>
+
+      <div className="flex flex-col gap-2 w-full justify-center">
+        <div className="flex items-center justify-between">
+          <p className="font-semibold leading-6 text-text-primary tracking-[-0.16px]">
+            #{order.id}
+          </p>
+          <div
+            className={`rounded border ${
+              order.state === ORDER_STATE.IN_PAID
+                ? "border-stroke-warning bg-[#FFF5DC]"
+                : "border-colored-success bg-success"
+            }  py-1 px-2`}
+          >
+            <p
+              className={`text-xs font-medium leading-4 ${
+                order.state === ORDER_STATE.NEW
+                  ? "text-text-colored-warning"
+                  : "text-colored-success"
+              }`}
+            >
+              {order.state === ORDER_STATE.NEW
+                ? `${t(ORDER_STATE.NEW)}`
+                : `${t(ORDER_STATE.IN_PAID)}`}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <p className="text-text-secondary flex-1 text-sm leading-5 tracking-[-0.12px]">
+            {hh_mm(order.create_date) + " • " + dd_mm_yyyy(order.create_date)}
+          </p>
+          <p className="font-semibold text-end flex-1 line-clamp-1 leading-6 tracking-[-0.24px] text-text-primary">
+            {(order.amount_total + order.amount_tax).toLocaleString("vi-VN", {
+              maximumFractionDigits: 0,
+            })}{" "}
+            {VNCurrency}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderLine;

package/src/components/session-management/close-session-modal/order/orders-in-draft.tsx

@@ -0,0 +1,31 @@
+import { useCloseSession } from "@provider/pos-provider/close-session-provider";
+import { useTranslation } from "react-i18next";
+import OrderLine from "./order-line";
+
+const OrdersInDraft = () => {
+  const { draftInPaidOrders } = useCloseSession();
+  const { t } = useTranslation();
+
+  if (!draftInPaidOrders.length) return null;
+
+  return (
+    <div className="flex flex-col flex-1 gap-6 overflow-auto justify-start">
+      <div className="flex flex-col gap-1">
+        <p className="text-lg font-semibold leading-[26px] text-text-primary">
+          {t("number_orders_left", {
+            numberOfOrders: draftInPaidOrders.length,
+          })}
+        </p>
+        <p className="text-sm leading-5 tracking-[-0.12px] text-text-secondary">
+          {t("confirm_close")}
+        </p>
+      </div>
+
+      {draftInPaidOrders.map((order) => (
+        <OrderLine key={order.id} order={order} />
+      ))}
+    </div>
+  );
+};
+
+export default OrdersInDraft;

package/src/components/session-management/close-session-modal/session-summary.tsx

@@ -0,0 +1,165 @@
+import { IcBack } from "@assets/icons/common";
+import { VNCurrency } from "@components/common/header";
+import TextArea from "@components/common/input/text-area";
+import { formatCurrency, unFormatCurrency } from "@utils/functions";
+import { generateCloseSessionData } from "@utils/pos/session";
+import { useState } from "react";
+import {
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import { useCloseSession } from "@provider/pos-provider/close-session-provider";
+
+type Props = {
+  register: UseFormRegister<{ cashCount: string; note: string }>;
+  watch: UseFormWatch<{
+    cashCount: string;
+    note: string;
+  }>;
+  setValue: UseFormSetValue<{
+    cashCount: string;
+    note: string;
+  }>;
+  errorMessage?: string;
+  cashCount: number;
+};
+
+const SessionSummary = ({
+  register,
+  errorMessage,
+  watch,
+  setValue,
+  cashCount,
+}: Props) => {
+  const {
+    getDataCloseSessionQuery: { data },
+  } = useCloseSession();
+
+  const closeSessionSummary = generateCloseSessionData(
+    data as TSessionData,
+    cashCount
+  );
+
+  const handleCashChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = unFormatCurrency(e.target.value);
+    if (!/^\d*$/.test(raw)) return;
+    setValue("cashCount", raw);
+  };
+
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col flex-1 overflow-auto gap-3 hide-scrollbar">
+      {closeSessionSummary.map((item, index) => (
+        <SummaryCard key={index} item={item} />
+      ))}
+
+      <div className="flex flex-col gap-4 bg-white p-4 border border-stroke-disabled rounded-xl">
+        <div className="flex flex-col gap-[6px]">
+          <p className="text-text-primary text-sm font-medium leading-5 tracking-[-0.12px]">
+            {t("cash_count")}
+            <span className="text-state-error-base"> *</span>
+          </p>
+
+          <input
+            type="text"
+            inputMode="numeric"
+            value={formatCurrency(cashCount)}
+            onChange={handleCashChange}
+            placeholder="0"
+            className={`w-full px-3 py-2 border ${
+              errorMessage ? "border-state-error-base" : "border-stroke-default"
+            } rounded-md text-sm`}
+          />
+
+          {errorMessage && (
+            <p className="text-state-error-base text-xs">{errorMessage}</p>
+          )}
+        </div>
+
+        <TextArea
+          title={t("note")}
+          register={register("note")}
+          placeholder={t("close_session_note")}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SessionSummary;
+
+const SummaryCard = ({ item }: { item: TCloseSessionItemProps }) => {
+  const { title, subItems, price } = item;
+  const { t } = useTranslation();
+  const [showContent, setShowContent] = useState(true);
+
+  return (
+    <div
+      style={{
+        boxShadow: "0 2px 4px 0 rgba(27, 28, 29, 0.04)",
+      }}
+      className="rounded-xl border border-stroke-disabled bg-white"
+    >
+      {/* title */}
+      <div
+        onClick={() => setShowContent(!showContent)}
+        className="flex cursor-pointer items-center justify-between p-3"
+      >
+        <div className="flex items-center justify-center gap-2">
+          <item.icon />
+
+          <span className="text-sm font-semibold leading-4 text-text-primary">
+            {t(`${title}` as any)}
+          </span>
+        </div>
+
+        <div className="flex items-center justify-center gap-1">
+          <span className="space-x-1 text-right text-sm font-semibold tracking-[-0.12px] text-strong-950">
+            {price.toLocaleString()}{" "}
+            <span className="text-stroke-soft-400">{VNCurrency}</span>
+          </span>
+
+          <div className={`${showContent ? "" : "rotate-180"}`}>
+            <IcBack />
+          </div>
+        </div>
+      </div>
+
+      {/* content */}
+      {showContent && (
+        <div className="overflow-hidden border-t border-stroke-disabled p-3">
+          {subItems.map((item, index) => (
+            <div key={index} className="flex items-center justify-between py-1">
+              <span className="text-xs font-medium leading-4 text-text-secondary">
+                {t(`${item.title}` as any)}
+              </span>
+
+              <span className="space-x-1 text-right text-xs leading-4 font-semibold tracking-[-0.12px] text-strong-950">
+                {item.price.toLocaleString()}{" "}
+                <span className="text-tertiary">{VNCurrency}</span>
+              </span>
+            </div>
+          ))}
+
+          {item.title.toLowerCase().includes("card") && (
+            <div
+              onClick={() => toast.success("Coming soon")}
+              className="w-full flex items-center justify-center py-[2px]"
+            >
+              <div className="flex items-center justify-center gap-4">
+                <div className="w-5 h-5 rounded border-[1.5px] border-stroke-disabled bg-white" />
+                <p className="text-sm font-medium text-text-primary leading-5 tracking-[-0.12px]">
+                  {t("pos_auto_close_session")}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/session-management/index.ts

@@ -0,0 +1 @@
+export * from "./close-session-modal";

package/src/components/session-management/open-shift/index.tsx

@@ -0,0 +1,172 @@
+import ButtonAction from "@components/common/button-action";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { QUERY_KEYS } from "@constants/query.constant";
+import POSPath from "@constants/routes.constants";
+import useSessionProvider from "@provider/use-session-provider";
+import { formatCurrency } from "@utils/functions";
+import { t } from "i18next";
+import { useMemo, useState } from "react";
+import { FormProvider } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+
+type RecordType = Record<string, any>;
+
+type POSStatus =
+  | false
+  | "opened"
+  | "closed"
+  | "opening_control"
+  | "closing_control";
+
+type TProps = {
+  openModal: boolean;
+  setOpenModal: (val: boolean) => void;
+  methods: any;
+  row: any;
+  record: RecordType;
+};
+
+const OpenSessionModal = (props: TProps) => {
+  const { openModal, setOpenModal, methods, row, record } = props;
+  const { openSession, setOpeningCashBox } = useSessionProvider();
+  const [money, setMoney] = useState("");
+  const [loading, setLoading] = useState(false);
+  const data = useMemo(() => {
+    return {
+      current_session_id: record["current_session_id"]?.id ?? "",
+      record_id: record?.id as number,
+      current_session_state: record["current_session_state"] as POSStatus,
+      module_pos_restaurant: record["module_pos_restaurant"] as boolean,
+      name: record.name as string,
+      id: record.id as number,
+      cash_control: record.cash_control as boolean,
+    };
+  }, [record]);
+  const onClose = () => props.setOpenModal(false);
+
+  const navigate = useNavigate();
+  const handleOpeningCashBoxSuccess = (sessionId: number) => {
+    onClose();
+    if (data.module_pos_restaurant)
+      return navigate(
+        `${POSPath.TABLES}?${QUERY_KEYS.POS_ID}=${data.id}&${QUERY_KEYS.SESSION_ID}=${sessionId}`
+      );
+    // return `/${PosPaths.MANAGEMENT_TABLE}?${QUERY_KEYS.POS_ID}=${data.id}&${QUERY_KEYS.SESSION_ID}=${sessionId}`;
+    return navigate(
+      `${POSPath.MENUS}?${QUERY_KEYS.POS_ID}=${data.id}&${QUERY_KEYS.SESSION_ID}=${sessionId}`
+    );
+    // else return toast.info("Đang phát triển");
+  };
+
+  const onSetOpeningCashBox = async (
+    cashBoxValue: number,
+    sessionId: number
+  ) => {
+    try {
+      await setOpeningCashBox.mutateAsync(
+        {
+          cashBoxValue,
+          sessionId: Number(sessionId),
+        },
+        {
+          onSuccess: () => {
+            handleOpeningCashBoxSuccess(sessionId);
+          },
+        }
+      );
+    } catch (error) {
+      console.error("Error setting opening cash box:", error);
+    }
+  };
+
+  const handleOpenSession = async () => {
+    setLoading(true);
+    try {
+      if (data.current_session_state == "opening_control") {
+        await onSetOpeningCashBox(
+          Number(money),
+          Number(data.current_session_id)
+        );
+      } else {
+        const res = await openSession.mutateAsync(Number(data.record_id));
+        const sessionIdNew = Object.keys(Object.fromEntries(res as any));
+        await onSetOpeningCashBox(Number(money), Number(sessionIdNew[0]));
+      }
+    } catch (error) {
+      console.error("Error opening session:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = e.target.value.replace(/\,/g, "");
+    if (!/^\d*$/.test(rawValue)) return;
+
+    setMoney(rawValue);
+  };
+  return (
+    <ModalZoom isOpen={openModal} onClose={onClose} className="">
+      <FormProvider {...methods}>
+        <div className="flex flex-col gap-6  border-b border-[--stroke-default] w-[500px] p-6 bg-white">
+          <div className="p-3 flex gap-5 items-center">
+            <img
+              src="/assets/images/cashier.svg"
+              alt="POS Icon"
+              className="size-12"
+            />
+            <p className="text-base text-[#0E121B] font-semibold">
+              {row["name"]}
+            </p>
+          </div>
+          <div className="flex flex-col gap-[6px]">
+            <p className="text-sm font-medium">
+              {t("starting_cash_float")}{" "}
+              <span className="text-[--color-error]">*</span>
+            </p>
+
+            <input
+              type="text"
+              value={formatCurrency(money)}
+              onChange={handleAmountChange}
+              onWheel={(e) => e.currentTarget.blur()}
+              className="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-gray-400 text-sm"
+              placeholder="0"
+              inputMode="numeric"
+            />
+          </div>
+          {/* <div className="flex flex-col gap-[6px]">
+            <p className="text-sm font-medium">Lưu ý</p>
+            <TextAreaField
+              {...{
+                defaultValue: "",
+                string: "Lưu ý ",
+                readOnly: false,
+                methods: methods,
+                isForm: true,
+                placeholder: "Lưu ý khi mở ca",
+                name: "note",
+              }}
+            />
+          </div> */}
+        </div>
+        <p className="p-4 flex justify-end gap-4 mt-auto">
+          <ButtonAction
+            onClick={() => setOpenModal(false)}
+            className="h-[36px] button-secondary"
+          >
+            {t("cancel_button")}
+          </ButtonAction>
+          <ButtonAction
+            disabled={!money || loading}
+            onClick={handleOpenSession}
+            className="h-[36px] button-primary"
+          >
+            {t("open_session")}
+          </ButtonAction>
+        </p>
+      </FormProvider>
+    </ModalZoom>
+  );
+};
+
+export default OpenSessionModal;

package/src/constants/api/index.ts

@@ -0,0 +1 @@
+export const FIND_PARTNER_CODE = "walk_in_customer";

package/src/constants/headers.constant.tsx

@@ -0,0 +1,24 @@
+import { IcMenu } from "@assets/icons/order-icon";
+import { IcOrderList, IcTable } from "@assets/icons/pos-icon";
+import POSPath from "./routes.constants";
+
+export const headerTabs = [
+  {
+    id: 0,
+    name: "Danh sách bàn",
+    icon: <IcTable />,
+    path: POSPath.TABLES,
+  },
+  {
+    id: 1,
+    name: "Thực đơn",
+    icon: <IcMenu />,
+    path: POSPath.MENUS,
+  },
+  {
+    id: 2,
+    name: "Đơn hàng",
+    icon: <IcOrderList />,
+    path: POSPath.ORDERS,
+  },
+];

package/src/constants/index.ts

@@ -0,0 +1 @@
+export { default as POSPath } from "./routes.constants";