@m5kdev/web-ui 0.8.2 → 0.8.4

package/dist/src/modules/auth/components/AdminUserManagement.mjs

@@ -0,0 +1,974 @@
+import { useCallback, useEffect, useId, useState } from "react";
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Select, SelectItem, Spinner, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tooltip } from "@heroui/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { BarChart3, CalendarClock, ChevronDown, ChevronUp, Copy, Filter, Info, Link2, List, MoreHorizontal, Search, UserPlus, X } from "lucide-react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import * as authAdmin from "@m5kdev/frontend/modules/auth/hooks/useAuthAdmin";
+//#region src/modules/auth/components/AdminUserManagement.tsx
+function AdminUserManagement({ useTRPC }) {
+	const banReasonInputId = useId();
+	const customDurationId = useId();
+	const nameInputId = useId();
+	const emailInputId = useId();
+	const passwordInputId = useId();
+	const roleSelectId = useId();
+	const [page, setPage] = useState(0);
+	const [limit] = useState(10);
+	const [userToDelete, setUserToDelete] = useState(null);
+	const [userToBan, setUserToBan] = useState(null);
+	const [banReason, setBanReason] = useState("");
+	const [banExpiry, setBanExpiry] = useState("never");
+	const [customBanDays, setCustomBanDays] = useState(1);
+	const [isBanningUser, setIsBanningUser] = useState(false);
+	const [isUnbanningUser, setIsUnbanningUser] = useState({});
+	const [isImpersonatingUser, setIsImpersonatingUser] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [statusFilter, setStatusFilter] = useState("all");
+	const [sortField, setSortField] = useState("createdAt");
+	const [sortOrder, setSortOrder] = useState("desc");
+	const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
+	const [isCreateUserModalOpen, setIsCreateUserModalOpen] = useState(false);
+	const [newUserData, setNewUserData] = useState({
+		name: "",
+		email: "",
+		password: "",
+		role: "user"
+	});
+	const [isCreatingUser, setIsCreatingUser] = useState(false);
+	const [userForUsage, setUserForUsage] = useState(null);
+	const [userForMagicLink, setUserForMagicLink] = useState(null);
+	const [claimEmail, setClaimEmail] = useState("");
+	const [generatedMagicLink, setGeneratedMagicLink] = useState(null);
+	const [isGeneratingMagicLink, setIsGeneratingMagicLink] = useState(false);
+	const navigate = useNavigate();
+	const magicLinkEmailInputId = useId();
+	const generatedMagicLinkInputId = useId();
+	const trpc = useTRPC?.();
+	const queryClient = useQueryClient();
+	const usageQueryEnabled = !!userForUsage && !!trpc;
+	const usageQueryOptions = trpc?.ai.getUserUsage.queryOptions({ userId: userForUsage?.id ?? "" });
+	const usageQuery = useQuery({
+		...usageQueryOptions ?? {
+			queryKey: [["ai", "getUserUsage"], { input: { userId: "" } }],
+			queryFn: () => Promise.resolve({
+				inputTokens: null,
+				outputTokens: null,
+				totalTokens: null,
+				cost: null
+			})
+		},
+		enabled: usageQueryEnabled
+	});
+	const usageData = usageQuery.data;
+	const isLoadingUsage = usageQuery.isLoading;
+	const refetchUsage = () => {
+		if (usageQueryOptions) queryClient.invalidateQueries({ queryKey: usageQueryOptions.queryKey });
+	};
+	const resetPage = useCallback(() => {
+		setPage(0);
+	}, []);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedSearchQuery(searchQuery);
+			resetPage();
+		}, 300);
+		return () => clearTimeout(timer);
+	}, [searchQuery, resetPage]);
+	const handleStatusFilterChange = useCallback((value) => {
+		setStatusFilter(value);
+		resetPage();
+	}, [resetPage]);
+	const { data: listUsers = {
+		users: [],
+		total: 0
+	}, isLoading, refetch } = authAdmin.useListUsers({ query: {
+		searchField: "name",
+		searchOperator: "contains",
+		searchValue: debouncedSearchQuery,
+		limit,
+		offset: page * limit,
+		sortBy: sortField,
+		sortDirection: sortOrder
+	} });
+	const { users, total: totalUsers } = listUsers;
+	const { mutate: deleteUser, isPending: isDeleting } = authAdmin.useRemoveUser({
+		onSuccess: () => {
+			toast.success("User deleted successfully");
+			refetch();
+		},
+		onError: (error) => {
+			toast.error(`Error deleting user: ${error.message}`);
+		}
+	});
+	const { mutate: updateUser } = authAdmin.useUpdateUser({
+		onSuccess: () => {
+			toast.success("User updated successfully");
+			refetch();
+		},
+		onError: (error) => {
+			toast.error(`Error updating user: ${error.message}`);
+		}
+	});
+	const totalPages = totalUsers ? Math.ceil(totalUsers / limit) : 0;
+	const confirmDelete = (userId) => {
+		setUserToDelete(userId);
+	};
+	const handleDelete = () => {
+		if (userToDelete) {
+			deleteUser({ id: userToDelete });
+			setUserToDelete(null);
+		}
+	};
+	const openBanModal = (userId, userName) => {
+		setUserToBan({
+			id: userId,
+			name: userName
+		});
+		setBanReason("");
+		setBanExpiry("never");
+		setCustomBanDays(1);
+	};
+	const getBanExpiryInSeconds = () => {
+		switch (banExpiry) {
+			case "never": return;
+			case "1d": return 3600 * 24;
+			case "7d": return 3600 * 24 * 7;
+			case "30d": return 3600 * 24 * 30;
+			case "custom": return 3600 * 24 * customBanDays;
+			default: return;
+		}
+	};
+	const formatBanExpiry = (expiryTimestamp) => {
+		if (!expiryTimestamp) return "Never";
+		const expiryDate = new Date(expiryTimestamp);
+		const now = /* @__PURE__ */ new Date();
+		if (expiryDate < now) return "Expired";
+		const dateString = expiryDate.toLocaleDateString(void 0, {
+			year: "numeric",
+			month: "short",
+			day: "numeric"
+		});
+		const timeRemaining = expiryDate.getTime() - now.getTime();
+		return `${dateString} (${Math.ceil(timeRemaining / (1e3 * 60 * 60 * 24))} days)`;
+	};
+	const handleBanUser = async () => {
+		if (!userToBan) return;
+		try {
+			setIsBanningUser(true);
+			await authClient.admin.banUser({
+				userId: userToBan.id,
+				banReason: banReason || "No reason provided",
+				banExpiresIn: getBanExpiryInSeconds()
+			});
+			toast.success(`User ${userToBan.name} has been banned`);
+			setUserToBan(null);
+			await refetch();
+		} catch (error) {
+			toast.error(`Failed to ban user: ${error instanceof Error ? error.message : String(error)}`);
+		} finally {
+			setIsBanningUser(false);
+		}
+	};
+	const handleUnbanUser = async (userId) => {
+		try {
+			setIsUnbanningUser((prev) => ({
+				...prev,
+				[userId]: true
+			}));
+			await authClient.admin.unbanUser({ userId });
+			toast.success("User has been unbanned");
+			await refetch();
+		} catch (error) {
+			toast.error(`Failed to unban user: ${error instanceof Error ? error.message : String(error)}`);
+		} finally {
+			setIsUnbanningUser((prev) => ({
+				...prev,
+				[userId]: false
+			}));
+		}
+	};
+	const handleSetOnboardingUser = async (userId) => {
+		const onboardingStep = window.prompt(`Set onboarding step for user ${userId}`, "4");
+		const onboardingStepNumber = Number.parseInt(onboardingStep || "0");
+		if (onboardingStepNumber) updateUser({
+			userId,
+			data: { onboarding: onboardingStepNumber }
+		});
+	};
+	const handleImpersonateUser = async (userId) => {
+		try {
+			setIsImpersonatingUser(true);
+			await authClient.admin.impersonateUser({ userId });
+			toast.success("Now impersonating user");
+			window.location.assign("/");
+		} catch (error) {
+			setIsImpersonatingUser(false);
+			toast.error(`Failed to impersonate user: ${error instanceof Error ? error.message : String(error)}`);
+		}
+	};
+	const handlePageChange = (newPage) => {
+		if (newPage >= 0 && newPage < totalPages) setPage(newPage);
+	};
+	const handleSort = (field) => {
+		if (sortField === field) setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+		else {
+			setSortField(field);
+			setSortOrder("asc");
+		}
+	};
+	const renderSortIcon = (field) => {
+		if (sortField !== field) return null;
+		return sortOrder === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 inline ml-1" });
+	};
+	const clearFilters = () => {
+		setSearchQuery("");
+		setStatusFilter("all");
+		setSortField("createdAt");
+		setSortOrder("desc");
+	};
+	const openCreateUserModal = () => {
+		setNewUserData({
+			name: "",
+			email: "",
+			password: "",
+			role: "user"
+		});
+		setIsCreateUserModalOpen(true);
+	};
+	const handleCreateUser = async () => {
+		if (!newUserData.name || !newUserData.email || !newUserData.password) {
+			toast.error("Please fill in all required fields");
+			return;
+		}
+		try {
+			setIsCreatingUser(true);
+			await authClient.admin.createUser({
+				name: newUserData.name,
+				email: newUserData.email,
+				password: newUserData.password,
+				role: newUserData.role
+			});
+			toast.success(`User ${newUserData.name} has been created`);
+			setIsCreateUserModalOpen(false);
+			await refetch();
+		} catch (error) {
+			toast.error(`Failed to create user: ${error instanceof Error ? error.message : String(error)}`);
+		} finally {
+			setIsCreatingUser(false);
+		}
+	};
+	const handleNewUserDataChange = (field, value) => {
+		setNewUserData((prev) => ({
+			...prev,
+			[field]: value
+		}));
+	};
+	const openUsageModal = (userId, userName) => {
+		setUserForUsage({
+			id: userId,
+			name: userName
+		});
+		refetchUsage();
+	};
+	const formatTokenCount = (count) => {
+		if (count === null || count === void 0) return "—";
+		return count.toLocaleString();
+	};
+	const formatCost = (cost) => {
+		if (cost === null || cost === void 0) return "—";
+		return `$${cost.toFixed(4)}`;
+	};
+	const createAccountClaimCodeMutation = useMutation(trpc ? trpc.auth.createAccountClaimCode.mutationOptions() : { mutationFn: async () => {
+		throw new Error("Account claim actions are not available in this app");
+	} });
+	const generateAccountClaimMagicLinkMutation = useMutation(trpc ? trpc.auth.generateAccountClaimMagicLink.mutationOptions() : { mutationFn: async () => {
+		throw new Error("Account claim actions are not available in this app");
+	} });
+	const openMagicLinkModal = (userId, userName, userEmail) => {
+		setUserForMagicLink({
+			id: userId,
+			name: userName,
+			email: userEmail
+		});
+		setClaimEmail(userEmail ?? "");
+		setGeneratedMagicLink(null);
+	};
+	const handleGenerateMagicLink = async () => {
+		if (!trpc) {
+			toast.error("Account claim actions are not available in this app");
+			return;
+		}
+		if (!userForMagicLink) return;
+		const normalizedEmail = claimEmail.trim().toLowerCase();
+		if (!normalizedEmail) {
+			toast.error("Email is required");
+			return;
+		}
+		if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
+			toast.error("Please enter a valid email address");
+			return;
+		}
+		try {
+			setIsGeneratingMagicLink(true);
+			const claim = await createAccountClaimCodeMutation.mutateAsync({ userId: userForMagicLink.id });
+			setGeneratedMagicLink((await generateAccountClaimMagicLinkMutation.mutateAsync({
+				claimId: claim.id,
+				email: normalizedEmail
+			})).url);
+			toast.success("Magic login link generated");
+		} catch (error) {
+			toast.error(`Failed to generate magic link: ${error instanceof Error ? error.message : String(error)}`);
+		} finally {
+			setIsGeneratingMagicLink(false);
+		}
+	};
+	const copyGeneratedMagicLink = async () => {
+		if (!generatedMagicLink) return;
+		try {
+			await navigator.clipboard.writeText(generatedMagicLink);
+			toast.success("Magic link copied");
+		} catch {
+			toast.error("Failed to copy link");
+		}
+	};
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center p-8",
+		children: /* @__PURE__ */ jsx(Spinner, {})
+	});
+	const openWaitlistModal = () => {
+		navigate("/admin/waitlist");
+	};
+	const hasActiveFilters = debouncedSearchQuery || statusFilter !== "all" || sortField !== "createdAt" || sortOrder !== "desc";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4 p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-center",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: "User Management"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsxs(Button, {
+							onPress: openWaitlistModal,
+							size: "sm",
+							children: [/* @__PURE__ */ jsx(List, { className: "h-4 w-4 mr-2" }), "Waitlist"]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							onPress: openCreateUserModal,
+							size: "sm",
+							children: [/* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4 mr-2" }), "Create User"]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "text-sm text-muted-foreground",
+							children: ["Total users: ", totalUsers || 0]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col sm:flex-row gap-3 items-start sm:items-center",
+				children: [/* @__PURE__ */ jsxs("form", {
+					className: "relative flex-1",
+					onSubmit: (e) => {
+						e.preventDefault();
+						setDebouncedSearchQuery(searchQuery);
+						resetPage();
+					},
+					children: [
+						/* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }),
+						/* @__PURE__ */ jsx(Input, {
+							"aria-label": "Search users",
+							placeholder: "Search users by name or email...",
+							className: "pl-8 w-full",
+							value: searchQuery,
+							onChange: (e) => setSearchQuery(e.target.value),
+							variant: "bordered"
+						}),
+						searchQuery && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setSearchQuery(""),
+							className: "absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground",
+							"aria-label": "Clear search",
+							children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsxs(Select, {
+						"aria-label": "Status filter",
+						selectedKeys: new Set([statusFilter]),
+						onSelectionChange: (keys) => handleStatusFilterChange(Array.from(keys)[0]),
+						className: "w-[160px]",
+						startContent: /* @__PURE__ */ jsx(Filter, { className: "mr-1 h-4 w-4" }),
+						children: [
+							/* @__PURE__ */ jsx(SelectItem, { children: "All Users" }, "all"),
+							/* @__PURE__ */ jsx(SelectItem, { children: "Active Only" }, "active"),
+							/* @__PURE__ */ jsx(SelectItem, { children: "Banned Only" }, "banned")
+						]
+					}), hasActiveFilters && /* @__PURE__ */ jsxs(Button, {
+						variant: "bordered",
+						size: "sm",
+						onPress: clearFilters,
+						children: [/* @__PURE__ */ jsx(X, { className: "mr-1 h-4 w-4" }), "Clear Filters"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border rounded-lg overflow-hidden",
+				children: /* @__PURE__ */ jsxs(Table, {
+					"aria-label": "Users table",
+					removeWrapper: true,
+					children: [/* @__PURE__ */ jsxs(TableHeader, { children: [
+						/* @__PURE__ */ jsx(TableColumn, { children: "ID" }),
+						/* @__PURE__ */ jsxs(TableColumn, {
+							className: "cursor-pointer",
+							onClick: () => handleSort("name"),
+							children: ["Name ", renderSortIcon("name")]
+						}),
+						/* @__PURE__ */ jsxs(TableColumn, {
+							className: "cursor-pointer",
+							onClick: () => handleSort("email"),
+							children: ["Email ", renderSortIcon("email")]
+						}),
+						/* @__PURE__ */ jsxs(TableColumn, {
+							className: "cursor-pointer",
+							onClick: () => handleSort("role"),
+							children: ["Role ", renderSortIcon("role")]
+						}),
+						/* @__PURE__ */ jsx(TableColumn, { children: "Status" }),
+						/* @__PURE__ */ jsx(TableColumn, { children: "Onboarding" }),
+						/* @__PURE__ */ jsxs(TableColumn, {
+							className: "cursor-pointer",
+							onClick: () => handleSort("createdAt"),
+							children: ["Created At ", renderSortIcon("createdAt")]
+						}),
+						/* @__PURE__ */ jsx(TableColumn, {
+							className: "text-right",
+							children: "Actions"
+						})
+					] }), /* @__PURE__ */ jsx(TableBody, {
+						items: users ?? [],
+						emptyContent: hasActiveFilters ? "No users found matching your filters" : "No users found",
+						children: (user) => {
+							const onboarding = user.onboarding;
+							return /* @__PURE__ */ jsxs(TableRow, { children: [
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "font-mono text-xs",
+									children: user.id
+								}),
+								/* @__PURE__ */ jsx(TableCell, { children: user.name }),
+								/* @__PURE__ */ jsx(TableCell, { children: user.email }),
+								/* @__PURE__ */ jsx(TableCell, { children: user.role || "user" }),
+								/* @__PURE__ */ jsx(TableCell, { children: user.banned ? /* @__PURE__ */ jsx(Tooltip, {
+									content: /* @__PURE__ */ jsxs("div", {
+										className: "space-y-1 text-xs",
+										children: [/* @__PURE__ */ jsxs("p", { children: [
+											/* @__PURE__ */ jsx("strong", { children: "Reason:" }),
+											" ",
+											user.banReason || "No reason provided"
+										] }), user.banExpires && /* @__PURE__ */ jsxs("p", {
+											className: "flex items-center gap-1",
+											children: [/* @__PURE__ */ jsx(CalendarClock, { className: "h-3 w-3" }), /* @__PURE__ */ jsxs("span", { children: [
+												/* @__PURE__ */ jsx("strong", { children: "Expires:" }),
+												" ",
+												formatBanExpiry(user.banExpires.getTime())
+											] })]
+										})]
+									}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: "inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800",
+										children: ["Banned", user.banReason && /* @__PURE__ */ jsx(Info, { className: "h-3 w-3" })]
+									})
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800",
+									children: "Active"
+								}) }),
+								/* @__PURE__ */ jsx(TableCell, { children: onboarding ?? "—" }),
+								/* @__PURE__ */ jsx(TableCell, { children: user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "N/A" }),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "text-right",
+									children: /* @__PURE__ */ jsxs(Dropdown, {
+										placement: "bottom-end",
+										children: [/* @__PURE__ */ jsx(DropdownTrigger, { children: /* @__PURE__ */ jsx(Button, {
+											variant: "light",
+											size: "sm",
+											isIconOnly: true,
+											children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+										}) }), /* @__PURE__ */ jsxs(DropdownMenu, {
+											"aria-label": "User actions",
+											children: [
+												/* @__PURE__ */ jsx(DropdownItem, {
+													onClick: () => handleSetOnboardingUser(user.id),
+													children: "Set Onboarding"
+												}, "onboarding"),
+												/* @__PURE__ */ jsx(DropdownItem, {
+													onClick: () => openUsageModal(user.id, user.name),
+													className: useTRPC ? "" : "hidden",
+													children: /* @__PURE__ */ jsxs("span", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }), "View AI Usage"]
+													})
+												}, "usage"),
+												/* @__PURE__ */ jsx(DropdownItem, {
+													onClick: () => handleImpersonateUser(user.id),
+													isDisabled: user.banned || isImpersonatingUser,
+													children: isImpersonatingUser ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-3 w-3" }), "Impersonating..."] }) : "Impersonate"
+												}, "impersonate"),
+												/* @__PURE__ */ jsx(DropdownItem, {
+													onClick: () => openMagicLinkModal(user.id, user.name, user.email ?? null),
+													className: trpc ? "" : "hidden",
+													children: /* @__PURE__ */ jsxs("span", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ jsx(Link2, { className: "h-4 w-4" }), "Generate Magic Login Link"]
+													})
+												}, "magic-link"),
+												user.banned ? /* @__PURE__ */ jsx(DropdownItem, {
+													onClick: () => handleUnbanUser(user.id),
+													isDisabled: isUnbanningUser[user.id],
+													children: isUnbanningUser[user.id] ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-3 w-3" }), "Unbanning..."] }) : "Unban"
+												}, "unban") : /* @__PURE__ */ jsx(DropdownItem, {
+													onClick: () => openBanModal(user.id, user.name),
+													children: "Ban"
+												}, "ban"),
+												/* @__PURE__ */ jsx(DropdownItem, {
+													onClick: () => confirmDelete(user.id),
+													children: "Remove"
+												}, "remove")
+											]
+										})]
+									})
+								})
+							] }, user.id);
+						}
+					})]
+				})
+			}),
+			totalPages > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end space-x-2 py-4",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "bordered",
+						size: "sm",
+						onClick: () => handlePageChange(page - 1),
+						isDisabled: page === 0,
+						children: "Previous"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							"Page ",
+							page + 1,
+							" of ",
+							totalPages
+						]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "bordered",
+						size: "sm",
+						onClick: () => handlePageChange(page + 1),
+						isDisabled: page === totalPages - 1,
+						children: "Next"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: !!userToDelete,
+				onOpenChange: (open) => {
+					if (!open) setUserToDelete(null);
+				},
+				children: /* @__PURE__ */ jsx(ModalContent, { children: (onClose) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ModalHeader, {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-lg font-semibold",
+						children: "Are you sure?"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-default-600",
+						children: "This action cannot be undone. This will permanently delete the user and all their data."
+					})]
+				}), /* @__PURE__ */ jsxs(ModalFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "bordered",
+					onPress: onClose,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					color: "danger",
+					onPress: handleDelete,
+					isLoading: isDeleting,
+					children: "Delete"
+				})] })] }) })
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: !!userToBan,
+				onOpenChange: (open) => {
+					if (!open) setUserToBan(null);
+				},
+				children: /* @__PURE__ */ jsx(ModalContent, { children: (onClose) => /* @__PURE__ */ jsxs("form", {
+					onSubmit: (e) => {
+						e.preventDefault();
+						handleBanUser();
+					},
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ jsxs(ModalHeader, {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-lg font-semibold",
+								children: "Ban User"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-default-600",
+								children: userToBan && `You are about to ban ${userToBan.name}. This will prevent them from signing in.`
+							})]
+						}),
+						/* @__PURE__ */ jsxs(ModalBody, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ jsx("label", {
+										htmlFor: banReasonInputId,
+										className: "text-sm font-medium",
+										children: "Ban Reason"
+									}), /* @__PURE__ */ jsx(Input, {
+										id: banReasonInputId,
+										placeholder: "Enter reason for ban",
+										value: banReason,
+										onChange: (e) => setBanReason(e.target.value),
+										variant: "bordered",
+										labelPlacement: "outside",
+										label: "Ban Reason"
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm font-medium",
+										children: "Ban Duration"
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "grid grid-cols-2 gap-2",
+										children: [
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												variant: banExpiry === "never" ? "solid" : "bordered",
+												onClick: () => setBanExpiry("never"),
+												children: "Permanent"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												variant: banExpiry === "1d" ? "solid" : "bordered",
+												onClick: () => setBanExpiry("1d"),
+												children: "1 Day"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												variant: banExpiry === "7d" ? "solid" : "bordered",
+												onClick: () => setBanExpiry("7d"),
+												children: "7 Days"
+											}),
+											/* @__PURE__ */ jsx(Button, {
+												type: "button",
+												variant: banExpiry === "30d" ? "solid" : "bordered",
+												onClick: () => setBanExpiry("30d"),
+												children: "30 Days"
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx("input", {
+											type: "checkbox",
+											id: customDurationId,
+											checked: banExpiry === "custom",
+											onChange: (e) => e.target.checked ? setBanExpiry("custom") : setBanExpiry("never")
+										}), /* @__PURE__ */ jsx("label", {
+											htmlFor: customDurationId,
+											className: "text-sm font-medium",
+											children: "Custom Duration"
+										})]
+									}), banExpiry === "custom" && /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx(Input, {
+											type: "number",
+											min: "1",
+											value: customBanDays.toString(),
+											onChange: (e) => setCustomBanDays(Number(e.target.value)),
+											variant: "bordered",
+											labelPlacement: "outside",
+											label: "Custom duration (days)"
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-sm",
+											children: "Days"
+										})]
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs(ModalFooter, { children: [/* @__PURE__ */ jsx(Button, {
+							variant: "bordered",
+							type: "button",
+							onPress: onClose,
+							children: "Cancel"
+						}), /* @__PURE__ */ jsxs(Button, {
+							color: "danger",
+							type: "submit",
+							isDisabled: isBanningUser,
+							children: [isBanningUser ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null, isBanningUser ? "Banning..." : "Ban User"]
+						})] })
+					]
+				}) })
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: isCreateUserModalOpen,
+				onOpenChange: (open) => {
+					if (!open) setIsCreateUserModalOpen(false);
+				},
+				children: /* @__PURE__ */ jsx(ModalContent, { children: (onClose) => /* @__PURE__ */ jsxs("form", {
+					onSubmit: (e) => {
+						e.preventDefault();
+						handleCreateUser();
+					},
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ jsxs(ModalHeader, {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-lg font-semibold",
+								children: "Create New User"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-default-600",
+								children: "Fill in the details below to create a new user account."
+							})]
+						}),
+						/* @__PURE__ */ jsxs(ModalBody, {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: "space-y-2",
+									children: /* @__PURE__ */ jsx(Input, {
+										id: nameInputId,
+										label: "Name *",
+										labelPlacement: "outside",
+										placeholder: "Enter user's name",
+										value: newUserData.name,
+										onChange: (e) => handleNewUserDataChange("name", e.target.value),
+										variant: "bordered"
+									})
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "space-y-2",
+									children: /* @__PURE__ */ jsx(Input, {
+										id: emailInputId,
+										label: "Email *",
+										labelPlacement: "outside",
+										type: "email",
+										placeholder: "Enter user's email",
+										value: newUserData.email,
+										onChange: (e) => handleNewUserDataChange("email", e.target.value),
+										variant: "bordered"
+									})
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "space-y-2",
+									children: /* @__PURE__ */ jsx(Input, {
+										id: passwordInputId,
+										label: "Password *",
+										labelPlacement: "outside",
+										type: "password",
+										placeholder: "Enter password",
+										value: newUserData.password,
+										onChange: (e) => handleNewUserDataChange("password", e.target.value),
+										variant: "bordered"
+									})
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm font-medium",
+										id: roleSelectId,
+										children: "Role"
+									}), /* @__PURE__ */ jsxs(Select, {
+										"aria-label": "Select role",
+										"aria-labelledby": roleSelectId,
+										selectedKeys: new Set([newUserData.role]),
+										onSelectionChange: (keys) => handleNewUserDataChange("role", Array.from(keys)[0]),
+										children: [/* @__PURE__ */ jsx(SelectItem, { children: "User" }, "user"), /* @__PURE__ */ jsx(SelectItem, { children: "Admin" }, "admin")]
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs(ModalFooter, { children: [/* @__PURE__ */ jsx(Button, {
+							variant: "bordered",
+							type: "button",
+							onPress: onClose,
+							children: "Cancel"
+						}), /* @__PURE__ */ jsxs(Button, {
+							type: "submit",
+							color: "primary",
+							isDisabled: isCreatingUser,
+							children: [isCreatingUser ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null, isCreatingUser ? "Creating..." : "Create User"]
+						})] })
+					]
+				}) })
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: !!userForUsage,
+				onOpenChange: (open) => {
+					if (!open) setUserForUsage(null);
+				},
+				children: /* @__PURE__ */ jsx(ModalContent, { children: (onClose) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs(ModalHeader, {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: "text-lg font-semibold flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(BarChart3, { className: "h-5 w-5" }), "AI Usage"]
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-default-600",
+							children: userForUsage && `Usage statistics for ${userForUsage.name}`
+						})]
+					}),
+					/* @__PURE__ */ jsx(ModalBody, { children: isLoadingUsage ? /* @__PURE__ */ jsx("div", {
+						className: "flex justify-center py-8",
+						children: /* @__PURE__ */ jsx(Spinner, {})
+					}) : usageData ? /* @__PURE__ */ jsx("div", {
+						className: "space-y-4",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "p-4 rounded-lg bg-default-100",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm text-default-600",
+										children: "Input Tokens"
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-2xl font-semibold",
+										children: formatTokenCount(usageData.inputTokens)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "p-4 rounded-lg bg-default-100",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm text-default-600",
+										children: "Output Tokens"
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-2xl font-semibold",
+										children: formatTokenCount(usageData.outputTokens)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "p-4 rounded-lg bg-default-100",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm text-default-600",
+										children: "Total Tokens"
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-2xl font-semibold",
+										children: formatTokenCount(usageData.totalTokens)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "p-4 rounded-lg bg-primary-100",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm text-primary-600",
+										children: "Estimated Cost"
+									}), /* @__PURE__ */ jsx("p", {
+										className: "text-2xl font-semibold text-primary",
+										children: formatCost(usageData.cost)
+									})]
+								})
+							]
+						})
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "text-center py-8 text-default-600",
+						children: "No usage data available"
+					}) }),
+					/* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsx(Button, {
+						variant: "bordered",
+						onPress: onClose,
+						children: "Close"
+					}) })
+				] }) })
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: !!userForMagicLink,
+				onOpenChange: (open) => {
+					if (!open) {
+						setUserForMagicLink(null);
+						setGeneratedMagicLink(null);
+						setClaimEmail("");
+					}
+				},
+				children: /* @__PURE__ */ jsx(ModalContent, { children: (onClose) => /* @__PURE__ */ jsxs("form", {
+					onSubmit: (e) => {
+						e.preventDefault();
+						handleGenerateMagicLink();
+					},
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ jsxs(ModalHeader, {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-lg font-semibold",
+								children: "Generate Magic Login Link"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-default-600",
+								children: userForMagicLink && `Generate a one-time claim sign-in link for ${userForMagicLink.name}.`
+							})]
+						}),
+						/* @__PURE__ */ jsxs(ModalBody, {
+							className: "space-y-4",
+							children: [/* @__PURE__ */ jsx(Input, {
+								id: magicLinkEmailInputId,
+								label: "Claim email",
+								labelPlacement: "outside",
+								type: "email",
+								placeholder: "person@example.com",
+								value: claimEmail,
+								onChange: (e) => setClaimEmail(e.target.value),
+								variant: "bordered",
+								description: "This email is used for provider linking and future sign-ins."
+							}), /* @__PURE__ */ jsx(Input, {
+								id: generatedMagicLinkInputId,
+								label: "Generated link",
+								labelPlacement: "outside",
+								value: generatedMagicLink ?? "",
+								readOnly: true,
+								variant: "bordered",
+								placeholder: "Generate link to see it here"
+							})]
+						}),
+						/* @__PURE__ */ jsxs(ModalFooter, { children: [
+							/* @__PURE__ */ jsx(Button, {
+								variant: "bordered",
+								type: "button",
+								onPress: onClose,
+								children: "Close"
+							}),
+							/* @__PURE__ */ jsxs(Button, {
+								variant: "bordered",
+								type: "button",
+								onPress: copyGeneratedMagicLink,
+								isDisabled: !generatedMagicLink,
+								children: [/* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2" }), "Copy Link"]
+							}),
+							/* @__PURE__ */ jsxs(Button, {
+								color: "primary",
+								type: "submit",
+								isDisabled: isGeneratingMagicLink,
+								children: [isGeneratingMagicLink ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null, isGeneratingMagicLink ? "Generating..." : "Generate Link"]
+							})
+						] })
+					]
+				}) })
+			})
+		]
+	});
+}
+//#endregion
+export { AdminUserManagement };
+
+//# sourceMappingURL=AdminUserManagement.mjs.map