@goplusvn/core 0.1.87 → 0.1.88

package/src/crud/components/crud-field-renderer.tsx

@@ -9,7 +9,8 @@ import type { ChangeEvent } from "react";
 
 import { dataLoader } from "../lib/data-loader";
 import { formatFieldValue } from "../lib/field-formatter";
-import { cn } from "../../utils";
+import { resolveSwitchPair } from "../lib/coerce";
+import { cn, matchesOptionValue } from "../../utils";
 
 import { Button } from "../../ui";
 import { Combobox } from "../../ui/primitives/client";
@@ -477,28 +478,33 @@ export function CrudFieldRenderer({
       );
 
     case "boolean":
-    case "switch":
+    case "switch": {
+      // CẶP GIÁ TRỊ BẬT/TẮT lấy từ chính FieldConfig, không đoán:
+      //
+      //   - có `options` (thứ tự BẬT trước, TẮT sau — đúng quy ước của
+      //     `coerceFieldValue`) ⇒ ghi đúng giá trị cột: "active"/"inactive",
+      //     "1"/"0", hay bất kỳ cặp nào app khai;
+      //   - không có `options` ⇒ cột Boolean, ghi thẳng true/false.
+      //
+      // Bản cũ ghi cứng chuỗi "active"/"inactive" và so `value === "active"`,
+      // nên với cột Boolean thì bản ghi đang BẬT vẫn hiện công tắc TẮT, bấm
+      // lưu lại nhét chuỗi vào cột boolean.
+      const { on: onValue, off: offValue } = resolveSwitchPair(field);
       return (
         <FormField
           control={control}
           name={field.name}
           render={({ field: formField }) => (
             <FormItem>
-              {field.label && <FormLabel className="font-semibold">{field.label}</FormLabel>}
+              {field.label && (
+                <FormLabel className="font-semibold">{field.label}</FormLabel>
+              )}
               <FormControl>
                 <div className="flex items-center h-10">
                   <Switch
-                    checked={
-                      field.type === "switch"
-                        ? formField.value === "active"
-                        : (formField.value ?? false)
-                    }
+                    checked={matchesOptionValue(onValue, formField.value)}
                     onCheckedChange={(checked) => {
-                      if (field.type === "switch") {
-                        formField.onChange(checked ? "active" : "inactive");
-                      } else {
-                        formField.onChange(checked);
-                      }
+                      formField.onChange(checked ? onValue : offValue);
                     }}
                     disabled={isFieldDisabled}
                   />
@@ -512,6 +518,7 @@ export function CrudFieldRenderer({
           )}
         />
       );
+    }
 
     case "date":
     case "datetime":

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

@@ -5,6 +5,7 @@ import type { ReactNode } from "react";
 import type { ColumnDef, Table } from "@tanstack/react-table";
 
 import { StatusBadge } from "../../ui";
+import { matchesOptionValue } from "../../utils";
 
 import type { CrudResponse } from "../../types";
 
@@ -194,19 +195,23 @@ export function CrudTable<TData extends Record<string, unknown>>({
 
             if (field.renderCell) {
               content = field.renderCell(value, row.original) as any;
-            } else if (field.type === "switch") {
-              
+            } else if (field.type === "switch" || field.type === "boolean") {
               if (typeof value === "boolean" && !field.options) {
-                 const label = value ? "Có" : "Không";
-                 // Map boolean to status colors that StatusBadge likely supports
-                 const status = value ? "active" : "inactive";
-                 content = <StatusBadge status={status} label={label} />;
+                const label = value ? "Có" : "Không";
+                // Map boolean to status colors that StatusBadge likely supports
+                const status = value ? "active" : "inactive";
+                content = <StatusBadge status={status} label={label} />;
               } else {
+                // SO LỎNG: cột `is_active` kiểu Boolean trả `true` trong khi
+                // option khai `"active"` — so tuyệt đối thì không khớp, nhãn
+                // rỗng và chip hiện đúng chữ "true". `matchesOptionValue` gom
+                // boolean/số/chuỗi về cùng key trước khi so.
                 const option = field.options?.find((opt) => {
                   const optValue = typeof opt === "object" ? opt.value : opt;
-                  return optValue === value;
+                  return matchesOptionValue(optValue, value);
                 });
-                const label = typeof option === "object" ? option.label : option;
+                const label =
+                  typeof option === "object" ? option.label : option;
                 // Translate label if translator provided and label is a valid string
                 const translatedLabel =
                   getTranslation && typeof label === "string"

package/src/crud/lib/coerce.ts

@@ -1,4 +1,5 @@
 import type { FieldConfig } from "../../types";
+import { isTruthyStatus, matchesOptionValue } from "../../configs/status";
 
 function optionValue(option: unknown): unknown {
   return typeof option === "object" && option !== null && "value" in option
@@ -41,6 +42,12 @@ export function coerceFieldValue(field: FieldConfig, value: unknown): unknown {
   // Cột Int đứng sau select/multiselect/relation (FK autoincrement): `type`
   // không nói lên kiểu cột nên phải khai `valueType: "int"` trong FieldConfig.
   // Chuỗi không phải số giữ nguyên cho tầng validate/Prisma báo.
+  // Cột Boolean đứng sau một field khai cặp option chữ: form/URL chở xuống
+  // "active" / "true" / "1", ép về boolean trước khi vào Prisma.
+  if (field.valueType === "boolean") {
+    return isTruthyStatus(value);
+  }
+
   if (field.valueType === "int" && typeof value === "string") {
     if (value.trim() === "") return null;
     const num = Number(value);
@@ -59,14 +66,6 @@ export function coerceFieldValue(field: FieldConfig, value: unknown): unknown {
 
     case "boolean":
     case "switch": {
-      let isTrue: boolean;
-      if (typeof value === "string") {
-        const lv = value.toLowerCase();
-        isTrue =
-          lv === "true" || lv === "active" || value === "1" || value === "on";
-      } else {
-        isTrue = Boolean(value);
-      }
       // switch có cặp option = cột string 2 trạng thái (active/inactive…),
       // map về value của option chứ không phải boolean.
       if (
@@ -74,11 +73,20 @@ export function coerceFieldValue(field: FieldConfig, value: unknown): unknown {
         field.options &&
         field.options.length >= 2
       ) {
-        return isTrue
+        // Giá trị đã ĐÚNG là một option rồi thì giữ nguyên — chỉ những giá
+        // trị "lạ" mới quy về cặp bật/tắt. Trước đây mọi giá trị đều bị ép
+        // qua boolean, nên cặp option nhiều hơn hai trạng thái mất dữ liệu.
+        const exact = field.options.find((opt) =>
+          matchesOptionValue(optionValue(opt), value),
+        );
+        if (exact !== undefined) return optionValue(exact);
+        return isTruthyStatus(value)
           ? optionValue(field.options[0])
           : optionValue(field.options[1]);
       }
-      return isTrue;
+      // `isTruthyStatus` nhận cả "active"/"true"/"1"/"on"/"yes" và loại
+      // "inactive"/"false"/"0"/"off" — cùng bảng chuẩn hoá với phía hiển thị.
+      return typeof value === "string" ? isTruthyStatus(value) : Boolean(value);
     }
 
     case "date":
@@ -93,3 +101,21 @@ export function coerceFieldValue(field: FieldConfig, value: unknown): unknown {
       return value;
   }
 }
+
+/**
+ * CẶP GIÁ TRỊ BẬT/TẮT của một field `switch` — dùng cho công tắc ở form, và
+ * là cặp mà `coerceFieldValue` sẽ ghi xuống DB, nên hai bên không lệch nhau.
+ *
+ * Quy ước: `options[0]` là BẬT, `options[1]` là TẮT (đúng thứ tự khai trong
+ * STATUS_OPTIONS). Không khai options ⇒ cột Boolean thật ⇒ true/false.
+ */
+export function resolveSwitchPair(field: FieldConfig): {
+  on: unknown;
+  off: unknown;
+} {
+  const options = field.options;
+  if (field.valueType === "boolean" || !options || options.length < 2) {
+    return { on: true, off: false };
+  }
+  return { on: optionValue(options[0]), off: optionValue(options[1]) };
+}

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;

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