sme-pos-package 1.0.7 → 1.0.9

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

@@ -0,0 +1,96 @@
+import { EmptyState } from "@components/common/empty-state";
+import { usePosTable } from "@provider/pos-provider/table-provider";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TableItem } from "./table-item";
+
+type TProps = {
+  onOpenAddModal: () => void;
+};
+const tableType = [
+  {
+    id: 1,
+    name: "Tất cả",
+    value: "all",
+  },
+  {
+    id: 2,
+    name: "Trống",
+    value: "available",
+  },
+  {
+    id: 3,
+    name: "Đang sử dụng",
+    value: "unavailable",
+  },
+];
+const Tables = ({ onOpenAddModal }: TProps) => {
+  const { t } = useTranslation();
+  const { mapTablesWithOrder } = usePosTable();
+  const [type, setType] = useState(tableType[0].value);
+
+  const getFilterTable = (value: string) => {
+    switch (value) {
+      case "all":
+        return mapTablesWithOrder;
+      case "available":
+        return mapTablesWithOrder.filter(
+          (table) => !table.currentOrder && !table.isTakeAway
+        );
+      case "unavailable":
+        return mapTablesWithOrder.filter(
+          (table) => !!table.currentOrder && !table.isTakeAway
+        );
+    }
+  };
+
+  const filteredByTypeTables = useMemo(() => {
+    return getFilterTable(type);
+  }, [mapTablesWithOrder, type]);
+
+  return (
+    <div className="flex flex-col py-4 flex-1 overflow-y-auto border-t border-stroke-default">
+      <div className="flex gap-3 justify-center">
+        {tableType.map((table) => {
+          const isActive = type === table.value;
+          const size = getFilterTable(table.value)?.length ?? 0;
+          return (
+            <div
+              key={table.id}
+              onClick={() => setType(table.value)}
+              className={`h-11 px-3 flex justify-center items-center  rounded-full cursor-pointer ${
+                isActive
+                  ? "border-primary text-primary border-[2px]"
+                  : "border-stroke-disabled text-text-primary border"
+              }`}
+            >
+              {table.name} ({size})
+            </div>
+          );
+        })}
+      </div>
+      <div className="z-0 w-full overflow-y-auto flex-1 p-4">
+        {filteredByTypeTables && filteredByTypeTables.length > 0 ? (
+          <div className="grid gap-5 grid-cols-[repeat(auto-fill,minmax(157px,1fr))]">
+            {filteredByTypeTables.map((table) => (
+              <TableItem key={table.table.id} tableCard={table} />
+            ))}
+          </div>
+        ) : (
+          <div className="z-0">
+            <EmptyState
+              image="/assets/images/empty-table-state.png"
+              imageAlt={t("no_table")}
+              title={t("no_table")}
+              description={t("try_add_table")}
+              buttonLabel={t("create_table")}
+              onAction={onOpenAddModal}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Tables;

package/src/components/restaurant-management/add-floor-modal.tsx

@@ -0,0 +1,133 @@
+import { IcPlus } from "@assets/icons/common";
+import ButtonAction from "@components/common/button-action";
+import Input from "@components/common/input";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useFloor } from "@provider/pos-provider/floor-provider";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import z from "zod";
+
+type TProps = {
+  defaultName?: string;
+  editingFloor?: number;
+  setIsEditingFloor?: (val: number | undefined) => void;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const AddFloorModal = ({
+  defaultName,
+  editingFloor,
+  setIsEditingFloor,
+  isOpen,
+  onClose,
+}: TProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { floors, onCreateFloor, onUpdateFloor } = useFloor();
+  const { t } = useTranslation();
+
+  const matchedFloor = useMemo(() => {
+    return floors.find((floor) => floor.id === editingFloor);
+  }, [floors]);
+
+  const {
+    handleSubmit,
+    register,
+    setValue,
+    formState: { errors },
+    setError,
+  } = useForm({
+    defaultValues: {
+      name: defaultName || "",
+    },
+    mode: "onChange",
+    resolver: zodResolver(
+      z.object({
+        name: z.string().min(1, "Tên tầng là bắt buộc"), //TODO
+      })
+    ),
+  });
+
+  const onSubmit = handleSubmit((data) => {
+    try {
+      setIsLoading(true);
+      if (editingFloor) handleEditFloorSubmit(data.name);
+      else handleAddFloorSubmit(data.name);
+    } catch (error: any) {
+      setError("name", { message: error?.message || "Lỗi không xác định" }); //TODO
+      setIsLoading(false);
+      console.error("Create floor error:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  });
+
+  const handleAddFloorSubmit = async (name: string) => {
+    await onCreateFloor(name, () => {
+      setValue("name", "");
+      onClose();
+    });
+  };
+
+  const handleEditFloorSubmit = async (name: string) => {
+    if (!editingFloor) return;
+    await onUpdateFloor(Number(editingFloor), name, () => {
+      setValue("name", "");
+      onClose();
+      setIsEditingFloor && setIsEditingFloor(undefined);
+    });
+  };
+
+  const handleClose = () => {
+    setValue("name", "");
+    setError("name", { message: "" });
+    onClose();
+    setIsEditingFloor && setIsEditingFloor(undefined);
+  };
+
+  useEffect(() => {
+    if (editingFloor) setValue("name", matchedFloor?.name || "");
+  }, [editingFloor]);
+
+  return (
+    <ModalZoom
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={editingFloor ? t("edit_floor") : t("add_floor")}
+      className="p-6 rounded-2xl bg-white w-[472px]"
+    >
+      <form onSubmit={onSubmit} className="flex flex-col gap-6">
+        <Input
+          title={t("floor_name")}
+          register={register("name")}
+          errorMessage={errors.name?.message}
+          isRequired
+          inputClassName="p-3"
+          placeholder="Nhập tên tầng" //TODO
+        />
+
+        <div className="flex gap-2 w-full">
+          <ButtonAction
+            text={t("cancel_button")}
+            className="button-secondary w-full h-[60px]"
+            onClick={handleClose}
+          />
+          <ButtonAction
+            type="submit"
+            text={
+              isLoading
+                ? t("loading")
+                : editingFloor
+                ? t("edit_floor")
+                : t("add_floor_btn_label")
+            }
+            className="button-primary w-full h-[60px]"
+            iconSrc={isLoading || editingFloor ? "" : <IcPlus />}
+          />
+        </div>
+      </form>
+    </ModalZoom>
+  );
+};

package/src/components/restaurant-management/add-table-modal.tsx

@@ -0,0 +1,198 @@
+import { IcPlus, IcTrash } from "@assets/icons/common";
+import ButtonAction from "@components/common/button-action";
+import Input from "@components/common/input";
+import ModalZoom from "@components/common/modal/modal-zoom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import useGetQuery from "@hooks/common/use-get-query";
+import { usePosTable } from "@provider/pos-provider/table-provider";
+import { TBasicTable } from "@type/table";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import z from "zod";
+
+const schema = z.object({
+  tableNumber: z.coerce.number("Vui lòng nhập số").min(1, "Số bàn là bắt buộc"),
+  seats: z.coerce.number("Vui lòng nhập số").min(1, "Sức chứa là bắt buộc"),
+});
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  editMode?: boolean;
+  tableSelected?: TBasicTable;
+  onOpenDeleteConfirmModal?: () => void;
+  onTableSelected?: (table: TBasicTable | undefined) => void;
+};
+
+export const AddTableModal = ({
+  isOpen,
+  onClose,
+  editMode,
+  tableSelected,
+  onOpenDeleteConfirmModal,
+  onTableSelected,
+}: TProps) => {
+  const { t } = useTranslation();
+  const {
+    onCreateTable,
+    tablesByFloor: tableData,
+    onUpdateTable,
+    mapTablesWithOrder,
+  } = usePosTable();
+  const { floorId } = useGetQuery();
+  const [loading, setLoading] = useState(false);
+
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    setValue,
+    setError,
+  } = useForm({
+    defaultValues: {
+      tableNumber: "",
+      seats: "",
+    },
+    mode: "onChange",
+    resolver: zodResolver(schema),
+  });
+
+  const onSubmit = handleSubmit(async (data) => {
+    const payload = {
+      tableNumber: data.tableNumber,
+      seats: Number(data.seats),
+    };
+
+    const isExist = tableData?.some(
+      (table: TBasicTable) =>
+        table.table_number === Number(payload.tableNumber) &&
+        table.table_number !== tableSelected?.table_number
+    );
+
+    if (isExist) {
+      toast.error("Bàn đã tồn tại"); //TODO
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      if (editMode) {
+        onUpdateTable({
+          tableId: tableSelected?.id || 0,
+          tableNumber: String(payload.tableNumber),
+          seats: payload.seats,
+        });
+      } else {
+        onCreateTable({
+          tableNumber: payload.tableNumber,
+          seats: payload.seats,
+          floorId: Number(floorId),
+        });
+      }
+    } catch (error: any) {
+      toast.error(error?.message);
+    } finally {
+      handleClose();
+      onTableSelected?.(undefined);
+      setLoading(false);
+    }
+  });
+
+  const handleClose = () => {
+    setValue("tableNumber", "");
+    setValue("seats", "");
+    setError("tableNumber", { message: "" });
+    setError("seats", { message: "" });
+    onClose();
+  };
+
+  const isTableContainOrder = useMemo(() => {
+    return mapTablesWithOrder.find(
+      (table) => table.table.id === tableSelected?.id
+    )?.currentOrder;
+  }, [tableSelected]);
+
+  const handleDeleteTable = () => {
+    if (isTableContainOrder) {
+      toast.error("Bàn đang có đơn hàng");
+    } else {
+      onOpenDeleteConfirmModal?.();
+      handleClose();
+    }
+  };
+
+  useEffect(() => {
+    if (tableSelected) {
+      setValue("tableNumber", tableSelected.table_number);
+      setValue("seats", tableSelected.seats);
+    }
+  }, [tableSelected]);
+
+  return (
+    <ModalZoom
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={editMode ? t("edit_table") : t("add_new_table")}
+      className="p-6 rounded-2xl bg-white"
+      headerAction={
+        editMode && (
+          <button onClick={handleDeleteTable} className="text-state-error-base">
+            <IcTrash />
+          </button>
+        )
+      }
+    >
+      <form onSubmit={onSubmit} className="flex flex-col gap-6">
+        <div className="flex items-center justify-center gap-6 w-full">
+          <Input
+            title="Số bàn" //TODO
+            register={register("tableNumber")}
+            placeholder="Nhập tên bàn" //TODO
+            isRequired
+            inputMode="numeric"
+            type="number"
+            errorMessage={errors.tableNumber?.message}
+            className="flex-1"
+            inputClassName="py-[15px] px-3"
+          />
+
+          <Input
+            title="Sức chứa" //TODO
+            register={register("seats")}
+            placeholder="Nhập sức chứa" //TODO
+            isRequired
+            inputMode="numeric"
+            type="number"
+            errorMessage={errors.seats?.message}
+            className="flex-1"
+            inputClassName="py-[15px] px-3"
+          />
+        </div>
+
+        <div className="flex gap-2 w-full">
+          <ButtonAction
+            text={t("cancel_button")}
+            className="button-secondary w-full h-[60px]"
+            onClick={handleClose}
+          />
+          <ButtonAction
+            type="submit"
+            disabled={loading}
+            text={
+              loading
+                ? t("loading")
+                : editMode
+                ? t("update_button")
+                : t("add_table")
+            }
+            className="button-primary w-full h-[60px]"
+            iconSrc={loading || editMode ? "" : <IcPlus />}
+          />
+        </div>
+      </form>
+    </ModalZoom>
+  );
+};

package/src/components/restaurant-management/delete-floor-confirm-modal.tsx

@@ -0,0 +1,42 @@
+import DeleteConfirmModalContainer from "@components/common/modal/delete-confirm-modal-container";
+import { useFloor } from "@provider/pos-provider/floor-provider";
+import { Trans, useTranslation } from "react-i18next";
+
+const DeleteFloorConfirmModal = ({
+  isOpen,
+  onClose,
+  floorId,
+  floorName,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  floorId: number;
+  floorName: string;
+}) => {
+  const { t } = useTranslation();
+  const { onDeleteFloor } = useFloor();
+
+  const deleteFloor = async () => {
+    await onDeleteFloor(floorId, () => {
+      onClose();
+    });
+  };
+
+  return (
+    <DeleteConfirmModalContainer
+      title={t("confirm_delete_floor")}
+      description={
+        <Trans
+          i18nKey="confirm_delete_table"
+          values={{ floorName }}
+          components={{ bold: <span className="text-text-primary" /> }}
+        />
+      }
+      onAction={deleteFloor}
+      onClose={onClose}
+      isOpen={isOpen}
+    />
+  );
+};
+
+export default DeleteFloorConfirmModal;

package/src/components/restaurant-management/delete-table-confirm-modal.tsx

@@ -0,0 +1,51 @@
+import DeleteConfirmModalContainer from "@components/common/modal/delete-confirm-modal-container";
+import { usePosTable } from "@provider/pos-provider/table-provider";
+import { TBasicTable } from "@type/table";
+import { Trans, useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+
+type TProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  tableSelected?: TBasicTable;
+};
+
+const DeleteTableConfirmModal = ({
+  isOpen,
+  onClose,
+  tableSelected,
+}: TProps) => {
+  const { t } = useTranslation();
+  const { onDeleteTable: deleteTable } = usePosTable();
+
+  const onDeleteTable = async () => {
+    try {
+      if (!tableSelected) return;
+      deleteTable(tableSelected?.id, () => {
+        onClose();
+      });
+    } catch (error: any) {
+      toast.error(error);
+    }
+  };
+
+  return (
+    <DeleteConfirmModalContainer
+      title={t("confirm_delete_table_title")}
+      description={
+        <Trans
+          i18nKey="confirm_delete_table_description"
+          values={{ tableName: tableSelected?.table_number }}
+          components={{
+            bold: <span className="text-text-primary font-semibold" />,
+          }}
+        />
+      }
+      onAction={onDeleteTable}
+      onClose={onClose}
+      isOpen={isOpen}
+    />
+  );
+};
+
+export default DeleteTableConfirmModal;

package/src/components/restaurant-management/header.tsx

@@ -0,0 +1,22 @@
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+
+export const Header = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex items-center justify-between h-[60px] px-3 py-[6px] border-b-[0.5px] bg-white">
+      <button
+        onClick={() => navigate(-1)}
+        className="w-12 aspect-square bg-neutral-disabled rounded-lg"
+      >
+        ‹
+      </button>
+      <p className="text-lg text-strong-950 font-semibold leading-[26px]">
+        {t("floor-management")}
+      </p>
+      <div />
+    </div>
+  )
+}

package/src/components/restaurant-management/index.tsx

@@ -0,0 +1,54 @@
+import useGetQuery from "@hooks/common/use-get-query";
+import { useFloor } from "@provider/pos-provider/floor-provider";
+import { useMemo, useState } from "react";
+import { AddFloorModal } from "./add-floor-modal";
+import { Header } from "./header";
+import LeftSide from "./left-side";
+import RightSide from "./right-side";
+
+const ManagementFloor = () => {
+  const { floors } = useFloor();
+  const { floorId } = useGetQuery();
+  const [isOpenAddFloor, setIsOpenAddFloor] = useState(false);
+  const [isEditingFloor, setIsEditingFloor] = useState<number | undefined>();
+
+  const activeFloor = useMemo(() => {
+    if (!floors.length) return;
+
+    if (!floorId) floors[0]?.id;
+
+    const activeFloor = floors.find((floor) => floor.id === floorId);
+
+    return activeFloor ?? floors[0];
+  }, [floors, floorId]);
+
+  return (
+    <div className="flex flex-col h-screen">
+      <Header />
+      <div className="flex flex-1 overflow-auto ">
+        <LeftSide
+          floors={floors}
+          activeFloor={activeFloor}
+          isOpenAddFloor={isOpenAddFloor}
+          setIsOpenAddFloor={setIsOpenAddFloor}
+        />
+
+        <RightSide
+          activeFloor={activeFloor}
+          isOpenAddFloor={isOpenAddFloor}
+          setIsOpenAddFloor={setIsOpenAddFloor}
+          setIsEditingFloor={setIsEditingFloor}
+        />
+
+        <AddFloorModal
+          isOpen={isOpenAddFloor}
+          editingFloor={isEditingFloor}
+          onClose={() => setIsOpenAddFloor(false)}
+          setIsEditingFloor={setIsEditingFloor}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ManagementFloor;

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

@@ -0,0 +1,51 @@
+import { IcPlus } from "@assets/icons/common";
+import ButtonAction from "@components/common/button-action";
+import { QUERY_KEYS } from "@constants/query.constant";
+import { useQueryParams } from "@hooks/common/use-query-params";
+import { TFloor } from "@type/floor/floor";
+import { cn } from "@utils/functions";
+
+type TProps = {
+  floors: TFloor[];
+  activeFloor: TFloor | undefined;
+  setIsOpenAddFloor: (isOpen: boolean) => void;
+  isOpenAddFloor: boolean;
+};
+
+const LeftSide = ({ floors, activeFloor, setIsOpenAddFloor }: TProps) => {
+  const { updateQuery } = useQueryParams();
+
+  const handleUpdateFloor = (floorId: string) => {
+    updateQuery(QUERY_KEYS.FLOOR, floorId);
+  };
+  return (
+    <div className="w-fit h-full flex flex-col gap-4 p-2 border-r-[0.5px] border-stroke-disabled bg-white">
+      <div className="flex-1 flex flex-col overflow-y-auto hide-scrollbar w-full">
+        {floors.map((floor) => (
+          <div
+            key={floor.id}
+            onClick={() => handleUpdateFloor(floor.id.toString())}
+            className={cn(
+              "p-3 text-text-disable font-medium text-sm leading-5 tracking-[-0.12px] h-fit min-h-12 rounded-lg w-full flex items-center cursor-pointer",
+              {
+                "bg-surface-primary text-text-active font-semibold":
+                  activeFloor?.id === floor.id,
+              }
+            )}
+          >
+            {floor.name}
+          </div>
+        ))}
+      </div>
+
+      <ButtonAction
+        className="button-primary px-3 min-w-fit w-fit"
+        text=" Tạo tầng"
+        iconSrc={<IcPlus />}
+        onClick={() => setIsOpenAddFloor(true)}
+      />
+    </div>
+  );
+};
+
+export default LeftSide;