"use client" /** * @name Table View 05 * @description User management table with avatars and role-based actions. * Admin dashboard table with user status, role badges, and action dropdown. * * @slots table-view, table-view-container, table-view-card, table-view-header, * table-view-title, table-view-add-btn, table-view-table-wrapper, * table-view-table, table-view-thead, table-view-th, table-view-tbody, * table-view-row, table-view-cell, table-view-user-info, table-view-avatar, * table-view-avatar-fallback, table-view-user-name, table-view-user-email, * table-view-role-badge, table-view-status-indicator, table-view-actions, * table-view-action-btn * @variant user-management * * @dependencies lucide-react * @registryDependencies card button avatar badge */ import * as React from "react" import { Plus, MoreVertical, Pencil, Trash2, ShieldCheck, User } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/ui/card" import { Button } from "@/registry/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type UserRole = "admin" | "editor" | "viewer" type UserStatus = "active" | "inactive" | "pending" interface UserRow { id: string name: string email: string avatar?: string role: UserRole status: UserStatus lastLogin: string joinedDate: string } interface TableView05Props { title?: string users?: UserRow[] onAddUser?: () => void onEditUser?: (id: string) => void onDeleteUser?: (id: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultUsers: UserRow[] = [ { id: "user-1", name: "Sarah Johnson", email: "sarah@example.com", role: "admin", status: "active", lastLogin: "2 hours ago", joinedDate: "Jan 15, 2024" }, { id: "user-2", name: "Mike Chen", email: "mike@example.com", role: "editor", status: "active", lastLogin: "5 mins ago", joinedDate: "Feb 3, 2024" }, { id: "user-3", name: "Emily Davis", email: "emily@example.com", role: "viewer", status: "inactive", lastLogin: "3 days ago", joinedDate: "Mar 22, 2024" }, { id: "user-4", name: "Chris Wilson", email: "chris@example.com", role: "editor", status: "pending", lastLogin: "Never", joinedDate: "Apr 10, 2024" }, { id: "user-5", name: "Alex Thompson", email: "alex@example.com", role: "viewer", status: "active", lastLogin: "1 day ago", joinedDate: "Apr 15, 2024" }, ] const roleStyles: Record = { admin: "bg-primary text-primary-foreground", editor: "bg-muted text-foreground", viewer: "bg-muted text-muted-foreground", } const statusStyles: Record = { active: { bg: "bg-green-100", dot: "bg-green-500" }, inactive: { bg: "bg-muted", dot: "bg-muted-foreground" }, pending: { bg: "bg-yellow-100", dot: "bg-yellow-500" }, } const roleIcons: Record = { admin: ShieldCheck, editor: Pencil, viewer: User, } // ============================================================================ // COMPONENT // ============================================================================ function TableView05({ title = "User Management", users = defaultUsers, onAddUser, onEditUser, onDeleteUser, className, idBase = "table-view-05", }: TableView05Props) { const titleId = `${idBase}-title` const [openMenu, setOpenMenu] = React.useState(null) return (

{title}

{users.map((user) => { const RoleIcon = roleIcons[user.role] return ( ) })}

User	Role	Status	Last Login	Joined
{user.name.split(" ").map(n => n[0]).join("")} {user.name} {user.email}		{user.status}	{user.lastLogin}	{user.joinedDate}	{openMenu === user.id && ( )}

) } export default TableView05 export { TableView05, type TableView05Props }