@m5kdev/web-ui 0.1.3 → 0.1.5

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

@@ -0,0 +1,422 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import * as authAdmin from "@m5kdev/frontend/modules/auth/hooks/useAuthAdmin";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { BarChart3, CalendarClock, ChevronDown, ChevronUp, Copy, Filter, Info, Link2, List, MoreHorizontal, Search, UserPlus, X, } from "lucide-react";
+import { useCallback, useEffect, useId, useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+export 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"); // "never", "1d", "7d", "30d", "custom"
+    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();
+    // AI Usage query
+    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 });
+        }
+    };
+    // Reset page on filter change
+    const resetPage = useCallback(() => {
+        setPage(0);
+    }, []);
+    // Debounce search query
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearchQuery(searchQuery);
+            resetPage();
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchQuery, resetPage]);
+    // Handle status filter change
+    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 undefined; // No expiry
+            case "1d":
+                return 60 * 60 * 24; // 1 day in seconds
+            case "7d":
+                return 60 * 60 * 24 * 7; // 7 days in seconds
+            case "30d":
+                return 60 * 60 * 24 * 30; // 30 days in seconds
+            case "custom":
+                return 60 * 60 * 24 * customBanDays; // Custom days in seconds
+            default:
+                return undefined;
+        }
+    };
+    const formatBanExpiry = (expiryTimestamp) => {
+        if (!expiryTimestamp)
+            return "Never";
+        const expiryDate = new Date(expiryTimestamp);
+        const now = new Date();
+        // If it's expired, return that
+        if (expiryDate < now)
+            return "Expired";
+        // Format the date
+        const dateString = expiryDate.toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        });
+        // Calculate time remaining
+        const timeRemaining = expiryDate.getTime() - now.getTime();
+        const daysRemaining = Math.ceil(timeRemaining / (1000 * 60 * 60 * 24));
+        return `${dateString} (${daysRemaining} 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("/"); // Force full reload to apply impersonated session immediately
+        }
+        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) {
+            // Toggle order if same field
+            setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+        }
+        else {
+            // Set new field and default to ascending
+            setSortField(field);
+            setSortOrder("asc");
+        }
+    };
+    const renderSortIcon = (field) => {
+        if (sortField !== field)
+            return null;
+        return sortOrder === "asc" ? (_jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" })) : (_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 === undefined)
+            return "—";
+        return count.toLocaleString();
+    };
+    const formatCost = (cost) => {
+        if (cost === null || cost === undefined)
+            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;
+        }
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(normalizedEmail)) {
+            toast.error("Please enter a valid email address");
+            return;
+        }
+        try {
+            setIsGeneratingMagicLink(true);
+            const claim = await createAccountClaimCodeMutation.mutateAsync({
+                userId: userForMagicLink.id,
+            });
+            const link = await generateAccountClaimMagicLinkMutation.mutateAsync({
+                claimId: claim.id,
+                email: normalizedEmail,
+            });
+            setGeneratedMagicLink(link.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 (_jsx("div", { className: "flex justify-center p-8", children: _jsx(Spinner, {}) }));
+    }
+    const openWaitlistModal = () => {
+        navigate("/admin/waitlist");
+    };
+    const hasActiveFilters = debouncedSearchQuery ||
+        statusFilter !== "all" ||
+        sortField !== "createdAt" ||
+        sortOrder !== "desc";
+    return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("h2", { className: "text-xl font-semibold", children: "User Management" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { onPress: openWaitlistModal, size: "sm", children: [_jsx(List, { className: "h-4 w-4 mr-2" }), "Waitlist"] }), _jsxs(Button, { onPress: openCreateUserModal, size: "sm", children: [_jsx(UserPlus, { className: "h-4 w-4 mr-2" }), "Create User"] }), _jsxs("div", { className: "text-sm text-muted-foreground", children: ["Total users: ", totalUsers || 0] })] })] }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-3 items-start sm:items-center", children: [_jsxs("form", { className: "relative flex-1", onSubmit: (e) => {
+                            e.preventDefault();
+                            setDebouncedSearchQuery(searchQuery);
+                            resetPage();
+                        }, children: [_jsx(Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }), _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 && (_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: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { "aria-label": "Status filter", selectedKeys: new Set([statusFilter]), onSelectionChange: (keys) => handleStatusFilterChange(Array.from(keys)[0]), className: "w-[160px]", startContent: _jsx(Filter, { className: "mr-1 h-4 w-4" }), children: [_jsx(SelectItem, { children: "All Users" }, "all"), _jsx(SelectItem, { children: "Active Only" }, "active"), _jsx(SelectItem, { children: "Banned Only" }, "banned")] }), hasActiveFilters && (_jsxs(Button, { variant: "bordered", size: "sm", onPress: clearFilters, children: [_jsx(X, { className: "mr-1 h-4 w-4" }), "Clear Filters"] }))] })] }), _jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs(Table, { "aria-label": "Users table", removeWrapper: true, children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: "ID" }), _jsxs(TableColumn, { className: "cursor-pointer", onClick: () => handleSort("name"), children: ["Name ", renderSortIcon("name")] }), _jsxs(TableColumn, { className: "cursor-pointer", onClick: () => handleSort("email"), children: ["Email ", renderSortIcon("email")] }), _jsxs(TableColumn, { className: "cursor-pointer", onClick: () => handleSort("role"), children: ["Role ", renderSortIcon("role")] }), _jsx(TableColumn, { children: "Status" }), _jsx(TableColumn, { children: "Onboarding" }), _jsxs(TableColumn, { className: "cursor-pointer", onClick: () => handleSort("createdAt"), children: ["Created At ", renderSortIcon("createdAt")] }), _jsx(TableColumn, { className: "text-right", children: "Actions" })] }), _jsx(TableBody, { items: users ?? [], emptyContent: hasActiveFilters ? "No users found matching your filters" : "No users found", children: (user) => {
+                                const onboarding = user.onboarding;
+                                return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-mono text-xs", children: user.id }), _jsx(TableCell, { children: user.name }), _jsx(TableCell, { children: user.email }), _jsx(TableCell, { children: user.role || "user" }), _jsx(TableCell, { children: user.banned ? (_jsx(Tooltip, { content: _jsxs("div", { className: "space-y-1 text-xs", children: [_jsxs("p", { children: [_jsx("strong", { children: "Reason:" }), " ", user.banReason || "No reason provided"] }), user.banExpires && (_jsxs("p", { className: "flex items-center gap-1", children: [_jsx(CalendarClock, { className: "h-3 w-3" }), _jsxs("span", { children: [_jsx("strong", { children: "Expires:" }), " ", formatBanExpiry(user.banExpires.getTime())] })] }))] }), children: _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 && _jsx(Info, { className: "h-3 w-3" })] }) })) : (_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" })) }), _jsx(TableCell, { children: onboarding ?? "—" }), _jsx(TableCell, { children: user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "N/A" }), _jsx(TableCell, { className: "text-right", children: _jsxs(Dropdown, { placement: "bottom-end", children: [_jsx(DropdownTrigger, { children: _jsx(Button, { variant: "light", size: "sm", isIconOnly: true, children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenu, { "aria-label": "User actions", children: [_jsx(DropdownItem, { onClick: () => handleSetOnboardingUser(user.id), children: "Set Onboarding" }, "onboarding"), _jsx(DropdownItem, { onClick: () => openUsageModal(user.id, user.name), className: useTRPC ? "" : "hidden", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(BarChart3, { className: "h-4 w-4" }), "View AI Usage"] }) }, "usage"), _jsx(DropdownItem, { onClick: () => handleImpersonateUser(user.id), isDisabled: user.banned || isImpersonatingUser, children: isImpersonatingUser ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "mr-2 h-3 w-3" }), "Impersonating..."] })) : ("Impersonate") }, "impersonate"), _jsx(DropdownItem, { onClick: () => openMagicLinkModal(user.id, user.name, user.email ?? null), className: trpc ? "" : "hidden", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Link2, { className: "h-4 w-4" }), "Generate Magic Login Link"] }) }, "magic-link"), user.banned ? (_jsx(DropdownItem, { onClick: () => handleUnbanUser(user.id), isDisabled: isUnbanningUser[user.id], children: isUnbanningUser[user.id] ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "mr-2 h-3 w-3" }), "Unbanning..."] })) : ("Unban") }, "unban")) : (_jsx(DropdownItem, { onClick: () => openBanModal(user.id, user.name), children: "Ban" }, "ban")), _jsx(DropdownItem, { onClick: () => confirmDelete(user.id), children: "Remove" }, "remove")] })] }) })] }, user.id));
+                            } })] }) }), totalPages > 0 && (_jsxs("div", { className: "flex items-center justify-end space-x-2 py-4", children: [_jsx(Button, { variant: "bordered", size: "sm", onClick: () => handlePageChange(page - 1), isDisabled: page === 0, children: "Previous" }), _jsxs("div", { className: "text-sm text-muted-foreground", children: ["Page ", page + 1, " of ", totalPages] }), _jsx(Button, { variant: "bordered", size: "sm", onClick: () => handlePageChange(page + 1), isDisabled: page === totalPages - 1, children: "Next" })] })), _jsx(Modal, { isOpen: !!userToDelete, onOpenChange: (open) => {
+                    if (!open)
+                        setUserToDelete(null);
+                }, children: _jsx(ModalContent, { children: (onClose) => (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-lg font-semibold", children: "Are you sure?" }), _jsx("p", { className: "text-sm text-default-600", children: "This action cannot be undone. This will permanently delete the user and all their data." })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "bordered", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "danger", onPress: handleDelete, isLoading: isDeleting, children: "Delete" })] })] })) }) }), _jsx(Modal, { isOpen: !!userToBan, onOpenChange: (open) => {
+                    if (!open)
+                        setUserToBan(null);
+                }, children: _jsx(ModalContent, { children: (onClose) => (_jsxs("form", { onSubmit: (e) => {
+                            e.preventDefault();
+                            handleBanUser();
+                        }, className: "space-y-4", children: [_jsxs(ModalHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-lg font-semibold", children: "Ban User" }), _jsx("p", { className: "text-sm text-default-600", children: userToBan &&
+                                            `You are about to ban ${userToBan.name}. This will prevent them from signing in.` })] }), _jsxs(ModalBody, { className: "space-y-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: banReasonInputId, className: "text-sm font-medium", children: "Ban Reason" }), _jsx(Input, { id: banReasonInputId, placeholder: "Enter reason for ban", value: banReason, onChange: (e) => setBanReason(e.target.value), variant: "bordered", labelPlacement: "outside", label: "Ban Reason" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Ban Duration" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Button, { type: "button", variant: banExpiry === "never" ? "solid" : "bordered", onClick: () => setBanExpiry("never"), children: "Permanent" }), _jsx(Button, { type: "button", variant: banExpiry === "1d" ? "solid" : "bordered", onClick: () => setBanExpiry("1d"), children: "1 Day" }), _jsx(Button, { type: "button", variant: banExpiry === "7d" ? "solid" : "bordered", onClick: () => setBanExpiry("7d"), children: "7 Days" }), _jsx(Button, { type: "button", variant: banExpiry === "30d" ? "solid" : "bordered", onClick: () => setBanExpiry("30d"), children: "30 Days" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "checkbox", id: customDurationId, checked: banExpiry === "custom", onChange: (e) => e.target.checked ? setBanExpiry("custom") : setBanExpiry("never") }), _jsx("label", { htmlFor: customDurationId, className: "text-sm font-medium", children: "Custom Duration" })] }), banExpiry === "custom" && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: "1", value: customBanDays.toString(), onChange: (e) => setCustomBanDays(Number(e.target.value)), variant: "bordered", labelPlacement: "outside", label: "Custom duration (days)" }), _jsx("span", { className: "text-sm", children: "Days" })] }))] })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "bordered", type: "button", onPress: onClose, children: "Cancel" }), _jsxs(Button, { color: "danger", type: "submit", isDisabled: isBanningUser, children: [isBanningUser ? _jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null, isBanningUser ? "Banning..." : "Ban User"] })] })] })) }) }), _jsx(Modal, { isOpen: isCreateUserModalOpen, onOpenChange: (open) => {
+                    if (!open)
+                        setIsCreateUserModalOpen(false);
+                }, children: _jsx(ModalContent, { children: (onClose) => (_jsxs("form", { onSubmit: (e) => {
+                            e.preventDefault();
+                            handleCreateUser();
+                        }, className: "space-y-4", children: [_jsxs(ModalHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-lg font-semibold", children: "Create New User" }), _jsx("p", { className: "text-sm text-default-600", children: "Fill in the details below to create a new user account." })] }), _jsxs(ModalBody, { className: "space-y-4", children: [_jsx("div", { className: "space-y-2", children: _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" }) }), _jsx("div", { className: "space-y-2", children: _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" }) }), _jsx("div", { className: "space-y-2", children: _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" }) }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium", id: roleSelectId, children: "Role" }), _jsxs(Select, { "aria-label": "Select role", "aria-labelledby": roleSelectId, selectedKeys: new Set([newUserData.role]), onSelectionChange: (keys) => handleNewUserDataChange("role", Array.from(keys)[0]), children: [_jsx(SelectItem, { children: "User" }, "user"), _jsx(SelectItem, { children: "Admin" }, "admin")] })] })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "bordered", type: "button", onPress: onClose, children: "Cancel" }), _jsxs(Button, { type: "submit", color: "primary", isDisabled: isCreatingUser, children: [isCreatingUser ? _jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null, isCreatingUser ? "Creating..." : "Create User"] })] })] })) }) }), _jsx(Modal, { isOpen: !!userForUsage, onOpenChange: (open) => {
+                    if (!open)
+                        setUserForUsage(null);
+                }, children: _jsx(ModalContent, { children: (onClose) => (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex flex-col gap-1", children: [_jsxs("p", { className: "text-lg font-semibold flex items-center gap-2", children: [_jsx(BarChart3, { className: "h-5 w-5" }), "AI Usage"] }), _jsx("p", { className: "text-sm text-default-600", children: userForUsage && `Usage statistics for ${userForUsage.name}` })] }), _jsx(ModalBody, { children: isLoadingUsage ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Spinner, {}) })) : usageData ? (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "p-4 rounded-lg bg-default-100", children: [_jsx("p", { className: "text-sm text-default-600", children: "Input Tokens" }), _jsx("p", { className: "text-2xl font-semibold", children: formatTokenCount(usageData.inputTokens) })] }), _jsxs("div", { className: "p-4 rounded-lg bg-default-100", children: [_jsx("p", { className: "text-sm text-default-600", children: "Output Tokens" }), _jsx("p", { className: "text-2xl font-semibold", children: formatTokenCount(usageData.outputTokens) })] }), _jsxs("div", { className: "p-4 rounded-lg bg-default-100", children: [_jsx("p", { className: "text-sm text-default-600", children: "Total Tokens" }), _jsx("p", { className: "text-2xl font-semibold", children: formatTokenCount(usageData.totalTokens) })] }), _jsxs("div", { className: "p-4 rounded-lg bg-primary-100", children: [_jsx("p", { className: "text-sm text-primary-600", children: "Estimated Cost" }), _jsx("p", { className: "text-2xl font-semibold text-primary", children: formatCost(usageData.cost) })] })] }) })) : (_jsx("div", { className: "text-center py-8 text-default-600", children: "No usage data available" })) }), _jsx(ModalFooter, { children: _jsx(Button, { variant: "bordered", onPress: onClose, children: "Close" }) })] })) }) }), _jsx(Modal, { isOpen: !!userForMagicLink, onOpenChange: (open) => {
+                    if (!open) {
+                        setUserForMagicLink(null);
+                        setGeneratedMagicLink(null);
+                        setClaimEmail("");
+                    }
+                }, children: _jsx(ModalContent, { children: (onClose) => (_jsxs("form", { onSubmit: (e) => {
+                            e.preventDefault();
+                            handleGenerateMagicLink();
+                        }, className: "space-y-4", children: [_jsxs(ModalHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-lg font-semibold", children: "Generate Magic Login Link" }), _jsx("p", { className: "text-sm text-default-600", children: userForMagicLink &&
+                                            `Generate a one-time claim sign-in link for ${userForMagicLink.name}.` })] }), _jsxs(ModalBody, { className: "space-y-4", children: [_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." }), _jsx(Input, { id: generatedMagicLinkInputId, label: "Generated link", labelPlacement: "outside", value: generatedMagicLink ?? "", readOnly: true, variant: "bordered", placeholder: "Generate link to see it here" })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "bordered", type: "button", onPress: onClose, children: "Close" }), _jsxs(Button, { variant: "bordered", type: "button", onPress: copyGeneratedMagicLink, isDisabled: !generatedMagicLink, children: [_jsx(Copy, { className: "h-4 w-4 mr-2" }), "Copy Link"] }), _jsxs(Button, { color: "primary", type: "submit", isDisabled: isGeneratingMagicLink, children: [isGeneratingMagicLink ? _jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null, isGeneratingMagicLink ? "Generating..." : "Generate Link"] })] })] })) }) })] }));
+}

package/dist/src/modules/auth/components/AdminWaitlist.d.ts

@@ -0,0 +1,6 @@
+import type { UseBackendTRPC } from "#types";
+interface AdminWaitlistProps {
+    useTRPC: UseBackendTRPC;
+}
+export declare function AdminWaitlist({ useTRPC }: AdminWaitlistProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/auth/components/AdminWaitlist.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Spinner, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "@heroui/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Mail, MoreHorizontal, Search, Trash2, UserPlus, X } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+import { toast } from "sonner";
+export function AdminWaitlist({ useTRPC }) {
+    const trpc = useTRPC();
+    const queryClient = useQueryClient();
+    const { data: waitlist = [], isLoading } = useQuery(trpc.auth.listAdminWaitlist.queryOptions());
+    const { mutate: invite, isPending: isInviting } = useMutation(trpc.auth.inviteFromWaitlist.mutationOptions({
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: trpc.auth.listAdminWaitlist.queryKey() });
+            toast.success("Invitation sent successfully");
+        },
+        onError: (error) => {
+            toast.error(`Failed to send invitation: ${error instanceof Error ? error.message : String(error)}`);
+        },
+    }));
+    const { mutate: remove, isPending: isRemoving } = useMutation(trpc.auth.removeFromWaitlist.mutationOptions({
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: trpc.auth.listAdminWaitlist.queryKey() });
+            toast.success("Removed from waitlist successfully");
+        },
+        onError: (error) => {
+            toast.error(`Failed to remove: ${error instanceof Error ? error.message : String(error)}`);
+        },
+        onSettled: () => {
+            setItemToDelete(null);
+        },
+    }));
+    const { mutate: add, isPending: isAdding } = useMutation(trpc.auth.addToWaitlist.mutationOptions({
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: trpc.auth.listAdminWaitlist.queryKey() });
+            toast.success("Added to waitlist successfully");
+        },
+        onError: (error) => {
+            toast.error(`Failed to add to waitlist: ${error instanceof Error ? error.message : String(error)}`);
+        },
+    }));
+    const emailInputId = useId();
+    const [searchQuery, setSearchQuery] = useState("");
+    const [debouncedSearchQuery, setDebouncedSearchQuery] = useState("");
+    const [itemToDelete, setItemToDelete] = useState(null);
+    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+    const [newEmail, setNewEmail] = useState("");
+    // Debounce search query
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedSearchQuery(searchQuery);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [searchQuery]);
+    const filteredWaitlist = waitlist.filter((item) => item.email?.toLowerCase().includes(debouncedSearchQuery?.toLowerCase() ?? ""));
+    const handleInvite = (id) => {
+        invite({ id });
+    };
+    const handleRemove = () => {
+        if (itemToDelete) {
+            remove({ id: itemToDelete });
+        }
+    };
+    const handleAdd = async () => {
+        if (!newEmail.trim()) {
+            toast.error("Please enter an email address");
+            return;
+        }
+        // Basic email validation
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(newEmail.trim())) {
+            toast.error("Please enter a valid email address");
+            return;
+        }
+        add({ email: newEmail.trim() });
+        setNewEmail("");
+        setIsAddModalOpen(false);
+    };
+    const formatDate = (date) => {
+        if (!date)
+            return "N/A";
+        const dateObj = typeof date === "string" ? new Date(date) : date;
+        return dateObj.toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    };
+    const getStatusBadge = (status) => {
+        const statusLower = status.toLowerCase();
+        if (statusLower === "invited" || statusLower === "active") {
+            return (_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: status }));
+        }
+        if (statusLower === "pending") {
+            return (_jsx("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800", children: status }));
+        }
+        return (_jsx("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800", children: status }));
+    };
+    if (isLoading) {
+        return (_jsx("div", { className: "flex justify-center p-8", children: _jsx(Spinner, {}) }));
+    }
+    return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("h2", { className: "text-xl font-semibold", children: "Waitlist Management" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { onPress: () => setIsAddModalOpen(true), size: "sm", children: [_jsx(UserPlus, { className: "h-4 w-4 mr-2" }), "Add to Waitlist"] }), _jsxs("div", { className: "text-sm text-muted-foreground", children: ["Total: ", waitlist.length] })] })] }), _jsx("div", { className: "flex flex-col sm:flex-row gap-3 items-start sm:items-center", children: _jsxs("form", { className: "relative flex-1", onSubmit: (e) => {
+                        e.preventDefault();
+                        setDebouncedSearchQuery(searchQuery);
+                    }, children: [_jsx(Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" }), _jsx(Input, { "aria-label": "Search by email", placeholder: "Search by email...", className: "pl-8 w-full", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), variant: "bordered" }), searchQuery && (_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: _jsx(X, { className: "h-4 w-4" }) }))] }) }), _jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs(Table, { "aria-label": "Waitlist table", removeWrapper: true, children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: "Email" }), _jsx(TableColumn, { children: "Status" }), _jsx(TableColumn, { children: "Created At" }), _jsx(TableColumn, { children: "Updated At" }), _jsx(TableColumn, { className: "text-right", children: "Actions" })] }), _jsx(TableBody, { items: filteredWaitlist, emptyContent: searchQuery
+                                ? "No waitlist entries found matching your search"
+                                : "No waitlist entries found", children: (item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: item.email }), _jsx(TableCell, { children: getStatusBadge(item.status) }), _jsx(TableCell, { children: formatDate(item.createdAt) }), _jsx(TableCell, { children: formatDate(item.updatedAt) }), _jsx(TableCell, { className: "text-right", children: _jsxs(Dropdown, { placement: "bottom-end", children: [_jsx(DropdownTrigger, { children: _jsx(Button, { variant: "light", size: "sm", isIconOnly: true, children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenu, { "aria-label": "Waitlist actions", children: [_jsx(DropdownItem, { onPress: () => handleInvite(item.id), isDisabled: isInviting, children: isInviting ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { className: "mr-2 h-3 w-3" }), "Inviting..."] })) : (_jsxs(_Fragment, { children: [_jsx(Mail, { className: "mr-2 h-4 w-4" }), "Send Invitation"] })) }, "invite"), _jsxs(DropdownItem, { className: "text-danger", onClick: () => setItemToDelete(item.id), children: [_jsx(Trash2, { className: "mr-2 h-4 w-4" }), "Remove"] }, "remove")] })] }) })] }, item.id)) })] }) }), _jsx(Modal, { isOpen: !!itemToDelete, onOpenChange: (open) => {
+                    if (!open)
+                        setItemToDelete(null);
+                }, children: _jsx(ModalContent, { children: (onClose) => (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-lg font-semibold", children: "Are you sure?" }), _jsx("p", { className: "text-sm text-default-600", children: "This action cannot be undone. This will permanently remove this entry from the waitlist." })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "bordered", onPress: onClose, children: "Cancel" }), _jsx(Button, { color: "danger", onPress: handleRemove, isLoading: isRemoving, children: "Remove" })] })] })) }) }), _jsx(Modal, { isOpen: isAddModalOpen, onOpenChange: (open) => {
+                    if (!open)
+                        setIsAddModalOpen(false);
+                }, children: _jsx(ModalContent, { children: (onClose) => (_jsxs("form", { onSubmit: (e) => {
+                            e.preventDefault();
+                            handleAdd();
+                        }, className: "space-y-4", children: [_jsxs(ModalHeader, { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-lg font-semibold", children: "Add to Waitlist" }), _jsx("p", { className: "text-sm text-default-600", children: "Enter an email address to add someone to the waitlist." })] }), _jsx(ModalBody, { className: "space-y-4", children: _jsx("div", { className: "space-y-2", children: _jsx(Input, { id: emailInputId, label: "Email *", labelPlacement: "outside", type: "email", placeholder: "Enter email address", value: newEmail, onChange: (e) => setNewEmail(e.target.value), variant: "bordered" }) }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "bordered", type: "button", onPress: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", color: "primary", isDisabled: isAdding, isLoading: isAdding, children: isAdding ? "Adding..." : "Add to Waitlist" })] })] })) }) })] }));
+}

package/dist/src/modules/auth/components/AuthLayout.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from "react";
+export declare function AuthLayout({ header }: {
+    header: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/modules/auth/components/AuthLayout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Outlet } from "react-router";
+export function AuthLayout({ header }) {
+    return (_jsx("div", { className: "flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10", children: _jsxs("div", { className: "flex w-full max-w-sm flex-col gap-6", children: [_jsx("div", { className: "flex items-center gap-2 self-center font-medium", children: header }), _jsx(Outlet, {})] }) }));
+}

package/dist/src/modules/auth/components/AuthProviders.d.ts

@@ -0,0 +1,6 @@
+export declare function AuthProviders({ providers, lastMethod, code, requestSignUp, }: {
+    providers?: string[];
+    code?: string | null;
+    requestSignUp?: boolean;
+    lastMethod?: string | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/modules/auth/components/AuthProviders.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { GoogleIcon } from "#icons/GoogleIcon";
+import { LinkedInIcon } from "#icons/LinkedInIcon";
+import { MicrosoftIcon } from "#icons/MicrosoftIcon";
+import { LastUsedBadge } from "./LastUsedBadge";
+export function AuthProviders({ providers, lastMethod, code, requestSignUp = false, }) {
+    const { t } = useTranslation();
+    if (!providers || providers.length === 0)
+        return null;
+    const additionalData = code ? { waitlistInvitationCode: code } : {};
+    const handleSignIn = (result) => {
+        if (result.error) {
+            toast.error(t("web-ui:auth.errors.invitationCodeInvalid"));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-4", children: [providers.includes("google") && (_jsx(LastUsedBadge, { lastMethod: lastMethod, method: "google", children: _jsxs(Button, { type: "button", variant: "bordered", className: "w-full gap-2", onPress: () => {
+                                authClient.signIn
+                                    .social({
+                                    provider: "google",
+                                    requestSignUp,
+                                    additionalData,
+                                })
+                                    .then(handleSignIn);
+                            }, children: [_jsx(GoogleIcon, { className: "h-5 w-5" }), t("web-ui:auth.login.google")] }) })), providers.includes("linkedin") && (_jsx(LastUsedBadge, { lastMethod: lastMethod, method: "linkedin", children: _jsxs(Button, { type: "button", variant: "bordered", className: "w-full", onPress: () => {
+                                authClient.signIn
+                                    .social({
+                                    provider: "linkedin",
+                                    requestSignUp,
+                                    additionalData,
+                                })
+                                    .then(handleSignIn);
+                            }, children: [_jsx(LinkedInIcon, { className: "h-5 w-5" }), t("web-ui:auth.login.linkedin")] }) })), providers.includes("microsoft") && (_jsx(LastUsedBadge, { lastMethod: lastMethod, method: "microsoft", children: _jsxs(Button, { type: "button", variant: "bordered", className: "w-full", onPress: () => {
+                                authClient.signIn
+                                    .social({
+                                    provider: "microsoft",
+                                    requestSignUp,
+                                    additionalData,
+                                })
+                                    .then(handleSignIn);
+                            }, children: [_jsx(MicrosoftIcon, { className: "h-5 w-5" }), t("web-ui:auth.login.microsoft")] }) }))] }), _jsx("div", { className: "relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border", children: _jsx("span", { className: "relative z-10 bg-background px-2 text-muted-foreground", children: t("web-ui:auth.login.orContinueWith") }) })] }));
+}