feat(web): admin backoffice — meshes, sessions, invites, audit, overview
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled

Four new admin routes backed by the mesh API modules:

- /admin/meshes — paginated data-table (name, owner, tier, transport,
  members, created). Tier + transport multiSelect filters.
- /admin/meshes/[id] — detail page: owner row + 4 live sections
  (members, presences, invites, last 50 audit events).
- /admin/sessions — live Claude Code WS presences. Status filter,
  pulse dot for working sessions, disconnected badge.
- /admin/invites — invite tokens w/ status derived client-side
  (active/revoked/expired/exhausted).
- /admin/audit — metadata-only event log, event-type + mesh + date
  filters.

Overview page at /admin rewritten to 6 summary cards (users, orgs,
customers, meshes, sessions, messages 24h) joining the base
/admin/summary and /admin/summary/mesh endpoints.

Sidebar navigation gains a second "mesh" group with the four new entries.
paths.ts extended with admin.meshes / sessions / invites / audit.

All UI reuses @turbostarter/ui-web/data-table — columns.tsx + thin
*-data-table.tsx wrapper per the existing users pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-04-04 22:47:47 +01:00
parent 76c32b2345
commit 9dd5face01
16 changed files with 1403 additions and 11 deletions

View File

@@ -0,0 +1,98 @@
import { Badge } from "@turbostarter/ui-web/badge";
import { DataTableColumnHeader } from "@turbostarter/ui-web/data-table/data-table-column-header";
import { TurboLink } from "~/modules/common/turbo-link";
import type { ColumnDef } from "@tanstack/react-table";
import type { GetAuditResponse } from "@turbostarter/api/schema";
type Audit = GetAuditResponse["data"][number];
export const useAuditColumns = (): ColumnDef<Audit>[] => [
{
id: "q",
accessorKey: "q",
meta: {
placeholder: "Search by event, peer, mesh…",
variant: "text",
},
enableHiding: false,
enableColumnFilter: true,
},
{
id: "eventType",
accessorKey: "eventType",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Event" />
),
cell: ({ row }) => (
<Badge variant="outline" className="font-mono text-xs">
{row.original.eventType}
</Badge>
),
meta: { label: "Event" },
},
{
id: "mesh",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Mesh" />
),
cell: ({ row }) =>
row.original.meshId ? (
<TurboLink
href={`/admin/meshes/${row.original.meshId}`}
className="group flex flex-col gap-0.5"
>
<span className="group-hover:text-primary text-sm underline underline-offset-4">
{row.original.meshName ?? "—"}
</span>
</TurboLink>
) : (
<span className="text-muted-foreground"></span>
),
meta: { label: "Mesh" },
},
{
id: "actor",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Actor" />
),
cell: ({ row }) =>
row.original.actorPeerId ? (
<code className="text-muted-foreground font-mono text-xs">
{row.original.actorPeerId.slice(0, 12)}
</code>
) : (
<span className="text-muted-foreground"></span>
),
meta: { label: "Actor" },
},
{
id: "target",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Target" />
),
cell: ({ row }) =>
row.original.targetPeerId ? (
<code className="text-muted-foreground font-mono text-xs">
{row.original.targetPeerId.slice(0, 12)}
</code>
) : (
<span className="text-muted-foreground"></span>
),
meta: { label: "Target" },
},
{
id: "createdAt",
accessorKey: "createdAt",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="When" />
),
cell: ({ row }) => (
<span className="text-muted-foreground text-sm">
{new Date(row.original.createdAt).toLocaleString()}
</span>
),
meta: { label: "When" },
},
];