@goplusvn/core 0.1.60 → 0.1.62

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -0,0 +1,105 @@
+import type { EntityConfig } from "../../types";
+import type { ServerCrudLogger } from "../server-service";
+
+export interface PrepareMutationDataOptions {
+  data: any;
+  config?: EntityConfig;
+  mode: "create" | "update";
+  systemFields: string[];
+  relationFieldSkip?: string[];
+  logger: ServerCrudLogger;
+  touchUpdatedAtOnCreate?: boolean;
+}
+
+export function prepareMutationData(options: PrepareMutationDataOptions) {
+  const { data, config, mode, systemFields, relationFieldSkip, logger, touchUpdatedAtOnCreate } = options;
+
+  let filtered = data;
+  
+  if (config) {
+    // 1. Filter valid fields
+    const valid = new Set(config.fields.filter((f) => !(f as any).isDisplayOnly).map((f) => f.name));
+    for (const f of systemFields) valid.add(f);
+    filtered = {};
+    for (const [k, v] of Object.entries(data)) {
+      if (valid.has(k)) {
+        filtered[k] = v;
+      } else {
+        logger.warn(`Filtering out invalid field "${k}" for entity "${config.name}"`);
+      }
+    }
+
+    // 2. Cast field values (boolean, number)
+    for (const field of config.fields) {
+      const value = filtered[field.name];
+      if (value === undefined || value === null) continue;
+      
+      if (field.type === "boolean" || field.type === "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);
+        }
+        
+        if (field.type === "switch" && field.options && field.options.length >= 2) {
+          filtered[field.name] = isTrue ? (field.options[0] as any).value : (field.options[1] as any).value;
+        } else {
+          filtered[field.name] = isTrue;
+        }
+      } else if (field.type === "number" || (field.type as string) === "integer") {
+        if (typeof value === "string") {
+          if (value.trim() === "") {
+            filtered[field.name] = null;
+          } else {
+            const num = Number(value);
+            if (!isNaN(num)) filtered[field.name] = num;
+          }
+        }
+      }
+    }
+  }
+
+  // 3. System defaults for create
+  if (mode === "create") {
+    if (!filtered.id) {
+      filtered.id = crypto.randomUUID();
+    }
+    if (touchUpdatedAtOnCreate && !filtered.updatedAt) {
+      filtered.updatedAt = new Date();
+    }
+  }
+
+  // 4. Transform relation fields (*Id -> connect/disconnect)
+  const skip = new Set([
+    "id",
+    "createdBy",
+    "updatedBy",
+    "citizenId",
+    "targetId",
+    ...(relationFieldSkip ?? []),
+  ]);
+  
+  const prismaData = { ...filtered };
+  for (const key of Object.keys(prismaData)) {
+    if (skip.has(key)) continue;
+    
+    if (key.endsWith("Id") && key.length > 2) {
+      const rel = key.slice(0, -2);
+      const value = prismaData[key];
+      
+      if (value && typeof value === "string" && value.trim() !== "") {
+        prismaData[rel] = { connect: { id: value } };
+        delete prismaData[key];
+      } else if (value === null || value === undefined || value === "") {
+        if (mode === "update") {
+          prismaData[rel] = { disconnect: true };
+        }
+        delete prismaData[key];
+      }
+    }
+  }
+
+  return prismaData;
+}

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

@@ -0,0 +1,119 @@
+import { compileFilterTree } from "./filter-tree";
+import type { CrudQueryParams, EntityConfig } from "../../types";
+
+export interface BuildListQueryOptions {
+  entity: string;
+  config: EntityConfig;
+  params: CrudQueryParams;
+  scopeWhere?: Record<string, unknown>;
+  onDisallowedFilter?: (field: string) => void;
+}
+
+export function buildListQuery({
+  entity,
+  config,
+  params,
+  scopeWhere,
+  onDisallowedFilter,
+}: BuildListQueryOptions) {
+  const { page = 1, pageSize = 10, search, sort, filters, filterTree } = params;
+  const MAX_PAGE_SIZE = 200;
+  
+  const safePage = Math.max(1, Number(page) || 1);
+  const safePageSize = Math.min(Math.max(1, Number(pageSize) || 10), MAX_PAGE_SIZE);
+  const skip = (safePage - 1) * safePageSize;
+  const take = safePageSize;
+
+  const allowedFields = new Set<string>([
+    ...config.fields.map((f) => f.name),
+    "id", "createdAt", "updatedAt", "createdBy", "updatedBy", config.idField || "id",
+  ]);
+  const allowedRelations = new Set<string>(config.include || []);
+  const isAllowed = (name: string) => {
+    if (!name) return false;
+    if (name.includes(".")) return allowedRelations.has(name.split(".")[0]);
+    return allowedFields.has(name);
+  };
+
+  const where: any = { ...(scopeWhere ?? {}) };
+  if (search && search.trim()) {
+    const term = search.trim();
+    const searchFields = config.fields.filter((f) => f.filterable && f.type === "text").map((f) => f.name);
+    if (searchFields.length) where.OR = searchFields.map((f) => ({ [f]: { contains: term, mode: "insensitive" } }));
+  }
+
+  if (filters && filters.length) {
+    for (const filter of filters) {
+      const { name, value, operator } = filter as any;
+      if (value === undefined || value === null || (Array.isArray(value) && value.length === 0)) continue;
+      if (!isAllowed(name)) {
+        if (onDisallowedFilter) onDisallowedFilter(name);
+        continue;
+      }
+      let target = where;
+      let key = name;
+      if (name.includes(".")) {
+        const parts = name.split(".");
+        key = parts.pop()!;
+        for (const p of parts) { if (!target[p]) target[p] = {}; target = target[p]; }
+      }
+      const op = operator as string;
+      if (op === "contains") target[key] = { contains: value, mode: "insensitive" };
+      else if (op === "in") target[key] = { in: value };
+      else if (op === "notIn") target[key] = { notIn: value };
+      else if (op === "eq") target[key] = value;
+      else if (op === "ne") target[key] = { not: value };
+      else if (op === "gt") target[key] = { gt: value };
+      else if (op === "gte") target[key] = { gte: value };
+      else if (op === "lt") target[key] = { lt: value };
+      else if (op === "lte") target[key] = { lte: value };
+      else if (op === "startsWith") target[key] = { startsWith: value, mode: "insensitive" };
+      else if (op === "endsWith") target[key] = { endsWith: value, mode: "insensitive" };
+      else if (op === "isNull") target[key] = null;
+      else if (op === "isNotNull") target[key] = { not: null };
+      else target[key] = value;
+    }
+  }
+
+  if (filterTree) {
+    const compiled = compileFilterTree(filterTree, {
+      isAllowed,
+      onDisallowed: (field) => {
+        if (onDisallowedFilter) onDisallowedFilter(field);
+      },
+    });
+    if (compiled) {
+      where.AND = [...(Array.isArray(where.AND) ? where.AND : where.AND ? [where.AND] : []), compiled];
+    }
+  }
+
+  const orderBy: any = {};
+  const applySort = (field: string, direction: any) => {
+    if (field.includes(".")) {
+      const parts = field.split(".");
+      const leaf = parts.pop()!;
+      let t = orderBy;
+      for (const p of parts) { t[p] = t[p] || {}; t = t[p]; }
+      t[leaf] = direction;
+    } else orderBy[field] = direction;
+  };
+
+  if (sort && isAllowed(sort.field)) applySort(sort.field, sort.direction);
+  else if (config.defaultSort) applySort(config.defaultSort.field, config.defaultSort.direction);
+  else if (config.fields.some((f) => f.name === "createdAt")) orderBy.createdAt = "desc";
+  else orderBy[config.idField || "id"] = "desc";
+
+  const include: any = {};
+  if (config.include?.length) config.include.forEach((inc) => (include[inc] = true));
+  const includeOption = Object.keys(include).length ? { include } : {};
+
+  return {
+    where,
+    orderBy,
+    includeOption,
+    skip,
+    take,
+    safePage,
+    safePageSize,
+  };
+}

package/src/crud/server-service.ts

@@ -15,7 +15,8 @@
 //     getModelName: (e) => getModelName(e, MODEL_MAP),
 //   });
 
-import { compileFilterTree } from "./lib/filter-tree";
+import { buildListQuery } from "./lib/query-builder";
+import { prepareMutationData } from "./lib/mutation-builder";
 import type { CrudQueryParams, CrudResponse, EntityConfig } from "../types";
 import { serializeDecimalFields } from "../utils/serialize";
 
@@ -136,163 +137,27 @@ export function createServerCrudService(deps: ServerCrudDeps): ServerCrudService
     return m;
   };
 
-  const filterValidFields = (data: any, config: EntityConfig) => {
-    const valid = new Set(config.fields.filter((f) => !(f as any).isDisplayOnly).map((f) => f.name));
-    for (const f of systemFields) valid.add(f);
-    const out: Record<string, unknown> = {};
-    for (const [k, v] of Object.entries(data)) {
-      if (valid.has(k)) out[k] = v;
-      else log.warn(`Filtering out invalid field "${k}" for entity "${config.name}"`);
-    }
-    return out;
-  };
 
-  const castFieldValues = (data: any, config: EntityConfig) => {
-    const out = { ...data };
-    for (const field of config.fields) {
-      const value = out[field.name];
-      if (value === undefined || value === null) continue;
-      if (field.type === "boolean" || field.type === "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);
-        if (field.type === "switch" && field.options && field.options.length >= 2) {
-          out[field.name] = isTrue ? (field.options[0] as any).value : (field.options[1] as any).value;
-        } else out[field.name] = isTrue;
-      } else if (field.type === "number" || (field.type as string) === "integer") {
-        if (typeof value === "string") {
-          if (value.trim() === "") out[field.name] = null;
-          else {
-            const num = Number(value);
-            if (!isNaN(num)) out[field.name] = num;
-          }
-        }
-      }
-    }
-    return out;
-  };
-
-  const transformRelationFields = (data: any, mode: "create" | "update") => {
-    const out = { ...data };
-    // citizenId/targetId là legacy-default từ consumer đầu tiên — app mới khai
-    // cột scalar *Id của mình qua deps.relationFieldSkip thay vì sửa core.
-    const skip = new Set([
-      "id",
-      "createdBy",
-      "updatedBy",
-      "citizenId",
-      "targetId",
-      ...(deps.relationFieldSkip ?? []),
-    ]);
-    for (const key of Object.keys(out)) {
-      if (skip.has(key)) continue;
-      if (key.endsWith("Id") && key.length > 2) {
-        const rel = key.slice(0, -2);
-        const value = out[key];
-        if (value && typeof value === "string" && value.trim() !== "") {
-          out[rel] = { connect: { id: value } };
-          delete out[key];
-        } else if (value === null || value === undefined || value === "") {
-          if (mode === "update") out[rel] = { disconnect: true };
-          delete out[key];
-        }
-      }
-    }
-    return out;
-  };
 
   return {
     async list(entity, config, params) {
       const prismaModel = model(entity);
-      const { page = 1, pageSize = 10, search, sort, filters } = params;
-      const safePage = Math.max(1, Number(page) || 1);
-      const safePageSize = Math.min(Math.max(1, Number(pageSize) || 10), MAX_PAGE_SIZE);
-      const skip = (safePage - 1) * safePageSize;
-      const take = safePageSize;
-
-      const allowedFields = new Set<string>([
-        ...config.fields.map((f) => f.name),
-        "id", "createdAt", "updatedAt", "createdBy", "updatedBy", config.idField || "id",
-      ]);
-      const allowedRelations = new Set<string>(config.include || []);
-      const isAllowed = (name: string) => {
-        if (!name) return false;
-        if (name.includes(".")) return allowedRelations.has(name.split(".")[0]);
-        return allowedFields.has(name);
-      };
-
-      const where: any = { ...(deps.scopeWhere?.(entity, config) ?? {}) };
-      if (search && search.trim()) {
-        const term = search.trim();
-        const searchFields = config.fields.filter((f) => f.filterable && f.type === "text").map((f) => f.name);
-        if (searchFields.length) where.OR = searchFields.map((f) => ({ [f]: { contains: term, mode: "insensitive" } }));
-      }
-      if (filters && filters.length) {
-        for (const filter of filters) {
-          const { name, value, operator } = filter as any;
-          if (value === undefined || value === null || (Array.isArray(value) && value.length === 0)) continue;
-          if (!isAllowed(name)) {
-            log.warn(`Ignoring filter on disallowed field "${name}" for entity "${entity}"`);
-            continue;
-          }
-          let target = where;
-          let key = name;
-          if (name.includes(".")) {
-            const parts = name.split(".");
-            key = parts.pop()!;
-            for (const p of parts) { if (!target[p]) target[p] = {}; target = target[p]; }
-          }
-          const op = operator as string;
-          if (op === "contains") target[key] = { contains: value, mode: "insensitive" };
-          else if (op === "in") target[key] = { in: value };
-          else if (op === "notIn") target[key] = { notIn: value };
-          else if (op === "eq") target[key] = value;
-          else if (op === "ne") target[key] = { not: value };
-          else if (op === "gt") target[key] = { gt: value };
-          else if (op === "gte") target[key] = { gte: value };
-          else if (op === "lt") target[key] = { lt: value };
-          else if (op === "lte") target[key] = { lte: value };
-          else if (op === "startsWith") target[key] = { startsWith: value, mode: "insensitive" };
-          else if (op === "endsWith") target[key] = { endsWith: value, mode: "insensitive" };
-          else if (op === "isNull") target[key] = null;
-          else if (op === "isNotNull") target[key] = { not: null };
-          else target[key] = value;
-        }
-      }
-      // Bộ lọc nâng cao dạng cây ($and/$or, nhiều điều kiện cùng field) —
-      // cùng guard isAllowed với filter phẳng; AND vào where (search dùng OR
-      // nên không đụng nhau). Cây sai cấu trúc → throw (route trả lỗi 4xx).
-      if (params.filterTree) {
-        const compiled = compileFilterTree(params.filterTree, {
-          isAllowed,
-          onDisallowed: (field) =>
-            log.warn(`Ignoring filterTree condition on disallowed field "${field}" for entity "${entity}"`),
-        });
-        if (compiled) {
-          where.AND = [...(Array.isArray(where.AND) ? where.AND : where.AND ? [where.AND] : []), compiled];
-        }
-      }
-
-      const orderBy: any = {};
-      const applySort = (field: string, direction: any) => {
-        if (field.includes(".")) {
-          const parts = field.split(".");
-          const leaf = parts.pop()!;
-          let t = orderBy;
-          for (const p of parts) { t[p] = t[p] || {}; t = t[p]; }
-          t[leaf] = direction;
-        } else orderBy[field] = direction;
-      };
-      if (sort && isAllowed(sort.field)) applySort(sort.field, sort.direction);
-      else if (config.defaultSort) applySort(config.defaultSort.field, config.defaultSort.direction);
-      else if (config.fields.some((f) => f.name === "createdAt")) orderBy.createdAt = "desc";
-      else orderBy[config.idField || "id"] = "desc";
-
-      const include: any = {};
-      if (config.include?.length) config.include.forEach((inc) => (include[inc] = true));
-      const includeOption = Object.keys(include).length ? { include } : {};
+      
+      const {
+        where,
+        orderBy,
+        includeOption,
+        skip,
+        take,
+        safePage,
+        safePageSize,
+      } = buildListQuery({
+        entity,
+        config,
+        params,
+        scopeWhere: deps.scopeWhere?.(entity, config) as Record<string, unknown> | undefined,
+        onDisallowedFilter: (field) => log.warn(`Ignoring filter on disallowed field "${field}" for entity "${entity}"`),
+      });
 
       try {
         const [total, data] = await Promise.all([
@@ -324,13 +189,15 @@ export function createServerCrudService(deps: ServerCrudDeps): ServerCrudService
     async create(entity, data, config, tx) {
       const prismaModel = model(entity, tx ?? prisma);
       try {
-        let filtered = config ? filterValidFields(data, config) : data;
-        if (config) filtered = castFieldValues(filtered, config);
-        if (!filtered.id) filtered.id = crypto.randomUUID();
-        if (deps.touchUpdatedAtOnCreate && !filtered.updatedAt) {
-          filtered.updatedAt = new Date();
-        }
-        const prismaData = transformRelationFields(filtered, "create");
+        const prismaData = prepareMutationData({
+          data,
+          config,
+          mode: "create",
+          systemFields,
+          relationFieldSkip: deps.relationFieldSkip,
+          logger: log,
+          touchUpdatedAtOnCreate: deps.touchUpdatedAtOnCreate,
+        });
         return serializeDecimalFields(await prismaModel.create({ data: prismaData }));
       } catch (error) {
         log.error(`Error creating ${entity}:`, error);
@@ -341,9 +208,14 @@ export function createServerCrudService(deps: ServerCrudDeps): ServerCrudService
     async update(entity, id, data, config, tx) {
       const prismaModel = model(entity, tx ?? prisma);
       try {
-        let filtered = config ? filterValidFields(data, config) : data;
-        if (config) filtered = castFieldValues(filtered, config);
-        const prismaData = transformRelationFields(filtered, "update");
+        const prismaData = prepareMutationData({
+          data,
+          config,
+          mode: "update",
+          systemFields,
+          relationFieldSkip: deps.relationFieldSkip,
+          logger: log,
+        });
         return serializeDecimalFields(await prismaModel.update({ where: { id }, data: prismaData }));
       } catch (error) {
         log.error(`Error updating ${entity}:`, error);

package/src/user/components/users-card-view.tsx

@@ -2,8 +2,6 @@
 
 import {
   Card,
-  CardContent,
-  CardHeader,
   Badge,
   Button,
   DropdownMenu,
@@ -13,9 +11,11 @@ import {
   Avatar,
   AvatarFallback,
   AvatarImage,
+  Separator,
 } from "../../ui";
 import { cn } from "../../utils";
-import { Mail, Phone, MoreHorizontal, Eye, Edit, User, Briefcase, Store, ShieldCheck, Hash, Building2 , KeyRound} from "lucide-react";
+import { Phone, MoreHorizontal, Eye, Edit, User, Briefcase, Building2, KeyRound, Mail, ShieldCheck, Copy } from "lucide-react";
+import { toast } from "sonner";
 
 interface UsersCardViewProps {
   data: any[];
@@ -24,31 +24,16 @@ interface UsersCardViewProps {
   onViewPermissions?: (user: any) => void;
 }
 
-// Professional Corporate Palette
+// Professional Corporate Palette for Avatars
 const AVATAR_PALETTE = [
-  { bg: "bg-primary", text: "text-primary-foreground" }, // Primary
-  { bg: "bg-emerald-600", text: "text-white" }, // Emerald
-  { bg: "bg-orange-600", text: "text-white" }, // Orange
-  { bg: "bg-violet-600", text: "text-white" }, // Violet
-  { bg: "bg-cyan-600", text: "text-white" }, // Cyan
+  { bg: "bg-blue-600", text: "text-white" },
+  { bg: "bg-emerald-600", text: "text-white" },
+  { bg: "bg-orange-600", text: "text-white" },
+  { bg: "bg-violet-600", text: "text-white" },
+  { bg: "bg-cyan-600", text: "text-white" },
+  { bg: "bg-rose-600", text: "text-white" },
 ];
 
-const ROLE_PALETTE = [
-  "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800",
-  "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:border-emerald-800",
-  "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:border-amber-800",
-  "bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800",
-  "bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-900/30 dark:text-rose-400 dark:border-rose-800",
-];
-
-const getRoleStyle = (role: string) => {
-  let hash = 0;
-  for (let i = 0; i < role.length; i++) {
-    hash = role.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return ROLE_PALETTE[Math.abs(hash) % ROLE_PALETTE.length];
-};
-
 const getAvatarColor = (name: string | null) => {
   if (!name) return AVATAR_PALETTE[0];
   const charCode = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0);
@@ -62,7 +47,7 @@ export function UsersCardView({
 }: UsersCardViewProps) {
   if (!data.length) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-[400px] border border-border rounded-xl bg-card p-8 text-center">
+      <div className="flex flex-col items-center justify-center min-h-[400px] border border-dashed rounded-xl bg-card/50 p-8 text-center">
         <div className="size-16 rounded-full bg-primary/5 flex items-center justify-center mb-4">
           <User className="size-8 text-primary" strokeWidth={1.5} />
         </div>
@@ -83,189 +68,198 @@ export function UsersCardView({
       .map((n) => n[0])
       .join("")
       .toUpperCase()
-      .slice(0, 1);
+      .slice(0, 2);
   };
 
   return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-4">
-        {data.map((user) => {
-          const isActive = user.isActive || user.status === "active";
-          const avatarColors = getAvatarColor(user.name);
-          
-          return (
-            <Card
-              key={user.id}
-              className="group relative transition-all duration-200 border border-border bg-card cursor-pointer h-full flex flex-col rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-primary/30"
-              onClick={() => onSelect && onSelect(user)}
-            >
-              {/* Header */}
-              <div className="p-3 pb-2 flex gap-2.5 items-start bg-muted border-b border-border">
-                <div className="relative shrink-0 mt-0.5">
-                  <div
-                    className={cn(
-                      "size-8 rounded-full flex items-center justify-center font-semibold text-xs",
-                      avatarColors.bg, avatarColors.text
-                    )}
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5 pb-4 mt-2">
+      {data.map((user) => {
+        const isActive = user.isActive || user.status === "active";
+        const avatarColors = getAvatarColor(user.name);
+
+        return (
+          <Card
+            key={user.id}
+            className="group relative flex flex-col bg-card border-border/60 hover:border-primary/40 hover:shadow-md transition-all duration-300 cursor-pointer overflow-hidden rounded-xl shadow-sm"
+            onClick={() => onSelect && onSelect(user)}
+          >
+            {/* Action Menu (Absolute on Card) */}
+            <div className="absolute top-3 right-2 z-10">
+              <DropdownMenu modal={false}>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 rounded-full bg-background hover:bg-muted text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-all duration-200"
+                    onClick={(e) => e.stopPropagation()}
                   >
-                    {user.image || user.avatar ? (
-                      <img
-                        src={user.image || user.avatar}
-                        alt={user.name}
-                        className="w-full h-full object-cover rounded-full"
-                      />
-                    ) : (
-                      getInitials(user.name || user.email)
-                    )}
-                  </div>
-                  {/* Status Dot */}
-                  <div
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-[160px] rounded-xl shadow-lg">
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setTimeout(() => onSelect && onSelect(user), 0);
+                    }}
+                    className="text-xs cursor-pointer py-2 rounded-md"
+                  >
+                    <Eye className="mr-2 h-4 w-4 text-muted-foreground" />
+                    Xem chi tiết
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setTimeout(() => onSelect && onSelect(user), 0);
+                    }}
+                    className="text-xs cursor-pointer py-2 rounded-md"
+                  >
+                    <Edit className="mr-2 h-4 w-4 text-muted-foreground" />
+                    Chỉnh sửa
+                  </DropdownMenuItem>
+                  {onViewPermissions && (
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setTimeout(() => onViewPermissions(user), 0);
+                      }}
+                      className="text-xs cursor-pointer py-2 rounded-md"
+                    >
+                      <KeyRound className="mr-2 h-4 w-4 text-muted-foreground" />
+                      Quyền hiệu lực
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+
+            <div className="flex flex-col flex-1">
+              {/* TOP SECTION: Clean Minimalist Header */}
+              <div className="p-4 pt-5 flex items-start gap-3 bg-muted/20 border-b border-border/40">
+                
+                <div className="relative shrink-0 z-10">
+                  <Avatar className="h-12 w-12 rounded-full border border-border/50 shadow-sm">
+                    <AvatarImage src={user.image || user.avatar || ""} alt={user.name || ""} className="object-cover rounded-full" />
+                    <AvatarFallback className={cn("text-xs font-bold rounded-full", avatarColors.bg, avatarColors.text)}>
+                      {getInitials(user.name || user.email)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span 
                     className={cn(
-                      "absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 border-2 border-card rounded-full z-10",
-                      isActive ? "bg-success-semantic" : "bg-text-tertiary"
-                    )}
-                    title={isActive ? "Hoạt động" : "Đã khóa"}
+                      "absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-2 border-card shadow-sm",
+                      isActive ? "bg-emerald-500" : "bg-muted-foreground/50"
+                    )} 
+                    title={isActive ? "Đang hoạt động" : "Đã khóa"}
                   />
                 </div>
-                
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-0.5">
-                    <h3
-                      className="font-semibold text-sm text-foreground truncate leading-tight"
-                      title={user.name}
-                    >
+
+                <div className="flex flex-col min-w-0 flex-1 pt-0.5 z-10">
+                  <div className="flex items-center gap-1.5 flex-wrap pr-6">
+                    <h3 className="font-bold text-sm text-foreground leading-tight truncate" title={user.name}>
                       {user.name || "Chưa đặt tên"}
                     </h3>
-                    
-                    {/* User Type Badge (Compact) */}
                     {user.userType === "customer" && (
-                      <span className="text-[10px] px-1.5 py-0.5 font-semibold rounded bg-emerald-600 text-white shrink-0">
-                        Khách hàng
-                      </span>
+                      <Badge className="text-[9px] font-bold bg-emerald-100 text-emerald-700 hover:bg-emerald-200 border-transparent uppercase tracking-widest px-1.5 py-0 h-4 shrink-0 rounded-md">Khách</Badge>
                     )}
                     {user.userType === "supplier" && (
-                      <span className="text-[10px] px-1.5 py-0.5 font-semibold rounded bg-orange-600 text-white shrink-0">
-                        Nhà cung cấp
-                      </span>
+                      <Badge className="text-[9px] font-bold bg-orange-100 text-orange-700 hover:bg-orange-200 border-transparent uppercase tracking-widest px-1.5 py-0 h-4 shrink-0 rounded-md">NCC</Badge>
                     )}
                     {(!user.userType || user.userType === "employee") && (
-                      <span className="text-[10px] px-1.5 py-0.5 font-semibold rounded bg-primary/10 text-primary border border-primary/20 shrink-0">
-                        Nhân viên
-                      </span>
+                      <Badge className="text-[9px] font-bold bg-indigo-100 text-indigo-700 hover:bg-indigo-200 border-transparent uppercase tracking-widest px-1.5 py-0 h-4 shrink-0 rounded-md">NV</Badge>
                     )}
                   </div>
-
-                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                    <span className="truncate leading-none" title={user.email}>
-                      {user.email || "—"}
-                    </span>
-                  </div>
-                </div>
-
-                {/* Actions */}
-                <DropdownMenu modal={false}>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      className="h-7 w-7 p-0 text-muted-foreground hover:text-primary hover:bg-primary/5 shrink-0 -mt-1 -mr-1 rounded-full"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <MoreHorizontal className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="w-[140px] rounded-xl border-border p-1.5">
-                    <DropdownMenuItem
-                      onSelect={(e) => {
-                         e.preventDefault();
-                         setTimeout(() => {
-                           onSelect && onSelect(user);
-                         }, 150);
-                      }}
-                      className="text-xs font-medium text-foreground cursor-pointer rounded-md py-1.5 focus:bg-primary/5 focus:text-primary"
-                    >
-                      <Eye className="mr-2 size-3.5" />
-                      Xem chi tiết
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onSelect={(e) => {
-                         e.preventDefault();
-                         setTimeout(() => {
-                           onSelect && onSelect(user);
-                         }, 150);
-                      }}
-                      className="text-xs font-medium text-foreground cursor-pointer rounded-md py-1.5 focus:bg-primary/5 focus:text-primary"
-                    >
-                      <Edit className="mr-2 size-3.5" />
-                      Chỉnh sửa
-                    </DropdownMenuItem>
-                    {onViewPermissions && (
-                      <DropdownMenuItem
-                        onSelect={(e) => {
-                          e.preventDefault();
-                          setTimeout(() => onViewPermissions(user), 0);
+                  
+                  <div className="flex items-center gap-1.5 mt-1.5 text-muted-foreground w-max max-w-full group/email">
+                    <span className="text-xs truncate font-medium">{user.email || "—"}</span>
+                    {user.email && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5 rounded-md hover:bg-muted shrink-0 text-muted-foreground opacity-60 group-hover/email:opacity-100 transition-opacity"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          navigator.clipboard.writeText(user.email);
+                          toast.success("Đã copy Email");
                         }}
-                        className="rounded-lg text-[13px] cursor-pointer"
+                        title="Copy email"
                       >
-                        <KeyRound className="size-3.5 mr-2 text-muted-foreground" />
-                        Quyền hiệu lực
-                      </DropdownMenuItem>
+                        <Copy className="w-3 h-3" />
+                      </Button>
                     )}
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                  </div>
+                </div>
               </div>
 
-              {/* Body */}
-              <div className="p-3 pt-0 flex-1 flex flex-col bg-card">
+              <Separator />
+
+              {/* MIDDLE SECTION: 2-Column Split (Khu vực / Liên hệ) */}
+              <div className="px-4 py-3.5 grid grid-cols-2 gap-3 flex-1 items-center bg-card">
                 
-                {/* 2-Column Compact Grid */}
-                <div className="grid grid-cols-2 gap-x-2 gap-y-1.5 mb-2 mt-2">
-                  <div className="flex items-center gap-1.5 min-w-0" title="Số điện thoại">
-                    <Phone className="size-3 text-muted-foreground shrink-0" strokeWidth={1.5} />
-                    <span className="text-xs text-muted-foreground truncate">
-                      {user.profiles?.phone || user.phone || "—"}
-                    </span>
-                  </div>
-                  
-                  <div className="flex items-center gap-1.5 min-w-0" title="Trạng thái">
-                    <ShieldCheck className="size-3 text-muted-foreground shrink-0" strokeWidth={1.5} />
-                    <span className={cn("text-xs font-medium truncate", isActive ? "text-emerald-600 dark:text-emerald-500" : "text-muted-foreground")}>
-                      {isActive ? "Đang hoạt động" : "Đã khóa"}
-                    </span>
+                {/* Column 1: Khu vực */}
+                <div className="flex flex-col min-w-0 pr-2">
+                  <div className="flex items-center gap-1.5 mb-1.5">
+                    <Building2 className="w-3 h-3 text-muted-foreground/70" />
+                    <span className="text-[9px] text-muted-foreground/80 uppercase font-bold tracking-wider">Khu vực</span>
                   </div>
+                  <span className="text-xs text-foreground/90 font-semibold truncate" title={(user.branchNames && user.branchNames.length > 0) ? user.branchNames.join(", ") : (user.branchName || user.branch?.name || "")}>
+                    {(user.branchNames && user.branchNames.length > 0) 
+                      ? user.branchNames.join(", ") 
+                      : (user.branchName || user.branch?.name || "Chưa có chi nhánh")}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground truncate mt-0.5" title={user.departmentName}>
+                    {user.departmentName || "Chưa phân bổ"}
+                  </span>
+                </div>
 
-                  <div className="flex items-center gap-1.5 min-w-0" title="Bộ phận">
-                    <Briefcase className="size-3 text-muted-foreground shrink-0" strokeWidth={1.5} />
-                    <span className="text-xs text-muted-foreground truncate">
-                      {user.departmentName || "—"}
-                    </span>
+                {/* Column 2: Liên hệ */}
+                <div className="flex flex-col min-w-0 border-l border-border/50 pl-3">
+                  <div className="flex items-center gap-1.5 mb-1.5">
+                    <Phone className="w-3 h-3 text-muted-foreground/70" />
+                    <span className="text-[9px] text-muted-foreground/80 uppercase font-bold tracking-wider">Liên hệ</span>
                   </div>
-
-                  <div className="flex items-center gap-1.5 min-w-0" title="Chi nhánh">
-                    <Building2 className="size-3 text-muted-foreground shrink-0" strokeWidth={1.5} />
-                    <span className="text-xs text-muted-foreground truncate">
-                      {(user.branchNames && user.branchNames.length > 0) ? user.branchNames.join(", ") : (user.branchName || user.branch?.name || "—")}
+                  <div className="flex items-center justify-between gap-1 max-w-full group/phone" onClick={(e) => e.stopPropagation()}>
+                    <span className="text-xs text-foreground/90 font-semibold truncate">
+                      {user.profiles?.phone || user.phone || "—"}
                     </span>
+                    {(user.profiles?.phone || user.phone) && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5 rounded-md hover:bg-muted shrink-0 text-muted-foreground opacity-60 group-hover/phone:opacity-100 transition-opacity"
+                        onClick={(e) => {
+                           e.stopPropagation();
+                           const phone = user.profiles?.phone || user.phone;
+                           navigator.clipboard.writeText(phone);
+                           toast.success("Đã copy Số điện thoại");
+                        }}
+                        title="Copy số điện thoại"
+                      >
+                        <Copy className="w-3 h-3" />
+                      </Button>
+                    )}
                   </div>
                 </div>
+              </div>
 
-                {/* Roles - Compact Format */}
-                {user.roleNames && user.roleNames.length > 0 && (
-                  <div className="mt-auto pt-2.5 border-t border-border flex flex-wrap gap-1">
-                    {user.roleNames.map((role: string, i: number) => {
-                      const style = getRoleStyle(role);
-                      return (
-                        <span key={i} className={cn("text-[10px] px-1.5 py-0.5 font-medium rounded truncate max-w-[100px] inline-flex items-center border", style)}>
-                          {role}
-                        </span>
-                      );
-                    })}
-                  </div>
-                )}
+              <Separator />
+
+              {/* BOTTOM SECTION: Roles */}
+              <div className="px-4 py-3 bg-card border-t border-border/40 shrink-0 h-[44px] flex items-center">
+                <div className="flex items-center gap-2 w-full overflow-hidden [mask-image:linear-gradient(to_right,black_85%,transparent_100%)] text-[11px] text-muted-foreground/90 font-medium">
+                  <ShieldCheck className="w-3.5 h-3.5 shrink-0 text-muted-foreground/50" />
+                  <span className="truncate">
+                    {user.roleNames && user.roleNames.length > 0 ? (
+                      user.roleNames.join(" • ")
+                    ) : (
+                      <span className="italic opacity-60">Chưa phân vai trò</span>
+                    )}
+                  </span>
+                </div>
               </div>
-            </Card>
-          );
-        })}
-      </div>
+            </div>
+          </Card>
+        );
+      })}
     </div>
   );
 }

package/src/user/pages/users-client-page.tsx

@@ -13,9 +13,13 @@ import {
   TableRow,
   Badge,
   Button,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
 } from "../../ui";
-import { Edit2 } from "lucide-react";
+import { Edit2, Phone, Briefcase, Building2 } from "lucide-react";
 import type { EntityConfig, CrudPermissions } from "../../types";
+import { cn } from "../../utils";
 
 import { UserToolbar } from "../components/user-toolbar";
 import { UserStats } from "../components/user-stats";
@@ -274,136 +278,197 @@ function BasicUserTable({
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
-  if (!data.length) return <div className="p-4 text-center">No data</div>;
+  if (!data.length) return (
+    <div className="p-8 text-center bg-card flex flex-col items-center justify-center border-t border-border">
+      <p className="text-sm font-medium text-muted-foreground">Không có dữ liệu</p>
+    </div>
+  );
 
   const totalPages = Math.ceil(data.length / pageSize);
   const paginatedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
 
+  const getInitials = (name: string | null) => {
+    if (!name) return "U";
+    return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  };
+
+  // Corporate Palette for Avatars
+  const AVATAR_PALETTE = [
+    { bg: "bg-blue-600", text: "text-white" },
+    { bg: "bg-emerald-600", text: "text-white" },
+    { bg: "bg-orange-600", text: "text-white" },
+    { bg: "bg-violet-600", text: "text-white" },
+    { bg: "bg-cyan-600", text: "text-white" },
+    { bg: "bg-rose-600", text: "text-white" },
+  ];
+
+  const getAvatarColor = (name: string | null) => {
+    if (!name) return AVATAR_PALETTE[0];
+    const charCode = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0);
+    return AVATAR_PALETTE[charCode % AVATAR_PALETTE.length];
+  };
+
   return (
-    <div className="flex flex-col gap-4">
-      <div className="bg-background">
-        <Table>
-      <TableHeader>
-        <TableRow className="text-sm border-b">
-          <TableHead className="w-[50px] font-semibold text-foreground text-center h-10">STT</TableHead>
-          <TableHead className="w-[20%] min-w-[150px] font-semibold text-foreground h-10">Người dùng</TableHead>
-          <TableHead className="w-[20%] min-w-[150px] font-semibold text-foreground h-10">Liên hệ</TableHead>
-          <TableHead className="w-[15%] min-w-[120px] font-semibold text-foreground h-10">Trạng thái</TableHead>
-          <TableHead className="w-[15%] min-w-[120px] font-semibold text-foreground h-10">Phòng ban</TableHead>
-          <TableHead className="w-[20%] min-w-[150px] font-semibold text-foreground h-10">Vai trò</TableHead>
-          <TableHead className="w-[50px] text-center h-10"></TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {paginatedData.map((user, index) => (
-          <TableRow key={user.id} className="border-b group">
-            {/* STT */}
-            <TableCell className="py-3 text-center text-muted-foreground font-medium text-xs">
-              {(currentPage - 1) * pageSize + index + 1}
-            </TableCell>
-
-            {/* User Info */}
-            <TableCell className="py-3">
-              <div className="flex flex-col">
-                <div className="flex items-center gap-2">
-                  <span className="font-semibold text-sm text-foreground">{user.name}</span>
-                  {user.userType === "customer" && <span className="text-xs text-foreground bg-muted border px-2.5 py-0.5 rounded-full font-semibold whitespace-nowrap">Khách hàng</span>}
-                  {user.userType === "supplier" && <span className="text-xs text-background bg-foreground px-2.5 py-0.5 rounded-full font-semibold whitespace-nowrap">Nhà cung cấp</span>}
-                  {(!user.userType || user.userType === "employee") && <span className="text-xs text-foreground bg-muted border px-2.5 py-0.5 rounded-full font-semibold whitespace-nowrap">Nhân viên</span>}
-                </div>
-              </div>
-            </TableCell>
-
-            {/* Contact */}
-            <TableCell className="py-3">
-              <div className="flex flex-col">
-                <span className="text-sm text-foreground">{user.email}</span>
-                {user.phone && <span className="text-sm text-muted-foreground">{user.phone}</span>}
-              </div>
-            </TableCell>
-
-            {/* Status */}
-            <TableCell className="py-3">
-              <div className="flex items-center gap-1.5">
-                <span className={`inline-flex items-center text-xs font-semibold px-2.5 py-1 rounded-full whitespace-nowrap ${
-                  user.isActive || user.status === "active" 
-                    ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" 
-                    : "bg-muted text-muted-foreground"
-                }`}>
-                  {user.isActive || user.status === "active" ? "Hoạt động" : "Đã khóa"}
-                </span>
-              </div>
-            </TableCell>
-
-            {/* Department */}
-            <TableCell className="py-3 text-sm text-foreground">
-              {user.departmentName || "—"}
-            </TableCell>
-
-            {/* Roles */}
-            <TableCell className="py-3">
-              <div className="flex flex-wrap gap-1.5">
-                {user.roleNames?.map((r: string, i: number) => (
-                  <span
-                    key={i}
-                    className="inline-flex items-center bg-muted text-foreground border font-semibold text-xs px-2.5 py-1 rounded-full whitespace-nowrap"
-                  >
-                    {r}
-                  </span>
-                ))}
-              </div>
-            </TableCell>
-
-            {/* Actions */}
-            <TableCell className="py-2.5 text-right">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={(e: React.MouseEvent) => {
-                  e.stopPropagation();
-                  onEdit(user);
-                }}
-              >
-                <Edit2 className="h-4 w-4" />
-              </Button>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-    </div>
+    <div className="flex flex-col border border-border rounded-lg overflow-hidden shadow-sm mt-2">
+      <div className="bg-card w-full overflow-x-auto">
+        <Table className="w-full">
+          <TableHeader>
+            <TableRow className="border-b border-border bg-muted/50 hover:bg-muted/50">
+              <TableHead className="w-[50px] font-semibold text-muted-foreground text-xs uppercase tracking-wider text-center h-11">STT</TableHead>
+              <TableHead className="w-[30%] min-w-[250px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Người dùng</TableHead>
+              <TableHead className="w-[15%] min-w-[150px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Liên hệ</TableHead>
+              <TableHead className="w-[20%] min-w-[180px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Phòng ban / Chi nhánh</TableHead>
+              <TableHead className="w-[25%] min-w-[200px] font-semibold text-muted-foreground text-xs uppercase tracking-wider h-11">Vai trò</TableHead>
+              <TableHead className="w-[60px] text-right h-11"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedData.map((user, index) => {
+              const isActive = user.isActive || user.status === "active";
+              const avatarColors = getAvatarColor(user.name);
+              
+              return (
+                <TableRow key={user.id} className="border-b border-border/40 hover:bg-accent/10 transition-colors group">
+                  {/* STT */}
+                  <TableCell className="py-3 text-center text-muted-foreground text-xs font-medium align-middle">
+                    {(currentPage - 1) * pageSize + index + 1}
+                  </TableCell>
+
+                  {/* User Info (Avatar + Name + Type + Status) */}
+                  <TableCell className="py-3 align-top">
+                    <div className="flex items-start gap-3">
+                      <div className="relative shrink-0 mt-0.5">
+                        <Avatar className="h-10 w-10 rounded-full border shadow-sm">
+                          <AvatarImage src={user.image || user.avatar || ""} alt={user.name || ""} className="object-cover rounded-full" />
+                          <AvatarFallback className={cn("text-xs font-bold rounded-full", avatarColors.bg, avatarColors.text)}>
+                            {getInitials(user.name || user.email)}
+                          </AvatarFallback>
+                        </Avatar>
+                        {/* Note: Status indicator is now a badge next to the name */}
+                      </div>
+                      
+                      <div className="flex flex-col min-w-0">
+                        <div className="flex items-center gap-1.5 mb-1 flex-wrap">
+                          <span className="font-bold text-sm text-foreground truncate mr-1">{user.name || "Chưa đặt tên"}</span>
+                          
+                          {/* Status Badge */}
+                          {isActive ? (
+                            <Badge className="text-[9px] h-4 px-1.5 font-bold bg-emerald-100 text-emerald-700 hover:bg-emerald-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">
+                              <div className="w-1.5 h-1.5 rounded-full bg-emerald-600 mr-1.5" />
+                              Hoạt động
+                            </Badge>
+                          ) : (
+                            <Badge className="text-[9px] h-4 px-1.5 font-bold bg-slate-100 text-slate-600 hover:bg-slate-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">
+                              <div className="w-1.5 h-1.5 rounded-full bg-slate-400 mr-1.5" />
+                              Đã khóa
+                            </Badge>
+                          )}
+
+                          {/* Type Badge */}
+                          {user.userType === "customer" && <Badge className="text-[9px] h-4 px-1.5 font-bold bg-emerald-100 text-emerald-700 hover:bg-emerald-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">Khách hàng</Badge>}
+                          {user.userType === "supplier" && <Badge className="text-[9px] h-4 px-1.5 font-bold bg-orange-100 text-orange-700 hover:bg-orange-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">Nhà cung cấp</Badge>}
+                          {(!user.userType || user.userType === "employee") && <Badge className="text-[9px] h-4 px-1.5 font-bold bg-indigo-100 text-indigo-700 hover:bg-indigo-200 border-transparent uppercase tracking-widest shrink-0 rounded-full">Nhân viên</Badge>}
+                        </div>
+                        <span className="text-xs text-muted-foreground truncate font-medium">{user.email || "—"}</span>
+                      </div>
+                    </div>
+                  </TableCell>
+
+                  {/* Contact */}
+                  <TableCell className="py-3 align-top">
+                    <div className="flex items-center gap-1.5 mt-1">
+                      <Phone className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                      <span className="text-sm font-medium text-foreground/80">{user.profiles?.phone || user.phone || "—"}</span>
+                    </div>
+                  </TableCell>
+
+                  {/* Department & Branch */}
+                  <TableCell className="py-3 align-top">
+                    <div className="flex flex-col gap-1.5 mt-1">
+                      <div className="flex items-center gap-1.5">
+                        <Briefcase className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                        <span className="text-sm font-semibold text-foreground/80 truncate max-w-[200px]" title={user.departmentName}>{user.departmentName || "—"}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5">
+                        <Building2 className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                        <span className="text-xs text-muted-foreground truncate max-w-[200px]" title={(user.branchNames && user.branchNames.length > 0) ? user.branchNames.join(", ") : (user.branchName || user.branch?.name || "")}>
+                          {(user.branchNames && user.branchNames.length > 0) ? user.branchNames.join(", ") : (user.branchName || user.branch?.name || "—")}
+                        </span>
+                      </div>
+                    </div>
+                  </TableCell>
+
+                  {/* Roles */}
+                  <TableCell className="py-3 align-top">
+                    <div className="flex flex-wrap gap-1 mt-0.5">
+                      {user.roleNames && user.roleNames.length > 0 ? (
+                        user.roleNames.map((r: string, i: number) => (
+                          <Badge
+                            key={i}
+                            className="text-[10px] px-2 py-0.5 font-medium bg-slate-100 text-slate-700 border-transparent hover:bg-slate-200 truncate max-w-[140px]"
+                            title={r}
+                          >
+                            {r}
+                          </Badge>
+                        ))
+                      ) : (
+                        <span className="text-xs text-muted-foreground italic">—</span>
+                      )}
+                    </div>
+                  </TableCell>
+
+                  {/* Actions */}
+                  <TableCell className="py-3 text-right align-middle">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-background shadow-sm opacity-0 group-hover:opacity-100 transition-all focus:opacity-100"
+                      onClick={(e: React.MouseEvent) => {
+                        e.stopPropagation();
+                        onEdit(user);
+                      }}
+                    >
+                      <Edit2 className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
 
-    {/* Pagination */}
-    {totalPages > 1 && (
-      <div className="flex items-center justify-between px-2 pt-2">
-        <p className="text-sm text-muted-foreground">
-          Hiển thị từ {(currentPage - 1) * pageSize + 1} đến {Math.min(currentPage * pageSize, data.length)} trong tổng số {data.length}
-        </p>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-            disabled={currentPage === 1}
-            className="h-8 rounded-full"
-          >
-            Trang trước
-          </Button>
-          <div className="text-sm font-semibold text-foreground px-2">
-            Trang {currentPage} / {totalPages}
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between px-4 py-3 bg-muted/20 border-t border-border">
+          <p className="text-xs text-muted-foreground font-medium">
+            Hiển thị từ <span className="font-bold text-foreground">{(currentPage - 1) * pageSize + 1}</span> đến <span className="font-bold text-foreground">{Math.min(currentPage * pageSize, data.length)}</span> / <span className="font-bold text-foreground">{data.length}</span>
+          </p>
+          <div className="flex items-center gap-1.5">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+              disabled={currentPage === 1}
+              className="h-7 text-xs px-2.5 rounded-full bg-card"
+            >
+              Trang trước
+            </Button>
+            <div className="text-xs font-semibold text-foreground px-2">
+              {currentPage} / {totalPages}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+              disabled={currentPage === totalPages}
+              className="h-7 text-xs px-2.5 rounded-full bg-card"
+            >
+              Trang sau
+            </Button>
           </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-            disabled={currentPage === totalPages}
-            className="h-8 rounded-full"
-          >
-            Trang sau
-          </Button>
         </div>
-      </div>
-    )}
+      )}
     </div>
   );
 }