@suphark/ui 0.1.0

package/src/components/shared/layout/error-state.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { Button, buttonVariants } from "@suphark/ui/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@suphark/ui/components/ui/card";
+import { cn } from "@suphark/ui/lib/utils";
+import { AlertTriangle, Home, LogIn, RotateCcw } from "lucide-react";
+import { useEffect, useState } from "react";
+
+/**
+ * Error object ที่ Next.js ส่งให้ error boundary
+ * `digest` คือรหัสอ้างอิงของ server error ที่ Next สร้างให้ ใช้จับคู่กับ log ฝั่งเซิร์ฟเวอร์ได้
+ */
+export type RouteError = Error & { digest?: string };
+
+interface ErrorStateProps {
+  error: RouteError;
+  /** ฟังก์ชัน reset ของ error boundary — เรนเดอร์ segment ที่พังใหม่โดยไม่ reload ทั้งหน้า */
+  reset: () => void;
+  title?: string;
+  description?: string;
+  /** ซ่อนปุ่มกลับหน้าหลัก เช่นในหน้า auth ที่ผู้ใช้ยังไม่ได้ล็อกอิน */
+  hideHomeButton?: boolean;
+  className?: string;
+}
+
+/**
+ * UI กลางสำหรับทุก error boundary ของแอป
+ *
+ * แยกออกมาไว้ที่เดียวเพื่อให้ error.tsx ของแต่ละ route group และ global-error.tsx
+ * แสดงผลเหมือนกัน และแก้ข้อความที่จุดเดียวจบ
+ */
+/**
+ * server action ที่ถูก proxy ตอบ 401 (เซสชันหมดอายุ) ทำให้ client ของ Next โยน error ข้อความนี้
+ * ซึ่งบอกอะไรผู้ใช้ไม่ได้เลย — ต้องเช็คเซสชันซ้ำเพื่อแยกจากกรณีเซิร์ฟเวอร์พังจริง
+ */
+function looksLikeBrokenActionResponse(error: RouteError) {
+  return /unexpected response was received from the server/i.test(error.message ?? "");
+}
+
+export function ErrorState({
+  error,
+  reset,
+  title = "เกิดข้อผิดพลาด",
+  description = "ระบบไม่สามารถแสดงหน้านี้ได้ในขณะนี้ กรุณาลองใหม่อีกครั้ง หากยังพบปัญหาโปรดแจ้งผู้ดูแลระบบ",
+  hideHomeButton = false,
+  className,
+}: ErrorStateProps) {
+  const [sessionExpired, setSessionExpired] = useState(false);
+
+  useEffect(() => {
+    // Server error จะถูก log ฝั่งเซิร์ฟเวอร์อยู่แล้ว ตัวนี้ไว้จับ error ที่เกิดฝั่ง client
+    console.error("[error-boundary]", error);
+  }, [error]);
+
+  useEffect(() => {
+    if (!looksLikeBrokenActionResponse(error)) return;
+    let cancelled = false;
+    fetch("/api/auth/get-session", { credentials: "include", cache: "no-store" })
+      .then(async (response) => {
+        if (cancelled) return;
+        if (response.status === 401) return setSessionExpired(true);
+        const body = await response.json().catch(() => null);
+        if (!body || !(body as { user?: unknown }).user) setSessionExpired(true);
+      })
+      .catch(() => {
+        // เช็คไม่ได้ก็แสดงข้อความทั่วไปตามเดิม
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [error]);
+
+  if (sessionExpired) {
+    const signInHref = `/sign-in?redirect_url=${encodeURIComponent(
+      typeof window === "undefined" ? "/" : window.location.href,
+    )}`;
+    return (
+      <div
+        className={cn(
+          "flex min-h-[60vh] flex-col items-center justify-center gap-4 p-4",
+          className,
+        )}
+      >
+        <Card className="w-full max-w-md shadow-lg">
+          <CardHeader className="pb-2 text-center">
+            <div className="mb-4 flex justify-center">
+              <div className="rounded-full bg-background p-3 shadow-sm">
+                <LogIn className="h-10 w-10 text-primary" />
+              </div>
+            </div>
+            <CardTitle className="text-2xl">เซสชันหมดอายุ</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4 text-center">
+            <p className="text-muted-foreground">
+              คุณถูกออกจากระบบระหว่างใช้งาน ข้อมูลที่ยังไม่ได้บันทึกจะหายไป กรุณาเข้าสู่ระบบอีกครั้ง
+              แล้วระบบจะพากลับมาหน้านี้
+            </p>
+            <div className="flex justify-center pt-2">
+              {/* full page load เพื่อให้ proxy/เซสชันเริ่มใหม่สะอาด ๆ */}
+              {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+              <a href={signInHref} className={cn(buttonVariants())}>
+                <LogIn className="mr-2 h-4 w-4" />
+                เข้าสู่ระบบ
+              </a>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("flex min-h-[60vh] flex-col items-center justify-center gap-4 p-4", className)}
+    >
+      <Card className="w-full max-w-md border-destructive/20 bg-destructive/5 shadow-lg">
+        <CardHeader className="pb-2 text-center">
+          <div className="mb-4 flex justify-center">
+            <div className="rounded-full bg-background p-3 shadow-sm">
+              <AlertTriangle className="h-10 w-10 text-destructive" />
+            </div>
+          </div>
+          <CardTitle className="text-2xl text-destructive">{title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4 text-center">
+          <p className="text-muted-foreground">{description}</p>
+
+          {error.digest && (
+            <p className="text-muted-foreground text-xs">
+              รหัสอ้างอิง: <code className="font-mono">{error.digest}</code>
+            </p>
+          )}
+
+          {process.env.NODE_ENV === "development" && error.message && (
+            <pre className="max-h-40 overflow-auto whitespace-pre-wrap rounded border bg-muted p-2 text-left font-mono text-muted-foreground text-xs">
+              {error.message}
+            </pre>
+          )}
+
+          <div className="flex justify-center gap-2 pt-2">
+            <Button onClick={reset}>
+              <RotateCcw className="mr-2 h-4 w-4" />
+              ลองใหม่
+            </Button>
+            {!hideHomeButton && (
+              // ตั้งใจใช้ <a> แทน next/link เพื่อให้เป็น full page load ไม่ใช่ client navigation:
+              // router state ตอนที่ boundary ทำงานอาจพังไปแล้ว และ global-error.tsx
+              // เรนเดอร์อยู่นอก root layout การรีโหลดจริงจึงเป็นทางกู้คืนที่แน่นอนกว่า
+              // eslint-disable-next-line @next/next/no-html-link-for-pages
+              <a href="/" className={cn(buttonVariants({ variant: "outline" }))}>
+                <Home className="mr-2 h-4 w-4" />
+                กลับหน้าหลัก
+              </a>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/shared/layout/page-shell.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@suphark/ui/lib/utils";
+import { type ReactNode, Suspense } from "react";
+import { PageBreadcrumb, type PageBreadcrumbItem } from "../navigation/page-breadcrumb";
+
+interface PageShellProps {
+  title?: string;
+  description?: string;
+  breadcrumb?: PageBreadcrumbItem[];
+  actions?: ReactNode;
+  children: ReactNode;
+  fallback: ReactNode;
+  className?: string;
+}
+
+/**
+ * PageShell - A standard template for implementing the Parallel Shell & Static Header Pattern.
+ * It renders the static header (title, description, breadcrumbs) immediately to the browser
+ * while wrapping the dynamic children in a Suspense boundary for non-blocking streaming.
+ */
+export function PageShell({
+  title,
+  description,
+  breadcrumb,
+  actions,
+  children,
+  fallback,
+  className,
+}: PageShellProps) {
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      {/* 
+        STATIC HEADER (Rendered Immediately)
+        This part ensures the user sees the page title and context right away.
+      */}
+      <div className="space-y-4">
+        {breadcrumb && <PageBreadcrumb items={breadcrumb} />}
+
+        {(title || actions) && (
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              {title && <h1 className="font-bold text-2xl tracking-tight">{title}</h1>}
+              {description && <p className="text-muted-foreground">{description}</p>}
+            </div>
+            {actions && <div className="flex items-center gap-2">{actions}</div>}
+          </div>
+        )}
+      </div>
+
+      {/* 
+        DYNAMIC CONTENT (Streamed)
+        The children are wrapped in Suspense to prevent data waterfalls 
+        from blocking the entire page render.
+      */}
+      <Suspense fallback={fallback}>{children}</Suspense>
+    </div>
+  );
+}

package/src/components/shared/link/transition-link.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "@suphark/ui/lib/utils";
+import { useRouter } from "next/navigation";
+import { useEffect, useTransition } from "react";
+import { toast } from "sonner";
+
+interface TransitionLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * A client-side link that uses useTransition to show pending UI (Toast, opacity)
+ * without blocking the UI, providing a smoother navigation experience
+ * than a standard Next.js <Link> or router.push().
+ */
+export function TransitionLink({
+  href,
+  children,
+  className,
+  onClick,
+  ...props
+}: TransitionLinkProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  // Handle Toast notification for loading state
+  useEffect(() => {
+    if (isPending) {
+      // Use a fixed ID to prevent toast stacking on rapid clicks
+      const toastId = "page-transition-loading";
+      toast.loading("กำลังโหลด...", { id: toastId });
+
+      // Clean up: Dismiss toast when transition finishes (isPending -> false)
+      // or when the component unmounts (navigation completes)
+      return () => {
+        toast.dismiss(toastId);
+      };
+    }
+  }, [isPending]);
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) {
+      onClick(e);
+    }
+
+    if (e.defaultPrevented) return;
+
+    e.preventDefault();
+    startTransition(() => {
+      router.push(href);
+    });
+  };
+
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      className={cn(
+        "font-medium text-primary hover:underline",
+        // Add visual feedback (opacity)
+        isPending && "cursor-wait opacity-70",
+        className,
+      )}
+      aria-disabled={isPending}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}

package/src/components/shared/multi-select-combobox.tsx

@@ -0,0 +1,392 @@
+"use client";
+
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@suphark/ui/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
+import * as React from "react";
+
+export interface MultiSelectOption {
+  label: string;
+  value: string;
+  description?: string;
+  searchableValue?: string;
+  disabled?: boolean;
+}
+
+export interface MultiSelectComboboxProps {
+  /** All available options */
+  options: MultiSelectOption[];
+  /** Selected values */
+  value?: string[];
+  /** Change callback */
+  onChange: (value: string[]) => void;
+  /** Trigger placeholder */
+  placeholder?: string;
+  /** Search input placeholder */
+  searchPlaceholder?: string;
+  /** Empty search result message */
+  emptyText?: string;
+  /** Additional CSS class for the trigger button */
+  className?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Maximum number of badges to display before showing +N more */
+  maxDisplay?: number;
+  /** Allow creating custom options on the fly */
+  creatable?: boolean;
+  /** Show select all / clear all actions in the dropdown */
+  showSelectAll?: boolean;
+  /** Select all button label */
+  selectAllText?: string;
+  /** Clear all button label */
+  clearAllText?: string;
+  /** Show group headers separating selected vs unselected items (default: true) */
+  showGroupHeaders?: boolean;
+  /** Selected group header label */
+  selectedGroupHeading?: string;
+  /** Unselected group header label */
+  unselectedGroupHeading?: string;
+  /** Popover modal mode (useful inside Dialogs) */
+  modal?: boolean;
+  /** Custom render element for PopoverTrigger (e.g. <FormControl />) */
+  triggerRender?: React.ReactElement;
+  /** Accessibility label */
+  ariaLabel?: string;
+  /** ให้ชื่อรายการที่เลือกขึ้นบรรทัดใหม่ได้ แทนการตัดที่ 200px เป็น "..." */
+  wrapText?: boolean;
+}
+
+export function MultiSelectCombobox({
+  options = [],
+  value = [],
+  onChange,
+  placeholder = "เลือก...",
+  searchPlaceholder = "ค้นหา...",
+  emptyText = "ไม่พบผลลัพธ์",
+  className,
+  disabled = false,
+  maxDisplay,
+  creatable = false,
+  showSelectAll = false,
+  selectAllText = "เลือกทั้งหมด",
+  clearAllText = "ล้างการเลือก",
+  showGroupHeaders = true,
+  selectedGroupHeading = "รายการที่เลือก",
+  unselectedGroupHeading = "ตัวเลือกทั้งหมด",
+  modal,
+  triggerRender,
+  ariaLabel,
+  wrapText = false,
+}: MultiSelectComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+
+  const handleToggle = (optionValue: string) => {
+    if (value.includes(optionValue)) {
+      onChange(value.filter((v) => v !== optionValue));
+    } else {
+      onChange([...value, optionValue]);
+    }
+  };
+
+  const handleRemove = (valueToRemove: string, e?: React.MouseEvent | React.KeyboardEvent) => {
+    e?.stopPropagation();
+    onChange(value.filter((v) => v !== valueToRemove));
+  };
+
+  const handleClearAll = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange([]);
+  };
+
+  const handleSelectAll = () => {
+    const allSelectableValues = options.filter((o) => !o.disabled).map((o) => o.value);
+    const combined = Array.from(new Set([...value, ...allSelectableValues]));
+    onChange(combined);
+  };
+
+  const handleCreate = () => {
+    const trimmed = inputValue.trim();
+    if (!trimmed) return;
+    if (!value.includes(trimmed)) {
+      onChange([...value, trimmed]);
+    }
+    setInputValue("");
+  };
+
+  const getLabel = (val: string) => {
+    return options.find((o) => o.value === val)?.label || val;
+  };
+
+  // Split and order options: Selected items ALWAYS appear first at the top
+  const { selectedOptions, unselectedOptions } = React.useMemo(() => {
+    const knownSelected: MultiSelectOption[] = [];
+    const unselected: MultiSelectOption[] = [];
+    const valueSet = new Set(value);
+
+    for (const option of options) {
+      if (valueSet.has(option.value)) {
+        knownSelected.push(option);
+      } else {
+        unselected.push(option);
+      }
+    }
+
+    // Include values that might not be in options (e.g. custom or external IDs)
+    const optionsValueSet = new Set(options.map((o) => o.value));
+    const unknownSelected: MultiSelectOption[] = value
+      .filter((val) => !optionsValueSet.has(val))
+      .map((val) => ({ label: val, value: val }));
+
+    return {
+      selectedOptions: [...knownSelected, ...unknownSelected],
+      unselectedOptions: unselected,
+    };
+  }, [options, value]);
+
+  const displayedValues =
+    typeof maxDisplay === "number" && maxDisplay > 0 ? value.slice(0, maxDisplay) : value;
+  const remainingCount = value.length - displayedValues.length;
+
+  const canCreate =
+    creatable &&
+    inputValue.trim().length > 0 &&
+    !options.some(
+      (o) =>
+        o.label.toLowerCase() === inputValue.trim().toLowerCase() ||
+        o.value.toLowerCase() === inputValue.trim().toLowerCase(),
+    );
+
+  const defaultTrigger = (
+    <Button
+      type="button"
+      variant="outline"
+      role="combobox"
+      aria-label={ariaLabel || placeholder}
+      aria-expanded={open}
+      className={cn(
+        "h-auto min-h-10 w-full justify-between font-normal",
+        value.length === 0 && "text-muted-foreground",
+        className,
+      )}
+      disabled={disabled}
+    />
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={modal}>
+      <PopoverTrigger render={triggerRender ?? defaultTrigger}>
+        <div className="flex flex-wrap items-center gap-1.5 py-0.5">
+          {value.length > 0 ? (
+            <>
+              {displayedValues.map((val) => (
+                <Badge
+                  key={val}
+                  variant="secondary"
+                  className={cn(
+                    "rounded-md px-1.5 py-0.5 font-normal text-xs transition-colors",
+                    wrapText && "h-auto max-w-full whitespace-normal text-left",
+                  )}
+                >
+                  <span
+                    className={cn(
+                      wrapText
+                        ? "min-w-0 wrap-break-word whitespace-normal"
+                        : "max-w-[200px] truncate",
+                    )}
+                  >
+                    {getLabel(val)}
+                  </span>
+                  {!disabled && (
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      aria-label={`ลบ ${getLabel(val)}`}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleRemove(val, e);
+                        }
+                      }}
+                      onClick={(e) => handleRemove(val, e)}
+                      className="ml-1 rounded-full p-0.5 outline-none hover:bg-muted-foreground/20 focus:ring-1 focus:ring-ring print:hidden"
+                    >
+                      <X className="size-3 text-muted-foreground hover:text-foreground" />
+                    </span>
+                  )}
+                </Badge>
+              ))}
+              {remainingCount > 0 && (
+                <Badge
+                  variant="outline"
+                  className="rounded-md px-1.5 py-0.5 font-normal text-muted-foreground text-xs"
+                >
+                  +{remainingCount} รายการ
+                </Badge>
+              )}
+            </>
+          ) : (
+            <span className="text-muted-foreground text-sm">{placeholder}</span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {value.length > 0 && !disabled && (
+            <span
+              role="button"
+              tabIndex={0}
+              title="ล้างทั้งหมด"
+              aria-label="ล้างทั้งหมด"
+              onClick={handleClearAll}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleClearAll(e as unknown as React.MouseEvent);
+                }
+              }}
+              className="rounded-full p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:ring-1 focus:ring-ring print:hidden"
+            >
+              <X className="size-3.5" />
+            </span>
+          )}
+          <ChevronsUpDown
+            className={cn("size-4 shrink-0 opacity-50 print:hidden", disabled && "hidden")}
+          />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-[--anchor-width] min-w-[220px] p-0" align="start">
+        <Command shouldFilter={true}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            value={inputValue}
+            onValueChange={(val) => {
+              if (val !== null) setInputValue(val);
+            }}
+          />
+          {showSelectAll && options.length > 0 && (
+            <div className="flex items-center justify-between border-b px-3 py-1.5 text-xs">
+              <button
+                type="button"
+                className="font-medium text-primary hover:underline disabled:opacity-50"
+                onClick={handleSelectAll}
+                disabled={options.every((o) => value.includes(o.value))}
+              >
+                {selectAllText}
+              </button>
+              {value.length > 0 && (
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-destructive hover:underline"
+                  onClick={() => onChange([])}
+                >
+                  {clearAllText}
+                </button>
+              )}
+            </div>
+          )}
+          <CommandList className="max-h-64 overflow-y-auto">
+            <CommandEmpty>{emptyText}</CommandEmpty>
+
+            {/* 1. รายการที่ถูกเลือกจะแสดงอยู่บนสุดเสมอ (Selected items always at the top) */}
+            {selectedOptions.length > 0 && (
+              <CommandGroup
+                heading={showGroupHeaders ? selectedGroupHeading : undefined}
+                className="pb-1"
+              >
+                {selectedOptions.map((option) => (
+                  <CommandItem
+                    key={`selected-${option.value}`}
+                    value={
+                      option.searchableValue ||
+                      `${option.label} ${option.description || ""} ${option.value}`
+                    }
+                    onSelect={() => handleToggle(option.value)}
+                    disabled={option.disabled}
+                    className="flex cursor-pointer items-center justify-between gap-2 aria-selected:bg-accent"
+                  >
+                    <div className="flex min-w-0 items-center gap-2">
+                      <div className="flex size-4 shrink-0 items-center justify-center rounded-sm bg-primary text-primary-foreground">
+                        <Check className="size-3" />
+                      </div>
+                      <span className="truncate font-medium text-foreground">{option.label}</span>
+                    </div>
+                    {option.description && (
+                      <span className="truncate text-muted-foreground text-xs">
+                        {option.description}
+                      </span>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {selectedOptions.length > 0 && unselectedOptions.length > 0 && (
+              <CommandSeparator className="my-1" />
+            )}
+
+            {/* 2. รายการตัวเลือกที่ยังไม่ได้เลือก (Unselected items) */}
+            {unselectedOptions.length > 0 && (
+              <CommandGroup
+                heading={
+                  showGroupHeaders && selectedOptions.length > 0
+                    ? unselectedGroupHeading
+                    : undefined
+                }
+              >
+                {unselectedOptions.map((option) => (
+                  <CommandItem
+                    key={`unselected-${option.value}`}
+                    value={
+                      option.searchableValue ||
+                      `${option.label} ${option.description || ""} ${option.value}`
+                    }
+                    onSelect={() => handleToggle(option.value)}
+                    disabled={option.disabled}
+                    className="flex cursor-pointer items-center justify-between gap-2"
+                  >
+                    <div className="flex min-w-0 items-center gap-2">
+                      <div className="size-4 shrink-0 rounded-sm border border-muted-foreground/30" />
+                      <span className="truncate">{option.label}</span>
+                    </div>
+                    {option.description && (
+                      <span className="truncate text-muted-foreground text-xs">
+                        {option.description}
+                      </span>
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+
+            {/* 3. Creatable Option */}
+            {canCreate && (
+              <>
+                <CommandSeparator className="my-1" />
+                <CommandGroup>
+                  <CommandItem
+                    value={inputValue}
+                    onSelect={handleCreate}
+                    className="flex cursor-pointer items-center gap-2 text-primary"
+                  >
+                    <Plus className="size-4" />
+                    <span>เพิ่ม "{inputValue}"</span>
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}