@goplusvn/core 0.1.87 → 0.1.89

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-filter-chips.tsx

@@ -5,12 +5,19 @@ import { X } from "lucide-react";
 import type { EntityConfig } from "../../types";
 
 import { Badge } from "../../ui";
+import { formatFilterValue } from "../lib/filter-display";
 import { useCrudState } from "./crud-context";
 
 interface CrudFilterChipsProps {
   config: EntityConfig;
 }
 
+/**
+ * @deprecated `CrudTableToolbar` KHÔNG còn render component này — thanh công cụ
+ * (`DataTableToolbar`) đã tự vẽ hàng chip, render cả hai thì mỗi bộ lọc hiện
+ * hai lần. Giữ export để app ngoài đang gọi trực tiếp không gãy khi nâng cấp.
+ */
+
 export function CrudFilterChips({ config }: CrudFilterChipsProps) {
   const { filters, removeFilter, search, setSearch } = useCrudState();
 
@@ -18,43 +25,6 @@ export function CrudFilterChips({ config }: CrudFilterChipsProps) {
     return null;
   }
 
-  const getFilterLabel = (filterName: string, value: unknown): string => {
-    const filterConfig = config.filters?.find((f) => f.name === filterName);
-    if (!filterConfig) return filterName;
-
-    // Handle different filter types
-    if (filterConfig.type === "select" || filterConfig.type === "radio") {
-      const option = filterConfig.options?.find(
-        (opt) => opt.value === value || String(opt.value) === String(value),
-      );
-      return option
-        ? `${filterConfig.label}: ${option.label}`
-        : `${filterConfig.label}: ${String(value)}`;
-    }
-
-    if (filterConfig.type === "checkbox" && Array.isArray(value)) {
-      const labels = value
-        .map((v) => {
-          const option = filterConfig.options?.find(
-            (opt) => opt.value === v || String(opt.value) === String(v),
-          );
-          return option ? option.label : String(v);
-        })
-        .filter(Boolean);
-      return `${filterConfig.label}: ${labels.join(", ")}`;
-    }
-
-    if (
-      filterConfig.type === "datetime" &&
-      Array.isArray(value) &&
-      value.length === 2
-    ) {
-      return `${filterConfig.label}: ${new Date(value[0] as string).toLocaleDateString()} - ${new Date(value[1] as string).toLocaleDateString()}`;
-    }
-
-    return `${filterConfig.label}: ${String(value)}`;
-  };
-
   return (
     <div className="flex items-center gap-2 flex-wrap">
       {/* Search chip */}
@@ -83,10 +53,15 @@ export function CrudFilterChips({ config }: CrudFilterChipsProps) {
           className="gap-1.5 px-2.5 py-1 text-xs font-medium hover:bg-secondary/80 transition-colors"
         >
           <span className="text-muted-foreground">
-            {getFilterLabel(filter.name, filter.value).split(":")[0]}:
+            {config.filters?.find((f) => f.name === filter.name)?.label ??
+              filter.name}
+            :
           </span>
           <span className="font-semibold">
-            {getFilterLabel(filter.name, filter.value).split(":")[1]?.trim()}
+            {formatFilterValue(
+              config.filters?.find((f) => f.name === filter.name),
+              filter.value,
+            )}
           </span>
           <button
             onClick={() => removeFilter(filter.name)}

package/src/crud/components/crud-filters/datetime-filter.tsx

@@ -14,44 +14,85 @@ interface DateTimeFilterProps {
   mode?: "single" | "range";
 }
 
+/**
+ * Giá trị bộ lọc ➝ `Date` cho bộ chọn.
+ *
+ * Bộ lọc chở CHUỖI "YYYY-MM-DD" (xem `filter-defaults`), nhưng URL/`coerceFilters`
+ * có thể trả về `Date`. Nhận cả hai, và dựng ngày trần bằng bộ dựng theo GIỜ ĐỊA
+ * PHƯƠNG chứ không phải `new Date("2026-08-23")` — chuỗi đó là 00:00 UTC, ở
+ * GMT+7 hiện ra vẫn đúng ngày, nhưng ở múi giờ âm thì lùi một ngày ngay trên
+ * lịch người dùng đang nhìn.
+ */
+function parseDateValue(val: unknown): Date | null {
+  if (!val) return null;
+  if (val instanceof Date) return Number.isNaN(val.getTime()) ? null : val;
+  if (typeof val !== "string") return null;
+  const bare = val.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (bare) {
+    return new Date(Number(bare[1]), Number(bare[2]) - 1, Number(bare[3]));
+  }
+  const parsed = new Date(val);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+function parseRangeValue(val: unknown): [Date, Date] | null {
+  if (!Array.isArray(val) || val.length !== 2) return null;
+  const from = parseDateValue(val[0]);
+  const to = parseDateValue(val[1]);
+  return from && to ? [from, to] : null;
+}
+
+/** `Date` ➝ "YYYY-MM-DD" theo lịch người dùng đang nhìn. */
+function toDateKey(date: Date): string {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
 export function DateTimeFilter({
   filter,
   mode = "single",
 }: DateTimeFilterProps) {
-  const { filters, updateFilter, addFilter } = useCrudContext();
+  const { filters, addFilter, removeFilter } = useCrudContext();
   const currentFilter = filters.find((f) => f.name === filter.name);
-  const [value, setValue] = useState<Date | [Date, Date] | null>(
-    currentFilter?.value
-      ? mode === "range"
-        ? (currentFilter.value as [Date, Date])
-        : (currentFilter.value as Date)
-      : null,
+
+  const [value, setValue] = useState<Date | [Date, Date] | null>(() =>
+    mode === "range"
+      ? parseRangeValue(currentFilter?.value)
+      : parseDateValue(currentFilter?.value),
   );
 
+  // Bộ lọc đổi từ bên ngoài (seed `defaultValue`, bấm X trên chip, Đặt lại) —
+  // ô nhập phải đi theo, kể cả khi bộ lọc bị GỠ (về rỗng, không giữ giá trị cũ).
   useEffect(() => {
-    const externalFilter = filters.find((f) => f.name === filter.name);
-    if (externalFilter && externalFilter.value !== value) {
-      setValue(
-        mode === "range"
-          ? (externalFilter.value as [Date, Date])
-          : (externalFilter.value as Date),
-      );
-    }
-  }, [filters, filter.name, mode, value]);
+    const external = filters.find((f) => f.name === filter.name);
+    setValue(
+      mode === "range"
+        ? parseRangeValue(external?.value)
+        : parseDateValue(external?.value),
+    );
+  }, [filters, filter.name, mode]);
 
   const handleChange = (newValue: Date | [Date, Date] | null) => {
     setValue(newValue);
 
+    // Xoá ngày là GỠ bộ lọc. Trước đây nhánh này return sớm nên chip vẫn còn và
+    // danh sách vẫn bị lọc — không có đường nào bỏ lọc ngày.
     if (!newValue) {
+      removeFilter(filter.name);
       return;
     }
 
     const operator =
       mode === "range" ? filter.operator || "between" : filter.operator || "eq";
 
+    // Gửi đi CHUỖI ngày trần: không mang giờ thì không có gì để lệch múi giờ
+    // trên đường qua URL. `Date.toISOString()` của 00:00 giờ VN là 17:00Z hôm
+    // TRƯỚC — đúng cái đã làm bộ lọc trả về dữ liệu của hôm qua.
     addFilter({
       name: filter.name,
-      value: newValue,
+      value: Array.isArray(newValue)
+        ? [toDateKey(newValue[0]), toDateKey(newValue[1])]
+        : toDateKey(newValue),
       operator,
     });
   };

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

@@ -2,6 +2,8 @@
 
 import { useCallback, useMemo, useState } from "react";
 
+import { resolveFilterDefaults } from "../lib/filter-defaults";
+
 import type {
   ActiveFilter,
   CrudPermissions,
@@ -28,7 +30,8 @@ import type {
 
 // Combined interface for backward compatibility
 interface CrudContextValue
-  extends CrudConfigContextValue,
+  extends
+    CrudConfigContextValue,
     CrudStateContextValue,
     CrudSelectionContextValue {}
 
@@ -66,7 +69,12 @@ export function CrudProvider({
 
   // --- State (Search, Filters, Pagination, Sorting) ---
   const [search, setSearch] = useState<string>("");
-  const [filters, setFilters] = useState<ActiveFilter[]>([]);
+  // Bộ lọc khai `defaultValue` phải ĐANG CHẠY ngay khi trang mở, không chỉ nằm
+  // trong ngăn lọc. Trang danh sách theo ngày mà mở ra không lọc thì nạp cả
+  // lịch sử — xem `resolveFilterDefaults`.
+  const [filters, setFilters] = useState<ActiveFilter[]>(() =>
+    resolveFilterDefaults(initialConfig?.filters),
+  );
   const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
 
   // Validate defaultSort field exists in visible table fields

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

@@ -5,9 +5,9 @@ import type { Table } from "@tanstack/react-table";
 
 import type { CrudPermissions, EntityConfig } from "../../types";
 
-import { CrudFilterChips } from "./crud-filter-chips";
 import { FilterBuilder } from "./crud-filters/filter-builder";
 import { useCrudState } from "./crud-context";
+import { formatFilterValue } from "../lib/filter-display";
 import { DataTableToolbar } from "../../ui/data-display/data-table/data-table-toolbar";
 import type { FilterConfig } from "../../ui/data-display/data-table/data-table-toolbar";
 
@@ -26,7 +26,7 @@ export function CrudTableToolbar<TData>({
   viewMode = "table",
   onViewModeChange,
 }: CrudTableToolbarProps<TData>) {
-  const { filters, clearFilters, addFilter, removeFilter, search, setSearch } =
+  const { filters, setFilters, clearFilters, search, setSearch } =
     useCrudState();
 
   // Convert Crud filters to DataTable filters
@@ -41,51 +41,49 @@ export function CrudTableToolbar<TData>({
     }));
   }, [config.filters]);
 
+  // Chip do MỘT chỗ vẽ: `DataTableToolbar`. Trước đây toolbar này render thêm
+  // `<CrudFilterChips>` ngay dưới, hai component đọc cùng mảng `filters` nên
+  // mỗi bộ lọc hiện hai chip — và hai chip in giá trị theo hai kiểu hỏng khác
+  // nhau (JSON thô / bị `split(":")` cắt cụt).
   const activeFilters = useMemo(() => {
     return filters.map((f) => ({
       name: f.name,
       value: f.value,
       operator: f.operator,
+      displayValue: formatFilterValue(
+        config.filters?.find((cf) => cf.name === f.name),
+        f.value,
+      ),
     }));
-  }, [filters]);
+  }, [filters, config.filters]);
 
   return (
-    <div className="space-y-2">
-      <DataTableToolbar
-        table={table}
-        // Search
-        searchEnabled={config.features?.search}
-        searchValue={search}
-        onSearchChange={setSearch}
-        searchPlaceholder={`Search ${config.pluralLabel.toLowerCase()}...`}
-        // Filters
-        filters={dataTableFilters}
-        activeFilters={activeFilters}
-        // Custom filter builder overrides the default filter rendering
-        filterBuilder={<FilterBuilder filters={config.filters!} />}
-        // Filter callbacks
-        onFiltersChange={(newFilters) => {
-          if (newFilters.length === 0) {
-            clearFilters();
-          } else {
-            // Complex syncing is handled by FilterBuilder/CrudFilterChips
-            // This callback mainly handles the "Clear all" action
-            clearFilters();
-          }
-        }}
-        // View Options
-        viewMode={viewMode}
-        onViewModeChange={onViewModeChange}
-        enableViewModeToggle={!!onViewModeChange}
-        // Reset
-        onReset={() => {
-          setSearch("");
-          clearFilters();
-        }}
-      />
-
-      {/* Second row: Filter chips (specific to CRUD complex filters) */}
-      <CrudFilterChips config={config} />
-    </div>
+    <DataTableToolbar
+      table={table}
+      // Search
+      searchEnabled={config.features?.search}
+      searchValue={search}
+      onSearchChange={setSearch}
+      searchPlaceholder={`Search ${config.pluralLabel.toLowerCase()}...`}
+      // Filters
+      filters={dataTableFilters}
+      activeFilters={activeFilters}
+      // Custom filter builder overrides the default filter rendering
+      filterBuilder={<FilterBuilder filters={config.filters!} />}
+      // Bấm X trên MỘT chip chỉ gỡ chip đó. Trước đây nhánh nào cũng gọi
+      // `clearFilters()` nên gỡ một cái là bay sạch bộ lọc còn lại.
+      onFiltersChange={(next) =>
+        setFilters(filters.filter((f) => next.some((n) => n.name === f.name)))
+      }
+      // View Options
+      viewMode={viewMode}
+      onViewModeChange={onViewModeChange}
+      enableViewModeToggle={!!onViewModeChange}
+      // Reset
+      onReset={() => {
+        setSearch("");
+        clearFilters();
+      }}
+    />
   );
 }

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/crud/lib/filter-defaults.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest";
+
+import type { FilterConfig } from "../../types";
+
+import { resolveFilterDefaults, todayDateKey } from "./filter-defaults";
+import { formatFilterValue } from "./filter-display";
+
+const dateFilter: FilterConfig = {
+  name: "date",
+  label: "Ngày nghỉ",
+  type: "datetime",
+  field: "date",
+  operator: "eq",
+  defaultValue: "$today",
+};
+
+describe("resolveFilterDefaults", () => {
+  it("giải $today thành ngày trần theo lịch VN", () => {
+    const [filter] = resolveFilterDefaults([dateFilter]);
+    expect(filter).toEqual({
+      name: "date",
+      value: todayDateKey(),
+      operator: "eq",
+    });
+    expect(filter.value).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+  });
+
+  it("$today với operator between ➝ hôm nay tới hết hôm nay", () => {
+    const [filter] = resolveFilterDefaults([
+      { ...dateFilter, operator: "between" },
+    ]);
+    expect(filter.value).toEqual([todayDateKey(), todayDateKey()]);
+  });
+
+  it("ngày VN tính theo múi giờ cố định, không theo giờ máy", () => {
+    // Ngưỡng đổi ngày ở VN là 17:00Z hôm trước; máy chạy UTC vẫn phải ra ngày VN.
+    const vn = new Intl.DateTimeFormat("en-CA", {
+      timeZone: "Asia/Ho_Chi_Minh",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    }).format(new Date());
+    expect(todayDateKey()).toBe(vn);
+  });
+
+  it("bộ lọc không khai defaultValue ➝ không bật sẵn", () => {
+    expect(
+      resolveFilterDefaults([{ ...dateFilter, defaultValue: undefined }]),
+    ).toEqual([]);
+    expect(resolveFilterDefaults(undefined)).toEqual([]);
+  });
+
+  it("giữ nguyên defaultValue thường (không phải token)", () => {
+    const [filter] = resolveFilterDefaults([
+      {
+        name: "status",
+        label: "Trạng thái",
+        type: "select",
+        field: "status",
+        defaultValue: "approved",
+      },
+    ]);
+    expect(filter).toEqual({
+      name: "status",
+      value: "approved",
+      operator: "eq",
+    });
+  });
+});
+
+describe("formatFilterValue", () => {
+  it("ngày hiện dd/MM/yyyy, không phải chuỗi ISO hay JSON", () => {
+    expect(formatFilterValue(dateFilter, "2026-08-21")).toBe("21/08/2026");
+    // 00:00 giờ VN ngày 21/08 = 17:00Z ngày 20/08 — vẫn phải đọc là 21/08.
+    expect(
+      formatFilterValue(dateFilter, new Date("2026-08-20T17:00:00.000Z")),
+    ).toBe("21/08/2026");
+  });
+
+  it("khoảng một ngày đọc gọn thành một ngày", () => {
+    expect(
+      formatFilterValue({ ...dateFilter, operator: "between" }, [
+        "2026-08-21",
+        "2026-08-21",
+      ]),
+    ).toBe("21/08/2026");
+    expect(
+      formatFilterValue({ ...dateFilter, operator: "between" }, [
+        "2026-08-21",
+        "2026-08-23",
+      ]),
+    ).toBe("21/08/2026 - 23/08/2026");
+  });
+
+  it("select hiện nhãn tuỳ chọn, không hiện giá trị thô", () => {
+    const filter: FilterConfig = {
+      name: "status",
+      label: "Trạng thái",
+      type: "select",
+      field: "status",
+      options: [{ label: "Đã duyệt", value: "approved" }],
+    };
+    expect(formatFilterValue(filter, "approved")).toBe("Đã duyệt");
+  });
+
+  it("giá trị có dấu hai chấm KHÔNG bị cắt cụt", () => {
+    const filter: FilterConfig = {
+      name: "note",
+      label: "Ghi chú",
+      type: "text",
+      field: "note",
+    };
+    expect(formatFilterValue(filter, "ca 1: 06:30")).toBe("ca 1: 06:30");
+  });
+});