I fixed the runtime error that appeared.

I fixed the size error regarding both graphs.

package-lock.json

@@ -108,14 +108,12 @@
     "node_modules/@emoji-mart/data": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.2.1.tgz",
-      "integrity": "sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==",
-      "license": "MIT"
+      "integrity": "sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw=="
     },
     "node_modules/@emoji-mart/react": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@emoji-mart/react/-/react-1.1.1.tgz",
       "integrity": "sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==",
-      "license": "MIT",
       "peerDependencies": {
         "emoji-mart": "^5.2",
         "react": "^16.8 || ^17 || ^18"
@@ -441,9 +439,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -460,9 +455,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -479,9 +471,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -498,9 +487,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -517,9 +503,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -536,9 +519,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -555,9 +535,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -580,9 +557,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -605,9 +579,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -630,9 +601,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -655,9 +623,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -680,9 +645,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [

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

@@ -22,8 +22,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
 
@@ -55,8 +55,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>
@@ -77,12 +78,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>

src/components/dashboard/stat-card.tsx

@@ -32,7 +32,7 @@ export function StatCard({ title, value, icon: Icon, variant = "default", descri
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.3, delay: index * 0.05 }}
     >
-      <Card className="group hover:shadow-md transition-all duration-200">
+      <Card className="group hover:shadow-md transition-all duration-200 h-full">
         <CardContent className="p-6">
           <div className="flex items-center justify-between">
             <div className="space-y-1">

src/components/layout/topbar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { useTheme } from "next-themes"
 import { cn } from "@/lib/utils"
@@ -36,7 +36,10 @@ export function Topbar({ onMenuClick }: TopbarProps) {
   const router = useRouter()
   const { theme, setTheme } = useTheme()
   const { user } = useUser()
+  const [mounted, setMounted] = useState(false)
   const [searchOpen, setSearchOpen] = useState(false)
+
+  useEffect(() => { setMounted(true) }, [])
   const initials = user.name.split(" ").map((n) => n[0]).join("")
 
   return (
@@ -73,7 +76,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
           className="text-muted-foreground"
         >
-          {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          {mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
         </Button>
 
         {/* Notifications */}