sme-pos-package 1.0.7 → 1.0.9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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