@suphark/ui 0.25.0 → 0.26.0

package/src/components/shared/form/form-field-autocomplete.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+/** variant "autocomplete" ของ FormFieldInput — แยกไฟล์เพราะ cmdk หนัก โหลดเฉพาะเมื่อใช้ (React.lazy) */
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@suphark/ui/components/ui/command";
+import { cn } from "@suphark/ui/lib/utils";
+import { Command as CommandPrimitive } from "cmdk";
+import { Check } from "lucide-react";
+import { useState } from "react";
+import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
+
+export type AutocompleteOption = {
+  value: string;
+  label: string;
+};
+
+export function AutocompleteInput<T extends FieldValues>({
+  field,
+  data,
+  placeholder,
+  disabled,
+  emptyMessage = "No results found.",
+  required,
+}: {
+  field: ControllerRenderProps<T, Path<T>>;
+  data: AutocompleteOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  emptyMessage?: string;
+  required?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Command className="overflow-visible bg-transparent">
+      <div
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm ring-offset-background focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
+          disabled && "cursor-not-allowed opacity-50",
+          required && !field.value && "border-input",
+        )}
+      >
+        <CommandPrimitive.Input
+          value={field.value as string}
+          onValueChange={field.onChange}
+          onFocus={() => setOpen(true)}
+          onBlur={() => setOpen(false)}
+          placeholder={placeholder}
+          disabled={disabled}
+          className="w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+        />
+      </div>
+      <div className="relative mt-1">
+        {open && field.value && (
+          <CommandList className="fade-in-0 zoom-in-95 absolute top-0 z-50 w-full animate-in rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
+            <CommandEmpty className="py-2 text-center text-muted-foreground text-sm">
+              {emptyMessage}
+            </CommandEmpty>
+            <CommandGroup>
+              {data.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={`${option.label} ${option.value}`}
+                  onSelect={() => {
+                    field.onChange(option.value as PathValue<T, Path<T>>);
+                    setOpen(false);
+                  }}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      field.value === option.value ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        )}
+      </div>
+    </Command>
+  );
+}

package/src/components/shared/form/form-field-input.tsx

@@ -1,12 +1,5 @@
 "use client";
 
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from "@suphark/ui/components/ui/command";
 import {
   FormControl,
   FormField,
@@ -24,10 +17,9 @@ import {
 import { Textarea } from "@suphark/ui/components/ui/textarea";
 import { useCopyToClipboard } from "@suphark/ui/hooks/use-copy-to-clipboard";
 import { cn } from "@suphark/ui/lib/utils";
-import { Command as CommandPrimitive } from "cmdk";
 import { Check, CircleAlert, Copy } from "lucide-react";
 import type { ComponentProps } from "react";
-import { useState } from "react";
+import { lazy, Suspense } from "react";
 import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
 
 // --- Types ---
@@ -49,13 +41,11 @@ type StandardInputProps<T extends FieldValues> = BaseProps<T> & {
 } & Omit<ComponentProps<typeof Input>, "required" | "form" | "name" | "value" | "onChange">;
 
 // Variant 2: Autocomplete
-export type AutocompleteOption = {
-  value: string;
-  label: string;
-};
+export type { AutocompleteOption } from "./form-field-autocomplete";
+
 type AutocompleteProps<T extends FieldValues> = BaseProps<T> & {
   variant: "autocomplete";
-  data: AutocompleteOption[];
+  data: import("./form-field-autocomplete").AutocompleteOption[];
   emptyMessage?: string;
   placeholder?: string;
   disabled?: boolean;
@@ -82,76 +72,28 @@ export type FormFieldInputProps<T extends FieldValues> =
 
 // --- Helper Components ---
 
-function AutocompleteInput<T extends FieldValues>({
-  field,
-  data,
-  placeholder,
-  disabled,
-  emptyMessage = "No results found.",
-  required,
-}: {
-  field: ControllerRenderProps<T, Path<T>>;
-  data: AutocompleteOption[];
-  placeholder?: string;
-  disabled?: boolean;
-  emptyMessage?: string;
-  required?: boolean;
-}) {
-  const [open, setOpen] = useState(false);
+// variant autocomplete ใช้ cmdk (+ Radix Dialog ที่ cmdk พ่วงมา) — แยกไฟล์และโหลดแบบ lazy
+// ไม่งั้นทุกฟอร์มที่ใช้ FormFieldInput ธรรมดาต้องพก cmdk ไปด้วย
+const LazyAutocompleteInput = lazy(() =>
+  import("./form-field-autocomplete").then((m) => ({ default: m.AutocompleteInput })),
+) as unknown as typeof import("./form-field-autocomplete").AutocompleteInput;
 
+function AutocompleteInput<T extends FieldValues>(
+  props: ComponentProps<typeof import("./form-field-autocomplete").AutocompleteInput<T>>,
+) {
   return (
-    <Command className="overflow-visible bg-transparent">
-      <div
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm ring-offset-background focus-within:border-ring focus-within:ring-1 focus-within:ring-ring",
-          disabled && "cursor-not-allowed opacity-50",
-          required && !field.value && "border-input",
-        )}
-      >
-        <CommandPrimitive.Input
-          value={field.value as string}
-          onValueChange={field.onChange}
-          onFocus={() => setOpen(true)}
-          onBlur={() => setOpen(false)}
-          placeholder={placeholder}
-          disabled={disabled}
-          className="w-full bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+    <Suspense
+      fallback={
+        <Input
+          value={(props.field.value as string) ?? ""}
+          placeholder={props.placeholder}
+          disabled
+          readOnly
         />
-      </div>
-      <div className="relative mt-1">
-        {open && field.value && (
-          <CommandList className="fade-in-0 zoom-in-95 absolute top-0 z-50 w-full animate-in rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
-            <CommandEmpty className="py-2 text-center text-muted-foreground text-sm">
-              {emptyMessage}
-            </CommandEmpty>
-            <CommandGroup>
-              {data.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={`${option.label} ${option.value}`}
-                  onSelect={() => {
-                    field.onChange(option.value as PathValue<T, Path<T>>);
-                    setOpen(false);
-                  }}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      field.value === option.value ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                  {option.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        )}
-      </div>
-    </Command>
+      }
+    >
+      <LazyAutocompleteInput {...props} />
+    </Suspense>
   );
 }
 

package/src/components/shared/form/number-input.tsx

@@ -3,12 +3,21 @@
 import { NumberField } from "@base-ui/react/number-field";
 import { cn } from "@suphark/ui/lib/utils";
 import { MinusIcon, PlusIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import type { ReactNode, Ref } from "react";
 import { useUiText } from "../ui-text";
 
+/**
+ * input ซ่อนของ Base UI (ที่ส่งค่าใน FormData) ได้ attribute step ไปด้วย → browser ปฏิเสธค่าที่ไม่ลง step นับจาก min
+ * (เช่น 12.50 เมื่อ step=1, 150 เมื่อ min=0 step=100) ทั้งที่ step มีไว้แค่ให้ปุ่ม −/+ เลื่อน — ตั้ง step="any" ให้ input ซ่อน
+ * (React ไม่เขียน attribute ทับเพราะ prop step ไม่เปลี่ยน) ส่วน min/max ยังตรวจตามเดิม
+ */
+function relaxHiddenStep(el: HTMLInputElement | null) {
+  if (el) el.step = "any";
+}
+
 const SIZE = {
   sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-sm" },
-  default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-base md:text-sm" },
+  default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-body" },
 } as const;
 
 /**
@@ -44,6 +53,8 @@ export function NumberInput({
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-invalid": ariaInvalid,
+  inputRef,
+  autoFocus,
 }: {
   value?: number | null;
   defaultValue?: number;
@@ -75,6 +86,9 @@ export function NumberInput({
   "aria-label"?: string;
   "aria-describedby"?: string;
   "aria-invalid"?: boolean | "true" | "false";
+  /** ref ของช่องที่ผู้ใช้พิมพ์ (เช่น focus() เอง) */
+  inputRef?: Ref<HTMLInputElement>;
+  autoFocus?: boolean;
 }) {
   const text = useUiText().number;
   const s = SIZE[size];
@@ -99,6 +113,7 @@ export function NumberInput({
       required={required}
       disabled={disabled}
       readOnly={readOnly}
+      inputRef={relaxHiddenStep}
       className={cn("w-full", className)}
     >
       <NumberField.Group
@@ -118,6 +133,8 @@ export function NumberInput({
         )}
         {prefix && <span className={cn(affix, !hideButtons && "pr-0")}>{prefix}</span>}
         <NumberField.Input
+          ref={inputRef}
+          autoFocus={autoFocus}
           placeholder={placeholder}
           aria-label={ariaLabel}
           aria-describedby={ariaDescribedBy}

package/src/components/shared/form/tags-input.tsx

@@ -116,7 +116,12 @@ export function TagsInput({
     const pasted = e.clipboardData.getData("text");
     if (!separator.test(pasted)) return;
     e.preventDefault();
-    setDraft(add(pasted.split(separator)));
+    // แทรกที่ตำแหน่ง cursor ของข้อความที่พิมพ์ค้างไว้ก่อนแยก (เช่น พิมพ์ "https://" แล้ววาง "a.com,b.com")
+    const el = e.currentTarget;
+    const start = el.selectionStart ?? draft.length;
+    const end = el.selectionEnd ?? draft.length;
+    const combined = draft.slice(0, start) + pasted + draft.slice(end);
+    setDraft(add(combined.split(separator)));
   };
 
   const remove = (index: number) => {
@@ -179,7 +184,7 @@ export function TagsInput({
           onBlur={() => {
             if (draft.trim()) setDraft(add([draft]));
           }}
-          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground md:text-sm"
+          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-body outline-none placeholder:text-muted-foreground"
         />
       </div>
       {error && (

package/src/components/shared/form/time-picker.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/ui/button";
-import { Calendar } from "@suphark/ui/components/ui/calendar";
 import {
   InputGroup,
   InputGroupAddon,
@@ -10,15 +9,14 @@ import {
 } from "@suphark/ui/components/ui/input-group";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { CalendarClockIcon, ClockIcon } from "lucide-react";
+import { ClockIcon } from "lucide-react";
 import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
-import { th } from "react-day-picker/locale";
 import { useUiText } from "../ui-text";
 
 /** "HH:mm" 24 ชั่วโมง */
 export type TimeValue = string;
 
-const pad = (n: number) => String(n).padStart(2, "0");
+export const pad = (n: number) => String(n).padStart(2, "0");
 
 /**
  * แปลงข้อความที่พิมพ์เป็น "HH:mm": "14:30" "14.30" "1430" "930" "9" "9:5" → null ถ้าไม่ใช่เวลาที่ถูกต้อง
@@ -47,7 +45,14 @@ export function parseTimeInput(input: string): TimeValue | null {
   return `${pad(h)}:${pad(m)}`;
 }
 
-function splitTime(value: TimeValue | null | undefined): [number, number] | null {
+/** ปัดนาทีลงให้ลงตัวกับ step (step 1 = ไม่เปลี่ยน) */
+function roundTime(value: TimeValue | null, step: number): TimeValue | null {
+  if (!value || step <= 1) return value;
+  const [h, m] = value.split(":").map(Number);
+  return `${pad(h ?? 0)}:${pad(Math.floor((m ?? 0) / step) * step)}`;
+}
+
+export function splitTime(value: TimeValue | null | undefined): [number, number] | null {
   const parsed = value ? parseTimeInput(value) : null;
   if (!parsed) return null;
   const [h, m] = parsed.split(":").map(Number);
@@ -70,11 +75,12 @@ function TimeColumn({
   const listRef = useRef<HTMLDivElement>(null);
   const optionId = (v: number) => `${baseId}-${v}`;
 
-  // เลื่อนให้ค่าที่เลือกอยู่กลางคอลัมน์ทุกครั้งที่เปลี่ยน
+  // เลื่อนเฉพาะในคอลัมน์ให้ค่าที่เลือกอยู่กลาง — ไม่ใช้ scrollIntoView เพราะจะเลื่อนทั้งหน้าไปด้วย
   useEffect(() => {
-    if (selected == null) return;
-    const el = listRef.current?.querySelector<HTMLElement>(`[data-value="${selected}"]`);
-    el?.scrollIntoView?.({ block: "center" });
+    const list = listRef.current;
+    if (selected == null || !list) return;
+    const el = list.querySelector<HTMLElement>(`[data-value="${selected}"]`);
+    if (el) list.scrollTop = el.offsetTop - (list.clientHeight - el.offsetHeight) / 2;
   }, [selected]);
 
   const onKeyDown = (e: KeyboardEvent) => {
@@ -98,7 +104,7 @@ function TimeColumn({
       aria-label={label}
       aria-activedescendant={selected == null ? undefined : optionId(selected)}
       onKeyDown={onKeyDown}
-      className="no-scrollbar flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-md p-0.5 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+      className="no-scrollbar relative flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-md p-0.5 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
     >
       {options.map((v) => (
         <div
@@ -161,7 +167,12 @@ export function TimeColumns({
   );
 }
 
-function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (v: T) => void) {
+/** state แบบ controlled/uncontrolled (ใช้ร่วมกับ DateTimePicker) */
+export function useControllable<T>(
+  value: T | undefined,
+  defaultValue: T,
+  onChange?: (v: T) => void,
+) {
   const [inner, setInner] = useState(defaultValue);
   const controlled = value !== undefined;
   const current = controlled ? value : inner;
@@ -188,6 +199,7 @@ export function TimePicker({
   defaultValue = null,
   onValueChange,
   minuteStep = 5,
+  roundToStep = false,
   name,
   id,
   required,
@@ -202,6 +214,8 @@ export function TimePicker({
   defaultValue?: TimeValue | null;
   onValueChange?: (value: TimeValue | null) => void;
   minuteStep?: number;
+  /** ปัดนาทีที่พิมพ์ลงตาม minuteStep (เช่น step 60 + พิมพ์ 14:30 → 14:00) — ค่าเริ่มต้นเก็บตามที่พิมพ์ */
+  roundToStep?: boolean;
   name?: string;
   id?: string;
   required?: boolean;
@@ -219,6 +233,13 @@ export function TimePicker({
   const [draft, setDraft] = useState<string | null>(null);
   const [open, setOpen] = useState(false);
   const draftInvalid = draft != null && draft.trim() !== "" && parseTimeInput(draft) == null;
+  const invalidMessage = text?.invalid ?? "รูปแบบเวลาไม่ถูกต้อง (เช่น 14:30)";
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // ข้อความที่พิมพ์ผิด = ช่องนี้ invalid จริง → ฟอร์มไม่ส่ง (ไม่งั้น input ซ่อนจะส่งค่าเดิมไปเงียบ ๆ)
+  useEffect(() => {
+    inputRef.current?.setCustomValidity(draftInvalid ? invalidMessage : "");
+  }, [draftInvalid, invalidMessage]);
 
   const commitDraft = () => {
     if (draft == null) return;
@@ -227,7 +248,7 @@ export function TimePicker({
       setDraft(null);
       return;
     }
-    const parsed = parseTimeInput(draft);
+    const parsed = roundTime(parseTimeInput(draft), roundToStep ? minuteStep : 1);
     if (parsed) {
       setTime(parsed);
       setDraft(null);
@@ -237,6 +258,7 @@ export function TimePicker({
   return (
     <InputGroup data-slot="time-picker" className={cn("w-32", className)}>
       <InputGroupInput
+        ref={inputRef}
         id={id}
         inputMode="numeric"
         autoComplete="off"
@@ -307,115 +329,3 @@ export function TimePicker({
 export function toLocalDateTimeString(date: Date): string {
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
 }
-
-/**
- * เลือกวัน + เวลาในกล่องเดียว (ปฏิทิน + คอลัมน์ชั่วโมง/นาที) — นัดหมาย, กำหนดส่ง, เวลาเตือน
- * ค่าเป็น `Date | null`; เลือกวันก่อนเวลา = ใช้ `defaultTime`; `name` ส่ง "YYYY-MM-DDTHH:mm" (เวลาท้องถิ่น) ใน FormData
- *
- *   <DateTimePicker value={dueAt} onValueChange={setDueAt} minuteStep={15} />
- */
-export function DateTimePicker({
-  value,
-  defaultValue = null,
-  onValueChange,
-  minuteStep = 5,
-  defaultTime = "09:00",
-  name,
-  id,
-  disabled,
-  placeholder,
-  className,
-  "aria-label": ariaLabel,
-  "aria-invalid": ariaInvalid,
-}: {
-  value?: Date | null;
-  defaultValue?: Date | null;
-  onValueChange?: (value: Date | null) => void;
-  minuteStep?: number;
-  /** เวลาที่ใช้เมื่อเลือกวันครั้งแรก */
-  defaultTime?: TimeValue;
-  name?: string;
-  id?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  className?: string;
-  "aria-label"?: string;
-  "aria-invalid"?: boolean;
-}) {
-  const ui = useUiText();
-  const text = ui.time;
-  const [date, setDate] = useControllable<Date | null>(value, defaultValue, onValueChange);
-  const [open, setOpen] = useState(false);
-  const time = date ? `${pad(date.getHours())}:${pad(date.getMinutes())}` : null;
-
-  const withTime = (day: Date, t: TimeValue) => {
-    const [h, m] = splitTime(t) ?? [9, 0];
-    const d = new Date(day);
-    d.setHours(h, m, 0, 0);
-    return d;
-  };
-
-  const label = date
-    ? date.toLocaleString("th-TH", { dateStyle: "medium", timeStyle: "short" })
-    : (placeholder ?? text?.dateTimePlaceholder ?? "เลือกวันและเวลา");
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        render={
-          <Button
-            id={id}
-            type="button"
-            variant="outline"
-            disabled={disabled}
-            aria-label={ariaLabel}
-            aria-invalid={ariaInvalid || undefined}
-            data-slot="date-time-picker"
-            className={cn(
-              "w-full justify-start gap-2 font-normal",
-              !date && "text-muted-foreground",
-              className,
-            )}
-          />
-        }
-      >
-        <CalendarClockIcon className="text-muted-foreground" />
-        <span className="truncate">{label}</span>
-      </PopoverTrigger>
-      {name && <input type="hidden" name={name} value={date ? toLocalDateTimeString(date) : ""} />}
-      <PopoverContent align="start" className="w-auto gap-0 p-0">
-        <div className="flex flex-col sm:flex-row">
-          <Calendar
-            mode="single"
-            locale={th}
-            selected={date ?? undefined}
-            defaultMonth={date ?? undefined}
-            onSelect={(day) => day && setDate(withTime(day, time ?? defaultTime))}
-            className="p-3"
-          />
-          <div className="flex justify-center border-t p-2 sm:border-t-0 sm:border-l">
-            <TimeColumns
-              value={time}
-              minuteStep={minuteStep}
-              onValueChange={(t) => setDate(withTime(date ?? new Date(), t))}
-            />
-          </div>
-        </div>
-        <div className="flex justify-between gap-2 border-t p-2">
-          <Button
-            type="button"
-            size="xs"
-            variant="ghost"
-            disabled={!date}
-            onClick={() => setDate(null)}
-          >
-            {text?.clear ?? "ล้าง"}
-          </Button>
-          <Button type="button" size="xs" onClick={() => setOpen(false)}>
-            {ui.done}
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/shared/month-stepper.tsx

@@ -38,6 +38,9 @@ export interface MonthStepperProps {
  *   const { month, setMonth } = useMonthCursor();
  *   <MonthStepper value={month} onValueChange={setMonth} />
  */
+/** "เดือนนี้" ของ MonthStepper/useMonthCursor คิดตามเวลาไทย — แอปของเราใช้ในไทย และต้องได้ค่าเดียวกันทั้ง server และ browser */
+const APP_TIME_ZONE = "Asia/Bangkok";
+
 export function MonthStepper({
   value,
   onValueChange,
@@ -54,7 +57,8 @@ export function MonthStepper({
   const next = shiftMonth(value, 1);
   const canPrev = !min || compareMonth(prev, min) >= 0;
   const canNext = !max || compareMonth(next, max) <= 0;
-  const now = currentMonthKey();
+  // โซนเวลาคงที่: server (UTC) กับ browser ได้เดือนเดียวกัน — ไม่งั้นช่วง 00–07 น. วันที่ 1 จะ hydration mismatch
+  const now = currentMonthKey(undefined, APP_TIME_ZONE);
   const nowInRange = (!min || compareMonth(now, min) >= 0) && (!max || compareMonth(now, max) <= 0);
   const label = formatLabel ? formatLabel(value) : formatMonthKey(value, locale, format);
   const isCurrent = value === now;
@@ -112,13 +116,15 @@ export function MonthStepper({
 }
 
 /**
- * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้
+ * state เดือนปัจจุบัน + ตัวเลื่อน — `initial` ไม่ส่ง = เดือนนี้ (ตามเวลาไทย เพื่อให้ server/browser ตรงกัน)
  * ต้องการเก็บใน URL ให้ใช้ `useTableSearchParams`/searchParams ของแอปแทน แล้วส่ง value/onValueChange เอง
  */
 export function useMonthCursor(initial?: MonthKey) {
-  const [month, setMonth] = useState<MonthKey>(() => initial ?? currentMonthKey());
+  const [month, setMonth] = useState<MonthKey>(
+    () => initial ?? currentMonthKey(undefined, APP_TIME_ZONE),
+  );
   const previous = useCallback(() => setMonth((m) => shiftMonth(m, -1)), []);
   const next = useCallback(() => setMonth((m) => shiftMonth(m, 1)), []);
-  const reset = useCallback(() => setMonth(currentMonthKey()), []);
+  const reset = useCallback(() => setMonth(currentMonthKey(undefined, APP_TIME_ZONE)), []);
   return { month, setMonth, previous, next, reset };
 }

package/src/components/shared/row-actions.tsx

@@ -13,7 +13,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
-import { errorMessage } from "./button/confirm-action-button";
+import { errorMessage, failedResult } from "./button/confirm-action-button";
 import { ConfirmDialog, type ConfirmSpec, normalizeConfirm } from "./confirm-dialog";
 import { useUiText } from "./ui-text";
 
@@ -58,10 +58,16 @@ export function RowActions({ items, label }: { items: RowAction[]; label?: strin
       for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
       const act = it.action;
       start(async () => {
+        const fallback = text.actionFailed ?? "ดำเนินการไม่สำเร็จ";
         try {
-          await act(fd);
+          // คืน { ok: false, error } (FormState) ก็ถือว่าล้มเหลวเหมือน throw
+          const failed = failedResult(await act(fd), fallback);
+          if (failed) {
+            toast.error(failed);
+            return;
+          }
         } catch (err) {
-          toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+          toast.error(errorMessage(err, fallback));
           return;
         }
         router.refresh();