Merge branch 'main' of https://git.coastit.co.za/caitlin/CRM_ENVR

2026-06-18 15:46:02 +02:00
parent 5b115ae9ff 3d03440ffa
commit 0880c13890
9 changed files with 163 additions and 45 deletions
@@ -14,9 +14,8 @@ interface LeadsPerMonthChartProps {
  data: IntervalData[]
 }

-const BAR_GRADIENT_TOP = "#3B6AB8"
-const NEW_LEADS = "#1e3c72"
-const CLOSED = "#457fca"
+const NEW_LEADS = "#0d9488"
+const CLOSED = "#c9a96e"

 export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
  const [hovered, setHovered] = useState<number | null>(null)
@@ -88,14 +87,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">
@@ -161,7 +160,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" }}
                      />
@@ -248,4 +247,4 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
      </Card>
    </motion.div>
  )
-}
+}
@@ -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,139 @@ 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 h-full">
+      <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">{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>
  )
@@ -44,6 +44,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" />
@@ -84,7 +90,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>
@@ -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>}