From 0898ad4ebf06aaa6391a2720918591e161d48699 Mon Sep 17 00:00:00 2001 From: Hannah_Bagga Date: Thu, 18 Jun 2026 15:21:56 +0200 Subject: [PATCH 1/2] Changed the dashboards --- src/app/(dashboard)/dashboard/page.tsx | 4 + .../dashboard/leads-per-month-chart.tsx | 15 ++- src/components/dashboard/stat-card.tsx | 116 +++++++++++++++++- src/components/layout/topbar.tsx | 8 +- src/components/shared/page-header.tsx | 2 +- src/data/dashboard.ts | 10 +- src/data/leads.ts | 20 +-- 7 files changed, 147 insertions(+), 28 deletions(-) diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx index bda9349..fc4fc57 100644 --- a/src/app/(dashboard)/dashboard/page.tsx +++ b/src/app/(dashboard)/dashboard/page.tsx @@ -54,12 +54,16 @@ export default function DashboardPage() { +

Pipeline Overview

+
{statCards.map((card, i) => ( ))}
+

Analytics

+
diff --git a/src/components/dashboard/leads-per-month-chart.tsx b/src/components/dashboard/leads-per-month-chart.tsx index dcdf708..6749387 100644 --- a/src/components/dashboard/leads-per-month-chart.tsx +++ b/src/components/dashboard/leads-per-month-chart.tsx @@ -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(null) @@ -87,14 +86,14 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) { > - + - + - + @@ -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) { ) -} \ No newline at end of file +} diff --git a/src/components/dashboard/stat-card.tsx b/src/components/dashboard/stat-card.tsx index b2a9eb8..2531065 100644 --- a/src/components/dashboard/stat-card.tsx +++ b/src/components/dashboard/stat-card.tsx @@ -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 = { + "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 = { + "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 = { + "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 = { + "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 ( - - -
+ +
+ +

{title}

-

{value}

+

+ {isNumeric ? display : value} +

{description && (

{description}

)} + {badge && ( + + {badge.up ? "↑" : "↓"} {badge.label} + + )}
-
+
+ +
+ + + + + + + + + + +
+ + {title === "Conversion Rate" && ( +
+
+
+
+

22% conversion rate

+
+ )} + + {(title === "Closed" || title === "Conversion Rate") && ( +
+ )} ) diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx index 119d69f..9efe5a3 100644 --- a/src/components/layout/topbar.tsx +++ b/src/components/layout/topbar.tsx @@ -41,6 +41,12 @@ export function Topbar({ onMenuClick }: TopbarProps) { return (
+ {/* Logo */} +
+
+ CRM +
+ {/* Mobile menu button */} diff --git a/src/components/shared/page-header.tsx b/src/components/shared/page-header.tsx index e4cb7cb..7cd6c34 100644 --- a/src/components/shared/page-header.tsx +++ b/src/components/shared/page-header.tsx @@ -19,7 +19,7 @@ export function PageHeader({ title, description, children, className }: PageHead className={cn("flex items-center justify-between pb-6", className)} >
-

{title}

+

{title}

{description &&

{description}

}
{children &&
{children}
} diff --git a/src/data/dashboard.ts b/src/data/dashboard.ts index a1e0153..cf6f7f6 100644 --- a/src/data/dashboard.ts +++ b/src/data/dashboard.ts @@ -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" }, ] } diff --git a/src/data/leads.ts b/src/data/leads.ts index 2be1d0c..a4609e4 100644 --- a/src/data/leads.ts +++ b/src/data/leads.ts @@ -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(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, From 10b5de7a2114e48d79c551394d8db492a9eb595a Mon Sep 17 00:00:00 2001 From: Hannah_Bagga Date: Thu, 18 Jun 2026 15:29:55 +0200 Subject: [PATCH 2/2] Fix ESLint import paths and Next.js 15 params type for leads page --- eslint.config.mjs | 8 ++++---- src/app/(dashboard)/leads/[id]/page.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 05e726d..e1d1c19 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,10 +1,10 @@ import { defineConfig, globalIgnores } from "eslint/config"; -import nextVitals from "eslint-config-next/core-web-vitals"; -import nextTs from "eslint-config-next/typescript"; +import nextVitals from "eslint-config-next/core-web-vitals.js"; +import nextTs from "eslint-config-next/typescript.js"; const eslintConfig = defineConfig([ - ...nextVitals, - ...nextTs, + nextVitals, + nextTs, // Override default ignores of eslint-config-next. globalIgnores([ // Default ignores of eslint-config-next: diff --git a/src/app/(dashboard)/leads/[id]/page.tsx b/src/app/(dashboard)/leads/[id]/page.tsx index 7530b5e..c28094d 100644 --- a/src/app/(dashboard)/leads/[id]/page.tsx +++ b/src/app/(dashboard)/leads/[id]/page.tsx @@ -17,10 +17,12 @@ import { } from "@/components/ui/select" import { getLeadById } from "@/data/leads" import { getNotesByLeadId } from "@/data/notes" +import { use } from "react" import { ArrowLeft, Edit, ExternalLink } from "lucide-react" -export default function LeadDetailsPage({ params }: { params: { id: string } }) { - const lead = getLeadById(params.id) +export default function LeadDetailsPage({ params }: { params: Promise<{ id: string }> }) { + const { id } = use(params) + const lead = getLeadById(id) const leadNotes = lead ? getNotesByLeadId(lead.id) : [] if (!lead) {