I Fixed the notifications

2026-06-18 16:52:30 +02:00
parent 6fe41b6c96 e7e4d371c2
commit 02ef2b9f1f
18 changed files with 1000 additions and 581 deletions
@@ -62,6 +62,8 @@ 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">
        {stats
          ? statCards.map((card, i) => (
@@ -71,6 +73,8 @@ export default function DashboardPage() {
        }
      </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 ?? []} />
@@ -1,29 +1,16 @@
-"use client"
+"use client";

-import { useState, useMemo } from "react"
-import { PageHeader } from "@/components/shared/page-header"
-import { UsersTable } from "@/components/users/users-table"
-import { UserFormDialog } from "@/components/users/user-form-dialog"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { users } from "@/data/users"
-import { useUser } from "@/providers/user-provider"
-import { Plus, Search, Users as UsersIcon } from "lucide-react"
+import { useState } from "react";
+import { PageHeader } from "@/components/shared/page-header";
+import { UsersTable } from "@/components/users/users-table";
+import { UserFormDialog } from "@/components/users/user-form-dialog";
+import { Button } from "@/components/ui/button";
+import { users } from "@/data/users";
+import { Plus, Users as UsersIcon } from "lucide-react";

 export default function UsersPage() {
-  const { user } = useUser()
-  const [createOpen, setCreateOpen] = useState(false)
-  const [search, setSearch] = useState("")
-
-  const filteredUsers = useMemo(() => {
-    if (!search) return users
-    const q = search.toLowerCase()
-    return users.filter(
-      (u) =>
-        u.name.toLowerCase().includes(q) ||
-        u.email.toLowerCase().includes(q)
-    )
-  }, [search])
+  const { user } = useUser();
+  const [createOpen, setCreateOpen] = useState(false);

  return (
    <div className="space-y-4">
@@ -31,59 +18,28 @@ export default function UsersPage() {
        title="Users"
        description="Manage team members and their roles"
      >
-        {user?.role === "super_admin" && (
-          <Button className="gap-2" onClick={() => setCreateOpen(true)}>
-            <Plus className="h-4 w-4" />
-            Add User
-          </Button>
-        )}
+        <Button className="gap-2" onClick={() => setCreateOpen(true)}>
+          <Plus className="h-4 w-4" />
+          Add User
+        </Button>
      </PageHeader>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
-        <div className="rounded-lg border bg-card p-4">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10">
-              <UsersIcon className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">{users.length}</p>
-              <p className="text-xs text-muted-foreground">Total Users</p>
+        {stats.map((s) => (
+          <div key={s.label} className="rounded-lg border bg-card p-4">
+            <div className="flex items-center gap-3">
+              <div
+                className={`flex h-10 w-10 items-center justify-center rounded-lg ${s.color}`}
+              >
+                <UsersIcon className={`h-5 w-5 ${s.textColor}`} />
+              </div>
+              <div>
+                <p className="text-2xl font-bold">{s.value}</p>
+                <p className="text-xs text-muted-foreground">{s.label}</p>
+              </div>
            </div>
          </div>
-        </div>
-        <div className="rounded-lg border bg-card p-4">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10">
-              <UsersIcon className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">{users.filter((u) => u.active).length}</p>
-              <p className="text-xs text-muted-foreground">Active</p>
-            </div>
-          </div>
-        </div>
-        <div className="rounded-lg border bg-card p-4">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10">
-              <UsersIcon className="h-5 w-5 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">{users.filter((u) => u.role === "admin").length}</p>
-              <p className="text-xs text-muted-foreground">Admins</p>
-            </div>
-          </div>
-        </div>
-        <div className="rounded-lg border bg-card p-4">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10">
-              <UsersIcon className="h-5 w-5 text-amber-600 dark:text-amber-400" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">{users.filter((u) => u.role === "sales").length}</p>
-              <p className="text-xs text-muted-foreground">Sales</p>
-            </div>
-          </div>
-        </div>
+        ))}
      </div>

      <div className="relative">
@@ -97,10 +53,14 @@ export default function UsersPage() {
      </div>

      <div className="rounded-lg border bg-card">
-        <UsersTable data={filteredUsers} />
+        <UsersTable data={users} />
      </div>

-      <UserFormDialog open={createOpen} onOpenChange={setCreateOpen} />
+      <UserFormDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onUserCreated={fetchUsers}
+      />
    </div>
-  )
+  );
 }
@@ -2,77 +2,73 @@
@tailwind components;
@tailwind utilities;

-@layer base {
-  :root {
-    --background: 210 40% 98%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --sidebar: 222.2 84% 4.9%;
-    --sidebar-foreground: 210 40% 98%;
-    --sidebar-primary: 217.2 91.2% 59.8%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 217.2 32.6% 17.5%;
-    --sidebar-accent-foreground: 210 40% 98%;
-    --sidebar-border: 217.2 32.6% 17.5%;
-    --sidebar-ring: 224.3 76.3% 48%;
-    --radius: 0.5rem;
-  }
+:root {
+  --background: 210 40% 98%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 217.2 91.2% 59.8%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 224.3 76.3% 48%;
+  --radius: 0.5rem;
+}

-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
-    --sidebar: 222.2 84% 4.9%;
-    --sidebar-foreground: 210 40% 98%;
-    --sidebar-primary: 217.2 91.2% 59.8%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 217.2 32.6% 17.5%;
-    --sidebar-accent-foreground: 210 40% 98%;
-    --sidebar-border: 217.2 32.6% 17.5%;
-    --sidebar-ring: 224.3 76.3% 48%;
-  }
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 217.2 91.2% 59.8%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 224.3 76.3% 48%;
+}

  * {
    @apply border-border;
  }

-
-
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  }
-
 }
@@ -0,0 +1,35 @@
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import { ThemeProvider } from "@/providers/theme-provider"
+import { Toaster } from "@/components/ui/sonner"
+import "./globals.css"
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+})
+
+export const metadata: Metadata = {
+  title: "Coast IT - CRM",
+  description: "Customer Relationship Management System",
+  icons: {
+    icon: "/logo/CompanyMiniLogo.png",
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.variable} min-h-screen antialiased`}>
+        <ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
+          {children}
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
@@ -1,13 +1,14 @@
 "use client"

-import { Suspense, useState } from "react"
-import { useRouter, useSearchParams } from "next/navigation"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
 import { motion } from "framer-motion"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
 import { COMPANY_NAME } from "@/lib/constants"
-import { Eye, EyeOff, Loader2, AlertCircle } from "lucide-react"
+import { Eye, EyeOff, Loader2 } from "lucide-react"

 function LoginForm() {
  const router = useRouter()
@@ -16,191 +17,409 @@ function LoginForm() {
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState("")
+  const [remember, setRemember] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    setLoading(true)

-    try {
-      const res = await fetch("/api/auth/login", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email, password }),
-      })
+    await new Promise((resolve) => setTimeout(resolve, 1200))

-      const data = await res.json()
-
-      if (!res.ok) {
-        setError(data.error || "Authentication failed.")
-        setLoading(false)
-        return
-      }
-
-      const redirect = searchParams.get("redirect") || "/dashboard"
-      router.push(redirect)
-    } catch {
-      setError("Unable to connect to authentication service. Please ensure the database is running.")
-      setLoading(false)
-    }
+    router.push("/dashboard")
  }

  return (
    <>
-      {error && (
-        <div className="flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
-          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
-          <span>{error}</span>
-        </div>
-      )}
+      <style>{`
+.left-panel {
+  background: #0a0a0f;
+  position: relative;
+  overflow: hidden;
+}
+.right-panel {
+  background: #111118;
+  width: 420px;
+  flex: none;
+  position: relative;
+}
+.panel-divider {
+  width: 1px;
+  background: rgba(180, 192, 210, 0.1);
+  flex: none;
+}
+.growth-word {
+  position: relative;
+  color: #1BB0CE;
+}
+.growth-word::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #1BB0CE;
+  animation: pulseUnderline 2.5s ease-in-out infinite;
+}
+@keyframes pulseUnderline {
+  0%, 100% { background-color: #1BB0CE; }
+  50% { background-color: rgba(180, 192, 210, 0.6); }
+}
+.stats-row {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  gap: 0;
+}
+.stat {
+  flex: 1;
+  max-width: 120px;
+  text-align: center;
+  position: relative;
+  padding-top: 12px;
+}
+.stat::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #1BB0CE, rgba(180,192,210,1), #1BB0CE);
+  background-size: 200% 100%;
+  animation: statSweep 2.5s ease-in-out infinite;
+}
+.stat:nth-child(2)::before {
+  animation-delay: 0.6s;
+}
+.stat:nth-child(3)::before {
+  animation-delay: 1.2s;
+}
+@keyframes statSweep {
+  0% { background-position: 0% 0; }
+  100% { background-position: -200% 0; }
+}
+.stat-number {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1BB0CE;
+  line-height: 1.2;
+}
+.stat-label {
+  font-size: 11px;
+  color: rgba(232,232,239,0.3);
+  margin-top: 4px;
+  letter-spacing: 0.3px;
+}
+.testimonial {
+  border-left: 2px solid rgba(27,176,206,0.25);
+  background: rgba(27,176,206,0.06);
+  padding: 10px 14px;
+}
+.stars-canvas {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+.wave-canvas {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 200px;
+  z-index: 0;
+  pointer-events: none;
+  background: #0a0a0f;
+}
+.accent-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #1BB0CE, rgba(232,232,239,0.15), transparent);
+  animation: pulseAccent 3s ease-in-out infinite;
+}
+@keyframes pulseAccent {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+.input-sheen {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.input-sheen::before {
+  content: "";
+  position: absolute;
+  top: -10%;
+  left: -100%;
+  width: 60%;
+  height: 120%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
+  transform: rotate(-15deg);
+  animation: sheenFloat 3.2s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 2;
+}
+.input-sheen-delayed::before {
+  animation-delay: 1s;
+}
+.input-sheen:focus-within::before {
+  animation: none;
+  opacity: 0;
+}
+@keyframes sheenFloat {
+  0% { left: -100%; }
+  100% { left: 200%; }
+}
+.login-input {
+  width: 100%;
+  height: 44px;
+  background: linear-gradient(135deg, #0d0d15, #151520, #0d0d15);
+  background-size: 200% 200%;
+  animation: bgShift 6s ease-in-out infinite;
+  border: 1.5px solid rgba(180,192,210,0.15);
+  border-radius: 4px;
+  font-size: 13px;
+  color: #e8e8ef;
+  padding: 0 12px;
+  position: relative;
+  z-index: 1;
+  transition: border-color 0.2s ease, background 0.2s ease;
+  box-sizing: border-box;
+}
+.login-input::placeholder {
+  color: rgba(232,232,239,0.2);
+}
+.login-input:focus {
+  border-color: #1BB0CE;
+  outline: none;
+  background: #111118;
+  animation: none;
+}
+@keyframes bgShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+.password-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: rgba(232,232,239,0.3);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  z-index: 3;
+}
+.password-toggle:hover {
+  color: rgba(232,232,239,0.5);
+}
+.login-checkbox {
+  accent-color: #1BB0CE;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.auth-btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: #1BB0CE;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 13px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: background 0.2s ease;
+}
+.auth-btn:hover {
+  background: #17a0bc;
+}
+.auth-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.auth-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 60%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  animation: btnSweep 2.2s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes btnSweep {
+  0% { left: -100%; }
+  100% { left: 200%; }
+}
+.login-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(232,232,239,0.4);
+  display: block;
+  margin-bottom: 6px;
+}
+.body-text { color: rgba(232,232,239,0.5); }
+.subheading-text { color: rgba(232,232,239,0.38); }
+.checkbox-text { color: rgba(232,232,239,0.38); }
+.footer-text { color: rgba(232,232,239,0.2); }
+      `}</style>

-      <form onSubmit={handleSubmit} className="space-y-5">
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input
-            id="email"
-            type="email"
-            placeholder="name@company.com"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-            autoComplete="email"
-          />
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <div className="relative">
-            <Input
-              id="password"
-              type={showPassword ? "text" : "password"}
-              placeholder="Enter your password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              autoComplete="current-password"
+      <div className="flex min-h-screen bg-[#0a0a0f]">
+        <div className="left-panel flex flex-1 flex-col p-12">
+          <div className="relative z-10">
+            <img
+              src="/logo/CompanyLogo.png"
+              alt={COMPANY_NAME}
+              className="h-44 w-auto object-contain"
            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            >
-              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-            </button>
+          </div>
+
+          <div className="relative z-10 flex-1 flex items-center justify-center">
+            <div className="text-center">
+              <h1 className="text-[34px] font-extrabold text-[#e8e8ef] leading-tight tracking-[-0.6px]">
+                Your Agency&apos;s{" "}
+                <span className="growth-word">Growth</span>{" "}
+                Starts Here
+              </h1>
+              <p className="mt-4 text-[13px] leading-[1.7] max-w-[360px] mx-auto body-text">
+                Manage leads, track conversions, and grow your web development business with our CRM.
+              </p>
+              <div className="stats-row">
+                <div className="stat">
+                  <div className="stat-number">{counts.leads.toLocaleString()}</div>
+                  <div className="stat-label">leads tracked</div>
+                </div>
+                <div className="stat">
+                  <div className="stat-number">{counts.conversion}%</div>
+                  <div className="stat-label">conversion lift</div>
+                </div>
+                <div className="stat">
+                  <div className="stat-number">{counts.users}</div>
+                  <div className="stat-label">active users</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="relative z-10 testimonial">
+            <p className="text-[12px] italic" style={{ color: "#0a0a0f" }}>
+              &ldquo;This CRM transformed how we manage our sales pipeline. We&apos;ve seen a 40% increase in lead conversion.&rdquo;
+            </p>
+            <p className="text-[11px] mt-1" style={{ color: "#0a0a0f" }}>
+              Marcus Johnson, Sales Lead at Coast IT
+            </p>
+          </div>
+
+          <canvas ref={canvasRef} className="wave-canvas" />
+        </div>
+
+        <div className="panel-divider" />
+
+        <div className="right-panel flex items-center justify-center p-10">
+          <canvas ref={starsCanvasRightRef} className="stars-canvas" />
+          <div className="accent-line" />
+
+          <div className="w-full" style={{ maxWidth: 340 }}>
+            <h2 className="text-[24px] font-bold text-[#e8e8ef] tracking-[-0.3px] mb-[5px]">
+              Welcome back
+            </h2>
+            <p className="text-[13px] mb-[26px] subheading-text">
+              Sign in to your account to continue
+            </p>
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="name@company.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoComplete="email"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                <button
+                  type="button"
+                  className="text-xs text-primary hover:underline"
+                >
+                  Forgot password?
+                </button>
+              </div>
+              <div className="relative">
+                <Input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Enter your password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  autoComplete="current-password"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="remember"
+                checked={remember}
+                onCheckedChange={(checked) => setRemember(checked as boolean)}
+              />
+              <label
+                htmlFor="remember"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Remember me
+              </label>
+            </div>
+
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {loading ? "Signing in..." : "Sign in"}
+            </Button>
+          </form>
+
+            <p className="text-center text-[11px] mt-4 footer-text">
+              By signing in, you agree to our{" "}
+              <button type="button" className="text-[#1BB0CE] hover:underline">
+                Terms of Service
+              </button>{" "}
+              and{" "}
+              <button type="button" className="text-[#1BB0CE] hover:underline">
+                Privacy Policy
+              </button>
+            </p>
          </div>
        </div>
-
-        <Button type="submit" className="w-full" disabled={loading}>
-          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          {loading ? "Signing in..." : "Sign in"}
-        </Button>
-      </form>
+      </div>
    </>
  )
 }
-
-export default function LoginPage() {
-
-  return (
-    <div className="flex min-h-screen">
-      {/* Left - Brand panel */}
-      <div className="relative hidden flex-1 flex-col justify-between bg-gradient-to-br from-[#1e3a8a] via-[#2563eb] to-[#3b82f6] p-12 text-white lg:flex">
-        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0di0yaDEyek0zNiAyNHYySDI0di0yaDEyeiIvPjwvZz48L2c+PC9zdmc+')] opacity-30" />
-
-        <div className="relative z-10">
-          <div className="flex items-center gap-3">
-            <img
-              src="/logo/CompanyLogo.png"
-              alt={COMPANY_NAME}
-              className="h-10 w-10 rounded-xl object-contain"
-            />
-            <span className="text-xl font-semibold">{COMPANY_NAME}</span>
-          </div>
-        </div>
-
-        <div className="relative z-10 max-w-lg">
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="text-4xl font-bold leading-tight"
-          >
-            Your Agency&apos;s Growth Starts Here
-          </motion.h1>
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.1 }}
-            className="mt-4 text-lg text-white/80"
-          >
-            Manage leads, track conversions, and grow your web development business with our CRM.
-          </motion.p>
-
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.2 }}
-            className="mt-8 rounded-xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm"
-          >
-            <p className="text-sm italic text-white/90">
-              &ldquo;This CRM transformed how we manage our sales pipeline. We&apos;ve seen a 40% increase in lead conversion.&rdquo;
-            </p>
-            <div className="mt-3 flex items-center gap-3">
-              <div className="h-10 w-10 rounded-full bg-white/20" />
-              <div>
-                <p className="text-sm font-medium">Marcus Johnson</p>
-                <p className="text-xs text-white/60">Sales Lead, Coast IT</p>
-              </div>
-            </div>
-          </motion.div>
-        </div>
-
-        <div className="relative z-10 text-sm text-white/60">
-          &copy; 2026 {COMPANY_NAME}. All rights reserved.
-        </div>
-      </div>
-
-      {/* Right - Login form */}
-      <div className="flex flex-1 items-center justify-center p-8">
-        <motion.div
-          initial={{ opacity: 0, x: 20 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ duration: 0.4 }}
-          className="w-full max-w-sm space-y-8"
-        >
-          {/* Mobile logo */}
-          <div className="flex flex-col items-center gap-3 lg:hidden">
-            <img
-              src="/logo/CompanyLogo.png"
-              alt={COMPANY_NAME}
-              className="h-12 w-12 rounded-xl object-contain"
-            />
-            <span className="text-xl font-semibold">{COMPANY_NAME}</span>
-          </div>
-
-          <div className="space-y-2 text-center lg:text-left">
-            <h1 className="text-2xl font-bold tracking-tight">Welcome back</h1>
-            <p className="text-sm text-muted-foreground">
-              Sign in to your account to continue
-            </p>
-          </div>
-
-          <Suspense fallback={<div className="text-center text-muted-foreground py-8">Loading...</div>}>
-            <LoginForm />
-          </Suspense>
-
-          <p className="text-center text-xs text-muted-foreground">
-            By signing in, you agree to our{" "}
-            <button type="button" className="text-primary hover:underline">
-              Terms of Service
-            </button>{" "}
-            and{" "}
-            <button type="button" className="text-primary hover:underline">
-              Privacy Policy
-            </button>
-          </p>
-        </motion.div>
-      </div>
-    </div>
-  )
-}
@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation"

 export default function RootPage() {
-  redirect("/login")
+  redirect("/dashboard")
 }
@@ -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)
@@ -104,14 +103,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">
@@ -177,7 +176,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" }}
                      />
@@ -264,4 +263,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>
  )
@@ -3,11 +3,11 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useUser } from "@/providers/user-provider";
-import { useNotifications } from "@/providers/notification-provider";
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -38,7 +38,8 @@ export function Topbar({ onMenuClick }: TopbarProps) {
  const router = useRouter();
  const { theme, setTheme } = useTheme();
  const { user, logout } = useUser();
-  const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } = useNotifications();
+  const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } =
+    useNotifications();
  const [mounted, setMounted] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);

@@ -48,15 +49,15 @@ export function Topbar({ onMenuClick }: TopbarProps) {
  if (!user) return null;

  function formatTimeAgo(ts: string): string {
-    const diff = Date.now() - new Date(ts).getTime()
-    const mins = Math.floor(diff / 60000)
-    if (mins < 1) return "Just now"
-    if (mins < 60) return `${mins}m ago`
-    const hrs = Math.floor(mins / 60)
-    if (hrs < 24) return `${hrs}h ago`
-    const days = Math.floor(hrs / 24)
-    if (days < 7) return `${days}d ago`
-    return new Date(ts).toLocaleDateString()
+    const diff = Date.now() - new Date(ts).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return "Just now";
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    if (days < 7) return `${days}d ago`;
+    return new Date(ts).toLocaleDateString();
  }
  const initials = user.name
    .split(" ")
@@ -66,6 +67,14 @@ 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"
@@ -123,11 +132,9 @@ export function Topbar({ onMenuClick }: TopbarProps) {
              className="relative text-muted-foreground"
            >
              <Bell className="h-5 w-5" />
-              {unreadCount > 0 && (
-                <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
-                  {unreadCount}
-                </span>
-              )}
+              <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">
+                3
+              </span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-80">
@@ -156,8 +163,8 @@ export function Topbar({ onMenuClick }: TopbarProps) {
                    role="button"
                    tabIndex={0}
                    onClick={() => {
-                      if (!n.read) markAsRead(n.id)
-                      if (n.link) router.push(n.link)
+                      if (!n.read) markAsRead(n.id);
+                      if (n.link) router.push(n.link);
                    }}
                    className={`flex cursor-pointer items-start gap-3 rounded-lg p-2 transition-colors hover:bg-muted/50 ${!n.read ? "bg-muted/30" : ""}`}
                  >
@@ -166,15 +173,17 @@ export function Topbar({ onMenuClick }: TopbarProps) {
                    />
                    <div className="flex-1 space-y-0.5">
                      <p className="text-sm font-medium">{n.title}</p>
-                      <p className="text-xs text-muted-foreground">{n.description}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {n.description}
+                      </p>
                      <p className="text-[10px] text-muted-foreground/60">
                        {formatTimeAgo(n.timestamp)}
                      </p>
                    </div>
                    <button
                      onClick={(e) => {
-                        e.stopPropagation()
-                        dismiss(n.id)
+                        e.stopPropagation();
+                        dismiss(n.id);
                      }}
                      className="mt-1 shrink-0 text-muted-foreground/40 hover:text-destructive"
                    >
@@ -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>}
@@ -1,9 +1,9 @@
-"use client"
+"use client";

-import { useState, useEffect } from "react"
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import * as z from "zod"
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
 import {
  Dialog,
  DialogContent,
@@ -11,8 +11,8 @@ import {
  DialogFooter,
  DialogHeader,
  DialogTitle,
-} from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 import {
  Form,
  FormControl,
@@ -20,62 +20,97 @@ import {
  FormItem,
  FormLabel,
  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
-} from "@/components/ui/select"
-import { Switch } from "@/components/ui/switch"
-import { User } from "@/types"
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { User } from "@/types";
+import { toast } from "sonner";

-const userFormSchema = z.object({
+const createSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email address"),
+  password: z.string().min(6, "Password must be at least 6 characters"),
  role: z.string().min(1, "Role is required"),
  active: z.boolean(),
-})
+});

-type UserFormValues = z.infer<typeof userFormSchema>
+type UserFormValues = z.infer<typeof createSchema>;

 interface UserFormDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  user?: User | null
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user?: User | null;
+  onUserCreated?: () => void;
 }

-export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps) {
-  const isEditing = !!user
+export function UserFormDialog({
+  open,
+  onOpenChange,
+  user,
+  onUserCreated,
+}: UserFormDialogProps) {
+  const isEditing = !!user;
+  const [submitting, setSubmitting] = useState(false);

  const form = useForm<UserFormValues>({
-    resolver: zodResolver(userFormSchema),
+    resolver: zodResolver(createSchema),
    defaultValues: {
      name: "",
      email: "",
-      role: "sales",
+      password: "",
+      role: "sales_user",
      active: true,
    },
-  })
+  });

  useEffect(() => {
    if (user) {
      form.reset({
        name: user.name,
        email: user.email,
+        password: "",
        role: user.role,
        active: user.active,
-      })
+      });
    } else {
-      form.reset({ name: "", email: "", role: "sales", active: true })
+      form.reset({
+        name: "",
+        email: "",
+        password: "",
+        role: "sales_user",
+        active: true,
+      });
    }
-  }, [user, form])
+  }, [user, form]);

-  function onSubmit(values: UserFormValues) {
-    console.log(values)
-    onOpenChange(false)
+  async function onSubmit(values: UserFormValues) {
+    setSubmitting(true);
+    try {
+      const res = await fetch("/api/users", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(values),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || "Failed to create user");
+        return;
+      }
+      toast.success("User created");
+      onOpenChange(false);
+      onUserCreated?.();
+    } catch {
+      toast.error("Failed to create user");
+    } finally {
+      setSubmitting(false);
+    }
  }

  return (
@@ -86,7 +121,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
          <DialogDescription>
            {isEditing
              ? "Update the user's information and permissions."
-              : "Create a new user account."}
+              : "Create a new user account that can sign in."}
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
@@ -111,7 +146,11 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
-                    <Input placeholder="john@coastalit.com" type="email" {...field} />
+                    <Input
+                      placeholder="john@coastit.co.za"
+                      type="email"
+                      {...field}
+                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
@@ -123,7 +162,10 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Role</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="Select role" />
@@ -132,7 +174,6 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
                    <SelectContent>
                      <SelectItem value="super_admin">Super Admin</SelectItem>
                      <SelectItem value="admin">Admin</SelectItem>
-                      <SelectItem value="developer">Developer</SelectItem>
                      <SelectItem value="sales">Sales</SelectItem>
                    </SelectContent>
                  </Select>
@@ -140,20 +181,27 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
                </FormItem>
              )}
            />
-            {!isEditing && (
-              <FormField
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <Input type="password" placeholder="Enter password" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder={
+                        isEditing
+                          ? "Leave blank to keep current"
+                          : "Enter password"
+                      }
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
            <FormField
              control={form.control}
              name="active"
@@ -175,16 +223,24 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
              )}
            />
            <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
                Cancel
              </Button>
-              <Button type="submit">
-                {isEditing ? "Save Changes" : "Create User"}
+              <Button type="submit" disabled={submitting}>
+                {submitting
+                  ? "Saving..."
+                  : isEditing
+                    ? "Save Changes"
+                    : "Create User"}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
-  )
+  );
 }
@@ -11,17 +11,31 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
 import { User } from "@/types"
-import { Pencil, Power, PowerOff } from "lucide-react"
+import { Pencil, Trash2 } from "lucide-react"
+import { toast } from "sonner"

 interface UsersTableProps {
  data: User[]
  loading?: boolean
+  onUserDeleted?: () => void
 }

-export function UsersTable({ data, loading }: UsersTableProps) {
+export function UsersTable({ data, loading, onUserDeleted }: UsersTableProps) {
  const [editingUser, setEditingUser] = useState<User | null>(null)
  const [editOpen, setEditOpen] = useState(false)

+  const handleDelete = async (id: string) => {
+    if (!confirm("Are you sure you want to delete this user?")) return
+    try {
+      const res = await fetch(`/api/users/${id}`, { method: "DELETE" })
+      if (!res.ok) throw new Error()
+      toast.success("User deleted")
+      onUserDeleted?.()
+    } catch {
+      toast.error("Failed to delete user")
+    }
+  }
+
  const columns: ColumnDef<User>[] = useMemo(
    () => [
      {
@@ -76,15 +90,15 @@ export function UsersTable({ data, loading }: UsersTableProps) {
        ),
        cell: ({ row }) => {
          const role = row.getValue("role") as string
+          const colors: Record<string, string> = {
+            super_admin: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+            admin: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+            sales_user: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
+            developer: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
+          }
          return (
-            <Badge
-              variant="outline"
-              className={role === "admin"
-                ? "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20 capitalize"
-                : "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20 capitalize"
-              }
-            >
-              {role}
+            <Badge variant="outline" className={`capitalize ${colors[role] || ""}`}>
+              {role.replace("_", " ")}
            </Badge>
          )
        },
@@ -117,8 +131,9 @@ export function UsersTable({ data, loading }: UsersTableProps) {
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                onClick={() => handleDelete(user.id)}
              >
-                {user.active ? <PowerOff className="h-4 w-4" /> : <Power className="h-4 w-4" />}
+                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          )
@@ -140,6 +155,7 @@ export function UsersTable({ data, loading }: UsersTableProps) {
        open={editOpen}
        onOpenChange={setEditOpen}
        user={editingUser}
+        onUserCreated={onUserDeleted}
      />
    </>
  )
@@ -29,14 +29,14 @@ export function getDashboardStats(period: string): DashboardStats {
      statusCounts[l.status]++
    })

-    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" },
-    ]
-  }
+  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" },
+  ]
+}

  return {
    totalLeads,
@@ -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,
@@ -23,7 +23,7 @@ export const users: User[] = [
    id: "u2",
    name: "Marcus Johnson",
    email: "marcus@coastalit.com",
-    role: "sales",
+    role: "sales_user",
    active: true,
    avatar: "https://ui-avatars.com/api/?name=Marcus+Johnson&background=2563eb&color=fff&size=128",
    createdAt: "2025-02-01T09:00:00Z",
@@ -32,7 +32,7 @@ export const users: User[] = [
    id: "u3",
    name: "Emily Rodriguez",
    email: "emily@coastalit.com",
-    role: "sales",
+    role: "sales_user",
    active: true,
    avatar: "https://ui-avatars.com/api/?name=Emily+Rodriguez&background=3b82f6&color=fff&size=128",
    createdAt: "2025-02-15T10:00:00Z",
@@ -41,7 +41,7 @@ export const users: User[] = [
    id: "u4",
    name: "David Kim",
    email: "david@coastalit.com",
-    role: "sales",
+    role: "sales_user",
    active: true,
    avatar: "https://ui-avatars.com/api/?name=David+Kim&background=60a5fa&color=fff&size=128",
    createdAt: "2025-03-01T08:00:00Z",
@@ -50,7 +50,7 @@ export const users: User[] = [
    id: "u5",
    name: "Jessica Patel",
    email: "jessica@coastalit.com",
-    role: "sales",
+    role: "sales_user",
    active: false,
    avatar: "https://ui-avatars.com/api/?name=Jessica+Patel&background=93c5fd&color=fff&size=128",
    createdAt: "2025-03-10T09:00:00Z",
@@ -59,7 +59,7 @@ export const users: User[] = [
    id: "u6",
    name: "Alex Thompson",
    email: "alex@coastalit.com",
-    role: "sales",
+    role: "sales_user",
    active: true,
    avatar: "https://ui-avatars.com/api/?name=Alex+Thompson&background=1d4ed8&color=fff&size=128",
    createdAt: "2025-04-01T08:00:00Z",
@@ -68,7 +68,7 @@ export const users: User[] = [
    id: "u7",
    name: "Rachel Williams",
    email: "rachel@coastalit.com",
-    role: "sales",
+    role: "sales_user",
    active: true,
    avatar: "https://ui-avatars.com/api/?name=Rachel+Williams&background=2563eb&color=fff&size=128",
    createdAt: "2025-04-15T10:00:00Z",
@@ -1,35 +1,35 @@
-import { SignJWT, jwtVerify } from "jose"
-import bcrypt from "bcryptjs"
-import { query } from "@/lib/db"
-import { cookies } from "next/headers"
+import { SignJWT, jwtVerify } from "jose";
+import bcrypt from "bcryptjs";
+import { query } from "@/lib/db";
+import { cookies } from "next/headers";

 const JWT_SECRET = new TextEncoder().encode(
-  process.env.JWT_SECRET || "fallback-dev-secret-do-not-use-in-production"
-)
+  process.env.JWT_SECRET || "fallback-dev-secret-do-not-use-in-production",
+);

-const SESSION_COOKIE = "session"
-const MAX_FAILED_ATTEMPTS = 5
-const LOCKOUT_DURATION_MINUTES = 15
+const SESSION_COOKIE = "session";
+const MAX_FAILED_ATTEMPTS = 5;
+const LOCKOUT_DURATION_MINUTES = 15;

 export interface SessionUser {
-  id: string
-  username: string
-  email: string
-  firstName: string
-  lastName: string
-  role: string
-  avatar: string
+  id: string;
+  username: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  avatar: string;
 }

 export async function hashPassword(password: string): Promise<string> {
-  return bcrypt.hash(password, 12)
+  return bcrypt.hash(password, 12);
 }

 export async function comparePassword(
  password: string,
-  hash: string
+  hash: string,
 ): Promise<boolean> {
-  return bcrypt.compare(password, hash)
+  return bcrypt.compare(password, hash);
 }

 export async function signToken(payload: { userId: string; role: string }) {
@@ -37,15 +37,15 @@ export async function signToken(payload: { userId: string; role: string }) {
    .setProtectedHeader({ alg: "HS256" })
    .setExpirationTime("24h")
    .setIssuedAt()
-    .sign(JWT_SECRET)
+    .sign(JWT_SECRET);
 }

 export async function verifyToken(token: string) {
  try {
-    const { payload } = await jwtVerify(token, JWT_SECRET)
-    return payload as { userId: string; role: string }
+    const { payload } = await jwtVerify(token, JWT_SECRET);
+    return payload as { userId: string; role: string };
  } catch {
-    return null
+    return null;
  }
 }

@@ -60,9 +60,9 @@ export async function getUserByEmail(email: string) {
     JOIN roles r ON r.id = ur.role_id
     WHERE u.email = $1 AND u.deleted_at IS NULL
     LIMIT 1`,
-    [email.toLowerCase().trim()]
-  )
-  return result.rows[0] || null
+    [email.toLowerCase().trim()],
+  );
+  return result.rows[0] || null;
 }

 export async function getUserByUsername(username: string) {
@@ -76,9 +76,9 @@ export async function getUserByUsername(username: string) {
     JOIN roles r ON r.id = ur.role_id
     WHERE u.username = $1 AND u.deleted_at IS NULL
     LIMIT 1`,
-    [username.toLowerCase().trim()]
-  )
-  return result.rows[0] || null
+    [username.toLowerCase().trim()],
+  );
+  return result.rows[0] || null;
 }

 export async function getUserById(id: string) {
@@ -91,9 +91,9 @@ export async function getUserById(id: string) {
     JOIN roles r ON r.id = ur.role_id
     WHERE u.id = $1 AND u.deleted_at IS NULL
     LIMIT 1`,
-    [id]
-  )
-  return result.rows[0] || null
+    [id],
+  );
+  return result.rows[0] || null;
 }

 export async function recordLoginAttempt(
@@ -102,13 +102,20 @@ export async function recordLoginAttempt(
  ipAddress: string,
  userAgent: string | null,
  wasSuccessful: boolean,
-  failureReason?: string
+  failureReason?: string,
 ) {
  await query(
    `INSERT INTO login_attempts (user_id, username_attempted, ip_address, user_agent, was_successful, failure_reason)
     VALUES ($1, $2, $3, $4, $5, $6)`,
-    [userId, usernameAttempted, ipAddress, userAgent, wasSuccessful, failureReason || null]
-  )
+    [
+      userId,
+      usernameAttempted,
+      ipAddress,
+      userAgent,
+      wasSuccessful,
+      failureReason || null,
+    ],
+  );
 }

 export async function incrementFailedAttempts(userId: string) {
@@ -121,8 +128,8 @@ export async function incrementFailedAttempts(userId: string) {
           ELSE locked_until
         END
     WHERE id = $1`,
-    [userId, MAX_FAILED_ATTEMPTS, LOCKOUT_DURATION_MINUTES]
-  )
+    [userId, MAX_FAILED_ATTEMPTS, LOCKOUT_DURATION_MINUTES],
+  );
 }

 export async function resetFailedAttempts(userId: string) {
@@ -132,38 +139,38 @@ export async function resetFailedAttempts(userId: string) {
         locked_until = NULL,
         last_login_at = NOW()
     WHERE id = $1`,
-    [userId]
-  )
+    [userId],
+  );
 }

 export async function isAccountLocked(user: {
-  is_locked: boolean
-  locked_until: Date | null
+  is_locked: boolean;
+  locked_until: Date | null;
 }): Promise<{ locked: boolean; reason?: string }> {
  if (user.is_locked) {
-    return { locked: true, reason: "Account has been locked by an administrator." }
+    return {
+      locked: true,
+      reason: "Account has been locked by an administrator.",
+    };
  }
  if (user.locked_until && new Date(user.locked_until) > new Date()) {
    const minutes = Math.ceil(
-      (new Date(user.locked_until).getTime() - Date.now()) / 60000
-    )
+      (new Date(user.locked_until).getTime() - Date.now()) / 60000,
+    );
    return {
      locked: true,
      reason: `Account is temporarily locked due to too many failed attempts. Try again in ${minutes} minute(s).`,
-    }
+    };
  }
-  return { locked: false }
+  return { locked: false };
 }

-export function mapDbUserToSessionUser(dbUser: Record<string, unknown>): SessionUser {
-  const roleName = dbUser.role_name as string
-  const roleMap: Record<string, string> = {
-    SUPER_ADMIN: "super_admin",
-    ADMIN: "admin",
-    DEVELOPER: "developer",
-    SALES_USER: "sales",
-  }
-  const mappedRole = roleMap[roleName] || "sales"
+export function mapDbUserToSessionUser(
+  dbUser: Record<string, unknown>,
+): SessionUser {
+  const roleName = dbUser.role_name as string;
+  const mappedRole =
+    roleName === "SUPER_ADMIN" || roleName === "ADMIN" ? "admin" : "sales";

  return {
    id: dbUser.id as string,
@@ -171,53 +178,53 @@ export function mapDbUserToSessionUser(dbUser: Record<string, unknown>): Session
    email: dbUser.email as string,
    firstName: dbUser.first_name as string,
    lastName: dbUser.last_name as string,
-    role: mappedRole,
+    role: roleName,
    avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(
-      `${dbUser.first_name}+${dbUser.last_name}`
+      `${dbUser.first_name}+${dbUser.last_name}`,
    )}&background=1d4ed8&color=fff&size=128`,
-  }
+  };
 }

 export async function createSession(userId: string, role: string) {
-  const token = await signToken({ userId, role })
+  const token = await signToken({ userId, role });

-  const cookieStore = await cookies()
+  const cookieStore = await cookies();
  cookieStore.set(SESSION_COOKIE, token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    path: "/",
    maxAge: 60 * 60 * 24, // 24 hours
-  })
+  });

-  return token
+  return token;
 }

 export async function destroySession() {
-  const cookieStore = await cookies()
+  const cookieStore = await cookies();
  cookieStore.set(SESSION_COOKIE, "", {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    path: "/",
    maxAge: 0,
-  })
+  });
 }

 export async function getSessionUser(): Promise<SessionUser | null> {
  try {
-    const cookieStore = await cookies()
-    const token = cookieStore.get(SESSION_COOKIE)?.value
-    if (!token) return null
+    const cookieStore = await cookies();
+    const token = cookieStore.get(SESSION_COOKIE)?.value;
+    if (!token) return null;

-    const payload = await verifyToken(token)
-    if (!payload) return null
+    const payload = await verifyToken(token);
+    if (!payload) return null;

-    const dbUser = await getUserById(payload.userId)
-    if (!dbUser) return null
+    const dbUser = await getUserById(payload.userId);
+    if (!dbUser) return null;

-    return mapDbUserToSessionUser(dbUser)
+    return mapDbUserToSessionUser(dbUser);
  } catch {
-    return null
+    return null;
  }
 }
@@ -1,89 +1,99 @@
-export type LeadStatus = "open" | "contacted" | "pending" | "closed" | "ignored"
-export type UserRole = "super_admin" | "admin" | "developer" | "sales"
+export type LeadStatus =
+  | "open"
+  | "contacted"
+  | "pending"
+  | "closed"
+  | "ignored";
+export type UserRole = "admin" | "sales";

 export interface User {
-  id: string
-  name: string
-  email: string
-  role: UserRole
-  active: boolean
-  avatar: string
-  createdAt: string
+  id: string;
+  name: string;
+  email: string;
+  role: UserRole;
+  active: boolean;
+  avatar: string;
+  createdAt: string;
 }

 export interface Lead {
-  id: string
-  companyName: string
-  contactName: string
-  email: string
-  phone: string
-  source: string
-  description: string
-  status: LeadStatus
-  assignedUserId: string | null
-  assignedUser: User | null
-  createdAt: string
-  updatedAt: string
+  id: string;
+  companyName: string;
+  contactName: string;
+  email: string;
+  phone: string;
+  source: string;
+  description: string;
+  status: LeadStatus;
+  assignedUserId: string | null;
+  assignedUser: User | null;
+  createdAt: string;
+  updatedAt: string;
 }

 export interface Note {
-  id: string
-  leadId: string
-  userId: string
-  authorName: string
-  authorAvatar: string
-  authorRole: UserRole
-  note: string
-  createdAt: string
-  updatedAt: string
+  id: string;
+  leadId: string;
+  userId: string;
+  authorName: string;
+  authorAvatar: string;
+  authorRole: UserRole;
+  note: string;
+  createdAt: string;
+  updatedAt: string;
 }

 export interface DashboardStats {
-  totalLeads: number
-  openLeads: number
-  contactedLeads: number
-  pendingLeads: number
-  closedLeads: number
-  ignoredLeads: number
-  conversionRate: number
-  leadsPerMonth: { label: string; leads: number; closed: number }[]
-  recentLeads: Lead[]
-  statusDistribution: { name: string; value: number; color: string }[]
-  periodLabel: string
+  totalLeads: number;
+  openLeads: number;
+  contactedLeads: number;
+  pendingLeads: number;
+  closedLeads: number;
+  ignoredLeads: number;
+  conversionRate: number;
+  leadsPerMonth: { label: string; leads: number; closed: number }[];
+  recentLeads: Lead[];
+  statusDistribution: { name: string; value: number; color: string }[];
+  periodLabel: string;
 }

 export interface ColumnFilter {
-  id: string
-  value: unknown
+  id: string;
+  value: unknown;
 }

-export type NotificationType = "lead_created" | "lead_status_changed" | "lead_assigned" | "chat_message" | "note_added"
+export type NotificationType =
+  | "lead_created"
+  | "lead_status_changed"
+  | "lead_assigned"
+  | "chat_message"
+  | "note_added";

 export interface Notification {
-  id: string
-  type: NotificationType
-  title: string
-  description: string
-  timestamp: string
-  read: boolean
-  link?: string
+  id: string;
+  type: NotificationType;
+  title: string;
+  description: string;
+  timestamp: string;
+  read: boolean;
+  link?: string;
 }

 export interface ChatMessage {
-  id: string
-  conversationId: string
-  senderId: string
-  senderName: string
-  senderAvatar: string
-  content: string
-  timestamp: string
+  id: string;
+  conversationId: string;
+  senderId: string;
+  senderName: string;
+  senderAvatar: string;
+  content: string;
+  timestamp: string;
 }

 export interface Conversation {
-  id: string
-  participants: { id: string; name: string; avatar: string; role: string }[]
-  lastMessage: string
-  lastMessageTime: string
-  unread: number
-  messages: ChatMessage[]
+  id: string;
+  participants: { id: string; name: string; avatar: string; role: string }[];
+  lastMessage: string;
+  lastMessageTime: string;
+  unread: number;
+  messages: ChatMessage[];
 }