mirror of
https://git.coastit.co.za/caitlin/CRM_ENVR.git
synced 2026-07-10 03:05:43 +02:00
Changed the dashboards
This commit is contained in:
@@ -54,12 +54,16 @@ export default function DashboardPage() {
|
||||
</Select>
|
||||
</PageHeader>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-muted-foreground">Pipeline Overview</p>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
|
||||
{statCards.map((card, i) => (
|
||||
<StatCard key={card.title} {...card} index={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-xs font-semibold tracking-widest uppercase text-muted-foreground">Analytics</p>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<LeadStatusChart data={stats.statusDistribution} />
|
||||
<LeadsPerMonthChart data={stats.leadsPerMonth} />
|
||||
|
||||
@@ -14,9 +14,8 @@ interface LeadsPerMonthChartProps {
|
||||
data: MonthlyData[]
|
||||
}
|
||||
|
||||
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)
|
||||
@@ -87,14 +86,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">
|
||||
@@ -160,7 +159,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" }}
|
||||
/>
|
||||
@@ -247,4 +246,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,140 @@ 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">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<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">
|
||||
<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>
|
||||
)
|
||||
|
||||
@@ -41,6 +41,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" />
|
||||
@@ -81,7 +87,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>}
|
||||
|
||||
@@ -28,11 +28,11 @@ function getStatusDistribution() {
|
||||
})
|
||||
|
||||
return [
|
||||
{ name: "Open", value: statusCounts.open, color: "#3b82f6" },
|
||||
{ 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: "#6B7280" },
|
||||
{ name: "Open", value: statusCounts.open, color: "#0d9488" },
|
||||
{ name: "Contacted", value: statusCounts.contacted, color: "#5eead4" },
|
||||
{ name: "Pending", value: statusCounts.pending, color: "#c9a96e" },
|
||||
{ name: "Closed", value: statusCounts.closed, color: "#f43f5e" },
|
||||
{ name: "Ignored", value: statusCounts.ignored, color: "#94a3b8" },
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
+13
-7
@@ -26,22 +26,28 @@ const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "
|
||||
const sources = ["Website", "Referral", "LinkedIn", "Cold Call", "Email", "Google", "Social Media", "Other"]
|
||||
const statuses: LeadStatus[] = ["open", "contacted", "pending", "closed", "ignored"]
|
||||
|
||||
const phonePrefixes = ["555", "123", "456", "789", "321", "654", "987", "234", "876", "432"]
|
||||
|
||||
let _rngSeed = 42
|
||||
function rng(): number {
|
||||
_rngSeed = (_rngSeed * 1664525 + 1013904223) & 0x7fffffff
|
||||
return _rngSeed / 0x7fffffff
|
||||
}
|
||||
|
||||
function randomItem<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)]
|
||||
return arr[Math.floor(rng() * arr.length)]
|
||||
}
|
||||
|
||||
function randomDate(startMonthsAgo: number): string {
|
||||
const now = new Date()
|
||||
const start = new Date(now.getFullYear(), now.getMonth() - startMonthsAgo, 1)
|
||||
const randomTime = start.getTime() + Math.random() * (now.getTime() - start.getTime())
|
||||
const randomTime = start.getTime() + rng() * (now.getTime() - start.getTime())
|
||||
return new Date(randomTime).toISOString()
|
||||
}
|
||||
|
||||
const phonePrefixes = ["555", "123", "456", "789", "321", "654", "987", "234", "876", "432"]
|
||||
|
||||
function randomPhone(): string {
|
||||
const prefix = randomItem(phonePrefixes)
|
||||
const suffix = Math.floor(Math.random() * 10000000).toString().padStart(7, "0")
|
||||
const suffix = Math.floor(rng() * 10000000).toString().padStart(7, "0")
|
||||
return `(${prefix}) ${suffix.slice(0, 3)}-${suffix.slice(3)}`
|
||||
}
|
||||
|
||||
@@ -49,7 +55,7 @@ export const leads: Lead[] = Array.from({ length: 120 }, (_, i) => {
|
||||
const firstName = randomItem(firstNames)
|
||||
const lastName = randomItem(lastNames)
|
||||
const status = randomItem(statuses)
|
||||
const assignedUser = Math.random() > 0.15 ? randomItem(users.filter((u) => u.active)) : null
|
||||
const assignedUser = rng() > 0.15 ? randomItem(users.filter((u) => u.active)) : null
|
||||
const createdAt = randomDate(6)
|
||||
|
||||
return {
|
||||
@@ -59,7 +65,7 @@ export const leads: Lead[] = Array.from({ length: 120 }, (_, i) => {
|
||||
email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@${companyNames[i % companyNames.length].toLowerCase().replace(/\s+/g, "")}.com`,
|
||||
phone: randomPhone(),
|
||||
source: randomItem(sources),
|
||||
description: `Looking for a complete website redesign and modern digital presence. Interested in responsive design, SEO optimization, and a custom CMS solution.`,
|
||||
description: "Looking for a complete website redesign and modern digital presence. Interested in responsive design, SEO optimization, and a custom CMS solution.",
|
||||
status,
|
||||
assignedUserId: assignedUser?.id ?? null,
|
||||
assignedUser,
|
||||
|
||||
Reference in New Issue
Block a user