@goplusvn/core 0.1.87 → 0.1.89

package/src/crud/lib/filter-defaults.ts

@@ -0,0 +1,56 @@
+import type { ActiveFilter, FilterConfig } from "../../types";
+
+/**
+ * BỘ LỌC MẶC ĐỊNH — biến `FilterConfig.defaultValue` thành bộ lọc đang chạy thật.
+ *
+ * Trước đây `defaultValue` chỉ được vài ô nhập trong ngăn lọc đọc để đặt giá
+ * trị ban đầu; không nhánh nào đẩy nó vào state `filters` của `CrudProvider`
+ * (khởi tạo cứng bằng `[]`). App khai xong tưởng đã bật, mà trang vẫn mở ra ở
+ * trạng thái KHÔNG lọc — danh sách theo ngày nạp toàn bộ lịch sử.
+ *
+ * Token `"$today"` giải ra NGÀY HÔM NAY theo lịch Việt Nam, dạng "YYYY-MM-DD".
+ * Hai điểm bắt buộc:
+ *
+ *  · Tính bằng `Intl` với `timeZone` cố định, KHÔNG dùng giờ máy. Hàm này chạy
+ *    trong initializer của `useState` nên nổ ở CẢ server lẫn trình duyệt; lấy
+ *    giờ máy thì server (thường UTC) ra ngày khác trình duyệt (GMT+7) và React
+ *    báo hydration mismatch — mỗi đêm một lần, từ 00:00 đến 07:00 giờ VN.
+ *  · Giá trị là CHUỖI ngày trần, không phải `Date`. Chuỗi không mang giờ nên
+ *    không có gì để lệch múi giờ khi đi qua URL; `coerceFieldValue` ở route
+ *    handler ép về `Date` đúng kiểu cột ngay trước khi vào Prisma.
+ */
+export const TODAY_TOKEN = "$today";
+
+/** Múi giờ vận hành — trùng với formatter hiển thị trong `utils` (vi-VN). */
+const TZ = "Asia/Ho_Chi_Minh";
+
+/** Hôm nay theo lịch VN, "YYYY-MM-DD". `en-CA` cho ra đúng dạng ISO này. */
+export function todayDateKey(): string {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: TZ,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(new Date());
+}
+
+/** `defaultValue` đã khai ➝ giá trị thật (giải token nếu có). */
+export function resolveDefaultValue(filter: FilterConfig): unknown {
+  if (filter.defaultValue !== TODAY_TOKEN) return filter.defaultValue;
+  const today = todayDateKey();
+  // Bộ chọn KHOẢNG ngày cần cặp [từ, đến] — hôm nay tới hết hôm nay.
+  return filter.operator === "between" ? [today, today] : today;
+}
+
+/** Danh sách bộ lọc bật sẵn khi trang vừa mở. */
+export function resolveFilterDefaults(
+  filters: FilterConfig[] | undefined,
+): ActiveFilter[] {
+  return (filters ?? [])
+    .filter((f) => f.defaultValue !== undefined)
+    .map((f) => ({
+      name: f.name,
+      value: resolveDefaultValue(f),
+      operator: f.operator ?? "eq",
+    }));
+}

package/src/crud/lib/filter-display.ts

@@ -0,0 +1,59 @@
+import type { FilterConfig } from "../../types";
+
+/**
+ * GIÁ TRỊ BỘ LỌC ➝ CHỮ CHO NGƯỜI ĐỌC (chip trên thanh công cụ).
+ *
+ * Trước đây chip tự lo phần này và hỏng theo hai kiểu khác nhau:
+ *  · `typeof value === "object" ? JSON.stringify(v) : String(v)` — ngày là
+ *    `Date` (typeof "object") nên chip in ra `"2026-08-20T17:00:00.000Z"`,
+ *    kèm cả dấu nháy của JSON.
+ *  · dựng chuỗi `"Nhãn: giá trị"` rồi `.split(":")` để tách lại hai vế — giá
+ *    trị nào có dấu hai chấm là mất đuôi, `String(date)` bị cắt còn
+ *    "Fri Aug 21 2026 00".
+ *
+ * Nhãn và giá trị ở đây là HAI thứ tách rời từ đầu, không ghép rồi cắt.
+ */
+const DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric",
+  timeZone: "Asia/Ho_Chi_Minh",
+};
+
+function formatDate(value: unknown): string {
+  const date = value instanceof Date ? value : new Date(String(value));
+  if (Number.isNaN(date.getTime())) return String(value);
+  return new Intl.DateTimeFormat("vi-VN", DATE_FORMAT).format(date);
+}
+
+function optionLabel(filter: FilterConfig, value: unknown): string {
+  const option = filter.options?.find(
+    (opt) => opt.value === value || String(opt.value) === String(value),
+  );
+  return option ? option.label : String(value);
+}
+
+/** Chỉ phần GIÁ TRỊ — nhãn do chip tự lấy từ `filter.label`. */
+export function formatFilterValue(
+  filter: FilterConfig | undefined,
+  value: unknown,
+): string {
+  if (value === null || value === undefined) return "";
+  if (!filter) return String(value);
+
+  if (filter.type === "select" || filter.type === "radio") {
+    return optionLabel(filter, value);
+  }
+
+  if (Array.isArray(value)) {
+    if (filter.type === "datetime") {
+      const parts = value.map(formatDate);
+      // Khoảng một ngày ("hôm nay tới hết hôm nay") đọc là một ngày.
+      return parts[0] === parts[1] ? parts[0] : parts.join(" - ");
+    }
+    return value.map((v) => optionLabel(filter, v)).join(", ");
+  }
+
+  if (filter.type === "datetime") return formatDate(value);
+  return String(value);
+}

package/src/crud/lib/query-builder.ts

@@ -60,6 +60,10 @@ export function buildListQuery({
       }
       const op = operator as string;
       if (op === "contains") target[key] = { contains: value, mode: "insensitive" };
+      // Khoảng [từ, đến] của bộ chọn ngày. Thiếu nhánh này thì cả mảng rơi
+      // xuống `else` và đi thẳng vào Prisma dưới dạng array ⇒ nổ ở tầng driver.
+      else if (op === "between" && Array.isArray(value) && value.length === 2)
+        target[key] = { gte: value[0], lte: value[1] };
       else if (op === "in") target[key] = { in: value };
       else if (op === "notIn") target[key] = { notIn: value };
       else if (op === "eq") target[key] = value;

package/src/types/index.ts

@@ -224,14 +224,12 @@ export interface NavigationRootItemBasicType {
   action?: string;
 }
 
-export interface NavigationRootItemWithHrefType
-  extends NavigationRootItemBasicType {
+export interface NavigationRootItemWithHrefType extends NavigationRootItemBasicType {
   href: string;
   items?: never;
 }
 
-export interface NavigationRootItemWithItemsType
-  extends NavigationRootItemBasicType {
+export interface NavigationRootItemWithItemsType extends NavigationRootItemBasicType {
   items: (
     | NavigationNestedItemWithHrefType
     | NavigationNestedItemWithItemsType
@@ -247,14 +245,12 @@ export interface NavigationNestedItemBasicType {
   iconName?: DynamicIconNameType;
 }
 
-export interface NavigationNestedItemWithHrefType
-  extends NavigationNestedItemBasicType {
+export interface NavigationNestedItemWithHrefType extends NavigationNestedItemBasicType {
   href: string;
   items?: never;
 }
 
-export interface NavigationNestedItemWithItemsType
-  extends NavigationNestedItemBasicType {
+export interface NavigationNestedItemWithItemsType extends NavigationNestedItemBasicType {
   items: (
     | NavigationNestedItemWithHrefType
     | NavigationNestedItemWithItemsType
@@ -460,8 +456,12 @@ export interface FieldConfig {
    * Int autoincrement hiện qua select/multiselect/relation: form và URL chở
    * chuỗi "3", khai `valueType: "int"` để coercion tập trung (coerceFieldValue)
    * ép Number trước khi vào Prisma. Default: "string" (giữ nguyên).
+   *
+   * `"boolean"` cho trường hợp ngược lại: field khai `type: "switch"` kèm cặp
+   * option chữ ("Hoạt động"/"Tạm ngưng") nhưng CỘT trong DB là Boolean — khai
+   * ra thì lưu xuống `true/false` chứ không nhét chuỗi "active" vào cột bool.
    */
-  valueType?: "string" | "int";
+  valueType?: "string" | "int" | "boolean";
   required?: boolean;
   defaultValue?: unknown;
   placeholder?: string;
@@ -653,6 +653,13 @@ export interface FilterConfig {
   type: FilterType;
   field: string;
   operator?: FilterOperator;
+  /**
+   * Bộ lọc BẬT SẴN khi trang vừa mở — `CrudProvider` seed thẳng vào state
+   * `filters`, nên nó hiện thành chip và người dùng thấy mình đang xem cái gì.
+   *
+   * Token `"$today"` = hôm nay theo lịch VN; với `operator: "between"` nó giải
+   * thành cặp [hôm nay, hôm nay]. Xem `crud/lib/filter-defaults`.
+   */
   defaultValue?: unknown;
   options?: Array<{ label: string; value: string | number | boolean }>;
   dataSource?: DataSource;

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

@@ -27,6 +27,11 @@ export interface ActiveFilter {
   name: string;
   value: unknown;
   operator: string;
+  /**
+   * Chữ đã dựng sẵn cho chip. Lớp trên biết `FilterConfig` (nhãn tuỳ chọn,
+   * kiểu ngày) nên nó dựng; toolbar chỉ in ra. Không truyền thì rơi về cách cũ.
+   */
+  displayValue?: string;
 }
 
 export interface FilterConfig {
@@ -345,9 +350,10 @@ export function DataTableToolbar<TData>({
             const filterConfig = filters.find((f) => f.name === filter.name);
             const label = filterConfig?.label || filter.name;
             const displayValue =
-              typeof filter.value === "object"
+              filter.displayValue ??
+              (typeof filter.value === "object"
                 ? JSON.stringify(filter.value)
-                : String(filter.value);
+                : String(filter.value));
 
             return (
               <div

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

@@ -8,6 +8,7 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  getExpandedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
 import type {
@@ -138,6 +139,16 @@ export interface DataTableProps<TData> {
    */
   className?: string;
 
+  /**
+   * Determine if a row can be expanded
+   */
+  getRowCanExpand?: (row: Row<TData>) => boolean;
+
+  /**
+   * Render custom sub-component (expanded row content)
+   */
+  renderSubComponent?: (props: { row: Row<TData> }) => ReactNode;
+
   /**
    * Height configuration
    * @default "auto"
@@ -190,6 +201,8 @@ export function DataTable<TData extends Record<string, unknown>>({
   onTableReady,
   onRowClick,
   className,
+  getRowCanExpand,
+  renderSubComponent,
   height = "auto",
   headerClassName,
   tableClassName,
@@ -360,6 +373,8 @@ export function DataTable<TData extends Record<string, unknown>>({
     onSortingChange: handleSortingChange,
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand,
     state: {
       sorting: tanstackSorting,
       // CHỈ đưa key `pagination` vào state khi controlled: `pagination: undefined`
@@ -471,6 +486,7 @@ export function DataTable<TData extends Record<string, unknown>>({
                     visibleCellsCount={row.getVisibleCells().length}
                     onRowClick={onRowClick}
                     cellClassName={cellClassName}
+                    renderSubComponent={renderSubComponent}
                   />
                 ) : (
                   <MemoizedTableRow
@@ -481,6 +497,7 @@ export function DataTable<TData extends Record<string, unknown>>({
                     onRowClick={onRowClick}
                     cellClassName={cellClassName}
                     memoKey={rowMemo ? rowMemo(row.original) : undefined}
+                    renderSubComponent={renderSubComponent}
                   />
                 ),
               )
@@ -538,6 +555,7 @@ interface MemoizedTableRowProps<TData> {
   cellClassName?: string;
   /** Key từ `rowMemo(row.original)` — comparator so bằng Object.is. */
   memoKey?: unknown;
+  renderSubComponent?: (props: { row: Row<TData> }) => ReactNode;
 }
 
 // Thân hàng KHÔNG memo — dùng trực tiếp khi rowMemo={false}, và là inner của
@@ -545,11 +563,14 @@ interface MemoizedTableRowProps<TData> {
 function DataTableRowInner<TData>({
   row,
   isSelected,
+  visibleCellsCount,
   onRowClick,
   cellClassName,
+  renderSubComponent,
 }: MemoizedTableRowProps<TData>) {
   return (
-    <TableRow
+    <>
+      <TableRow
         data-state={isSelected && "selected"}
         className={`transition-colors duration-100 even:bg-muted/30 hover:bg-accent/50 dark:hover:bg-slate-800/40 data-[state=selected]:bg-primary/5 border-b border-border/40 dark:border-slate-800 relative hover:border-l-[3px] hover:border-l-primary ${
           onRowClick ? "cursor-pointer" : ""
@@ -557,9 +578,6 @@ function DataTableRowInner<TData>({
         onClick={
           onRowClick
             ? (e) => {
-                // Don't trigger row click for interactive controls inside the row
-                // (selection checkbox, action menu trigger, links). The actions
-                // dropdown content is portaled, so only its trigger lives here.
                 const target = e.target as HTMLElement;
                 if (
                   target.closest(
@@ -587,6 +605,14 @@ function DataTableRowInner<TData>({
           </TableCell>
         ))}
       </TableRow>
+      {row.getIsExpanded() && renderSubComponent && (
+        <TableRow className="bg-muted/10 hover:bg-muted/10 border-b border-border/40">
+          <TableCell colSpan={visibleCellsCount} className="p-0">
+            {renderSubComponent({ row })}
+          </TableCell>
+        </TableRow>
+      )}
+    </>
   );
 }
 
@@ -602,6 +628,8 @@ const MemoizedTableRow = memo(
       prevProps.row.original !== nextProps.row.original ||
       // cellClassName đổi phải re-render (trước đây bị bỏ sót — đổi class không ăn)
       prevProps.cellClassName !== nextProps.cellClassName ||
+      // Kiểm tra trạng thái expand
+      prevProps.row.getIsExpanded() !== nextProps.row.getIsExpanded() ||
       // Key từ rowMemo(row.original): state ngoài row data mà cell phụ thuộc
       !Object.is(prevProps.memoKey, nextProps.memoKey)
     ) {

package/src/ui/layout/user-dropdown.tsx

@@ -2,9 +2,9 @@
 
 import Link from "next/link";
 import { useAuthBridge, useSafeAuthSession } from "../auth/auth-bridge";
-import { LogOut, User, UserCog,
-} from "lucide-react";
+import { LogOut, User, UserCog } from "lucide-react";
 
+import { useMounted } from "../../hooks";
 import type { DictionaryType } from "../../hooks";
 import type { LocaleType } from "../../types";
 
@@ -16,7 +16,6 @@ import { Button } from "../primitives/button";
 import { useTabContentCache } from "./tab-content-cache";
 import { useTabNavigation } from "./tab-navigation-provider";
 
-
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -78,28 +77,36 @@ export function UserDropdown({
     }
   };
 
+  const mounted = useMounted();
+
+  const triggerButton = (
+    <Button
+      variant="outline"
+      size="icon"
+      className="rounded-full bg-primary border-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:ring-offset-0"
+      aria-label="User"
+      title="Profile"
+    >
+      <Avatar className="size-6">
+        <AvatarImage
+          src={user?.avatar || undefined}
+          alt={user?.name || ""}
+          className="object-cover"
+        />
+        <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
+          {user?.name && getInitials(user.name)}
+        </AvatarFallback>
+      </Avatar>
+    </Button>
+  );
+
+  if (!mounted) {
+    return triggerButton;
+  }
+
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon"
-          className="rounded-full bg-primary border-primary hover:bg-primary/90 focus-visible:ring-0 focus-visible:ring-offset-0"
-          aria-label="User"
-          title="Profile"
-        >
-          <Avatar className="size-6">
-            <AvatarImage
-              src={user?.avatar || undefined}
-              alt={user?.name || ""}
-              className="object-cover"
-            />
-            <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
-              {user?.name && getInitials(user.name)}
-            </AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
+      <DropdownMenuTrigger asChild>{triggerButton}</DropdownMenuTrigger>
 
       <DropdownMenuContent
         className="w-56 p-1 bg-background/80 backdrop-blur-xl border border-border/40 shadow-xl rounded-xl animate-in fade-in zoom-in-95 duration-200"

package/src/ui/primitives/status-badge.tsx

@@ -1,5 +1,6 @@
 import { Badge } from "./badge";
-import { STATUS_COLORS, STATUS_ACTIVE, STATUS_INACTIVE } from "../../utils";
+import { STATUS_COLORS, normalizeStatusValue } from "../../utils";
+import { getStatusMeta } from "../shared/status-indicator";
 import { cn } from "../../utils";
 
 interface StatusBadgeProps {
@@ -13,8 +14,11 @@ export function StatusBadge({
   className,
   label: customLabel,
 }: StatusBadgeProps) {
-  const statusStr = String(status);
-  const variant = STATUS_COLORS[statusStr] || "secondary";
+  // Giá trị vào đây không chỉ là chuỗi: cột Boolean gửi `true`/`false`, cột
+  // smallint gửi 1/0. Tra bảng màu bằng chuỗi thô thì `"true"` không có trong
+  // STATUS_COLORS ⇒ chip xám, chữ hiện "true". Chuẩn hoá trước rồi mới tra.
+  const statusKey = normalizeStatusValue(status);
+  const variant = (statusKey && STATUS_COLORS[statusKey]) || "secondary";
 
   // Custom styles for success (green) and warning (yellow) since they might not be in default badge variants
   let badgeClass = "";
@@ -26,13 +30,13 @@ export function StatusBadge({
       "bg-yellow-500 hover:bg-yellow-600 text-white border-transparent";
   }
 
-  // Use custom label if provided, otherwise fallback to basic mapping or raw value
-  let label = customLabel || statusStr;
-
-  // Fallback mapping if no custom label provided
-  if (!customLabel) {
-    if (statusStr === STATUS_ACTIVE) label = "Active";
-  }
+  // Không có nhãn riêng thì lấy nhãn TIẾNG VIỆT của taxonomy chung
+  // (`getStatusMeta`) — trước đây chỗ này trả về chữ "Active", và với giá trị
+  // boolean thì rơi thẳng ra "true"/"false" trên màn hình.
+  const meta = statusKey ? getStatusMeta(statusKey) : null;
+  const label =
+    customLabel ??
+    (meta?.matched ? meta.label : statusKey ? String(status) : "");
 
   return (
     <Badge