rename /src to /internal (sorry i'll fix the prs)

2026-03-23 22:16:18 +01:00 · 2025-09-09 13:29:07 -04:00
parent 86ea23fe39
commit 8a13b05c20
177 changed files with 0 additions and 0 deletions
--- a/internal/site/src/components/routes/settings/alerts-history-data-table.tsx
+++ b/internal/site/src/components/routes/settings/alerts-history-data-table.tsx
@@ -0,0 +1,386 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import {
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table"
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	ChevronsLeftIcon,
+	ChevronsRightIcon,
+	DownloadIcon,
+	Trash2Icon,
+} from "lucide-react"
+import { memo, useEffect, useState } from "react"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useToast } from "@/components/ui/use-toast"
+import { alertInfo } from "@/lib/alerts"
+import { pb } from "@/lib/api"
+import { cn, formatDuration, formatShortDate } from "@/lib/utils"
+import type { AlertsHistoryRecord } from "@/types"
+import { alertsHistoryColumns } from "../../alerts-history-columns"
+
+const SectionIntro = memo(() => {
+	return (
+		<div>
+			<h3 className="text-xl font-medium mb-2">
+				<Trans>Alert History</Trans>
+			</h3>
+			<p className="text-sm text-muted-foreground leading-relaxed">
+				<Trans>View your 200 most recent alerts.</Trans>
+			</p>
+		</div>
+	)
+})
+
+export default function AlertsHistoryDataTable() {
+	const [data, setData] = useState<AlertsHistoryRecord[]>([])
+	const [sorting, setSorting] = useState<SortingState>([])
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+	const [rowSelection, setRowSelection] = useState({})
+	const [globalFilter, setGlobalFilter] = useState("")
+	const { toast } = useToast()
+	const [deleteOpen, setDeleteDialogOpen] = useState(false)
+
+	useEffect(() => {
+		let unsubscribe: (() => void) | undefined
+		const pbOptions = {
+			expand: "system",
+			fields: "id,name,value,state,created,resolved,expand.system.name",
+		}
+		// Initial load
+		pb.collection<AlertsHistoryRecord>("alerts_history")
+			.getList(0, 200, {
+				...pbOptions,
+				sort: "-created",
+			})
+			.then(({ items }) => setData(items))
+
+		// Subscribe to changes
+		;(async () => {
+			unsubscribe = await pb.collection("alerts_history").subscribe(
+				"*",
+				(e) => {
+					if (e.action === "create") {
+						setData((current) => [e.record as AlertsHistoryRecord, ...current])
+					}
+					if (e.action === "update") {
+						setData((current) => current.map((r) => (r.id === e.record.id ? (e.record as AlertsHistoryRecord) : r)))
+					}
+					if (e.action === "delete") {
+						setData((current) => current.filter((r) => r.id !== e.record.id))
+					}
+				},
+				pbOptions
+			)
+		})()
+		// Unsubscribe on unmount
+		return () => unsubscribe?.()
+	}, [])
+
+	const table = useReactTable({
+		data,
+		columns: [
+			{
+				id: "select",
+				header: ({ table }) => (
+					<Checkbox
+						className="ms-2"
+						checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")}
+						onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+						aria-label="Select all"
+					/>
+				),
+				cell: ({ row }) => (
+					<Checkbox
+						checked={row.getIsSelected()}
+						onCheckedChange={(value) => row.toggleSelected(!!value)}
+						aria-label="Select row"
+					/>
+				),
+				enableSorting: false,
+				enableHiding: false,
+			},
+			...alertsHistoryColumns,
+		],
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+			globalFilter,
+		},
+		onGlobalFilterChange: setGlobalFilter,
+		globalFilterFn: (row, _columnId, filterValue) => {
+			const system = row.original.expand?.system?.name ?? ""
+			const name = row.getValue("name") ?? ""
+			const created = row.getValue("created") ?? ""
+			const search = String(filterValue).toLowerCase()
+			return (
+				system.toLowerCase().includes(search) ||
+				(name as string).toLowerCase().includes(search) ||
+				(created as string).toLowerCase().includes(search)
+			)
+		},
+	})
+
+	// Bulk delete handler
+	const handleBulkDelete = async () => {
+		setDeleteDialogOpen(false)
+		const selectedIds = table.getSelectedRowModel().rows.map((row) => row.original.id)
+		try {
+			let batch = pb.createBatch()
+			let inBatch = 0
+			for (const id of selectedIds) {
+				batch.collection("alerts_history").delete(id)
+				inBatch++
+				if (inBatch > 20) {
+					await batch.send()
+					batch = pb.createBatch()
+					inBatch = 0
+				}
+			}
+			inBatch && (await batch.send())
+			table.resetRowSelection()
+		} catch (e) {
+			toast({
+				variant: "destructive",
+				title: t`Error`,
+				description: `Failed to delete records.`,
+			})
+		}
+	}
+
+	// Export to CSV handler
+	const handleExportCSV = () => {
+		const selectedRows = table.getSelectedRowModel().rows
+		if (!selectedRows.length) return
+		const cells: Record<string, (record: AlertsHistoryRecord) => string> = {
+			system: (record) => record.expand?.system?.name || record.system,
+			name: (record) => alertInfo[record.name]?.name() || record.name,
+			value: (record) => record.value + (alertInfo[record.name]?.unit ?? ""),
+			state: (record) => (record.resolved ? t`Resolved` : t`Active`),
+			created: (record) => formatShortDate(record.created),
+			resolved: (record) => (record.resolved ? formatShortDate(record.resolved) : ""),
+			duration: (record) => (record.resolved ? formatDuration(record.created, record.resolved) : ""),
+		}
+		const csvRows = [Object.keys(cells).join(",")]
+		for (const row of selectedRows) {
+			const r = row.original
+			csvRows.push(
+				Object.values(cells)
+					.map((val) => val(r))
+					.join(",")
+			)
+		}
+		const blob = new Blob([csvRows.join("\n")], { type: "text/csv" })
+		const url = URL.createObjectURL(blob)
+		const a = document.createElement("a")
+		a.href = url
+		a.download = "alerts_history.csv"
+		a.click()
+		URL.revokeObjectURL(url)
+	}
+
+	return (
+		<div className="@container w-full">
+			<div className="@3xl:flex items-end mb-4 gap-4">
+				<SectionIntro />
+				<div className="flex items-center gap-2 ms-auto mt-3 @3xl:mt-0">
+					{table.getFilteredSelectedRowModel().rows.length > 0 && (
+						<div className="fixed bottom-0 left-0 w-full p-4 grid grid-cols-2 items-center gap-4 z-50 backdrop-blur-md shrink-0 @lg:static @lg:p-0 @lg:w-auto @lg:gap-3">
+							<AlertDialog open={deleteOpen} onOpenChange={(open) => setDeleteDialogOpen(open)}>
+								<AlertDialogTrigger asChild>
+									<Button variant="destructive" className="h-9 shrink-0">
+										<Trash2Icon className="size-4 shrink-0" />
+										<span className="ms-1">
+											<Trans>Delete</Trans>
+										</span>
+									</Button>
+								</AlertDialogTrigger>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>
+											<Trans>Are you sure?</Trans>
+										</AlertDialogTitle>
+										<AlertDialogDescription>
+											<Trans>This will permanently delete all selected records from the database.</Trans>
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel>
+											<Trans>Cancel</Trans>
+										</AlertDialogCancel>
+										<AlertDialogAction
+											className={cn(buttonVariants({ variant: "destructive" }))}
+											onClick={handleBulkDelete}
+										>
+											<Trans>Continue</Trans>
+										</AlertDialogAction>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
+							<Button variant="outline" className="h-10" onClick={handleExportCSV}>
+								<DownloadIcon className="size-4" />
+								<span className="ms-1">
+									<Trans>Export</Trans>
+								</span>
+							</Button>
+						</div>
+					)}
+					<Input
+						placeholder={t`Filter...`}
+						value={globalFilter}
+						onChange={(e) => setGlobalFilter(e.target.value)}
+						className="px-4 w-full max-w-full @3xl:w-64"
+					/>
+				</div>
+			</div>
+			<div className="rounded-md border overflow-x-auto whitespace-nowrap">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<tr key={headerGroup.id} className="border-border/50">
+								{headerGroup.headers.map((header) => (
+									<TableHead className="px-2" key={header.id}>
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+									</TableHead>
+								))}
+							</tr>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id} className="py-3">
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
+									<Trans>No results.</Trans>
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="flex items-center justify-between ps-1 tabular-nums">
+				<div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+					<Trans>
+						{table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s)
+						selected.
+					</Trans>
+				</div>
+				<div className="flex w-full items-center gap-8 lg:w-fit my-3">
+					<div className="hidden items-center gap-2 lg:flex">
+						<Label htmlFor="rows-per-page" className="text-sm font-medium">
+							<Trans>Rows per page</Trans>
+						</Label>
+						<Select
+							value={`${table.getState().pagination.pageSize}`}
+							onValueChange={(value) => {
+								table.setPageSize(Number(value))
+							}}
+						>
+							<SelectTrigger className="w-[4.8em]" id="rows-per-page">
+								<SelectValue placeholder={table.getState().pagination.pageSize} />
+							</SelectTrigger>
+							<SelectContent side="top">
+								{[10, 20, 50, 100, 200].map((pageSize) => (
+									<SelectItem key={pageSize} value={`${pageSize}`}>
+										{pageSize}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+					<div className="flex w-fit items-center justify-center text-sm font-medium">
+						<Trans>
+							Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+						</Trans>
+					</div>
+					<div className="ms-auto flex items-center gap-2 lg:ms-0">
+						<Button
+							variant="outline"
+							className="hidden size-9 p-0 lg:flex"
+							onClick={() => table.setPageIndex(0)}
+							disabled={!table.getCanPreviousPage()}
+						>
+							<span className="sr-only">Go to first page</span>
+							<ChevronsLeftIcon className="size-5" />
+						</Button>
+						<Button
+							variant="outline"
+							className="size-9"
+							size="icon"
+							onClick={() => table.previousPage()}
+							disabled={!table.getCanPreviousPage()}
+						>
+							<span className="sr-only">Go to previous page</span>
+							<ChevronLeftIcon className="size-5" />
+						</Button>
+						<Button
+							variant="outline"
+							className="size-9"
+							size="icon"
+							onClick={() => table.nextPage()}
+							disabled={!table.getCanNextPage()}
+						>
+							<span className="sr-only">Go to next page</span>
+							<ChevronRightIcon className="size-5" />
+						</Button>
+						<Button
+							variant="outline"
+							className="hidden size-9 lg:flex"
+							size="icon"
+							onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+							disabled={!table.getCanNextPage()}
+						>
+							<span className="sr-only">Go to last page</span>
+							<ChevronsRightIcon className="size-5" />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
--- a/internal/site/src/components/routes/settings/config-yaml.tsx
+++ b/internal/site/src/components/routes/settings/config-yaml.tsx
@@ -0,0 +1,97 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { redirectPage } from "@nanostores/router"
+import clsx from "clsx"
+import { AlertCircleIcon, FileSlidersIcon, LoaderCircleIcon } from "lucide-react"
+import { useState } from "react"
+import { $router } from "@/components/router"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@/components/ui/use-toast"
+import { isAdmin, pb } from "@/lib/api"
+
+export default function ConfigYaml() {
+	const [configContent, setConfigContent] = useState<string>("")
+	const [isLoading, setIsLoading] = useState(false)
+
+	const ButtonIcon = isLoading ? LoaderCircleIcon : FileSlidersIcon
+
+	async function fetchConfig() {
+		try {
+			setIsLoading(true)
+			const { config } = await pb.send<{ config: string }>("/api/beszel/config-yaml", {})
+			setConfigContent(config)
+		} catch (error: any) {
+			toast({
+				title: t`Error`,
+				description: error.message,
+				variant: "destructive",
+			})
+		} finally {
+			setIsLoading(false)
+		}
+	}
+
+	if (!isAdmin()) {
+		redirectPage($router, "settings", { name: "general" })
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">
+					<Trans>YAML Configuration</Trans>
+				</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					<Trans>Export your current systems configuration.</Trans>
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<div className="space-y-2">
+				<div className="mb-4">
+					<p className="text-sm text-muted-foreground leading-relaxed my-1">
+						<Trans>
+							Systems may be managed in a <code className="bg-muted rounded-sm px-1 text-primary">config.yml</code> file
+							inside your data directory.
+						</Trans>
+					</p>
+					<p className="text-sm text-muted-foreground leading-relaxed">
+						<Trans>
+							On each restart, systems in the database will be updated to match the systems defined in the file.
+						</Trans>
+					</p>
+					<Alert className="my-4 border-destructive text-destructive w-auto table md:pe-6">
+						<AlertCircleIcon className="h-4 w-4 stroke-destructive" />
+						<AlertTitle>
+							<Trans>Caution - potential data loss</Trans>
+						</AlertTitle>
+						<AlertDescription>
+							<p>
+								<Trans>
+									Existing systems not defined in <code>config.yml</code> will be deleted. Please make regular backups.
+								</Trans>
+							</p>
+						</AlertDescription>
+					</Alert>
+				</div>
+				{configContent && (
+					<Textarea
+						dir="ltr"
+						autoFocus
+						defaultValue={configContent}
+						spellCheck="false"
+						rows={Math.min(25, configContent.split("\n").length)}
+						className="font-mono whitespace-pre"
+					/>
+				)}
+			</div>
+			<Separator className="my-5" />
+			<Button type="button" className="mt-2 flex items-center gap-1" onClick={fetchConfig} disabled={isLoading}>
+				<ButtonIcon className={clsx("h-4 w-4 me-0.5", isLoading && "animate-spin")} />
+				<Trans>Export configuration</Trans>
+			</Button>
+		</div>
+	)
+}
--- a/internal/site/src/components/routes/settings/general.tsx
+++ b/internal/site/src/components/routes/settings/general.tsx
@@ -0,0 +1,254 @@
+/** biome-ignore-all lint/correctness/useUniqueElementIds: component is only rendered once */
+import { Trans, useLingui } from "@lingui/react/macro"
+import { LanguagesIcon, LoaderCircleIcon, SaveIcon } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import { HourFormat, Unit } from "@/lib/enums"
+import { dynamicActivate } from "@/lib/i18n"
+import languages from "@/lib/languages"
+import { chartTimeData, currentHour12 } from "@/lib/utils"
+import type { UserSettings } from "@/types"
+import { saveSettings } from "./layout"
+
+export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
+	const [isLoading, setIsLoading] = useState(false)
+	const { i18n } = useLingui()
+
+	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault()
+		setIsLoading(true)
+		const formData = new FormData(e.target as HTMLFormElement)
+		const data = Object.fromEntries(formData) as Partial<UserSettings>
+		await saveSettings(data)
+		setIsLoading(false)
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">
+					<Trans>General</Trans>
+				</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					<Trans>Change general application options.</Trans>
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<form onSubmit={handleSubmit} className="space-y-5">
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium flex items-center gap-2">
+							<LanguagesIcon className="h-4 w-4" />
+							<Trans>Language</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>
+								Want to help improve our translations? Check{" "}
+								<a href="https://crowdin.com/project/beszel" className="link" target="_blank" rel="noopener noreferrer">
+									Crowdin
+								</a>{" "}
+								for details.
+							</Trans>
+						</p>
+					</div>
+					<Label className="block" htmlFor="lang">
+						<Trans>Preferred Language</Trans>
+					</Label>
+					<Select value={i18n.locale} onValueChange={(lang: string) => dynamicActivate(lang)}>
+						<SelectTrigger id="lang">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{languages.map((lang) => (
+								<SelectItem key={lang.lang} value={lang.lang}>
+									<span className="me-2.5">{lang.e}</span>
+									{lang.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Chart options</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Adjust display options for charts.</Trans>
+						</p>
+					</div>
+					<div className="grid sm:grid-cols-3 gap-4">
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="chartTime">
+								<Trans>Default time period</Trans>
+							</Label>
+							<Select name="chartTime" key={userSettings.chartTime} defaultValue={userSettings.chartTime}>
+								<SelectTrigger id="chartTime">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{Object.entries(chartTimeData).map(([value, { label }]) => (
+										<SelectItem key={value} value={value}>
+											{label()}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="hourFormat">
+								<Trans>Time format</Trans>
+							</Label>
+							<Select
+								name="hourFormat"
+								key={userSettings.hourFormat}
+								defaultValue={userSettings.hourFormat ?? (currentHour12() ? HourFormat["12h"] : HourFormat["24h"])}
+							>
+								<SelectTrigger id="hourFormat">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{Object.keys(HourFormat).map((value) => (
+										<SelectItem key={value} value={value}>
+											{value}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
+				</div>
+				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans comment="Temperature / network units">Unit preferences</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Change display units for metrics.</Trans>
+						</p>
+					</div>
+					<div className="grid sm:grid-cols-3 gap-4">
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="unitTemp">
+								<Trans>Temperature unit</Trans>
+							</Label>
+							<Select
+								name="unitTemp"
+								key={userSettings.unitTemp}
+								defaultValue={userSettings.unitTemp?.toString() || String(Unit.Celsius)}
+							>
+								<SelectTrigger id="unitTemp">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value={String(Unit.Celsius)}>
+										<Trans>Celsius (°C)</Trans>
+									</SelectItem>
+									<SelectItem value={String(Unit.Fahrenheit)}>
+										<Trans>Fahrenheit (°F)</Trans>
+									</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="unitNet">
+								<Trans comment="Context: Bytes or bits">Network unit</Trans>
+							</Label>
+							<Select
+								name="unitNet"
+								key={userSettings.unitNet}
+								defaultValue={userSettings.unitNet?.toString() ?? String(Unit.Bytes)}
+							>
+								<SelectTrigger id="unitNet">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value={String(Unit.Bytes)}>
+										<Trans>Bytes (KB/s, MB/s, GB/s)</Trans>
+									</SelectItem>
+									<SelectItem value={String(Unit.Bits)}>
+										<Trans>Bits (Kbps, Mbps, Gbps)</Trans>
+									</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="grid gap-2">
+							<Label className="block" htmlFor="unitDisk">
+								<Trans>Disk unit</Trans>
+							</Label>
+							<Select
+								name="unitDisk"
+								key={userSettings.unitDisk}
+								defaultValue={userSettings.unitDisk?.toString() ?? String(Unit.Bytes)}
+							>
+								<SelectTrigger id="unitDisk">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value={String(Unit.Bytes)}>
+										<Trans>Bytes (KB/s, MB/s, GB/s)</Trans>
+									</SelectItem>
+									<SelectItem value={String(Unit.Bits)}>
+										<Trans>Bits (Kbps, Mbps, Gbps)</Trans>
+									</SelectItem>
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
+				</div>
+				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Warning thresholds</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Set percentage thresholds for meter colors.</Trans>
+						</p>
+					</div>
+					<div className="grid grid-cols-2 lg:grid-cols-3 gap-4 items-end">
+						<div className="grid gap-2">
+							<Label htmlFor="colorWarn">
+								<Trans>Warning (%)</Trans>
+							</Label>
+							<Input
+								id="colorWarn"
+								name="colorWarn"
+								type="number"
+								min={1}
+								max={100}
+								className="min-w-24"
+								defaultValue={userSettings.colorWarn ?? 65}
+							/>
+						</div>
+						<div className="grid gap-1">
+							<Label htmlFor="colorCrit">
+								<Trans>Critical (%)</Trans>
+							</Label>
+							<Input
+								id="colorCrit"
+								name="colorCrit"
+								type="number"
+								min={1}
+								max={100}
+								className="min-w-24"
+								defaultValue={userSettings.colorCrit ?? 90}
+							/>
+						</div>
+					</div>
+				</div>
+				<Separator />
+				<Button type="submit" className="flex items-center gap-1.5 disabled:opacity-100" disabled={isLoading}>
+					{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
+					<Trans>Save Settings</Trans>
+				</Button>
+			</form>
+		</div>
+	)
+}
--- a/internal/site/src/components/routes/settings/layout.tsx
+++ b/internal/site/src/components/routes/settings/layout.tsx
@@ -0,0 +1,145 @@
+import { t } from "@lingui/core/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath, redirectPage } from "@nanostores/router"
+import { AlertOctagonIcon, BellIcon, FileSlidersIcon, FingerprintIcon, SettingsIcon } from "lucide-react"
+import { lazy, useEffect } from "react"
+import { $router } from "@/components/router.tsx"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx"
+import { toast } from "@/components/ui/use-toast.ts"
+import { pb } from "@/lib/api"
+import { $userSettings } from "@/lib/stores.ts"
+import type { UserSettings } from "@/types"
+import { Separator } from "../../ui/separator"
+import { SidebarNav } from "./sidebar-nav.tsx"
+
+const generalSettingsImport = () => import("./general.tsx")
+const notificationsSettingsImport = () => import("./notifications.tsx")
+const configYamlSettingsImport = () => import("./config-yaml.tsx")
+const fingerprintsSettingsImport = () => import("./tokens-fingerprints.tsx")
+const alertsHistoryDataTableSettingsImport = () => import("./alerts-history-data-table.tsx")
+
+const GeneralSettings = lazy(generalSettingsImport)
+const NotificationsSettings = lazy(notificationsSettingsImport)
+const ConfigYamlSettings = lazy(configYamlSettingsImport)
+const FingerprintsSettings = lazy(fingerprintsSettingsImport)
+const AlertsHistoryDataTableSettings = lazy(alertsHistoryDataTableSettingsImport)
+
+export async function saveSettings(newSettings: Partial<UserSettings>) {
+	try {
+		// get fresh copy of settings
+		const req = await pb.collection("user_settings").getFirstListItem("", {
+			fields: "id,settings",
+		})
+		// update user settings
+		const updatedSettings = await pb.collection("user_settings").update(req.id, {
+			settings: {
+				...req.settings,
+				...newSettings,
+			},
+		})
+		$userSettings.set(updatedSettings.settings)
+		toast({
+			title: t`Settings saved`,
+			description: t`Your user settings have been updated.`,
+		})
+	} catch (e) {
+		// console.error('update settings', e)
+		toast({
+			title: t`Failed to save settings`,
+			description: t`Check logs for more details.`,
+			variant: "destructive",
+		})
+	}
+}
+
+export default function SettingsLayout() {
+	const { t } = useLingui()
+
+	const sidebarNavItems = [
+		{
+			title: t({ message: `General`, comment: "Context: General settings" }),
+			href: getPagePath($router, "settings", { name: "general" }),
+			icon: SettingsIcon,
+		},
+		{
+			title: t`Notifications`,
+			href: getPagePath($router, "settings", { name: "notifications" }),
+			icon: BellIcon,
+			preload: notificationsSettingsImport,
+		},
+		{
+			title: t`Tokens & Fingerprints`,
+			href: getPagePath($router, "settings", { name: "tokens" }),
+			icon: FingerprintIcon,
+			noReadOnly: true,
+			preload: fingerprintsSettingsImport,
+		},
+		{
+			title: t`Alert History`,
+			href: getPagePath($router, "settings", { name: "alert-history" }),
+			icon: AlertOctagonIcon,
+			preload: alertsHistoryDataTableSettingsImport,
+		},
+		{
+			title: t`YAML Config`,
+			href: getPagePath($router, "settings", { name: "config" }),
+			icon: FileSlidersIcon,
+			admin: true,
+			preload: configYamlSettingsImport,
+		},
+	]
+
+	const page = useStore($router)
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: no dependencies
+	useEffect(() => {
+		document.title = `${t`Settings`} / Beszel`
+		// @ts-expect-error redirect to account page if no page is specified
+		if (!page?.params?.name) {
+			redirectPage($router, "settings", { name: "general" })
+		}
+	}, [])
+
+	return (
+		<Card className="pt-5 px-4 pb-8 min-h-96 mb-14 sm:pt-6 sm:px-7">
+			<CardHeader className="p-0">
+				<CardTitle className="mb-1">
+					<Trans>Settings</Trans>
+				</CardTitle>
+				<CardDescription>
+					<Trans>Manage display and notification preferences.</Trans>
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="p-0">
+				<Separator className="hidden md:block my-5" />
+				<div className="flex flex-col gap-3.5 md:flex-row md:gap-5 lg:gap-12">
+					<aside className="md:max-w-52 min-w-40">
+						<SidebarNav items={sidebarNavItems} />
+					</aside>
+					<div className="flex-1 min-w-0">
+						{/* @ts-ignore */}
+						<SettingsContent name={page?.params?.name ?? "general"} />
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	)
+}
+
+function SettingsContent({ name }: { name: string }) {
+	const userSettings = useStore($userSettings)
+
+	switch (name) {
+		case "general":
+			return <GeneralSettings userSettings={userSettings} />
+		case "notifications":
+			return <NotificationsSettings userSettings={userSettings} />
+		case "config":
+			return <ConfigYamlSettings />
+		case "tokens":
+			return <FingerprintsSettings />
+		case "alert-history":
+			return <AlertsHistoryDataTableSettings />
+	}
+}
--- a/internal/site/src/components/routes/settings/notifications.tsx
+++ b/internal/site/src/components/routes/settings/notifications.tsx
@@ -0,0 +1,226 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { BellIcon, LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from "lucide-react"
+import { type ChangeEventHandler, useEffect, useState } from "react"
+import * as v from "valibot"
+import { prependBasePath } from "@/components/router"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { InputTags } from "@/components/ui/input-tags"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { toast } from "@/components/ui/use-toast"
+import { isAdmin, pb } from "@/lib/api"
+import type { UserSettings } from "@/types"
+import { saveSettings } from "./layout"
+
+interface ShoutrrrUrlCardProps {
+	url: string
+	onUrlChange: ChangeEventHandler<HTMLInputElement>
+	onRemove: () => void
+}
+
+const NotificationSchema = v.object({
+	emails: v.array(v.pipe(v.string(), v.email())),
+	webhooks: v.array(v.pipe(v.string(), v.url())),
+})
+
+const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSettings }) => {
+	const [webhooks, setWebhooks] = useState(userSettings.webhooks ?? [])
+	const [emails, setEmails] = useState<string[]>(userSettings.emails ?? [])
+	const [isLoading, setIsLoading] = useState(false)
+
+	// update values when userSettings changes
+	useEffect(() => {
+		setWebhooks(userSettings.webhooks ?? [])
+		setEmails(userSettings.emails ?? [])
+	}, [userSettings])
+
+	function addWebhook() {
+		setWebhooks([...webhooks, ""])
+		// focus on the new input
+		queueMicrotask(() => {
+			const inputs = document.querySelectorAll("#webhooks input") as NodeListOf<HTMLInputElement>
+			inputs[inputs.length - 1]?.focus()
+		})
+	}
+	const removeWebhook = (index: number) => setWebhooks(webhooks.filter((_, i) => i !== index))
+
+	function updateWebhook(index: number, value: string) {
+		const newWebhooks = [...webhooks]
+		newWebhooks[index] = value
+		setWebhooks(newWebhooks)
+	}
+
+	async function updateSettings() {
+		setIsLoading(true)
+		try {
+			const parsedData = v.parse(NotificationSchema, { emails, webhooks })
+			await saveSettings(parsedData)
+		} catch (e: any) {
+			toast({
+				title: t`Failed to save settings`,
+				description: e.message,
+				variant: "destructive",
+			})
+		}
+		setIsLoading(false)
+	}
+
+	return (
+		<div>
+			<div>
+				<h3 className="text-xl font-medium mb-2">
+					<Trans>Notifications</Trans>
+				</h3>
+				<p className="text-sm text-muted-foreground leading-relaxed">
+					<Trans>Configure how you receive alert notifications.</Trans>
+				</p>
+				<p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">
+					<Trans>
+						Looking instead for where to create alerts? Click the bell <BellIcon className="inline h-4 w-4" /> icons in
+						the systems table.
+					</Trans>
+				</p>
+			</div>
+			<Separator className="my-4" />
+			<div className="space-y-5">
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Email notifications</Trans>
+						</h3>
+						{isAdmin() && (
+							<p className="text-sm text-muted-foreground leading-relaxed">
+								<Trans>
+									Please{" "}
+									<a href={prependBasePath("/_/#/settings/mail")} className="link" target="_blank">
+										configure an SMTP server
+									</a>{" "}
+									to ensure alerts are delivered.
+								</Trans>
+							</p>
+						)}
+					</div>
+					<Label className="block" htmlFor="email">
+						<Trans>To email(s)</Trans>
+					</Label>
+					<InputTags
+						value={emails}
+						onChange={setEmails}
+						placeholder={t`Enter email address...`}
+						className="w-full"
+						type="email"
+						id="email"
+					/>
+					<p className="text-[0.8rem] text-muted-foreground">
+						<Trans>Save address using enter key or comma. Leave blank to disable email notifications.</Trans>
+					</p>
+				</div>
+				<Separator />
+				<div className="space-y-3">
+					<div>
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Webhook / Push notifications</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>
+								Beszel uses{" "}
+								<a href="https://beszel.dev/guide/notifications" target="_blank" className="link" rel="noopener">
+									Shoutrrr
+								</a>{" "}
+								to integrate with popular notification services.
+							</Trans>
+						</p>
+					</div>
+					{webhooks.length > 0 && (
+						<div className="grid gap-2.5" id="webhooks">
+							{webhooks.map((webhook, index) => (
+								<ShoutrrrUrlCard
+									key={index}
+									url={webhook}
+									onUrlChange={(e: React.ChangeEvent<HTMLInputElement>) => updateWebhook(index, e.target.value)}
+									onRemove={() => removeWebhook(index)}
+								/>
+							))}
+						</div>
+					)}
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						className="mt-2 flex items-center gap-1"
+						onClick={addWebhook}
+					>
+						<PlusIcon className="h-4 w-4 -ms-0.5" />
+						<Trans>Add URL</Trans>
+					</Button>
+				</div>
+				<Separator />
+				<Button
+					type="button"
+					className="flex items-center gap-1.5 disabled:opacity-100"
+					onClick={updateSettings}
+					disabled={isLoading}
+				>
+					{isLoading ? <LoaderCircleIcon className="h-4 w-4 animate-spin" /> : <SaveIcon className="h-4 w-4" />}
+					<Trans>Save Settings</Trans>
+				</Button>
+			</div>
+		</div>
+	)
+}
+
+const ShoutrrrUrlCard = ({ url, onUrlChange, onRemove }: ShoutrrrUrlCardProps) => {
+	const [isLoading, setIsLoading] = useState(false)
+
+	const sendTestNotification = async () => {
+		setIsLoading(true)
+		const res = await pb.send("/api/beszel/test-notification", { method: "POST", body: { url } })
+		if ("err" in res && !res.err) {
+			toast({
+				title: t`Test notification sent`,
+				description: t`Check your notification service`,
+			})
+		} else {
+			toast({
+				title: t`Error`,
+				description: res.err ?? t`Failed to send test notification`,
+				variant: "destructive",
+			})
+		}
+		setIsLoading(false)
+	}
+
+	return (
+		<Card className="bg-muted/40 p-2 md:p-3">
+			<div className="flex items-center gap-1">
+				<Input
+					type="url"
+					className="light:bg-card"
+					required
+					placeholder="generic://webhook.site/xxxxxx"
+					value={url}
+					onChange={onUrlChange}
+				/>
+				<Button type="button" variant="outline" disabled={isLoading || url === ""} onClick={sendTestNotification}>
+					{isLoading ? (
+						<LoaderCircleIcon className="h-4 w-4 animate-spin" />
+					) : (
+						<span>
+							<Trans>
+								Test <span className="hidden sm:inline">URL</span>
+							</Trans>
+						</span>
+					)}
+				</Button>
+				<Button type="button" variant="outline" size="icon" className="shrink-0" aria-label="Delete" onClick={onRemove}>
+					<Trash2Icon className="h-4 w-4" />
+				</Button>
+			</div>
+		</Card>
+	)
+}
+
+export default SettingsNotificationsPage
--- a/internal/site/src/components/routes/settings/sidebar-nav.tsx
+++ b/internal/site/src/components/routes/settings/sidebar-nav.tsx
@@ -0,0 +1,74 @@
+import { useStore } from "@nanostores/react"
+import type React from "react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
+import { isAdmin, isReadOnlyUser } from "@/lib/api"
+import { cn } from "@/lib/utils"
+import { $router, Link, navigate } from "../../router"
+import { buttonVariants } from "../../ui/button"
+
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+	items: {
+		href: string
+		title: string
+		icon?: React.FC<React.SVGProps<SVGSVGElement>>
+		admin?: boolean
+		noReadOnly?: boolean
+		preload?: () => Promise<{ default: React.ComponentType<any> }>
+	}[]
+}
+
+export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
+	const page = useStore($router)
+
+	return (
+		<>
+			{/* Mobile View */}
+			<div className="md:hidden">
+				<Select onValueChange={navigate} value={page?.path}>
+					<SelectTrigger className="w-full my-3.5">
+						<SelectValue placeholder="Select page" />
+					</SelectTrigger>
+					<SelectContent>
+						{items.map((item) => {
+							if (item.admin && !isAdmin()) return null
+							return (
+								<SelectItem key={item.href} value={item.href}>
+									<span className="flex items-center gap-2 truncate">
+										{item.icon && <item.icon className="size-4" />}
+										<span className="truncate">{item.title}</span>
+									</span>
+								</SelectItem>
+							)
+						})}
+					</SelectContent>
+				</Select>
+				<Separator />
+			</div>
+
+			{/* Desktop View */}
+			<nav className={cn("hidden md:grid gap-1 sticky top-6", className)} {...props}>
+				{items.map((item) => {
+					if ((item.admin && !isAdmin()) || (item.noReadOnly && isReadOnlyUser())) {
+						return null
+					}
+					return (
+						<Link
+							onMouseEnter={() => item.preload?.()}
+							key={item.href}
+							href={item.href}
+							className={cn(
+								buttonVariants({ variant: "ghost" }),
+								"flex items-center gap-3 justify-start truncate duration-50",
+								page?.path === item.href ? "bg-muted hover:bg-accent/70" : "hover:bg-accent/50"
+							)}
+						>
+							{item.icon && <item.icon className="size-4 shrink-0" />}
+							<span className="truncate">{item.title}</span>
+						</Link>
+					)
+				})}
+			</nav>
+		</>
+	)
+}
--- a/internal/site/src/components/routes/settings/tokens-fingerprints.tsx
+++ b/internal/site/src/components/routes/settings/tokens-fingerprints.tsx
@@ -0,0 +1,368 @@
+import { t } from "@lingui/core/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
+import { redirectPage } from "@nanostores/router"
+import {
+	CopyIcon,
+	FingerprintIcon,
+	KeyIcon,
+	MoreHorizontalIcon,
+	RotateCwIcon,
+	ServerIcon,
+	Trash2Icon,
+} from "lucide-react"
+import { memo, useEffect, useMemo, useState } from "react"
+import {
+	copyDockerCompose,
+	copyDockerRun,
+	copyLinuxCommand,
+	copyWindowsCommand,
+	type DropdownItem,
+	InstallDropdown,
+} from "@/components/install-dropdowns"
+import { $router } from "@/components/router"
+import { Button } from "@/components/ui/button"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { AppleIcon, DockerIcon, TuxIcon, WindowsIcon } from "@/components/ui/icons"
+import { Separator } from "@/components/ui/separator"
+import { Switch } from "@/components/ui/switch"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { toast } from "@/components/ui/use-toast"
+import { isReadOnlyUser, pb } from "@/lib/api"
+import { $publicKey } from "@/lib/stores"
+import { cn, copyToClipboard, generateToken, getHubURL, tokenMap } from "@/lib/utils"
+import type { FingerprintRecord } from "@/types"
+
+const pbFingerprintOptions = {
+	expand: "system",
+	fields: "id,fingerprint,token,system,expand.system.name",
+}
+
+function sortFingerprints(fingerprints: FingerprintRecord[]) {
+	return fingerprints.sort((a, b) => a.expand.system.name.localeCompare(b.expand.system.name))
+}
+
+const SettingsFingerprintsPage = memo(() => {
+	if (isReadOnlyUser()) {
+		redirectPage($router, "settings", { name: "general" })
+	}
+	const [fingerprints, setFingerprints] = useState<FingerprintRecord[]>([])
+
+	// Get fingerprint records on mount
+	useEffect(() => {
+		pb.collection("fingerprints")
+			.getFullList<FingerprintRecord>(pbFingerprintOptions)
+			.then((prints) => {
+				setFingerprints(sortFingerprints(prints))
+			})
+	}, [])
+
+	// Subscribe to fingerprint updates
+	useEffect(() => {
+		let unsubscribe: (() => void) | undefined
+		;(async () => {
+			// subscribe to fingerprint updates
+			unsubscribe = await pb.collection("fingerprints").subscribe(
+				"*",
+				(res) => {
+					setFingerprints((currentFingerprints) => {
+						if (res.action === "create") {
+							return sortFingerprints([...currentFingerprints, res.record as FingerprintRecord])
+						}
+						if (res.action === "update") {
+							return currentFingerprints.map((fingerprint) => {
+								if (fingerprint.id === res.record.id) {
+									return { ...fingerprint, ...res.record } as FingerprintRecord
+								}
+								return fingerprint
+							})
+						}
+						if (res.action === "delete") {
+							return currentFingerprints.filter((fingerprint) => fingerprint.id !== res.record.id)
+						}
+						return currentFingerprints
+					})
+				},
+				pbFingerprintOptions
+			)
+		})()
+		// unsubscribe on unmount
+		return () => unsubscribe?.()
+	}, [])
+
+	// Update token map whenever fingerprints change
+	useEffect(() => {
+		for (const fingerprint of fingerprints) {
+			tokenMap.set(fingerprint.system, fingerprint.token)
+		}
+	}, [fingerprints])
+
+	return (
+		<>
+			<SectionIntro />
+			<Separator className="my-4" />
+			<SectionUniversalToken />
+			<Separator className="my-4" />
+			<SectionTable fingerprints={fingerprints} />
+		</>
+	)
+})
+
+const SectionIntro = memo(() => {
+	return (
+		<div>
+			<h3 className="text-xl font-medium mb-2">
+				<Trans>Tokens & Fingerprints</Trans>
+			</h3>
+			<p className="text-sm text-muted-foreground leading-relaxed">
+				<Trans>Tokens and fingerprints are used to authenticate WebSocket connections to the hub.</Trans>
+			</p>
+			<p className="text-sm text-muted-foreground leading-relaxed mt-1.5">
+				<Trans>
+					Tokens allow agents to connect and register. Fingerprints are stable identifiers unique to each system, set on
+					first connection.
+				</Trans>
+			</p>
+		</div>
+	)
+})
+
+const SectionUniversalToken = memo(() => {
+	const [token, setToken] = useState("")
+	const [isLoading, setIsLoading] = useState(true)
+	const [checked, setChecked] = useState(false)
+
+	async function updateToken(enable: number = -1) {
+		// enable: 0 for disable, 1 for enable, -1 (unset) for get current state
+		const data = await pb.send(`/api/beszel/universal-token`, {
+			query: {
+				token,
+				enable,
+			},
+		})
+		setToken(data.token)
+		setChecked(data.active)
+		setIsLoading(false)
+	}
+
+	useEffect(() => {
+		updateToken()
+	}, [])
+
+	return (
+		<div>
+			<h3 className="text-lg font-medium mb-2">
+				<Trans>Universal token</Trans>
+			</h3>
+			<p className="text-sm text-muted-foreground leading-relaxed">
+				<Trans>
+					When enabled, this token allows agents to self-register without prior system creation. Expires after one hour
+					or on hub restart.
+				</Trans>
+			</p>
+			<div className="min-h-16 overflow-auto max-w-full inline-flex items-center gap-5 mt-3 border py-2 ps-5 pe-4 rounded-md">
+				{!isLoading && (
+					<>
+						<Switch
+							defaultChecked={checked}
+							onCheckedChange={(checked) => {
+								updateToken(checked ? 1 : 0)
+							}}
+						/>
+						<span
+							className={cn(
+								"text-sm text-primary opacity-60 transition-opacity",
+								checked ? "opacity-100" : "select-none"
+							)}
+						>
+							{token}
+						</span>
+						<ActionsButtonUniversalToken token={token} checked={checked} />
+					</>
+				)}
+			</div>
+		</div>
+	)
+})
+
+const ActionsButtonUniversalToken = memo(({ token, checked }: { token: string; checked: boolean }) => {
+	const { t } = useLingui()
+	const publicKey = $publicKey.get()
+	const port = "45876"
+
+	const dropdownItems: DropdownItem[] = [
+		{
+			text: t({ message: "Copy docker compose", context: "Button to copy docker compose file content" }),
+			onClick: () => copyDockerCompose(port, publicKey, token),
+			icons: [DockerIcon],
+		},
+		{
+			text: t({ message: "Copy docker run", context: "Button to copy docker run command" }),
+			onClick: () => copyDockerRun(port, publicKey, token),
+			icons: [DockerIcon],
+		},
+		{
+			text: t`Copy Linux command`,
+			onClick: () => copyLinuxCommand(port, publicKey, token),
+			icons: [TuxIcon],
+		},
+		{
+			text: t({ message: "Homebrew command", context: "Button to copy install command" }),
+			onClick: () => copyLinuxCommand(port, publicKey, token, true),
+			icons: [TuxIcon, AppleIcon],
+		},
+		{
+			text: t({ message: "Windows command", context: "Button to copy install command" }),
+			onClick: () => copyWindowsCommand(port, publicKey, token),
+			icons: [WindowsIcon],
+		},
+	]
+	return (
+		<div className="flex items-center gap-2">
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="ghost"
+						size="icon"
+						disabled={!checked}
+						className={cn("transition-opacity", !checked && "opacity-50")}
+					>
+						<span className="sr-only">
+							<Trans>Open menu</Trans>
+						</span>
+						<MoreHorizontalIcon className="w-5" />
+					</Button>
+				</DropdownMenuTrigger>
+				<InstallDropdown items={dropdownItems} />
+			</DropdownMenu>
+		</div>
+	)
+})
+
+const SectionTable = memo(({ fingerprints = [] }: { fingerprints: FingerprintRecord[] }) => {
+	const { t } = useLingui()
+	const isReadOnly = isReadOnlyUser()
+
+	const headerCols = useMemo(
+		() => [
+			{
+				label: t`System`,
+				Icon: ServerIcon,
+				w: "11em",
+			},
+			{
+				label: t`Token`,
+				Icon: KeyIcon,
+				w: "20em",
+			},
+			{
+				label: t`Fingerprint`,
+				Icon: FingerprintIcon,
+				w: "20em",
+			},
+		],
+		[t]
+	)
+	return (
+		<div className="rounded-md border overflow-hidden w-full mt-4">
+			<Table>
+				<TableHeader>
+					<tr className="border-border/50">
+						{headerCols.map((col) => (
+							<TableHead key={col.label} style={{ minWidth: col.w }}>
+								<span className="flex items-center gap-2">
+									<col.Icon className="size-4" />
+									{col.label}
+								</span>
+							</TableHead>
+						))}
+						{!isReadOnly && (
+							<TableHead className="w-0">
+								<span className="sr-only">
+									<Trans>Actions</Trans>
+								</span>
+							</TableHead>
+						)}
+					</tr>
+				</TableHeader>
+				<TableBody className="whitespace-pre">
+					{fingerprints.map((fingerprint, i) => (
+						<TableRow key={i}>
+							<TableCell className="font-medium ps-5 py-2 max-w-60 truncate">
+								{fingerprint.expand.system.name}
+							</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.token}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.fingerprint}</TableCell>
+							{!isReadOnly && (
+								<TableCell className="py-2 px-4 xl:px-2">
+									<ActionsButtonTable fingerprint={fingerprint} />
+								</TableCell>
+							)}
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	)
+})
+
+async function updateFingerprint(fingerprint: FingerprintRecord, rotateToken = false) {
+	try {
+		await pb.collection("fingerprints").update(fingerprint.id, {
+			fingerprint: "",
+			token: rotateToken ? generateToken() : fingerprint.token,
+		})
+	} catch (error: any) {
+		toast({
+			title: t`Error`,
+			description: error.message,
+		})
+	}
+}
+
+const ActionsButtonTable = memo(({ fingerprint }: { fingerprint: FingerprintRecord }) => {
+	const envVar = `HUB_URL=${getHubURL()}\nTOKEN=${fingerprint.token}`
+	const copyEnv = () => copyToClipboard(envVar)
+	const copyYaml = () => copyToClipboard(envVar.replaceAll("=", ": "))
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" size={"icon"} data-nolink>
+					<span className="sr-only">
+						<Trans>Open menu</Trans>
+					</span>
+					<MoreHorizontalIcon className="w-5" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={copyYaml}>
+					<CopyIcon className="me-2.5 size-4" />
+					<Trans>Copy YAML</Trans>
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={copyEnv}>
+					<CopyIcon className="me-2.5 size-4" />
+					<Trans context="Environment variables">Copy env</Trans>
+				</DropdownMenuItem>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem onSelect={() => updateFingerprint(fingerprint, true)}>
+					<RotateCwIcon className="me-2.5 size-4" />
+					<Trans>Rotate token</Trans>
+				</DropdownMenuItem>
+				{fingerprint.fingerprint && (
+					<DropdownMenuItem onSelect={() => updateFingerprint(fingerprint)}>
+						<Trash2Icon className="me-2.5 size-4" />
+						<Trans>Delete fingerprint</Trans>
+					</DropdownMenuItem>
+				)}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+})
+
+export default SettingsFingerprintsPage