"use client";
import { Badge } from "@/registry/default/ui/badge/radix";
import { Button } from "@/registry/default/ui/button/radix";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
CardToolbar,
} from "@/registry/default/ui/card/radix";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/registry/default/ui/dropdown-menu";
import { Progress } from "@/registry/default/ui/progress/radix";
import { Separator } from "@/registry/default/ui/separator/radix";
import {
BadgeAlertIcon,
CheckCircle,
MoreHorizontal,
Pin,
Settings,
Share2,
Trash,
TrendingDown,
TrendingUp,
TriangleAlert,
} from "lucide-react";
import { cn } from "@/lib/utils";
export default function StatisticCard6() {
const performance = [
{
label: "Deals Closed",
value: 27,
trend: 12,
trendDir: "up",
},
{
label: "Revenue",
value: "$182.4k",
trend: 6,
trendDir: "up",
},
{
label: "Conversion",
value: "72%",
trend: 3,
trendDir: "down",
},
];
const pipelineProgress = 76;
const activity = [
{
text: "Closed deal with FinSight Inc.",
date: "Today",
state: "secondary",
color: "text-green-500",
},
{
text: "3 new leads added to Pipeline.",
date: "Yesterday",
state: "secondary",
color: "text-green-500",
},
{
text: "Follow-up scheduled.",
date: "2 days ago",
state: "destructive",
color: "text-destructive",
},
];
return (
<div className="min-h-screen flex items-center justify-center p-6 lg:p-8">
{/* Card */}
<Card className="w-full md:w-96">
<CardHeader className="h-auto py-4">
<CardTitle className="flex flex-col gap-1">
<span>Staff Performance</span>
<span className="text-xs font-normal text-muted-foreground">
Sales Manager
</span>
</CardTitle>
<CardToolbar>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon-sm" className="-me-1.5">
<MoreHorizontal />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" side="bottom">
<DropdownMenuItem>
<Settings />
Settings
</DropdownMenuItem>
<DropdownMenuItem>
<TriangleAlert /> Add Alert
</DropdownMenuItem>
<DropdownMenuItem>
<Pin /> Pin to Dashboard
</DropdownMenuItem>
<DropdownMenuItem>
<Share2 /> Share
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<Trash />
Remove
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</CardToolbar>
</CardHeader>
<CardContent className="space-y-5">
{/* Q3 Performance */}
<div>
<div className="font-medium text-sm mb-2.5 text-accent-foreground">
Q3 Performance
</div>
<div className="grid grid-cols-3 gap-2">
{performance.map((item) => (
<div
className="flex flex-col items-start justify-start"
key={item.label}
>
<div className="text-xl font-bold text-foreground">
{item.value}
</div>
<div className="text-xs text-muted-foreground font-medium mb-1">
{item.label}
</div>
<span
className={cn(
"flex items-center gap-0.5 text-xs font-semibold",
item.trendDir === "up"
? "text-green-500"
: "text-destructive",
)}
>
{item.trendDir === "up" ? (
<TrendingUp className="w-3 h-3" />
) : (
<TrendingDown className="w-3 h-3" />
)}
{item.trendDir === "up" ? "+" : "-"}
{item.trend}%
</span>
</div>
))}
</div>
</div>
<Separator />
{/* Pipeline Progress */}
<div>
<div className="flex items-center justify-between mb-2.5">
<span className="text-sm font-medium text-foreground">
Pipeline Progress
</span>
<span className="text-xs font-semibold text-foreground">
{pipelineProgress}%
</span>
</div>
<Progress value={pipelineProgress} className="bg-muted" />
</div>
<Separator />
{/* Recent Activity */}
<div>
<div className="font-medium text-sm text-foreground mb-2.5">
Recent Activity
</div>
<ul className="space-y-2">
{activity.map((a, i) => (
<li
key={i}
className="flex items-center justify-between gap-2.5 text-sm"
>
<span className="flex items-center gap-2">
<CheckCircle className={cn("w-3.5 h-3.5", a.color)} />
<span className="text-xs text-foreground truncate">
{a.text}
</span>
</span>
<Badge
variant={
a.state === "secondary" ? "secondary" : "destructive"
}
appearance="light"
size="sm"
>
{a.date}
</Badge>
</li>
))}
</ul>
</div>
</CardContent>
<CardFooter className="flex gap-2.5 h-auto py-3.5">
<Button variant="outline" className="flex-1">
Schedule
</Button>
<Button variant="default" className="flex-1">
Full Report
</Button>
</CardFooter>
</Card>
</div>
);
}