Replace Recharts charts with custom SVG components

- Lead status: custom SVG donut with radial gradients, hover effects, percentage tooltips
- Leads per month: custom SVG grouped bar chart with hover dimming, gradient bars
- Tooltip colors fixed to use theme variables
- Right-panel lead status icon colors updated

src/components/dashboard/lead-status-chart.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { useState } from "react"
 import { motion } from "framer-motion"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
 
 interface StatusData {
   name: string
@@ -14,7 +14,38 @@ interface LeadStatusChartProps {
   data: StatusData[]
 }
 
+function polar(cx: number, cy: number, r: number, deg: number) {
+  const rad = ((deg - 90) * Math.PI) / 180
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
+}
+
+function arcPath(cx: number, cy: number, oR: number, iR: number, start: number, end: number) {
+  const gap = 3
+  const s = start + gap / 2
+  const e = end - gap / 2
+  const o1 = polar(cx, cy, oR, s)
+  const o2 = polar(cx, cy, oR, e)
+  const i1 = polar(cx, cy, iR, e)
+  const i2 = polar(cx, cy, iR, s)
+  const lg = e - s > 180 ? 1 : 0
+  return `M${o1.x} ${o1.y} A${oR} ${oR} 0 ${lg} 1 ${o2.x} ${o2.y} L${i1.x} ${i1.y} A${iR} ${iR} 0 ${lg} 0 ${i2.x} ${i2.y}Z`
+}
+
 export function LeadStatusChart({ data }: LeadStatusChartProps) {
+  const [hov, setHov] = useState<number | null>(null)
+
+  const total = data.reduce((s, d) => s + d.value, 0)
+
+  let cum = 0
+  const segs = data.map((d) => {
+    const start = cum
+    const deg = (d.value / total) * 360
+    cum += deg
+    return { ...d, start, end: cum, deg, pct: Math.round((d.value / total) * 100) }
+  })
+
+  const active = hov !== null ? segs[hov] : null
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -26,45 +57,120 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
           <CardTitle>Lead Status</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="h-[300px]">
+          <div className="flex flex-col items-center">
-            <ResponsiveContainer width="100%" height="100%">
+            {/* Donut */}
-              <PieChart>
+            <svg width="280" height="280" viewBox="0 0 320 320" className="overflow-visible">
-                <Pie
+              <defs>
-                  data={data}
+                {segs.map((s, i) => (
-                  cx="50%"
+                  <radialGradient key={i} id={`chart-grad-${i}`} cx="50%" cy="50%" r="50%">
-                  cy="50%"
+                    <stop offset="0%" stopColor={s.color} stopOpacity="1" />
-                  innerRadius={60}
+                    <stop offset="100%" stopColor={s.color} stopOpacity="0.75" />
-                  outerRadius={100}
+                  </radialGradient>
-                  paddingAngle={2}
+                ))}
-                  dataKey="value"
+              </defs>
-                  animationBegin={200}
+
-                  animationDuration={1000}
+              {/* Background ring */}
-                >
+              <circle cx="160" cy="160" r="105" fill="none" stroke="hsl(var(--muted))" strokeWidth="52" />
-                  {data.map((entry, index) => (
+
-                    <Cell key={`cell-${index}`} fill={entry.color} />
+              {/* Segments */}
-                  ))}
+              {segs.map((s, i) => {
-                </Pie>
+                const isH = hov === i
-                <Tooltip
+                const oR = isH ? 137 : 130
-                  contentStyle={{
+                const iR = isH ? 73 : 80
-                    background: "hsl(var(--popover))",
+                return (
-                    border: "1px solid hsl(var(--border))",
+                  <path
-                    borderRadius: "8px",
+                    key={i}
-                    fontSize: "14px",
+                    d={arcPath(160, 160, oR, iR, s.start, s.end)}
+                    fill={`url(#chart-grad-${i})`}
+                    opacity={hov !== null && !isH ? 0.3 : 1}
+                    style={{
+                      cursor: "pointer",
+                      transition: "all 0.22s cubic-bezier(.4,0,.2,1)",
+                      filter: isH ? `drop-shadow(0 0 10px ${s.color}99)` : "none",
+                    }}
+                    onMouseEnter={() => setHov(i)}
+                    onMouseLeave={() => setHov(null)}
+                  />
+                )
+              })}
+
+              {/* Center circle */}
+              <circle cx="160" cy="160" r="66" fill="hsl(var(--card))" />
+              <circle cx="160" cy="160" r="66" fill="none" stroke="hsl(var(--border))" strokeWidth="1" />
+
+              {/* Center text */}
+              {active ? (
+                <>
+                  <circle cx="160" cy="160" r="66" fill={active.color + "15"} />
+                  <text x="160" y="148" textAnchor="middle" fill="hsl(var(--foreground))" fontSize="30" fontWeight="700" fontFamily="-apple-system,sans-serif">
+                    {active.value}
+                  </text>
+                  <text x="160" y="166" textAnchor="middle" fill="hsl(var(--muted-foreground))" fontSize="12" fontFamily="-apple-system,sans-serif">
+                    {active.name}
+                  </text>
+                  <text x="160" y="184" textAnchor="middle" fill={active.color} fontSize="13" fontWeight="600" fontFamily="-apple-system,sans-serif">
+                    {active.pct}%
+                  </text>
+                </>
+              ) : (
+                <>
+                  <text x="160" y="152" textAnchor="middle" fill="hsl(var(--foreground))" fontSize="34" fontWeight="700" fontFamily="-apple-system,sans-serif">
+                    {total}
+                  </text>
+                  <text x="160" y="172" textAnchor="middle" fill="hsl(var(--muted-foreground))" fontSize="12" fontFamily="-apple-system,sans-serif">
+                    Total Leads
+                  </text>
+                </>
+              )}
+            </svg>
+
+            {/* Legend */}
+            <div className="mt-6 grid w-full grid-cols-2 gap-2">
+              {segs.map((s, i) => (
+                <div
+                  key={i}
+                  onMouseEnter={() => setHov(i)}
+                  onMouseLeave={() => setHov(null)}
+                  className="flex cursor-pointer items-center gap-2.5 rounded-xl p-2.5 transition-all duration-200"
+                  style={{
+                    background: hov === i ? `${s.color}18` : "hsl(var(--muted) / 0.3)",
+                    border: `1px solid ${hov === i ? s.color + "50" : "hsl(var(--border))"}`,
+                    gridColumn: i === segs.length - 1 && segs.length % 2 !== 0 ? "1 / -1" : undefined,
+                    maxWidth: i === segs.length - 1 && segs.length % 2 !== 0 ? "50%" : undefined,
+                    margin: i === segs.length - 1 && segs.length % 2 !== 0 ? "0 auto" : undefined,
+                    width: i === segs.length - 1 && segs.length % 2 !== 0 ? "100%" : undefined,
                   }}
-                  formatter={(value: number, name: string) => [value, name]}
+                >
-                />
+                  <div
-                <Legend
+                    className="h-2.5 w-2.5 shrink-0 rounded-full transition-shadow duration-200"
-                  verticalAlign="bottom"
+                    style={{
-                  height={36}
+                      background: s.color,
-                  formatter={(value: string) => (
+                      boxShadow: hov === i ? `0 0 8px ${s.color}` : "none",
-                    <span className="text-sm text-muted-foreground">{value}</span>
+                    }}
-                  )}
+                  />
-                />
+                  <div className="min-w-0 flex-1">
-              </PieChart>
+                    <div
-            </ResponsiveContainer>
+                      className="text-xs font-medium transition-colors duration-200"
+                      style={{ color: hov === i ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))" }}
+                    >
+                      {s.name}
+                    </div>
+                    <div className="mt-0.5 text-[11px]" style={{ color: "hsl(var(--muted-foreground) / 0.7)" }}>
+                      {s.value} &middot; {s.pct}%
+                    </div>
+                  </div>
+                  <div
+                    className="text-xs font-semibold transition-colors duration-200"
+                    style={{ color: hov === i ? s.color : "hsl(var(--muted-foreground) / 0.5)" }}
+                  >
+                    {s.pct}%
+                  </div>
+                </div>
+              ))}
+            </div>
           </div>
         </CardContent>
       </Card>
     </motion.div>
   )
-}
+}

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

@@ -1,8 +1,8 @@
 "use client"
 
+import { useState, useMemo } from "react"
 import { motion } from "framer-motion"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
 
 interface MonthlyData {
   month: string
@@ -14,7 +14,42 @@ interface LeadsPerMonthChartProps {
   data: MonthlyData[]
 }
 
+const BAR_GRADIENT_TOP = "#3B6AB8"
+const NEW_LEADS = "#1e3c72"
+const CLOSED = "#457fca"
+
 export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
+  const [hovered, setHovered] = useState<number | null>(null)
+
+  const width = 880
+  const height = 380
+  const padding = { top: 28, right: 24, bottom: 44, left: 44 }
+  const chartW = width - padding.left - padding.right
+  const chartH = height - padding.top - padding.bottom
+
+  const maxVal = useMemo(() => {
+    const max = Math.max(...data.map((d) => Math.max(d.leads, d.closed)))
+    return Math.ceil(max / 7) * 7
+  }, [data])
+
+  const ticks = useMemo(() => {
+    const steps = 4
+    return Array.from({ length: steps + 1 }, (_, i) => Math.round((maxVal / steps) * i))
+  }, [maxVal])
+
+  const groupW = chartW / data.length
+  const barW = groupW * 0.28
+  const gap = groupW * 0.06
+
+  const yScale = (v: number) => chartH - (v / maxVal) * chartH
+
+  const active = hovered
+  const activeDatum = active !== null ? data[active] : null
+
+  const totalNew = data.reduce((s, d) => s + d.leads, 0)
+  const totalClosed = data.reduce((s, d) => s + d.closed, 0)
+  const closeRate = totalNew > 0 ? Math.round((totalClosed / totalNew) * 100) : 0
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -23,61 +58,193 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
     >
       <Card>
         <CardHeader>
-          <CardTitle>Leads Per Month</CardTitle>
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle>Leads Per Month</CardTitle>
+              <p className="mt-1 text-sm text-muted-foreground">
+                {totalNew} new &middot; {totalClosed} closed &middot; {closeRate}% close rate
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-1.5">
+                <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: NEW_LEADS }} />
+                <span className="text-xs text-muted-foreground">New Leads</span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: CLOSED }} />
+                <span className="text-xs text-muted-foreground">Closed</span>
+              </div>
+            </div>
+          </div>
         </CardHeader>
         <CardContent>
-          <div className="h-[300px]">
+          <div className="relative">
-            <ResponsiveContainer width="100%" height="100%">
+            <svg
-              <BarChart data={data} barGap={4}>
+              viewBox={`0 0 ${width} ${height}`}
-                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" vertical={false} />
+              width="100%"
-                <XAxis
+              height="auto"
-                  dataKey="month"
+              className="block overflow-visible"
-                  tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+            >
-                  tickLine={false}
+              <defs>
-                  axisLine={false}
+                <linearGradient id="newLeadsGrad" x1="0" y1="0" x2="0" y2="1">
-                />
+                  <stop offset="0%" stopColor={BAR_GRADIENT_TOP} />
-                <YAxis
+                  <stop offset="100%" stopColor={NEW_LEADS} />
-                  tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                </linearGradient>
-                  tickLine={false}
+                <linearGradient id="closedGrad" x1="0" y1="0" x2="0" y2="1">
-                  axisLine={false}
+                  <stop offset="0%" stopColor="#5691c8" />
-                  allowDecimals={false}
+                  <stop offset="100%" stopColor={CLOSED} />
-                />
+                </linearGradient>
-                <Tooltip
+                <filter id="shadowBlue">
-                  contentStyle={{
+                  <feDropShadow dx="0" dy="2" stdDeviation="4" floodColor={NEW_LEADS} floodOpacity="0.4" />
+                </filter>
+                <filter id="shadowClosed">
+                  <feDropShadow dx="0" dy="2" stdDeviation="4" floodColor={CLOSED} floodOpacity="0.4" />
+                </filter>
+              </defs>
+
+              <g transform={`translate(${padding.left}, ${padding.top})`}>
+                {/* Grid lines */}
+                {ticks.map((t, i) => (
+                  <g key={i}>
+                    <line
+                      x1={0}
+                      x2={chartW}
+                      y1={yScale(t)}
+                      y2={yScale(t)}
+                      stroke="hsl(var(--border))"
+                      strokeDasharray={t === 0 ? "0" : "3 5"}
+                      strokeWidth={1}
+                    />
+                    <text
+                      x={-12}
+                      y={yScale(t)}
+                      fill="hsl(var(--muted-foreground))"
+                      fontSize={12}
+                      textAnchor="end"
+                      dominantBaseline="middle"
+                    >
+                      {t}
+                    </text>
+                  </g>
+                ))}
+
+                {/* Bars */}
+                {data.map((d, i) => {
+                  const groupX = i * groupW
+                  const isActive = active === i
+                  const newH = chartH - yScale(d.leads)
+                  const closedH = chartH - yScale(d.closed)
+
+                  return (
+                    <g
+                      key={d.month}
+                      onMouseEnter={() => setHovered(i)}
+                      onMouseLeave={() => setHovered(null)}
+                      style={{ cursor: "pointer" }}
+                    >
+                      {/* Hover highlight band */}
+                      <rect
+                        x={groupX}
+                        y={0}
+                        width={groupW}
+                        height={chartH}
+                        fill={isActive ? "hsl(var(--muted) / 0.5)" : "transparent"}
+                        rx={6}
+                      />
+
+                      {/* New Leads bar */}
+                      <rect
+                        x={groupX + groupW / 2 - barW - gap / 2}
+                        y={yScale(d.leads)}
+                        width={barW}
+                        height={newH}
+                        rx={4}
+                        fill="url(#newLeadsGrad)"
+                        filter={isActive ? "url(#shadowBlue)" : undefined}
+                        opacity={hovered !== null && !isActive ? 0.35 : 1}
+                        style={{ transition: "opacity 0.15s ease" }}
+                      />
+
+                      {/* Closed bar */}
+                      <rect
+                        x={groupX + groupW / 2 + gap / 2}
+                        y={yScale(d.closed)}
+                        width={barW}
+                        height={closedH}
+                        rx={4}
+                        fill="url(#closedGrad)"
+                        filter={isActive ? "url(#shadowClosed)" : undefined}
+                        opacity={hovered !== null && !isActive ? 0.35 : 1}
+                        style={{ transition: "opacity 0.15s ease" }}
+                      />
+
+                      {/* Month label */}
+                      <text
+                        x={groupX + groupW / 2}
+                        y={chartH + 26}
+                        fill={isActive ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))"}
+                        fontSize={12.5}
+                        fontWeight={isActive ? 600 : 400}
+                        textAnchor="middle"
+                      >
+                        {d.month}
+                      </text>
+                    </g>
+                  )
+                })}
+              </g>
+            </svg>
+
+            {/* Tooltip */}
+            {activeDatum && (
+              <div
+                className="pointer-events-none absolute top-0"
+                style={{
+                  left: `${((active! + 0.5) / data.length) * 100}%`,
+                  transform: active! > data.length - 2
+                    ? "translate(-100%, 0)"
+                    : "translate(-12%, 0)",
+                  transition: "left 0.15s ease",
+                }}
+              >
+                <div
+                  className="min-w-[150px] rounded-xl border p-3 shadow-xl"
+                  style={{
                     background: "hsl(var(--popover))",
-                    border: "1px solid hsl(var(--border))",
+                    borderColor: "hsl(var(--border))",
-                    borderRadius: "8px",
-                    fontSize: "14px",
                   }}
-                />
+                >
-                <Legend
+                  <div className="mb-1.5 text-xs font-semibold" style={{ color: "hsl(var(--foreground))" }}>
-                  verticalAlign="bottom"
+                    {activeDatum.month}
-                  height={36}
+                  </div>
-                  formatter={(value: string) => (
+                  <div className="mb-1 flex items-center justify-between gap-4 text-xs" style={{ color: "hsl(var(--muted-foreground))" }}>
-                    <span className="text-sm text-muted-foreground">{value}</span>
+                    <span className="flex items-center gap-1.5">
-                  )}
+                      <span className="inline-block h-2 w-2 rounded-sm" style={{ background: NEW_LEADS }} />
-                />
+                      New Leads
-                <Bar
+                    </span>
-                  dataKey="leads"
+                    <span className="font-semibold" style={{ color: "hsl(var(--foreground))" }}>{activeDatum.leads}</span>
-                  name="New Leads"
+                  </div>
-                  fill="hsl(var(--primary))"
+                  <div className="mb-1 flex items-center justify-between gap-4 text-xs" style={{ color: "hsl(var(--muted-foreground))" }}>
-                  radius={[4, 4, 0, 0]}
+                    <span className="flex items-center gap-1.5">
-                  animationBegin={300}
+                      <span className="inline-block h-2 w-2 rounded-sm" style={{ background: CLOSED }} />
-                  animationDuration={800}
+                      Closed
-                />
+                    </span>
-                <Bar
+                    <span className="font-semibold" style={{ color: "hsl(var(--foreground))" }}>{activeDatum.closed}</span>
-                  dataKey="closed"
+                  </div>
-                  name="Closed"
+                  <div
-                  fill="#10b981"
+                    className="mt-1.5 border-t pt-1.5 text-[11px]"
-                  radius={[4, 4, 0, 0]}
+                    style={{ borderColor: "hsl(var(--border))", color: "hsl(var(--muted-foreground))" }}
-                  animationBegin={500}
+                  >
-                  animationDuration={800}
+                    {activeDatum.leads > 0
-                />
+                      ? `${Math.round((activeDatum.closed / activeDatum.leads) * 100)}% close rate`
-              </BarChart>
+                      : "No leads"}
-            </ResponsiveContainer>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </CardContent>
       </Card>
     </motion.div>
   )
-}
+}

src/data/dashboard.ts

@@ -32,7 +32,7 @@ function getStatusDistribution() {
     { name: "Contacted", value: statusCounts.contacted, color: "#f59e0b" },
     { name: "Pending", value: statusCounts.pending, color: "#8b5cf6" },
     { name: "Closed", value: statusCounts.closed, color: "#10b981" },
-    { name: "Ignored", value: statusCounts.ignored, color: "#71717a" },
+    { name: "Ignored", value: statusCounts.ignored, color: "#6B7280" },
   ]
 }