@aiquants/auth-react-router 0.4.1 → 0.6.0

package/src/admin/views.tsx

@@ -0,0 +1,696 @@
+import type { AuthAllowlistEntry, AuthGroup, AuthGroupMember, AuthUser } from "@aiquants/auth-core"
+import type React from "react"
+import { useState } from "react"
+import { useFetcher, useLoaderData } from "react-router"
+import { defaultUserAdminLabels, type UserAdminLabels } from "./labels"
+import { UserAdminShell, type UserAdminShellProps } from "./ui"
+
+export type UserAdminLoaderData = {
+    segment: string
+    users: AuthUser[]
+    groups: AuthGroup[]
+    groupMembers: AuthGroupMember[]
+    allowlist: AuthAllowlistEntry[]
+    labels?: UserAdminLabels
+}
+
+/**
+ * View for managing users (list, search, toggle active, modal edit).
+ * ユーザー管理ビュー (一覧・検索・アクティブ切替・ダイアログ編集)。
+ */
+/**
+ * Renders the error returned by the last action submission, if any.
+ * 直近の action 送信が返したエラーを表示する部品。
+ *
+ * ロックアウト理由・重複パターン・入力不正などの文言は action が `{ok:false,error}` で返す。
+ * 表示しなければ操作が黙って失敗したように見えるため、各ビューの先頭に必ず置く。
+ */
+function ActionError({ fetcher }: { fetcher: { data?: unknown } }) {
+    const result = fetcher.data as { ok?: boolean; error?: string } | undefined
+    if (result?.ok !== false || !result.error) return null
+    return (
+        <div data-testid="user-admin-action-error" role="alert" style={{ padding: "0.7rem 1rem", borderRadius: "6px", border: "1px solid #fecaca", backgroundColor: "#fef2f2", color: "#b91c1c", fontSize: "0.85rem" }}>
+            {result.error}
+        </div>
+    )
+}
+
+export function UsersView() {
+    const data = useLoaderData() as UserAdminLoaderData
+    const fetcher = useFetcher()
+    const labels = data.labels ?? defaultUserAdminLabels
+
+    const [searchQuery, setSearchQuery] = useState("")
+    const [editingUser, setEditingUser] = useState<AuthUser | null>(null)
+    const [isCreateOpen, setIsCreateOpen] = useState(false)
+
+    const [newDisplayName, setNewDisplayName] = useState("")
+    const [newEmail, setNewEmail] = useState("")
+
+    const filteredUsers = data.users.filter((u) => u.displayName.toLowerCase().includes(searchQuery.toLowerCase()) || u.email.toLowerCase().includes(searchQuery.toLowerCase()))
+
+    const handleToggleActive = (user: AuthUser) => {
+        fetcher.submit({ intent: "toggleUserActive", userId: String(user.id), isActive: String(!user.isActive) }, { method: "post" })
+    }
+
+    const handleCreateUser = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!(newDisplayName && newEmail)) return
+        fetcher.submit({ intent: "createUser", displayName: newDisplayName, email: newEmail }, { method: "post" })
+        setNewDisplayName("")
+        setNewEmail("")
+        setIsCreateOpen(false)
+    }
+
+    const handleUpdateUser = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!editingUser) return
+        fetcher.submit({ intent: "updateUser", userId: String(editingUser.id), displayName: editingUser.displayName, email: editingUser.email }, { method: "post" })
+        setEditingUser(null)
+    }
+
+    return (
+        <section data-testid="users-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <ActionError fetcher={fetcher} />
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
+                <input
+                    type="text"
+                    placeholder={labels.usersView.searchPlaceholder}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    data-testid="users-search-input"
+                    style={{ padding: "6px 12px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", width: "260px" }}
+                />
+                <button type="button" onClick={() => setIsCreateOpen(true)} data-testid="users-add-button" style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
+                    {labels.usersView.addUser}
+                </button>
+            </div>
+
+            <div style={{ backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0", overflow: "hidden" }}>
+                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.85rem", textAlign: "left" }}>
+                    <thead>
+                        <tr style={{ backgroundColor: "#f8fafc", borderBottom: "1px solid #e2e8f0", color: "#475569" }}>
+                            <th style={{ padding: "10px 14px" }}>{labels.usersView.id}</th>
+                            <th style={{ padding: "10px 14px" }}>{labels.usersView.displayName}</th>
+                            <th style={{ padding: "10px 14px" }}>{labels.usersView.email}</th>
+                            <th style={{ padding: "10px 14px" }}>{labels.usersView.status}</th>
+                            <th style={{ padding: "10px 14px", textAlign: "right" }}>{labels.usersView.actions}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {filteredUsers.map((u) => (
+                            <tr key={u.id} style={{ borderBottom: "1px solid #f1f5f9" }} data-testid={`user-row-${u.id}`}>
+                                <td style={{ padding: "10px 14px", color: "#64748b" }}>#{u.id}</td>
+                                <td style={{ padding: "10px 14px", fontWeight: 600, color: "#0f172a" }}>{u.displayName}</td>
+                                <td style={{ padding: "10px 14px", color: "#475569" }}>{u.email}</td>
+                                <td style={{ padding: "10px 14px" }}>
+                                    <span style={{ fontSize: "0.75rem", padding: "2px 8px", borderRadius: "10px", backgroundColor: u.isActive ? "#dcfce7" : "#fee2e2", color: u.isActive ? "#15803d" : "#b91c1c", fontWeight: 600 }}>
+                                        {u.isActive ? labels.usersView.active : labels.usersView.inactive}
+                                    </span>
+                                </td>
+                                <td style={{ padding: "10px 14px", textAlign: "right" }}>
+                                    <button
+                                        type="button"
+                                        onClick={() => setEditingUser(u)}
+                                        data-testid={`edit-user-btn-${u.id}`}
+                                        style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.78rem", cursor: "pointer", marginRight: "6px" }}>
+                                        {labels.usersView.edit}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        onClick={() => handleToggleActive(u)}
+                                        data-testid={`toggle-user-btn-${u.id}`}
+                                        style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.78rem", cursor: "pointer", color: u.isActive ? "#b91c1c" : "#15803d" }}>
+                                        {u.isActive ? labels.usersView.deactivate : labels.usersView.activate}
+                                    </button>
+                                </td>
+                            </tr>
+                        ))}
+                        {filteredUsers.length === 0 && (
+                            <tr>
+                                <td colSpan={5} style={{ padding: "2rem", textAlign: "center", color: "#94a3b8" }}>
+                                    {labels.usersView.empty}
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Create Modal */}
+            {isCreateOpen && (
+                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }} data-testid="user-create-modal">
+                    <form onSubmit={handleCreateUser} style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
+                        <h3 style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>{labels.usersView.addUser}</h3>
+                        <div style={{ marginBottom: "1rem" }}>
+                            <label htmlFor="create-user-display-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.usersView.displayName}
+                            </label>
+                            <input
+                                id="create-user-display-name-input"
+                                type="text"
+                                value={newDisplayName}
+                                onChange={(e) => setNewDisplayName(e.target.value)}
+                                required
+                                data-testid="create-user-display-name"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
+                            />
+                        </div>
+                        <div style={{ marginBottom: "1.2rem" }}>
+                            <label htmlFor="create-user-email-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.usersView.email}
+                            </label>
+                            <input
+                                id="create-user-email-input"
+                                type="email"
+                                value={newEmail}
+                                onChange={(e) => setNewEmail(e.target.value)}
+                                required
+                                data-testid="create-user-email"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
+                            />
+                        </div>
+                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+                            <button type="button" onClick={() => setIsCreateOpen(false)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                                キャンセル
+                            </button>
+                            <button type="submit" data-testid="submit-create-user" style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", cursor: "pointer" }}>
+                                作成
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            )}
+
+            {/* Edit Modal */}
+            {editingUser && (
+                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }} data-testid="user-edit-modal">
+                    <form onSubmit={handleUpdateUser} style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
+                        <h3 style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>{labels.usersView.editUser}</h3>
+                        <div style={{ marginBottom: "1rem" }}>
+                            <label htmlFor="edit-user-display-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.usersView.displayName}
+                            </label>
+                            <input
+                                id="edit-user-display-name-input"
+                                type="text"
+                                value={editingUser.displayName}
+                                onChange={(e) => setEditingUser({ ...editingUser, displayName: e.target.value })}
+                                required
+                                data-testid="edit-user-display-name"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
+                            />
+                        </div>
+                        <div style={{ marginBottom: "1.2rem" }}>
+                            <label htmlFor="edit-user-email-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.usersView.email}
+                            </label>
+                            <input
+                                id="edit-user-email-input"
+                                type="email"
+                                value={editingUser.email}
+                                onChange={(e) => setEditingUser({ ...editingUser, email: e.target.value })}
+                                required
+                                data-testid="edit-user-email"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
+                            />
+                        </div>
+                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+                            <button type="button" onClick={() => setEditingUser(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                                {labels.usersView.cancel}
+                            </button>
+                            <button type="submit" data-testid="submit-edit-user" style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", cursor: "pointer" }}>
+                                {labels.usersView.save}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            )}
+        </section>
+    )
+}
+
+/**
+ * View for managing user groups (create, edit, delete).
+ * ユーザーグループ管理ビュー (作成・編集・削除)。
+ */
+export function GroupsView() {
+    const data = useLoaderData() as UserAdminLoaderData
+    const fetcher = useFetcher()
+    const labels = data.labels ?? defaultUserAdminLabels
+
+    const [searchQuery, setSearchQuery] = useState("")
+    const [isCreateOpen, setIsCreateOpen] = useState(false)
+    const [editingGroup, setEditingGroup] = useState<AuthGroup | null>(null)
+
+    const [newGroupKey, setNewGroupKey] = useState("")
+    const [newName, setNewName] = useState("")
+    const [newDescription, setNewDescription] = useState("")
+
+    const filteredGroups = data.groups.filter((g) => g.name.toLowerCase().includes(searchQuery.toLowerCase()) || g.groupKey.toLowerCase().includes(searchQuery.toLowerCase()))
+
+    const handleCreateGroup = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!(newGroupKey && newName)) return
+        fetcher.submit({ intent: "createGroup", groupKey: newGroupKey, name: newName, description: newDescription }, { method: "post" })
+        setNewGroupKey("")
+        setNewName("")
+        setNewDescription("")
+        setIsCreateOpen(false)
+    }
+
+    const handleUpdateGroup = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!editingGroup) return
+        fetcher.submit({ intent: "updateGroup", groupId: String(editingGroup.id), name: editingGroup.name, description: editingGroup.description ?? "" }, { method: "post" })
+        setEditingGroup(null)
+    }
+
+    const handleDeleteGroup = (groupId: number) => {
+        if (!window.confirm(labels.groupsView.confirmDelete)) return
+        fetcher.submit({ intent: "deleteGroup", groupId: String(groupId) }, { method: "post" })
+    }
+
+    return (
+        <section data-testid="groups-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <ActionError fetcher={fetcher} />
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
+                <input
+                    type="text"
+                    placeholder={labels.groupsView.searchPlaceholder}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    data-testid="groups-search-input"
+                    style={{ padding: "6px 12px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", width: "260px" }}
+                />
+                <button type="button" onClick={() => setIsCreateOpen(true)} data-testid="groups-add-button" style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
+                    {labels.groupsView.addGroup}
+                </button>
+            </div>
+
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1rem" }}>
+                {filteredGroups.map((g) => {
+                    const memberCount = data.groupMembers.filter((m) => m.groupId === g.id).length
+                    return (
+                        <div key={g.id} style={{ backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0", padding: "1rem", display: "flex", flexDirection: "column", justifyContent: "space-between" }} data-testid={`group-card-${g.id}`}>
+                            <div>
+                                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }}>
+                                    <h4 style={{ margin: 0, fontSize: "1rem", color: "#0f172a" }}>{g.name}</h4>
+                                    <span style={{ fontSize: "0.72rem", backgroundColor: "#e0e7ff", color: "#4338ca", padding: "2px 6px", borderRadius: "4px", fontFamily: "monospace" }}>{g.groupKey}</span>
+                                </div>
+                                <p style={{ margin: "0 0 0.8rem 0", fontSize: "0.82rem", color: "#64748b", minHeight: "2.4em" }}>{g.description || labels.groupsView.noDescription}</p>
+                            </div>
+                            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid #f1f5f9", paddingTop: "0.6rem" }}>
+                                <span style={{ fontSize: "0.78rem", color: "#475569" }}>
+                                    👥 メンバー: <strong>{memberCount}</strong> 人
+                                </span>
+                                <div>
+                                    <button
+                                        type="button"
+                                        onClick={() => setEditingGroup(g)}
+                                        data-testid={`edit-group-btn-${g.id}`}
+                                        style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.75rem", cursor: "pointer", marginRight: "4px" }}>
+                                        {labels.usersView.edit}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        onClick={() => handleDeleteGroup(g.id)}
+                                        data-testid={`delete-group-btn-${g.id}`}
+                                        style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #fee2e2", backgroundColor: "#fff5f5", color: "#b91c1c", fontSize: "0.75rem", cursor: "pointer" }}>
+                                        削除
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+
+            {/* Create Group Modal */}
+            {isCreateOpen && (
+                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }} data-testid="group-create-modal">
+                    <form onSubmit={handleCreateGroup} style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
+                        <h3 style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>{labels.groupsView.addGroup}</h3>
+                        <div style={{ marginBottom: "1rem" }}>
+                            <label htmlFor="create-group-key-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.groupsView.groupKey}
+                            </label>
+                            <input
+                                id="create-group-key-input"
+                                type="text"
+                                value={newGroupKey}
+                                onChange={(e) => setNewGroupKey(e.target.value)}
+                                placeholder={labels.groupsView.groupKeyPlaceholder}
+                                required
+                                data-testid="create-group-key"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
+                            />
+                        </div>
+                        <div style={{ marginBottom: "1rem" }}>
+                            <label htmlFor="create-group-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.groupsView.name}
+                            </label>
+                            <input
+                                id="create-group-name-input"
+                                type="text"
+                                value={newName}
+                                onChange={(e) => setNewName(e.target.value)}
+                                placeholder={labels.groupsView.namePlaceholder}
+                                required
+                                data-testid="create-group-name"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
+                            />
+                        </div>
+                        <div style={{ marginBottom: "1.2rem" }}>
+                            <label htmlFor="create-group-desc-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.groupsView.description}
+                            </label>
+                            <textarea
+                                id="create-group-desc-input"
+                                value={newDescription}
+                                onChange={(e) => setNewDescription(e.target.value)}
+                                data-testid="create-group-description"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box", height: "60px" }}
+                            />
+                        </div>
+                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+                            <button type="button" onClick={() => setIsCreateOpen(false)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                                キャンセル
+                            </button>
+                            <button type="submit" data-testid="submit-create-group" style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", cursor: "pointer" }}>
+                                作成
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            )}
+
+            {/* Edit Group Modal */}
+            {editingGroup && (
+                <div style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0,0,0,0.4)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100 }} data-testid="group-edit-modal">
+                    <form onSubmit={handleUpdateGroup} style={{ backgroundColor: "#ffffff", padding: "1.5rem", borderRadius: "8px", width: "360px", boxShadow: "0 10px 25px rgba(0,0,0,0.15)" }}>
+                        <h3 style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>{labels.groupsView.editGroup}</h3>
+                        <div style={{ marginBottom: "1rem" }}>
+                            <label htmlFor="edit-group-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.groupsView.name}
+                            </label>
+                            <input
+                                id="edit-group-name-input"
+                                type="text"
+                                value={editingGroup.name}
+                                onChange={(e) => setEditingGroup({ ...editingGroup, name: e.target.value })}
+                                required
+                                data-testid="edit-group-name"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
+                            />
+                        </div>
+                        <div style={{ marginBottom: "1.2rem" }}>
+                            <label htmlFor="edit-group-desc-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
+                                {labels.groupsView.description}
+                            </label>
+                            <textarea
+                                id="edit-group-desc-input"
+                                value={editingGroup.description ?? ""}
+                                onChange={(e) => setEditingGroup({ ...editingGroup, description: e.target.value })}
+                                data-testid="edit-group-description"
+                                style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box", height: "60px" }}
+                            />
+                        </div>
+                        <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+                            <button type="button" onClick={() => setEditingGroup(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                                {labels.groupsView.cancel}
+                            </button>
+                            <button type="submit" data-testid="submit-edit-group" style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", cursor: "pointer" }}>
+                                {labels.groupsView.save}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            )}
+        </section>
+    )
+}
+
+/**
+ * View for managing group member assignments.
+ * グループメンバー割り当て管理ビュー。
+ */
+export function GroupMembersView() {
+    const data = useLoaderData() as UserAdminLoaderData
+    const fetcher = useFetcher()
+    const labels = data.labels ?? defaultUserAdminLabels
+
+    const [selectedGroupId, setSelectedGroupId] = useState<number>(data.groups[0]?.id ?? 0)
+
+    const currentGroup = data.groups.find((g) => g.id === selectedGroupId)
+    const currentMemberUserIds = new Set(data.groupMembers.filter((m) => m.groupId === selectedGroupId).map((m) => m.userId))
+
+    const handleToggleMember = (userId: number, isMember: boolean) => {
+        if (isMember) {
+            fetcher.submit({ intent: "removeGroupMember", groupId: String(selectedGroupId), userId: String(userId) }, { method: "post" })
+        } else {
+            fetcher.submit({ intent: "addGroupMember", groupId: String(selectedGroupId), userId: String(userId) }, { method: "post" })
+        }
+    }
+
+    return (
+        <section data-testid="group-members-view-section" style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: "1.2rem" }}>
+            <ActionError fetcher={fetcher} />
+            <div style={{ backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
+                <h4 style={{ margin: "0 0 0.8rem 0", fontSize: "0.9rem", color: "#475569" }}>{labels.groupMembersView.selectGroup}</h4>
+                <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
+                    {data.groups.map((g) => {
+                        const isSelected = g.id === selectedGroupId
+                        return (
+                            <button
+                                type="button"
+                                key={g.id}
+                                onClick={() => setSelectedGroupId(g.id)}
+                                data-testid={`select-group-btn-${g.id}`}
+                                style={{
+                                    textAlign: "left",
+                                    padding: "8px 10px",
+                                    borderRadius: "6px",
+                                    border: isSelected ? "1px solid #6366f1" : "1px solid #e2e8f0",
+                                    backgroundColor: isSelected ? "#e0e7ff" : "#ffffff",
+                                    color: isSelected ? "#3730a3" : "#0f172a",
+                                    cursor: "pointer",
+                                    fontWeight: isSelected ? 600 : 400,
+                                    fontSize: "0.85rem",
+                                }}>
+                                {g.name}
+                            </button>
+                        )
+                    })}
+                </div>
+            </div>
+
+            <div style={{ backgroundColor: "#ffffff", padding: "1.2rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
+                {currentGroup ? (
+                    <>
+                        <div style={{ marginBottom: "1rem", borderBottom: "1px solid #e2e8f0", paddingBottom: "0.8rem" }}>
+                            <h3 style={{ margin: 0, fontSize: "1.1rem", color: "#0f172a" }}>{currentGroup.name} の所属メンバー</h3>
+                            <span style={{ fontSize: "0.8rem", color: "#64748b" }}>グループキー: {currentGroup.groupKey}</span>
+                        </div>
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                            {data.users.map((u) => {
+                                const isMember = currentMemberUserIds.has(u.id)
+                                return (
+                                    <div
+                                        key={u.id}
+                                        style={{
+                                            display: "flex",
+                                            justifyContent: "space-between",
+                                            alignItems: "center",
+                                            padding: "8px 12px",
+                                            borderRadius: "6px",
+                                            border: "1px solid #f1f5f9",
+                                            backgroundColor: isMember ? "#f0fdf4" : "#ffffff",
+                                        }}
+                                        data-testid={`member-row-${u.id}`}>
+                                        <div>
+                                            <span style={{ fontWeight: 600, fontSize: "0.88rem", color: "#0f172a", marginRight: "8px" }}>{u.displayName}</span>
+                                            <span style={{ fontSize: "0.78rem", color: "#64748b" }}>({u.email})</span>
+                                        </div>
+                                        <button
+                                            type="button"
+                                            onClick={() => handleToggleMember(u.id, isMember)}
+                                            data-testid={`toggle-member-btn-${u.id}`}
+                                            style={{
+                                                padding: "4px 12px",
+                                                borderRadius: "4px",
+                                                border: isMember ? "1px solid #b91c1c" : "1px solid #0284c7",
+                                                backgroundColor: isMember ? "#ffffff" : "#0284c7",
+                                                color: isMember ? "#b91c1c" : "#ffffff",
+                                                fontSize: "0.78rem",
+                                                fontWeight: 600,
+                                                cursor: "pointer",
+                                            }}>
+                                            {isMember ? labels.groupMembersView.actionRemove : labels.groupMembersView.actionAdd}
+                                        </button>
+                                    </div>
+                                )
+                            })}
+                        </div>
+                    </>
+                ) : (
+                    <div style={{ color: "#94a3b8", textAlign: "center", padding: "2rem" }}>{labels.groupMembersView.selectPrompt}</div>
+                )}
+            </div>
+        </section>
+    )
+}
+
+/**
+ * View for managing authentication allowlist entries.
+ * アクセス許可リスト (Allowlist) 管理ビュー。
+ */
+export function AllowlistView() {
+    const data = useLoaderData() as UserAdminLoaderData
+    const fetcher = useFetcher()
+    const labels = data.labels ?? defaultUserAdminLabels
+
+    const [pattern, setPattern] = useState("")
+    const [type, setType] = useState<"email" | "domain">("email")
+    const [description, setDescription] = useState("")
+
+    const handleAddEntry = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!pattern) return
+        fetcher.submit({ intent: "addAllowlistEntry", pattern, type, description }, { method: "post" })
+        setPattern("")
+        setDescription("")
+    }
+
+    const handleRemoveEntry = (id: number) => {
+        fetcher.submit({ intent: "removeAllowlistEntry", entryId: String(id) }, { method: "post" })
+    }
+
+    return (
+        <section data-testid="allowlist-view-section" style={{ display: "flex", flexDirection: "column", gap: "1.2rem" }}>
+            <ActionError fetcher={fetcher} />
+            <form onSubmit={handleAddEntry} style={{ backgroundColor: "#ffffff", padding: "1.2rem", borderRadius: "8px", border: "1px solid #e2e8f0", display: "flex", flexWrap: "wrap", gap: "0.8rem", alignItems: "flex-end" }}>
+                <div style={{ flex: 2, minWidth: "220px" }}>
+                    <label htmlFor="allowlist-pattern-input-field" style={{ display: "block", fontSize: "0.78rem", color: "#475569", marginBottom: "4px" }}>
+                        {labels.allowlistView.pattern}
+                    </label>
+                    <input
+                        id="allowlist-pattern-input-field"
+                        type="text"
+                        value={pattern}
+                        onChange={(e) => setPattern(e.target.value)}
+                        required
+                        data-testid="allowlist-pattern-input"
+                        style={{ width: "100%", padding: "6px 10px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", boxSizing: "border-box" }}
+                    />
+                </div>
+                <div style={{ flex: 1, minWidth: "140px" }}>
+                    <label htmlFor="allowlist-type-select-field" style={{ display: "block", fontSize: "0.78rem", color: "#475569", marginBottom: "4px" }}>
+                        {labels.allowlistView.type}
+                    </label>
+                    <select
+                        id="allowlist-type-select-field"
+                        value={type}
+                        onChange={(e) => setType(e.target.value as "email" | "domain")}
+                        data-testid="allowlist-type-select"
+                        style={{ width: "100%", padding: "6px 10px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", boxSizing: "border-box" }}>
+                        <option value="email">{labels.allowlistView.emailType}</option>
+                        <option value="domain">{labels.allowlistView.domainType}</option>
+                    </select>
+                </div>
+                <div style={{ flex: 2, minWidth: "200px" }}>
+                    <label htmlFor="allowlist-desc-input-field" style={{ display: "block", fontSize: "0.78rem", color: "#475569", marginBottom: "4px" }}>
+                        {labels.allowlistView.description}
+                    </label>
+                    <input
+                        id="allowlist-desc-input-field"
+                        type="text"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        data-testid="allowlist-desc-input"
+                        style={{ width: "100%", padding: "6px 10px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", boxSizing: "border-box" }}
+                    />
+                </div>
+                <button type="submit" data-testid="submit-allowlist-add" style={{ padding: "7px 16px", borderRadius: "6px", backgroundColor: "#047857", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
+                    {labels.allowlistView.addEntry}
+                </button>
+            </form>
+
+            <div style={{ backgroundColor: "#ffffff", borderRadius: "8px", border: "1px solid #e2e8f0", overflow: "hidden" }}>
+                <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.85rem", textAlign: "left" }}>
+                    <thead>
+                        <tr style={{ backgroundColor: "#f8fafc", borderBottom: "1px solid #e2e8f0", color: "#475569" }}>
+                            <th style={{ padding: "10px 14px" }}>ID</th>
+                            <th style={{ padding: "10px 14px" }}>{labels.allowlistView.pattern}</th>
+                            <th style={{ padding: "10px 14px" }}>{labels.allowlistView.type}</th>
+                            <th style={{ padding: "10px 14px" }}>{labels.allowlistView.description}</th>
+                            <th style={{ padding: "10px 14px", textAlign: "right" }}>{labels.allowlistView.actions}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {data.allowlist.map((item) => (
+                            <tr key={item.id} style={{ borderBottom: "1px solid #f1f5f9" }} data-testid={`allowlist-row-${item.id}`}>
+                                <td style={{ padding: "10px 14px", color: "#64748b" }}>#{item.id}</td>
+                                <td style={{ padding: "10px 14px", fontWeight: 600, color: "#0f172a", fontFamily: "monospace" }}>{item.pattern}</td>
+                                <td style={{ padding: "10px 14px" }}>
+                                    <span style={{ fontSize: "0.75rem", padding: "2px 8px", borderRadius: "10px", backgroundColor: item.type === "email" ? "#e0f2fe" : "#fef3c7", color: item.type === "email" ? "#0369a1" : "#b45309", fontWeight: 600 }}>
+                                        {item.type === "email" ? labels.allowlistView.emailTypeShort : labels.allowlistView.domainTypeShort}
+                                    </span>
+                                </td>
+                                <td style={{ padding: "10px 14px", color: "#475569" }}>{item.description || "-"}</td>
+                                <td style={{ padding: "10px 14px", textAlign: "right" }}>
+                                    {/* 変更不能な供給元 (環境変数など) は削除ボタンを出さない */}
+                                    {item.readOnly ? (
+                                        <span data-testid={`readonly-allowlist-${item.id}`} style={{ fontSize: "0.75rem", color: "#94a3b8" }}>
+                                            {labels.allowlistView.readOnly}
+                                        </span>
+                                    ) : (
+                                        <button
+                                            type="button"
+                                            onClick={() => handleRemoveEntry(item.id)}
+                                            data-testid={`remove-allowlist-btn-${item.id}`}
+                                            style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #fee2e2", backgroundColor: "#fff5f5", color: "#b91c1c", fontSize: "0.78rem", cursor: "pointer" }}>
+                                            削除
+                                        </button>
+                                    )}
+                                </td>
+                            </tr>
+                        ))}
+                        {data.allowlist.length === 0 && (
+                            <tr>
+                                <td colSpan={5} style={{ padding: "2rem", textAlign: "center", color: "#94a3b8" }}>
+                                    {labels.allowlistView.empty}
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </section>
+    )
+}
+
+const SEGMENT_VIEWS: Record<string, () => React.ReactElement> = {
+    users: UsersView,
+    groups: GroupsView,
+    group_members: GroupMembersView,
+    allowlist: AllowlistView,
+}
+
+export type AuthUserAdminAppViewProps = UserAdminShellProps
+
+/**
+ * Top-level application view component for the user administration UI (`/users/*`).
+ * ユーザー管理 UI 全体を描画するトップレベルコンポーネント。
+ */
+export function AuthUserAdminAppView({ renderHeader }: AuthUserAdminAppViewProps = {}) {
+    const data = useLoaderData() as UserAdminLoaderData | undefined
+    const segment = data?.segment ?? "users"
+    const View = SEGMENT_VIEWS[segment] ?? UsersView
+
+    return (
+        <UserAdminShell renderHeader={renderHeader}>
+            <View />
+        </UserAdminShell>
+    )
+}