@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/user-management/index.tsx

@@ -0,0 +1,1037 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Label } from "../../components/label"
+import { Badge } from "../../components/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar"
+import { Checkbox } from "../../components/checkbox"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../components/alert-dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/table"
+import {
+  Users,
+  UserPlus,
+  Search,
+  MoreHorizontal,
+  Edit,
+  Trash2,
+  Shield,
+  ShieldCheck,
+  ShieldAlert,
+  Mail,
+  Ban,
+  CheckCircle,
+  XCircle,
+  Key,
+  Loader2,
+  Filter,
+  Download,
+  RefreshCw,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type UserRole = "admin" | "moderator" | "user" | "guest"
+export type UserStatus = "active" | "inactive" | "pending" | "banned"
+
+export interface UserPermission {
+  id: string
+  name: string
+  description?: string
+  category?: string
+}
+
+export interface UserData {
+  id: string
+  email: string
+  displayName: string
+  firstName?: string
+  lastName?: string
+  avatarUrl?: string
+  role: UserRole
+  status: UserStatus
+  permissions?: string[]
+  createdAt: Date | string
+  lastLogin?: Date | string
+  metadata?: Record<string, unknown>
+}
+
+export interface UserFormData {
+  email: string
+  displayName: string
+  firstName?: string
+  lastName?: string
+  role: UserRole
+  status: UserStatus
+  permissions?: string[]
+}
+
+export interface WakaUserManagementProps {
+  /** Liste des utilisateurs */
+  users: UserData[]
+  /** Rôles disponibles */
+  roles?: { value: UserRole; label: string; color?: string }[]
+  /** Permissions disponibles */
+  permissions?: UserPermission[]
+  /** Utilisateurs sélectionnés */
+  selectedUsers?: string[]
+  /** Callback sélection */
+  onSelectionChange?: (userIds: string[]) => void
+  /** Callback création */
+  onCreate?: (user: UserFormData) => void | Promise<void>
+  /** Callback modification */
+  onEdit?: (userId: string, data: Partial<UserFormData>) => void | Promise<void>
+  /** Callback suppression */
+  onDelete?: (userId: string) => void | Promise<void>
+  /** Callback suppression multiple */
+  onBulkDelete?: (userIds: string[]) => void | Promise<void>
+  /** Callback changement de rôle */
+  onRoleChange?: (userId: string, role: UserRole) => void | Promise<void>
+  /** Callback changement de statut */
+  onStatusChange?: (userId: string, status: UserStatus) => void | Promise<void>
+  /** Callback réinitialisation mot de passe */
+  onResetPassword?: (userId: string) => void | Promise<void>
+  /** Callback export */
+  onExport?: () => void
+  /** Callback rafraîchissement */
+  onRefresh?: () => void
+  /** En cours de chargement */
+  loading?: boolean
+  /** En cours d'action */
+  actionLoading?: boolean
+  /** Recherche */
+  searchQuery?: string
+  /** Callback recherche */
+  onSearchChange?: (query: string) => void
+  /** Filtre par rôle */
+  roleFilter?: UserRole | "all"
+  /** Callback filtre rôle */
+  onRoleFilterChange?: (role: UserRole | "all") => void
+  /** Filtre par statut */
+  statusFilter?: UserStatus | "all"
+  /** Callback filtre statut */
+  onStatusFilterChange?: (status: UserStatus | "all") => void
+  /** Afficher les actions en masse */
+  showBulkActions?: boolean
+  /** Afficher le bouton création */
+  showCreateButton?: boolean
+  /** Titre */
+  title?: string
+  /** Description */
+  description?: string
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// CONSTANTS
+// ============================================
+
+const defaultRoles: { value: UserRole; label: string; color: string }[] = [
+  { value: "admin", label: "Administrateur", color: "destructive" },
+  { value: "moderator", label: "Modérateur", color: "warning" },
+  { value: "user", label: "Utilisateur", color: "default" },
+  { value: "guest", label: "Invité", color: "secondary" },
+]
+
+const statusConfig: Record<UserStatus, { label: string; color: string; icon: React.ElementType }> = {
+  active: { label: "Actif", color: "bg-green-500", icon: CheckCircle },
+  inactive: { label: "Inactif", color: "bg-gray-500", icon: XCircle },
+  pending: { label: "En attente", color: "bg-yellow-500", icon: Mail },
+  banned: { label: "Banni", color: "bg-red-500", icon: Ban },
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface UserAvatarProps {
+  user: UserData
+  size?: "sm" | "md"
+}
+
+function UserAvatar({ user, size = "sm" }: UserAvatarProps) {
+  const sizeClasses = {
+    sm: "h-8 w-8",
+    md: "h-10 w-10",
+  }
+
+  const initials = user.displayName
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+
+  return (
+    <Avatar className={sizeClasses[size]}>
+      <AvatarImage src={user.avatarUrl} alt={user.displayName} />
+      <AvatarFallback className="text-xs">{initials}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+interface RoleBadgeProps {
+  role: UserRole
+  roles?: { value: UserRole; label: string; color?: string }[]
+}
+
+function RoleBadge({ role, roles = defaultRoles }: RoleBadgeProps) {
+  const roleConfig = roles.find((r) => r.value === role)
+  const Icon = role === "admin" ? ShieldAlert : role === "moderator" ? ShieldCheck : Shield
+
+  return (
+    <Badge variant={roleConfig?.color as "default" | "secondary" | "destructive" | "outline"}>
+      <Icon className="h-3 w-3 mr-1" />
+      {roleConfig?.label || role}
+    </Badge>
+  )
+}
+
+interface StatusIndicatorProps {
+  status: UserStatus
+}
+
+function StatusIndicator({ status }: StatusIndicatorProps) {
+  const config = statusConfig[status]
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className={cn("h-2 w-2 rounded-full", config.color)} />
+      <span className="text-sm">{config.label}</span>
+    </div>
+  )
+}
+
+interface UserFormDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  user?: UserData
+  roles: { value: UserRole; label: string; color?: string }[]
+  permissions?: UserPermission[]
+  onSubmit: (data: UserFormData) => void | Promise<void>
+  loading?: boolean
+}
+
+function UserFormDialog({
+  open,
+  onOpenChange,
+  user,
+  roles,
+  permissions,
+  onSubmit,
+  loading,
+}: UserFormDialogProps) {
+  const [formData, setFormData] = React.useState<UserFormData>({
+    email: "",
+    displayName: "",
+    firstName: "",
+    lastName: "",
+    role: "user",
+    status: "pending",
+    permissions: [],
+  })
+
+  React.useEffect(() => {
+    if (user) {
+      setFormData({
+        email: user.email,
+        displayName: user.displayName,
+        firstName: user.firstName || "",
+        lastName: user.lastName || "",
+        role: user.role,
+        status: user.status,
+        permissions: user.permissions || [],
+      })
+    } else {
+      setFormData({
+        email: "",
+        displayName: "",
+        firstName: "",
+        lastName: "",
+        role: "user",
+        status: "pending",
+        permissions: [],
+      })
+    }
+  }, [user, open])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await onSubmit(formData)
+    onOpenChange(false)
+  }
+
+  const handlePermissionToggle = (permissionId: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      permissions: prev.permissions?.includes(permissionId)
+        ? prev.permissions.filter((p) => p !== permissionId)
+        : [...(prev.permissions || []), permissionId],
+    }))
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>
+              {user ? "Modifier l'utilisateur" : "Créer un utilisateur"}
+            </DialogTitle>
+            <DialogDescription>
+              {user
+                ? "Modifiez les informations de l'utilisateur."
+                : "Remplissez les informations pour créer un nouvel utilisateur."}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="firstName">Prénom</Label>
+                <Input
+                  id="firstName"
+                  value={formData.firstName}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, firstName: e.target.value }))
+                  }
+                  placeholder="Jean"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastName">Nom</Label>
+                <Input
+                  id="lastName"
+                  value={formData.lastName}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, lastName: e.target.value }))
+                  }
+                  placeholder="Dupont"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="displayName">Nom d'affichage *</Label>
+              <Input
+                id="displayName"
+                value={formData.displayName}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, displayName: e.target.value }))
+                }
+                placeholder="Jean Dupont"
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email *</Label>
+              <Input
+                id="email"
+                type="email"
+                value={formData.email}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, email: e.target.value }))
+                }
+                placeholder="jean@exemple.com"
+                required
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="role">Rôle</Label>
+                <Select
+                  value={formData.role}
+                  onValueChange={(value) =>
+                    setFormData((prev) => ({ ...prev, role: value as UserRole }))
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {roles.map((role) => (
+                      <SelectItem key={role.value} value={role.value}>
+                        {role.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="status">Statut</Label>
+                <Select
+                  value={formData.status}
+                  onValueChange={(value) =>
+                    setFormData((prev) => ({ ...prev, status: value as UserStatus }))
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(statusConfig).map(([value, config]) => (
+                      <SelectItem key={value} value={value}>
+                        {config.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {permissions && permissions.length > 0 && (
+              <div className="space-y-2">
+                <Label>Permissions</Label>
+                <div className="border rounded-md p-3 space-y-2 max-h-[150px] overflow-y-auto">
+                  {permissions.map((permission) => (
+                    <div key={permission.id} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={permission.id}
+                        checked={formData.permissions?.includes(permission.id)}
+                        onCheckedChange={() => handlePermissionToggle(permission.id)}
+                      />
+                      <label
+                        htmlFor={permission.id}
+                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {permission.name}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Annuler
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {user ? "Enregistrer" : "Créer"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+interface UserActionsMenuProps {
+  user: UserData
+  onEdit?: () => void
+  onDelete?: () => void
+  onResetPassword?: () => void
+  onStatusChange?: (status: UserStatus) => void
+  onRoleChange?: (role: UserRole) => void
+  roles: { value: UserRole; label: string }[]
+}
+
+function UserActionsMenu({
+  user,
+  onEdit,
+  onDelete,
+  onResetPassword,
+  onStatusChange,
+  onRoleChange,
+  roles,
+}: UserActionsMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {onEdit && (
+          <DropdownMenuItem onClick={onEdit}>
+            <Edit className="mr-2 h-4 w-4" />
+            Modifier
+          </DropdownMenuItem>
+        )}
+        {onResetPassword && (
+          <DropdownMenuItem onClick={onResetPassword}>
+            <Key className="mr-2 h-4 w-4" />
+            Réinitialiser le mot de passe
+          </DropdownMenuItem>
+        )}
+
+        {onRoleChange && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Changer le rôle</DropdownMenuLabel>
+            {roles.map((role) => (
+              <DropdownMenuItem
+                key={role.value}
+                onClick={() => onRoleChange(role.value)}
+                disabled={user.role === role.value}
+              >
+                {role.label}
+              </DropdownMenuItem>
+            ))}
+          </>
+        )}
+
+        {onStatusChange && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Changer le statut</DropdownMenuLabel>
+            {Object.entries(statusConfig).map(([value, config]) => (
+              <DropdownMenuItem
+                key={value}
+                onClick={() => onStatusChange(value as UserStatus)}
+                disabled={user.status === value}
+              >
+                {config.label}
+              </DropdownMenuItem>
+            ))}
+          </>
+        )}
+
+        {onDelete && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={onDelete}
+              className="text-destructive focus:text-destructive"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Supprimer
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaUserManagement({
+  users,
+  roles = defaultRoles,
+  permissions,
+  selectedUsers = [],
+  onSelectionChange,
+  onCreate,
+  onEdit,
+  onDelete,
+  onBulkDelete,
+  onRoleChange,
+  onStatusChange,
+  onResetPassword,
+  onExport,
+  onRefresh,
+  loading = false,
+  actionLoading = false,
+  searchQuery = "",
+  onSearchChange,
+  roleFilter = "all",
+  onRoleFilterChange,
+  statusFilter = "all",
+  onStatusFilterChange,
+  showBulkActions = true,
+  showCreateButton = true,
+  title = "Gestion des utilisateurs",
+  description = "Gérez les utilisateurs, leurs rôles et permissions.",
+  className,
+}: WakaUserManagementProps) {
+  const [createDialogOpen, setCreateDialogOpen] = React.useState(false)
+  const [editingUser, setEditingUser] = React.useState<UserData | null>(null)
+  const [deletingUser, setDeletingUser] = React.useState<UserData | null>(null)
+  const [bulkDeleteOpen, setBulkDeleteOpen] = React.useState(false)
+
+  const filteredUsers = React.useMemo(() => {
+    return users.filter((user) => {
+      // Search filter
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase()
+        const matchesSearch =
+          user.displayName.toLowerCase().includes(query) ||
+          user.email.toLowerCase().includes(query)
+        if (!matchesSearch) return false
+      }
+
+      // Role filter
+      if (roleFilter !== "all" && user.role !== roleFilter) {
+        return false
+      }
+
+      // Status filter
+      if (statusFilter !== "all" && user.status !== statusFilter) {
+        return false
+      }
+
+      return true
+    })
+  }, [users, searchQuery, roleFilter, statusFilter])
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      onSelectionChange?.(filteredUsers.map((u) => u.id))
+    } else {
+      onSelectionChange?.([])
+    }
+  }
+
+  const handleSelectUser = (userId: string, checked: boolean) => {
+    if (checked) {
+      onSelectionChange?.([...selectedUsers, userId])
+    } else {
+      onSelectionChange?.(selectedUsers.filter((id) => id !== userId))
+    }
+  }
+
+  const handleCreate = async (data: UserFormData) => {
+    await onCreate?.(data)
+  }
+
+  const handleEdit = async (data: UserFormData) => {
+    if (editingUser) {
+      await onEdit?.(editingUser.id, data)
+      setEditingUser(null)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (deletingUser) {
+      await onDelete?.(deletingUser.id)
+      setDeletingUser(null)
+    }
+  }
+
+  const handleBulkDelete = async () => {
+    await onBulkDelete?.(selectedUsers)
+    onSelectionChange?.([])
+    setBulkDeleteOpen(false)
+  }
+
+  const formatDate = (date: Date | string): string => {
+    const d = typeof date === "string" ? new Date(date) : date
+    return d.toLocaleDateString("fr-FR", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    })
+  }
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
+            <Users className="h-6 w-6" />
+            {title}
+          </h1>
+          {description && (
+            <p className="text-muted-foreground mt-1">{description}</p>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {onRefresh && (
+            <Button variant="outline" size="sm" onClick={onRefresh} disabled={loading}>
+              <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            </Button>
+          )}
+          {onExport && (
+            <Button variant="outline" size="sm" onClick={onExport}>
+              <Download className="mr-2 h-4 w-4" />
+              Exporter
+            </Button>
+          )}
+          {showCreateButton && onCreate && (
+            <Button size="sm" onClick={() => setCreateDialogOpen(true)}>
+              <UserPlus className="mr-2 h-4 w-4" />
+              Ajouter
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Filters */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex flex-col gap-4 md:flex-row md:items-center">
+            {/* Search */}
+            {onSearchChange && (
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Rechercher un utilisateur..."
+                  value={searchQuery}
+                  onChange={(e) => onSearchChange(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+            )}
+
+            {/* Role filter */}
+            {onRoleFilterChange && (
+              <Select
+                value={roleFilter}
+                onValueChange={(value) => onRoleFilterChange(value as UserRole | "all")}
+              >
+                <SelectTrigger className="w-[180px]">
+                  <Filter className="mr-2 h-4 w-4" />
+                  <SelectValue placeholder="Rôle" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tous les rôles</SelectItem>
+                  {roles.map((role) => (
+                    <SelectItem key={role.value} value={role.value}>
+                      {role.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+
+            {/* Status filter */}
+            {onStatusFilterChange && (
+              <Select
+                value={statusFilter}
+                onValueChange={(value) => onStatusFilterChange(value as UserStatus | "all")}
+              >
+                <SelectTrigger className="w-[180px]">
+                  <Filter className="mr-2 h-4 w-4" />
+                  <SelectValue placeholder="Statut" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Tous les statuts</SelectItem>
+                  {Object.entries(statusConfig).map(([value, config]) => (
+                    <SelectItem key={value} value={value}>
+                      {config.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {/* Bulk actions */}
+          {showBulkActions && selectedUsers.length > 0 && (
+            <div className="flex items-center gap-4 mt-4 p-3 bg-muted rounded-lg">
+              <span className="text-sm font-medium">
+                {selectedUsers.length} utilisateur(s) sélectionné(s)
+              </span>
+              {onBulkDelete && (
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={() => setBulkDeleteOpen(true)}
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Supprimer
+                </Button>
+              )}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onSelectionChange?.([])}
+              >
+                Désélectionner
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Users table */}
+      <Card>
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {onSelectionChange && (
+                  <TableHead className="w-[50px]">
+                    <Checkbox
+                      checked={
+                        filteredUsers.length > 0 &&
+                        selectedUsers.length === filteredUsers.length
+                      }
+                      onCheckedChange={handleSelectAll}
+                    />
+                  </TableHead>
+                )}
+                <TableHead>Utilisateur</TableHead>
+                <TableHead>Rôle</TableHead>
+                <TableHead>Statut</TableHead>
+                <TableHead>Inscrit le</TableHead>
+                <TableHead>Dernière connexion</TableHead>
+                <TableHead className="w-[50px]"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={onSelectionChange ? 7 : 6}
+                    className="text-center py-8"
+                  >
+                    <Loader2 className="h-6 w-6 animate-spin mx-auto" />
+                  </TableCell>
+                </TableRow>
+              ) : filteredUsers.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={onSelectionChange ? 7 : 6}
+                    className="text-center py-8 text-muted-foreground"
+                  >
+                    Aucun utilisateur trouvé
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredUsers.map((user) => (
+                  <TableRow key={user.id}>
+                    {onSelectionChange && (
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedUsers.includes(user.id)}
+                          onCheckedChange={(checked) =>
+                            handleSelectUser(user.id, checked as boolean)
+                          }
+                        />
+                      </TableCell>
+                    )}
+                    <TableCell>
+                      <div className="flex items-center gap-3">
+                        <UserAvatar user={user} />
+                        <div>
+                          <div className="font-medium">{user.displayName}</div>
+                          <div className="text-sm text-muted-foreground">
+                            {user.email}
+                          </div>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <RoleBadge role={user.role} roles={roles} />
+                    </TableCell>
+                    <TableCell>
+                      <StatusIndicator status={user.status} />
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {formatDate(user.createdAt)}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {user.lastLogin ? formatDate(user.lastLogin) : "-"}
+                    </TableCell>
+                    <TableCell>
+                      <UserActionsMenu
+                        user={user}
+                        roles={roles}
+                        onEdit={onEdit ? () => setEditingUser(user) : undefined}
+                        onDelete={onDelete ? () => setDeletingUser(user) : undefined}
+                        onResetPassword={
+                          onResetPassword ? () => onResetPassword(user.id) : undefined
+                        }
+                        onRoleChange={
+                          onRoleChange
+                            ? (role) => onRoleChange(user.id, role)
+                            : undefined
+                        }
+                        onStatusChange={
+                          onStatusChange
+                            ? (status) => onStatusChange(user.id, status)
+                            : undefined
+                        }
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* Create dialog */}
+      <UserFormDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        roles={roles}
+        permissions={permissions}
+        onSubmit={handleCreate}
+        loading={actionLoading}
+      />
+
+      {/* Edit dialog */}
+      <UserFormDialog
+        open={!!editingUser}
+        onOpenChange={(open) => !open && setEditingUser(null)}
+        user={editingUser || undefined}
+        roles={roles}
+        permissions={permissions}
+        onSubmit={handleEdit}
+        loading={actionLoading}
+      />
+
+      {/* Delete confirmation */}
+      <AlertDialog open={!!deletingUser} onOpenChange={(open) => !open && setDeletingUser(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Supprimer l'utilisateur ?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Êtes-vous sûr de vouloir supprimer {deletingUser?.displayName} ?
+              Cette action est irréversible.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Annuler</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Supprimer
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Bulk delete confirmation */}
+      <AlertDialog open={bulkDeleteOpen} onOpenChange={setBulkDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Supprimer les utilisateurs ?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Êtes-vous sûr de vouloir supprimer {selectedUsers.length} utilisateur(s) ?
+              Cette action est irréversible.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Annuler</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleBulkDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Supprimer
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultUsers: UserData[] = [
+  {
+    id: "1",
+    email: "admin@exemple.com",
+    displayName: "Admin User",
+    firstName: "Admin",
+    lastName: "User",
+    role: "admin",
+    status: "active",
+    createdAt: new Date("2023-01-01"),
+    lastLogin: new Date("2024-01-15"),
+  },
+  {
+    id: "2",
+    email: "moderator@exemple.com",
+    displayName: "Marie Modérateur",
+    firstName: "Marie",
+    lastName: "Modérateur",
+    role: "moderator",
+    status: "active",
+    createdAt: new Date("2023-03-15"),
+    lastLogin: new Date("2024-01-14"),
+  },
+  {
+    id: "3",
+    email: "user@exemple.com",
+    displayName: "Jean Utilisateur",
+    firstName: "Jean",
+    lastName: "Utilisateur",
+    role: "user",
+    status: "active",
+    createdAt: new Date("2023-06-01"),
+    lastLogin: new Date("2024-01-10"),
+  },
+  {
+    id: "4",
+    email: "pending@exemple.com",
+    displayName: "Paul Pending",
+    firstName: "Paul",
+    lastName: "Pending",
+    role: "user",
+    status: "pending",
+    createdAt: new Date("2024-01-10"),
+  },
+  {
+    id: "5",
+    email: "banned@exemple.com",
+    displayName: "Bob Banni",
+    firstName: "Bob",
+    lastName: "Banni",
+    role: "guest",
+    status: "banned",
+    createdAt: new Date("2023-09-01"),
+    lastLogin: new Date("2023-12-01"),
+  },
+]
+
+export const defaultPermissions: UserPermission[] = [
+  { id: "read", name: "Lecture", description: "Accès en lecture", category: "Base" },
+  { id: "write", name: "Écriture", description: "Accès en écriture", category: "Base" },
+  { id: "delete", name: "Suppression", description: "Accès suppression", category: "Base" },
+  { id: "admin", name: "Administration", description: "Accès admin", category: "Admin" },
+  { id: "users", name: "Gestion utilisateurs", description: "Gérer les utilisateurs", category: "Admin" },
+]
+
+export default WakaUserManagement