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
@@ -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 />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user