sme-pos-package 1.0.7 → 1.0.9

package/src/components/pos-management/pos-helpers/index.tsx

@@ -0,0 +1,135 @@
+import { IcBackPos, IcLayout } from "@assets/icons/helper-icon";
+import LogoutBoxLineIcon from "@assets/icons/logout-box-line-icon";
+import PrinterLineIcon from "@assets/icons/printer-line-icon";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import CloseSessionModal from "@components/session-management/close-session-modal";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useCloseSession } from "@provider/pos-provider/close-session-provider";
+import { useSessionStore } from "@store/session";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import { BackConfirm } from "./back-confirm";
+import LayoutDisplayModal from "./layout-display-modal";
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+enum PosHelper {
+  SETTING_PRINT = "setting-print",
+  LAYOUT_DISPLAY = "layout-display",
+  CLOSE_SESSION = "close-session",
+  BACK_POS = "back-pos",
+}
+
+const OPTIONS = [
+  {
+    id: 1,
+    label: "Bố cục hiển thị",
+    value: PosHelper.LAYOUT_DISPLAY,
+    icon: IcLayout,
+  },
+  {
+    id: 2,
+    label: "Cài đặt máy in",
+    value: PosHelper.SETTING_PRINT,
+    icon: PrinterLineIcon,
+  },
+  {
+    id: 3,
+    label: "Trở về điểm bán",
+    value: PosHelper.BACK_POS,
+    icon: IcBackPos,
+  },
+  {
+    id: 4,
+    label: "Đóng ca",
+    value: PosHelper.CLOSE_SESSION,
+    icon: LogoutBoxLineIcon,
+  },
+];
+
+export const PosHelperModal = ({ isOpen, onClose }: TProps) => {
+  const { setStep, step } = useSessionStore();
+  const { updateQuery } = useQueryParams();
+
+  const { getDataCloseSessionQuery, draftInPaidOrders } = useCloseSession();
+
+  const [showWarning, setShowWarning] = useState(false);
+  const [showLayoutDisplay, setShowLayoutDisplay] = useState(false);
+
+  const onShowComingSoon = () => toast.info("Đang phát triển");
+
+  const handleCloseSession = async () => {
+    updateQuery(QUERY_KEYS.OPEN, QUERY_KEYS.CLOSE_SESSION);
+    await getDataCloseSessionQuery.refetch();
+    if (draftInPaidOrders.length > 0) setStep(1);
+    else setStep(3);
+  };
+
+  const onShowLayoutDisplay = () => {
+    setShowLayoutDisplay(true);
+    onClose();
+  };
+
+  const handleOptionClick = (value: PosHelper) => {
+    switch (value) {
+      case PosHelper.BACK_POS:
+        setShowWarning(true);
+        break;
+      case PosHelper.SETTING_PRINT:
+        onShowComingSoon();
+        break;
+      case PosHelper.LAYOUT_DISPLAY:
+        onShowLayoutDisplay();
+        break;
+      case PosHelper.CLOSE_SESSION:
+        handleCloseSession();
+        onClose();
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <>
+      <ModalZoom
+        isOpen={isOpen}
+        onClose={onClose}
+        className="border-[0.5px] border-stroke-disabled p-2 bg-neutral-100-96 rounded-xl"
+        modalClassName="w-[70%]"
+      >
+        <div className="grid grid-cols-2 gap-2">
+          {OPTIONS.map((option) => (
+            <button
+              key={option.id}
+              onClick={() => {
+                handleOptionClick(option.value);
+              }}
+              className="flex flex-col items-center gap-4 w-full h-[189px] rounded-2xl bg-white justify-center text-colored-primary"
+            >
+              <option.icon />
+              <span className="text-text-primary text-2xl font-semibold leading-8 tracking-[-0.24px]">
+                {option.label}
+              </span>
+            </button>
+          ))}
+        </div>
+      </ModalZoom>
+
+      <BackConfirm isOpen={showWarning} onClose={() => setShowWarning(false)} />
+
+      {showLayoutDisplay && (
+        <LayoutDisplayModal
+          isOpen={showLayoutDisplay}
+          onClose={() => setShowLayoutDisplay(false)}
+        />
+      )}
+
+      {step > 0 && <CloseSessionModal />}
+    </>
+  );
+};

package/src/components/pos-management/pos-helpers/layout-display-modal.tsx

@@ -0,0 +1,99 @@
+import Image from "@components/common/image";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import useHeaderStore from "@store/header";
+import { cn } from "@utils/functions";
+import { localStorageUtils } from "@utils/storages";
+import { useState } from "react";
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const LAYOUT_OPTIONS = [
+  {
+    value: "left",
+    imageUrl: "/assets/images/layout-display/left-layout.png",
+    label: "Đơn hàng bên trái",
+  },
+  {
+    value: "right",
+    imageUrl: "/assets/images/layout-display/right-layout.png",
+    label: "Đơn hàng bên phải",
+  },
+];
+
+const LayoutDisplayModal = ({ isOpen, onClose }: TProps) => {
+  const layoutDisplayLocal = localStorageUtils.getLayoutDisplay();
+
+  const [layoutSelected, setLayoutSelected] = useState(
+    layoutDisplayLocal || "left"
+  );
+
+  const { setLayoutDisplay } = useHeaderStore();
+
+  const handleChooseLayout = () => {
+    setLayoutDisplay(layoutSelected as "left" | "right");
+    localStorageUtils.setLayoutDisplay(layoutSelected as "left" | "right");
+    onClose();
+  };
+
+  return (
+    <ModalZoom
+      isOpen={isOpen}
+      onClose={onClose}
+      modalClassName="rounded-2xl border-[0.5px] border-stroke-disabled bg-white w-[600px]"
+      title="Tuỳ chỉnh bố cục hiển thị"
+      headerClassName="px-5 py-4 border-b border-stroke-disabled"
+      className="px-5 py-4"
+    >
+      <div className="flex flex-col gap-4">
+        <p className="text-text-primary font-medium leading-6 tracking-[-0.24px]">
+          Chọn vị trí hiển thị thông tin đơn hàng theo sở thích của bạn
+        </p>
+
+        <div className="flex items-center justify-center w-full gap-6">
+          {LAYOUT_OPTIONS.map((item, index) => (
+            <div className="flex flex-col gap-3">
+              <div
+                key={index}
+                style={{
+                  boxShadow:
+                    item.value === layoutSelected
+                      ? "0 0 0 3px rgba(255, 138, 0, 0.24)"
+                      : "",
+                }}
+                onClick={() =>
+                  setLayoutSelected(item.value as "left" | "right")
+                }
+                className={cn("flex-1 border-stroke-disabled rounded-[20px]", {
+                  "border-primary border-2 p-2 ": layoutSelected === item.value,
+                  "p-[9px]": layoutSelected !== item.value,
+                })}
+              >
+                <Image imageUrl={item.imageUrl} className="w-full" />
+              </div>
+
+              <p className="font-medium leading-6 text-center text-text-primary tracking-[-0.24px]">
+                {item.label}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="w-full flex justify-end">
+          <button
+            className="w-[200px] h-11 bg-primary text-text-primary rounded-lg"
+            onClick={handleChooseLayout}
+          >
+            <span className="text-sm font-semibold leading-5 tracking-[-0.12px]">
+              Lưu
+            </span>
+          </button>
+        </div>
+      </div>
+    </ModalZoom>
+  );
+};
+
+export default LayoutDisplayModal;

package/src/components/pos-management/search.tsx

@@ -0,0 +1,48 @@
+import { IcSearch } from "@assets/icons/breadcrumbs-icon"
+import { IcClose } from "@assets/icons/common"
+
+type TProps = {
+  onClose: () => void
+  searchValue: string
+  onSearchChange: (value: string) => void
+  placeholder: string
+  isNumericMode?: boolean
+}
+
+const Search = ({
+  onClose,
+  searchValue,
+  onSearchChange,
+  placeholder,
+  isNumericMode = false,
+}: TProps) => {
+  const handleClose = () => {
+    onClose()
+    onSearchChange("")
+  }
+
+  return (
+    <div className="w-full pl-4 h-[60px] flex items-center gap-2 bg-white pr-[6px] text-tertiary border-b-2 border-primary">
+      <IcSearch />
+
+      <input
+        inputMode={isNumericMode ? "numeric" : "text"}
+        pattern={isNumericMode ? "[0-9]*" : undefined}
+        value={searchValue}
+        onChange={(e) =>
+          onSearchChange(
+            isNumericMode ? e.target.value.replace(/\D/g, "") : e.target.value
+          )
+        }
+        className="flex-1 font-medium leading-6 text-text-primary tracking-[-0.24px] placeholder:text-tertiary outline-none border-none"
+        placeholder={placeholder}
+      />
+
+      <button onClick={handleClose}>
+        <IcClose />
+      </button>
+    </div>
+  )
+}
+
+export default Search

package/src/components/pos-management/table-content/filtered-tables.tsx

@@ -0,0 +1,59 @@
+import { EmptyState } from "@components/common/empty-state";
+import { usePosTable } from "@provider/pos-provider/table-provider";
+import { TMapedTable } from "@type/table";
+import { cn } from "@utils/functions";
+import { TableItem } from "./table-item";
+
+type TProps = {
+  filteredFloors: any[];
+  searchValue?: string;
+};
+
+const FilteredTables = ({ filteredFloors, searchValue }: TProps) => {
+  const { mapTablesWithOrder } = usePosTable();
+
+  return (
+    <div
+      className={cn("z-0 w-full h-full p-4 overflow-y-auto flex-1 ", {
+        "bg-white": filteredFloors && filteredFloors.length > 0,
+      })}
+    >
+      {filteredFloors && filteredFloors.length > 0 ? (
+        <div className="flex flex-col gap-4">
+          {filteredFloors.map((floor) => {
+            return (
+              <div className="flex flex-col gap-4" key={floor.id}>
+                <p className="px-2 py-1 rounded bg-neutral-100-96">
+                  <span className="font-semibold text-text-primary leading-6 tracking-[-0.24px]">
+                    {floor.name}
+                  </span>
+                </p>
+                {mapTablesWithOrder?.map((item: TMapedTable) => (
+                  <div
+                    key={item.table.id}
+                    className="grid gap-5 grid-cols-[repeat(auto-fill,minmax(157px,1fr))]"
+                  >
+                    <TableItem key={item.table.id} tableCard={item} />
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      ) : searchValue ? (
+        <div className="z-0 h-full">
+          <EmptyState
+            image="/assets/images/empty-table-state.png"
+            imageAlt="No table"
+            description="Không có bàn bạn tìm kiếm"
+            imageClassName="w-[342px] h-[320px]"
+          />
+        </div>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
+
+export default FilteredTables;

package/src/components/pos-management/table-content/floor-tabs.tsx

@@ -0,0 +1,65 @@
+import { IcSearch } from "@assets/icons/breadcrumbs-icon";
+import IcHomeGearLine from "@assets/icons/home-gear-line-icon";
+import { ButtonIcon } from "@components/common/button-icon";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { TFloor } from "@type/floor/floor";
+import { Dispatch, SetStateAction } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { RefreshButton, TabsLayout } from "../../common/tabs-layout";
+import POSPath from "@constants/routes.constants";
+
+export const FloorTabs = ({
+  floorData,
+  onRefresh,
+  setOpenSearch,
+}: {
+  floorData: TFloor[];
+  onRefresh: () => void;
+  setOpenSearch: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  return (
+    <>
+      {floorData.length > 0 && (
+        <TabsLayout
+          tabs={floorData.map((floor) => ({
+            id: floor.id,
+            name: floor.name,
+          }))}
+          queryKey={QUERY_KEYS.FLOOR}
+          rightButton={
+            <>
+              <ButtonIcon
+                onClick={() => {
+                  setOpenSearch(true);
+                }}
+                iconSrc={<IcSearch />}
+              />
+              <RefreshButton onRefresh={onRefresh} />
+            </>
+          }
+          alwaysShowButton={
+            <div
+              id="create-first-table"
+              data-menu-id={32}
+              data-menu-level={1}
+              data-tooltip-id={`menu-${32}`}
+            >
+              <ButtonIcon
+                onClick={() =>
+                  navigate({
+                    pathname: POSPath.MANAGEMENT_FLOOR,
+                    search: searchParams.toString(),
+                  })
+                }
+                iconSrc={<IcHomeGearLine />}
+              />
+            </div>
+          }
+        />
+      )}
+    </>
+  );
+};

package/src/components/pos-management/table-content/index.tsx

@@ -0,0 +1,76 @@
+import Search from "@components/pos-management/search";
+import { FloorTabs } from "@components/pos-management/table-content/floor-tabs";
+import { AddTableModal } from "@components/restaurant-management/add-table-modal";
+import { useFloor } from "@provider/pos-provider/floor-provider";
+import { driver } from "driver.js";
+import { useEffect, useMemo, useState } from "react";
+import FilteredTables from "./filtered-tables";
+import Tables from "./tables";
+
+const TableContent = () => {
+  const { floors: floorData } = useFloor();
+  const [searchValue, setSearchValue] = useState("");
+  const [openSearch, setOpenSearch] = useState(false);
+  const [isOpenAddModal, setIsOpenAddModal] = useState(false);
+
+  const filteredFloors = useMemo(() => {
+    if (!floorData) return [];
+
+    if (!searchValue) return [];
+
+    return floorData;
+  }, [floorData, searchValue]);
+
+  useEffect(() => {
+    const numberTable = floorData.reduce((acc: number, floor: any) => {
+      return acc + floor?.table_ids?.length;
+    }, 0);
+
+    if (numberTable && numberTable < 1) {
+      const driverObj = driver();
+      driverObj.highlight({
+        element: "#create-first-table",
+        popover: {
+          title: "Tạo bàn đầu tiên",
+          description:
+            "Có vẻ như bạn chưa có bàn nào. Để tạo một bàn mới hãy nhấp vào biểu tượng ngôi nhà",
+        },
+      });
+    }
+  }, [floorData]);
+
+  return (
+    <div className="flex flex-col flex-1 size-full bg-white">
+      {openSearch ? (
+        <Search
+          onClose={() => setOpenSearch(false)}
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          placeholder="Tìm kiếm bàn"
+          isNumericMode
+        />
+      ) : (
+        <FloorTabs
+          floorData={floorData}
+          onRefresh={() => {}}
+          setOpenSearch={setOpenSearch}
+        />
+      )}
+
+      {!openSearch && <Tables onOpenAddModal={() => setIsOpenAddModal(true)} />}
+      {openSearch && (
+        <FilteredTables
+          filteredFloors={filteredFloors}
+          searchValue={searchValue}
+        />
+      )}
+
+      <AddTableModal
+        isOpen={isOpenAddModal}
+        onClose={() => setIsOpenAddModal(false)}
+      />
+    </div>
+  );
+};
+
+export default TableContent;

package/src/components/pos-management/table-content/table-item.tsx

@@ -0,0 +1,127 @@
+import { IcAvailableTable, IcSeatTable } from "@assets/icons/table-icon";
+import Image from "@components/common/image";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { useOrder } from "@provider/pos-provider/order-provider";
+import { TMapedTable } from "@type/table";
+import { cn } from "@utils/functions";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+export const TableItem = ({ tableCard }: { tableCard: TMapedTable }) => {
+  const { table, isTakeAway, currentOrder } = tableCard;
+  const { t } = useTranslation();
+  const { getQuery, updateMultipleQuery } = useQueryParams();
+  const tableId = getQuery(QUERY_KEYS.TABLE_ID);
+  const orderId = getQuery(QUERY_KEYS.ORDER_ID);
+  const { handleCreateOrder, draftOrders } = useOrder();
+  const isActiveTable = useMemo(() => {
+    return ((currentOrder
+      ? currentOrder?.id?.toString() === orderId
+      : isTakeAway && !tableId && orderId) ?? false) as boolean;
+  }, [tableId, orderId, currentOrder]);
+
+  const takeAwayOrders = useMemo(() => {
+    return draftOrders.filter((order) => !order.table_id);
+  }, [draftOrders]);
+
+  const onClickTableItem = (table: TMapedTable) => {
+    if (table.isTakeAway) {
+      if (takeAwayOrders.length == 0) {
+        onCreateOrder();
+      } else if (tableId) {
+        updateMultipleQuery([
+          {
+            key: QUERY_KEYS.ORDER_ID,
+            value: String(takeAwayOrders[0]?.id),
+          },
+          {
+            key: QUERY_KEYS.TABLE_ID,
+            value: "",
+          },
+        ]);
+      }
+    } else if (table.currentOrder) {
+      updateMultipleQuery([
+        {
+          key: QUERY_KEYS.ORDER_ID,
+          value: table.currentOrder?.id?.toString() ?? "",
+        },
+        {
+          key: QUERY_KEYS.TABLE_ID,
+          value: table.table.id != 0 ? table.table.id?.toString() : "",
+        },
+      ]);
+    } else onCreateOrder(table.table.id);
+  };
+
+  const onCreateOrder = (tableId?: number) => {
+    handleCreateOrder(tableId);
+  };
+
+  return (
+    <div
+      className={cn(
+        "rounded-xl size-full flex flex-col items-center px-2 pb-2 gap-2 h-[100px] cursor-pointer",
+        {
+          "border-sub-secondary border": !currentOrder,
+        }
+      )}
+      style={{
+        background: isTakeAway
+          ? "var(--text-take-away-color)"
+          : currentOrder
+          ? "var(--text-unavailable-table-color)"
+          : "white",
+        boxShadow: isActiveTable ? `0 0 0 2px #FFF, 0 0 0 4px #0101FF` : "",
+      }}
+      onClick={() => onClickTableItem(tableCard)}
+    >
+      <div
+        className={`w-[110px] h-6 px-2 rounded-b-xl flex text-sm font-semibold items-center ${
+          !isTakeAway && !currentOrder ? "bg-neutral-100-96" : "bg-white"
+        } ${isTakeAway ? "justify-center" : "justify-between"} `}
+      >
+        <p className=" text-text-primary">
+          {isTakeAway ? "Mang đi" : `${t("table")} ${table.table_number}`}
+        </p>
+        {!isTakeAway && (
+          <div className="flex gap-1 items-center text-text-active">
+            <IcSeatTable />
+            <p className="text-sm font-semibold">{table.seats}</p>
+          </div>
+        )}
+      </div>
+      <div
+        className={`flex-1 w-full rounded-lg flex items-center justify-center  ${
+          !isTakeAway && !currentOrder
+            ? "bg-[#FAFAFA] border-dashed border-stroke-disabled border text-text-active"
+            : "bg-white "
+        }`}
+      >
+        {isTakeAway ? (
+          <div className="flex items-center gap-[10px]">
+            <Image
+              imageUrl="/assets/images/take-away.png"
+              className="w-12 aspect-square"
+            />
+            <p className="text-sm font-medium text-text-primary">
+              {takeAwayOrders?.length ?? 0} đơn
+            </p>
+          </div>
+        ) : currentOrder ? (
+          <div className="flex flex-col gap-1 items-center justify-center">
+            <p className="text-sm font-medium text-text-disable leading-5 tracking-[-0.12px] text-text-active">
+              Đơn hàng
+            </p>
+            <p className="text-text-primary text-[18px] font-semibold leading-6">
+              #{currentOrder?.id}
+            </p>
+          </div>
+        ) : (
+          <IcAvailableTable />
+        )}
+      </div>
+    </div>
+  );
+};