Add Groups management and split Admin navigation
- New backend: Group + GroupMembership models, schemas, CRUD router at /api/admin/groups (list, create, get detail, update, delete, add/remove members) - New Alembic migration: groups and group_memberships tables - Frontend: Admin sidebar item is now an expandable accordion with Users and Groups sub-items; AdminPage redirects to /admin/users; new AdminUsersPage and AdminGroupsPage with inline member management panel - API client: 7 new group functions + TypeScript types Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
curo1305
@@ -0,0 +1,315 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
adminListGroups,
|
||||
adminCreateGroup,
|
||||
adminDeleteGroup,
|
||||
adminGetGroup,
|
||||
adminUpdateGroup,
|
||||
adminAddGroupMember,
|
||||
adminRemoveGroupMember,
|
||||
adminGetUsers,
|
||||
type GroupOut,
|
||||
type GroupCreate,
|
||||
} from "../api/client";
|
||||
|
||||
export default function AdminGroupsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { data: groups = [], isLoading } = useQuery({
|
||||
queryKey: ["admin-groups"],
|
||||
queryFn: adminListGroups,
|
||||
});
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [form, setForm] = useState<GroupCreate>({ name: "", description: "" });
|
||||
const [expandedGroupId, setExpandedGroupId] = useState<string | null>(null);
|
||||
const [editingGroup, setEditingGroup] = useState<GroupOut | null>(null);
|
||||
const [editName, setEditName] = useState("");
|
||||
const [editDescription, setEditDescription] = useState("");
|
||||
const [editError, setEditError] = useState<string | null>(null);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: adminCreateGroup,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-groups"] });
|
||||
setShowForm(false);
|
||||
setForm({ name: "", description: "" });
|
||||
setFormError(null);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const detail = err?.response?.data?.detail;
|
||||
setFormError(typeof detail === "string" ? detail : "Failed to create group");
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: adminDeleteGroup,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-groups"] });
|
||||
setExpandedGroupId(null);
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: { name?: string; description?: string | null } }) =>
|
||||
adminUpdateGroup(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-groups"] });
|
||||
setEditingGroup(null);
|
||||
setEditError(null);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const detail = err?.response?.data?.detail;
|
||||
setEditError(typeof detail === "string" ? detail : "Failed to update group");
|
||||
},
|
||||
});
|
||||
|
||||
const handleCreate = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
createMutation.mutate({ name: form.name, description: form.description || null });
|
||||
};
|
||||
|
||||
const handleDelete = (group: GroupOut) => {
|
||||
if (!window.confirm(`Delete group "${group.name}"? This cannot be undone.`)) return;
|
||||
deleteMutation.mutate(group.id);
|
||||
};
|
||||
|
||||
const startEdit = (group: GroupOut) => {
|
||||
setEditingGroup(group);
|
||||
setEditName(group.name);
|
||||
setEditDescription(group.description ?? "");
|
||||
setEditError(null);
|
||||
};
|
||||
|
||||
const handleUpdate = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!editingGroup) return;
|
||||
updateMutation.mutate({
|
||||
id: editingGroup.id,
|
||||
data: { name: editName, description: editDescription || null },
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 32, maxWidth: 800 }}>
|
||||
<h1>Group Management</h1>
|
||||
|
||||
{isLoading ? (
|
||||
<p>Loading…</p>
|
||||
) : (
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 24 }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: "2px solid #ccc", textAlign: "left" }}>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Name</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Description</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Members</th>
|
||||
<th style={{ padding: "8px 0" }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{groups.map((g) => (
|
||||
<>
|
||||
<tr key={g.id} style={{ borderBottom: expandedGroupId === g.id ? "none" : "1px solid #eee" }}>
|
||||
<td style={{ padding: "8px 12px 8px 0", fontWeight: 500 }}>{g.name}</td>
|
||||
<td style={{ padding: "8px 12px 8px 0", color: "#666" }}>{g.description ?? "—"}</td>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>{g.member_count}</td>
|
||||
<td style={{ padding: "8px 0", display: "flex", gap: 8 }}>
|
||||
<button onClick={() => setExpandedGroupId(expandedGroupId === g.id ? null : g.id)}>
|
||||
{expandedGroupId === g.id ? "Hide members" : "Manage members"}
|
||||
</button>
|
||||
<button onClick={() => startEdit(g)}>Edit</button>
|
||||
<button onClick={() => handleDelete(g)} style={{ color: "red" }}>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{expandedGroupId === g.id && (
|
||||
<tr key={`${g.id}-members`}>
|
||||
<td colSpan={4} style={{ padding: "0 0 16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<GroupMembersPanel groupId={g.id} />
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
{groups.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} style={{ padding: "16px 0", color: "#999" }}>No groups yet.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{editingGroup && (
|
||||
<div style={{ background: "#f5f5f5", padding: 16, borderRadius: 6, marginBottom: 24, maxWidth: 400 }}>
|
||||
<h3 style={{ marginTop: 0 }}>Edit Group</h3>
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", marginBottom: 4 }}>Name</label>
|
||||
<input
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
required
|
||||
style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", marginBottom: 4 }}>Description</label>
|
||||
<input
|
||||
value={editDescription}
|
||||
onChange={(e) => setEditDescription(e.target.value)}
|
||||
style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
|
||||
/>
|
||||
</div>
|
||||
{editError && <p style={{ color: "red" }}>{editError}</p>}
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button type="submit" disabled={updateMutation.isPending}>
|
||||
{updateMutation.isPending ? "Saving…" : "Save"}
|
||||
</button>
|
||||
<button type="button" onClick={() => { setEditingGroup(null); setEditError(null); }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!showForm ? (
|
||||
<button onClick={() => setShowForm(true)}>+ Create Group</button>
|
||||
) : (
|
||||
<form onSubmit={handleCreate} style={{ maxWidth: 400 }}>
|
||||
<h2 style={{ marginTop: 0 }}>New Group</h2>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", marginBottom: 4 }}>Name</label>
|
||||
<input
|
||||
value={form.name}
|
||||
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
|
||||
required
|
||||
style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", marginBottom: 4 }}>Description (optional)</label>
|
||||
<input
|
||||
value={form.description ?? ""}
|
||||
onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
|
||||
style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
|
||||
/>
|
||||
</div>
|
||||
{formError && <p style={{ color: "red" }}>{formError}</p>}
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? "Creating…" : "Create"}
|
||||
</button>
|
||||
<button type="button" onClick={() => { setShowForm(false); setFormError(null); }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupMembersPanel({ groupId }: { groupId: string }) {
|
||||
const queryClient = useQueryClient();
|
||||
const { data: group, isLoading } = useQuery({
|
||||
queryKey: ["admin-group", groupId],
|
||||
queryFn: () => adminGetGroup(groupId),
|
||||
});
|
||||
const { data: allUsers = [] } = useQuery({
|
||||
queryKey: ["admin-users"],
|
||||
queryFn: adminGetUsers,
|
||||
});
|
||||
|
||||
const [selectedUserId, setSelectedUserId] = useState("");
|
||||
|
||||
const addMutation = useMutation({
|
||||
mutationFn: ({ gId, uId }: { gId: string; uId: string }) => adminAddGroupMember(gId, uId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-group", groupId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-groups"] });
|
||||
setSelectedUserId("");
|
||||
},
|
||||
});
|
||||
|
||||
const removeMutation = useMutation({
|
||||
mutationFn: ({ gId, uId }: { gId: string; uId: string }) => adminRemoveGroupMember(gId, uId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-group", groupId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-groups"] });
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) return <p style={{ padding: "8px 16px" }}>Loading members…</p>;
|
||||
if (!group) return null;
|
||||
|
||||
const memberIds = new Set(group.members.map((m) => m.id));
|
||||
const nonMembers = allUsers.filter((u) => !memberIds.has(u.id));
|
||||
|
||||
return (
|
||||
<div style={{ padding: "8px 16px", background: "#fafafa", borderRadius: 4 }}>
|
||||
<h4 style={{ margin: "0 0 8px" }}>Members ({group.members.length})</h4>
|
||||
|
||||
{group.members.length === 0 ? (
|
||||
<p style={{ color: "#999", margin: "0 0 12px" }}>No members yet.</p>
|
||||
) : (
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 12 }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: "1px solid #ddd", textAlign: "left" }}>
|
||||
<th style={{ padding: "4px 12px 4px 0", fontSize: 13 }}>Email</th>
|
||||
<th style={{ padding: "4px 12px 4px 0", fontSize: 13 }}>Name</th>
|
||||
<th style={{ padding: "4px 12px 4px 0", fontSize: 13 }}>Status</th>
|
||||
<th style={{ padding: "4px 0", fontSize: 13 }}></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{group.members.map((m) => (
|
||||
<tr key={m.id} style={{ borderBottom: "1px solid #eee" }}>
|
||||
<td style={{ padding: "4px 12px 4px 0", fontSize: 13 }}>{m.email}</td>
|
||||
<td style={{ padding: "4px 12px 4px 0", fontSize: 13 }}>{m.full_name ?? "—"}</td>
|
||||
<td style={{ padding: "4px 12px 4px 0", fontSize: 13 }}>
|
||||
{m.is_active ? "Active" : "Inactive"}
|
||||
</td>
|
||||
<td style={{ padding: "4px 0" }}>
|
||||
<button
|
||||
style={{ fontSize: 12, color: "red" }}
|
||||
disabled={removeMutation.isPending}
|
||||
onClick={() => removeMutation.mutate({ gId: groupId, uId: m.id })}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{nonMembers.length > 0 && (
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<select
|
||||
value={selectedUserId}
|
||||
onChange={(e) => setSelectedUserId(e.target.value)}
|
||||
style={{ padding: "4px 8px", flex: 1, maxWidth: 300 }}
|
||||
>
|
||||
<option value="">— Select user to add —</option>
|
||||
{nonMembers.map((u) => (
|
||||
<option key={u.id} value={u.id}>
|
||||
{u.email}{u.full_name ? ` (${u.full_name})` : ""}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
disabled={!selectedUserId || addMutation.isPending}
|
||||
onClick={() => selectedUserId && addMutation.mutate({ gId: groupId, uId: selectedUserId })}
|
||||
>
|
||||
{addMutation.isPending ? "Adding…" : "Add"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,175 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
adminCreateUser,
|
||||
adminDeleteUser,
|
||||
adminGetUsers,
|
||||
adminToggleActive,
|
||||
getMe,
|
||||
type AdminUserCreate,
|
||||
type UserData,
|
||||
} from "../api/client";
|
||||
import { Navigate } from "react-router-dom";
|
||||
|
||||
export default function AdminPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { data: me } = useQuery({ queryKey: ["me"], queryFn: getMe });
|
||||
const { data: users = [], isLoading } = useQuery({
|
||||
queryKey: ["admin-users"],
|
||||
queryFn: adminGetUsers,
|
||||
});
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [form, setForm] = useState<AdminUserCreate>({
|
||||
email: "",
|
||||
password: "",
|
||||
full_name: "",
|
||||
is_admin: false,
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: adminCreateUser,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-users"] });
|
||||
setShowForm(false);
|
||||
setForm({ email: "", password: "", full_name: "", is_admin: false });
|
||||
setFormError(null);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const detail = err?.response?.data?.detail;
|
||||
if (Array.isArray(detail)) {
|
||||
setFormError(detail.map((d: any) => d.msg).join("; "));
|
||||
} else {
|
||||
setFormError(detail ?? "Failed to create user");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: adminDeleteUser,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["admin-users"] }),
|
||||
});
|
||||
|
||||
const toggleActiveMutation = useMutation({
|
||||
mutationFn: adminToggleActive,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["admin-users"] }),
|
||||
});
|
||||
|
||||
const handleDelete = (user: UserData) => {
|
||||
if (!window.confirm(`Delete user "${user.email}"? This cannot be undone.`)) return;
|
||||
deleteMutation.mutate(user.id);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
createMutation.mutate(form);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ padding: 32, maxWidth: 800 }}>
|
||||
<h1>User Management</h1>
|
||||
|
||||
{isLoading ? (
|
||||
<p>Loading…</p>
|
||||
) : (
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 24 }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: "2px solid #ccc", textAlign: "left" }}>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Email</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Name</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Status</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Role</th>
|
||||
<th style={{ padding: "8px 0" }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id} style={{ borderBottom: "1px solid #eee" }}>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>{u.email}</td>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>{u.full_name ?? "—"}</td>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>
|
||||
{u.is_active ? "Active" : "Inactive"}
|
||||
</td>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>
|
||||
{u.is_admin ? "Admin" : "User"}
|
||||
</td>
|
||||
<td style={{ padding: "8px 0", display: "flex", gap: 8 }}>
|
||||
{u.id !== me?.id && (
|
||||
<>
|
||||
<button onClick={() => toggleActiveMutation.mutate(u.id)}>
|
||||
{u.is_active ? "Deactivate" : "Activate"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(u)}
|
||||
style={{ color: "red" }}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{u.id === me?.id && (
|
||||
<span style={{ color: "#999", fontSize: 13 }}>you</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{!showForm ? (
|
||||
<button onClick={() => setShowForm(true)}>+ Add User</button>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} style={{ maxWidth: 400 }}>
|
||||
<h2 style={{ marginTop: 0 }}>New User</h2>
|
||||
<FormField label="Email" type="email" value={form.email}
|
||||
onChange={(v) => setForm((f) => ({ ...f, email: v }))} required />
|
||||
<FormField label="Full name" value={form.full_name ?? ""}
|
||||
onChange={(v) => setForm((f) => ({ ...f, full_name: v }))} />
|
||||
<FormField label="Password" type="password" value={form.password}
|
||||
onChange={(v) => setForm((f) => ({ ...f, password: v }))} required />
|
||||
<div style={{ marginBottom: 12, display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<input
|
||||
id="is_admin"
|
||||
type="checkbox"
|
||||
checked={form.is_admin ?? false}
|
||||
onChange={(e) => setForm((f) => ({ ...f, is_admin: e.target.checked }))}
|
||||
/>
|
||||
<label htmlFor="is_admin">Grant admin access</label>
|
||||
</div>
|
||||
{formError && <p style={{ color: "red" }}>{formError}</p>}
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? "Creating…" : "Create"}
|
||||
</button>
|
||||
<button type="button" onClick={() => { setShowForm(false); setFormError(null); }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function FormField({
|
||||
label, value, onChange, type = "text", required = false,
|
||||
}: {
|
||||
label: string; value: string; onChange: (v: string) => void;
|
||||
type?: string; required?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", marginBottom: 4 }}>{label}</label>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
required={required}
|
||||
style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return <Navigate to="/admin/users" replace />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
adminCreateUser,
|
||||
adminDeleteUser,
|
||||
adminGetUsers,
|
||||
adminToggleActive,
|
||||
getMe,
|
||||
type AdminUserCreate,
|
||||
type UserData,
|
||||
} from "../api/client";
|
||||
|
||||
export default function AdminUsersPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { data: me } = useQuery({ queryKey: ["me"], queryFn: getMe });
|
||||
const { data: users = [], isLoading } = useQuery({
|
||||
queryKey: ["admin-users"],
|
||||
queryFn: adminGetUsers,
|
||||
});
|
||||
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [form, setForm] = useState<AdminUserCreate>({
|
||||
email: "",
|
||||
password: "",
|
||||
full_name: "",
|
||||
is_admin: false,
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: adminCreateUser,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["admin-users"] });
|
||||
setShowForm(false);
|
||||
setForm({ email: "", password: "", full_name: "", is_admin: false });
|
||||
setFormError(null);
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const detail = err?.response?.data?.detail;
|
||||
if (Array.isArray(detail)) {
|
||||
setFormError(detail.map((d: any) => d.msg).join("; "));
|
||||
} else {
|
||||
setFormError(detail ?? "Failed to create user");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: adminDeleteUser,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["admin-users"] }),
|
||||
});
|
||||
|
||||
const toggleActiveMutation = useMutation({
|
||||
mutationFn: adminToggleActive,
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["admin-users"] }),
|
||||
});
|
||||
|
||||
const handleDelete = (user: UserData) => {
|
||||
if (!window.confirm(`Delete user "${user.email}"? This cannot be undone.`)) return;
|
||||
deleteMutation.mutate(user.id);
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
createMutation.mutate(form);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: 32, maxWidth: 800 }}>
|
||||
<h1>User Management</h1>
|
||||
|
||||
{isLoading ? (
|
||||
<p>Loading…</p>
|
||||
) : (
|
||||
<table style={{ width: "100%", borderCollapse: "collapse", marginBottom: 24 }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: "2px solid #ccc", textAlign: "left" }}>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Email</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Name</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Status</th>
|
||||
<th style={{ padding: "8px 12px 8px 0" }}>Role</th>
|
||||
<th style={{ padding: "8px 0" }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id} style={{ borderBottom: "1px solid #eee" }}>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>{u.email}</td>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>{u.full_name ?? "—"}</td>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>
|
||||
{u.is_active ? "Active" : "Inactive"}
|
||||
</td>
|
||||
<td style={{ padding: "8px 12px 8px 0" }}>
|
||||
{u.is_admin ? "Admin" : "User"}
|
||||
</td>
|
||||
<td style={{ padding: "8px 0", display: "flex", gap: 8 }}>
|
||||
{u.id !== me?.id && (
|
||||
<>
|
||||
<button onClick={() => toggleActiveMutation.mutate(u.id)}>
|
||||
{u.is_active ? "Deactivate" : "Activate"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(u)}
|
||||
style={{ color: "red" }}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{u.id === me?.id && (
|
||||
<span style={{ color: "#999", fontSize: 13 }}>you</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{!showForm ? (
|
||||
<button onClick={() => setShowForm(true)}>+ Add User</button>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} style={{ maxWidth: 400 }}>
|
||||
<h2 style={{ marginTop: 0 }}>New User</h2>
|
||||
<FormField label="Email" type="email" value={form.email}
|
||||
onChange={(v) => setForm((f) => ({ ...f, email: v }))} required />
|
||||
<FormField label="Full name" value={form.full_name ?? ""}
|
||||
onChange={(v) => setForm((f) => ({ ...f, full_name: v }))} />
|
||||
<FormField label="Password" type="password" value={form.password}
|
||||
onChange={(v) => setForm((f) => ({ ...f, password: v }))} required />
|
||||
<div style={{ marginBottom: 12, display: "flex", alignItems: "center", gap: 8 }}>
|
||||
<input
|
||||
id="is_admin"
|
||||
type="checkbox"
|
||||
checked={form.is_admin ?? false}
|
||||
onChange={(e) => setForm((f) => ({ ...f, is_admin: e.target.checked }))}
|
||||
/>
|
||||
<label htmlFor="is_admin">Grant admin access</label>
|
||||
</div>
|
||||
{formError && <p style={{ color: "red" }}>{formError}</p>}
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? "Creating…" : "Create"}
|
||||
</button>
|
||||
<button type="button" onClick={() => { setShowForm(false); setFormError(null); }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FormField({
|
||||
label, value, onChange, type = "text", required = false,
|
||||
}: {
|
||||
label: string; value: string; onChange: (v: string) => void;
|
||||
type?: string; required?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<label style={{ display: "block", marginBottom: 4 }}>{label}</label>
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
required={required}
|
||||
style={{ width: "100%", padding: "6px 8px", boxSizing: "border-box" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user