61edbf59bf
Viewer: - Toolbar: Ctrl+Alt+Del, clipboard paste, monitor picker, file transfer, chat, WoL buttons - Multi-monitor: agent sends monitor_list on connect, viewer can switch via dropdown - Clipboard sync: agent polls local clipboard → sends to viewer; viewer paste → agent sets remote clipboard - File transfer panel: drag-drop upload to agent, directory browser, download files from remote - Chat panel: bidirectional text chat forwarded through relay Agent: - Multi-monitor capture with set_monitor/set_quality message handlers - exec_key_combo for Ctrl+Alt+Del and arbitrary combos - Clipboard polling via pyperclip (both directions) - File upload/download/list_files with base64 chunked protocol - Attended mode (--attended): zenity/kdialog/PowerShell consent dialog before accepting stream - Auto-update: heartbeat checks version, downloads new binary and exec-replaces self (Linux) - Reports MAC address on registration (for WoL) Relay: - Forwards monitor_list, clipboard_content, file_chunk, file_list, chat_message agent→viewer - Session recording: when RECORDING_DIR env set, saves JPEG frames as .remrec files - ALLOWED_ORIGINS CORS now set from NEXT_PUBLIC_APP_URL in docker-compose Database: - groups table (id, name, description, created_by) - machines: group_id, mac_address, notes, tags text[] - Migration 0003 applied Dashboard: - Machines page: search, tag filter, group filter, inline notes/tags/rename editing - MachineCard: inline tag management, group picker, notes textarea - Admin page: new Groups tab (create/list/delete groups) - API: PATCH /api/machines/[id] (name, notes, tags, groupId) - API: GET/POST/DELETE /api/groups - API: POST /api/machines/wol (broadcast magic packet) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
573 lines
23 KiB
TypeScript
573 lines
23 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import {
|
|
UserPlus, Copy, Check, Trash2, Clock, CheckCircle2,
|
|
Loader2, KeyRound, Ban, Infinity, Hash, FolderOpen, Plus,
|
|
} from 'lucide-react'
|
|
|
|
// ── Shared helper ─────────────────────────────────────────────────────────────
|
|
|
|
function CopyButton({ text }: { text: string }) {
|
|
const [copied, setCopied] = useState(false)
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={async () => {
|
|
await navigator.clipboard.writeText(text)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}}
|
|
>
|
|
{copied
|
|
? <Check className="h-3.5 w-3.5 text-green-500" />
|
|
: <Copy className="h-3.5 w-3.5" />}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
// ── Invites ───────────────────────────────────────────────────────────────────
|
|
|
|
interface Invite {
|
|
id: string
|
|
token: string
|
|
email: string
|
|
created_at: string
|
|
expires_at: string
|
|
used_at: string | null
|
|
}
|
|
|
|
function inviteStatus(invite: Invite): 'used' | 'expired' | 'pending' {
|
|
if (invite.used_at) return 'used'
|
|
if (new Date(invite.expires_at) < new Date()) return 'expired'
|
|
return 'pending'
|
|
}
|
|
|
|
function InvitesSection() {
|
|
const [invites, setInvites] = useState<Invite[]>([])
|
|
const [email, setEmail] = useState('')
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [newToken, setNewToken] = useState<string | null>(null)
|
|
const [successEmail, setSuccessEmail] = useState<string | null>(null)
|
|
|
|
const fetchInvites = useCallback(async () => {
|
|
try {
|
|
const res = await fetch('/api/invites')
|
|
const data = await res.json()
|
|
if (res.ok) setInvites(data.invites)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => { fetchInvites() }, [fetchInvites])
|
|
|
|
const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
setError(null); setSuccessEmail(null); setNewToken(null)
|
|
setIsCreating(true)
|
|
try {
|
|
const res = await fetch('/api/invites', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email }),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) { setError(data.error); return }
|
|
setSuccessEmail(email)
|
|
setNewToken(data.invite.token)
|
|
setEmail('')
|
|
await fetchInvites()
|
|
} catch {
|
|
setError('Network error. Please try again.')
|
|
} finally {
|
|
setIsCreating(false)
|
|
}
|
|
}
|
|
|
|
const handleDelete = async (id: string) => {
|
|
await fetch('/api/invites', {
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id }),
|
|
})
|
|
await fetchInvites()
|
|
}
|
|
|
|
const inviteUrl = (token: string) => `${window.location.origin}/auth/invite/${token}`
|
|
|
|
const statusBadge = (invite: Invite) => {
|
|
const s = inviteStatus(invite)
|
|
if (s === 'used') return <span className="flex items-center gap-1 text-xs text-green-500"><CheckCircle2 className="h-3 w-3" /> Used</span>
|
|
if (s === 'expired') return <span className="flex items-center gap-1 text-xs text-muted-foreground"><Clock className="h-3 w-3" /> Expired</span>
|
|
return <span className="flex items-center gap-1 text-xs text-primary"><Clock className="h-3 w-3" /> Pending</span>
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2"><UserPlus className="h-5 w-5" />Invite user</CardTitle>
|
|
<CardDescription>Send an invite link to a new user. Links expire after 7 days.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleCreate} className="space-y-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="email">Email address</Label>
|
|
<div className="flex gap-2">
|
|
<Input id="email" type="email" placeholder="user@company.com" required value={email}
|
|
onChange={(e) => setEmail(e.target.value)} className="bg-secondary/50" />
|
|
<Button type="submit" disabled={isCreating}>
|
|
{isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Send invite'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{error && <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3"><p className="text-sm text-destructive">{error}</p></div>}
|
|
{newToken && successEmail && (
|
|
<div className="rounded-md bg-green-500/10 border border-green-500/20 p-3 space-y-2">
|
|
<p className="text-sm text-green-500 font-medium">Invite created for {successEmail}</p>
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs text-muted-foreground truncate flex-1 bg-muted/50 px-2 py-1 rounded">{inviteUrl(newToken)}</code>
|
|
<CopyButton text={inviteUrl(newToken)} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle>Invitations</CardTitle>
|
|
<CardDescription>All invite links, newest first</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-8"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
|
|
) : invites.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-8">No invitations yet</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{invites.map((invite) => {
|
|
const status = inviteStatus(invite)
|
|
return (
|
|
<div key={invite.id} className="flex items-center justify-between p-3 rounded-lg bg-muted/30">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium truncate">{invite.email}</p>
|
|
<div className="flex items-center gap-3 mt-0.5">
|
|
{statusBadge(invite)}
|
|
<span className="text-xs text-muted-foreground">{new Date(invite.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 ml-3">
|
|
{status === 'pending' && <CopyButton text={inviteUrl(invite.token)} />}
|
|
<Button variant="ghost" size="sm" className="h-7 px-2 text-muted-foreground hover:text-destructive"
|
|
onClick={() => handleDelete(invite.id)}>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Enrollment tokens ─────────────────────────────────────────────────────────
|
|
|
|
interface EnrollmentToken {
|
|
id: string
|
|
token: string
|
|
label: string | null
|
|
created_at: string
|
|
expires_at: string | null
|
|
used_count: number
|
|
max_uses: number | null
|
|
revoked_at: string | null
|
|
}
|
|
|
|
function tokenStatus(t: EnrollmentToken): 'active' | 'revoked' | 'expired' | 'exhausted' {
|
|
if (t.revoked_at) return 'revoked'
|
|
if (t.expires_at && new Date(t.expires_at) < new Date()) return 'expired'
|
|
if (t.max_uses !== null && t.used_count >= t.max_uses) return 'exhausted'
|
|
return 'active'
|
|
}
|
|
|
|
function EnrollmentSection() {
|
|
const [tokens, setTokens] = useState<EnrollmentToken[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [newToken, setNewToken] = useState<EnrollmentToken | null>(null)
|
|
|
|
// form state
|
|
const [label, setLabel] = useState('')
|
|
const [expiresInDays, setExpiresInDays] = useState('')
|
|
const [maxUses, setMaxUses] = useState('')
|
|
|
|
const fetchTokens = useCallback(async () => {
|
|
try {
|
|
const res = await fetch('/api/enrollment-tokens')
|
|
const data = await res.json()
|
|
if (res.ok) setTokens(data.tokens)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => { fetchTokens() }, [fetchTokens])
|
|
|
|
const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
setError(null); setNewToken(null)
|
|
setIsCreating(true)
|
|
try {
|
|
const res = await fetch('/api/enrollment-tokens', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
label: label || undefined,
|
|
expiresInDays: expiresInDays ? parseInt(expiresInDays) : undefined,
|
|
maxUses: maxUses ? parseInt(maxUses) : undefined,
|
|
}),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) { setError(data.error); return }
|
|
setNewToken(data.token)
|
|
setLabel(''); setExpiresInDays(''); setMaxUses('')
|
|
await fetchTokens()
|
|
} catch {
|
|
setError('Network error. Please try again.')
|
|
} finally {
|
|
setIsCreating(false)
|
|
}
|
|
}
|
|
|
|
const handleRevoke = async (id: string) => {
|
|
await fetch('/api/enrollment-tokens', {
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id }),
|
|
})
|
|
await fetchTokens()
|
|
}
|
|
|
|
const statusBadge = (t: EnrollmentToken) => {
|
|
const s = tokenStatus(t)
|
|
const styles: Record<string, string> = {
|
|
active: 'text-green-500',
|
|
revoked: 'text-destructive',
|
|
expired: 'text-muted-foreground',
|
|
exhausted: 'text-yellow-500',
|
|
}
|
|
const labels: Record<string, string> = {
|
|
active: 'Active',
|
|
revoked: 'Revoked',
|
|
expired: 'Expired',
|
|
exhausted: 'Exhausted',
|
|
}
|
|
return <span className={`text-xs font-medium ${styles[s]}`}>{labels[s]}</span>
|
|
}
|
|
|
|
const agentCommand = (token: string) =>
|
|
`python agent.py --server ${window.location.origin} --enroll ${token}`
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2"><KeyRound className="h-5 w-5" />Create enrollment token</CardTitle>
|
|
<CardDescription>
|
|
Tokens let agents self-register. Share the token or use it in a silent installer for mass deployment.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleCreate} className="space-y-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="token-label">Label <span className="text-muted-foreground font-normal">(optional)</span></Label>
|
|
<Input id="token-label" placeholder="e.g. Office PCs batch 1"
|
|
value={label} onChange={(e) => setLabel(e.target.value)} className="bg-secondary/50" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="expires">Expires after <span className="text-muted-foreground font-normal">(days, blank = never)</span></Label>
|
|
<Input id="expires" type="number" min="1" placeholder="Never"
|
|
value={expiresInDays} onChange={(e) => setExpiresInDays(e.target.value)} className="bg-secondary/50" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="max-uses">Max uses <span className="text-muted-foreground font-normal">(blank = unlimited)</span></Label>
|
|
<Input id="max-uses" type="number" min="1" placeholder="Unlimited"
|
|
value={maxUses} onChange={(e) => setMaxUses(e.target.value)} className="bg-secondary/50" />
|
|
</div>
|
|
</div>
|
|
|
|
{error && <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3"><p className="text-sm text-destructive">{error}</p></div>}
|
|
|
|
<Button type="submit" disabled={isCreating}>
|
|
{isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Generate token'}
|
|
</Button>
|
|
</form>
|
|
|
|
{newToken && (
|
|
<div className="mt-4 rounded-md bg-green-500/10 border border-green-500/20 p-4 space-y-3">
|
|
<p className="text-sm text-green-500 font-medium">Token created</p>
|
|
|
|
<div>
|
|
<p className="text-xs text-muted-foreground mb-1">Token</p>
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">{newToken.token}</code>
|
|
<CopyButton text={newToken.token} />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs text-muted-foreground mb-1">Agent command</p>
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">{agentCommand(newToken.token)}</code>
|
|
<CopyButton text={agentCommand(newToken.token)} />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs text-muted-foreground mb-1">Silent Windows installer</p>
|
|
<div className="flex items-center gap-2">
|
|
<code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">
|
|
{`RemoteLink-Setup.exe /S /SERVER=${window.location.origin} /ENROLL=${newToken.token}`}
|
|
</code>
|
|
<CopyButton text={`RemoteLink-Setup.exe /S /SERVER=${window.location.origin} /ENROLL=${newToken.token}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle>Enrollment tokens</CardTitle>
|
|
<CardDescription>Manage tokens used to register new agents</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-8"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
|
|
) : tokens.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground text-center py-8">No enrollment tokens yet</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{tokens.map((t) => {
|
|
const status = tokenStatus(t)
|
|
const isActive = status === 'active'
|
|
return (
|
|
<div key={t.id} className={`flex items-center justify-between p-3 rounded-lg bg-muted/30 ${!isActive ? 'opacity-60' : ''}`}>
|
|
<div className="flex-1 min-w-0 space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm font-medium truncate">{t.label || <span className="text-muted-foreground italic">Unlabelled</span>}</p>
|
|
{statusBadge(t)}
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
|
<span className="font-mono truncate max-w-[160px]">{t.token}</span>
|
|
<span className="flex items-center gap-1">
|
|
<Hash className="h-3 w-3" />
|
|
{t.used_count} use{t.used_count !== 1 ? 's' : ''}
|
|
{t.max_uses !== null ? ` / ${t.max_uses}` : ''}
|
|
</span>
|
|
{t.expires_at ? (
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="h-3 w-3" />
|
|
{new Date(t.expires_at) > new Date()
|
|
? `Expires ${new Date(t.expires_at).toLocaleDateString()}`
|
|
: `Expired ${new Date(t.expires_at).toLocaleDateString()}`}
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-1"><Infinity className="h-3 w-3" /> No expiry</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 ml-3 shrink-0">
|
|
{isActive && <CopyButton text={t.token} />}
|
|
{isActive && (
|
|
<Button variant="ghost" size="sm" className="h-7 px-2 text-muted-foreground hover:text-destructive"
|
|
onClick={() => handleRevoke(t.id)} title="Revoke token">
|
|
<Ban className="h-3.5 w-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Groups ────────────────────────────────────────────────────────────────────
|
|
|
|
interface Group {
|
|
id: string
|
|
name: string
|
|
description: string | null
|
|
created_at: string
|
|
}
|
|
|
|
function GroupsSection() {
|
|
const [groups, setGroups] = useState<Group[]>([])
|
|
const [name, setName] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
|
|
const fetchGroups = useCallback(async () => {
|
|
const res = await fetch('/api/groups')
|
|
const data = await res.json()
|
|
if (res.ok) setGroups(data.groups ?? [])
|
|
setIsLoading(false)
|
|
}, [])
|
|
|
|
useEffect(() => { fetchGroups() }, [fetchGroups])
|
|
|
|
const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
if (!name.trim()) return
|
|
setIsCreating(true)
|
|
await fetch('/api/groups', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, description }),
|
|
})
|
|
setName(''); setDescription('')
|
|
await fetchGroups()
|
|
setIsCreating(false)
|
|
}
|
|
|
|
const handleDelete = async (id: string) => {
|
|
await fetch('/api/groups', {
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id }),
|
|
})
|
|
await fetchGroups()
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Create Group</CardTitle>
|
|
<CardDescription>Groups let you organise machines and control which technicians have access to them.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleCreate} className="space-y-3">
|
|
<div>
|
|
<Label htmlFor="group-name">Name</Label>
|
|
<Input id="group-name" value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Client — Acme Corp" className="mt-1" />
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="group-desc">Description (optional)</Label>
|
|
<Input id="group-desc" value={description} onChange={e => setDescription(e.target.value)} placeholder="Optional description" className="mt-1" />
|
|
</div>
|
|
<Button type="submit" disabled={isCreating || !name.trim()}>
|
|
{isCreating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Plus className="mr-2 h-4 w-4" />}
|
|
Create Group
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-border/50">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Groups</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoading ? (
|
|
<div className="flex items-center gap-2 text-muted-foreground text-sm"><Loader2 className="h-4 w-4 animate-spin" /> Loading…</div>
|
|
) : groups.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No groups yet. Create one above.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{groups.map(g => (
|
|
<div key={g.id} className="flex items-center justify-between gap-4 p-3 rounded-lg border border-border/50">
|
|
<div className="flex items-center gap-3">
|
|
<FolderOpen className="h-4 w-4 text-muted-foreground" />
|
|
<div>
|
|
<p className="text-sm font-medium">{g.name}</p>
|
|
{g.description && <p className="text-xs text-muted-foreground">{g.description}</p>}
|
|
</div>
|
|
</div>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => handleDelete(g.id)}>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Page ──────────────────────────────────────────────────────────────────────
|
|
|
|
type Tab = 'invites' | 'enrollment' | 'groups'
|
|
|
|
export default function AdminPage() {
|
|
const [tab, setTab] = useState<Tab>('invites')
|
|
|
|
const tabLabels: Record<Tab, string> = {
|
|
invites: 'User invites',
|
|
enrollment: 'Agent enrollment',
|
|
groups: 'Groups',
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 max-w-2xl">
|
|
<div>
|
|
<h2 className="text-2xl font-bold">Admin</h2>
|
|
<p className="text-muted-foreground">Manage users, agent deployment, and machine groups</p>
|
|
</div>
|
|
|
|
{/* Tab bar */}
|
|
<div className="flex gap-1 p-1 rounded-lg bg-muted/50 w-fit">
|
|
{(['invites', 'enrollment', 'groups'] as Tab[]).map((t) => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setTab(t)}
|
|
className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
|
tab === t
|
|
? 'bg-background shadow-sm text-foreground'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
{tabLabels[t]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{tab === 'invites' && <InvitesSection />}
|
|
{tab === 'enrollment' && <EnrollmentSection />}
|
|
{tab === 'groups' && <GroupsSection />}
|
|
</div>
|
|
)
|
|
}
|