Vish/homelab-optimized
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sanitized mirror from private repository - 2026-04-05 05:34:18 UTC
Some checks failed
Documentation / Build Docusaurus (push) Failing after 4m59s
Details
Documentation / Deploy to GitHub Pages (push) Has been skipped
Details

Browse Source
This commit is contained in:
Gitea Mirror Bot
2026-04-05 05:34:18 +00:00
commit 3406d7ce05
1390 changed files with 353978 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
dashboard/ui/app/automations/page.tsx Normal file
View File

@@ -0,0 +1,181 @@
"use client";
import { usePoll } from "@/lib/use-poll";
import type { EmailStats } from "@/lib/types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { StatusBadge } from "@/components/status-badge";
interface BackupResult {
host: string;
status: string;
last_run: string;
size?: string;
}
interface DriftResult {
stack: string;
drifted: boolean;
details?: string;
}
interface StackRestart {
stack: string;
status: string;
timestamp: string;
}
export default function AutomationsPage() {
const { data: emails } = usePoll<EmailStats>(
"/api/automations/email",
60000
);
const { data: backups } = usePoll<Record<string, unknown>>(
"/api/automations/backup",
120000
);
const { data: drift } = usePoll<Record<string, unknown>>(
"/api/automations/drift",
120000
);
const { data: restartsData } = usePoll<{ entries: StackRestart[] }>(
"/api/automations/restarts",
60000
);
const restarts = restartsData?.entries ?? [];
return (
<div className="space-y-6">
<h1 className="text-lg font-semibold">Automations</h1>
{/* Email Organizers */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">
Email Organizers
</CardTitle>
</CardHeader>
<CardContent>
{!emails ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : (
<div className="space-y-4">
{emails.accounts.map((acct: Record<string, unknown>) => {
const name = String(acct.account ?? acct.name ?? "?");
const today = Number(acct.today ?? acct.today_total ?? 0);
const cats = (acct.categories ?? acct.today_categories ?? {}) as Record<string, number>;
return (
<div key={name} className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-foreground">{name}</span>
<span className="text-xs text-muted-foreground">{today} today</span>
</div>
<div className="flex flex-wrap gap-1.5">
{Object.entries(cats).map(([cat, count]) => (
<Badge key={cat} variant="secondary" className="text-[10px]">
{cat}: {count}
</Badge>
))}
</div>
</div>
);
})}
</div>
)}
</CardContent>
</Card>
{/* Row 2: Backups, Drift, Restarts */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">
Backup Status
</CardTitle>
</CardHeader>
<CardContent>
{!backups ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : (
<div className="space-y-2">
<StatusBadge
color={String(backups.status) === "ok" ? "green" : "red"}
label={String(backups.status ?? "unknown")}
/>
{backups.has_errors ? (
<p className="text-xs text-red-400">Errors detected in backup</p>
) : null}
<p className="text-[10px] text-muted-foreground">
{String(backups.entries ?? 0)} log entries today
</p>
</div>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">
Config Drift
</CardTitle>
</CardHeader>
<CardContent>
{!drift ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : (
<div className="space-y-2">
<StatusBadge
color={String(drift.status) === "clean" || String(drift.status) === "no_log" ? "green" : "amber"}
label={String(drift.status ?? "unknown")}
/>
<p className="text-[10px] text-muted-foreground">
{String(drift.last_result ?? "No scan results yet")}
</p>
</div>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">
Stack Restarts
</CardTitle>
</CardHeader>
<CardContent>
{!restarts ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : restarts.length === 0 ? (
<p className="text-xs text-muted-foreground">
No recent restarts
</p>
) : (
<div className="space-y-2">
{restarts.map((r, i) => (
<div
key={i}
className="flex items-center justify-between text-xs"
>
<span className="text-foreground">{r.stack}</span>
<div className="flex items-center gap-2">
<StatusBadge
color={r.status === "success" ? "green" : "red"}
label={r.status}
/>
<span className="text-muted-foreground">
{new Date(r.timestamp).toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})}
</span>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
</div>
</div>
);
}

138
dashboard/ui/app/expenses/page.tsx Normal file
View File

@@ -0,0 +1,138 @@
"use client";
import { usePoll } from "@/lib/use-poll";
import type { ExpenseSummary } from "@/lib/types";
import { StatCard } from "@/components/stat-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DataTable, Column } from "@/components/data-table";
interface Transaction {
id: string;
date: string;
vendor: string;
amount: number;
category: string;
}
export default function ExpensesPage() {
const { data: summary } = usePoll<ExpenseSummary>(
"/api/expenses/summary",
120000
);
const { data: expenseData } = usePoll<Transaction[] | { count: number; expenses: Transaction[] }>(
"/api/expenses",
120000
);
const transactions = Array.isArray(expenseData) ? expenseData : (expenseData?.expenses ?? []);
const maxVendor =
summary?.top_vendors.reduce(
(max, v) => Math.max(max, v.amount),
0
) ?? 1;
const txColumns: Column<Transaction>[] = [
{ key: "date", label: "Date" },
{
key: "vendor",
label: "Vendor",
render: (row) => (
<span className="font-medium text-foreground">{row.vendor}</span>
),
},
{
key: "amount",
label: "Amount",
render: (row) => (
<span className="text-foreground">
${row.amount.toFixed(2)}
</span>
),
},
{ key: "category", label: "Category" },
];
const categories = transactions
? [...new Set(transactions.map((t) => t.category))]
: [];
return (
<div className="space-y-6">
<h1 className="text-lg font-semibold">Expenses</h1>
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<StatCard
label="Total Spend"
value={summary ? `$${summary.total.toFixed(2)}` : "\u2014"}
sub={summary?.month}
/>
<StatCard
label="Transactions"
value={summary?.count ?? "\u2014"}
sub="this month"
/>
<StatCard
label="Top Vendor"
value={
summary?.top_vendors?.[0]?.vendor ?? "\u2014"
}
sub={
summary?.top_vendors?.[0]
? `$${summary.top_vendors[0].amount.toFixed(2)}`
: undefined
}
/>
</div>
{/* Top Vendors Bar Chart */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Top Vendors</CardTitle>
</CardHeader>
<CardContent>
{!summary ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : (
<div className="space-y-2">
{summary.top_vendors.map((v) => (
<div key={v.vendor} className="space-y-1">
<div className="flex items-center justify-between text-xs">
<span className="text-foreground">{v.vendor}</span>
<span className="text-muted-foreground">
${v.amount.toFixed(2)}
</span>
</div>
<div className="h-2 rounded-full bg-secondary overflow-hidden">
<div
className="h-full rounded-full bg-primary transition-all"
style={{
width: `${(v.amount / maxVendor) * 100}%`,
}}
/>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Transactions Table */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Transactions</CardTitle>
</CardHeader>
<CardContent>
<DataTable<Transaction>
data={transactions ?? []}
columns={txColumns}
searchKey="vendor"
filterKey="category"
filterOptions={categories}
/>
</CardContent>
</Card>
</div>
);
}

BIN
dashboard/ui/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

188
dashboard/ui/app/globals.css Normal file
View File

@@ -0,0 +1,188 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-geist-mono);
--font-heading: var(--font-sans);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
}
:root {
--radius: 0.625rem;
}
.dark {
--background: hsl(222 47% 5%);
--foreground: hsl(210 40% 96%);
--card: hsl(217 33% 6%);
--card-foreground: hsl(210 40% 96%);
--popover: hsl(217 33% 6%);
--popover-foreground: hsl(210 40% 96%);
--primary: hsl(217 91% 60%);
--primary-foreground: hsl(210 40% 96%);
--secondary: hsl(217 33% 12%);
--secondary-foreground: hsl(210 40% 96%);
--muted: hsl(217 33% 12%);
--muted-foreground: hsl(215 20% 55%);
--accent: hsl(217 33% 12%);
--accent-foreground: hsl(210 40% 96%);
--destructive: hsl(0 84% 60%);
--border: hsl(217 33% 17%);
--input: hsl(217 33% 17%);
--ring: hsl(217 91% 60%);
--chart-1: hsl(217 91% 60%);
--chart-2: hsl(160 60% 45%);
--chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%);
--sidebar: hsl(217 33% 6%);
--sidebar-foreground: hsl(210 40% 96%);
--sidebar-primary: hsl(217 91% 60%);
--sidebar-primary-foreground: hsl(210 40% 96%);
--sidebar-accent: hsl(217 33% 12%);
--sidebar-accent-foreground: hsl(210 40% 96%);
--sidebar-border: hsl(217 33% 17%);
--sidebar-ring: hsl(217 91% 60%);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
html {
@apply font-sans;
}
}
/* --- Visual Polish --- */
/* Dot grid background */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: radial-gradient(circle, hsl(217 33% 20%) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.3;
pointer-events: none;
}
/* Subtle card gradient overlay */
.card-glow {
background: linear-gradient(135deg, hsl(217 33% 8%) 0%, hsl(222 47% 6%) 100%);
}
/* Status dot glow */
.glow-green { box-shadow: 0 0 6px 2px rgba(34, 197, 94, 0.4); }
.glow-red { box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.4); }
.glow-amber { box-shadow: 0 0 6px 2px rgba(245, 158, 11, 0.4); }
.glow-blue { box-shadow: 0 0 6px 2px rgba(59, 130, 246, 0.4); }
.glow-purple { box-shadow: 0 0 6px 2px rgba(168, 85, 247, 0.4); }
/* Pulse animation for LIVE badge */
@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-live-pulse {
animation: live-pulse 2s ease-in-out infinite;
}
/* Slide-in animation for feed items */
@keyframes slide-in {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in {
animation: slide-in 0.3s ease-out forwards;
}
/* Shimmer animation for logo */
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.animate-shimmer {
background-size: 200% auto;
animation: shimmer 3s linear infinite;
}
/* Number transition */
.tabular-nums-transition {
font-variant-numeric: tabular-nums;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* VRAM bar gradient animation */
@keyframes bar-glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}
.animate-bar-glow {
animation: bar-glow 2s ease-in-out infinite;
}
/* Card hover lift */
.card-hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(59, 130, 246, 0.05);
}
/* Active nav glow */
.nav-active-glow {
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

224
dashboard/ui/app/infrastructure/page.tsx Normal file
View File

@@ -0,0 +1,224 @@
"use client";
import { useState, useMemo } from "react";
import { usePoll } from "@/lib/use-poll";
import type { Container, OverviewStats } from "@/lib/types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { DataTable, Column } from "@/components/data-table";
import { ContainerLogsModal } from "@/components/container-logs-modal";
import { StatusBadge } from "@/components/status-badge";
import { postAPI } from "@/lib/api";
interface OlaresPod {
name: string;
namespace: string;
status: string;
restarts: number;
age: string;
}
export default function InfrastructurePage() {
const { data: containers } = usePoll<Container[]>(
"/api/containers",
30000
);
const { data: overview } = usePoll<OverviewStats>(
"/api/stats/overview",
60000
);
const { data: pods } = usePoll<OlaresPod[]>("/api/olares/pods", 30000);
const [logsTarget, setLogsTarget] = useState<{
id: string;
name: string;
endpoint: string;
} | null>(null);
const endpoints = useMemo(() => {
if (!containers) return [];
return [...new Set(containers.map((c) => c.endpoint))];
}, [containers]);
const containerColumns: Column<Container>[] = [
{
key: "name",
label: "Name",
render: (row) => (
<span className="font-medium text-foreground">{row.name}</span>
),
},
{
key: "state",
label: "State",
render: (row) => (
<StatusBadge
color={row.state === "running" ? "green" : "red"}
label={row.state}
/>
),
},
{ key: "status", label: "Status" },
{ key: "endpoint", label: "Endpoint" },
{
key: "image",
label: "Image",
render: (row) => (
<span className="truncate max-w-[200px] block">{row.image}</span>
),
},
];
const podColumns: Column<OlaresPod>[] = [
{ key: "name", label: "Pod" },
{ key: "namespace", label: "Namespace" },
{
key: "status",
label: "Status",
render: (row) => (
<StatusBadge
color={row.status === "Running" ? "green" : "amber"}
label={row.status}
/>
),
},
{ key: "restarts", label: "Restarts" },
{ key: "age", label: "Age" },
];
const gpu = overview?.gpu;
return (
<div className="space-y-6">
<h1 className="text-lg font-semibold">Infrastructure</h1>
{/* Container Table */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Containers</CardTitle>
</CardHeader>
<CardContent>
<DataTable<Container>
data={containers ?? []}
columns={containerColumns}
searchKey="name"
filterKey="endpoint"
filterOptions={endpoints}
actions={(row) => (
<div className="flex gap-1">
<Button
variant="outline"
size="sm"
className="h-6 text-[10px] px-2"
onClick={() =>
setLogsTarget({
id: row.id,
name: row.name,
endpoint: row.endpoint,
})
}
>
Logs
</Button>
<Button
variant="outline"
size="sm"
className="h-6 text-[10px] px-2"
onClick={() =>
postAPI(
`/api/containers/${row.endpoint}/${row.id}/restart`
)
}
>
Restart
</Button>
</div>
)}
/>
</CardContent>
</Card>
{/* Row 2: Olares Pods + GPU */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Olares Pods</CardTitle>
</CardHeader>
<CardContent>
<DataTable<OlaresPod>
data={pods ?? []}
columns={podColumns}
searchKey="name"
/>
</CardContent>
</Card>
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">GPU Status</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{!gpu ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : gpu.available ? (
<>
<p className="text-sm font-medium text-foreground">
{gpu.name}
</p>
{gpu.vram_used_mb != null && gpu.vram_total_mb != null && (
<div>
<div className="flex justify-between text-xs text-muted-foreground mb-1">
<span>VRAM</span>
<span>
{(gpu.vram_used_mb / 1024).toFixed(1)} /{" "}
{(gpu.vram_total_mb / 1024).toFixed(1)} GB
</span>
</div>
<div className="h-3 rounded-full bg-secondary overflow-hidden">
<div
className="h-full rounded-full bg-primary transition-all"
style={{
width: `${(gpu.vram_used_mb / gpu.vram_total_mb) * 100}%`,
}}
/>
</div>
</div>
)}
<div className="grid grid-cols-3 gap-4 text-xs">
<div>
<p className="text-muted-foreground">Temperature</p>
<p className="text-foreground text-lg font-semibold">
{gpu.temp_c ?? "\u2014"}&deg;C
</p>
</div>
<div>
<p className="text-muted-foreground">Power</p>
<p className="text-foreground text-lg font-semibold">
{gpu.power_w ?? "\u2014"}W
</p>
</div>
<div>
<p className="text-muted-foreground">Utilization</p>
<p className="text-foreground text-lg font-semibold">
{gpu.utilization_pct ?? "\u2014"}%
</p>
</div>
</div>
</>
) : (
<p className="text-xs text-muted-foreground">GPU not available</p>
)}
</CardContent>
</Card>
</div>
{/* Logs Modal */}
<ContainerLogsModal
containerId={logsTarget?.id ?? null}
containerName={logsTarget?.name ?? ""}
endpoint={logsTarget?.endpoint ?? ""}
onClose={() => setLogsTarget(null)}
/>
</div>
);
}

43
dashboard/ui/app/layout.tsx Normal file
View File

@@ -0,0 +1,43 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Nav } from "@/components/nav";
import { ToastProvider } from "@/components/toast-provider";
import { OllamaChat } from "@/components/ollama-chat";
import { KeyboardShortcuts } from "@/components/keyboard-shortcuts";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Homelab Dashboard",
description: "Infrastructure monitoring and management",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
lang="en"
className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}
>
<body className="min-h-full flex flex-col">
<Nav />
<main className="flex-1 p-6">{children}</main>
<ToastProvider />
<OllamaChat />
<KeyboardShortcuts />
</body>
</html>
);
}

137
dashboard/ui/app/logs/page.tsx Normal file
View File

@@ -0,0 +1,137 @@
"use client";
import { useState, useEffect, useMemo } from "react";
import { usePoll } from "@/lib/use-poll";
import { fetchAPI } from "@/lib/api";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
interface LogFile {
name: string;
filename?: string;
size?: string;
size_bytes?: number;
modified?: number;
}
export default function LogsPage() {
const { data: logsRaw } = usePoll<LogFile[] | { files: LogFile[] }>("/api/logs", 60000);
const logFiles = Array.isArray(logsRaw) ? logsRaw : (logsRaw?.files ?? []);
const [selected, setSelected] = useState<string | null>(null);
const [content, setContent] = useState<string>("");
const [loadingContent, setLoadingContent] = useState(false);
const [search, setSearch] = useState("");
useEffect(() => {
if (!selected) {
setContent("");
return;
}
let cancelled = false;
setLoadingContent(true);
fetchAPI<{ lines?: string[]; content?: string } | string>(`/api/logs/${encodeURIComponent(selected)}?tail=200`)
.then((data) => {
if (cancelled) return;
if (typeof data === "string") setContent(data);
else if (Array.isArray((data as Record<string,unknown>).lines)) setContent(((data as Record<string,unknown>).lines as string[]).join("\n"));
else if ((data as Record<string,unknown>).content) setContent(String((data as Record<string,unknown>).content));
else setContent(JSON.stringify(data, null, 2));
})
.catch((err) => {
if (cancelled) return;
setContent(`Error loading log: ${err}`);
})
.finally(() => {
if (!cancelled) setLoadingContent(false);
});
return () => { cancelled = true; };
}, [selected]);
const filteredLines = useMemo(() => {
if (!content) return [];
const lines = content.split("\n");
if (!search.trim()) return lines;
const lower = search.toLowerCase();
return lines.filter(line => line.toLowerCase().includes(lower));
}, [content, search]);
return (
<div className="space-y-6">
<h1 className="text-lg font-semibold">Logs</h1>
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4" style={{ minHeight: "500px" }}>
{/* Left sidebar: log file list */}
<Card className="lg:col-span-1">
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Log Files</CardTitle>
</CardHeader>
<CardContent>
<ScrollArea className="h-[460px]">
{logFiles.length === 0 ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : (
<div className="space-y-1">
{logFiles.map((file) => (
<button
key={file.name}
onClick={() => setSelected(file.name)}
className={cn(
"w-full text-left rounded-md px-2 py-1.5 text-xs transition-colors",
selected === file.name
? "bg-primary/10 text-foreground"
: "text-muted-foreground hover:bg-secondary hover:text-foreground"
)}
>
<p className="font-medium truncate">{file.name}</p>
{(file.size || file.size_bytes != null) && (
<p className="text-[10px] text-muted-foreground">
{file.size ?? (file.size_bytes != null ? `${(file.size_bytes / 1024).toFixed(0)} KB` : "")}
</p>
)}
</button>
))}
</div>
)}
</ScrollArea>
</CardContent>
</Card>
{/* Right: log content viewer */}
<Card className="lg:col-span-3">
<CardHeader className="pb-2 flex flex-row items-center justify-between gap-4">
<CardTitle className="text-sm font-medium">
{selected ?? "Select a log file"}
</CardTitle>
{selected && (
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Filter lines..."
className="rounded-md border border-border bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-primary w-48"
/>
)}
</CardHeader>
<CardContent>
<ScrollArea className="h-[460px]">
{!selected ? (
<p className="text-xs text-muted-foreground py-4 text-center">
Select a log file from the sidebar
</p>
) : loadingContent ? (
<p className="text-xs text-muted-foreground py-4 text-center">
Loading...
</p>
) : (
<pre className="text-[11px] font-mono text-foreground whitespace-pre-wrap break-all leading-relaxed">
{filteredLines.join("\n") || "No matching lines"}
</pre>
)}
</ScrollArea>
</CardContent>
</Card>
</div>
</div>
);
}

188
dashboard/ui/app/media/page.tsx Normal file
View File

@@ -0,0 +1,188 @@
"use client";
import { usePoll } from "@/lib/use-poll";
import { JellyfinCard } from "@/components/jellyfin-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { StatusBadge } from "@/components/status-badge";
interface QueueItem {
title: string;
status: string;
size?: string;
timeleft?: string;
progress?: number;
}
interface SonarrQueueItem {
title: string;
status: string;
sizeleft?: string;
timeleft?: string;
}
interface RadarrQueueItem {
title: string;
status: string;
sizeleft?: string;
timeleft?: string;
}
interface SabQueue {
slots: QueueItem[];
speed: string;
paused: boolean;
}
export default function MediaPage() {
const { data: sonarrRaw } = usePoll<Record<string, unknown>>("/api/sonarr/queue", 30000);
const { data: radarrRaw } = usePoll<Record<string, unknown>>("/api/radarr/queue", 30000);
const { data: sabRaw } = usePoll<Record<string, unknown>>("/api/sabnzbd/queue", 30000);
const sonarr = (sonarrRaw?.records ?? sonarrRaw?.items ?? []) as SonarrQueueItem[];
const radarr = (radarrRaw?.records ?? radarrRaw?.items ?? []) as RadarrQueueItem[];
const sab = sabRaw?.queue as SabQueue | undefined;
return (
<div className="space-y-6">
<h1 className="text-lg font-semibold">Media</h1>
<JellyfinCard />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Sonarr Queue */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Sonarr Queue</CardTitle>
</CardHeader>
<CardContent>
{!sonarr ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : sonarr.length === 0 ? (
<p className="text-xs text-muted-foreground">Queue empty</p>
) : (
<div className="space-y-2">
{sonarr.map((item, i) => (
<div key={i} className="text-xs space-y-0.5">
<p className="text-foreground font-medium truncate">
{item.title}
</p>
<div className="flex items-center gap-2">
<StatusBadge
color={
item.status === "completed"
? "green"
: item.status === "downloading"
? "blue"
: "amber"
}
label={item.status}
/>
{item.timeleft && (
<span className="text-muted-foreground">
{item.timeleft}
</span>
)}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Radarr Queue */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Radarr Queue</CardTitle>
</CardHeader>
<CardContent>
{!radarr ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : radarr.length === 0 ? (
<p className="text-xs text-muted-foreground">Queue empty</p>
) : (
<div className="space-y-2">
{radarr.map((item, i) => (
<div key={i} className="text-xs space-y-0.5">
<p className="text-foreground font-medium truncate">
{item.title}
</p>
<div className="flex items-center gap-2">
<StatusBadge
color={
item.status === "completed"
? "green"
: item.status === "downloading"
? "blue"
: "amber"
}
label={item.status}
/>
{item.timeleft && (
<span className="text-muted-foreground">
{item.timeleft}
</span>
)}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* SABnzbd Queue */}
<Card>
<CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium">
SABnzbd Queue
</CardTitle>
{sab && (
<StatusBadge
color={sab.paused ? "amber" : "green"}
label={sab.paused ? "Paused" : sab.speed}
/>
)}
</CardHeader>
<CardContent>
{!sab ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : sab.slots.length === 0 ? (
<p className="text-xs text-muted-foreground">Queue empty</p>
) : (
<div className="space-y-2">
{sab.slots.map((item, i) => (
<div key={i} className="text-xs space-y-1">
<p className="text-foreground font-medium truncate">
{item.title}
</p>
<div className="flex items-center gap-2">
<StatusBadge
color={
item.status === "Downloading" ? "blue" : "amber"
}
label={item.status}
/>
{item.timeleft && (
<span className="text-muted-foreground">
{item.timeleft}
</span>
)}
</div>
{item.progress != null && (
<div className="h-1 rounded-full bg-secondary overflow-hidden">
<div
className="h-full rounded-full bg-primary"
style={{ width: `${item.progress}%` }}
/>
</div>
)}
</div>
))}
</div>
)}
</CardContent>
</Card>
</div>
</div>
);
}

122
dashboard/ui/app/network/page.tsx Normal file
View File

@@ -0,0 +1,122 @@
"use client";
import { usePoll } from "@/lib/use-poll";
import { StatCard } from "@/components/stat-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { StatusBadge } from "@/components/status-badge";
import { DataTable, Column } from "@/components/data-table";
interface AdGuardStats {
total_queries?: number;
num_dns_queries?: number;
blocked?: number;
num_blocked_filtering?: number;
avg_time?: number;
avg_processing_time?: number;
}
interface HeadscaleNode {
id: string;
name: string;
ip_addresses?: string[];
ip?: string;
online: boolean;
last_seen?: string;
}
interface DnsRewrite {
domain: string;
answer: string;
}
export default function NetworkPage() {
const { data: adguard } = usePoll<AdGuardStats>("/api/network/adguard", 60000);
const { data: nodesRaw } = usePoll<HeadscaleNode[] | { nodes: HeadscaleNode[] }>("/api/network/headscale", 30000);
const { data: rewritesRaw } = usePoll<DnsRewrite[] | { rewrites: DnsRewrite[] }>("/api/network/adguard/rewrites", 120000);
const nodes = Array.isArray(nodesRaw) ? nodesRaw : (nodesRaw?.nodes ?? []);
const rewrites = Array.isArray(rewritesRaw) ? rewritesRaw : (rewritesRaw?.rewrites ?? []);
const rewriteColumns: Column<DnsRewrite>[] = [
{
key: "domain",
label: "Domain",
render: (row) => <span className="font-medium text-foreground">{row.domain}</span>,
},
{ key: "answer", label: "Answer" },
];
return (
<div className="space-y-6">
<h1 className="text-lg font-semibold">Network</h1>
{/* Top row: AdGuard stats */}
<div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-3 lg:gap-4">
<StatCard
label="Total Queries"
value={(() => { const v = adguard?.total_queries ?? adguard?.num_dns_queries; return v != null ? v.toLocaleString() : "\u2014"; })()}
sub="DNS queries"
/>
<StatCard
label="Blocked"
value={(() => { const v = adguard?.blocked ?? adguard?.num_blocked_filtering; return v != null ? v.toLocaleString() : "\u2014"; })()}
sub="blocked by filters"
/>
<StatCard
label="Avg Response"
value={(() => { const v = adguard?.avg_time ?? adguard?.avg_processing_time; return v != null ? `${(v * 1000).toFixed(1)}ms` : "\u2014"; })()}
sub="processing time"
/>
</div>
{/* Middle: Headscale nodes grid */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Headscale Nodes</CardTitle>
</CardHeader>
<CardContent>
{nodes.length === 0 ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : (
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
{nodes.map((node) => (
<Card key={node.id} className="overflow-hidden">
<CardContent className="pt-3 pb-3 px-4">
<div className="flex items-center gap-2 mb-1">
<span className={`w-2 h-2 rounded-full shrink-0 ${node.online ? "bg-green-500 glow-green" : "bg-red-500 glow-red"}`} />
<span className="text-sm font-medium text-foreground truncate">{node.name}</span>
</div>
<p className="text-[10px] text-muted-foreground font-mono">
{node.ip_addresses?.[0] ?? node.ip ?? "—"}
</p>
{node.last_seen && (
<p className="text-[10px] text-muted-foreground mt-0.5">
{new Date(node.last_seen).toLocaleString("en-US", {
month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
})}
</p>
)}
</CardContent>
</Card>
))}
</div>
)}
</CardContent>
</Card>
{/* Bottom: DNS rewrites table */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">DNS Rewrites</CardTitle>
</CardHeader>
<CardContent>
<DataTable<DnsRewrite>
data={rewrites}
columns={rewriteColumns}
searchKey="domain"
/>
</CardContent>
</Card>
</div>
);
}

113
dashboard/ui/app/page.tsx Normal file
View File

@@ -0,0 +1,113 @@
"use client";
import { usePoll } from "@/lib/use-poll";
import type { OverviewStats } from "@/lib/types";
import { StatCard } from "@/components/stat-card";
import { ActivityFeed } from "@/components/activity-feed";
import { JellyfinCard } from "@/components/jellyfin-card";
import { OllamaCard } from "@/components/ollama-card";
import { HostCard } from "@/components/host-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
function SectionHeading({ children }: { children: React.ReactNode }) {
return (
<div className="flex items-center gap-3">
<h2 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
{children}
</h2>
<div className="flex-1 h-px bg-gradient-to-r from-border to-transparent" />
</div>
);
}
export default function DashboardPage() {
const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
// Handle both API field name variants
const endpoints = data?.containers?.endpoints || data?.containers?.by_endpoint || {};
const rawEmail = data?.emails_today ?? data?.email_today ?? 0;
const emailCount = typeof rawEmail === "object" && rawEmail !== null ? (rawEmail as Record<string, number>).total ?? 0 : rawEmail;
const alertCount = data?.alerts ?? data?.unhealthy_count ?? 0;
const running = data?.containers?.running ?? Object.values(endpoints).reduce((s, e) => s + (e.running || 0), 0);
const hostsOnline = data?.hosts_online ?? Object.values(endpoints).filter(e => !e.error).length;
return (
<div className="space-y-6">
{/* Row 1: Stat Cards */}
<SectionHeading>Overview</SectionHeading>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-4">
<StatCard
label="Containers"
value={data ? `${running}/${data.containers.total}` : "\u2014"}
sub={data ? "running / total" : undefined}
/>
<StatCard
label="Hosts Online"
value={data ? hostsOnline : "\u2014"}
sub="endpoints"
/>
<StatCard
label="GPU"
value={
data?.gpu?.available
? `${data.gpu.utilization_pct ?? 0}%`
: "\u2014"
}
sub={data?.gpu?.name ?? "unavailable"}
/>
<StatCard
label="Emails Today"
value={data ? emailCount : "\u2014"}
sub="processed"
/>
<StatCard
label="Alerts"
value={data ? alertCount : "\u2014"}
sub="active"
/>
</div>
{/* Row 2: Activity + Jellyfin + Ollama */}
<SectionHeading>Live</SectionHeading>
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
<ActivityFeed />
<JellyfinCard />
<OllamaCard />
</div>
{/* Row 3: Hosts */}
<SectionHeading>Infrastructure</SectionHeading>
<Card className="overflow-hidden relative">
<div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-emerald-500 to-cyan-500" />
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Hosts</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
{data
? Object.entries(endpoints).map(
([name, info]) => (
<HostCard
key={name}
name={name}
running={info.running}
total={info.total}
error={info.error}
/>
)
)
: Array.from({ length: 5 }).map((_, i) => (
<Card key={i}>
<CardContent className="pt-3 pb-3 px-4">
<p className="text-xs text-muted-foreground">
Loading...
</p>
</CardContent>
</Card>
))}
</div>
</CardContent>
</Card>
</div>
);
}