"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Search, MoreHorizontal, Download, Filter, ChevronLeft, ChevronRight, Trash2, Mail, ShieldCheck, AlertCircle, ArrowUpDown } from "lucide-react"; interface UserData { id: string; name: string; email: string; role: string; status: "active" | "pending" | "inactive"; avatar: string; lastActive: string; } const initialData: UserData[] = [ { id: "1", name: "Helena Vance", email: "h.vance@aether.com", role: "Principal Architect", status: "active", avatar: "https://api.dicebear.com/8.x/notionists/svg?seed=Helena", lastActive: "2 mins ago" }, { id: "2", name: "Julian Thorne", email: "j.thorne@aether.com", role: "Security Lead", status: "active", avatar: "https://api.dicebear.com/8.x/notionists/svg?seed=Julian", lastActive: "5 hours ago" }, { id: "3", name: "Marcus Krauss", email: "m.krauss@aether.com", role: "Fullstack Dev", status: "pending", avatar: "https://api.dicebear.com/8.x/notionists/svg?seed=Marcus", lastActive: "1 day ago" }, { id: "4", name: "Seraphina Moon", email: "s.moon@aether.com", role: "Product Designer", status: "active", avatar: "https://api.dicebear.com/8.x/notionists/svg?seed=Seraphina", lastActive: "Just now" }, { id: "5", name: "Dorian Gray", email: "d.gray@aether.com", role: "QA Engineer", status: "inactive", avatar: "https://api.dicebear.com/8.x/notionists/svg?seed=Dorian", lastActive: "3 days ago" }, ]; export default function CheckboxSelectionDataTable() { const [selectedRows, setSelectedRows] = useState>(new Set()); const [searchQuery, setSearchQuery] = useState(""); const filteredData = useMemo(() => { return initialData.filter(user => user.name.toLowerCase().includes(searchQuery.toLowerCase()) || user.email.toLowerCase().includes(searchQuery.toLowerCase()) ); }, [searchQuery]); const toggleAll = () => { if (selectedRows.size === filteredData.length) { setSelectedRows(new Set()); } else { setSelectedRows(new Set(filteredData.map(user => user.id))); } }; const toggleRow = (id: string) => { const newSelected = new Set(selectedRows); if (newSelected.has(id)) { newSelected.delete(id); } else { newSelected.add(id); } setSelectedRows(newSelected); }; const isAllSelected = filteredData.length > 0 && selectedRows.size === filteredData.length; const isSomeSelected = selectedRows.size > 0 && selectedRows.size < filteredData.length; return (

Operator Management.

Manage and audit decentralized network nodes.

setSearchQuery(e.target.value)} className="w-full bg-white dark:bg-black/20 border border-neutral-200 dark:border-white/10 rounded-2xl py-3 pl-12 pr-4 text-xs font-bold text-neutral-900 dark:text-white outline-none focus:border-blue-600/50 transition-all" />

{selectedRows.size > 0 ? ( {selectedRows.size} selected ) : (

)}

{filteredData.map((user) => { const isSelected = selectedRows.has(user.id); return ( ); })}

	Operator	Role	Status	Last Active
	{user.name} {user.email}	{user.role}	{user.status === 'active' && } {user.status === 'pending' && } {user.status}	{user.lastActive}

Showing {filteredData.length} of 48 operators

); }