Changed the dashboards

src/app/(dashboard)/dashboard/page.tsx

@@ -54,12 +54,16 @@ export default function DashboardPage() {
         </Select>
       </PageHeader>
 
+      <p className="text-xs font-semibold tracking-widest uppercase text-muted-foreground">Pipeline Overview</p>
+
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
         {statCards.map((card, i) => (
           <StatCard key={card.title} {...card} index={i} />
         ))}
       </div>
 
+      <p className="text-xs font-semibold tracking-widest uppercase text-muted-foreground">Analytics</p>
+
       <div className="grid gap-6 lg:grid-cols-2">
         <LeadStatusChart data={stats.statusDistribution} />
         <LeadsPerMonthChart data={stats.leadsPerMonth} />

src/components/dashboard/leads-per-month-chart.tsx

@@ -14,9 +14,8 @@ interface LeadsPerMonthChartProps {
   data: MonthlyData[]
 }
 
-const BAR_GRADIENT_TOP = "#3B6AB8"
+const NEW_LEADS = "#0d9488"
-const NEW_LEADS = "#1e3c72"
+const CLOSED = "#c9a96e"
-const CLOSED = "#457fca"
 
 export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
   const [hovered, setHovered] = useState<number | null>(null)
@@ -87,14 +86,14 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
             >
               <defs>
                 <linearGradient id="newLeadsGrad" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor={BAR_GRADIENT_TOP} />
+                  <stop offset="0%" stopColor="#0d9488" />
                   <stop offset="100%" stopColor={NEW_LEADS} />
                 </linearGradient>
                 <linearGradient id="closedGrad" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="#5691c8" />
+                  <stop offset="0%" stopColor="#e8d5a3" />
                   <stop offset="100%" stopColor={CLOSED} />
                 </linearGradient>
-                <filter id="shadowBlue">
+                <filter id="shadowNew">
                   <feDropShadow dx="0" dy="2" stdDeviation="4" floodColor={NEW_LEADS} floodOpacity="0.4" />
                 </filter>
                 <filter id="shadowClosed">
@@ -160,7 +159,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                         height={newH}
                         rx={4}
                         fill="url(#newLeadsGrad)"
-                        filter={isActive ? "url(#shadowBlue)" : undefined}
+                        filter={isActive ? "url(#shadowNew)" : undefined}
                         opacity={hovered !== null && !isActive ? 0.35 : 1}
                         style={{ transition: "opacity 0.15s ease" }}
                       />

src/components/dashboard/stat-card.tsx

@@ -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">
+      <Card className="group rounded-2xl border p-5 overflow-hidden hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 cursor-default">
-        <CardContent className="p-6">
+        <div className={cn("h-[3px] w-full absolute top-0 left-0 bg-gradient-to-r", gradient)} />
-          <div className="flex items-center justify-between">
+        <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>
   )

src/components/layout/topbar.tsx

@@ -41,6 +41,12 @@ export function Topbar({ onMenuClick }: TopbarProps) {
 
   return (
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
+      {/* Logo */}
+      <div className="flex items-center gap-2 mr-2 shrink-0">
+        <div className="w-3 h-3 rounded-full bg-[#0d9488]" />
+        <span className="text-[#0d9488] font-bold text-sm tracking-wide">CRM</span>
+      </div>
+
       {/* Mobile menu button */}
       <Button variant="ghost" size="icon" className="lg:hidden" onClick={onMenuClick}>
         <Menu className="h-5 w-5" />
@@ -81,7 +87,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="icon" className="relative text-muted-foreground">
               <Bell className="h-5 w-5" />
-              <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
+              <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#f43f5e] text-white text-[10px] font-medium">
                 3
               </span>
             </Button>

src/components/shared/page-header.tsx

@@ -19,7 +19,7 @@ export function PageHeader({ title, description, children, className }: PageHead
       className={cn("flex items-center justify-between pb-6", className)}
     >
       <div>
-        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        <h1 className="text-2xl font-bold tracking-tight border-l-4 border-[#0d9488] pl-4">{title}</h1>
         {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
       </div>
       {children && <div className="flex items-center gap-3">{children}</div>}

src/data/dashboard.ts

@@ -28,11 +28,11 @@ function getStatusDistribution() {
   })
 
   return [
-    { name: "Open", value: statusCounts.open, color: "#3b82f6" },
+    { name: "Open", value: statusCounts.open, color: "#0d9488" },
-    { name: "Contacted", value: statusCounts.contacted, color: "#f59e0b" },
+    { name: "Contacted", value: statusCounts.contacted, color: "#5eead4" },
-    { name: "Pending", value: statusCounts.pending, color: "#8b5cf6" },
+    { name: "Pending", value: statusCounts.pending, color: "#c9a96e" },
-    { name: "Closed", value: statusCounts.closed, color: "#10b981" },
+    { name: "Closed", value: statusCounts.closed, color: "#f43f5e" },
-    { name: "Ignored", value: statusCounts.ignored, color: "#6B7280" },
+    { name: "Ignored", value: statusCounts.ignored, color: "#94a3b8" },
   ]
 }
 

src/data/leads.ts

@@ -26,22 +26,28 @@ const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "
 const sources = ["Website", "Referral", "LinkedIn", "Cold Call", "Email", "Google", "Social Media", "Other"]
 const statuses: LeadStatus[] = ["open", "contacted", "pending", "closed", "ignored"]
 
+const phonePrefixes = ["555", "123", "456", "789", "321", "654", "987", "234", "876", "432"]
+
+let _rngSeed = 42
+function rng(): number {
+  _rngSeed = (_rngSeed * 1664525 + 1013904223) & 0x7fffffff
+  return _rngSeed / 0x7fffffff
+}
+
 function randomItem<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)]
+  return arr[Math.floor(rng() * arr.length)]
 }
 
 function randomDate(startMonthsAgo: number): string {
   const now = new Date()
   const start = new Date(now.getFullYear(), now.getMonth() - startMonthsAgo, 1)
-  const randomTime = start.getTime() + Math.random() * (now.getTime() - start.getTime())
+  const randomTime = start.getTime() + rng() * (now.getTime() - start.getTime())
   return new Date(randomTime).toISOString()
 }
 
-const phonePrefixes = ["555", "123", "456", "789", "321", "654", "987", "234", "876", "432"]
-
 function randomPhone(): string {
   const prefix = randomItem(phonePrefixes)
-  const suffix = Math.floor(Math.random() * 10000000).toString().padStart(7, "0")
+  const suffix = Math.floor(rng() * 10000000).toString().padStart(7, "0")
   return `(${prefix}) ${suffix.slice(0, 3)}-${suffix.slice(3)}`
 }
 
@@ -49,7 +55,7 @@ export const leads: Lead[] = Array.from({ length: 120 }, (_, i) => {
   const firstName = randomItem(firstNames)
   const lastName = randomItem(lastNames)
   const status = randomItem(statuses)
-  const assignedUser = Math.random() > 0.15 ? randomItem(users.filter((u) => u.active)) : null
+  const assignedUser = rng() > 0.15 ? randomItem(users.filter((u) => u.active)) : null
   const createdAt = randomDate(6)
 
   return {
@@ -59,7 +65,7 @@ export const leads: Lead[] = Array.from({ length: 120 }, (_, i) => {
     email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@${companyNames[i % companyNames.length].toLowerCase().replace(/\s+/g, "")}.com`,
     phone: randomPhone(),
     source: randomItem(sources),
-    description: `Looking for a complete website redesign and modern digital presence. Interested in responsive design, SEO optimization, and a custom CMS solution.`,
+    description: "Looking for a complete website redesign and modern digital presence. Interested in responsive design, SEO optimization, and a custom CMS solution.",
     status,
     assignedUserId: assignedUser?.id ?? null,
     assignedUser,