Initial commit

2026-06-17 13:51:22 +02:00
commit 4898bf7142
81 changed files with 12522 additions and 0 deletions
@@ -0,0 +1,83 @@
+"use client"
+
+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
+  leads: number
+  closed: number
+}
+
+interface LeadsPerMonthChartProps {
+  data: MonthlyData[]
+}
+
+export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, delay: 0.3 }}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Leads Per Month</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[300px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={data} barGap={4}>
+                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" vertical={false} />
+                <XAxis
+                  dataKey="month"
+                  tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                  tickLine={false}
+                  axisLine={false}
+                />
+                <YAxis
+                  tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                  tickLine={false}
+                  axisLine={false}
+                  allowDecimals={false}
+                />
+                <Tooltip
+                  contentStyle={{
+                    background: "hsl(var(--popover))",
+                    border: "1px solid hsl(var(--border))",
+                    borderRadius: "8px",
+                    fontSize: "14px",
+                  }}
+                />
+                <Legend
+                  verticalAlign="bottom"
+                  height={36}
+                  formatter={(value: string) => (
+                    <span className="text-sm text-muted-foreground">{value}</span>
+                  )}
+                />
+                <Bar
+                  dataKey="leads"
+                  name="New Leads"
+                  fill="hsl(var(--primary))"
+                  radius={[4, 4, 0, 0]}
+                  animationBegin={300}
+                  animationDuration={800}
+                />
+                <Bar
+                  dataKey="closed"
+                  name="Closed"
+                  fill="#10b981"
+                  radius={[4, 4, 0, 0]}
+                  animationBegin={500}
+                  animationDuration={800}
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  )
+}