Alert Dialog Close overlay issue.

[inuka-mayakaduwa]

Hi, I am having trouble where when i open and close the alert dialog of edit roles it still has an overlay that prevents me from clicking anything else. I've tried using AI to fix this, and no luck.

"use client";

import React, { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import {
  MoreVertical,
  Pencil,
  Key,
  Trash2,
  ClipboardList,
  UserCog,
  FileText,
  Building2,
  ArrowUpDown,
  Search,
  X,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
} from "@/components/ui/dropdown-menu";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";

// --- Type Definitions ---
type Organization = {
  id: number;
  name: string;
  isStartup: boolean;
};

export type User = {
  id: number;
  image: string | null;
  name: string;
  email: string;
  mobile: string | null;
  SystemRole: string;
  lastLogin: string | null;
  userOrganizations: { organization: Organization }[];
  roles: { role: string }[];
};

type ApiResponse = {
  total: number;
  page: number;
  limit: number;
  totalPages: number;
  data: User[];
};

// --- Role Options for UsersContent ---
const ROLE_OPTIONS = [
  { value: "USER", label: "User (System Role)", type: "system" },
  { value: "Admin", label: "Admin (System Role)", type: "system" },
  { value: "Moderator", label: "Moderator (System Role)", type: "system" },
  { value: "Inspector", label: "Inspector (System Role)", type: "system" },
  { value: "STARTUP_FOUNDER", label: "Startup Founder (User Role)", type: "user" },
  { value: "ECOSYSTEM_PARTNER", label: "Ecosystem Partner (User Role)", type: "user" },
  { value: "INVESTOR", label: "Investor (User Role)", type: "user" },
  { value: "MENTOR", label: "Mentor (User Role)", type: "user" },
  { value: "PROGRAM_HOST", label: "Program Host (User Role)", type: "user" },
  { value: "EVENT_HOST", label: "Event Host (User Role)", type: "user" },
  { value: "Admin", label: "Admin (Organization Role)", type: "organization" },
  { value: "Editor", label: "Editor (Organization Role)", type: "organization" },
];

// --- UsersContent Component ---
export function UsersContent() {
  const { data: session, status } = useSession();
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [sortBy, setSortBy] = useState<"name" | "lastLogin" | "createdAt">("name");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
  const [search, setSearch] = useState("");
  const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
  const limit = 10; // Number of users per page

  // State for Edit Roles dialog
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const [isEditRolesOpen, setIsEditRolesOpen] = useState(false);

  useEffect(() => {
    if (status === "authenticated") {
      fetchUsers();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [status, page, sortBy, sortOrder, search, selectedRoles]);

  const fetchUsers = async () => {
    try {
      setLoading(true);
      const queryParams = new URLSearchParams();
      queryParams.append("page", page.toString());
      queryParams.append("limit", limit.toString());
      queryParams.append("sortBy", sortBy);
      queryParams.append("sortOrder", sortOrder);
      if (search.trim()) {
        queryParams.append("search", search);
      }
      if (selectedRoles.length > 0) {
        queryParams.append("role", selectedRoles.join(","));
      }
      const response = await fetch(`/api/user/list?${queryParams.toString()}`, {
        credentials: "same-origin",
      });
      if (!response.ok) {
        throw new Error("Failed to fetch users");
      }
      const data: ApiResponse = await response.json();
      setUsers(data.data);
      setTotalPages(data.totalPages);
      setLoading(false);
    } catch (err: any) {
      setError(err.message);
      setLoading(false);
    }
  };

  const handleSort = (field: "name" | "lastLogin" | "createdAt") => {
    if (sortBy === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSortBy(field);
      setSortOrder("asc");
    }
  };

  const handleEditInformation = (userId: number) => {
    console.log("Edit information for user:", userId);
  };

  const handleChangePassword = (userId: number) => {
    console.log("Change password for user:", userId);
  };

  const handleViewAuditLog = (userId: number) => {
    console.log("View audit log for user:", userId);
  };

  const handleManageOrganizations = (userId: number) => {
    console.log("Manage organizations for user:", userId);
  };

  const handleDelete = (userId: number) => {
    console.log("Delete user:", userId);
  };

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
    setPage(1);
  };

  const handleRoleChange = (formattedRole: string) => {
    setSelectedRoles((prev) =>
      prev.includes(formattedRole)
        ? prev.filter((r) => r !== formattedRole)
        : [...prev, formattedRole]
    );
    setPage(1);
  };

  const handleClearSearch = () => {
    setSearch("");
    setPage(1);
  };

  const handleClearRoles = () => {
    setSelectedRoles([]);
    setPage(1);
  };

  const openEditRolesDialog = (user: User) => {
    console.log("Opening EditRolesDialog for user:", user);
    setSelectedUser(user);
    setIsEditRolesOpen(true);
  };

  const closeEditRolesDialog = () => {
    console.log("Closing EditRolesDialog");
    setIsEditRolesOpen(false);
    setSelectedUser(null);
  };

  if (status === "loading") return <div>Loading session...</div>;
  if (status === "unauthenticated") return <div>Access denied. Please log in.</div>;
  if (error) return <div>Error: {error}</div>;

  const canManageUsers =
    session?.user?.SystemRole === "Admin" || session?.user?.SystemRole === "Moderator";

  const getRoleLabel = (formattedRole: string) => {
    const parts = formattedRole.split(":");
    if (parts.length !== 2) return formattedRole;
    const [rType, rValue] = parts;
    const option = ROLE_OPTIONS.find((opt) => opt.type === rType && opt.value === rValue);
    return option ? option.label : formattedRole;
  };

  // Helper to clear focus when a DropdownMenu closes.
  const handleDropdownClose = (open: boolean) => {
    if (!open && document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }
  };

  return (
    <div className="container mx-auto px-4 py-8 relative">
      <h1 className="text-2xl font-bold mb-4">User Management</h1>
      <div className="mb-4 flex items-center space-x-4">
        <div className="relative flex-grow">
          <Input
            type="text"
            placeholder="Search users..."
            value={search}
            onChange={handleSearchChange}
            className="pl-10"
          />
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
        </div>
        <DropdownMenu onOpenChange={handleDropdownClose}>
          <DropdownMenuTrigger asChild>
            <Button variant="outline">
              Roles {selectedRoles.length > 0 && `(${selectedRoles.length})`}
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56">
            {ROLE_OPTIONS.map((roleOption) => {
              const formattedValue = `${roleOption.type}:${roleOption.value}`;
              return (
                <DropdownMenuItem
                  key={formattedValue}
                  className="flex items-center space-x-2"
                  onClick={() => handleRoleChange(formattedValue)}
                >
                  <Checkbox
                    id={`role-${formattedValue}`}
                    checked={selectedRoles.includes(formattedValue)}
                    onCheckedChange={() => handleRoleChange(formattedValue)}
                  />
                  <label htmlFor={`role-${formattedValue}`}>
                    {roleOption.label}
                  </label>
                </DropdownMenuItem>
              );
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      {(search || selectedRoles.length > 0) && (
        <div className="flex items-center space-x-2 mb-4">
          <span className="text-sm font-medium">Current Filters:</span>
          {search && (
            <Button variant="secondary" size="sm" onClick={handleClearSearch}>
              Search: {search}
              <X className="ml-2 h-4 w-4" />
            </Button>
          )}
          {selectedRoles.length > 0 && (
            <Button variant="secondary" size="sm" onClick={handleClearRoles}>
              Roles: {selectedRoles.map(getRoleLabel).join(", ")}
              <X className="ml-2 h-4 w-4" />
            </Button>
          )}
        </div>
      )}
      <div className="overflow-x-auto relative">
        <table className="min-w-full bg-white">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                <Button
                  variant="ghost"
                  onClick={() => handleSort("name")}
                  className="flex items-center"
                >
                  User
                  <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Contact
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Roles
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                <Button
                  variant="ghost"
                  onClick={() => handleSort("lastLogin")}
                  className="flex items-center"
                >
                  Last Login
                  <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                Organizations
              </th>
              {canManageUsers && (
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Actions
                </th>
              )}
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {users.map((user) => (
              <tr key={user.id}>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="flex items-center">
                    <div className="flex-shrink-0 h-10 w-10">
                      <Avatar>
                        <AvatarImage
                          src={user.image || ""}
                          alt={`${user.name}'s avatar`}
                          width={40}
                          height={40}
                        />
                        <AvatarFallback>
                          {user.name.charAt(0).toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                    </div>
                    <div className="ml-4">
                      <div className="text-sm font-medium text-gray-900">
                        {user.name}
                      </div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="text-sm text-gray-900">{user.email}</div>
                  <div className="text-sm text-gray-500">{user.mobile}</div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                    {user.SystemRole}
                  </span>
                  {user.roles.map((role, index) => (
                    <span
                      key={index}
                      className={`ml-1 px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                        index > 0 ? "bg-gray-100 text-gray-800" : ""
                      }`}
                    >
                      {role.role}
                    </span>
                  ))}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {user.lastLogin
                    ? new Date(user.lastLogin).toLocaleString()
                    : "Never"}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {user.userOrganizations.map((uo, index) =>
                    uo.organization.isStartup ? (
                      <a
                        key={uo.organization.id}
                        href={`/startup/view/${uo.organization.id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`${
                          index > 0 ? "ml-1" : ""
                        } px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-[#ffb81c] text-black hover:bg-[#e5a50f] transition-colors`}
                      >
                        {uo.organization.name}
                      </a>
                    ) : (
                      <span
                        key={uo.organization.id}
                        className={`${
                          index > 0 ? "ml-1" : ""
                        } px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800`}
                      >
                        {uo.organization.name}
                      </span>
                    )
                  )}
                </td>
                {canManageUsers && (
                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <DropdownMenu onOpenChange={handleDropdownClose}>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="h-8 w-8 p-0">
                          <span className="sr-only">Open menu</span>
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuSub>
                          <DropdownMenuSubTrigger>
                            <Pencil className="mr-2 h-4 w-4" />
                            <span>Edit</span>
                          </DropdownMenuSubTrigger>
                          <DropdownMenuSubContent>
                            <DropdownMenuItem
                              onClick={() => openEditRolesDialog(user)}
                            >
                              <UserCog className="mr-2 h-4 w-4" />
                              <span>Edit Roles</span>
                            </DropdownMenuItem>
                            <DropdownMenuItem
                              onClick={() => handleEditInformation(user.id)}
                            >
                              <FileText className="mr-2 h-4 w-4" />
                              <span>Edit Information</span>
                            </DropdownMenuItem>
                          </DropdownMenuSubContent>
                        </DropdownMenuSub>
                        <DropdownMenuItem
                          onClick={() => handleChangePassword(user.id)}
                        >
                          <Key className="mr-2 h-4 w-4" />
                          <span>Change Password</span>
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          onClick={() => handleViewAuditLog(user.id)}
                        >
                          <ClipboardList className="mr-2 h-4 w-4" />
                          <span>View Audit Log</span>
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          onClick={() => handleManageOrganizations(user.id)}
                        >
                          <Building2 className="mr-2 h-4 w-4" />
                          <span>Manage Organizations</span>
                        </DropdownMenuItem>
                        <DropdownMenuItem
                          onClick={() => handleDelete(user.id)}
                          className="text-red-600"
                        >
                          <Trash2 className="mr-2 h-4 w-4" />
                          <span>Delete User</span>
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
        {loading && (
          <div className="absolute inset-0 flex items-center justify-center bg-white/60">
            <div className="text-gray-700">Loading...</div>
          </div>
        )}
      </div>
      {totalPages > 1 && (
        <Pagination className="mt-4">
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                href="#"
                onClick={(e) => {
                  e.preventDefault();
                  setPage((prev) => Math.max(prev - 1, 1));
                }}
                className={page === 1 ? "pointer-events-none opacity-50" : ""}
              />
            </PaginationItem>
            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
              (pageNumber) => (
                <PaginationItem key={pageNumber}>
                  <PaginationLink
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      setPage(pageNumber);
                    }}
                    isActive={pageNumber === page}
                  >
                    {pageNumber}
                  </PaginationLink>
                </PaginationItem>
              )
            )}
            <PaginationItem>
              <PaginationNext
                href="#"
                onClick={(e) => {
                  e.preventDefault();
                  setPage((prev) => Math.min(prev + 1, totalPages));
                }}
                className={page === totalPages ? "pointer-events-none opacity-50" : ""}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      )}
      {selectedUser && (
        <EditRolesDialog
          user={selectedUser}
          open={isEditRolesOpen}
          onClose={closeEditRolesDialog}
          onRolesUpdated={(updatedUser: User) => {
            console.log("Parent: Roles updated", updatedUser);
            setUsers((prev) =>
              prev.map((u) => (u.id === updatedUser.id ? updatedUser : u))
            );
          }}
        />
      )}
    </div>
  );
}

// --- Merged EditRolesDialog Component ---
export function EditRolesDialog({
  user,
  open,
  onClose,
  onRolesUpdated,
}: {
  user: User;
  open: boolean;
  onClose: () => void;
  onRolesUpdated?: (updatedUser: User) => void;
}) {
  const { data: session } = useSession();
  const isAdmin = session?.user?.SystemRole === "Admin";
  const allowedTabs = isAdmin ? ["user", "system"] : ["user"];

  const [systemRole, setSystemRole] = useState<string>(user.SystemRole);
  const [userRoles, setUserRoles] = useState<string[]>(user.roles.map((r) => r.role));

  // Role options for the dialog
  const DIALOG_ROLE_OPTIONS = [
    { value: "USER", label: "User", type: "system" },
    { value: "Admin", label: "Admin", type: "system" },
    { value: "Moderator", label: "Moderator", type: "system" },
    { value: "Inspector", label: "Inspector", type: "system" },
    { value: "STARTUP_FOUNDER", label: "Startup Founder", type: "user" },
    { value: "ECOSYSTEM_PARTNER", label: "Ecosystem Partner", type: "user" },
    { value: "INVESTOR", label: "Investor", type: "user" },
    { value: "MENTOR", label: "Mentor", type: "user" },
    { value: "PROGRAM_HOST", label: "Program Host", type: "user" },
    { value: "EVENT_HOST", label: "Event Host", type: "user" },
  ];

  useEffect(() => {
    console.log("EditRolesDialog mounted, open:", open);
    return () => {
      console.log("EditRolesDialog unmounted");
    };
  }, []);

  useEffect(() => {
    console.log("EditRolesDialog open prop changed to:", open);
  }, [open]);

  const handleToggleUserRole = (role: string) => {
    setUserRoles((prev) => {
      const updated = prev.includes(role)
        ? prev.filter((r) => r !== role)
        : [...prev, role];
      console.log(`Toggled user role: ${role}. New userRoles:`, updated);
      return updated;
    });
  };

  const handleSystemRoleChange = (role: string) => {
    console.log("System role changed to:", role);
    setSystemRole(role);
  };

  const handleSave = async () => {
    console.log("Save clicked. systemRole:", systemRole, "userRoles:", userRoles);
    try {
      if (isAdmin) {
        await fetch("/api/user/update-user-roles", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          credentials: "same-origin",
          body: JSON.stringify({ userId: user.id, roles: userRoles }),
        });
        console.log("User roles updated on server.");

        await fetch("/api/user/update-system-role", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          credentials: "same-origin",
          body: JSON.stringify({ userId: user.id, systemRole }),
        });
        console.log("System role updated on server.");
      } else {
        await fetch("/api/user/update-user-roles", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          credentials: "same-origin",
          body: JSON.stringify({ userId: user.id, roles: userRoles }),
        });
        console.log("User roles updated on server (non-admin).");
      }

      const updatedUser: User = {
        ...user,
        SystemRole: systemRole,
        roles: userRoles.map((r) => ({ role: r })),
      };

      console.log("Updated user object:", updatedUser);
      onRolesUpdated?.(updatedUser);
      console.log("Closing dialog after save.");
      onClose();
    } catch (error) {
      console.error("Error updating roles", error);
    }
  };

  return (
    <AlertDialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose(); }}>
      <AlertDialogContent className="max-w-2xl">
        <AlertDialogHeader>
          <AlertDialogTitle>Modify Roles for {user.name}</AlertDialogTitle>
          <AlertDialogDescription>
            {isAdmin
              ? "Modify both the system role and user roles."
              : "Modify the user roles."}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <Tabs defaultValue={allowedTabs[0]} className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            {allowedTabs.includes("user") && <TabsTrigger value="user">User Roles</TabsTrigger>}
            {allowedTabs.includes("system") && (
              <TabsTrigger value="system">System Role</TabsTrigger>
            )}
          </TabsList>
          {allowedTabs.includes("user") && (
            <TabsContent value="user">
              {DIALOG_ROLE_OPTIONS.filter((r) => r.type === "user").map((role) => (
                <div key={role.value} className="flex items-center justify-between">
                  <Label>{role.label}</Label>
                  <Switch
                    checked={userRoles.includes(role.value)}
                    onCheckedChange={() => handleToggleUserRole(role.value)}
                  />
                </div>
              ))}
            </TabsContent>
          )}
          {allowedTabs.includes("system") && (
            <TabsContent value="system">
              {DIALOG_ROLE_OPTIONS.filter((r) => r.type === "system").map((role) => (
                <div key={role.value} className="flex items-center justify-between">
                  <Label>{role.label}</Label>
                  <input
                    type="radio"
                    name="systemRole"
                    checked={systemRole === role.value}
                    onChange={() => handleSystemRoleChange(role.value)}
                  />
                </div>
              ))}
            </TabsContent>
          )}
        </Tabs>
        <AlertDialogFooter>
          <Button
            variant="outline"
            onClick={() => {
              console.log("Cancel button clicked.");
              onClose();
            }}
          >
            Cancel
          </Button>
          <Button onClick={handleSave}>Save Changes</Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}