create-handover 0.1.1

package/template/app/admin/page.tsx

@@ -0,0 +1,1346 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useHandover } from "@/components/HandoverProvider";
+import { Modal } from "@/components/Modal";
+import { Upload, LogOut, Image as ImageIcon, Type, Copy, Plus, Trash2, Pencil, Users, Shield, UserX, FileText } from "lucide-react";
+import { clsx } from "clsx";
+import { branding, getBrandInitial } from "@/lib/branding";
+
+type AdminRole = "owner" | "admin" | "editor" | "viewer";
+type AdminStatus = "active" | "disabled" | "locked";
+
+type AdminUser = {
+    id: string;
+    username: string;
+    role: AdminRole;
+    status: AdminStatus;
+    lastLoginAt?: number;
+};
+
+type SessionUser = {
+    id: string;
+    username: string;
+    role: AdminRole;
+    status: AdminStatus;
+};
+
+function getSessionToken(): string | null {
+    return localStorage.getItem("handover_admin_session");
+}
+
+function clearSession() {
+    localStorage.removeItem("handover_admin_session");
+    localStorage.removeItem("handover_admin_user");
+}
+
+function getErrorCode(error: unknown): string | null {
+    if (typeof error !== "object" || error === null || !("code" in error)) {
+        return null;
+    }
+
+    const maybeCode = (error as { code?: unknown }).code;
+    return typeof maybeCode === "string" ? maybeCode : null;
+}
+
+export default function AdminDashboardPage() {
+    const router = useRouter();
+    const { handover, text, images, isLoading, refresh } = useHandover();
+    const [activeTab, setActiveTab] = useState<"text" | "images" | "users">("text");
+    const [sessionUser, setSessionUser] = useState<SessionUser | null>(null);
+    const [isSessionLoading, setIsSessionLoading] = useState(true);
+
+    const [isContentModalOpen, setIsContentModalOpen] = useState(false);
+    const [editingKey, setEditingKey] = useState("");
+    const [editingValue, setEditingValue] = useState("");
+    const [isSavingContent, setIsSavingContent] = useState(false);
+    const [isNewContent, setIsNewContent] = useState(false);
+
+    const [deleteTarget, setDeleteTarget] = useState<{ type: "text" | "image"; id: string } | null>(null);
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const [file, setFile] = useState<File | null>(null);
+    const [altText, setAltText] = useState("");
+    const [isUploading, setIsUploading] = useState(false);
+    const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+    const [uploadError, setUploadError] = useState<string | null>(null);
+    const [globalError, setGlobalError] = useState<string | null>(null);
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+    const [users, setUsers] = useState<AdminUser[]>([]);
+    const [isUsersLoading, setIsUsersLoading] = useState(false);
+    const [isUserModalOpen, setIsUserModalOpen] = useState(false);
+    const [newUsername, setNewUsername] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [newRole, setNewRole] = useState<"admin" | "editor" | "viewer">("editor");
+    const [isCreatingUser, setIsCreatingUser] = useState(false);
+    const [userError, setUserError] = useState<string | null>(null);
+    const [resetPasswordTarget, setResetPasswordTarget] = useState<{ id: string; username: string } | null>(null);
+    const [resetPasswordValue, setResetPasswordValue] = useState("");
+    const [confirmResetPasswordValue, setConfirmResetPasswordValue] = useState("");
+    const [isResettingUserPassword, setIsResettingUserPassword] = useState(false);
+    const [resetTokenResult, setResetTokenResult] = useState<{ username: string; token: string; expiresAt: number } | null>(null);
+    const [deleteUserTarget, setDeleteUserTarget] = useState<{ id: string; username: string } | null>(null);
+    const [isDeletingUser, setIsDeletingUser] = useState(false);
+    const resetTokenCloseRef = useRef<HTMLButtonElement | null>(null);
+
+    const canManageUsers = useMemo(() => {
+        return sessionUser?.role === "owner" || sessionUser?.role === "admin";
+    }, [sessionUser]);
+
+    useEffect(() => {
+        let canceled = false;
+
+        async function verifySession() {
+            const token = getSessionToken();
+            if (!token) {
+                router.push("/admin/login");
+                return;
+            }
+
+            try {
+                const session = await handover.getAdminSession(token);
+                if (!session.isValid || !session.user) {
+                    clearSession();
+                    router.push("/admin/login");
+                    return;
+                }
+
+                if (!canceled) {
+                    setSessionUser(session.user as SessionUser);
+                }
+            } catch {
+                clearSession();
+                router.push("/admin/login");
+            } finally {
+                if (!canceled) {
+                    setIsSessionLoading(false);
+                }
+            }
+        }
+
+        verifySession();
+
+        return () => {
+            canceled = true;
+        };
+    }, [handover, router]);
+
+    useEffect(() => {
+        if (activeTab !== "users" || !canManageUsers) {
+            return;
+        }
+
+        let canceled = false;
+        async function loadUsers() {
+            const token = getSessionToken();
+            if (!token) {
+                return;
+            }
+
+            setIsUsersLoading(true);
+            setUserError(null);
+            try {
+                const result = await handover.listAdminUsers(token);
+                if (!canceled) {
+                    setUsers(result as AdminUser[]);
+                }
+            } catch (error: unknown) {
+                const code = getErrorCode(error);
+                if (!canceled) {
+                    if (code === "FORBIDDEN" || code === "UNAUTHORIZED") {
+                        setUserError("You do not have permission to manage users.");
+                    } else {
+                        setUserError("Failed to load users.");
+                    }
+                }
+            } finally {
+                if (!canceled) {
+                    setIsUsersLoading(false);
+                }
+            }
+        }
+
+        loadUsers();
+
+        return () => {
+            canceled = true;
+        };
+    }, [activeTab, canManageUsers, handover]);
+
+    const handleUnauthorizedSession = () => {
+        setGlobalError("Your admin session expired. Please log in again.");
+        clearSession();
+        router.push("/admin/login");
+    };
+
+    const handleLogout = async () => {
+        const token = getSessionToken();
+        if (token) {
+            try {
+                await handover.logoutAdmin(token);
+            } catch {
+            }
+        }
+        clearSession();
+        router.push("/admin/login");
+    };
+
+    const openNewContentModal = () => {
+        setEditingKey("");
+        setEditingValue("");
+        setIsNewContent(true);
+        setIsContentModalOpen(true);
+    };
+
+    const openEditContentModal = (key: string, value: unknown) => {
+        setEditingKey(key);
+        setEditingValue(String(value));
+        setIsNewContent(false);
+        setIsContentModalOpen(true);
+    };
+
+    const handleSaveContent = async () => {
+        if (!editingKey || !editingValue) return;
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setIsSavingContent(true);
+        setGlobalError(null);
+        try {
+            await handover.updateText(editingKey, editingValue, token);
+            await refresh();
+            setIsContentModalOpen(false);
+            setSuccessMessage(isNewContent ? "✅ Content element added successfully!" : "✅ Content updated successfully!");
+            setTimeout(() => setSuccessMessage(null), 4000);
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setGlobalError("Failed to save content.");
+            }
+        } finally {
+            setIsSavingContent(false);
+        }
+    };
+
+    const confirmDelete = (type: "text" | "image", id: string) => {
+        setDeleteTarget({ type, id });
+    };
+
+    const handleDelete = async () => {
+        if (!deleteTarget) return;
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setIsDeleting(true);
+        setGlobalError(null);
+        try {
+            if (deleteTarget.type === "text") {
+                await handover.deleteText(deleteTarget.id, token);
+            } else {
+                await handover.deleteImage(deleteTarget.id, token);
+            }
+            await refresh();
+            setDeleteTarget(null);
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setGlobalError("Failed to delete this item.");
+            }
+        } finally {
+            setIsDeleting(false);
+        }
+    };
+
+    const handleUpload = async () => {
+        if (!file) return;
+        if (!file.type.startsWith("image/")) {
+            setUploadError("Please select an image file to upload.");
+            return;
+        }
+
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setIsUploading(true);
+        setUploadError(null);
+        setGlobalError(null);
+        try {
+            await handover.uploadImage(file, token, altText);
+            await refresh();
+            setFile(null);
+            setAltText("");
+            setIsUploadModalOpen(false);
+            setSuccessMessage("📸 Image uploaded successfully!");
+            setTimeout(() => setSuccessMessage(null), 4000);
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "STORAGE_LIMIT_EXCEEDED") {
+                setUploadError("You've reached your storage limit. Please upgrade to Pro or delete some files to continue.");
+            } else if (code === "INVALID_IMAGE_TYPE") {
+                setUploadError("That file type isn't supported. Please upload a JPG, PNG, GIF, or WebP image.");
+            } else if (code === "AUTH_RATE_LIMITED") {
+                setUploadError("Too many attempts. Please wait a moment and try again.");
+            } else if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setUploadError("Unable to upload image. Please try again.");
+            }
+        } finally {
+            setIsUploading(false);
+        }
+    };
+
+    const handleCreateUser = async () => {
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setIsCreatingUser(true);
+        setUserError(null);
+        try {
+            await handover.createAdminUser(token, {
+                username: newUsername,
+                password: newPassword,
+                role: newRole,
+            });
+            const refreshedUsers = await handover.listAdminUsers(token);
+            setUsers(refreshedUsers as AdminUser[]);
+            setNewUsername("");
+            setNewPassword("");
+            setNewRole("editor");
+            setIsUserModalOpen(false);
+            setSuccessMessage(`🎉 User "${newUsername}" created successfully!`);
+            setTimeout(() => setSuccessMessage(null), 4000);
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "USERNAME_TAKEN") {
+                setUserError("That username is already in use. Please choose a different one.");
+            } else if (code === "FORBIDDEN") {
+                setUserError("You don't have permission to create users.");
+            } else if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setUserError("Unable to create user. Please try again.");
+            }
+        } finally {
+            setIsCreatingUser(false);
+        }
+    };
+
+    const handleToggleUserStatus = async (userId: string, nextStatus: AdminStatus) => {
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setUserError(null);
+        try {
+            await handover.updateAdminUser(token, {
+                userId,
+                status: nextStatus,
+            });
+            const refreshedUsers = await handover.listAdminUsers(token);
+            setUsers(refreshedUsers as AdminUser[]);
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "FORBIDDEN") {
+                setUserError("You don't have permission to update users.");
+            } else if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setUserError("Unable to update user. Please try again.");
+            }
+        }
+    };
+
+    const handleDeleteUser = async () => {
+        if (!deleteUserTarget) {
+            return;
+        }
+
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setIsDeletingUser(true);
+        setUserError(null);
+        try {
+            await handover.deleteAdminUser(token, deleteUserTarget.id);
+            const refreshedUsers = await handover.listAdminUsers(token);
+            setUsers(refreshedUsers as AdminUser[]);
+            setDeleteUserTarget(null);
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "CANNOT_DELETE_OWNER") {
+                setUserError("The owner account can't be deleted.");
+            } else if (code === "FORBIDDEN") {
+                setUserError("You don't have permission to delete users.");
+            } else if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setUserError("Unable to delete user. Please try again.");
+            }
+        } finally {
+            setIsDeletingUser(false);
+        }
+    };
+
+    const handleResetUserPassword = async () => {
+        if (!resetPasswordTarget) {
+            return;
+        }
+
+        if (!resetPasswordValue.trim()) {
+            setUserError("Password cannot be empty.");
+            return;
+        }
+
+        if (resetPasswordValue !== confirmResetPasswordValue) {
+            setUserError("Passwords do not match.");
+            return;
+        }
+
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setIsResettingUserPassword(true);
+        setUserError(null);
+        try {
+            await handover.resetAdminUserPassword(token, {
+                userId: resetPasswordTarget.id,
+                newPassword: resetPasswordValue,
+            });
+            const refreshedUsers = await handover.listAdminUsers(token);
+            setUsers(refreshedUsers as AdminUser[]);
+            setResetPasswordTarget(null);
+            setResetPasswordValue("");
+            setConfirmResetPasswordValue("");
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "FORBIDDEN") {
+                setUserError("You do not have permission for that action.");
+            } else if (code === "PASSWORD_EMPTY" || code === "PASSWORD_TOO_SHORT" || code === "PASSWORD_TOO_LONG" || code === "PASSWORD_COMPLEXITY_REQUIREMENTS") {
+                setUserError("Password must be 10-128 chars and include uppercase, lowercase, and a number.");
+            } else if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setUserError("Failed to reset password.");
+            }
+        } finally {
+            setIsResettingUserPassword(false);
+        }
+    };
+
+    const handleCreateResetToken = async (userId: string, username: string) => {
+        const token = getSessionToken();
+        if (!token) {
+            handleUnauthorizedSession();
+            return;
+        }
+
+        setUserError(null);
+        try {
+            const result = await handover.createAdminUserResetToken(token, userId);
+            setResetTokenResult({
+                username,
+                token: result.token,
+                expiresAt: result.expiresAt,
+            });
+        } catch (error: unknown) {
+            const code = getErrorCode(error);
+            if (code === "FORBIDDEN") {
+                setUserError("You do not have permission for that action.");
+            } else if (code === "UNAUTHORIZED" || code === "SESSION_EXPIRED") {
+                handleUnauthorizedSession();
+            } else {
+                setUserError("Failed to create reset token.");
+            }
+        }
+    };
+
+    if (isSessionLoading) {
+        return (
+            <div className="min-h-screen admin-shell flex items-center justify-center p-6">
+                <div className="surface-card max-w-md w-full p-6 text-center text-slate-600">Verifying admin session...</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen admin-shell">
+            <nav className="bg-white/90 backdrop-blur border-b border-slate-200 px-4 sm:px-8 py-4 flex justify-between items-center sticky top-0 z-10 shadow-sm">
+                <div className="flex items-center gap-3">
+                    <div className="bg-gradient-to-br from-teal-700 to-slate-900 text-white w-8 h-8 rounded-lg flex items-center justify-center font-bold">{getBrandInitial()}</div>
+                    <div>
+                        <h1 className="text-xl font-bold text-slate-900 hidden sm:block">{branding.adminTitle}</h1>
+                        {sessionUser && <p className="hidden sm:block text-xs text-slate-500">Signed in as {sessionUser.username} ({sessionUser.role})</p>}
+                    </div>
+                </div>
+                <button
+                    onClick={handleLogout}
+                    className="focus-ring flex items-center gap-2 text-sm font-medium text-slate-600 hover:text-red-700 transition-colors"
+                >
+                    <LogOut className="w-4 h-4" />
+                    <span className="hidden sm:inline">Logout</span>
+                </button>
+            </nav>
+
+            <main className="max-w-6xl mx-auto p-4 sm:p-8 space-y-8">
+                <section className="surface-card p-4 sm:p-6">
+                    <p className="section-label">{branding.siteName}</p>
+                    <h2 className="mt-2 text-xl sm:text-2xl font-semibold text-slate-900">Admin Operations</h2>
+                    <p className="mt-2 text-sm text-slate-600">
+                        Manage content, media, and authorized admin users for this project.
+                    </p>
+                </section>
+
+                {globalError && (
+                    <div className="error-banner rounded-xl px-4 py-3 text-sm">{globalError}</div>
+                )}
+
+                {successMessage && (
+                    <div className="rounded-xl px-4 py-3 text-sm font-medium bg-green-50 border border-green-200 text-green-800 flex items-center gap-2" role="status" aria-live="polite">
+                        {successMessage}
+                    </div>
+                )}
+
+                <div className="surface-card p-3 sm:p-4">
+                    <p className="section-label mb-2">Workspace</p>
+                    <div 
+                        className="flex gap-4 border-b border-slate-200 overflow-x-auto"
+                        role="tablist"
+                        aria-label="Content management tabs"
+                        onKeyDown={(e) => {
+                            const tabs: Array<"text" | "images" | "users"> = ["text", "images", "users"];
+                            const currentIndex = tabs.indexOf(activeTab);
+                            
+                            if (e.key === "ArrowRight") {
+                                e.preventDefault();
+                                const nextIndex = (currentIndex + 1) % tabs.length;
+                                setActiveTab(tabs[nextIndex]);
+                            } else if (e.key === "ArrowLeft") {
+                                e.preventDefault();
+                                const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+                                setActiveTab(tabs[prevIndex]);
+                            } else if (e.key === "Home") {
+                                e.preventDefault();
+                                setActiveTab(tabs[0]);
+                            } else if (e.key === "End") {
+                                e.preventDefault();
+                                setActiveTab(tabs[tabs.length - 1]);
+                            }
+                        }}
+                    >
+                        <button
+                            role="tab"
+                            aria-selected={activeTab === "text"}
+                            aria-controls="panel-text"
+                            id="tab-text"
+                            tabIndex={activeTab === "text" ? 0 : -1}
+                            onClick={() => setActiveTab("text")}
+                            className={clsx(
+                                "focus-ring pb-3 px-2 font-medium text-sm flex items-center gap-2 transition-colors border-b-2 whitespace-nowrap",
+                                activeTab === "text"
+                                    ? "border-teal-700 text-teal-700"
+                                    : "border-transparent text-slate-500 hover:text-slate-900"
+                            )}
+                        >
+                            <Type className="w-4 h-4" />
+                            Content
+                            <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600">{Object.keys(text).length}</span>
+                        </button>
+                        <button
+                            role="tab"
+                            aria-selected={activeTab === "images"}
+                            aria-controls="panel-images"
+                            id="tab-images"
+                            tabIndex={activeTab === "images" ? 0 : -1}
+                            onClick={() => setActiveTab("images")}
+                            className={clsx(
+                                "focus-ring pb-3 px-2 font-medium text-sm flex items-center gap-2 transition-colors border-b-2 whitespace-nowrap",
+                                activeTab === "images"
+                                    ? "border-teal-700 text-teal-700"
+                                    : "border-transparent text-slate-500 hover:text-slate-900"
+                            )}
+                        >
+                            <ImageIcon className="w-4 h-4" />
+                            Media
+                            <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600">{images.length}</span>
+                        </button>
+                        <button
+                            role="tab"
+                            aria-selected={activeTab === "users"}
+                            aria-controls="panel-users"
+                            id="tab-users"
+                            tabIndex={activeTab === "users" ? 0 : -1}
+                            onClick={() => setActiveTab("users")}
+                            className={clsx(
+                                "focus-ring pb-3 px-2 font-medium text-sm flex items-center gap-2 transition-colors border-b-2 whitespace-nowrap",
+                                activeTab === "users"
+                                    ? "border-teal-700 text-teal-700"
+                                    : "border-transparent text-slate-500 hover:text-slate-900"
+                            )}
+                        >
+                            <Users className="w-4 h-4" />
+                            User Management
+                            <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600">{users.length || "-"}</span>
+                        </button>
+                    </div>
+                </div>
+
+                {activeTab === "text" && (
+                    <div 
+                        role="tabpanel" 
+                        id="panel-text" 
+                        aria-labelledby="tab-text"
+                        className="space-y-6"
+                    >
+                        <div className="flex justify-between items-center">
+                            <h2 className="text-lg font-semibold text-slate-900">Text Content</h2>
+                            <button
+                                onClick={openNewContentModal}
+                                className="focus-ring bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 hover:bg-slate-800 transition-colors"
+                            >
+                                <Plus className="w-4 h-4" />
+                                Add Element
+                            </button>
+                        </div>
+
+                        <div className="surface-card overflow-hidden">
+                            <div className="grid grid-cols-12 gap-4 p-4 border-b border-slate-200 bg-slate-50/70 text-xs font-semibold uppercase tracking-wider text-slate-500">
+                                <div className="col-span-4 sm:col-span-3">Key</div>
+                                <div className="col-span-6 sm:col-span-7">Value</div>
+                                <div className="col-span-2 text-right">Actions</div>
+                            </div>
+                            <div className="divide-y divide-slate-100">
+                                {isLoading ? (
+                                    <div className="p-8 text-center text-slate-500 text-sm">Loading content...</div>
+                                ) : Object.keys(text).length === 0 ? (
+                                    <div className="p-8 sm:p-12 text-center space-y-5">
+                                        <div className="w-16 h-16 bg-teal-50 rounded-full flex items-center justify-center mx-auto border border-teal-100">
+                                            <FileText className="w-8 h-8 text-teal-700" />
+                                        </div>
+                                        <div className="space-y-2">
+                                            <h3 className="text-lg font-semibold text-slate-900">No content elements yet</h3>
+                                            <p className="text-sm text-slate-600 max-w-md mx-auto">
+                                                Content elements are editable text fields that you can update without code changes.
+                                            </p>
+                                        </div>
+                                        <div className="bg-slate-50 rounded-lg p-4 max-w-md mx-auto text-left border border-slate-100">
+                                            <p className="text-xs font-medium text-slate-700 mb-2">How it works:</p>
+                                            <ol className="space-y-2 text-xs text-slate-600">
+                                                <li className="flex items-start gap-2">
+                                                    <span className="flex-shrink-0 w-4 h-4 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-[10px] font-medium">1</span>
+                                                    <span>Click "Add Content" to create a new editable field</span>
+                                                </li>
+                                                <li className="flex items-start gap-2">
+                                                    <span className="flex-shrink-0 w-4 h-4 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-[10px] font-medium">2</span>
+                                                    <span>Use the key in your code: <code className="text-[10px] bg-white px-1 py-0.5 rounded border border-slate-200">sdk.getContent('hero_title')</code></span>
+                                                </li>
+                                                <li className="flex items-start gap-2">
+                                                    <span className="flex-shrink-0 w-4 h-4 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-[10px] font-medium">3</span>
+                                                    <span>Edit the value here anytime—changes appear instantly</span>
+                                                </li>
+                                            </ol>
+                                        </div>
+                                        <button
+                                            onClick={openNewContentModal}
+                                            className="focus-ring inline-flex items-center gap-2 rounded-lg bg-teal-700 px-4 py-2.5 text-sm font-medium text-white hover:bg-teal-800"
+                                        >
+                                            <Plus className="w-4 h-4" />
+                                            Add Content
+                                        </button>
+                                    </div>
+                                ) : (
+                                    Object.entries(text).map(([key, value]) => (
+                                        <div key={key} className="grid grid-cols-12 gap-4 p-4 items-center hover:bg-slate-50 transition-colors group">
+                                            <div className="col-span-4 sm:col-span-3 font-mono text-xs text-teal-700 truncate bg-teal-50 px-2 py-1 rounded w-fit max-w-full">
+                                                {key}
+                                            </div>
+                                            <div className="col-span-6 sm:col-span-7 text-sm text-slate-700 truncate font-medium">
+                                                {String(value)}
+                                            </div>
+                                            <div className="col-span-2 flex items-center justify-end gap-2">
+                                                <button
+                                                    onClick={() => openEditContentModal(key, value)}
+                                                    className="focus-ring p-1.5 text-slate-400 hover:text-teal-700 hover:bg-teal-50 rounded transition-colors"
+                                                    title="Edit"
+                                                >
+                                                    <Pencil className="w-4 h-4" />
+                                                </button>
+                                                <button
+                                                    onClick={() => {
+                                                        navigator.clipboard.writeText(`handover.text['${key}']`);
+                                                    }}
+                                                    className="focus-ring p-1.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded transition-colors"
+                                                    title="Copy Code"
+                                                >
+                                                    <Copy className="w-4 h-4" />
+                                                </button>
+                                                <button
+                                                    onClick={() => confirmDelete("text", key)}
+                                                    className="focus-ring p-1.5 text-slate-400 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
+                                                    title="Delete"
+                                                >
+                                                    <Trash2 className="w-4 h-4" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ))
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {activeTab === "images" && (
+                    <div 
+                        role="tabpanel" 
+                        id="panel-images" 
+                        aria-labelledby="tab-images"
+                        className="space-y-6"
+                    >
+                        <div className="flex justify-between items-center">
+                            <h2 className="text-lg font-semibold text-slate-900">Image Library</h2>
+                            <button
+                                onClick={() => setIsUploadModalOpen(true)}
+                                className="focus-ring bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 hover:bg-teal-800 transition-colors"
+                            >
+                                <Upload className="w-4 h-4" />
+                                Upload Image
+                            </button>
+                        </div>
+
+                        {images.length === 0 ? (
+                            <div className="surface-card p-8 sm:p-12 text-center space-y-5">
+                                <div className="w-16 h-16 bg-teal-50 rounded-full flex items-center justify-center mx-auto border border-teal-100">
+                                    <ImageIcon className="w-8 h-8 text-teal-700" />
+                                </div>
+                                <div className="space-y-2">
+                                    <h3 className="text-lg font-semibold text-slate-900">No uploaded images yet</h3>
+                                    <p className="text-sm text-slate-600 max-w-md mx-auto">
+                                        Upload images to manage your media library and use them in your site.
+                                    </p>
+                                </div>
+                                <div className="bg-slate-50 rounded-lg p-4 max-w-md mx-auto text-left border border-slate-100">
+                                    <p className="text-xs font-medium text-slate-700 mb-2">Getting started:</p>
+                                    <ol className="space-y-2 text-xs text-slate-600">
+                                        <li className="flex items-start gap-2">
+                                            <span className="flex-shrink-0 w-4 h-4 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-[10px] font-medium">1</span>
+                                            <span>Click "Upload Image" and select a file</span>
+                                        </li>
+                                        <li className="flex items-start gap-2">
+                                            <span className="flex-shrink-0 w-4 h-4 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-[10px] font-medium">2</span>
+                                            <span>Copy the image ID or URL for use in your code</span>
+                                        </li>
+                                        <li className="flex items-start gap-2">
+                                            <span className="flex-shrink-0 w-4 h-4 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-[10px] font-medium">3</span>
+                                            <span>Use <code className="text-[10px] bg-white px-1 py-0.5 rounded border border-slate-200">sdk.getImage(id)</code> to display it</span>
+                                        </li>
+                                    </ol>
+                                </div>
+                                <button
+                                    onClick={() => setIsUploadModalOpen(true)}
+                                    className="focus-ring inline-flex items-center gap-2 rounded-lg bg-teal-700 px-4 py-2.5 text-sm font-medium text-white hover:bg-teal-800"
+                                >
+                                    <Upload className="w-4 h-4" />
+                                    Upload Image
+                                </button>
+                            </div>
+                        ) : (
+                            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
+                                {images.map((img) => (
+                                    <div key={img._id} className="group relative bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden aspect-square">
+                                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                                        <img src={img.url} alt={img.altText} className="w-full h-full object-cover" />
+                                        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4 translate-y-full group-hover:translate-y-0 transition-transform flex flex-col justify-end">
+                                            <p className="text-xs text-white/80 truncate mb-1">{img.altText || "No description"}</p>
+                                            <code className="text-[10px] text-gray-400 mb-2 truncate font-mono block">{img._id}</code>
+
+                                            <div className="grid grid-cols-2 gap-2">
+                                                <button
+                                                    onClick={() => {
+                                                        const code = `<img src="${img.url}" alt="${img.altText || ""}" />`;
+                                                        navigator.clipboard.writeText(code);
+                                                    }}
+                                                    className="focus-ring bg-white/10 hover:bg-white/20 text-white text-xs py-1.5 rounded backdrop-blur-sm border border-white/20 flex items-center justify-center"
+                                                    title="Copy Tag"
+                                                >
+                                                    <Copy className="w-3 h-3" />
+                                                </button>
+                                                <button
+                                                    onClick={() => confirmDelete("image", img._id)}
+                                                    className="focus-ring bg-red-500/80 hover:bg-red-600 text-white text-xs py-1.5 rounded backdrop-blur-sm flex items-center justify-center"
+                                                    title="Delete Image"
+                                                >
+                                                    <Trash2 className="w-3 h-3" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                {activeTab === "users" && (
+                    <div 
+                        role="tabpanel" 
+                        id="panel-users" 
+                        aria-labelledby="tab-users"
+                        className="space-y-6"
+                    >
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                            <div>
+                                <h2 className="text-lg font-semibold text-slate-900">User Management</h2>
+                                <p className="text-sm text-slate-600 mt-1">Manage who can access this admin backend and what they can do.</p>
+                            </div>
+                            {canManageUsers && (
+                                <button
+                                    onClick={() => setIsUserModalOpen(true)}
+                                    className="focus-ring bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium inline-flex items-center gap-2 hover:bg-slate-800 transition-colors"
+                                >
+                                    <Plus className="w-4 h-4" />
+                                    Add User
+                                </button>
+                            )}
+                        </div>
+
+                        {userError && <div className="error-banner rounded-xl px-4 py-3 text-sm">{userError}</div>}
+
+                        {!canManageUsers ? (
+                            <div className="surface-card p-8 text-center text-slate-600 text-sm space-y-3">
+                                <Shield className="w-8 h-8 mx-auto text-slate-400" />
+                                <p>Your role can view content and media but cannot manage admin users.</p>
+                            </div>
+                        ) : (
+                            <div className="surface-card overflow-hidden">
+                                {/* Desktop table header - hidden on mobile */}
+                                <div className="hidden md:grid grid-cols-12 gap-4 p-4 border-b border-slate-200 bg-slate-50/70 text-xs font-semibold uppercase tracking-wider text-slate-500">
+                                    <div className="col-span-3">User</div>
+                                    <div className="col-span-2">Role</div>
+                                    <div className="col-span-3">Status</div>
+                                    <div className="col-span-2">Last Login</div>
+                                    <div className="col-span-2 text-right">Actions</div>
+                                </div>
+                                <div className="divide-y divide-slate-100">
+                                    {isUsersLoading ? (
+                                        <div className="p-8 text-center text-slate-500 text-sm">Loading users...</div>
+                                    ) : users.length === 0 ? (
+                                        <div className="p-8 sm:p-12 text-center space-y-5">
+                                            <div className="w-16 h-16 bg-teal-50 rounded-full flex items-center justify-center mx-auto border border-teal-100">
+                                                <Users className="w-8 h-8 text-teal-700" />
+                                            </div>
+                                            <div className="space-y-2">
+                                                <h3 className="text-lg font-semibold text-slate-900">No admin users found</h3>
+                                                <p className="text-sm text-slate-600 max-w-md mx-auto">
+                                                    Add team members to collaborate on content management.
+                                                </p>
+                                            </div>
+                                            <div className="bg-slate-50 rounded-lg p-4 max-w-md mx-auto text-left border border-slate-100">
+                                                <p className="text-xs font-medium text-slate-700 mb-2">User roles:</p>
+                                                <ul className="space-y-2 text-xs text-slate-600">
+                                                    <li className="flex items-start gap-2">
+                                                        <Shield className="w-3 h-3 mt-0.5 flex-shrink-0 text-teal-700" />
+                                                        <span><strong className="text-slate-700">Owner</strong> – Full access to all features and settings</span>
+                                                    </li>
+                                                    <li className="flex items-start gap-2">
+                                                        <Shield className="w-3 h-3 mt-0.5 flex-shrink-0 text-slate-500" />
+                                                        <span><strong className="text-slate-700">Editor</strong> – Can manage content and images</span>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <button
+                                                onClick={() => setIsUserModalOpen(true)}
+                                                className="focus-ring inline-flex items-center gap-2 rounded-lg bg-teal-700 px-4 py-2.5 text-sm font-medium text-white hover:bg-teal-800"
+                                            >
+                                                <Plus className="w-4 h-4" />
+                                                Add User
+                                            </button>
+                                        </div>
+                                    ) : (
+                                        users.map((user) => {
+                                            const canDisable = user.role !== "owner" || sessionUser?.role === "owner";
+                                            const nextStatus: AdminStatus = user.status === "active" ? "disabled" : "active";
+                                            const statusLabel = user.status === "active" ? "Disable" : "Re-enable";
+                                            const canDelete = user.role !== "owner";
+
+                                            return (
+                                                <div key={user.id}>
+                                                    {/* Desktop table row */}
+                                                    <div className="hidden md:grid grid-cols-12 gap-4 p-4 items-center">
+                                                        <div className="col-span-3">
+                                                            <p className="text-sm font-medium text-slate-900">{user.username}</p>
+                                                        </div>
+                                                        <div className="col-span-2">
+                                                            <span className="inline-flex rounded-full border border-slate-200 px-2 py-0.5 text-xs text-slate-700 capitalize">
+                                                                {user.role}
+                                                            </span>
+                                                        </div>
+                                                        <div className="col-span-3">
+                                                            <span
+                                                                className={clsx(
+                                                                    "inline-flex rounded-full px-2 py-0.5 text-xs capitalize",
+                                                                    user.status === "active"
+                                                                        ? "bg-emerald-50 text-emerald-700"
+                                                                        : "bg-amber-50 text-amber-700"
+                                                                )}
+                                                            >
+                                                                {user.status}
+                                                            </span>
+                                                        </div>
+                                                        <div className="col-span-2 text-xs text-slate-500">
+                                                            {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleString() : "Never"}
+                                                        </div>
+                                                        <div className="col-span-2 flex justify-end gap-2">
+                                                            <button
+                                                                onClick={() => handleCreateResetToken(user.id, user.username)}
+                                                                disabled={!canDisable}
+                                                                className="focus-ring p-1.5 text-slate-400 hover:text-sky-700 hover:bg-sky-50 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                                                                title="Create one-time reset token"
+                                                            >
+                                                                <Copy className="w-4 h-4" />
+                                                            </button>
+                                                            <button
+                                                                onClick={() => {
+                                                                    setResetPasswordTarget({ id: user.id, username: user.username });
+                                                                    setResetPasswordValue("");
+                                                                    setConfirmResetPasswordValue("");
+                                                                }}
+                                                                disabled={!canDisable}
+                                                                className="focus-ring p-1.5 text-slate-400 hover:text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                                                                title="Reset password"
+                                                            >
+                                                                <UserX className="w-4 h-4" />
+                                                            </button>
+                                                            <button
+                                                                onClick={() => handleToggleUserStatus(user.id, nextStatus)}
+                                                                disabled={!canDisable}
+                                                                className="focus-ring p-1.5 text-slate-400 hover:text-amber-700 hover:bg-amber-50 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                                                                title={statusLabel}
+                                                            >
+                                                                <Shield className="w-4 h-4" />
+                                                            </button>
+                                                            <button
+                                                                onClick={() => setDeleteUserTarget({ id: user.id, username: user.username })}
+                                                                disabled={!canDelete}
+                                                                className="focus-ring p-1.5 text-slate-400 hover:text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                                                                title="Delete user"
+                                                            >
+                                                                <Trash2 className="w-4 h-4" />
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                    
+                                                    {/* Mobile card layout */}
+                                                    <div className="md:hidden p-4 space-y-3">
+                                                        <div className="flex items-start justify-between gap-3">
+                                                            <div className="flex-1 min-w-0">
+                                                                <p className="text-sm font-medium text-slate-900 truncate">{user.username}</p>
+                                                                <div className="flex items-center gap-2 mt-1.5">
+                                                                    <span className="inline-flex rounded-full border border-slate-200 px-2 py-0.5 text-xs text-slate-700 capitalize">
+                                                                        {user.role}
+                                                                    </span>
+                                                                    <span
+                                                                        className={clsx(
+                                                                            "inline-flex rounded-full px-2 py-0.5 text-xs capitalize",
+                                                                            user.status === "active"
+                                                                                ? "bg-emerald-50 text-emerald-700"
+                                                                                : "bg-amber-50 text-amber-700"
+                                                                        )}
+                                                                    >
+                                                                        {user.status}
+                                                                    </span>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div className="text-xs text-slate-500">
+                                                            Last login: {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleString() : "Never"}
+                                                        </div>
+                                                        <div className="flex items-center gap-2 pt-2 border-t border-slate-100">
+                                                            <button
+                                                                onClick={() => handleCreateResetToken(user.id, user.username)}
+                                                                disabled={!canDisable}
+                                                                className="focus-ring flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed"
+                                                            >
+                                                                <Copy className="w-3.5 h-3.5" />
+                                                                Reset Token
+                                                            </button>
+                                                            <button
+                                                                onClick={() => {
+                                                                    setResetPasswordTarget({ id: user.id, username: user.username });
+                                                                    setResetPasswordValue("");
+                                                                    setConfirmResetPasswordValue("");
+                                                                }}
+                                                                disabled={!canDisable}
+                                                                className="focus-ring flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed"
+                                                            >
+                                                                <UserX className="w-3.5 h-3.5" />
+                                                                Password
+                                                            </button>
+                                                            <button
+                                                                onClick={() => handleToggleUserStatus(user.id, nextStatus)}
+                                                                disabled={!canDisable}
+                                                                className="focus-ring flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed"
+                                                            >
+                                                                <Shield className="w-3.5 h-3.5" />
+                                                                {statusLabel}
+                                                            </button>
+                                                            <button
+                                                                onClick={() => setDeleteUserTarget({ id: user.id, username: user.username })}
+                                                                disabled={!canDelete}
+                                                                className="focus-ring p-2 text-slate-400 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed border border-slate-300"
+                                                                title="Delete user"
+                                                            >
+                                                                <Trash2 className="w-4 h-4" />
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </main>
+
+            <Modal
+                isOpen={isContentModalOpen}
+                onClose={() => setIsContentModalOpen(false)}
+                title={isNewContent ? "New Content Element" : "Edit Content"}
+                footer={
+                    <>
+                        <button onClick={() => setIsContentModalOpen(false)} className="focus-ring px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Cancel</button>
+                        <button
+                            onClick={handleSaveContent}
+                            disabled={!editingKey || !editingValue || isSavingContent}
+                            className="focus-ring bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-800 disabled:opacity-50"
+                        >
+                            {isSavingContent ? "Saving..." : "Save Content"}
+                        </button>
+                    </>
+                }
+            >
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">Key</label>
+                        <input
+                            type="text"
+                            value={editingKey}
+                            onChange={(e) => setEditingKey(e.target.value)}
+                            disabled={!isNewContent}
+                            className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus-ring focus:border-transparent outline-none font-mono text-sm disabled:text-slate-400"
+                            placeholder="e.g. hero_title"
+                            maxLength={64}
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">Value</label>
+                        <textarea
+                            value={editingValue}
+                            onChange={(e) => setEditingValue(e.target.value)}
+                            className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus-ring focus:border-transparent outline-none min-h-[100px]"
+                            placeholder="Content text..."
+                            maxLength={4000}
+                        />
+                    </div>
+                </div>
+            </Modal>
+
+            <Modal
+                isOpen={!!deleteTarget}
+                onClose={() => setDeleteTarget(null)}
+                title="Confirm Deletion"
+                footer={
+                    <>
+                        <button onClick={() => setDeleteTarget(null)} className="focus-ring px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Cancel</button>
+                        <button
+                            onClick={handleDelete}
+                            disabled={isDeleting}
+                            className="focus-ring bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50"
+                        >
+                            {isDeleting ? "Deleting..." : "Delete Permanently"}
+                        </button>
+                    </>
+                }
+            >
+                <div className="text-center py-4">
+                    <div className="bg-red-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <Trash2 className="w-6 h-6 text-red-600" />
+                    </div>
+                    <div className="space-y-2 text-slate-600">
+                        <p className="break-words">
+                            Are you sure you want to delete this {deleteTarget?.type === "text" ? "content element" : "image"}?
+                        </p>
+                        <p className="text-sm">
+                            {deleteTarget?.type === "text" 
+                                ? "Any code referencing this key will return empty values."
+                                : "This image will no longer be accessible via its URL."
+                            }
+                        </p>
+                        <p className="text-sm font-medium text-red-600">This action cannot be undone.</p>
+                    </div>
+                </div>
+            </Modal>
+
+            <Modal
+                isOpen={isUploadModalOpen}
+                onClose={() => setIsUploadModalOpen(false)}
+                title="Upload Image"
+                footer={
+                    <>
+                        <button onClick={() => setIsUploadModalOpen(false)} className="focus-ring px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Cancel</button>
+                        <button
+                            onClick={handleUpload}
+                            disabled={!file || isUploading}
+                            className="focus-ring bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-teal-800 disabled:opacity-50"
+                        >
+                            {isUploading ? "Uploading..." : "Upload"}
+                        </button>
+                    </>
+                }
+            >
+                <div className="space-y-4">
+                    <div className="border-2 border-dashed border-slate-200 rounded-lg p-6 sm:p-8 text-center hover:bg-slate-50 transition-colors relative">
+                        <input
+                            type="file"
+                            accept="image/*"
+                            onChange={(e) => {
+                                setFile(e.target.files?.[0] || null);
+                                setUploadError(null);
+                            }}
+                            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                        />
+                        <div className="flex flex-col items-center gap-2 pointer-events-none">
+                            <ImageIcon className="w-8 h-8 text-slate-400" />
+                            <span className="text-sm font-medium text-slate-600 break-all">
+                                {file ? file.name : "Click or drag an image file"}
+                            </span>
+                            <span className="text-xs text-slate-500">PNG, JPG, WEBP, SVG supported</span>
+                        </div>
+                    </div>
+                    <input
+                        type="text"
+                        value={altText}
+                        onChange={(e) => setAltText(e.target.value)}
+                        className="w-full px-4 py-2 border border-slate-200 rounded-lg focus-ring text-sm"
+                        placeholder="Alt Text (Optional)"
+                    />
+                    {uploadError && (
+                        <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                            {uploadError}
+                        </div>
+                    )}
+                </div>
+            </Modal>
+
+            <Modal
+                isOpen={isUserModalOpen}
+                onClose={() => setIsUserModalOpen(false)}
+                title="Create Admin User"
+                footer={
+                    <>
+                        <button onClick={() => setIsUserModalOpen(false)} className="focus-ring px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Cancel</button>
+                        <button
+                            onClick={handleCreateUser}
+                            disabled={!newUsername || !newPassword || isCreatingUser}
+                            className="focus-ring bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-800 disabled:opacity-50"
+                        >
+                            {isCreatingUser ? "Creating..." : "Create User"}
+                        </button>
+                    </>
+                }
+            >
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">Username</label>
+                        <input
+                            type="text"
+                            value={newUsername}
+                            onChange={(e) => setNewUsername(e.target.value)}
+                            className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus-ring focus:border-transparent outline-none"
+                            placeholder="e.g. sam_editor"
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">Temporary Password</label>
+                        <input
+                            type="password"
+                            value={newPassword}
+                            onChange={(e) => setNewPassword(e.target.value)}
+                            className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus-ring focus:border-transparent outline-none"
+                            placeholder="Set password"
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">Role</label>
+                        <select
+                            value={newRole}
+                            onChange={(e) => setNewRole(e.target.value as "admin" | "editor" | "viewer")}
+                            className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus-ring focus:border-transparent outline-none"
+                        >
+                            <option value="admin">Admin</option>
+                            <option value="editor">Editor</option>
+                            <option value="viewer">Viewer</option>
+                        </select>
+                    </div>
+                    {userError && (
+                        <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+                            {userError}
+                        </div>
+                    )}
+                </div>
+            </Modal>
+
+            <Modal
+                isOpen={!!deleteUserTarget}
+                onClose={() => setDeleteUserTarget(null)}
+                title="Delete User"
+                footer={
+                    <>
+                        <button onClick={() => setDeleteUserTarget(null)} className="focus-ring px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Cancel</button>
+                        <button
+                            onClick={handleDeleteUser}
+                            disabled={isDeletingUser}
+                            className="focus-ring bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50"
+                        >
+                            {isDeletingUser ? "Deleting..." : "Delete User"}
+                        </button>
+                    </>
+                }
+            >
+                <div className="space-y-3 text-sm text-slate-600">
+                    <p>
+                        Remove <span className="font-medium text-slate-800">{deleteUserTarget?.username}</span> from this admin workspace?
+                    </p>
+                    <p>This permanently deletes the account and revokes all active sessions.</p>
+                </div>
+            </Modal>
+
+            <Modal
+                isOpen={!!resetPasswordTarget}
+                onClose={() => {
+                    setResetPasswordTarget(null);
+                    setResetPasswordValue("");
+                    setConfirmResetPasswordValue("");
+                }}
+                title="Reset User Password"
+                footer={
+                    <>
+                        <button
+                            onClick={() => {
+                                setResetPasswordTarget(null);
+                                setResetPasswordValue("");
+                                setConfirmResetPasswordValue("");
+                            }}
+                            className="focus-ring px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            onClick={handleResetUserPassword}
+                            disabled={isResettingUserPassword}
+                            className="focus-ring bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-800 disabled:opacity-50"
+                        >
+                            {isResettingUserPassword ? "Resetting..." : "Reset Password"}
+                        </button>
+                    </>
+                }
+            >
+                    <div className="space-y-4">
+                        <p className="text-sm text-slate-600">
+                            Set a new password for <span className="font-medium text-slate-800">{resetPasswordTarget?.username}</span>. This will revoke active sessions.
+                        </p>
+                    <div>
+                        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">New Password</label>
+                        <input
+                            type="password"
+                            value={resetPasswordValue}
+                            onChange={(e) => setResetPasswordValue(e.target.value)}
+                            className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus-ring focus:border-transparent outline-none"
+                            placeholder="Enter new password"
+                        />
+                    </div>
+                    <div>
+                        <label className="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1">Confirm New Password</label>
+                        <input
+                            type="password"
+                            value={confirmResetPasswordValue}
+                            onChange={(e) => setConfirmResetPasswordValue(e.target.value)}
+                            className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus-ring focus:border-transparent outline-none"
+                            placeholder="Confirm new password"
+                        />
+                    </div>
+                    <p className="text-xs text-slate-500">Password must be 10-128 chars and include uppercase, lowercase, and a number.</p>
+                    <p className="text-xs text-slate-500">If this user is locked or disabled, reset will reactivate the account for secure recovery.</p>
+                </div>
+            </Modal>
+
+            <Modal
+                isOpen={!!resetTokenResult}
+                onClose={() => setResetTokenResult(null)}
+                title="One-Time Password Reset Token"
+                footer={
+                    <>
+                        <button
+                            ref={resetTokenCloseRef}
+                            onClick={() => setResetTokenResult(null)}
+                            className="focus-ring px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900"
+                        >
+                            Close
+                        </button>
+                        <button
+                            onClick={() => {
+                                if (resetTokenResult) {
+                                    navigator.clipboard.writeText(resetTokenResult.token);
+                                    resetTokenCloseRef.current?.focus();
+                                }
+                            }}
+                            className="focus-ring bg-slate-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-800"
+                        >
+                            Copy Token
+                        </button>
+                    </>
+                }
+            >
+                <div className="space-y-3 text-sm text-slate-600" aria-live="polite">
+                    <p>
+                        Share this one-time token with <span className="font-medium text-slate-800">{resetTokenResult?.username}</span> to reset their password.
+                    </p>
+                    <p className="text-xs text-slate-500">Expires at {resetTokenResult ? new Date(resetTokenResult.expiresAt).toLocaleString() : "-"}.</p>
+                    <div className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-mono text-xs break-all text-slate-700">
+                        {resetTokenResult?.token}
+                    </div>
+                    <p className="text-xs text-amber-700">Token is shown once. Creating a new token invalidates prior tokens for this user.</p>
+                </div>
+            </Modal>
+        </div>
+    );
+}