CRM_ENVIROMENT/CRM_backup
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed the dashboards

Browse Source
This commit is contained in:
Hannah_Bagga
2026-06-18 15:21:56 +02:00
parent 3f839bc0fc
commit 0898ad4ebf
7 changed files with 147 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/stat-card.tsx
+110 -6
View File
@@ -1,5 +1,6 @@
"use client"
import { useEffect, useState } from "react"
import { motion } from "framer-motion"
import { cn } from "@/lib/utils"
import { Card, CardContent } from "@/components/ui/card"
@@ -16,37 +17,140 @@ interface StatCardProps {
const variantStyles = {
default: { bg: "bg-muted", text: "text-foreground" },
blue: { bg: "bg-blue-500/10", text: "text-blue-600 dark:text-blue-400" },
blue: { bg: "bg-teal-500/10", text: "text-teal-600 dark:text-teal-400" },
amber: { bg: "bg-amber-500/10", text: "text-amber-600 dark:text-amber-400" },
purple: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
emerald: { bg: "bg-emerald-500/10", text: "text-emerald-600 dark:text-emerald-400" },
zinc: { bg: "bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400" },
}
const cardGradients: Record<string, string> = {
"Total Leads": "from-[#0d9488] to-[#5eead4]",
"Open Leads": "from-[#14b8a6] to-[#5eead4]",
"Contacted": "from-[#c9a96e] to-[#e8d5a3]",
"Pending": "from-[#94a3b8] to-[#cbd5e1]",
"Closed": "from-[#c9a96e] to-[#e8d5a3]",
"Conversion Rate": "from-[#f43f5e] to-[#fb7185]",
}
const trendBadges: Record<string, { label: string; up: boolean }> = {
"Total Leads": { label: "12%", up: true },
"Open Leads": { label: "8%", up: true },
"Contacted": { label: "5%", up: true },
"Pending": { label: "3%", up: false },
"Closed": { label: "15%", up: true },
"Conversion Rate": { label: "2%", up: true },
}
const sparklines: Record<string, string> = {
"Total Leads": "M0,28 L10,22 L20,18 L30,20 L40,12 L50,8 L60,6",
"Open Leads": "M0,28 L10,24 L20,26 L30,20 L40,22 L50,18 L60,14",
"Contacted": "M0,28 L10,20 L20,16 L30,18 L40,10 L50,6 L60,4",
"Pending": "M0,28 L10,26 L20,24 L30,22 L40,20 L50,18 L60,16",
"Closed": "M0,28 L10,24 L20,18 L30,14 L40,10 L50,6 L60,2",
"Conversion Rate": "M0,28 L10,22 L20,20 L30,16 L40,12 L50,8 L60,4",
}
const sparklineColors: Record<string, string> = {
"Total Leads": "#0d9488",
"Open Leads": "#14b8a6",
"Contacted": "#c9a96e",
"Pending": "#94a3b8",
"Closed": "#c9a96e",
"Conversion Rate": "#f43f5e",
}
export function StatCard({ title, value, icon: Icon, variant = "default", description, index = 0 }: StatCardProps) {
const style = variantStyles[variant]
const gradient = cardGradients[title] ?? "from-[#0d9488] to-[#5eead4]"
const sparkPath = sparklines[title] ?? "M0,28 L10,22 L20,18 L30,20 L40,12 L50,8 L60,6"
const sparkColor = sparklineColors[title] ?? "#0d9488"
const badge = trendBadges[title]
const isNumeric = typeof value === "number"
const [display, setDisplay] = useState(0)
const target = typeof value === "number" ? value : 0
useEffect(() => {
if (!isNumeric) return
const duration = 1000
const steps = 40
const increment = target / steps
let current = 0
const timer = setInterval(() => {
current += increment
if (current >= target) {
setDisplay(target)
clearInterval(timer)
} else {
setDisplay(Math.floor(current))
}
}, duration / steps)
return () => clearInterval(timer)
}, [target, isNumeric])
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: index * 0.05 }}
className="relative"
>
<Card className="group hover:shadow-md transition-all duration-200">
<CardContent className="p-6">
<div className="flex items-center justify-between">
<Card className="group rounded-2xl border p-5 overflow-hidden hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 cursor-default">
<div className={cn("h-[3px] w-full absolute top-0 left-0 bg-gradient-to-r", gradient)} />
<CardContent className="p-0">
<div className="flex items-start justify-between">
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground">{title}</p>
<p className="text-3xl font-bold tracking-tight">{value}</p>
<p className="text-3xl font-bold tracking-tight">
{isNumeric ? display : value}
</p>
{description && (
<p className="text-xs text-muted-foreground">{description}</p>
)}
{badge && (
<span className={cn(
"inline-flex items-center gap-0.5 text-xs font-semibold",
badge.up ? "text-emerald-500" : "text-rose-500"
)}>
{badge.up ? "↑" : "↓"} {badge.label}
</span>
)}
</div>
<div className={cn("flex h-12 w-12 items-center justify-center rounded-xl", style.bg)}>
<div className={cn("flex h-12 w-12 items-center justify-center rounded-xl shrink-0", style.bg)}>
<Icon className={cn("h-6 w-6", style.text)} />
</div>
</div>
<div className="mt-6">
<svg width="60" height="28" viewBox="0 0 60 28" className="opacity-60 group-hover:opacity-100 transition-opacity duration-200">
<defs>
<linearGradient id={`spark-fill-${title.replace(/\s/g, "")}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={sparkColor} stopOpacity="0.25" />
<stop offset="100%" stopColor={sparkColor} stopOpacity="0" />
</linearGradient>
</defs>
<path d={`${sparkPath} L60,28 L0,28 Z`} fill={`url(#spark-fill-${title.replace(/\s/g, "")})`} />
<path d={sparkPath} fill="none" stroke={sparkColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
{title === "Conversion Rate" && (
<div className="mt-3">
<div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
<div className="h-full rounded-full bg-gradient-to-r from-[#0d9488] to-[#5eead4]" style={{ width: "22%" }} />
</div>
<p className="text-xs text-muted-foreground mt-1">22% conversion rate</p>
</div>
)}
</CardContent>
{(title === "Closed" || title === "Conversion Rate") && (
<div className={cn(
"absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent to-transparent",
title === "Closed" ? "via-[rgba(201,169,110,0.2)]" : "via-[rgba(244,63,94,0.2)]"
)} />
)}
</Card>
</motion.div>
)