sme-pos-package 1.0.13 → 1.0.15

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

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

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

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

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

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

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

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

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