sme-pos-package 1.0.13 → 1.0.15

package/src/components/common/input/radio-group.tsx

@@ -1,75 +0,0 @@
-import { cn } from "@utils/functions";
-
-type TRadioOption = {
-  id: number;
-  name: string;
-};
-
-type RadioGroupProps = {
-  title: string;
-  name: string;
-  options: TRadioOption[];
-  register: any;
-  isRequired?: boolean;
-  errorMessage?: string;
-  direction?: "row" | "column";
-  className?: string;
-  optionClassName?: string;
-};
-
-const RadioGroup = ({
-  title,
-  options,
-  register,
-  isRequired,
-  errorMessage,
-  direction = "row",
-  className,
-  optionClassName,
-}: RadioGroupProps) => {
-  return (
-    <div className="flex flex-col gap-1">
-      <div
-        className={cn(
-          "flex w-full flex-col justify-between gap-1.5",
-          className
-        )}
-      >
-        <p className="text-text-primary text-sm font-medium leading-5 tracking-[-0.12px]">
-          {title}
-          {isRequired && <span className="text-state-error-base"> *</span>}
-        </p>
-
-        <div
-          className={cn(
-            direction === "row" ? "flex gap-4" : "flex flex-col gap-2"
-          )}
-        >
-          {options.map((opt) => (
-            <label
-              key={opt.id}
-              className={cn(
-                "flex items-center gap-2 cursor-pointer",
-                optionClassName
-              )}
-            >
-              <input
-                type="radio"
-                value={opt.id}
-                {...register}
-                className="w-4 h-4 cursor-pointer bg-white border border-neutral-300-85"
-              />
-              <span className="text-sm text-text-primary">{opt.name}</span>
-            </label>
-          ))}
-        </div>
-      </div>
-
-      {errorMessage && (
-        <p className="text-state-error-base text-xs">{errorMessage}</p>
-      )}
-    </div>
-  );
-};
-
-export default RadioGroup;

package/src/components/common/input/text-area.tsx

@@ -1,28 +0,0 @@
-import { UseFormRegisterReturn } from "react-hook-form";
-
-type Props = React.InputHTMLAttributes<HTMLTextAreaElement> & {
-  title: string;
-  register?: UseFormRegisterReturn;
-};
-
-const TextArea = ({ title, register, ...props }: Props) => {
-  return (
-    <div className="flex flex-col gap-1.5 justify-center">
-      <p className="text-text-primary text-sm font-medium leading-5 tracking-[-0.12px]">
-        {title}
-      </p>
-
-      <div className="flex flex-col justify-end gap-2 w-full p-3 rounded-lg border border-stroke-disabled bg-white">
-        <textarea
-          {...props}
-          className="outline-none border-none"
-          placeholder={props.placeholder}
-        />
-
-        <p className="text-xs leading-4 text-end text-neutral-400-68">0/3000</p>
-      </div>
-    </div>
-  );
-};
-
-export default TextArea;

package/src/components/common/modal/delete-confirm-modal-container.tsx

@@ -1,65 +0,0 @@
-import { IcClose } from "@assets/icons/common";
-import ButtonAction from "@components/common/button-action";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import ModalZoom from "./modal-zoom";
-
-type TProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  onAction: () => void;
-  title: string;
-  description: string | React.ReactNode;
-};
-
-const DeleteConfirmModalContainer = ({
-  isOpen,
-  onClose,
-  onAction,
-  title,
-  description,
-}: TProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <ModalZoom
-      isOpen={isOpen}
-      onClose={onClose}
-      className="p-6 flex flex-col gap-6 rounded-2xl border border-stroke-disabled w-[420px]"
-    >
-      <div className="flex items-center justify-between">
-        <p className="text-xl font-semibold leading-7 tracking-[-0.2px] text-text-primary">
-          {title}
-        </p>
-
-        <button onClick={onClose} className="text-text-primary">
-          <IcClose />
-        </button>
-      </div>
-
-      <div className="w-[232px] h-[164px] mx-auto">
-        <img src="/assets/images/modal-illustration.png" alt="Delete table" />
-      </div>
-
-      <p className="text-sm font-medium leading-5 tracking-[-0.12px] text-text-disabled">
-        {description}
-      </p>
-
-      <div className="flex gap-2 w-full">
-        <ButtonAction
-          onClick={onClose}
-          text={t("cancel_button")}
-          className="w-full button-secondary"
-        />
-
-        <ButtonAction
-          text={t("confirm_button")}
-          onClick={onAction}
-          className="w-full button-primary"
-        />
-      </div>
-    </ModalZoom>
-  );
-};
-
-export default DeleteConfirmModalContainer;

package/src/components/common/modal/index.ts

@@ -1,2 +0,0 @@
-export { default as ModalDirection } from "./modal-direction";
-export { default as ModalWrapper } from "./modal-wrapper";

package/src/components/common/modal/modal-direction.tsx

@@ -1,125 +0,0 @@
-import { useModal } from "@provider/modal-provider";
-import { motion } from "framer-motion";
-import { t } from "i18next";
-import { useMemo } from "react";
-import ButtonAction from "../button-action";
-import ModalWrapper, { ModalTransition } from "./modal-wrapper";
-
-interface ModalDirectionProps extends ModalProps {
-  direction?: "left" | "right" | "bottom";
-  safeAreaClassName?: string;
-  actionText?: string;
-  onAction?: () => void;
-  title?: string;
-}
-
-const ModalDirection = (
-  props: Omit<ModalDirectionProps, "onClose"> & { onClose?: () => void }
-) => {
-  const { isAppScale } = useModal();
-  const {
-    direction = "right",
-    isOpen,
-    onClose,
-    children,
-    className,
-    title,
-    actionText,
-    onAction,
-  } = props;
-
-  const variant = useMemo(() => {
-    let res: any = {};
-    if (direction == "left" || direction == "right") {
-      const initial = ((direction == "left" ? -1 : 1) * 100).toString();
-      res = {
-        initial: { x: `${initial}%` },
-        animate: { x: "0" },
-        exit: { x: `${initial}%` },
-      };
-    } else {
-      const initial = ((direction == "bottom" ? 1 : -1) * 100).toString();
-      res = {
-        initial: { y: `${initial}%` },
-        animate: { y: "0" },
-        exit: { y: `${initial}%` },
-      };
-    }
-
-    delete res["exit"];
-
-    return res;
-  }, [direction]);
-
-  return (
-    <ModalWrapper isOpen={isOpen}>
-      <div
-        data-scale={isAppScale}
-        className={`direction-modal group size-full bg-black/35 pt-safe-area-inset-top transition-all duration-150 data-[scale=true]:!bg-black/100 ${
-          props.safeAreaClassName ?? ""
-        } flex ${direction == "right" ? "justify-end" : ""}`}
-        onClick={() => onClose && onClose()}
-      >
-        <motion.div
-          {...variant}
-          {...ModalTransition}
-          className={`size-full bg-white ${direction ? "w-[420px]" : ""} p-4`}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div
-            className={`relative size-full rounded-none transition-all duration-300 group-data-[scale=true]:scale-[0.94] group-data-[scale=true]:overflow-hidden group-data-[scale=true]:rounded-xl`}
-            onClick={() => {
-              if (onClose) onClose();
-            }}
-          >
-            <div
-              className={`relative flex size-full flex-col gap-6 ${className}`}
-            >
-              <div className="flex justify-between items-center">
-                <p className="text-lg font-semibold text-[#060606]">{title}</p>
-                <button onClick={onClose}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                  >
-                    <path
-                      d="M12.0001 10.7275L16.4551 6.27246L17.7277 7.54506L13.2727 12.0001L17.7277 16.4551L16.4551 17.7277L12.0001 13.2727L7.54506 17.7277L6.27246 16.4551L10.7275 12.0001L6.27246 7.54506L7.54506 6.27246L12.0001 10.7275Z"
-                      fill="#060606"
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div
-                className="w-full flex-1 overflow-auto"
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-              >
-                {children}
-              </div>
-
-              {actionText && (
-                <div className="flex gap-2 w-full">
-                  <ButtonAction
-                    text={t("cancel_button")}
-                    className="button-secondary w-full"
-                  />
-                  <ButtonAction
-                    onClick={onAction}
-                    text={actionText}
-                    className="button-primary w-full"
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-        </motion.div>
-      </div>
-    </ModalWrapper>
-  );
-};
-
-export default ModalDirection;

package/src/components/common/modal/modal-header.tsx

@@ -1,37 +0,0 @@
-import { IcClose } from "@assets/icons/common";
-import { cn } from "@utils/functions";
-
-const ModalHeader = ({
-  onClose,
-  title,
-  headerClassName,
-  headerAction,
-}: {
-  onClose: () => void;
-  title?: string;
-  headerClassName?: string;
-  headerAction?: React.ReactNode;
-}) => {
-  return (
-    <div
-      className={cn(
-        "p-6 py-4 flex items-center justify-between border-b border-stroke-disabled",
-        headerClassName
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <p className="font-semibold leading-6 text-text-primary tracking-[-0.24px]">
-          {title}
-        </p>
-
-        {headerAction}
-      </div>
-
-      <button onClick={onClose}>
-        <IcClose />
-      </button>
-    </div>
-  );
-};
-
-export default ModalHeader;

package/src/components/common/modal/modal-wrapper.tsx

@@ -1,56 +0,0 @@
-import { useMemo } from "react";
-import { createPortal } from "react-dom";
-import { AnimatePresence, motion } from "motion/react";
-
-const ModalWrapper = ({
-  isOpen,
-  children,
-  className,
-  id,
-}: {
-  isOpen: boolean;
-  children: React.ReactNode;
-  className?: string;
-  id?: string;
-}) => {
-  const container = useMemo(() => document.getElementById(id ?? "root"), [id]);
-
-  return createPortal(
-    <AnimatePresence mode="wait">
-      {isOpen && (
-        <motion.div
-          className={`fixed inset-0 z-50 flex items-center justify-center ${
-            className ?? ""
-          }`}
-          onTouchStart={(e) => e.stopPropagation()}
-          onScroll={(e) => e.stopPropagation()}
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-        >
-          <div className="size-full overflow-hidden sm:w-limitWidth">
-            {children}
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>,
-    container ?? document.body
-  );
-};
-
-export default ModalWrapper;
-
-export interface ModalProps {
-  children?: React.ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-  className?: string;
-  classNameIosPb?: string;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  disableChangeColorTheme?: boolean;
-  isHideHeader?: boolean;
-}
-
-export const ModalTransition = {
-  transition: { duration: 0.3 },
-};

package/src/components/common/modal/modal-zoom.tsx

@@ -1,61 +0,0 @@
-import { cn } from "@utils/functions";
-import { motion } from "motion/react";
-import ModalHeader from "./modal-header";
-import ModalWrapper from "./modal-wrapper";
-
-const ModalTransition = {
-  transition: { duration: 0.3 },
-};
-
-const ModalZoom = (props: ModalProps) => {
-  const {
-    isOpen,
-    onClose,
-    children,
-    className,
-    title,
-    footer,
-    modalClassName,
-    headerClassName,
-    headerAction,
-  } = props;
-  return (
-    <ModalWrapper isOpen={isOpen}>
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        exit={{ opacity: 0 }}
-        {...ModalTransition}
-        className={`flex size-full items-center justify-center bg-overlay pt-safe-area-inset-top`}
-        onClick={(e) => {
-          onClose();
-          e.stopPropagation();
-        }}
-      >
-        <motion.div
-          {...ModalTransition}
-          onClick={(e) => e.stopPropagation()}
-          className={cn(
-            "relative h-fit max-h-[80%] max-w-[80%] bg-white rounded-2xl flex flex-col overflow-hidden",
-            modalClassName
-          )}
-        >
-          {title && (
-            <ModalHeader
-              onClose={onClose}
-              title={title}
-              headerClassName={headerClassName}
-              headerAction={headerAction}
-            />
-          )}
-          <div className={cn("overflow-y-auto p-6 flex-1", className)}>
-            {children}
-          </div>
-          {footer && <div className="sticky bottom-0">{footer}</div>}
-        </motion.div>
-      </motion.div>
-    </ModalWrapper>
-  );
-};
-
-export default ModalZoom;

package/src/components/common/pagination.tsx

@@ -1,95 +0,0 @@
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import React from 'react';
-
-interface PaginationProps {
-  page: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-}
-
-export const Pagination: React.FC<PaginationProps> = ({ page, totalPages, onPageChange }) => {
-  const generatePages = () => {
-    const pages: (number | string)[] = [];
-    if (totalPages <= 6) {
-      for (let i = 1; i <= totalPages; i++) pages.push(i);
-    } else {
-      if (page <= 3) pages.push(1, 2, 3, 4, '...', totalPages);
-      else if (page >= totalPages - 2)
-        pages.push(1, '...', totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
-      else pages.push(1, '...', page - 1, page, page + 1, '...', totalPages);
-    }
-    return pages;
-  };
-
-  const pages = generatePages();
-
-  const goToPage = (p: number) => {
-    if (p < 1 || p > totalPages || p === page) return;
-    onPageChange(p);
-  };
-
-  return (
-    <div className="flex items-center justify-center gap-1 select-none">
-      {totalPages > 1 && (
-        <button
-          onClick={() => goToPage(1)}
-          disabled={page === 1}
-          className="p-1.5 disabled:opacity-30 hover:bg-gray-100 rounded"
-        >
-          <ChevronsLeft size={18} />
-        </button>
-      )}
-
-      {totalPages > 1 && (
-        <button
-          onClick={() => goToPage(page - 1)}
-          disabled={page === 1}
-          className="p-1.5 disabled:opacity-30 hover:bg-gray-100 rounded"
-        >
-          <ChevronLeft size={18} />
-        </button>
-      )}
-
-      {pages.map((p, i) =>
-        p === '...' ? (
-          <span key={i} className="px-2 text-gray-500">
-            ...
-          </span>
-        ) : (
-          <button
-            key={i}
-            onClick={() => goToPage(p as number)}
-            className={`w-8 h-8 rounded-md text-sm flex items-center justify-center transition-all
-              ${
-                p === page
-                  ? 'bg-[#392F86] text-white font-semibold'
-                  : 'text-gray-800 hover:bg-gray-100'
-              }`}
-          >
-            {p}
-          </button>
-        ),
-      )}
-
-      {totalPages > 1 && (
-        <button
-          onClick={() => goToPage(page + 1)}
-          disabled={page === totalPages}
-          className="p-1.5 disabled:opacity-30 hover:bg-gray-100 rounded"
-        >
-          <ChevronRight size={18} />
-        </button>
-      )}
-
-      {totalPages > 1 && (
-        <button
-          onClick={() => goToPage(totalPages)}
-          disabled={page === totalPages}
-          className="p-1.5 disabled:opacity-30 hover:bg-gray-100 rounded"
-        >
-          <ChevronsRight size={18} />
-        </button>
-      )}
-    </div>
-  );
-};

package/src/components/common/refresh-button.tsx

@@ -1,28 +0,0 @@
-import { IcRefresh } from '@assets/icons/breadcrumbs-icon';
-import { useState } from 'react';
-
-const RefreshButton = ({ onRefresh }: { onRefresh: () => void }) => {
-  const [isRefresh, setIsRefresh] = useState(false);
-
-  setTimeout(() => {
-    if (isRefresh) {
-      setIsRefresh(false);
-    }
-  }, 3000);
-
-  return (
-    <button
-      className={`size-11 flex items-center justify-center text-[--text-color] hover:bg-gray-100 rounded-lg border bg-white shadow-sm`}
-      onClick={() => {
-        setIsRefresh(true);
-        onRefresh();
-      }}
-    >
-      <div className={`${isRefresh ? 'spin' : ''}`}>
-        <IcRefresh />
-      </div>
-    </button>
-  );
-};
-
-export default RefreshButton;

package/src/components/common/search-bar.tsx

@@ -1,27 +0,0 @@
-import { IcSearch } from "@assets/icons/breadcrumbs-icon";
-import { t } from "i18next";
-
-export const SearchBar = ({
-  onSearchChange,
-  placeholder,
-  className,
-}: {
-  onSearchChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-}) => {
-  return (
-    <div className={`relative flex-1 max-w-md ${className}`}>
-      <div className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400">
-        <IcSearch />
-      </div>
-      <input
-        type="text"
-        placeholder={placeholder ?? t("search...")}
-        onChange={(e) => onSearchChange(e.target.value)}
-        className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none 
-        focus:ring-[2px] focus:ring-gray-300 focus:border-transparent text-sm shadow-[0_2px_4px_0_rgba(27,28,29,0.04)]"
-      />
-    </div>
-  );
-};

package/src/components/common/search.tsx

@@ -1,59 +0,0 @@
-import { IcRefresh, IcSearch } from "@assets/icons/breadcrumbs-icon";
-import { IcBack, IcPlus } from "@assets/icons/common";
-
-interface SearchAndActionsProps {
-  searchValue: string;
-  onSearchChange: (value: string) => void;
-  actionText?: string;
-  showReset?: boolean;
-  showAction?: boolean;
-  showDropdown?: boolean;
-}
-
-export const SearchAndActions: React.FC<SearchAndActionsProps> = ({
-  searchValue,
-  onSearchChange,
-  actionText = "",
-  showReset = true,
-  showAction = true,
-  showDropdown = false,
-}) => {
-  return (
-    <div className="bg-white px-6 py-6 flex items-center justify-between border-b border-gray-100">
-      <div className="relative flex-1 max-w-md">
-        <IcSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[#AEAEAE]" />
-        <input
-          type="text"
-          placeholder="Tìm kiếm..."
-          value={searchValue}
-          onChange={(e) => onSearchChange(e.target.value)}
-          className="w-full pl-10 pr-12 py-2 border border-[#E8E8EA] rounded-lg text-sm 
-                     focus:outline-none focus:ring-2 focus:ring-[#363793] 
-                     focus:border-transparent bg-white text-[#060606] placeholder-[#AEAEAE]"
-        />
-        {showDropdown && (
-          <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center text-[#AEAEAE]">
-            <div className="w-px h-5 bg-[#E8E8EA] mr-2"></div>
-            <div className="rotate-90">
-              <IcBack />
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="flex items-center space-x-3 ml-4">
-        {showReset && (
-          <button className="w-11 h-11 flex items-center justify-center text-[#060606] hover:bg-gray-50 rounded-xl border border-[#E8E8EA] bg-white shadow-sm transition-colors">
-            <IcRefresh />
-          </button>
-        )}
-        {showAction && (
-          <button className="bg-[#363793] text-white w-30 h-11 px-4 py-2 rounded-md text-sm font-medium hover:bg-[#2D2B7A] transition-colors flex items-center gap-2">
-            <IcPlus />
-            <span>{actionText}</span>
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/common/skeleton.tsx

@@ -1,7 +0,0 @@
-import { cn } from "@utils/functions";
-
-export const Skeleton = ({ className }: { className?: string }) => {
-  return (
-    <div className={cn("w-full animate-pulse bg-gray-200", className)}></div>
-  );
-};