@suphark/ui 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.7.0] — 2026-09-20
+
+component ระดับแอปที่ Pi Auth และ Pi Done เขียนซ้ำกัน — สเปกจาก Pi Auth ออกแบบให้ทั้งสองแอปใช้ร่วม (ไม่พึ่ง i18n/auth ของแอป ทุกข้อความรับเป็น prop หรือ `UiText`)
+
+### Added
+
+- **`CommandPalette`** (`@suphark/ui/next`) — ค้นหาแบบ ⌘K/Ctrl+K ทั้งแอป: `pages` (หน้าในเมนูที่แอปกรองสิทธิ์แล้ว — กรองฝั่ง client ตาม label/group/href/keywords) + `search?(query) => Promise<CommandPaletteSection[]>` (server action ของแอป เรียกเมื่อ ≥ `minQuery` ตัว, debounce `debounceMs` 150, เก็บ query คู่ผล ผลล่าสุดเท่านั้นที่แสดง), `compact` (ปุ่มไอคอนใน header) หรือปุ่มเต็มกว้าง + `Kbd` (⌘K/CtrlK ตาม platform หลัง mount) สำหรับ `sidebarHeader`, `shortcut` (ค่าเริ่มต้น k), `text` (fallback `UiText.palette`), `onNavigate` (ค่าเริ่มต้น router.push + ปิด); `Command shouldFilter={false}`, `CommandEmpty` แสดง "กำลังค้นหา…" ขณะ pending; types `CommandPaletteItem`, `CommandPaletteSection`, `CommandPaletteText`
+- **`OrganizationSwitcher`** (`@suphark/ui/next`) — ตัวสลับองค์กร/tenant แบบ Clerk บน `HeaderCrumb` + `DropdownMenu`: `organizations[{ id, name, slug?, logoUrl? }]`, `activeId`, `onSwitch(id)` (server action — component ทำ useTransition + `router.refresh()` ปิดได้ด้วย `refresh={false}`), `placement="header"` (HeaderCrumb ใน layout top) / `"sidebar"` (ปุ่มเต็มกว้าง + SwitcherChevron ใน `sidebarHeader`), `fallbackLabel`/`heading` (ค่าเริ่มต้น `UiText.switcher`), `hint(org)` (ค่าเริ่มต้น `/slug`), `footer` (slot ท้ายเมนู เช่น สร้างองค์กร); องค์กรเดียว = ไม่มีเมนู, active มี ✓ และกดไม่ทำอะไร, pending ปิดปุ่ม, โลโก้ `<img size-5>` หรือ Building2; types `OrganizationOption`, `OrganizationSwitcherProps`
+- `UiText.palette` / `UiText.switcher` (optional, มีค่าเริ่มต้นไทย/อังกฤษ)
+- **`IconPicker`** (barrel, generic `T extends string`) — เลือกไอคอนจากชุดที่แอปส่ง `icons[{ name, icon: LucideIcon, labelTh, labelEn, keywords? }]` (แพ็กเกจไม่ bundle ชุดไอคอน): ค้นหา name/labelTh/labelEn/keywords ผ่าน `useDeferredValue`, preview ไอคอน+ชื่อด้านบน, กริด `SelectionButton` (aria-pressed, title/aria-label ตาม `language` th/en), `accentColor` (inline style สี dynamic ของผู้ใช้), `heightClassName`/`columnsClassName`, `text` ทับข้อความ — สเปกจาก DueBell ให้ Pi Done (metadata icon) ใช้ร่วม
+- **`SelectionButton`** (barrel) — ปุ่ม toggle `aria-pressed` + สีเน้นเมื่อเลือก (Button outline) — chip ประเภท/ตัวกรอง, ช่องใน IconPicker (ยกจาก DueBell)
+- **`CalendarMonthGrid<T>`** (barrel) — ตารางเดือนเลือกวันที่แอปคุมเนื้อหาต่อวัน: `month "YYYY-MM"`, `selectedDay`, `onSelectDay(day, date)`, `itemsByDay`, `renderDay(ctx)` (คืน null = ✓ ของแพ็กเกจเมื่อ complete), `dayState(items, ctx) → { complete?, hasItems? }` → data-attribute `data-selected/today/has-items/complete/weekend` ให้ CSS ของแอปแต่ง, (data-attribute เป็น boolean มี/ไม่มี — CSS ใช้ `[data-selected]`), `weekStartsOn 0|1`, `weekdayLabels` (export `WEEKDAYS_TH`/`WEEKDAYS_EN`), `today` (ไม่ส่ง = browser หลัง mount ผ่าน `useMounted` — SSR ได้ไม่ mismatch), `dayLabel` (aria-label "วันที่ N มี M รายการ"), `legend`, `dayClassName`; ช่องว่างก่อนวันที่ 1 aspect-square; ปุ่มวัน `aria-pressed` — สเปกจาก DueBell + Pi Done
+- **`ProgressBar`** (barrel) — แถบความคืบหน้าตั้ง `tone` (default/success/warning/destructive), `size` sm/md/lg, `label`, `showValue`/`format`, `trackClassName`/`indicatorClassName`/`indicatorStyle` (สี dynamic) จาก props — `Progress` ของ shadcn ต่อท้าย Track+Indicator ให้เสมอ ส่ง children เข้าไปจะได้ 2 แถบ (รายงานจาก DueBell) จึงประกอบจาก `ProgressPrimitive.Root` โดยตรง
+- showcase: หน้า `icon-picker`, `selection-button`, `calendar-month-grid`, `progress-bar`; tests 6 กรณีเพิ่ม (รวม 100)
+- **error รายช่องในฟอร์ม server action** (ขอจาก Pi Mail): `FormState` แบบ `ok: false` รับ `errors?: Record<string, string>`; `ActionForm` และ `FormDialog` รับ `children` เป็นฟังก์ชัน `({ state, pending, errors, fieldError }) => ReactNode` (type `FormRenderContext`) → `<LabeledField error={fieldError("email")}>` ไม่ต้องมี hook ของแอป; `FormMessage` ยังแสดง `error` รวมเหมือนเดิม
+- `UserMenu`: prop `menuLabel` + `UiText.userMenu`/`signOut` (ขอจาก Pi PDF — แอปอังกฤษได้ label ไทย); `ThemeMenuItems`: prop `onThemeChange(theme)` สำหรับบันทึกธีมเป็น preference ของบัญชี + ข้อความจาก `UiText.theme`
+- `LabeledField`: prop `htmlFor` — ส่งมาแล้ว label ไม่ครอบ control (ผูกด้วย id) ให้ tooling ที่ไม่คำนวณ nested label เห็น accessible name (ข้อสังเกตจาก Pi Files)
+- `DataTable`: `showToolbar` / `showPagination` (ค่าเริ่มต้น true) ปิดแถบค้นหา/ตัวกรอง/View และ pagination สำหรับตารางตั้งค่าเล็ก ๆ (ขอจาก Pi Files)
+
+### Fixed
+
+- **`AppShell` (layout sidebar) มี `<main>` ซ้อน 2 ชั้น** (รายงานจาก DueBell): `SidebarInset` ของ shadcn เป็น `<main>` อยู่แล้ว → ใส่ `id={APP_MAIN_ID}`/`tabIndex` ที่ SidebarInset และเลิกสร้าง `<main>` ชั้นใน (เป็น `<div>`); layout top ยังมี `<main>` ตัวเดียวเหมือนเดิม
+- showcase: หน้า `command-palette`, `organization-switcher`; `/shell` (sidebarHeader + ยุบเป็นไอคอน) และ `/shell-top` (crumb องค์กร) ใช้สองตัวนี้จริงแทน mock เดิม; tests 5 กรณี (คีย์ลัด toggle + กรอง keywords, search debounce/ผลล่าสุด/push+ปิด, org เดียวไม่มีเมนู, active ไม่เรียก onSwitch + refresh, fallback label)
+
 ## [0.6.1] — 2026-09-20
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/app-shell/app-shell.tsx

@@ -114,7 +114,7 @@ export function AppShell(props: AppShellProps) {
   return <SidebarShell {...props} />;
 }
 
-/** id ของ <main> ที่ AppShell สร้าง — ใช้อ้างจาก skip link / anchor */
+/** id ของ <main> ของ AppShell (sidebar: SidebarInset, top: main ในเนื้อหา) — ใช้อ้างจาก skip link / anchor */
 export const APP_MAIN_ID = "app-main";
 
 /** ลิงก์ "ข้ามไปเนื้อหา" สำหรับคีย์บอร์ด/screen reader — มองไม่เห็นจนกด Tab ตัวแรก */
@@ -180,7 +180,8 @@ function SidebarShell({
         collapsible={collapsible}
       />
 
-      <SidebarInset>
+      {/* SidebarInset ของ shadcn เป็น <main> อยู่แล้ว → ใส่ id/tabIndex ให้ skip link ที่นี่ ไม่สร้าง <main> ซ้อน */}
+      <SidebarInset id={APP_MAIN_ID} tabIndex={-1} className="outline-none">
         {showHeader && (
           <div className="sticky top-0 z-40 shrink-0 bg-background print:static">
             {headerOpts.banner}
@@ -216,17 +217,15 @@ function SidebarShell({
             </header>
           </div>
         )}
-        <main
-          id={APP_MAIN_ID}
-          tabIndex={-1}
+        <div
           className={cn(
-            "flex flex-1 flex-col gap-4 p-4 outline-none md:gap-6 md:p-6 print:overflow-visible",
+            "flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6 print:overflow-visible",
             contentMaxWidth && cn("mx-auto w-full", contentMaxWidth),
             contentClassName,
           )}
         >
           {children}
-        </main>
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );

package/src/components/app-shell/command-palette.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@suphark/ui/components/ui/command";
+import { Kbd } from "@suphark/ui/components/ui/kbd";
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
+import { cn } from "@suphark/ui/lib/utils";
+import { Search } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type ReactNode, useEffect, useMemo, useState, useTransition } from "react";
+
+export interface CommandPaletteItem {
+  href: string;
+  label: string;
+  /** ชื่อกลุ่ม (แสดงเป็น shortcut ท้ายรายการ และใช้ค้นหา) */
+  group?: string;
+  icon?: ReactNode;
+  /** คำค้นเพิ่มเติมนอกจาก label/group/href */
+  keywords?: string[];
+}
+
+export interface CommandPaletteSection {
+  key: string;
+  heading: string;
+  items: Array<{ id: string; href: string; label: string; description?: string; icon?: ReactNode }>;
+}
+
+export interface CommandPaletteText {
+  placeholder: string;
+  title: string;
+  description: string;
+  empty: string;
+  searching: string;
+  /** หัวกลุ่ม "หน้า" */
+  pages: string;
+}
+
+const DEFAULT_TEXT: CommandPaletteText = {
+  placeholder: "ค้นหาหรือสั่งงาน…",
+  title: "ค้นหา",
+  description: "พิมพ์เพื่อค้นหาหน้าและข้อมูล",
+  empty: "ไม่พบผลลัพธ์",
+  searching: "กำลังค้นหา…",
+  pages: "หน้า",
+};
+
+/** ⌘ บน Mac, Ctrl ที่อื่น — อ่านฝั่ง client หลัง mount เท่านั้น (กัน hydration mismatch) */
+function useModKeyLabel(mounted: boolean): string {
+  return useMemo(() => {
+    if (!mounted) return "Ctrl";
+    const p = `${navigator.platform ?? ""} ${navigator.userAgent ?? ""}`;
+    return /mac|iphone|ipad/i.test(p) ? "⌘" : "Ctrl";
+  }, [mounted]);
+}
+
+/**
+ * ค้นหาแบบ ⌘K / Ctrl+K ทั้งแอป: หน้าในเมนู (แอปกรองสิทธิ์มาแล้ว) กรองฝั่ง client + ส่วนจาก server action
+ * (`search`) เมื่อพิมพ์ ≥ `minQuery` ตัว (debounce; ผลของ query ล่าสุดเท่านั้นที่แสดง)
+ * ปุ่มเรียก: `compact` = ไอคอนใน header, ค่าเริ่มต้น = ปุ่มเต็มกว้าง + Kbd ใน `sidebarHeader` ของ AppShell
+ * ข้อความรับเป็น prop `text` (ค่าเริ่มต้นจาก `UiText.palette` หรือไทย) — ไม่พึ่ง i18n ของแอป
+ * ยกจาก Pi Auth (features/console/command-palette) ให้ Pi Done/DueBell ใช้ร่วม
+ */
+export function CommandPalette({
+  pages,
+  search,
+  compact = false,
+  shortcut = "k",
+  minQuery = 2,
+  debounceMs = 150,
+  text: textProp,
+  onNavigate,
+  className,
+}: {
+  pages: CommandPaletteItem[];
+  /** server action ของแอป — คืน section ตามลำดับที่ต้องการแสดง */
+  search?: (query: string) => Promise<CommandPaletteSection[]>;
+  compact?: boolean;
+  /** ตัวอักษรคีย์ลัดร่วมกับ ⌘/Ctrl (ค่าเริ่มต้น "k") */
+  shortcut?: string;
+  minQuery?: number;
+  debounceMs?: number;
+  text?: Partial<CommandPaletteText>;
+  /** ค่าเริ่มต้น router.push + ปิดกล่อง — ครอบเพื่อ prefetch/analytics แล้วเรียกต่อเองได้ */
+  onNavigate?: (href: string) => void;
+  className?: string;
+}) {
+  const ui = useUiText();
+  const text: CommandPaletteText = { ...DEFAULT_TEXT, ...ui.palette, ...textProp };
+  const router = useRouter();
+  const mounted = useMounted();
+  const mod = useModKeyLabel(mounted);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [result, setResult] = useState<{ query: string; sections: CommandPaletteSection[] } | null>(
+    null,
+  );
+  const [pending, start] = useTransition();
+
+  // คีย์ลัดจากที่ไหนก็ได้ในแอป
+  useEffect(() => {
+    const key = shortcut.toLowerCase();
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut]);
+
+  const q = query.trim();
+  const shouldSearch = Boolean(search) && q.length >= minQuery;
+
+  // ค้นหาฝั่ง server หลังหยุดพิมพ์ — เก็บ query คู่กับผล ผลที่ไม่ตรง query ปัจจุบันไม่แสดง
+  useEffect(() => {
+    if (!search || !shouldSearch) return;
+    const handle = setTimeout(() => {
+      start(async () => {
+        try {
+          const sections = await search(q);
+          setResult({ query: q, sections });
+        } catch {
+          setResult({ query: q, sections: [] });
+        }
+      });
+    }, debounceMs);
+    return () => clearTimeout(handle);
+  }, [q, search, shouldSearch, debounceMs]);
+
+  const sections = shouldSearch && result?.query === q ? result.sections : [];
+  const ql = q.toLowerCase();
+  const visiblePages = ql
+    ? pages.filter((p) =>
+        `${p.label} ${p.group ?? ""} ${p.href} ${(p.keywords ?? []).join(" ")}`
+          .toLowerCase()
+          .includes(ql),
+      )
+    : pages;
+  const nothing = visiblePages.length === 0 && sections.every((s) => s.items.length === 0);
+
+  function close() {
+    setOpen(false);
+    setQuery("");
+  }
+  function go(href: string) {
+    close();
+    if (onNavigate) onNavigate(href);
+    else router.push(href);
+  }
+
+  const shortcutLabel = `${mod}${shortcut.toUpperCase()}`;
+
+  return (
+    <>
+      {compact ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={text.placeholder}
+          title={`${text.placeholder} (${shortcutLabel})`}
+          className={cn("text-muted-foreground", className)}
+          onClick={() => setOpen(true)}
+        >
+          <Search />
+        </Button>
+      ) : (
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className={cn(
+            "h-8 w-full justify-start gap-2 bg-background px-2 font-normal text-muted-foreground",
+            className,
+          )}
+          onClick={() => setOpen(true)}
+        >
+          <Search />
+          <span className="flex-1 truncate text-left">{text.placeholder}</span>
+          <Kbd className="hidden sm:inline-flex">{shortcutLabel}</Kbd>
+        </Button>
+      )}
+      <CommandDialog
+        open={open}
+        onOpenChange={(o) => (o ? setOpen(true) : close())}
+        title={text.title}
+        description={text.description}
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            autoFocus
+            placeholder={text.placeholder}
+            value={query}
+            onValueChange={setQuery}
+          />
+          <CommandList>
+            {nothing && (
+              <CommandEmpty>{pending && shouldSearch ? text.searching : text.empty}</CommandEmpty>
+            )}
+            {visiblePages.length > 0 && (
+              <CommandGroup heading={text.pages}>
+                {visiblePages.map((p) => (
+                  <CommandItem key={p.href} value={p.href} onSelect={() => go(p.href)}>
+                    <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">
+                      {p.icon}
+                    </span>
+                    <span className="flex-1 truncate">{p.label}</span>
+                    {p.group && <CommandShortcut>{p.group}</CommandShortcut>}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            {sections.map(
+              (s) =>
+                s.items.length > 0 && (
+                  <CommandGroup key={s.key} heading={s.heading}>
+                    {s.items.map((it) => (
+                      <CommandItem
+                        key={it.id}
+                        value={`${s.key}:${it.id}`}
+                        onSelect={() => go(it.href)}
+                      >
+                        <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">
+                          {it.icon}
+                        </span>
+                        <span className="flex-1 truncate">
+                          {it.label}
+                          {it.description && (
+                            <span className="text-muted-foreground"> · {it.description}</span>
+                          )}
+                        </span>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ),
+            )}
+            {pending && shouldSearch && !nothing && (
+              <div className="px-3 py-2 text-muted-foreground text-xs">{text.searching}</div>
+            )}
+          </CommandList>
+        </Command>
+      </CommandDialog>
+    </>
+  );
+}

package/src/components/app-shell/index.ts

@@ -1,9 +1,20 @@
 export { AppBrand, type AppBrandProps } from "./app-brand";
 export { AppNav, AppNavGroupMenu, type AppNavPinProps } from "./app-nav";
 export { APP_MAIN_ID, AppShell, type AppShellProps } from "./app-shell";
+export {
+  CommandPalette,
+  type CommandPaletteItem,
+  type CommandPaletteSection,
+  type CommandPaletteText,
+} from "./command-palette";
 export { HeaderBreadcrumbs, type HeaderBreadcrumbsProps } from "./header-breadcrumbs";
 export { HeaderCrumb, HeaderCrumbs } from "./header-crumb";
 export { NavLink } from "./nav-link";
+export {
+  type OrganizationOption,
+  OrganizationSwitcher,
+  type OrganizationSwitcherProps,
+} from "./organization-switcher";
 export { SubNav } from "./sub-nav";
 export { isTabActive, TopTabs, topLevelTabs } from "./top-tabs";
 export {

package/src/components/app-shell/organization-switcher.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { cn } from "@suphark/ui/lib/utils";
+import { Building2, Check } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { type ReactNode, useTransition } from "react";
+import { HeaderCrumb } from "./header-crumb";
+
+export interface OrganizationOption {
+  id: string;
+  name: string;
+  slug?: string;
+  logoUrl?: string | null;
+}
+
+export interface OrganizationSwitcherProps {
+  organizations: OrganizationOption[];
+  activeId: string | null;
+  /** แอปเรียก server action สลับองค์กร — component ทำ useTransition + router.refresh() หลัง resolve */
+  onSwitch: (id: string) => Promise<void> | void;
+  /** refresh หน้าหลังสลับ (ค่าเริ่มต้น true) */
+  refresh?: boolean;
+  /** ไม่มี active — ค่าเริ่มต้น `UiText.switcher.choose` */
+  fallbackLabel?: string;
+  /** หัว dropdown — ค่าเริ่มต้น `UiText.switcher.organization` */
+  heading?: string;
+  /** ข้อความจางท้ายชื่อ (ค่าเริ่มต้น `/slug` ถ้ามี) */
+  hint?: (org: OrganizationOption) => ReactNode;
+  /** slot ท้ายเมนู เช่น "สร้างองค์กร…", "จัดการองค์กร" */
+  footer?: ReactNode;
+  /** `header` = HeaderCrumb ใน header (layout top); `sidebar` = ปุ่มเต็มกว้างใน `sidebarHeader` ของ AppShell */
+  placement?: "header" | "sidebar";
+  className?: string;
+}
+
+function OrgLogo({ org }: { org: OrganizationOption | undefined }) {
+  if (org?.logoUrl)
+    return <img src={org.logoUrl} alt="" className="size-5 rounded object-contain" />;
+  return <Building2 className="size-3.5 text-muted-foreground" aria-hidden="true" />;
+}
+
+/**
+ * ตัวสลับองค์กร/tenant มาตรฐาน (แบบ Clerk OrganizationSwitcher) — ยกจาก Pi Auth TenantSwitcher ให้ Pi Done/DueBell ใช้ร่วม
+ * องค์กรเดียว = แสดงชื่อ ไม่มี dropdown; รายการที่ active มี ✓ และกดแล้วไม่ทำอะไร; ระหว่าง pending ปุ่ม disabled
+ */
+export function OrganizationSwitcher({
+  organizations,
+  activeId,
+  onSwitch,
+  refresh = true,
+  fallbackLabel,
+  heading,
+  hint = (o) => (o.slug ? `/${o.slug}` : undefined),
+  footer,
+  placement = "header",
+  className,
+}: OrganizationSwitcherProps) {
+  const text = useUiText();
+  const router = useRouter();
+  const [pending, start] = useTransition();
+  const active = organizations.find((o) => o.id === activeId);
+  const label = active ? active.name : (fallbackLabel ?? text.switcher?.choose ?? "เลือกองค์กร");
+  const single = organizations.length <= 1 && !footer;
+
+  const trigger =
+    placement === "sidebar" ? (
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={pending}
+        aria-label={heading ?? text.switcher?.organization ?? "องค์กร"}
+        className={cn("h-8 w-full justify-start gap-2 bg-background px-2 font-normal", className)}
+      >
+        <OrgLogo org={active} />
+        <span className="truncate">{label}</span>
+        {!single && <SwitcherChevron className="ml-auto" />}
+      </Button>
+    ) : (
+      <HeaderCrumb
+        icon={<OrgLogo org={active} />}
+        label={label}
+        hint={active ? hint(active) : undefined}
+        chevron={!single}
+        disabled={pending}
+        className={className}
+      />
+    );
+
+  if (single) return trigger;
+
+  function pick(id: string) {
+    if (id === activeId) return;
+    start(async () => {
+      await onSwitch(id);
+      if (refresh) router.refresh();
+    });
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={trigger} />
+      <DropdownMenuContent align="start" className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="text-muted-foreground">
+            {heading ?? text.switcher?.organization ?? "องค์กร"}
+          </DropdownMenuLabel>
+          {organizations.map((o) => {
+            const isActive = o.id === activeId;
+            return (
+              <DropdownMenuItem
+                key={o.id}
+                onClick={() => pick(o.id)}
+                aria-current={isActive ? "true" : undefined}
+                className="gap-2"
+              >
+                <OrgLogo org={o} />
+                <span className="flex min-w-0 flex-1 flex-col">
+                  <span className="truncate">{o.name}</span>
+                  {hint(o) && (
+                    <span className="truncate text-muted-foreground text-xs">{hint(o)}</span>
+                  )}
+                </span>
+                {isActive && <Check className="size-4 shrink-0" aria-hidden="true" />}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuGroup>
+        {footer && (
+          <>
+            <DropdownMenuSeparator />
+            {footer}
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/app-shell/user-menu.tsx

@@ -2,6 +2,7 @@
 
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -41,6 +42,8 @@ export interface UserMenuProps {
   variant?: "sidebar" | "header";
   align?: "start" | "end";
   className?: string;
+  /** aria-label ของปุ่มเปิดเมนู (ค่าเริ่มต้น `UiText.userMenu` "เมนูผู้ใช้") — ต่อท้ายชื่อผู้ใช้ให้ */
+  menuLabel?: string;
 }
 
 /** เมนูผู้ใช้ (ยกจาก supplychain NavUser + Pi Auth UserMenu) */
@@ -48,11 +51,13 @@ export function UserMenu({
   user,
   children,
   onSignOut,
-  signOutLabel = "ออกจากระบบ",
+  signOutLabel,
   variant = "sidebar",
   align = variant === "header" ? "end" : "start",
   className,
+  menuLabel,
 }: UserMenuProps) {
+  const text = useUiText();
   const [pending, start] = useTransition();
   const description = user.description ?? user.email;
   return (
@@ -61,7 +66,7 @@ export function UserMenu({
         render={
           <Button
             variant="ghost"
-            aria-label={`เปิดเมนูผู้ใช้ ${user.name}`}
+            aria-label={`${menuLabel ?? text.userMenu ?? "เมนูผู้ใช้"}: ${user.name}`}
             className={cn(
               variant === "sidebar"
                 ? "h-auto w-full justify-start gap-2.5 px-2 py-2 text-left group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:p-0"
@@ -122,7 +127,7 @@ export function UserMenu({
             <DropdownMenuSeparator />
             <DropdownMenuItem disabled={pending} onClick={() => start(() => onSignOut())}>
               <LogOut aria-hidden="true" />
-              {signOutLabel}
+              {signOutLabel ?? text.signOut ?? "ออกจากระบบ"}
             </DropdownMenuItem>
           </>
         )}

package/src/components/data-table/data-table.tsx

@@ -139,6 +139,8 @@ export function DataTable<TData, TValue>({
   enableColumnResizing = false,
   enableRowSelection = true,
   isLoading,
+  showToolbar = true,
+  showPagination = true,
   pageSizeOptions,
   toolbarFilters,
   preservedFilterIds,
@@ -347,22 +349,26 @@ export function DataTable<TData, TValue>({
 
   return (
     <div className={cn("flex flex-col gap-4", containerClassName)}>
-      <DataTableToolbar
-        table={table}
-        facetedFilters={facetedFilters}
-        actionsComponent={actionsComponent?.(table)}
-        globalFilterPlaceholder={globalFilterPlaceholder}
-        toolbarFilters={toolbarFilters?.(table)}
-        preservedFilterIds={preservedFilterIds}
-      />
+      {showToolbar && (
+        <DataTableToolbar
+          table={table}
+          facetedFilters={facetedFilters}
+          actionsComponent={actionsComponent?.(table)}
+          globalFilterPlaceholder={globalFilterPlaceholder}
+          toolbarFilters={toolbarFilters?.(table)}
+          preservedFilterIds={preservedFilterIds}
+        />
+      )}
       {customView ? (
         <>
           {customView}
-          <DataTablePagination
-            table={table}
-            pageSizeOptions={pageSizeOptions}
-            onPageSizeChange={onPageSizeChange}
-          />
+          {showPagination && (
+            <DataTablePagination
+              table={table}
+              pageSizeOptions={pageSizeOptions}
+              onPageSizeChange={onPageSizeChange}
+            />
+          )}
         </>
       ) : (
         <>
@@ -379,19 +385,21 @@ export function DataTable<TData, TValue>({
               tableContent
             )}
           </div>
-          <div
-            className={
-              stickyPagination
-                ? "sticky bottom-0 z-20 border-t bg-background py-2 max-sm:-mx-2"
-                : undefined
-            }
-          >
-            <DataTablePagination
-              table={table}
-              pageSizeOptions={pageSizeOptions}
-              onPageSizeChange={onPageSizeChange}
-            />
-          </div>
+          {showPagination && (
+            <div
+              className={
+                stickyPagination
+                  ? "sticky bottom-0 z-20 border-t bg-background py-2 max-sm:-mx-2"
+                  : undefined
+              }
+            >
+              <DataTablePagination
+                table={table}
+                pageSizeOptions={pageSizeOptions}
+                onPageSizeChange={onPageSizeChange}
+              />
+            </div>
+          )}
         </>
       )}
     </div>

package/src/components/data-table/types.ts

@@ -95,6 +95,10 @@ export interface DataTableProps<TData, TValue> {
   initialPageSize?: number;
   meta?: Record<string, unknown>;
   isLoading?: boolean;
+  /** ซ่อนแถบค้นหา/ตัวกรอง/View (ตารางตั้งค่าเล็ก ๆ) */
+  showToolbar?: boolean;
+  /** ซ่อน pagination (แถวน้อย ไม่ต้องแบ่งหน้า) */
+  showPagination?: boolean;
 
   // Advanced
   enableColumnResizing?: boolean;