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
+26
-6
@@ -18,7 +18,9 @@ All API calls go through `src/api/client.ts` (single Axios instance, JWT injecte
|
||||
| `/apps/documents` | `DocumentsPage` | Required |
|
||||
| `/apps/documents/settings/admin` | `DocumentAdminSettingsPage` | Admin only |
|
||||
| `/apps/ai/settings/admin` | `AIAdminSettingsPage` | Admin only |
|
||||
| `/admin` | `AdminPage` | Admin only |
|
||||
| `/admin` | `AdminPage` (redirects to `/admin/users`) | Admin only |
|
||||
| `/admin/users` | `AdminUsersPage` | Admin only |
|
||||
| `/admin/groups` | `AdminGroupsPage` | Admin only |
|
||||
| `/profile` | `ProfilePage` | Required |
|
||||
|
||||
`PrivateRoute` redirects to `/login` when no token. `AdminRoute` redirects to `/` when not admin.
|
||||
@@ -90,10 +92,20 @@ Cards are rendered dynamically from `GET /api/services` (polled every 30 s via T
|
||||
- Upload Limits section only (max PDF size in MB)
|
||||
- Save button
|
||||
|
||||
### Admin page (`/admin`)
|
||||
### Admin — Users page (`/admin/users`)
|
||||
|
||||
- User list with role and active status
|
||||
- Inline role/status editing
|
||||
- Inline active status toggle
|
||||
- Create user form (email, name, password, admin flag)
|
||||
- Delete user
|
||||
|
||||
### Admin — Groups page (`/admin/groups`)
|
||||
|
||||
- Group list with name, description, member count
|
||||
- Create group (name, optional description)
|
||||
- Edit group name / description inline panel
|
||||
- Delete group (with confirmation)
|
||||
- Expand group row to manage members: view members, remove members, add non-members from dropdown
|
||||
|
||||
### Profile page (`/profile`)
|
||||
|
||||
@@ -123,6 +135,13 @@ Key functions:
|
||||
| `updateAISettings(data)` | `PATCH /settings/ai` |
|
||||
| `testAIConnection()` | `POST /settings/ai/test` |
|
||||
| `getDocumentLimits()` | `GET /settings/documents/limits` |
|
||||
| `adminListGroups()` | `GET /admin/groups` |
|
||||
| `adminCreateGroup(data)` | `POST /admin/groups` |
|
||||
| `adminGetGroup(id)` | `GET /admin/groups/{id}` with members |
|
||||
| `adminUpdateGroup(id, data)` | `PATCH /admin/groups/{id}` |
|
||||
| `adminDeleteGroup(id)` | `DELETE /admin/groups/{id}` |
|
||||
| `adminAddGroupMember(gId, uId)` | `POST /admin/groups/{gId}/members/{uId}` |
|
||||
| `adminRemoveGroupMember(gId, uId)` | `DELETE /admin/groups/{gId}/members/{uId}` |
|
||||
| `updateDocumentLimits(data)` | `PATCH /settings/documents/limits` |
|
||||
|
||||
---
|
||||
@@ -150,7 +169,7 @@ Key functions:
|
||||
- **JWT in `localStorage`** — XSS risk; migrate to `httpOnly` cookie when backend supports it
|
||||
- **No toast / notification system** — errors shown inline; success is silent
|
||||
- **No loading skeletons** — "Loading…" text only
|
||||
- **No group/sharing UI** — blocked on backend groups system
|
||||
- **No app permission UI** per group — groups exist but permission grants are not yet implemented
|
||||
- **No app permission UI** — all apps visible to all authenticated users
|
||||
|
||||
---
|
||||
@@ -165,7 +184,8 @@ Key functions:
|
||||
- [ ] `POST /queue/jobs` integration — show AI processing queue status / progress per document
|
||||
- [ ] Re-process document button (`POST /documents/{id}/reprocess` — needs backend endpoint first)
|
||||
- [ ] Advanced filter: extracted data fields (vendor, due date, amount) — needs backend support
|
||||
- [ ] Groups + document sharing UI — blocked on backend
|
||||
- [ ] App permissions UI in Admin page
|
||||
- [x] Groups admin UI — list, create, edit, delete, add/remove members
|
||||
- [ ] App permissions UI per group (blocked on backend group_app_permissions)
|
||||
- [ ] Document sharing UI (blocked on backend)
|
||||
- [ ] `httpOnly` cookie auth (requires backend change)
|
||||
- [ ] Bulk document operations (select multiple, bulk delete / bulk categorise)
|
||||
|
||||
@@ -8,6 +8,8 @@ import DashboardPage from "./pages/DashboardPage";
|
||||
import ProfilePage from "./pages/ProfilePage";
|
||||
import AppsPage from "./pages/AppsPage";
|
||||
import AdminPage from "./pages/AdminPage";
|
||||
import AdminUsersPage from "./pages/AdminUsersPage";
|
||||
import AdminGroupsPage from "./pages/AdminGroupsPage";
|
||||
import DocumentsPage from "./pages/DocumentsPage";
|
||||
import DocumentAdminSettingsPage from "./pages/DocumentAdminSettingsPage";
|
||||
import AIAdminSettingsPage from "./pages/AIAdminSettingsPage";
|
||||
@@ -51,6 +53,8 @@ export default function App() {
|
||||
/>
|
||||
<Route path="/profile" element={<PrivateRoute><ProfilePage /></PrivateRoute>} />
|
||||
<Route path="/admin" element={<AdminRoute><AdminPage /></AdminRoute>} />
|
||||
<Route path="/admin/users" element={<AdminRoute><AdminUsersPage /></AdminRoute>} />
|
||||
<Route path="/admin/groups" element={<AdminRoute><AdminGroupsPage /></AdminRoute>} />
|
||||
|
||||
{/* Catch-all */}
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
|
||||
@@ -224,6 +224,58 @@ export const updateDocumentLimits = (max_pdf_mb: number) =>
|
||||
export const getDocumentLimits = () =>
|
||||
api.get<Record<string, unknown>>("/settings/documents/limits").then((r) => r.data);
|
||||
|
||||
// --- Groups (admin only) ---
|
||||
export interface GroupOut {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
created_at: string;
|
||||
member_count: number;
|
||||
}
|
||||
|
||||
export interface GroupMemberOut {
|
||||
id: string;
|
||||
email: string;
|
||||
full_name: string | null;
|
||||
is_active: boolean;
|
||||
joined_at: string;
|
||||
}
|
||||
|
||||
export interface GroupDetailOut extends GroupOut {
|
||||
members: GroupMemberOut[];
|
||||
}
|
||||
|
||||
export interface GroupCreate {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
}
|
||||
|
||||
export interface GroupUpdate {
|
||||
name?: string;
|
||||
description?: string | null;
|
||||
}
|
||||
|
||||
export const adminListGroups = () =>
|
||||
api.get<GroupOut[]>("/admin/groups").then((r) => r.data);
|
||||
|
||||
export const adminCreateGroup = (data: GroupCreate) =>
|
||||
api.post<GroupOut>("/admin/groups", data).then((r) => r.data);
|
||||
|
||||
export const adminGetGroup = (groupId: string) =>
|
||||
api.get<GroupDetailOut>(`/admin/groups/${groupId}`).then((r) => r.data);
|
||||
|
||||
export const adminUpdateGroup = (groupId: string, data: GroupUpdate) =>
|
||||
api.patch<GroupOut>(`/admin/groups/${groupId}`, data).then((r) => r.data);
|
||||
|
||||
export const adminDeleteGroup = (groupId: string) =>
|
||||
api.delete(`/admin/groups/${groupId}`);
|
||||
|
||||
export const adminAddGroupMember = (groupId: string, userId: string) =>
|
||||
api.post(`/admin/groups/${groupId}/members/${userId}`);
|
||||
|
||||
export const adminRemoveGroupMember = (groupId: string, userId: string) =>
|
||||
api.delete(`/admin/groups/${groupId}/members/${userId}`);
|
||||
|
||||
// --- Services ---
|
||||
export interface ServiceStatus {
|
||||
id: string;
|
||||
|
||||
@@ -13,6 +13,8 @@ import {
|
||||
UserCircle,
|
||||
FileText,
|
||||
Folder,
|
||||
Users,
|
||||
UsersRound,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import ThemeToggle from "@/components/ThemeToggle";
|
||||
@@ -28,9 +30,11 @@ export default function Sidebar() {
|
||||
|
||||
const isAppsRoute = location.pathname.startsWith("/apps");
|
||||
const isDocsRoute = location.pathname.startsWith("/apps/documents");
|
||||
const isAdminRoute = location.pathname.startsWith("/admin");
|
||||
|
||||
const [appsOpen, setAppsOpen] = useState(isAppsRoute);
|
||||
const [docsOpen, setDocsOpen] = useState(isDocsRoute);
|
||||
const [adminOpen, setAdminOpen] = useState(isAdminRoute);
|
||||
|
||||
// Auto-open sections when navigating to their routes
|
||||
useEffect(() => {
|
||||
@@ -41,6 +45,10 @@ export default function Sidebar() {
|
||||
if (isDocsRoute) setDocsOpen(true);
|
||||
}, [isDocsRoute]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdminRoute) setAdminOpen(true);
|
||||
}, [isAdminRoute]);
|
||||
|
||||
const { data: categories = [] } = useQuery({
|
||||
queryKey: ["categories"],
|
||||
queryFn: listCategories,
|
||||
@@ -200,17 +208,66 @@ export default function Sidebar() {
|
||||
)}
|
||||
</NavLink>
|
||||
|
||||
{/* Admin */}
|
||||
{/* Admin — expandable */}
|
||||
{user?.is_admin && (
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className={({ isActive }) => navItemClass(isActive)}
|
||||
>
|
||||
<ShieldCheck className="h-5 w-5 shrink-0" />
|
||||
{sidebarExpanded && (
|
||||
<span className="text-sm font-medium whitespace-nowrap">Admin</span>
|
||||
<div>
|
||||
{sidebarExpanded ? (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center rounded-lg transition-colors",
|
||||
isAdminRoute
|
||||
? "bg-primary/10 text-primary"
|
||||
: "text-muted hover:bg-muted/20 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<NavLink
|
||||
to="/admin/users"
|
||||
className="flex items-center gap-3 px-3 py-2 flex-1 min-w-0"
|
||||
>
|
||||
<ShieldCheck className="h-5 w-5 shrink-0" />
|
||||
<span className="text-sm font-medium whitespace-nowrap">Admin</span>
|
||||
</NavLink>
|
||||
<button
|
||||
onClick={() => setAdminOpen((o) => !o)}
|
||||
className="px-2 py-2 rounded-r-lg"
|
||||
aria-label={adminOpen ? "Collapse admin" : "Expand admin"}
|
||||
>
|
||||
{adminOpen ? (
|
||||
<ChevronDown className="h-4 w-4 shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<NavLink
|
||||
to="/admin/users"
|
||||
className={({ isActive }) => navItemClass(isActive)}
|
||||
>
|
||||
<ShieldCheck className="h-5 w-5 shrink-0" />
|
||||
</NavLink>
|
||||
)}
|
||||
</NavLink>
|
||||
|
||||
{/* Admin sub-items */}
|
||||
{sidebarExpanded && adminOpen && (
|
||||
<div className="mt-0.5 space-y-0.5">
|
||||
<NavLink
|
||||
to="/admin/users"
|
||||
className={({ isActive }) => subItemClass(isActive)}
|
||||
>
|
||||
<Users className="h-4 w-4 shrink-0" />
|
||||
<span className="whitespace-nowrap">Users</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/admin/groups"
|
||||
className={({ isActive }) => subItemClass(isActive)}
|
||||
>
|
||||
<UsersRound className="h-4 w-4 shrink-0" />
|
||||
<span className="whitespace-nowrap">Groups</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -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