Changed Dashboards

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

@@ -51,15 +51,16 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.3, delay: 0.2 }}
+      className="h-full"
     >
-      <Card>
+      <Card className="h-full">
         <CardHeader>
           <CardTitle>Lead Status</CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="flex flex-col items-center">
+        <CardContent className="flex flex-1 flex-col">
+          <div className="flex flex-1 flex-col items-center justify-center">
             {/* Donut */}
-            <svg width="280" height="280" viewBox="0 0 320 320" className="overflow-visible">
+            <svg width="100%" height="100%" viewBox="0 0 320 320" className="max-h-full overflow-visible" style={{ maxWidth: "280px" }}>
               <defs>
                 {segs.map((s, i) => (
                   <radialGradient key={i} id={`chart-grad-${i}`} cx="50%" cy="50%" r="50%">

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

@@ -4,14 +4,14 @@ import { useState, useMemo } from "react"
 import { motion } from "framer-motion"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
-interface MonthlyData {
-  month: string
+interface IntervalData {
+  label: string
   leads: number
   closed: number
 }
 
 interface LeadsPerMonthChartProps {
-  data: MonthlyData[]
+  data: IntervalData[]
 }
 
 const NEW_LEADS = "#0d9488"
@@ -21,8 +21,8 @@ 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 height = 620
+  const padding = { top: 128, right: 24, bottom: 48, left: 44 }
   const chartW = width - padding.left - padding.right
   const chartH = height - padding.top - padding.bottom
 
@@ -54,8 +54,9 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.3, delay: 0.3 }}
+      className="h-full"
     >
-      <Card>
+      <Card className="h-full">
         <CardHeader>
           <div className="flex items-start justify-between">
             <div>
@@ -76,12 +77,12 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
             </div>
           </div>
         </CardHeader>
-        <CardContent>
-          <div className="relative">
+        <CardContent className="flex flex-1 flex-col">
+          <div className="relative flex-1">
             <svg
               viewBox={`0 0 ${width} ${height}`}
               width="100%"
-              height="auto"
+              height="100%"
               className="block overflow-visible"
             >
               <defs>
@@ -136,7 +137,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
 
                   return (
                     <g
-                      key={d.month}
+                      key={d.label}
                       onMouseEnter={() => setHovered(i)}
                       onMouseLeave={() => setHovered(null)}
                       style={{ cursor: "pointer" }}
@@ -186,7 +187,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                         fontWeight={isActive ? 600 : 400}
                         textAnchor="middle"
                       >
-                        {d.month}
+                        {d.label}
                       </text>
                     </g>
                   )
@@ -214,7 +215,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                   }}
                 >
                   <div className="mb-1.5 text-xs font-semibold" style={{ color: "hsl(var(--foreground))" }}>
-                    {activeDatum.month}
+                    {activeDatum.label}
                   </div>
                   <div className="mb-1 flex items-center justify-between gap-4 text-xs" style={{ color: "hsl(var(--muted-foreground))" }}>
                     <span className="flex items-center gap-1.5">

src/components/dashboard/stat-card.tsx

@@ -96,10 +96,9 @@ export function StatCard({ title, value, icon: Icon, variant = "default", descri
       transition={{ duration: 0.3, delay: index * 0.05 }}
       className="relative"
     >
-      <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">
+      <Card className="group hover:shadow-md transition-all duration-200">
+        <CardContent className="p-6">
+          <div className="flex items-center 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">