SuperAdmin changes

src/components/users/users-table.tsx

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