@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/data-display/data-table-pagination.tsx

@@ -0,0 +1,130 @@
+// @goerp/core/ui/data-display
+// DataTablePagination component for table pagination
+
+"use client";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import type { Table } from "@tanstack/react-table";
+
+import { Button, buttonVariants } from "../primitives";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/client";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  totalItems?: number;
+  currentPage?: number;
+  pageSize?: number;
+}
+
+export function DataTablePagination<TData>({
+  table,
+  totalItems,
+  currentPage,
+  pageSize,
+}: DataTablePaginationProps<TData>) {
+  const startItem =
+    totalItems && currentPage && pageSize
+      ? (currentPage - 1) * pageSize + 1
+      : table.getState().pagination.pageIndex *
+          table.getState().pagination.pageSize +
+        1;
+  const endItem =
+    totalItems && currentPage && pageSize
+      ? Math.min(currentPage * pageSize, totalItems)
+      : Math.min(
+          (table.getState().pagination.pageIndex + 1) *
+            table.getState().pagination.pageSize,
+          table.getFilteredRowModel().rows.length,
+        );
+  const total = totalItems ?? table.getFilteredRowModel().rows.length;
+
+  return (
+    <div className="flex flex-col items-center justify-between gap-2 py-1 md:flex-row md:gap-3">
+      <div className="flex-1 text-sm text-muted-foreground">
+        {total === 0 ? (
+          <span>Không có dữ liệu</span>
+        ) : (
+          <span>
+            Hiển thị {startItem} - {endItem} trong tổng số {total} mục
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium">Số dòng mỗi trang</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 50, 100].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Đi tới trang đầu</span>
+            <ChevronsLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Trang trước</span>
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <div className="flex items-center justify-center text-sm font-medium">
+            Trang {table.getState().pagination.pageIndex + 1} /{" "}
+            {table.getPageCount()}
+          </div>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Trang sau</span>
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Đi tới trang cuối</span>
+            <ChevronsRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/data-display/data-table-view-options.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Settings2 } from "lucide-react";
+import type { Table } from "@tanstack/react-table";
+
+import { Button } from "../primitives/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "../primitives/client"; // Importing from same package primitives
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <Settings2 className="mr-2 h-4 w-4" />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" && column.getCanHide(),
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/ui/data-display/formatted-number-input.tsx

@@ -0,0 +1,210 @@
+// @goerp/core/ui/data-display
+// FormattedNumberInput component for number input with formatting
+
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Input } from "../primitives";
+
+// =============================
+// Helper Functions
+// =============================
+
+// Giới hạn tối đa 2 số thập phân khi format
+const formatNumber = (
+  value: number | null,
+  locale: string = "vi-VN",
+): string => {
+  if (value === null || isNaN(value)) return "";
+  return value.toLocaleString(locale, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
+};
+
+// Parse string -> number, có xét tới locale & số thập phân, giới hạn 2 digits
+const parseNumberFromString = (
+  raw: string,
+  allowNegative: boolean,
+  locale: string = "vi-VN",
+): number | null => {
+  if (!raw) return null;
+
+  // Chuẩn hoá khoảng trắng
+  let cleaned = raw.replace(/[\s]/g, "");
+
+  // Xác định ký tự phân tách theo locale
+  const isEn = locale.startsWith("en"); // en-US, en-GB...
+  const decimalSep = isEn ? "." : ","; // en: 1,234.56 | vi: 1.234,56
+  const thousandSep = isEn ? "," : ".";
+
+  // Giữ lại: số, dấu . , , và -
+  cleaned = cleaned.replace(/[^0-9.,-]/g, "");
+
+  // Xử lý dấu âm
+  let negative = false;
+  const minusIndex = cleaned.indexOf("-");
+  if (minusIndex !== -1) {
+    if (allowNegative && minusIndex === 0) {
+      negative = true;
+    }
+    // bỏ tất cả dấu '-'
+    cleaned = cleaned.replace(/-/g, "");
+  }
+
+  if (!cleaned) return null;
+
+  // Tách phần nguyên & thập phân theo decimalSep (dùng lần xuất hiện cuối cùng)
+  const lastDecimalIndex = cleaned.lastIndexOf(decimalSep);
+  let intPart = "";
+  let fracPart = "";
+
+  if (lastDecimalIndex >= 0) {
+    intPart = cleaned.slice(0, lastDecimalIndex);
+    fracPart = cleaned.slice(lastDecimalIndex + 1);
+  } else {
+    intPart = cleaned;
+  }
+
+  // Xoá thousandSep trong phần nguyên và phần thập phân
+  const tsRegex = new RegExp(`\\${thousandSep}`, "g");
+  intPart = intPart.replace(tsRegex, "");
+  fracPart = fracPart.replace(tsRegex, "");
+
+  // Giới hạn tối đa 2 chữ số thập phân
+  if (fracPart.length > 2) {
+    fracPart = fracPart.slice(0, 2);
+  }
+
+  // Nếu không có phần thập phân thì coi là số nguyên
+  let normalized = "";
+  if (fracPart.length > 0) {
+    normalized = `${intPart}.${fracPart}`;
+  } else {
+    normalized = intPart;
+  }
+
+  if (!normalized) return null;
+  const num = Number((negative ? "-" : "") + normalized);
+  return isNaN(num) ? null : num;
+};
+
+// =============================
+// FormattedNumberInput Component
+// =============================
+
+export interface FormattedNumberInputProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    "value" | "onChange" | "type"
+  > {
+  value?: number | null;
+  onValueChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  placeholder?: string;
+  suffix?: string; // "VNĐ", "%", ...
+  allowNegative?: boolean;
+  locale?: string; // "vi-VN", "en-US", ...
+  className?: string;
+}
+
+export const FormattedNumberInput: React.FC<FormattedNumberInputProps> = ({
+  value,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  placeholder,
+  suffix,
+  allowNegative = false,
+  locale = "vi-VN",
+  className,
+  ...inputProps
+}) => {
+  const [internalNumber, setInternalNumber] = useState<number | null>(
+    value ?? null,
+  );
+  const [displayValue, setDisplayValue] = useState<string>(
+    formatNumber(value ?? null, locale),
+  );
+
+  useEffect(() => {
+    if (value !== internalNumber) {
+      setInternalNumber(value ?? null);
+      setDisplayValue(formatNumber(value ?? null, locale));
+    }
+  }, [value, locale]);
+
+  const clamp = (n: number | null): number | null => {
+    if (n === null) return null;
+    let res = n;
+    if (typeof min === "number") res = Math.max(res, min);
+    if (typeof max === "number") res = Math.min(res, max);
+    return res;
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value;
+    setDisplayValue(raw);
+
+    // Parse for internal value
+    const parsed = parseNumberFromString(raw, allowNegative, locale);
+    const clamped = clamp(parsed);
+    setInternalNumber(clamped);
+    onValueChange?.(clamped);
+  };
+
+  const handleBlur = () => {
+    setDisplayValue(formatNumber(internalNumber, locale));
+  };
+
+  const handleFocus = () => {
+    // Optional: On focus, show raw value or keep as is?
+    // Often easier to edit without separators.
+    if (internalNumber !== null) {
+      // Simple string representation for editing
+      // But users might like seeing "100.000" and just changing one digit.
+      // Let's keep it simple: Just let them edit the string they see.
+      // If we want to strip separators on focus:
+      // setDisplayValue(internalNumber.toString())
+      // BUT current logic parseNumberFromString handles separators fine.
+      // So we just let them edit.
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const current = internalNumber ?? 0;
+      const delta = e.key === "ArrowUp" ? step : -step;
+      const next = clamp(current + delta);
+      setInternalNumber(next);
+      setDisplayValue(formatNumber(next, locale));
+      onValueChange?.(next);
+    }
+  };
+
+  return (
+    <div className="relative flex items-center w-full">
+      <Input
+        type="text"
+        inputMode="decimal"
+        value={displayValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        className={`font-mono text-sm ${suffix ? "pr-12" : ""} ${className || ""}`}
+        {...inputProps}
+      />
+      {suffix && (
+        <span className="pointer-events-none absolute right-3 text-xs text-muted-foreground">
+          {suffix}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/ui/data-display/highlight.tsx

@@ -0,0 +1,20 @@
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { codeToHast } from "shiki/bundle/web";
+
+import type { JSX } from "react";
+import type { BundledLanguage } from "shiki/bundle/web";
+
+export async function highlight(code: string, lang: BundledLanguage) {
+  const out = await codeToHast(code, {
+    lang,
+    theme: "github-dark",
+  });
+
+  return toJsxRuntime(out, {
+    Fragment,
+    jsx,
+    jsxs,
+  }) as JSX.Element;
+}

package/src/ui/data-display/hover-card.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+export function HoverCard({
+  ...props
+}: ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+export function HoverCardTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger
+      data-slot="hover-card-trigger"
+      className={cn("cursor-pointer", className)}
+      {...props}
+    />
+  );
+}
+
+export function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}

package/src/ui/data-display/index.tsx

@@ -0,0 +1,50 @@
+// @goerp/core/ui/data-display
+// Data display components (Table, Card views, etc.)
+
+"use client";
+
+// Table definitions removed to avoid conflict with primitives
+
+// Re-export DataTableColumnHeader, FormattedNumberInput, DataTablePagination
+export { DataTableColumnHeader } from "./data-table-column-header";
+export { FormattedNumberInput } from "./formatted-number-input";
+export type { FormattedNumberInputProps } from "./formatted-number-input";
+export { DataTablePagination } from "./data-table-pagination";
+export { DataTableViewOptions } from "./data-table-view-options";
+
+export * from "./formatted-number-input";
+export * from "./data-table-pagination";
+export * from "./avatar";
+export * from "./kpi-card";
+export * from "./compact-stat-bar";
+export * from "./show-more-text";
+export * from "./chart";
+export * from "./carousel";
+export * from "./accordion";
+export * from "./kanban";
+export * from "./aspect-ratio";
+export * from "./bento-grid";
+export * from "./code-block-highlight";
+export * from "./collapsible";
+export * from "./highlight";
+export * from "./hover-card";
+export * from "./iphone-15-pro";
+export * from "./media-grid";
+export * from "./safari";
+// Re-export specific components from primitives to avoid duplication
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "../primitives";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from "../primitives";
+export * from "./timeline";
+
+// DataTable - Reusable table component for standalone usage
+export * from "./data-table";

package/src/ui/data-display/iphone-15-pro.tsx

@@ -0,0 +1,114 @@
+import type { SVGProps } from "react";
+
+export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  imageSrc?: string;
+  videoSrc?: string;
+  id?: string;
+}
+
+export function Iphone15Pro({
+  width = 433,
+  height = 882,
+  imageSrc,
+  videoSrc,
+  id = "iphone-15-pro",
+  ...props
+}: Iphone15ProProps) {
+  const roundedCornersClipId = id + "-rounded-corners";
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      id={id}
+      {...props}
+    >
+      <path
+        d="M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z"
+        className="fill-muted"
+      />
+      <path
+        d="M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z"
+        className="fill-muted"
+      />
+      <path
+        d="M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z"
+        className="fill-muted"
+      />
+      <path
+        d="M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z"
+        className="fill-muted"
+      />
+      <path
+        d="M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z"
+        className="fill-muted"
+      />
+      <path
+        d="M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z"
+        className="fill-background"
+      />
+      <path
+        opacity="0.5"
+        d="M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z"
+        className="fill-muted"
+      />
+      <path
+        d="M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z"
+        className="fill-muted stroke-muted stroke-[0.5]"
+      />
+
+      {imageSrc && (
+        <image
+          href={imageSrc}
+          x="21.25"
+          y="19.25"
+          width="389.5"
+          height="843.5"
+          preserveAspectRatio="xMidYMid slice"
+          clipPath={`url(#${roundedCornersClipId})`}
+        />
+      )}
+      {videoSrc && (
+        <foreignObject x="21.25" y="19.25" width="389.5" height="843.5">
+          <video
+            className="size-full overflow-hidden rounded-[55.75px] object-cover"
+            src={videoSrc}
+            autoPlay
+            loop
+            muted
+            playsInline
+          />
+        </foreignObject>
+      )}
+      <path
+        d="M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z"
+        className="fill-muted"
+      />
+      <path
+        d="M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z"
+        className="fill-muted"
+      />
+      <path
+        d="M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z"
+        className="fill-background"
+      />
+      <defs>
+        <clipPath id={roundedCornersClipId}>
+          <rect
+            x="21.25"
+            y="19.25"
+            width="389.5"
+            height="843.5"
+            rx="55.75"
+            ry="55.75"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/ui/data-display/kanban/index.ts

@@ -0,0 +1,4 @@
+export * from "./kanban-board";
+export * from "./kanban-column";
+export * from "./kanban-item";
+export * from "./kanban-types";