[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { AccessControlDashboard } from "@/components/access-control-dashboard" export default function Page() { return } [V0_FILE]typescriptreact:file="components/access-control-dashboard.tsx" isEdit="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Progress } from "@/components/ui/progress" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Line, LineChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Bar, BarChart } from "recharts" import { LayoutDashboard, Users, Lock, Activity, Settings, Shield, UserPlus, Search, TrendingUp, TrendingDown, Bell, Plus, MoreHorizontal, } from "lucide-react" // Mock data const mockUsers = [ { id: 1, name: "John Doe", email: "john@company.com", department: "Engineering", status: "active", lastAccess: "2024-01-15 09:30", fingerprintId: "FP001", avatar: "/placeholder.svg?height=40&width=40", accessCount: 45, trend: "up", }, { id: 2, name: "Jane Smith", email: "jane@company.com", department: "Marketing", status: "active", lastAccess: "2024-01-15 08:45", fingerprintId: "FP002", avatar: "/placeholder.svg?height=40&width=40", accessCount: 32, trend: "up", }, { id: 3, name: "Mike Johnson", email: "mike@company.com", department: "Sales", status: "inactive", lastAccess: "2024-01-14 17:20", fingerprintId: "FP003", avatar: "/placeholder.svg?height=40&width=40", accessCount: 18, trend: "down", }, { id: 4, name: "Sarah Wilson", email: "sarah@company.com", department: "HR", status: "active", lastAccess: "2024-01-15 10:15", fingerprintId: "FP004", avatar: "/placeholder.svg?height=40&width=40", accessCount: 28, trend: "up", }, ] const mockDevices = [ { id: 1, name: "Main Entrance", type: "Smart Lock", status: "online", location: "Building A - Floor 1", lastPing: "2024-01-15 10:30", accessCount: 156, }, { id: 2, name: "Server Room", type: "Biometric Scanner", status: "online", location: "Building A - Floor 2", lastPing: "2024-01-15 10:29", accessCount: 89, }, { id: 3, name: "Executive Floor", type: "Smart Lock", status: "offline", location: "Building A - Floor 5", lastPing: "2024-01-15 09:45", accessCount: 34, }, { id: 4, name: "Lab Access", type: "Biometric Scanner", status: "online", location: "Building B - Floor 1", lastPing: "2024-01-15 10:31", accessCount: 67, }, ] const accessTrendData = [ { month: "Dec", current: 45, previous: 38 }, { month: "Jan", current: 52, previous: 45 }, { month: "Feb", current: 48, previous: 52 }, { month: "Mar", current: 61, previous: 48 }, { month: "Apr", current: 55, previous: 61 }, { month: "May", current: 67, previous: 55 }, { month: "Jun", current: 72, previous: 67 }, ] const monthlyAccessData = [ { month: "Dec", count: 245 }, { month: "Jan", count: 312 }, { month: "Feb", count: 289 }, { month: "Mar", count: 356 }, { month: "Apr", count: 298 }, { month: "May", count: 387 }, { month: "Jun", count: 423 }, ] const departmentData = [ { name: "Engineering", value: 45, color: "#6366f1" }, { name: "Marketing", value: 32, color: "#ec4899" }, { name: "Sales", value: 28, color: "#06b6d4" }, { name: "HR", value: 18, color: "#10b981" }, ] const topLocations = [ { name: "Main Entrance", count: "7.5K", flag: "🏢" }, { name: "Server Room", count: "5.3K", flag: "💻" }, { name: "Lab Access", count: "4.9K", flag: "🔬" }, { name: "Executive Floor", count: "4.8K", flag: "👔" }, ] export function AccessControlDashboard() { const [activeSection, setActiveSection] = useState("dashboard") const [searchTerm, setSearchTerm] = useState("") const [isAddUserOpen, setIsAddUserOpen] = useState(false) const menuItems = [ { id: "dashboard", label: "Dashboard", icon: LayoutDashboard }, { id: "overview", label: "Overview", icon: Activity }, { id: "users", label: "Users", icon: Users }, { id: "devices", label: "Devices", icon: Lock }, { id: "reports", label: "Reports", icon: LayoutDashboard }, { id: "settings", label: "Settings", icon: Settings }, ] const stats = { totalUsers: 72350, sessions: "29.4%", avgClickRate: "56.8%", pageviews: 92913, } const renderUserCard = (user: any) => (

{user.name .split(" ") .map((n: string) => n[0]) .join("")}

{user.name}

{user.department}

{user.trend === "up" ? ( ) : ( )} {user.accessCount}

3 from 6 tasks completed

) const renderDashboard = () => (

{/* Top Stats */}

TOTAL USERS

{stats.totalUsers.toLocaleString()}

+4.5%

SESSIONS

{stats.sessions}

-1.2%

AVG. ACCESS RATE

{stats.avgClickRate}

+10.3%

PAGEVIEWS

{stats.pageviews.toLocaleString()}

+15%

{/* User Performance Cards */}

{mockUsers.slice(0, 3).map(renderUserCard)}

{/* Access Summary Chart */}

Your access summary

Nov - July

LAST 6 MONTHS $8,620

PREVIOUS $8,620

} /> {/* Top Locations */}

Top locations

Favorites

{topLocations.map((location, index) => (

{location.flag} {location.name}

{location.count}

))}

{/* Department Segmentation */}

Segmentation

All users

{departmentData.map((dept, index) => (

{dept.name}

))}

{/* Satisfaction Rate */}

Satisfaction rate

From all projects

89.87%

Based on likes

) const renderUsers = () => (

Users

Email ↓ Customer Name ↓ Default Source Created {mockUsers.map((user) => ( {user.email} {user.name} --- 5556 Jun 14, 12:33 PM ))}

1 to 29 out of 96

...

) const renderDevices = () => (

Import data into Front Dashboard

See and talk to your users and leads immediately

{[ { name: "Capsule", type: "Users", icon: "🔴" }, { name: "Mailchimp", type: "Users", icon: "🟡" }, { name: "Webdev", type: "Users", icon: "🔵" }, ].map((item, index) => (

{item.icon}

{item.name}

{item.type}

))}

Monthly expenses

} />

) const renderContent = () => { switch (activeSection) { case "dashboard": return renderDashboard() case "users": return renderUsers() case "devices": return renderDevices() case "overview": return renderDashboard() case "reports": return renderDevices() case "settings": return (

Settings

System Configuration

Configure your access control system settings.

) default: return renderDashboard() } } return (

{/* Sidebar */}

Dlex

Dlex Designs

general team

{menuItems.map((item) => ( ))}

SHORTCUT

Storage

3.4 GB of 15 GB

JS Jane Smith

{/* Main Content */}

{/* Top Navigation */}

Hello Moe Premium

{/* Page Content */}

{renderContent()}

) }