@wakastellar/ui 4.0.0 → 4.0.1

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

@@ -1,43 +1,27 @@
-/**
- * @deprecated SP1.relocates — Phase 1
- *
- * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
- * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
- * implementation for backward compatibility during phases 1–3 of the
- * relocation plan; the duplicate will be removed in v4.0.
- *
- * Migration:
- *   - Old: import { ... } from '@wakastellar/ui'
- *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
- *
- * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
- */
 "use client"
 
 import * as React from "react"
+import { Search, UserPlus, MoreHorizontal, Pencil, Trash2, Ban, CheckCircle } from "lucide-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"
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/table"
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../../components/dialog"
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -48,1004 +32,338 @@ import {
   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[]
-}
+import { SidePushLayout } from "../_shared/identity/SidePushLayout"
+import { InviteUserPanel } from "../_shared/identity/InviteUserPanel"
+import { RoleSelect } from "../_shared/identity/RoleSelect"
+import type {
+  UserRecord,
+  RoleDefinition,
+  InvitePayload,
+  UserPatch,
+} from "../_shared/identity/types"
+
+export type {
+  UserRecord,
+  RoleDefinition,
+  InvitePayload,
+  UserPatch,
+} from "../_shared/identity/types"
 
 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 */
+  users: UserRecord[]
+  roles: RoleDefinition[]
+  isLoading?: boolean
+  panelWidth?: number
+  onInvite?: (payload: InvitePayload) => Promise<void> | void
+  onEditUser?: (user: UserRecord, patch: UserPatch) => Promise<void> | void
+  onDeleteUser?: (user: UserRecord) => Promise<void> | void
+  onChangeRole?: (userId: string, roleId: string) => Promise<void> | void
+  onToggleStatus?: (userId: string, active: boolean) => Promise<void> | void
+  searchPlaceholder?: string
+  emptyState?: React.ReactNode
   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" },
-]
+type PanelKey = 'invite' | 'edit' | null
 
-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 },
+function userInitials(u: UserRecord): string {
+  const f = u.firstName?.[0] ?? ''
+  const l = u.lastName?.[0] ?? ''
+  return (f + l).toUpperCase() || u.email[0]?.toUpperCase() || '?'
 }
 
-// ============================================
-// SUB-COMPONENTS
-// ============================================
-
-interface UserAvatarProps {
-  user: UserData
-  size?: "sm" | "md"
+function statusBadgeVariant(status: UserRecord['status']): 'default' | 'secondary' | 'destructive' {
+  if (status === 'active') return 'default'
+  if (status === 'invited') return 'secondary'
+  return 'destructive'
 }
 
-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>
-  )
+function statusLabel(status: UserRecord['status']): string {
+  if (status === 'active') return 'Actif'
+  if (status === 'invited') return 'Invité'
+  return 'Suspendu'
 }
 
-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
-// ============================================
-
+/**
+ * Full-page user management block with invite, edit, and revocation via a push-panel pattern.
+ * All network operations are delegated to callbacks — the component holds no server state.
+ */
 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.",
+  roles,
+  isLoading,
+  panelWidth = 520,
+  onInvite,
+  onEditUser,
+  onDeleteUser,
+  onChangeRole,
+  onToggleStatus,
+  searchPlaceholder = 'Rechercher un utilisateur',
+  emptyState,
   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
+}: WakaUserManagementProps): React.ReactElement {
+  const [search, setSearch] = React.useState('')
+  const [panel, setPanel] = React.useState<PanelKey>(null)
+  const [editTarget, setEditTarget] = React.useState<UserRecord | null>(null)
+  const [deleteTarget, setDeleteTarget] = React.useState<UserRecord | null>(null)
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+  const filtered = React.useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return users
+    return users.filter((u) => {
+      const name = `${u.firstName ?? ''} ${u.lastName ?? ''}`.toLowerCase()
+      return u.email.toLowerCase().includes(q) || name.includes(q)
     })
-  }, [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)
-  }
+  }, [users, search])
 
-  const handleEdit = async (data: UserFormData) => {
-    if (editingUser) {
-      await onEdit?.(editingUser.id, data)
-      setEditingUser(null)
-    }
+  const closePanel = () => {
+    setPanel(null)
+    setEditTarget(null)
   }
 
-  const handleDelete = async () => {
-    if (deletingUser) {
-      await onDelete?.(deletingUser.id)
-      setDeletingUser(null)
+  const handleInvite = async (payload: InvitePayload) => {
+    if (!onInvite) return closePanel()
+    setIsSubmitting(true)
+    try {
+      await onInvite(payload)
+      closePanel()
+    } finally {
+      setIsSubmitting(false)
     }
   }
 
-  const handleBulkDelete = async () => {
-    await onBulkDelete?.(selectedUsers)
-    onSelectionChange?.([])
-    setBulkDeleteOpen(false)
-  }
+  const panelNode =
+    panel === 'invite' ? (
+      <InviteUserPanel
+        roles={roles}
+        onSubmit={handleInvite}
+        onCancel={closePanel}
+        isSubmitting={isSubmitting}
+      />
+    ) : panel === 'edit' && editTarget ? (
+      <EditUserPanel
+        user={editTarget}
+        roles={roles}
+        onSubmit={async (patch) => {
+          if (onEditUser && editTarget) await onEditUser(editTarget, patch)
+          closePanel()
+        }}
+        onCancel={closePanel}
+      />
+    ) : null
 
-  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",
-    })
-  }
+  const panelTitle =
+    panel === 'invite'
+      ? 'Inviter un utilisateur'
+      : panel === 'edit'
+      ? "Modifier l’utilisateur"
+      : undefined
 
   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>
-            )}
+    <SidePushLayout
+      panel={panelNode}
+      panelWidth={panelWidth}
+      panelTitle={panelTitle}
+      onClose={closePanel}
+      className={cn('h-full', className)}
+    >
+      <div className="flex flex-col h-full">
+        <div className="flex items-center justify-between gap-4 border-b p-4">
+          <div className="relative w-full max-w-sm">
+            <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
+            <Input
+              aria-label="Rechercher un utilisateur"
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+            />
           </div>
+          <Button onClick={() => setPanel('invite')}>
+            <UserPlus className="size-4 mr-2" /> Inviter
+          </Button>
+        </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 className="flex-1 overflow-auto">
+          {isLoading ? (
+            <div className="p-6 text-sm text-muted-foreground">Chargement…</div>
+          ) : filtered.length === 0 ? (
+            <div className="p-12 text-center text-sm text-muted-foreground">
+              {emptyState ?? 'Aucun utilisateur'}
             </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 ? (
+          ) : (
+            <Table>
+              <TableHeader>
                 <TableRow>
-                  <TableCell
-                    colSpan={onSelectionChange ? 7 : 6}
-                    className="text-center py-8"
-                  >
-                    <Loader2 className="h-6 w-6 animate-spin mx-auto" />
-                  </TableCell>
+                  <TableHead>Utilisateur</TableHead>
+                  <TableHead>Rôle</TableHead>
+                  <TableHead>Statut</TableHead>
+                  <TableHead>Dernière connexion</TableHead>
+                  <TableHead className="w-12" />
                 </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>
-                    )}
+              </TableHeader>
+              <TableBody>
+                {filtered.map((u) => (
+                  <TableRow key={u.id}>
                     <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>
+                        <Avatar className="size-8">
+                          {u.avatarUrl && <AvatarImage src={u.avatarUrl} alt="" />}
+                          <AvatarFallback>{userInitials(u)}</AvatarFallback>
+                        </Avatar>
+                        <div className="flex flex-col">
+                          <span className="font-medium">
+                            {u.firstName || u.lastName
+                              ? `${u.firstName ?? ''} ${u.lastName ?? ''}`.trim()
+                              : u.email}
+                          </span>
+                          {(u.firstName || u.lastName) && (
+                            <span className="text-xs text-muted-foreground">{u.email}</span>
+                          )}
                         </div>
                       </div>
                     </TableCell>
                     <TableCell>
-                      <RoleBadge role={user.role} roles={roles} />
+                      <RoleSelect
+                        value={u.roleId}
+                        roles={roles}
+                        onChange={(roleId) => onChangeRole?.(u.id, roleId)}
+                        disabled={!onChangeRole}
+                        triggerClassName="w-36"
+                      />
                     </TableCell>
                     <TableCell>
-                      <StatusIndicator status={user.status} />
-                    </TableCell>
-                    <TableCell className="text-muted-foreground">
-                      {formatDate(user.createdAt)}
+                      <Badge variant={statusBadgeVariant(u.status)}>
+                        {statusLabel(u.status)}
+                      </Badge>
                     </TableCell>
-                    <TableCell className="text-muted-foreground">
-                      {user.lastLogin ? formatDate(user.lastLogin) : "-"}
+                    <TableCell className="text-sm text-muted-foreground">
+                      {u.lastLoginAt ? u.lastLoginAt.toLocaleDateString() : '—'}
                     </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
-                        }
-                      />
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon" aria-label="Actions">
+                            <MoreHorizontal className="size-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={() => {
+                              setEditTarget(u)
+                              setPanel('edit')
+                            }}
+                          >
+                            <Pencil className="size-4 mr-2" /> Modifier
+                          </DropdownMenuItem>
+                          {onToggleStatus && (
+                            <DropdownMenuItem
+                              onClick={() => onToggleStatus(u.id, u.status !== 'active')}
+                            >
+                              {u.status === 'active' ? (
+                                <>
+                                  <Ban className="size-4 mr-2" /> Suspendre
+                                </>
+                              ) : (
+                                <>
+                                  <CheckCircle className="size-4 mr-2" /> Activer
+                                </>
+                              )}
+                            </DropdownMenuItem>
+                          )}
+                          {onDeleteUser && (
+                            <>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                onClick={() => setDeleteTarget(u)}
+                                className="text-destructive focus:text-destructive"
+                              >
+                                <Trash2 className="size-4 mr-2" /> Supprimer
+                              </DropdownMenuItem>
+                            </>
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </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>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+      </div>
 
-      {/* Bulk delete confirmation */}
-      <AlertDialog open={bulkDeleteOpen} onOpenChange={setBulkDeleteOpen}>
+      <AlertDialog open={!!deleteTarget} onOpenChange={(o) => !o && setDeleteTarget(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Supprimer les utilisateurs ?</AlertDialogTitle>
+            <AlertDialogTitle>Supprimer cet utilisateur ?</AlertDialogTitle>
             <AlertDialogDescription>
-              Êtes-vous sûr de vouloir supprimer {selectedUsers.length} utilisateur(s) ?
-              Cette action est irréversible.
+              Cette action est définitive et révoque tous les accès de{' '}
+              {deleteTarget?.email}.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Annuler</AlertDialogCancel>
             <AlertDialogAction
-              onClick={handleBulkDelete}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={async () => {
+                if (deleteTarget && onDeleteUser) await onDeleteUser(deleteTarget)
+                setDeleteTarget(null)
+              }}
             >
               Supprimer
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </SidePushLayout>
   )
 }
 
-// ============================================
-// 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"),
-  },
-]
+interface EditUserPanelProps {
+  user: UserRecord
+  roles: RoleDefinition[]
+  onSubmit: (patch: UserPatch) => Promise<void> | void
+  onCancel: () => void
+}
 
-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" },
-]
+function EditUserPanel({ user, roles, onSubmit, onCancel }: EditUserPanelProps): React.ReactElement {
+  const [firstName, setFirstName] = React.useState(user.firstName ?? '')
+  const [lastName, setLastName] = React.useState(user.lastName ?? '')
+  const [roleId, setRoleId] = React.useState(user.roleId)
 
-export default WakaUserManagement
+  return (
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault()
+        await onSubmit({ firstName, lastName, roleId })
+      }}
+      className="flex flex-col gap-4 p-4 h-full"
+    >
+      <div className="space-y-2">
+        <label className="text-sm font-medium" htmlFor="edit-fn">
+          Prénom
+        </label>
+        <Input id="edit-fn" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium" htmlFor="edit-ln">
+          Nom
+        </label>
+        <Input id="edit-ln" value={lastName} onChange={(e) => setLastName(e.target.value)} />
+      </div>
+      <div className="space-y-2">
+        <label className="text-sm font-medium" htmlFor="edit-role">
+          Rôle
+        </label>
+        <RoleSelect id="edit-role" value={roleId} onChange={setRoleId} roles={roles} />
+      </div>
+      <div className="mt-auto flex justify-end gap-2 pt-4 border-t">
+        <Button type="button" variant="ghost" onClick={onCancel}>
+          Annuler
+        </Button>
+        <Button type="submit">Enregistrer</Button>
+      </div>
+    </form>
+  )
+}