feat: add update and delete operations for users and policies in admin interface

Add updateUser and deleteUser API client methods with PATCH and DELETE endpoints. Add updatePolicy and deletePolicy API client methods. Add email field to User type. Add Actions column to users and policies tables with Edit and Delete buttons. Implement inline edit forms for users and policies with state management for editing mode. Add update and delete mutations with query invalidation on success. Add error notices

admin-web/src/api/client.ts

@@ -5,6 +5,7 @@ export type User = {
   id: string;
   username: string;
   display_name: string;
+  email?: string;
   role: string;
   is_active: boolean;
 };
@@ -109,6 +110,21 @@ export const api = {
       method: "POST",
       body: JSON.stringify(payload)
     }),
+  updateUser: (userId: string, payload: {
+    display_name?: string;
+    email?: string;
+    role?: string;
+    password?: string;
+    is_active?: boolean;
+  }) =>
+    request<User>(`/admin/users/${userId}`, {
+      method: "PATCH",
+      body: JSON.stringify(payload)
+    }),
+  deleteUser: (userId: string) =>
+    request<{ ok: boolean }>(`/admin/users/${userId}`, {
+      method: "DELETE"
+    }),
   devices: () => request<Device[]>("/admin/devices"),
   deviceProfile: (deviceId: string) => request<DeviceProfile>(`/admin/devices/${deviceId}/profile`),
   revokeDevice: (deviceId: string) =>
@@ -135,6 +151,24 @@ export const api = {
       method: "POST",
       body: JSON.stringify(payload)
     }),
+  updatePolicy: (policyId: string, payload: {
+    name?: string;
+    description?: string;
+    priority?: number;
+    effect?: string;
+    full_tunnel?: boolean;
+    is_active?: boolean;
+    destinations?: string[];
+    targets?: Array<{ type: string; id: string }>;
+  }) =>
+    request<Policy>(`/admin/policies/${policyId}`, {
+      method: "PATCH",
+      body: JSON.stringify(payload)
+    }),
+  deletePolicy: (policyId: string) =>
+    request<{ ok: boolean }>(`/admin/policies/${policyId}`, {
+      method: "DELETE"
+    }),
   gateways: () => request<Gateway[]>("/admin/gateways"),
   updateGateway: (gatewayId: string, payload: {
     endpoint: string;

admin-web/src/features/policies/PoliciesPage.tsx

@@ -9,7 +9,8 @@ const columns = [
   { key: "name", label: "Policy" },
   { key: "targets", label: "Targets" },
   { key: "destinations", label: "Destinations" },
-  { key: "mode", label: "Mode" }
+  { key: "mode", label: "Mode" },
+  { key: "actions", label: "Actions" }
 ];
 
 export function PoliciesPage() {
@@ -29,6 +30,14 @@ export function PoliciesPage() {
     targetUserId: "",
     fullTunnel: false
   });
+  const [editingPolicyId, setEditingPolicyId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState({
+    name: "",
+    description: "",
+    destinations: "",
+    fullTunnel: false,
+    isActive: true
+  });
 
   const createMutation = useMutation({
     mutationFn: api.createPolicy,
@@ -38,9 +47,27 @@ export function PoliciesPage() {
     }
   });
 
+  const updateMutation = useMutation({
+    mutationFn: ({ policyId, payload }: { policyId: string; payload: { name: string; description: string; destinations: string[]; full_tunnel: boolean; is_active: boolean } }) =>
+      api.updatePolicy(policyId, payload),
+    onSuccess: () => {
+      setEditingPolicyId(null);
+      setEditForm({ name: "", description: "", destinations: "", fullTunnel: false, isActive: true });
+      void queryClient.invalidateQueries({ queryKey: ["policies"] });
+    }
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: api.deletePolicy,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["policies"] });
+    }
+  });
+
   const rows = query.data?.map((policy) => ({
+    id: policy.id,
     name: policy.name,
-    targets: "assigned targets",
+    targets: policy.targets?.length ? `${policy.targets.length} target(s)` : "assigned targets",
     destinations: policy.destinations?.join(", ") ?? (policy.full_tunnel ? "0.0.0.0/0" : "-"),
     mode: policy.full_tunnel ? "Full tunnel" : "Split tunnel"
   })) ?? [];
@@ -63,6 +90,38 @@ export function PoliciesPage() {
     });
   }
 
+  function startEdit(policyId: string) {
+    const policy = query.data?.find((item) => item.id === policyId);
+    if (!policy) {
+      return;
+    }
+    setEditingPolicyId(policyId);
+    setEditForm({
+      name: policy.name,
+      description: policy.description,
+      destinations: policy.destinations?.join(", ") ?? "",
+      fullTunnel: policy.full_tunnel,
+      isActive: policy.is_active
+    });
+  }
+
+  function onEditSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!editingPolicyId) {
+      return;
+    }
+    updateMutation.mutate({
+      policyId: editingPolicyId,
+      payload: {
+        name: editForm.name,
+        description: editForm.description,
+        destinations: editForm.fullTunnel ? ["0.0.0.0/0"] : editForm.destinations.split(",").map((value) => value.trim()).filter(Boolean),
+        full_tunnel: editForm.fullTunnel,
+        is_active: editForm.isActive
+      }
+    });
+  }
+
   return (
     <Page
       title="Policies"
@@ -94,10 +153,46 @@ export function PoliciesPage() {
       </form>
       {query.isError ? <p className="notice">Unable to load policies from the API.</p> : null}
       {createMutation.isError ? <p className="notice">Unable to create policy.</p> : null}
+      {updateMutation.isError ? <p className="notice">Unable to update policy.</p> : null}
+      {deleteMutation.isError ? <p className="notice">Unable to delete policy.</p> : null}
+      {editingPolicyId ? (
+        <form className="inline-form" onSubmit={onEditSubmit}>
+          <input placeholder="policy name" value={editForm.name} onChange={(event) => setEditForm((value) => ({ ...value, name: event.target.value }))} />
+          <input placeholder="description" value={editForm.description} onChange={(event) => setEditForm((value) => ({ ...value, description: event.target.value }))} />
+          <input
+            placeholder="destinations"
+            value={editForm.destinations}
+            onChange={(event) => setEditForm((value) => ({ ...value, destinations: event.target.value }))}
+            disabled={editForm.fullTunnel}
+          />
+          <label className="checkbox">
+            <input type="checkbox" checked={editForm.fullTunnel} onChange={(event) => setEditForm((value) => ({ ...value, fullTunnel: event.target.checked }))} />
+            Full tunnel
+          </label>
+          <label className="checkbox">
+            <input type="checkbox" checked={editForm.isActive} onChange={(event) => setEditForm((value) => ({ ...value, isActive: event.target.checked }))} />
+            Active
+          </label>
+          <div className="action-row">
+            <button className="button" type="submit" disabled={updateMutation.isPending}>Save policy</button>
+            <button className="ghost-button" type="button" onClick={() => setEditingPolicyId(null)}>Cancel</button>
+          </div>
+        </form>
+      ) : null}
       <Table
         columns={columns}
         rows={rows}
-        renderCell={(row, column) => <span>{row[column.key as keyof (typeof rows)[number]]}</span>}
+        renderCell={(row, column) => {
+          if (column.key === "actions") {
+            return (
+              <div className="action-row">
+                <button className="ghost-button" type="button" onClick={() => startEdit(row.id)}>Edit</button>
+                <button className="ghost-button" type="button" onClick={() => deleteMutation.mutate(row.id)}>Delete</button>
+              </div>
+            );
+          }
+          return <span>{row[column.key as keyof (typeof rows)[number]]}</span>;
+        }}
       />
     </Page>
   );

admin-web/src/features/users/UsersPage.tsx

@@ -8,8 +8,10 @@ import { Table } from "../../components/Table";
 const columns = [
   { key: "username", label: "Username" },
   { key: "name", label: "Display name" },
+  { key: "email", label: "Email" },
   { key: "role", label: "Role" },
-  { key: "status", label: "Status" }
+  { key: "status", label: "Status" },
+  { key: "actions", label: "Actions" }
 ];
 
 export function UsersPage() {
@@ -25,6 +27,14 @@ export function UsersPage() {
     password: "",
     role: "user"
   });
+  const [editingUserId, setEditingUserId] = useState<string | null>(null);
+  const [editForm, setEditForm] = useState({
+    display_name: "",
+    email: "",
+    role: "user",
+    password: "",
+    is_active: true
+  });
 
   const createMutation = useMutation({
     mutationFn: api.createUser,
@@ -34,9 +44,27 @@ export function UsersPage() {
     }
   });
 
+  const updateMutation = useMutation({
+    mutationFn: ({ userId, payload }: { userId: string; payload: typeof editForm }) => api.updateUser(userId, payload),
+    onSuccess: () => {
+      setEditingUserId(null);
+      setEditForm({ display_name: "", email: "", role: "user", password: "", is_active: true });
+      void queryClient.invalidateQueries({ queryKey: ["users"] });
+    }
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: api.deleteUser,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["users"] });
+    }
+  });
+
   const rows = query.data?.map((user) => ({
+    id: user.id,
     username: user.username,
     name: user.display_name,
+    email: user.email || "-",
     role: user.role,
     status: user.is_active ? "active" : "disabled"
   })) ?? [];
@@ -46,6 +74,32 @@ export function UsersPage() {
     createMutation.mutate(form);
   }
 
+  function startEdit(userId: string) {
+    const user = query.data?.find((item) => item.id === userId);
+    if (!user) {
+      return;
+    }
+    setEditingUserId(userId);
+    setEditForm({
+      display_name: user.display_name,
+      email: user.email || "",
+      role: user.role,
+      password: "",
+      is_active: user.is_active
+    });
+  }
+
+  function onEditSubmit(event: FormEvent) {
+    event.preventDefault();
+    if (!editingUserId) {
+      return;
+    }
+    updateMutation.mutate({
+      userId: editingUserId,
+      payload: editForm
+    });
+  }
+
   return (
     <Page
       title="Users"
@@ -65,10 +119,41 @@ export function UsersPage() {
       </form>
       {query.isError ? <p className="notice">Unable to load users from the API.</p> : null}
       {createMutation.isError ? <p className="notice">Unable to create user.</p> : null}
+      {updateMutation.isError ? <p className="notice">Unable to update user.</p> : null}
+      {deleteMutation.isError ? <p className="notice">Unable to delete user.</p> : null}
+      {editingUserId ? (
+        <form className="inline-form" onSubmit={onEditSubmit}>
+          <input placeholder="display name" value={editForm.display_name} onChange={(event) => setEditForm((value) => ({ ...value, display_name: event.target.value }))} />
+          <input placeholder="email" value={editForm.email} onChange={(event) => setEditForm((value) => ({ ...value, email: event.target.value }))} />
+          <select value={editForm.role} onChange={(event) => setEditForm((value) => ({ ...value, role: event.target.value }))}>
+            <option value="user">user</option>
+            <option value="admin">admin</option>
+          </select>
+          <input placeholder="new password (optional)" type="password" value={editForm.password} onChange={(event) => setEditForm((value) => ({ ...value, password: event.target.value }))} />
+          <label className="checkbox">
+            <input type="checkbox" checked={editForm.is_active} onChange={(event) => setEditForm((value) => ({ ...value, is_active: event.target.checked }))} />
+            Active
+          </label>
+          <div className="action-row">
+            <button className="button" type="submit" disabled={updateMutation.isPending}>Save user</button>
+            <button className="ghost-button" type="button" onClick={() => setEditingUserId(null)}>Cancel</button>
+          </div>
+        </form>
+      ) : null}
       <Table
         columns={columns}
         rows={rows}
-        renderCell={(row, column) => <span>{row[column.key as keyof (typeof rows)[number]]}</span>}
+        renderCell={(row, column) => {
+          if (column.key === "actions") {
+            return (
+              <div className="action-row">
+                <button className="ghost-button" type="button" onClick={() => startEdit(row.id)}>Edit</button>
+                <button className="ghost-button" type="button" onClick={() => deleteMutation.mutate(row.id)}>Delete</button>
+              </div>
+            );
+          }
+          return <span>{row[column.key as keyof (typeof rows)[number]]}</span>;
+        }}
       />
     </Page>
   );