@goplusvn/core 0.1.0 → 0.1.1

package/src/user/components/user-stats.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { memo } from "react";
+import { Users, ShieldCheck, UserPlus, UserCheck } from "lucide-react";
+
+import { CompactStatBar, CompactStatItem } from "../../ui/data-display/compact-stat-bar";
+
+interface UserStatsProps {
+  stats: {
+    totalUsers: number;
+    activeUsers: number;
+    employees: number;
+    customers: number;
+    suppliers: number;
+  };
+}
+
+export const UserStats = memo(function UserStats({ stats }: UserStatsProps) {
+  const items: CompactStatItem[] = [
+    { id: "total", label: "Tổng số", value: stats.totalUsers || 0, icon: Users, colorTheme: "dark" },
+    { id: "employees", label: "Nhân viên", value: stats.employees || 0, icon: ShieldCheck, colorTheme: "blue" },
+    { id: "customers", label: "Khách hàng", value: stats.customers || 0, icon: UserPlus, colorTheme: "emerald" },
+    { id: "active", label: "Hoạt động", value: stats.activeUsers || 0, icon: UserCheck, colorTheme: "green" },
+  ];
+
+  return <CompactStatBar items={items} />;
+});

package/src/user/components/user-toolbar.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Plus, Search, LayoutGrid, List, X } from "lucide-react";
+import {
+  Button,
+  Input,
+  Separator,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../ui";
+import { CrudExportButton } from "../../crud/components/crud-export-button";
+
+interface UserToolbarProps {
+  viewMode: "table" | "grid";
+  onViewModeChange: (mode: "table" | "grid") => void;
+  onCreateNew?: () => void;
+  onSearchChange: (value: string) => void;
+  roles?: any[];
+  onRoleChange?: (value: string) => void;
+  permissions?: { create?: boolean; export?: boolean };
+  userType?: string;
+  onUserTypeChange?: (value: string) => void;
+}
+
+export function UserToolbar({
+  viewMode,
+  onViewModeChange,
+  onCreateNew,
+  onSearchChange,
+  roles,
+  onRoleChange,
+  permissions = { create: true, export: true },
+  userType,
+  onUserTypeChange,
+}: UserToolbarProps) {
+  const [localSearch, setLocalSearch] = useState("");
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onSearchChange(localSearch);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [localSearch, onSearchChange]);
+
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      <div className="relative">
+        <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Tìm người dùng..."
+          value={localSearch}
+          onChange={(e) => setLocalSearch(e.target.value)}
+          className="h-9 w-[220px] lg:w-[280px] pl-9 text-xs bg-background border hover:bg-muted/50 transition-colors shadow-sm rounded-md focus-visible:ring-1 focus-visible:ring-primary"
+        />
+        {localSearch && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 rounded-md hover:bg-muted"
+            onClick={() => setLocalSearch("")}
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      <Select value={userType} onValueChange={onUserTypeChange}>
+        <SelectTrigger className="h-9 w-[150px] text-xs bg-background border hover:bg-muted/50 transition-colors shadow-sm rounded-md focus-visible:ring-primary">
+          <SelectValue placeholder="Loại tài khoản" />
+        </SelectTrigger>
+        <SelectContent className="rounded-lg">
+          <SelectItem value="all">Tất cả loại</SelectItem>
+          <SelectItem value="employee">Nhân viên</SelectItem>
+          <SelectItem value="customer">Khách hàng</SelectItem>
+          <SelectItem value="supplier">Nhà cung cấp</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Select onValueChange={onRoleChange}>
+        <SelectTrigger className="h-9 w-[170px] text-xs bg-background border hover:bg-muted/50 transition-colors shadow-sm rounded-md focus-visible:ring-primary">
+          <SelectValue placeholder="Lọc theo vai trò" />
+        </SelectTrigger>
+        <SelectContent className="rounded-lg">
+          <SelectItem value="all">Tất cả vai trò</SelectItem>
+          {roles?.map((role) => (
+            <SelectItem key={role.code} value={role.code}>
+              {role.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <div className="ml-auto flex items-center gap-2">
+        <div className="flex items-center bg-[#f1f5f9] dark:bg-[#181d26] rounded-[6px] p-0.5 border border-[#dddddd] dark:border-[#333840]">
+          <Button
+            variant={viewMode === "table" ? "secondary" : "ghost"}
+            size="sm"
+            className="h-8 w-8 p-0 rounded-md"
+            onClick={() => onViewModeChange("table")}
+          >
+            <List className="h-4 w-4" />
+          </Button>
+          <Button
+            variant={viewMode === "grid" ? "secondary" : "ghost"}
+            size="sm"
+            className="h-8 w-8 p-0 rounded-md"
+            onClick={() => onViewModeChange("grid")}
+          >
+            <LayoutGrid className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {permissions.export && (
+          <div className="[&>button]:h-9 [&>button]:rounded-md [&>button]:shadow-sm [&>button]:bg-background [&>button]:border [&>button]:text-foreground [&>button]:hover:bg-muted/50">
+            <CrudExportButton
+              endpoint="/api/crud/users/export"
+              search={localSearch}
+              canExport={true}
+            />
+          </div>
+        )}
+
+        {permissions.create && (
+          <Button size="sm" className="h-9 px-4 text-xs bg-primary hover:bg-primary/90 text-primary-foreground shadow-sm rounded-md font-medium border-0" onClick={onCreateNew}>
+            <Plus className="h-4 w-4 mr-1.5" />
+            Thêm mới
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,253 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../ui";
+import { cn } from "../../utils";
+import { Mail, Phone, MoreHorizontal, Eye, Edit, User, Briefcase, Store, ShieldCheck, Hash, Building2 } from "lucide-react";
+
+interface UsersCardViewProps {
+  data: any[];
+  onSelect?: (user: any) => void;
+}
+
+// Professional Corporate Palette
+const AVATAR_PALETTE = [
+  { bg: "bg-primary", text: "text-primary-foreground" }, // Primary
+  { bg: "bg-[#059669]", text: "text-white" }, // Emerald
+  { bg: "bg-[#EA580C]", text: "text-white" }, // Orange
+  { bg: "bg-[#7C3AED]", text: "text-white" }, // Violet
+  { bg: "bg-[#0891B2]", text: "text-white" }, // Cyan
+];
+
+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);
+  return AVATAR_PALETTE[charCode % AVATAR_PALETTE.length];
+};
+
+export function UsersCardView({ data, onSelect }: UsersCardViewProps) {
+  if (!data.length) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[400px] border border-[#e2e8f0] rounded-xl bg-white 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>
+        <h3 className="text-base font-semibold text-foreground">
+          Không có dữ liệu
+        </h3>
+        <p className="text-sm text-muted-foreground mt-2 max-w-[300px]">
+          Danh sách người dùng trống. Thử thay đổi bộ lọc hoặc thêm mới.
+        </p>
+      </div>
+    );
+  }
+
+  const getInitials = (name: string | null) => {
+    if (!name) return "U";
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 1);
+  };
+
+  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-[#e2e8f0] bg-white dark:bg-[#0f172a] dark:border-[#334155] 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-[#f8fafc] border-b border-[#e2e8f0] dark:bg-[#1e293b] dark:border-[#334155]">
+                <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
+                    )}
+                  >
+                    {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
+                    className={cn(
+                      "absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 border-2 border-white dark:border-[#0f172a] rounded-full z-10",
+                      isActive ? "bg-[#10b981]" : "bg-[#cbd5e1]"
+                    )}
+                    title={isActive ? "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}
+                    >
+                      {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>
+                    )}
+                    {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>
+                    )}
+                    {(!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>
+                    )}
+                  </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-[#e2e8f0] 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>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+
+              {/* Body */}
+              <div className="p-3 pt-0 flex-1 flex flex-col bg-white dark:bg-[#0f172a]">
+                
+                {/* 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>
+                  </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>
+                  </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 || "—")}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Roles - Compact Format */}
+                {user.roleNames && user.roleNames.length > 0 && (
+                  <div className="mt-auto pt-2.5 border-t border-[#e2e8f0] dark:border-[#334155] 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>
+                )}
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/user/index.ts

@@ -0,0 +1,11 @@
+export * from "./types";
+export * from "./schemas";
+export * from "./profile-page";
+// Export sub-components if needed for granular usage
+export * from "./components/profile-info";
+export * from "./components/dangerous-zone";
+export * from "./components/profile-info-form";
+export * from "./components/delete-account-form";
+// Client page components cause dts build failures - import directly from source
+// export * from "./pages/users-client-page";
+export * from "./user-service";

package/src/user/pages/user-list-page.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import * as React from "react";
+
+import type { EntityConfig, CrudPermissions } from "../../types";
+
+import { Button } from "../../ui";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../ui";
+import { Separator } from "../../ui";
+import { CrudProvider } from "../../crud/components/crud-provider";
+import { CrudTable } from "../../crud/components/crud-table";
+import { CrudExportButton } from "../../crud/components/crud-export-button";
+
+interface User {
+  id: string;
+  name: string | null;
+  email: string;
+  image: string | null;
+  status: string;
+  roleNames: string | null;
+  departmentName: string | null;
+  jobTitleName: string | null;
+  createdAt: Date;
+}
+
+interface UserStats {
+  totalUsers: number;
+  activeUsers: number;
+  inactiveUsers: number;
+  totalRoles: number;
+}
+
+interface UserListPageProps {
+  initialData: {
+    data: User[];
+    page: number;
+    pageSize: number;
+    total: number;
+  };
+  config: EntityConfig;
+  permissions: CrudPermissions;
+  dictionary: any;
+  roles: any[];
+  stats: UserStats;
+}
+
+function UserListPageContent({
+  dictionary,
+  config,
+  stats,
+  initialData,
+  searchParams,
+  roles,
+  handleRoleChange,
+  handleTypeChange,
+}: any) {
+  return (
+    <div className="flex h-full flex-col bg-background">
+      {/* Editorial Signature Banner */}
+      <div className="p-6 pb-2">
+        <div className="p-8 rounded-[16px] bg-slate-900 text-slate-50 shadow-sm relative overflow-hidden">
+          {/* Subtle decoration to emulate Notion's dots or Airtable's color blocks */}
+          <div className="absolute top-0 right-0 -translate-y-12 translate-x-1/3 w-96 h-96 bg-primary/20 rounded-full blur-3xl opacity-50 pointer-events-none" />
+          
+          <div className="relative z-10 flex flex-col xl:flex-row xl:items-end justify-between gap-8">
+            <div className="max-w-2xl">
+              <h1 className="text-3xl font-semibold mb-2 tracking-tight text-white">{config.name}</h1>
+              <p className="text-slate-400 text-sm leading-relaxed max-w-lg">{config.description}</p>
+            </div>
+            
+            <div className="flex flex-wrap items-center gap-x-8 gap-y-6 text-sm">
+              <div className="flex flex-col">
+                <span className="text-slate-400 mb-1 font-medium tracking-wide text-[11px] uppercase">{dictionary.users?.stats?.totalUsers || "Tổng Users"}</span>
+                <span className="text-3xl font-semibold tracking-tight text-white leading-none">{stats.totalUsers}</span>
+              </div>
+              <div className="hidden sm:block w-px h-10 bg-slate-800" />
+              <div className="flex flex-col">
+                <span className="text-slate-400 mb-1 font-medium tracking-wide text-[11px] uppercase flex items-center gap-1.5">
+                  <span className="w-2 h-2 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.5)]"></span>
+                  {dictionary.users?.stats?.activeUsers || "Hoạt động"}
+                </span>
+                <span className="text-3xl font-semibold tracking-tight text-white leading-none">{stats.activeUsers}</span>
+              </div>
+              <div className="hidden sm:block w-px h-10 bg-slate-800" />
+              <div className="flex flex-col">
+                <span className="text-slate-400 mb-1 font-medium tracking-wide text-[11px] uppercase flex items-center gap-1.5">
+                  <span className="w-2 h-2 rounded-full bg-rose-400 shadow-[0_0_8px_rgba(251,113,133,0.5)]"></span>
+                  {dictionary.users?.stats?.inactiveUsers || "Tạm ngưng"}
+                </span>
+                <span className="text-3xl font-semibold tracking-tight text-white leading-none">{stats.inactiveUsers}</span>
+              </div>
+              <div className="hidden sm:block w-px h-10 bg-slate-800" />
+              <div className="flex flex-col">
+                <span className="text-slate-400 mb-1 font-medium tracking-wide text-[11px] uppercase">{dictionary.users?.stats?.totalRoles || "Vai trò"}</span>
+                <span className="text-3xl font-semibold tracking-tight text-white leading-none">{stats.totalRoles}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto px-6 py-4">
+        <div className="flex flex-col gap-4">
+          {/* Action & Filter Rail */}
+          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 bg-muted/20 p-2 rounded-xl border border-border/50">
+            <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+              <Select
+                value={searchParams.get("role") || "all"}
+                onValueChange={handleRoleChange}
+              >
+                <SelectTrigger className="w-[180px] bg-background border-transparent hover:border-border/50 transition-colors rounded-lg shadow-sm">
+                  <SelectValue
+                    placeholder={
+                      dictionary.users?.filters?.filterByRole || "Lọc theo vai trò"
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    {dictionary.common?.all || "Tất cả vai trò"}
+                  </SelectItem>
+                  {roles.map((role: any) => (
+                    <SelectItem key={role.code} value={role.code}>
+                      {role.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Select
+                value={searchParams.get("type") || "all"}
+                onValueChange={handleTypeChange}
+              >
+                <SelectTrigger className="w-[180px] bg-background border-transparent hover:border-border/50 transition-colors rounded-lg shadow-sm">
+                  <SelectValue
+                    placeholder={
+                      dictionary.users?.filters?.filterByType || "Lọc theo loại"
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    {dictionary.common?.all || "Tất cả loại"}
+                  </SelectItem>
+                  <SelectItem value="internal">
+                    {dictionary.users?.types?.internal || "Nội bộ (Internal)"}
+                  </SelectItem>
+                  <SelectItem value="external">
+                    {dictionary.users?.types?.external || "Bên ngoài (External)"}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            
+            <div className="flex items-center gap-2 w-full sm:w-auto shrink-0 pr-1">
+              <CrudExportButton endpoint={config.apiEndpoint} />
+            </div>
+          </div>
+
+          <CrudTable data={initialData} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function UserListPage({
+  initialData,
+  config,
+  permissions,
+  dictionary,
+  roles,
+  stats,
+}: UserListPageProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const handleRoleChange = (role: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (role && role !== "all") {
+      params.set("role", role);
+    } else {
+      params.delete("role");
+    }
+    params.set("page", "1");
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  const handleTypeChange = (type: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (type && type !== "all") {
+      params.set("type", type);
+    } else {
+      params.delete("type");
+    }
+    params.set("page", "1");
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <CrudProvider
+      initialConfig={config}
+      initialPermissions={permissions}
+      initialTranslations={dictionary}
+    >
+      <UserListPageContent
+        dictionary={dictionary}
+        config={config}
+        stats={stats}
+        initialData={initialData}
+        searchParams={searchParams}
+        roles={roles}
+        handleRoleChange={handleRoleChange}
+        handleTypeChange={handleTypeChange}
+      />
+    </CrudProvider>
+  );
+}