@customafk/lunas-ui 0.0.7 → 0.0.9

package/packages/components/data-display/empty.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { PackageOpenIcon } from "lucide-react";
+
+import { Flex } from "../layouts/flex";
+
+export const EmptyDisplay = () => {
+  return (
+    <Flex
+      vertical
+      justify="center"
+      align="center"
+      gap="sm"
+      className="size-full"
+    >
+      <PackageOpenIcon
+        size={52}
+        strokeWidth={1}
+        className="text-muted-foreground"
+      />
+      <p className="text-muted-foreground text-sm">
+        Không có dữ liệu nào để hiển thị.
+      </p>
+    </Flex>
+  );
+};

package/packages/components/data-display/name.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Paragraph } from "../typography/paragraph";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+type NameDisplayProps = {
+  name: string;
+};
+
+export const NameDisplay: React.FC<
+  React.PropsWithChildren<NameDisplayProps>
+> = ({ name }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <Paragraph variant="sm" className="line-clamp-2 cursor-help">
+          {name}
+        </Paragraph>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-80 text-wrap break-keep whitespace-pre-line">
+        {name}
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/packages/components/data-display/phone-number.tsx

@@ -0,0 +1,22 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+export const PhoneNumberDisplay: React.FC<
+  React.PropsWithChildren<{ value: string }>
+> = ({ value }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <p className="font-number text-secondary-foreground text-sm">
+          {value.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3")}
+        </p>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          {value
+            .slice(1)
+            .replace(/(\d{2})(\d{3})(\d{4})/, "(00) (+84) ($1) $2-$3")}
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/packages/components/data-display/role-badge.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { ERole } from "@/types";
+
+import { Badge } from "../ui/badge";
+
+type Props = {
+  status: ERole;
+};
+export const RoleBadge: React.FC<React.PropsWithChildren<Props>> = ({
+  status,
+}) => {
+  const colors = React.useMemo<
+    Record<ERole, React.ComponentProps<typeof Badge>["color"]>
+  >(() => {
+    return {
+      [ERole.ADMIN]: "red",
+      [ERole.SUPER_ADMIN]: "purple",
+      [ERole.MODERATOR]: "indigo",
+      [ERole.STAFF]: "green",
+      [ERole.USER]: "blue",
+    };
+  }, []);
+  return (
+    <Badge color={colors[status]} className="min-w-24 justify-center">
+      {status === ERole.SUPER_ADMIN && "Super Admin"}
+      {status === ERole.ADMIN && "Admin"}
+      {status === ERole.MODERATOR && "Moderator"}
+      {status === ERole.STAFF && "Staff"}
+      {status === ERole.USER && "User"}
+    </Badge>
+  );
+};

package/packages/components/data-display/statistic.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+import { Flex } from "../layouts/flex";
+
+type Props = {
+  decimalSeparator?: string;
+  groupSeparator?: string;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  precision?: number; // Số chữ số thập phân
+  roundingMode?: "round" | "floor" | "ceil"; // Kiểu làm tròn
+  showTrailingZeros?: boolean; // Hiển thị số 0 cuối
+  size?: "xs" | "sm" | "md" | "lg" | "xl"; // Kích thước của component
+  value: number | string;
+};
+export const Statistic = React.memo(
+  ({
+    decimalSeparator = ".",
+    groupSeparator = ",",
+    prefix: Prefix,
+    suffix: Suffix,
+    precision,
+    roundingMode = "round",
+    showTrailingZeros = false,
+    size = "lg",
+    value,
+  }: Props) => {
+    // Memoize rounding function
+    const applyRounding = React.useCallback(
+      (num: number, precisionValue: number): number => {
+        const multiplier = Math.pow(10, precisionValue);
+
+        switch (roundingMode) {
+          case "floor":
+            return Math.floor(num * multiplier) / multiplier;
+          case "ceil":
+            return Math.ceil(num * multiplier) / multiplier;
+          case "round":
+          default:
+            return Math.round(num * multiplier) / multiplier;
+        }
+      },
+      [roundingMode],
+    );
+
+    // Memoize number formatting options
+    const formatOptions = React.useMemo((): Intl.NumberFormatOptions => {
+      const options: Intl.NumberFormatOptions = {};
+
+      if (typeof precision === "number" && precision >= 0) {
+        if (showTrailingZeros) {
+          options.minimumFractionDigits = precision;
+          options.maximumFractionDigits = precision;
+        } else {
+          options.maximumFractionDigits = precision;
+        }
+      }
+
+      return options;
+    }, [precision, showTrailingZeros]);
+
+    const formatNumber = React.useCallback(
+      (num: number): string => {
+        let processedNum = num;
+
+        // Áp dụng làm tròn nếu có precision
+        if (typeof precision === "number" && precision >= 0) {
+          processedNum = applyRounding(num, precision);
+        }
+
+        return processedNum.toLocaleString("en-US", formatOptions);
+      },
+      [applyRounding, formatOptions, precision],
+    );
+
+    // Memoize value processing
+    const processedValue = React.useMemo((): string => {
+      // Xử lý giá trị number
+      if (typeof value === "number") {
+        if (isNaN(value) || !isFinite(value)) {
+          return "N/A";
+        }
+        return formatNumber(value);
+      }
+
+      // Xử lý giá trị string
+      if (typeof value === "string") {
+        const trimmedValue = value.trim();
+
+        // Nếu là chuỗi rỗng
+        if (!trimmedValue) {
+          return "N/A";
+        }
+
+        // Thử convert sang number
+        const numValue = Number(trimmedValue);
+
+        if (isNaN(numValue) || !isFinite(numValue)) {
+          // Nếu không phải số, trả về string gốc
+          return "N/A";
+        }
+
+        return formatNumber(numValue);
+      }
+
+      return "N/A";
+    }, [value, formatNumber]);
+
+    // Memoize separator replacement
+    const finalFormattedValue = React.useMemo((): string => {
+      // Chỉ thay thế separators nếu khác mặc định
+      if (decimalSeparator === "." && groupSeparator === ",") {
+        return processedValue;
+      }
+      return processedValue
+        .replace(/,/g, groupSeparator)
+        .replace(/\./g, decimalSeparator);
+    }, [processedValue, decimalSeparator, groupSeparator]);
+
+    return (
+      <Flex
+        padding="none"
+        className={cn(
+          "text-secondary-foreground font-number text-lg",
+          size === "xs" && "text-xs",
+          size === "sm" && "text-sm",
+          size === "md" && "text-base",
+          size === "lg" && "text-lg",
+          size === "xl" && "text-xl",
+        )}
+      >
+        {Prefix}
+        <p>{finalFormattedValue}</p>
+        {Suffix}
+      </Flex>
+    );
+  },
+);
+Statistic.displayName = "Statistic";

package/packages/components/dialogs/confirm-dialog.tsx

@@ -0,0 +1,51 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+
+type Props = {
+  open?: boolean;
+  isLoading?: boolean;
+  title: string;
+  description: string;
+  onOpenChange?: (open: boolean) => void;
+  onConfirm?: () => void;
+};
+
+export const ConfirmDialog: React.FC<React.PropsWithChildren<Props>> = ({
+  open,
+  isLoading = false,
+  title,
+  description,
+  onOpenChange,
+  onConfirm,
+}) => {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader className="gap-0">
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction className="w-24" onClick={onConfirm}>
+            {!isLoading ? (
+              "Confirm"
+            ) : (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="loader-spinner text-muted-foreground" />
+              </div>
+            )}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/packages/components/dialogs/detail-dialog/component/header.tsx

@@ -0,0 +1,14 @@
+import {
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+export const DetailDialogHeader = () => {
+  return (
+    <DialogHeader className="sr-only">
+      <DialogTitle className="sr-only"></DialogTitle>
+      <DialogDescription className="sr-only"></DialogDescription>
+    </DialogHeader>
+  );
+};

package/packages/components/dialogs/detail-dialog/component/main.tsx

@@ -0,0 +1,39 @@
+import { CalendarIcon } from "lucide-react";
+
+import { DateDisplay } from "@/components/data-display/date";
+import { Flex } from "@/components/layouts/flex";
+import { Title } from "@/components/typography/title";
+
+import { SidebarTrigger } from "./sidebar";
+
+export const DetailDialogMain: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <main className="relative flex h-full flex-1 flex-col">
+      <div className="absolute inset-0 flex size-full flex-col">{children}</div>
+    </main>
+  );
+};
+
+export const DetailDialogMainHeader: React.FC<
+  React.PropsWithChildren<{
+    title: string;
+    createdAt: string | Date | number;
+  }>
+> = ({ title, createdAt }) => {
+  return (
+    <header className="relative flex items-start gap-x-2.5 border-b px-2 py-2.5">
+      <SidebarTrigger />
+      <Flex vertical align="start" padding="none" className="flex-1">
+        <Title level={5}>{title || "Detail Dialog"}</Title>
+        <Flex padding="none" className="text-muted-foreground">
+          <CalendarIcon size={12} />
+          {!!createdAt && (
+            <DateDisplay showTime showHoliday date={createdAt} format="full" />
+          )}
+        </Flex>
+      </Flex>
+    </header>
+  );
+};