sme-pos-package 1.0.14 → 1.0.15

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

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

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

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

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

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

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