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
@@ -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}
      />
    </>
  )