sme-pos-package 1.0.7 → 1.0.9

package/src/components/restaurant-management/right-side.tsx

@@ -0,0 +1,179 @@
+import { IcPlus, IcTrash } from "@assets/icons/common";
+import DiningTableIcon from "@assets/icons/dining-table";
+import EditLineIcon from "@assets/icons/edit-line-icon";
+import ButtonAction from "@components/common/button-action";
+import { ButtonIcon } from "@components/common/button-icon";
+import { AddTableModal } from "@components/restaurant-management/add-table-modal";
+import DeleteTableConfirmModal from "@components/restaurant-management/delete-table-confirm-modal";
+import { LayerLoading } from "@fctc/sme-widget-ui";
+import useGetLoadPosSession from "@provider/pos-provider/sale-provider";
+import { usePosTable } from "@provider/pos-provider/table-provider";
+import { TFloor } from "@type/floor/floor";
+import { TBasicTable } from "@type/table";
+import { useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import DeleteFloorConfirmModal from "./delete-floor-confirm-modal";
+import TableEmpty from "./table-empty";
+
+type TProps = {
+  activeFloor: TFloor | undefined;
+  setIsOpenAddFloor: (isOpen: boolean) => void;
+  isOpenAddFloor: boolean;
+  setIsEditingFloor?: (val: number | undefined) => void;
+};
+
+const RightSide = ({
+  activeFloor,
+  setIsOpenAddFloor,
+  setIsEditingFloor,
+}: TProps) => {
+  const [isOpenAddModal, setIsOpenAddModal] = useState(false);
+  const [tableSelected, setTableSelected] = useState<TBasicTable | undefined>(
+    undefined
+  );
+  const [openDeleteConfirmModal, setOpenDeleteConfirmModal] = useState(false);
+  const [isOpenDeleteTable, setIsOpenDeleteTable] = useState(false);
+  const { tablesByFloor, mapTablesWithOrder } = usePosTable();
+
+  const { queryResult: getLoadPosSessionQueryResult, getData } =
+    useGetLoadPosSession();
+
+  const onOpenAddTable = () => {
+    setIsOpenAddModal(true);
+  };
+
+  const isFloorHaveTableContainOrder = useMemo(() => {
+    return mapTablesWithOrder.some((table) => table?.currentOrder);
+  }, [mapTablesWithOrder]);
+
+  const handleDeleteFloor = () => {
+    if (isFloorHaveTableContainOrder) {
+      toast.error("Tầng đang có đơn hàng");
+    } else {
+      setOpenDeleteConfirmModal(true);
+    }
+  };
+
+  if (!activeFloor) {
+    return (
+      <div className="font-medium text-strong-950 leading-[26px] flex-1 bg-neutral-100-96 p-4">
+        Chưa có tầng nào được chọn
+      </div>
+    );
+  }
+
+  return getLoadPosSessionQueryResult.isPending ? (
+    <div className="flex-1 bg-neutral-100-96">
+      <LayerLoading />
+    </div>
+  ) : (
+    <div className="flex-1 p-4 flex flex-col gap-4 bg-neutral-100-96">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <p className="text-lg font-semibold leading-[26px] text-strong-950">
+            {activeFloor?.name}
+          </p>
+          <ButtonIcon
+            iconSrc={<EditLineIcon />}
+            onClick={() => {
+              setIsOpenAddFloor(true);
+              setIsEditingFloor && setIsEditingFloor(activeFloor.id);
+            }}
+            className="bg-inherit border-none shadow-none rounded-lg text-text-primary"
+          />
+          <ButtonIcon
+            iconSrc={<IcTrash />}
+            onClick={handleDeleteFloor}
+            className="bg-inherit border-none shadow-none rounded-lg text-state-error-base"
+          />
+        </div>
+
+        <ButtonAction
+          iconSrc={<IcPlus />}
+          onClick={onOpenAddTable}
+          className="button-primary"
+          text=" Thêm bàn"
+        />
+      </div>
+
+      {tablesByFloor.length ? (
+        <div className="grid gap-3 grid-cols-[repeat(auto-fill,minmax(178px,1fr))]">
+          {tablesByFloor?.map((table: TBasicTable) => (
+            <FloorItem
+              key={table.id}
+              table={table}
+              onTableSelected={setTableSelected}
+              onOpenAddTable={onOpenAddTable}
+            />
+          ))}
+        </div>
+      ) : (
+        <TableEmpty onOpenAddTable={onOpenAddTable} showAddTableAction />
+      )}
+
+      <AddTableModal
+        isOpen={isOpenAddModal}
+        onClose={() => setIsOpenAddModal(false)}
+        tableSelected={tableSelected}
+        editMode={Boolean(tableSelected)}
+        onOpenDeleteConfirmModal={() => setIsOpenDeleteTable(true)}
+        onTableSelected={setTableSelected}
+      />
+
+      <DeleteFloorConfirmModal
+        isOpen={openDeleteConfirmModal}
+        onClose={() => setOpenDeleteConfirmModal(false)}
+        floorId={activeFloor.id}
+        floorName={activeFloor.name}
+      />
+
+      <DeleteTableConfirmModal
+        isOpen={isOpenDeleteTable}
+        onClose={() => setIsOpenDeleteTable(false)}
+        tableSelected={tableSelected}
+      />
+    </div>
+  );
+};
+
+export default RightSide;
+
+const FloorItem = ({
+  table,
+  onTableSelected,
+  onOpenAddTable,
+}: {
+  table: TBasicTable;
+  onTableSelected: (table: TBasicTable) => void;
+  onOpenAddTable: () => void;
+}) => {
+  return (
+    <div className="rounded-xl border border-primary-sub bg-white flex flex-col gap-2 items-center justify-center px-3 h-[100px]">
+      <div className="flex items-center justify-between w-full">
+        <p className="rounded-full text-text-primary font-semibold leading-6 tracking-[-0.24px]">
+          Bàn {table.table_number}
+          {/* TODO */}
+        </p>
+
+        <button
+          onClick={() => {
+            onOpenAddTable();
+            onTableSelected({
+              ...table,
+            });
+          }}
+          className="size-10 flex items-center justify-center text-neutral-400-68"
+        >
+          <EditLineIcon />
+        </button>
+      </div>
+
+      <div className="flex items-center justify-start w-full gap-1 text-colored-primary">
+        <DiningTableIcon />
+        <p className="font-semibold leading-6 tracking-[-0.24px]">
+          {table.seats}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/components/restaurant-management/table-empty.tsx

@@ -0,0 +1,43 @@
+import { IcPlus } from "@assets/icons/common";
+import ButtonAction from "@components/common/button-action";
+import Image from "@components/common/image";
+import { useTranslation } from "react-i18next";
+
+type TProps = {
+  showAddTableAction?: boolean;
+  onOpenAddTable?: () => void;
+  keyString?: string;
+};
+
+const TableEmpty = ({
+  onOpenAddTable,
+  showAddTableAction = false,
+  keyString,
+}: TProps) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center h-full">
+      <Image
+        imageUrl="/assets/images/table-empty.png"
+        className="w-[136px] h-[106px]"
+      />
+
+      <div className="flex flex-col gap-2 items-center justify-center">
+        <p className="text-2xl font-semibold leading-8 text-text-primary tracking-[-0.24px]">
+          {t("no_table")} {keyString}
+        </p>
+      </div>
+
+      {showAddTableAction && (
+        <ButtonAction
+          text={t("create_table")}
+          iconSrc={<IcPlus />}
+          onClick={onOpenAddTable}
+          className="button-secondary bg-white"
+        />
+      )}
+    </div>
+  );
+};
+
+export default TableEmpty;

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

@@ -0,0 +1,45 @@
+import ButtonAction from "@components/common/button-action";
+import { useSessionStore } from "@store/session";
+import { cn } from "@utils/functions";
+import { useTranslation } from "react-i18next";
+
+type TActionsProps = {
+  onContinue: () => void;
+  onClose?: () => void;
+  buttonLabel?: string;
+  isDisabled?: boolean;
+  className?: string;
+};
+
+const Actions = (props: TActionsProps) => {
+  const { onContinue, onClose, buttonLabel, isDisabled, className } = props;
+  const { setStep } = useSessionStore();
+  const { t } = useTranslation();
+
+  const handleClose = () => (onClose ? onClose() : setStep(0));
+
+  return (
+    <div
+      className={cn(
+        "flex pt-6 bg-white flex-col gap-2 w-full justify-center",
+        className
+      )}
+      {...props}
+    >
+      <ButtonAction
+        disabled={isDisabled}
+        onClick={onContinue}
+        text={buttonLabel}
+        className="button-primary w-full"
+      />
+
+      <ButtonAction
+        onClick={handleClose}
+        text={t("cancel")}
+        className="button-secondary w-full"
+      />
+    </div>
+  );
+};
+
+export default Actions;

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

@@ -0,0 +1,157 @@
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useGetBase64Photo } from "@hooks/common/use-get-base64-photo";
+import useGetQuery from "@hooks/common/use-get-query";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { usePosAppProvider } from "@provider/app-provider";
+import { useCloseSession } from "@provider/pos-provider/close-session-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { useSessionStore } from "@store/session";
+import { useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import Actions from "./actions";
+import CloseSessionModalContainer from "./container";
+
+type TProps = {
+  posName: string;
+};
+
+export const CloseSessionConfirm = ({ posName }: TProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { getData } = useSale();
+  const posSessionData = getData(LoadDataModel.POS_SESSION);
+
+  const { setStep, sessionConfirmParams } = useSessionStore();
+  const { removeParam } = useQueryParams();
+  const { user: userData, company } = usePosAppProvider();
+  const { data: brandLogo } = useGetBase64Photo(
+    company?.companyInfo.data[0]?.logo
+  );
+  const { posId } = useGetQuery();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const {
+    getDataCloseSessionQuery: { data: dataCloseSession },
+    closeSession,
+  } = useCloseSession();
+
+  // const {
+  //   getPosQueryResult: { data: posDetailInfo },
+  // } = usePosTableProvider();
+
+  const posDetailInfo = getData(LoadDataModel.POS_CONFIG);
+
+  const [isClosing, setIsClosing] = useState(false);
+
+  const onContinue = async () => {
+    try {
+      setIsClosing(true);
+      await closeSession({
+        countedCash: sessionConfirmParams.cashCount,
+        notes: sessionConfirmParams.note,
+      });
+      setIsClosing(false);
+      setStep(0);
+      navigate(
+        `/console${
+          sessionStorage.getItem("enter_pincode") ??
+          localStorage.getItem("backUrl")
+        }`
+      );
+    } catch (e: any) {
+      toast.error(e?.message);
+      console.log("error", e);
+    }
+  };
+
+  const handleClose = () => {
+    setStep(0);
+    removeParam([QUERY_KEYS.OPEN]);
+  };
+
+  // const handlePrintBase64 = async (imgSrc: string) => {
+  //   if (!imgSrc) return
+  //   try {
+  //     await UsbPrinter.connect()
+  //     await UsbPrinter.printBase64({
+  //       data: imgSrc,
+  //     })
+
+  //     await UsbPrinter.disconnect()
+  //   } catch (e) {
+  //     console.error("USB Print failed:", e)
+  //   }
+  // }
+
+  const cashDifference = useMemo(() => {
+    const totalAmount = dataCloseSession?.default_cash_details?.amount || 0;
+    const totalCash = sessionConfirmParams.cashCount || 0;
+    return totalAmount - totalCash;
+  }, [dataCloseSession, sessionConfirmParams]);
+
+  const handlePrintText = async () => {
+    // if (!isAndroid) return;
+    // try {
+    //   await UsbPrinter.connect();
+    //   const cleanBase64 = brandLogo?.replace(
+    //     /^data:image\/[a-zA-Z]+;base64,/,
+    //     ""
+    //   );
+    //   await UsbPrinter.disconnect();
+    //   const textBill = await generateTextShift({
+    //     sessionConfirmParams,
+    //     userData,
+    //     posId,
+    //     dataCloseSession,
+    //     posDetailInfo,
+    //     cashDifference,
+    //     company,
+    //     openAt: posSessionData?.[0]?.start_at,
+    //   });
+    //   await UsbPrinter.printText({
+    //     text: textBill,
+    //     logoBase64: cleanBase64,
+    //   });
+    //   await UsbPrinter.disconnect();
+    // } catch (e) {
+    //   toast.error(`USB Print failed: ${e}`);
+    // }
+  };
+
+  return (
+    <CloseSessionModalContainer
+      isOpen={true}
+      onClose={handleClose}
+      title={t("confirm_close_session_title")}
+    >
+      <div className="flex flex-col h-full relative overflow-auto gap-3">
+        <div className="flex flex-col gap-1 flex-1">
+          <p className="text-text-primary text-lg font-semibold leading-[26px]">
+            {t("confirm_close_session", { sessionId: posName })}
+          </p>
+          <p className="text-text-secondary text-sm leading-5 tracking-[-0.12px]">
+            {t("check_session_info_before_closing")}
+          </p>
+        </div>
+
+        {/* <div className="overflow-auto hide-scrollbar">
+          <div ref={ref}>
+            <CloseSessionTicket />
+          </div>
+        </div> */}
+
+        <Actions
+          isDisabled={isClosing}
+          onContinue={async () => {
+            onContinue();
+            handlePrintText();
+          }}
+          buttonLabel={isClosing ? t("is_closing") : t("yes_button")}
+          className="flex flex-row-reverse items-center gap-2 w-full pt-6 sticky bottom-0 bg-white"
+        />
+      </div>
+    </CloseSessionModalContainer>
+  );
+};

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

@@ -0,0 +1,218 @@
+import { useGetBase64Photo } from "@hooks/common/use-get-base64-photo";
+import useGetQuery from "@hooks/common/use-get-query";
+import { usePosAppProvider } from "@provider/app-provider";
+import { useCloseSession } from "@provider/pos-provider/close-session-provider";
+import { LoadDataModel, useSale } from "@provider/pos-provider/sale-provider";
+import { useSessionStore } from "@store/session";
+import { formatCurrency, getDate, hh_mm_dd_mm_yyyy } from "@utils/functions";
+import { useMemo } from "react";
+
+const CloseSessionTicket = () => {
+  const { posId } = useGetQuery();
+  const { getData } = useSale();
+  const { sessionConfirmParams } = useSessionStore();
+  const { user: userData } = usePosAppProvider();
+  const user = userData?.userProfile?.data;
+  const company = useMemo(() => user?.company, [user]);
+  const address = useMemo(() => user?.company?.address, [user?.company]);
+  const addressFormat = useMemo(() => {
+    return `${address?.street ?? ""} ${address?.street2 ?? ""}, ${
+      address?.ward ?? ""
+    },  Tỉnh ${address?.state ?? ""}`;
+  }, [address]);
+
+  const { data: brandLogo } = useGetBase64Photo(company?.logo);
+
+  const {
+    getDataCloseSessionQuery: { data: dataCloseSession },
+  } = useCloseSession();
+
+  const posDetailInfo = getData(LoadDataModel.POS_CONFIG);
+
+  const currentPos = posDetailInfo?.records?.find(
+    (item: any) => item.id === Number(posId)
+  );
+
+  const date = getDate(new Date());
+
+  const cashDifference = useMemo(() => {
+    const totalAmount = dataCloseSession?.default_cash_details?.amount || 0;
+    const totalCash = sessionConfirmParams.cashCount || 0;
+    return totalAmount - totalCash;
+  }, [dataCloseSession, sessionConfirmParams]);
+
+  return (
+    <div className="inline-flex w-full flex-col items-center gap-3 rounded-2xl bg-white">
+      <div className="flex flex-col items-center justify-center gap-2 self-stretch">
+        {brandLogo && <img className="w-[20%]" src={brandLogo} />}
+        <div className="flex flex-col items-center justify-center gap-2 self-stretch font-normal text-strong-950">
+          <div className="text-xs font-semibold">{company?.invoice_name}</div>
+          <div className="text-[10px]">{addressFormat}</div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-start justify-start gap-2 self-stretch">
+        <div className="flex flex-col items-center justify-center gap-1 self-stretch">
+          <div className="text-center text-xs font-bold leading-7 text-strong-950">
+            PHIẾU GIAO CA
+          </div>
+          {[
+            [
+              {
+                title: "Mã ca / Quầy",
+                value: [
+                  currentPos?.current_session_id?.display_name,
+                  currentPos?.name,
+                ].join(" / "),
+              },
+              undefined,
+              {
+                title: "Nhân viên",
+                value: currentPos?.current_user_id?.display_name,
+              },
+            ],
+            [
+              { title: "Giờ mở ca", value: hh_mm_dd_mm_yyyy(new Date()) },
+              undefined,
+              { title: "Giờ đóng ca", value: hh_mm_dd_mm_yyyy(new Date()) },
+            ],
+          ].map((row, i) => (
+            <div
+              key={i}
+              className="flex w-full items-stretch gap-2 text-[10px] font-normal text-strong-950"
+            >
+              {row.map((cell, idx) => {
+                if (!cell)
+                  return (
+                    <div key={idx} className="w-[1.5px] bg-soft-400"></div>
+                  );
+                return (
+                  <div
+                    key={cell.title}
+                    className="flex flex-1 items-center gap-1"
+                  >
+                    <div>{cell.title}:</div>
+                    <div className="font-medium">{cell.value}</div>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+
+        <div className="h-[1px] bg-soft-400"></div>
+
+        <div className="inline-flex self-stretch text-xs font-semibold text-strong-950">
+          <div className="flex-1">Tiền mặt đầu ca (1)</div>
+          <div>
+            {formatCurrency(dataCloseSession?.default_cash_details?.opening) ||
+              0}
+            đ
+          </div>
+        </div>
+
+        <div className="h-[1px] bg-soft-400"></div>
+
+        {[
+          {
+            title: "Tiền mặt trong ca (2)",
+            value: `${
+              formatCurrency(
+                dataCloseSession?.default_cash_details?.payment_amount
+              ) || 0
+            }đ`,
+            items: [
+              {
+                title: "Bán hàng",
+                value: `${
+                  formatCurrency(
+                    dataCloseSession?.default_cash_details?.payment_amount
+                  ) || 0
+                }đ`,
+              },
+            ],
+          },
+          undefined,
+          {
+            title: "Tiền mặt cuối ca (3)=(1)+(2)",
+            value: `${
+              formatCurrency(dataCloseSession?.default_cash_details?.amount) ||
+              0
+            }đ`,
+            items: [
+              {
+                title: "Tiền mặt bàn giao thực tế",
+                value: `${
+                  formatCurrency(sessionConfirmParams.cashCount) || 0
+                }đ`,
+              },
+              {
+                title: "Số tiền chênh lệch",
+                value: `${formatCurrency(cashDifference) || 0}đ`,
+              },
+            ],
+          },
+          undefined,
+          {
+            title: "Phương thức thanh toán khác",
+            value: `${
+              formatCurrency(
+                dataCloseSession?.non_cash_payment_methods?.reduce(
+                  (a: number, b: any) => a + (b?.amount || 0),
+                  0
+                )
+              ) || 0
+            }đ`,
+            items:
+              dataCloseSession?.non_cash_payment_methods?.map((item: any) => ({
+                title: item?.name ?? "",
+                value: formatCurrency(item?.amount || 0),
+              })) || [],
+          },
+        ].map((section, idx) => {
+          if (!section)
+            return <div key={idx} className="h-[1px] bg-soft-400"></div>;
+          return (
+            <div
+              key={idx}
+              className="flex flex-col items-start gap-2 self-stretch"
+            >
+              <div className="inline-flex items-start justify-between self-stretch text-sm font-semibold text-strong-950">
+                <div className="text-xs w-full min-w-fit">{section.title}</div>
+                <div className="text-xs">{section.value}</div>
+              </div>
+              {section.items?.map((item: any) => (
+                <div
+                  key={item.title}
+                  className="inline-flex justify-between self-stretch text-[10px] font-normal text-strong-950"
+                >
+                  <div>{item.title}</div>
+                  <div className="font-semibold">{item.value}</div>
+                </div>
+              ))}
+            </div>
+          );
+        })}
+
+        <div className="h-[1px] bg-soft-400"></div>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 self-stretch text-xs text-strong-950 flex-shrink-0">
+        <div className="w-full text-center font-normal">
+          Ngày {date.day} tháng {date.month} năm {date.year}
+        </div>
+        <div className="flex flex-col gap-20 items-center w-full">
+          <div className="flex w-full items-center gap-8 text-sm font-semibold text-strong-950">
+            <div className="flex-1 text-center">Người bàn giao</div>
+            <div className="flex-1 text-center">Người nhận bàn giao</div>
+          </div>
+          <div className="text-xs font-normal mt-4 text-center min-w-fit">
+            Powered by {company?.companyInfo?.data?.[0]?.display_name}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CloseSessionTicket;

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

@@ -0,0 +1,25 @@
+import ModalDirection from "@components/common/modal/modal-direction";
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  title: string;
+};
+
+function CloseSessionModalContainer(props: TProps) {
+  const { isOpen, onClose, children, title } = props;
+
+  return (
+    <ModalDirection
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      className="overflow-hidden"
+    >
+      <div className="flex flex-col h-full">{children}</div>
+    </ModalDirection>
+  );
+}
+
+export default CloseSessionModalContainer;