Add ScreenConnect-parity features (high + medium)
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>
This commit is contained in:
monoadmin
@@ -13,7 +13,7 @@ import {
|
||||
} from '@/components/ui/card'
|
||||
import {
|
||||
UserPlus, Copy, Check, Trash2, Clock, CheckCircle2,
|
||||
Loader2, KeyRound, Ban, Infinity, Hash,
|
||||
Loader2, KeyRound, Ban, Infinity, Hash, FolderOpen, Plus,
|
||||
} from 'lucide-react'
|
||||
|
||||
// ── Shared helper ─────────────────────────────────────────────────────────────
|
||||
@@ -421,23 +421,135 @@ function EnrollmentSection() {
|
||||
)
|
||||
}
|
||||
|
||||
// ── 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'
|
||||
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 and agent deployment</p>
|
||||
<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'] as Tab[]).map((t) => (
|
||||
{(['invites', 'enrollment', 'groups'] as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTab(t)}
|
||||
@@ -447,12 +559,14 @@ export default function AdminPage() {
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{t === 'invites' ? 'User invites' : 'Agent enrollment'}
|
||||
{tabLabels[t]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'invites' ? <InvitesSection /> : <EnrollmentSection />}
|
||||
{tab === 'invites' && <InvitesSection />}
|
||||
{tab === 'enrollment' && <EnrollmentSection />}
|
||||
{tab === 'groups' && <GroupsSection />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user