Dashboard U I - Copy this React, Tailwind Component to your project

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Package, Wrench, TrendingUp, AlertTriangle, Plus, QrCode, CheckCircle, Clock, ArrowRight } from "lucide-react"; import { useInventory } from "@/contexts/InventoryContext"; // Mock data for the dashboard const stats = [ { title: "Total Kiosks", value: "247", change: "+12", changeType: "positive" as const, icon: Package, }, { title: "Available", value: "189", change: "+5", changeType: "positive" as const, icon: CheckCircle, }, { title: "In Maintenance", value: "23", change: "+3", changeType: "negative" as const, icon: Wrench, }, { title: "In Use", value: "35", change: "+4", changeType: "positive" as const, icon: Clock, }, ]; const recentActivity = [ { id: 1, action: "Kiosk KK-2024-001 marked as available", user: "John Smith", time: "2 minutes ago", type: "success", }, { id: 2, action: "Maintenance completed on KK-2023-156", user: "Sarah Johnson", time: "15 minutes ago", type: "success", }, { id: 3, action: "New kiosk KK-2024-002 added to inventory", user: "Mike Davis", time: "1 hour ago", type: "info", }, { id: 4, action: "KK-2023-089 requires maintenance", user: "System Alert", time: "3 hours ago", type: "warning", }, ]; const urgentAlerts = [ { id: 1, message: "3 kiosks overdue for scheduled maintenance", severity: "high", count: 3, }, { id: 2, message: "Low inventory: Touch screen replacements", severity: "medium", count: 1, }, { id: 3, message: "Location update required for 5 kiosks", severity: "low", count: 5, }, ]; export default function Dashboard() { const { getAnalytics } = useInventory(); const analytics = getAnalytics(); return ( <div className="space-y-6"> {/* Header */} <div className="flex items-center justify-between"> <div> <h1 className="text-3xl font-bold text-foreground">Dashboard</h1> <p className="text-muted-foreground mt-1"> Monitor your kiosk inventory and system status </p> </div> <div className="flex space-x-3"> <Button> <Plus className="mr-2 h-4 w-4" /> Add Kiosk </Button> <Button variant="outline"> <QrCode className="mr-2 h-4 w-4" /> Scan QR </Button> </div> </div> {/* Stats Cards */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> {stats.map((stat) => ( <Card key={stat.title} className="gradient-card border-0 shadow-card"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium text-muted-foreground"> {stat.title} </CardTitle> <stat.icon className="h-5 w-5 text-primary" /> </CardHeader> <CardContent> <div className="text-2xl font-bold text-foreground"> {stat.title === "Total Kiosks" ? analytics.totalKiosks : stat.title === "Available" ? analytics.activeKiosks : stat.title === "In Maintenance" ? analytics.maintenanceKiosks : stat.value} </div> <div className="flex items-center space-x-1 text-xs"> <span className={`inline-flex items-center font-medium ${ stat.changeType === "positive" ? "text-success" : "text-destructive" }`} > {stat.change} from last month </span> </div> </CardContent> </Card> ))} </div> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> {/* Urgent Alerts */} <Card className="gradient-card border-0 shadow-card"> <CardHeader> <CardTitle className="flex items-center"> <AlertTriangle className="mr-2 h-5 w-5 text-warning" /> Urgent Alerts </CardTitle> <CardDescription> Items requiring immediate attention </CardDescription> </CardHeader> <CardContent className="space-y-3"> {urgentAlerts.map((alert) => ( <div key={alert.id} className="flex items-center justify-between p-3 rounded-lg bg-background/50 border border-border/50" > <div className="flex-1"> <p className="text-sm font-medium text-foreground"> {alert.message} </p> </div> <div className="flex items-center space-x-2"> <Badge variant={ alert.severity === "high" ? "destructive" : alert.severity === "medium" ? "default" : "secondary" } > {alert.count} </Badge> <Button variant="ghost" size="sm"> <ArrowRight className="h-4 w-4" /> </Button> </div> </div> ))} </CardContent> </Card> {/* Recent Activity */} <Card className="lg:col-span-2 gradient-card border-0 shadow-card"> <CardHeader> <CardTitle className="flex items-center"> <TrendingUp className="mr-2 h-5 w-5 text-primary" /> Recent Activity </CardTitle> <CardDescription> Latest updates from your inventory system </CardDescription> </CardHeader> <CardContent> <div className="space-y-4"> {recentActivity.map((activity) => ( <div key={activity.id} className="flex items-start space-x-3 p-3 rounded-lg bg-background/50 border border-border/50 transition-smooth hover:bg-background/80" > <div className={`w-2 h-2 rounded-full mt-2 ${ activity.type === "success" ? "bg-success" : activity.type === "warning" ? "bg-warning" : "bg-primary" }`} /> <div className="flex-1 min-w-0"> <p className="text-sm font-medium text-foreground"> {activity.action} </p> <div className="flex items-center space-x-2 mt-1"> <span className="text-xs text-muted-foreground"> by {activity.user} </span> <span className="text-xs text-muted-foreground">•</span> <span className="text-xs text-muted-foreground"> {activity.time} </span> </div> </div> </div> ))} </div> </CardContent> </Card> </div> {/* Quick Actions */} <Card className="gradient-card border-0 shadow-card"> <CardHeader> <CardTitle>Quick Actions</CardTitle> <CardDescription> Common tasks to manage your kiosk inventory </CardDescription> </CardHeader> <CardContent> <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <Button variant="outline" className="h-16 flex-col space-y-2"> <Package className="h-6 w-6" /> <span>View All Kiosks</span> </Button> <Button variant="outline" className="h-16 flex-col space-y-2"> <Wrench className="h-6 w-6" /> <span>Schedule Maintenance</span> </Button> <Button variant="outline" className="h-16 flex-col space-y-2"> <QrCode className="h-6 w-6" /> <span>Generate QR Codes</span> </Button> </div> </CardContent> </Card> </div> ); }