Sanitized mirror from private repository - 2026-04-05 08:31:50 UTC
This commit is contained in:
Gitea Mirror Bot
41
dashboard/ui/.gitignore
vendored
Normal file
41
dashboard/ui/.gitignore
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
5
dashboard/ui/AGENTS.md
Normal file
5
dashboard/ui/AGENTS.md
Normal file
@@ -0,0 +1,5 @@
|
||||
<!-- BEGIN:nextjs-agent-rules -->
|
||||
# This is NOT the Next.js you know
|
||||
|
||||
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
|
||||
<!-- END:nextjs-agent-rules -->
|
||||
1
dashboard/ui/CLAUDE.md
Normal file
1
dashboard/ui/CLAUDE.md
Normal file
@@ -0,0 +1 @@
|
||||
@AGENTS.md
|
||||
15
dashboard/ui/Dockerfile
Normal file
15
dashboard/ui/Dockerfile
Normal file
@@ -0,0 +1,15 @@
|
||||
FROM node:22-alpine AS builder
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM node:22-alpine AS runner
|
||||
WORKDIR /app
|
||||
ENV NODE_ENV=production
|
||||
COPY --from=builder /app/.next/standalone ./
|
||||
COPY --from=builder /app/.next/static ./.next/static
|
||||
COPY --from=builder /app/public ./public
|
||||
EXPOSE 3000
|
||||
CMD ["node", "server.js"]
|
||||
36
dashboard/ui/README.md
Normal file
36
dashboard/ui/README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
181
dashboard/ui/app/automations/page.tsx
Normal file
181
dashboard/ui/app/automations/page.tsx
Normal 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-8">
|
||||
<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 rounded-lg px-3 py-2 hover:bg-white/[0.02] transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">{name}</span>
|
||||
<span className="text-xs text-muted-foreground/70">{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] bg-white/[0.04] border border-white/[0.06]">
|
||||
{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-5">
|
||||
<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/60">
|
||||
{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/60">
|
||||
{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/60">
|
||||
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/70">
|
||||
{new Date(r.timestamp).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
150
dashboard/ui/app/expenses/page.tsx
Normal file
150
dashboard/ui/app/expenses/page.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
"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 {
|
||||
date: string;
|
||||
vendor: string;
|
||||
amount: string | number;
|
||||
currency?: string;
|
||||
order_number?: string;
|
||||
email_account?: string;
|
||||
message_id?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
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">
|
||||
${Number(row.amount || 0).toFixed(2)} {row.currency ?? ""}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ key: "order_number", label: "Order #" },
|
||||
{
|
||||
key: "email_account",
|
||||
label: "Account",
|
||||
render: (row) => (
|
||||
<span className="text-muted-foreground truncate max-w-[120px] block text-[10px]">
|
||||
{String(row.email_account ?? "")}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const accounts = transactions
|
||||
? [...new Set(transactions.map((t) => String(t.email_account ?? "")).filter(Boolean))]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<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-5">
|
||||
<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-3">
|
||||
{summary.top_vendors.map((v) => (
|
||||
<div key={v.vendor} className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-foreground">{v.vendor}</span>
|
||||
<span className="text-muted-foreground/70">
|
||||
${v.amount.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2">
|
||||
<div
|
||||
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-700"
|
||||
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="email_account"
|
||||
filterOptions={accounts}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
BIN
dashboard/ui/app/favicon.ico
Normal file
BIN
dashboard/ui/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
302
dashboard/ui/app/globals.css
Normal file
302
dashboard/ui/app/globals.css
Normal file
@@ -0,0 +1,302 @@
|
||||
@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(230 25% 5%);
|
||||
--foreground: hsl(210 40% 96%);
|
||||
--card: hsla(220, 30%, 8%, 0.4);
|
||||
--card-foreground: hsl(210 40% 96%);
|
||||
--popover: hsla(220, 30%, 8%, 0.8);
|
||||
--popover-foreground: hsl(210 40% 96%);
|
||||
--primary: hsl(217 91% 60%);
|
||||
--primary-foreground: hsl(210 40% 96%);
|
||||
--secondary: hsla(217, 33%, 12%, 0.5);
|
||||
--secondary-foreground: hsl(210 40% 96%);
|
||||
--muted: hsla(217, 33%, 12%, 0.5);
|
||||
--muted-foreground: hsl(215 20% 55%);
|
||||
--accent: hsla(217, 33%, 12%, 0.5);
|
||||
--accent-foreground: hsl(210 40% 96%);
|
||||
--destructive: hsl(0 84% 60%);
|
||||
--border: hsla(0, 0%, 100%, 0.06);
|
||||
--input: hsla(0, 0%, 100%, 0.06);
|
||||
--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: hsla(220, 30%, 6%, 0.6);
|
||||
--sidebar-foreground: hsl(210 40% 96%);
|
||||
--sidebar-primary: hsl(217 91% 60%);
|
||||
--sidebar-primary-foreground: hsl(210 40% 96%);
|
||||
--sidebar-accent: hsla(217, 33%, 12%, 0.5);
|
||||
--sidebar-accent-foreground: hsl(210 40% 96%);
|
||||
--sidebar-border: hsla(0, 0%, 100%, 0.06);
|
||||
--sidebar-ring: hsl(217 91% 60%);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Glassmorphism Background --- */
|
||||
body {
|
||||
background: linear-gradient(135deg, #0a0a1a 0%, #0d1117 40%, #0a0e1a 100%);
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Subtle radial glow in the center */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background: radial-gradient(ellipse 60% 50% at 50% 30%, hsla(230, 60%, 25%, 0.15) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 40% 40% at 70% 60%, hsla(260, 50%, 20%, 0.1) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* --- Glass Utility --- */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
/* --- Override shadcn Card for glassmorphism --- */
|
||||
[data-slot="card"] {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
ring: none !important;
|
||||
--tw-ring-shadow: none !important;
|
||||
--tw-ring-color: transparent !important;
|
||||
animation: fade-up 0.5s ease-out both;
|
||||
}
|
||||
|
||||
/* Stagger card animations */
|
||||
[data-slot="card"]:nth-child(1) { animation-delay: 0ms; }
|
||||
[data-slot="card"]:nth-child(2) { animation-delay: 60ms; }
|
||||
[data-slot="card"]:nth-child(3) { animation-delay: 120ms; }
|
||||
[data-slot="card"]:nth-child(4) { animation-delay: 180ms; }
|
||||
[data-slot="card"]:nth-child(5) { animation-delay: 240ms; }
|
||||
[data-slot="card"]:nth-child(6) { animation-delay: 300ms; }
|
||||
|
||||
/* --- Animations --- */
|
||||
|
||||
/* Card entrance */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-up {
|
||||
animation: fade-up 0.5s ease-out both;
|
||||
}
|
||||
|
||||
/* Status dot glow */
|
||||
.glow-green { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.4); }
|
||||
.glow-red { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4); }
|
||||
.glow-amber { box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.4); }
|
||||
.glow-blue { box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.4); }
|
||||
.glow-purple { box-shadow: 0 0 8px 2px rgba(168, 85, 247, 0.4); }
|
||||
|
||||
/* LIVE badge pulse */
|
||||
@keyframes live-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.animate-live-pulse {
|
||||
animation: live-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Slide-in 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;
|
||||
}
|
||||
|
||||
/* Logo float animation */
|
||||
@keyframes logo-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-2px); }
|
||||
}
|
||||
.animate-logo-float {
|
||||
animation: logo-float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Logo shimmer */
|
||||
@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/progress bar glow */
|
||||
@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 - softer for glass */
|
||||
.card-hover-lift {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
.card-hover-lift:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(59, 130, 246, 0.04);
|
||||
}
|
||||
|
||||
/* Active nav glow */
|
||||
.nav-active-glow {
|
||||
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* --- Gauge Ring (SVG-based circular progress) --- */
|
||||
.gauge-track {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.gauge-fill {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 1s ease-out;
|
||||
}
|
||||
|
||||
/* Number glow for big stat values */
|
||||
.stat-glow {
|
||||
text-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
/* Glass input fields */
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
.glass-input:focus {
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Glass table rows */
|
||||
.glass-table-header {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.glass-table-row {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.glass-table-row:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* Glass progress bar track */
|
||||
.glass-bar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Glass bar fill glow */
|
||||
.glass-bar-fill {
|
||||
border-radius: 999px;
|
||||
position: relative;
|
||||
}
|
||||
.glass-bar-fill::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
|
||||
animation: bar-shimmer 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes bar-shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
224
dashboard/ui/app/infrastructure/page.tsx
Normal file
224
dashboard/ui/app/infrastructure/page.tsx
Normal 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-8">
|
||||
<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 border-white/[0.08] hover:bg-white/[0.06]"
|
||||
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 border-white/[0.08] hover:bg-white/[0.06]"
|
||||
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-6">
|
||||
<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-4">
|
||||
{!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.5">
|
||||
<span>VRAM</span>
|
||||
<span>
|
||||
{(gpu.vram_used_mb / 1024).toFixed(1)} /{" "}
|
||||
{(gpu.vram_total_mb / 1024).toFixed(1)} GB
|
||||
</span>
|
||||
</div>
|
||||
<div className="glass-bar-track h-3">
|
||||
<div
|
||||
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-700"
|
||||
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/70">Temperature</p>
|
||||
<p className="text-foreground text-lg font-semibold stat-glow">
|
||||
{gpu.temp_c ?? "\u2014"}°C
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground/70">Power</p>
|
||||
<p className="text-foreground text-lg font-semibold stat-glow">
|
||||
{gpu.power_w ?? "\u2014"}W
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-muted-foreground/70">Utilization</p>
|
||||
<p className="text-foreground text-lg font-semibold stat-glow">
|
||||
{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
43
dashboard/ui/app/layout.tsx
Normal 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
137
dashboard/ui/app/logs/page.tsx
Normal 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-8">
|
||||
<h1 className="text-lg font-semibold">Logs</h1>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-5" 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-lg px-3 py-2 text-xs transition-all duration-200",
|
||||
selected === file.name
|
||||
? "bg-white/[0.06] text-foreground"
|
||||
: "text-muted-foreground hover:bg-white/[0.03] hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<p className="font-medium truncate">{file.name}</p>
|
||||
{(file.size || file.size_bytes != null) && (
|
||||
<p className="text-[10px] text-muted-foreground/60">
|
||||
{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-lg glass-input px-3 py-1.5 text-xs w-48"
|
||||
/>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[460px]">
|
||||
{!selected ? (
|
||||
<p className="text-xs text-muted-foreground/60 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>
|
||||
);
|
||||
}
|
||||
388
dashboard/ui/app/media/page.tsx
Normal file
388
dashboard/ui/app/media/page.tsx
Normal file
@@ -0,0 +1,388 @@
|
||||
"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;
|
||||
}
|
||||
|
||||
interface ProwlarrIndexer {
|
||||
name: string;
|
||||
protocol: string;
|
||||
}
|
||||
|
||||
interface ProwlarrStats {
|
||||
total: number;
|
||||
enabled: number;
|
||||
indexers: ProwlarrIndexer[];
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface BazarrStatus {
|
||||
version?: string;
|
||||
sonarr_signalr?: string;
|
||||
radarr_signalr?: string;
|
||||
wanted_episodes?: number;
|
||||
wanted_movies?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface ABSLibrary {
|
||||
name: string;
|
||||
type: string;
|
||||
items: number;
|
||||
}
|
||||
|
||||
interface ABSStats {
|
||||
libraries: ABSLibrary[];
|
||||
total: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface DelugeStatus {
|
||||
available: boolean;
|
||||
total?: number;
|
||||
active?: number;
|
||||
downloading?: number;
|
||||
seeding?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
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 { data: prowlarr } = usePoll<ProwlarrStats>("/api/prowlarr/stats", 60000);
|
||||
const { data: bazarr } = usePoll<BazarrStatus>("/api/bazarr/status", 60000);
|
||||
const { data: abs } = usePoll<ABSStats>("/api/audiobookshelf/stats", 60000);
|
||||
const { data: deluge } = usePoll<DelugeStatus>("/api/deluge/status", 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-8">
|
||||
<h1 className="text-lg font-semibold">Media</h1>
|
||||
|
||||
<JellyfinCard />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{/* 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/60">Queue empty</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sonarr.map((item, i) => (
|
||||
<div key={i} className="text-xs space-y-0.5 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<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/70">
|
||||
{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/60">Queue empty</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{radarr.map((item, i) => (
|
||||
<div key={i} className="text-xs space-y-0.5 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<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/70">
|
||||
{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/60">Queue empty</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sab.slots.map((item, i) => (
|
||||
<div key={i} className="text-xs space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<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/70">
|
||||
{item.timeleft}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{item.progress != null && (
|
||||
<div className="glass-bar-track h-1">
|
||||
<div
|
||||
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-cyan-400"
|
||||
style={{ width: `${item.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Arr Suite Services */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
{/* Prowlarr */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium">Prowlarr</CardTitle>
|
||||
{prowlarr && !prowlarr.error && (
|
||||
<StatusBadge color="green" label={`${prowlarr.enabled} active`} />
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!prowlarr ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : prowlarr.error ? (
|
||||
<p className="text-xs text-red-400">{prowlarr.error}</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs text-muted-foreground/70">
|
||||
{prowlarr.enabled}/{prowlarr.total} indexers enabled
|
||||
</p>
|
||||
{prowlarr.indexers.map((idx, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-xs">
|
||||
<span className="text-foreground truncate">{idx.name}</span>
|
||||
<span className="text-muted-foreground/60 ml-2 shrink-0">
|
||||
{idx.protocol}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Bazarr */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium">Bazarr</CardTitle>
|
||||
{bazarr && !bazarr.error && (
|
||||
<StatusBadge color="green" label={bazarr.version} />
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!bazarr ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : bazarr.error ? (
|
||||
<p className="text-xs text-red-400">{bazarr.error}</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground/70">Wanted episodes</span>
|
||||
<span className="text-foreground font-medium">
|
||||
{bazarr.wanted_episodes}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground/70">Wanted movies</span>
|
||||
<span className="text-foreground font-medium">
|
||||
{bazarr.wanted_movies}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-muted-foreground/70">Sonarr SignalR</span>
|
||||
<StatusBadge
|
||||
color={bazarr.sonarr_signalr === "LIVE" ? "green" : "red"}
|
||||
label={String(bazarr.sonarr_signalr)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-muted-foreground/70">Radarr SignalR</span>
|
||||
<StatusBadge
|
||||
color={bazarr.radarr_signalr === "LIVE" ? "green" : "red"}
|
||||
label={String(bazarr.radarr_signalr)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Audiobookshelf */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium">Audiobookshelf</CardTitle>
|
||||
{abs && !abs.error && (
|
||||
<StatusBadge color="green" label={`${abs.total} items`} />
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!abs ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : abs.error ? (
|
||||
<p className="text-xs text-red-400">{abs.error}</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{abs.libraries.map((lib, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-xs">
|
||||
<span className="text-foreground">{lib.name}</span>
|
||||
<span className="text-muted-foreground/70">
|
||||
{lib.items} {lib.type}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Deluge */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium">Deluge</CardTitle>
|
||||
{deluge && (
|
||||
<StatusBadge
|
||||
color={deluge.available ? "green" : "red"}
|
||||
label={deluge.available ? "Online" : "Offline"}
|
||||
/>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!deluge ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : !deluge.available ? (
|
||||
<p className="text-xs text-red-400">
|
||||
{deluge.error ?? "Unreachable"}
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground/70">Total</span>
|
||||
<span className="text-foreground font-medium">
|
||||
{deluge.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground/70">Downloading</span>
|
||||
<StatusBadge
|
||||
color={deluge.downloading ? "blue" : "green"}
|
||||
label={String(deluge.downloading)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground/70">Seeding</span>
|
||||
<StatusBadge
|
||||
color={deluge.seeding ? "purple" : "green"}
|
||||
label={String(deluge.seeding)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
122
dashboard/ui/app/network/page.tsx
Normal file
122
dashboard/ui/app/network/page.tsx
Normal 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-8">
|
||||
<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-5">
|
||||
<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-4">
|
||||
{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/70 font-mono">
|
||||
{node.ip_addresses?.[0] ?? node.ip ?? "\u2014"}
|
||||
</p>
|
||||
{node.last_seen && (
|
||||
<p className="text-[10px] text-muted-foreground/60 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>
|
||||
);
|
||||
}
|
||||
114
dashboard/ui/app/page.tsx
Normal file
114
dashboard/ui/app/page.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"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/70">
|
||||
{children}
|
||||
</h2>
|
||||
<div className="flex-1 h-px bg-gradient-to-r from-white/[0.06] 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;
|
||||
const gpuPct = data?.gpu?.utilization_pct;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Row 1: Stat Cards */}
|
||||
<SectionHeading>Overview</SectionHeading>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-5">
|
||||
<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
|
||||
? `${gpuPct ?? 0}%`
|
||||
: "\u2014"
|
||||
}
|
||||
sub={data?.gpu?.name ?? "unavailable"}
|
||||
pct={data?.gpu?.available ? gpuPct : undefined}
|
||||
/>
|
||||
<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-5">
|
||||
<ActivityFeed />
|
||||
<JellyfinCard />
|
||||
<OllamaCard />
|
||||
</div>
|
||||
|
||||
{/* Row 3: Hosts */}
|
||||
<SectionHeading>Infrastructure</SectionHeading>
|
||||
<Card className="overflow-hidden relative">
|
||||
<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-4">
|
||||
{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>
|
||||
);
|
||||
}
|
||||
25
dashboard/ui/components.json
Normal file
25
dashboard/ui/components.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "base-nova",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
82
dashboard/ui/components/activity-feed.tsx
Normal file
82
dashboard/ui/components/activity-feed.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { useSSE } from "@/lib/use-sse";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import type { ActivityEvent } from "@/lib/types";
|
||||
|
||||
const typeColors: Record<string, string> = {
|
||||
stack_healthy: "bg-green-500 glow-green",
|
||||
backup_result: "bg-green-500 glow-green",
|
||||
email_classified: "bg-blue-500 glow-blue",
|
||||
receipt_extracted: "bg-amber-500 glow-amber",
|
||||
container_unhealthy: "bg-red-500 glow-red",
|
||||
};
|
||||
|
||||
function formatTime(ts: string) {
|
||||
try {
|
||||
return new Date(ts).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
function eventMessage(event: ActivityEvent): string {
|
||||
if (event.raw) return event.raw;
|
||||
return `${event.type} from ${event.source}`;
|
||||
}
|
||||
|
||||
export function ActivityFeed() {
|
||||
const events = useSSE("/api/activity");
|
||||
|
||||
return (
|
||||
<Card className="col-span-full lg:col-span-3 overflow-hidden relative">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-sm font-medium">Activity Feed</CardTitle>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] border-green-500/30 text-green-400 animate-live-pulse bg-green-500/5"
|
||||
>
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-green-400 mr-1.5 glow-green" />
|
||||
LIVE
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[220px]">
|
||||
{events.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground py-4 text-center">
|
||||
Waiting for events...
|
||||
</p>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
{events.map((event, i) => (
|
||||
<div
|
||||
key={`${event.timestamp}-${i}`}
|
||||
className="flex items-start gap-3 text-xs animate-slide-in rounded-lg px-2 py-1.5 transition-colors hover:bg-white/[0.03]"
|
||||
style={{ animationDelay: `${i * 30}ms` }}
|
||||
>
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full mt-0.5 shrink-0 ${
|
||||
typeColors[event.type] ?? "bg-gray-500"
|
||||
}`}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-foreground truncate">
|
||||
{eventMessage(event)}
|
||||
</p>
|
||||
<p className="text-muted-foreground/70">
|
||||
{formatTime(event.timestamp)} · {event.source}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
63
dashboard/ui/components/container-logs-modal.tsx
Normal file
63
dashboard/ui/components/container-logs-modal.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { fetchAPI } from "@/lib/api";
|
||||
|
||||
interface ContainerLogsModalProps {
|
||||
containerId: string | null;
|
||||
containerName: string;
|
||||
endpoint: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ContainerLogsModal({
|
||||
containerId,
|
||||
containerName,
|
||||
endpoint,
|
||||
onClose,
|
||||
}: ContainerLogsModalProps) {
|
||||
const [logs, setLogs] = useState<string>("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerId) return;
|
||||
setLoading(true);
|
||||
setLogs("");
|
||||
fetchAPI<{ logs: string }>(
|
||||
`/api/containers/${endpoint}/${containerId}/logs`
|
||||
)
|
||||
.then((data) => setLogs(data.logs))
|
||||
.catch((err) => setLogs(`Error fetching logs: ${err.message}`))
|
||||
.finally(() => setLoading(false));
|
||||
}, [containerId, endpoint]);
|
||||
|
||||
return (
|
||||
<Dialog open={!!containerId} onOpenChange={() => onClose()}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-sm">
|
||||
Logs: {containerName}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<ScrollArea className="h-[400px] mt-2">
|
||||
{loading ? (
|
||||
<p className="text-xs text-muted-foreground p-4">
|
||||
Loading logs...
|
||||
</p>
|
||||
) : (
|
||||
<pre className="text-[11px] font-mono text-foreground whitespace-pre-wrap p-2 leading-relaxed">
|
||||
{logs || "No logs available"}
|
||||
</pre>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
126
dashboard/ui/components/data-table.tsx
Normal file
126
dashboard/ui/components/data-table.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
export interface Column<T> {
|
||||
key: string;
|
||||
label: string;
|
||||
render?: (row: T) => React.ReactNode;
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
data: T[];
|
||||
columns: Column<T>[];
|
||||
searchKey?: string;
|
||||
filterKey?: string;
|
||||
filterOptions?: string[];
|
||||
actions?: (row: T) => React.ReactNode;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export function DataTable<T extends Record<string, any>>({
|
||||
data,
|
||||
columns,
|
||||
searchKey,
|
||||
filterKey,
|
||||
filterOptions,
|
||||
actions,
|
||||
}: DataTableProps<T>) {
|
||||
const [search, setSearch] = useState("");
|
||||
const [filter, setFilter] = useState("all");
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
let rows = data;
|
||||
if (search && searchKey) {
|
||||
const q = search.toLowerCase();
|
||||
rows = rows.filter((r) =>
|
||||
String(r[searchKey] ?? "")
|
||||
.toLowerCase()
|
||||
.includes(q)
|
||||
);
|
||||
}
|
||||
if (filter !== "all" && filterKey) {
|
||||
rows = rows.filter((r) => String(r[filterKey]) === filter);
|
||||
}
|
||||
return rows;
|
||||
}, [data, search, searchKey, filter, filterKey]);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
{searchKey && (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="h-8 rounded-lg glass-input px-3 text-xs text-foreground placeholder:text-muted-foreground/50 w-64"
|
||||
/>
|
||||
)}
|
||||
{filterKey && filterOptions && (
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
className="h-8 rounded-lg glass-input px-2 text-xs text-foreground"
|
||||
>
|
||||
<option value="all">All</option>
|
||||
{filterOptions.map((opt) => (
|
||||
<option key={opt} value={opt}>
|
||||
{opt}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-xl border border-white/[0.06] overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="glass-table-header border-b border-white/[0.06]">
|
||||
{columns.map((col) => (
|
||||
<TableHead key={col.key} className="text-xs text-muted-foreground/80">
|
||||
{col.label}
|
||||
</TableHead>
|
||||
))}
|
||||
{actions && <TableHead className="text-xs text-muted-foreground/80 w-24">Actions</TableHead>}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length + (actions ? 1 : 0)}
|
||||
className="text-center text-xs text-muted-foreground py-6"
|
||||
>
|
||||
No results
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filtered.map((row, i) => (
|
||||
<TableRow key={i} className="glass-table-row border-b border-white/[0.04]">
|
||||
{columns.map((col) => (
|
||||
<TableCell key={col.key} className="text-xs">
|
||||
{col.render
|
||||
? col.render(row)
|
||||
: String(row[col.key] ?? "")}
|
||||
</TableCell>
|
||||
))}
|
||||
{actions && (
|
||||
<TableCell className="text-xs">{actions(row)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
dashboard/ui/components/host-card.tsx
Normal file
58
dashboard/ui/components/host-card.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { StatusBadge } from "./status-badge";
|
||||
|
||||
const hostDescriptions: Record<string, string> = {
|
||||
atlantis: "NAS \u00b7 media stack",
|
||||
calypso: "DNS \u00b7 SSO \u00b7 Headscale",
|
||||
olares: "K3s \u00b7 RTX 5090",
|
||||
nuc: "lightweight svcs",
|
||||
rpi5: "Uptime Kuma",
|
||||
};
|
||||
|
||||
interface HostCardProps {
|
||||
name: string;
|
||||
running: number;
|
||||
total: number;
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
export function HostCard({ name, running, total, error }: HostCardProps) {
|
||||
const statusColor = error ? "red" : running > 0 ? "green" : "amber";
|
||||
const hoverBorder = error
|
||||
? "hover:border-red-500/20"
|
||||
: running > 0
|
||||
? "hover:border-green-500/20"
|
||||
: "hover:border-amber-500/20";
|
||||
|
||||
const hoverGlow = error
|
||||
? "hover:shadow-[0_0_30px_rgba(239,68,68,0.06)]"
|
||||
: running > 0
|
||||
? "hover:shadow-[0_0_30px_rgba(34,197,94,0.06)]"
|
||||
: "hover:shadow-[0_0_30px_rgba(245,158,11,0.06)]";
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={`card-hover-lift transition-all duration-300 ${hoverBorder} ${hoverGlow} overflow-hidden relative group`}
|
||||
>
|
||||
<CardContent className="pt-3 pb-3 px-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-sm font-medium text-foreground capitalize">
|
||||
{name}
|
||||
</span>
|
||||
<StatusBadge
|
||||
color={statusColor}
|
||||
label={error ? "error" : "online"}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{running}/{total} containers
|
||||
</p>
|
||||
{hostDescriptions[name] && (
|
||||
<p className="text-[10px] text-muted-foreground/60 mt-0.5">
|
||||
{hostDescriptions[name]}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
70
dashboard/ui/components/jellyfin-card.tsx
Normal file
70
dashboard/ui/components/jellyfin-card.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import type { JellyfinStatus } from "@/lib/types";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { StatusBadge } from "./status-badge";
|
||||
|
||||
export function JellyfinCard() {
|
||||
const { data } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium">Jellyfin</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!data ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground/70 mb-1.5">
|
||||
Now Playing
|
||||
</p>
|
||||
{data.active_sessions.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{data.active_sessions.map((s, i) => (
|
||||
<div key={i} className="text-xs rounded-lg bg-white/[0.03] px-3 py-2">
|
||||
<p className="text-foreground font-medium">{s.title}</p>
|
||||
<p className="text-muted-foreground/70">
|
||||
{s.user} · {s.device}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground/60">
|
||||
No active streams
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-px bg-white/[0.06]" />
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground/70 mb-1.5">
|
||||
Libraries
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{data.libraries.map((lib) => (
|
||||
<div
|
||||
key={lib.name}
|
||||
className="flex items-center justify-between text-xs"
|
||||
>
|
||||
<span className="text-foreground">{lib.name}</span>
|
||||
<StatusBadge color="green" label={lib.type} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{data.idle_sessions > 0 && (
|
||||
<p className="text-[10px] text-muted-foreground/60">
|
||||
{data.idle_sessions} idle session
|
||||
{data.idle_sessions > 1 ? "s" : ""}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
29
dashboard/ui/components/keyboard-shortcuts.tsx
Normal file
29
dashboard/ui/components/keyboard-shortcuts.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export function KeyboardShortcuts() {
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
function handler(e: KeyboardEvent) {
|
||||
// Don't trigger when typing in inputs
|
||||
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
|
||||
|
||||
switch (e.key) {
|
||||
case "1": router.push("/"); break;
|
||||
case "2": router.push("/infrastructure"); break;
|
||||
case "3": router.push("/media"); break;
|
||||
case "4": router.push("/automations"); break;
|
||||
case "5": router.push("/expenses"); break;
|
||||
case "6": router.push("/network"); break;
|
||||
case "7": router.push("/logs"); break;
|
||||
case "r": window.location.reload(); break;
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, [router]);
|
||||
|
||||
return null;
|
||||
}
|
||||
68
dashboard/ui/components/nav.tsx
Normal file
68
dashboard/ui/components/nav.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { RefreshIndicator } from "@/components/refresh-indicator";
|
||||
|
||||
const tabs = [
|
||||
{ href: "/", label: "Dashboard", key: "1" },
|
||||
{ href: "/infrastructure", label: "Infrastructure", key: "2" },
|
||||
{ href: "/media", label: "Media", key: "3" },
|
||||
{ href: "/automations", label: "Automations", key: "4" },
|
||||
{ href: "/expenses", label: "Expenses", key: "5" },
|
||||
{ href: "/network", label: "Network", key: "6" },
|
||||
{ href: "/logs", label: "Logs", key: "7" },
|
||||
];
|
||||
|
||||
export function Nav() {
|
||||
const pathname = usePathname();
|
||||
const today = new Date().toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 border-b border-white/[0.05] bg-white/[0.02] backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between px-6 h-14">
|
||||
<div className="flex items-center gap-6">
|
||||
<Link href="/" className="flex items-center gap-2 group">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 via-violet-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm animate-logo-float shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow">
|
||||
H
|
||||
</div>
|
||||
<span className="font-semibold text-foreground hidden sm:inline">Homelab</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1">
|
||||
{tabs.map((tab) => {
|
||||
const isActive =
|
||||
tab.href === "/"
|
||||
? pathname === "/"
|
||||
: pathname.startsWith(tab.href);
|
||||
return (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
className={cn(
|
||||
"px-3 py-1.5 text-xs lg:text-sm rounded-lg transition-all duration-200 relative whitespace-nowrap",
|
||||
isActive
|
||||
? "text-foreground bg-white/[0.06] backdrop-blur-sm"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-white/[0.04]"
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
<span className="ml-0.5 text-[8px] text-muted-foreground/40 hidden lg:inline">{tab.key}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground/70 hidden md:inline">{today}</span>
|
||||
<RefreshIndicator />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
116
dashboard/ui/components/ollama-card.tsx
Normal file
116
dashboard/ui/components/ollama-card.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import type { OverviewStats } from "@/lib/types";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { StatusBadge } from "./status-badge";
|
||||
|
||||
function tempColor(temp: number): string {
|
||||
if (temp < 50) return "#22c55e";
|
||||
if (temp < 70) return "#f59e0b";
|
||||
return "#ef4444";
|
||||
}
|
||||
|
||||
function vramGradient(pct: number): string {
|
||||
if (pct < 50) return "from-blue-500 to-cyan-400";
|
||||
if (pct < 80) return "from-blue-500 via-violet-500 to-purple-400";
|
||||
return "from-violet-500 via-pink-500 to-red-400";
|
||||
}
|
||||
|
||||
function MiniRing({ pct, color, size = 48, stroke = 4, children }: { pct: number; color: string; size?: number; stroke?: number; children?: React.ReactNode }) {
|
||||
const radius = (size - stroke) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (pct / 100) * circumference;
|
||||
|
||||
return (
|
||||
<div className="relative" style={{ width: size, height: size }}>
|
||||
<svg width={size} height={size} className="absolute inset-0 -rotate-90">
|
||||
<circle className="gauge-track" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} />
|
||||
<circle className="gauge-fill" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} stroke={color} strokeDasharray={circumference} strokeDashoffset={offset} />
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function OllamaCard() {
|
||||
const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
|
||||
const gpu = data?.gpu;
|
||||
const ollamaUp = data?.ollama?.available ?? data?.ollama_available ?? false;
|
||||
const vramUsed = gpu?.vram_used_mb ?? gpu?.memory_used_mb;
|
||||
const vramTotal = gpu?.vram_total_mb ?? gpu?.memory_total_mb;
|
||||
const power = gpu?.power_w ?? gpu?.power_draw_w;
|
||||
const vramPct =
|
||||
vramUsed != null && vramTotal != null ? (vramUsed / vramTotal) * 100 : 0;
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden relative">
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium">LLM / GPU</CardTitle>
|
||||
{data && (
|
||||
<StatusBadge
|
||||
color={ollamaUp ? "green" : "red"}
|
||||
label={ollamaUp ? "Online" : "Offline"}
|
||||
/>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!data ? (
|
||||
<p className="text-xs text-muted-foreground">Loading...</p>
|
||||
) : gpu?.available ? (
|
||||
<>
|
||||
{gpu.name && (
|
||||
<p className="text-xs text-foreground/80 font-medium">{gpu.name}</p>
|
||||
)}
|
||||
{/* VRAM bar */}
|
||||
{vramUsed != null && vramTotal != null && (
|
||||
<div>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mb-1.5">
|
||||
<span>VRAM</span>
|
||||
<span>
|
||||
{(vramUsed / 1024).toFixed(1)} / {(vramTotal / 1024).toFixed(1)} GB
|
||||
</span>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2.5">
|
||||
<div
|
||||
className={`h-full glass-bar-fill bg-gradient-to-r ${vramGradient(vramPct)} animate-bar-glow transition-all duration-700`}
|
||||
style={{ width: `${vramPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Temperature ring + Power text */}
|
||||
<div className="flex items-center gap-4">
|
||||
{gpu.temp_c != null && (
|
||||
<div className="flex items-center gap-2">
|
||||
<MiniRing pct={Math.min(gpu.temp_c, 100)} color={tempColor(gpu.temp_c)}>
|
||||
<span className="text-[10px] font-bold text-foreground">{gpu.temp_c}°</span>
|
||||
</MiniRing>
|
||||
<span className="text-[10px] text-muted-foreground">Temp</span>
|
||||
</div>
|
||||
)}
|
||||
{power != null && (
|
||||
<div className="text-xs">
|
||||
<p className="text-foreground font-medium">{power}W</p>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{gpu.power_limit_w ? `/ ${gpu.power_limit_w}W` : "Power"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{gpu.utilization_pct != null && (
|
||||
<div className="text-xs">
|
||||
<p className="text-foreground font-medium">{gpu.utilization_pct}%</p>
|
||||
<p className="text-[10px] text-muted-foreground">Util</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">GPU not available</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
79
dashboard/ui/components/ollama-chat.tsx
Normal file
79
dashboard/ui/components/ollama-chat.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
"use client";
|
||||
import { useState, useRef } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface Message { role: "user" | "assistant"; content: string }
|
||||
|
||||
export function OllamaChat() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
async function send() {
|
||||
if (!input.trim() || loading) return;
|
||||
const userMsg = input.trim();
|
||||
setInput("");
|
||||
setMessages(prev => [...prev, { role: "user", content: userMsg }]);
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch("/api/chat", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: userMsg }),
|
||||
});
|
||||
const data = await res.json();
|
||||
setMessages(prev => [...prev, { role: "assistant", content: data.response || data.error || "No response" }]);
|
||||
} catch (e) {
|
||||
setMessages(prev => [...prev, { role: "assistant", content: `Error: ${e}` }]);
|
||||
}
|
||||
setLoading(false);
|
||||
setTimeout(() => scrollRef.current?.scrollTo(0, scrollRef.current.scrollHeight), 100);
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => setOpen(true)}
|
||||
className="fixed bottom-4 left-4 z-50 w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-blue-500 text-white flex items-center justify-center shadow-lg shadow-violet-500/20 hover:shadow-violet-500/40 hover:scale-110 transition-all duration-200"
|
||||
title="Chat with Ollama"
|
||||
>
|
||||
<span className="text-sm font-bold">AI</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 left-4 z-50 w-80">
|
||||
<Card className="shadow-2xl border-violet-500/10">
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium">Ollama Chat</CardTitle>
|
||||
<Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs hover:bg-white/[0.06]" onClick={() => setOpen(false)}>x</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div ref={scrollRef} className="h-48 overflow-y-auto space-y-2 text-xs">
|
||||
{messages.length === 0 && <p className="text-muted-foreground/60 text-center py-4">Ask anything about your homelab...</p>}
|
||||
{messages.map((m, i) => (
|
||||
<div key={i} className={`rounded-lg px-3 py-2 ${m.role === "user" ? "bg-blue-500/10 border border-blue-500/10 ml-8" : "bg-white/[0.04] border border-white/[0.06] mr-8"}`}>
|
||||
<p className="whitespace-pre-wrap">{m.content}</p>
|
||||
</div>
|
||||
))}
|
||||
{loading && <div className="bg-white/[0.04] border border-white/[0.06] rounded-lg px-3 py-2 mr-8 animate-pulse"><p className="text-muted-foreground">Thinking...</p></div>}
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
<input
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => e.key === "Enter" && send()}
|
||||
placeholder="Ask Ollama..."
|
||||
className="flex-1 rounded-lg glass-input px-3 py-1.5 text-xs"
|
||||
/>
|
||||
<Button size="sm" className="h-7 text-xs px-3 bg-violet-500/20 hover:bg-violet-500/30 border border-violet-500/20" onClick={send} disabled={loading}>Send</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
dashboard/ui/components/refresh-indicator.tsx
Normal file
19
dashboard/ui/components/refresh-indicator.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
export function RefreshIndicator({ interval = 60 }: { interval?: number }) {
|
||||
const [countdown, setCountdown] = useState(interval);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCountdown(prev => prev <= 1 ? interval : prev - 1);
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, [interval]);
|
||||
|
||||
return (
|
||||
<span className="text-[9px] text-muted-foreground tabular-nums">
|
||||
{countdown}s
|
||||
</span>
|
||||
);
|
||||
}
|
||||
26
dashboard/ui/components/sparkline.tsx
Normal file
26
dashboard/ui/components/sparkline.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
interface SparklineProps {
|
||||
data: number[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export function Sparkline({ data, width = 80, height = 24, color = "#3b82f6" }: SparklineProps) {
|
||||
if (!data || data.length < 2) return null;
|
||||
const min = Math.min(...data);
|
||||
const max = Math.max(...data);
|
||||
const range = max - min || 1;
|
||||
const points = data.map((v, i) => {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
const y = height - ((v - min) / range) * (height - 4) - 2;
|
||||
return `${x},${y}`;
|
||||
}).join(" ");
|
||||
|
||||
return (
|
||||
<svg width={width} height={height} className="inline-block">
|
||||
<polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
78
dashboard/ui/components/stat-card.tsx
Normal file
78
dashboard/ui/components/stat-card.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
const accentColors: Record<string, string> = {
|
||||
Containers: "#3b82f6",
|
||||
"Hosts Online": "#22c55e",
|
||||
GPU: "#a855f7",
|
||||
"Emails Today": "#f59e0b",
|
||||
Alerts: "#ef4444",
|
||||
"Total Spend": "#3b82f6",
|
||||
Transactions: "#22c55e",
|
||||
"Top Vendor": "#f59e0b",
|
||||
"Total Queries": "#3b82f6",
|
||||
Blocked: "#ef4444",
|
||||
"Avg Response": "#22c55e",
|
||||
};
|
||||
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
value: string | number;
|
||||
sub?: React.ReactNode;
|
||||
pct?: number; // Optional 0-100 for ring gauge
|
||||
}
|
||||
|
||||
function GaugeRing({ pct, color, size = 72, stroke = 5 }: { pct: number; color: string; size?: number; stroke?: number }) {
|
||||
const radius = (size - stroke) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (pct / 100) * circumference;
|
||||
|
||||
return (
|
||||
<svg width={size} height={size} className="absolute inset-0 m-auto -rotate-90">
|
||||
<circle
|
||||
className="gauge-track"
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
strokeWidth={stroke}
|
||||
/>
|
||||
<circle
|
||||
className="gauge-fill"
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
strokeWidth={stroke}
|
||||
stroke={color}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatCard({ label, value, sub, pct }: StatCardProps) {
|
||||
const color = accentColors[label] ?? "#3b82f6";
|
||||
const hasPct = pct != null && pct >= 0;
|
||||
|
||||
return (
|
||||
<Card className="card-hover-lift overflow-hidden relative group">
|
||||
<CardContent className="pt-5 pb-4 px-4 relative flex flex-col items-center justify-center text-center min-h-[110px]">
|
||||
{hasPct ? (
|
||||
<div className="relative w-[72px] h-[72px] flex items-center justify-center mb-1">
|
||||
<GaugeRing pct={pct} color={color} />
|
||||
<span className="text-2xl font-bold text-foreground tabular-nums-transition stat-glow">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-3xl font-bold text-foreground tabular-nums-transition stat-glow mb-1">
|
||||
{value}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
|
||||
{label}
|
||||
</p>
|
||||
{sub && <div className="mt-0.5 text-xs text-muted-foreground/70">{sub}</div>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
28
dashboard/ui/components/status-badge.tsx
Normal file
28
dashboard/ui/components/status-badge.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const colorMap: Record<string, string> = {
|
||||
green: "bg-green-500 glow-green",
|
||||
red: "bg-red-500 glow-red",
|
||||
amber: "bg-amber-500 glow-amber",
|
||||
blue: "bg-blue-500 glow-blue",
|
||||
purple: "bg-purple-500 glow-purple",
|
||||
};
|
||||
|
||||
interface StatusBadgeProps {
|
||||
color: "green" | "red" | "amber" | "blue" | "purple";
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function StatusBadge({ color, label }: StatusBadgeProps) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 text-xs">
|
||||
<span
|
||||
className={cn(
|
||||
"w-2 h-2 rounded-full shrink-0",
|
||||
colorMap[color] ?? "bg-gray-500"
|
||||
)}
|
||||
/>
|
||||
{label && <span className="text-muted-foreground">{label}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
53
dashboard/ui/components/toast-provider.tsx
Normal file
53
dashboard/ui/components/toast-provider.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useSSE } from "@/lib/use-sse";
|
||||
|
||||
interface Toast {
|
||||
id: number;
|
||||
message: string;
|
||||
type: "info" | "warning" | "error";
|
||||
}
|
||||
|
||||
const ALERT_TYPES = ["container_unhealthy", "container_restarted", "drift_found"];
|
||||
|
||||
export function ToastProvider() {
|
||||
const events = useSSE("/api/activity", 5);
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
const [seen, setSeen] = useState(new Set<string>());
|
||||
|
||||
const addToast = useCallback((message: string, type: Toast["type"]) => {
|
||||
const id = Date.now();
|
||||
setToasts(prev => [...prev, { id, message, type }]);
|
||||
setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
for (const event of events) {
|
||||
const key = `${event.type}-${event.timestamp}`;
|
||||
if (seen.has(key)) continue;
|
||||
if (ALERT_TYPES.includes(event.type)) {
|
||||
setSeen(prev => new Set(prev).add(key));
|
||||
addToast(event.raw || `${event.type}: ${event.source}`,
|
||||
event.type.includes("unhealthy") ? "error" : "warning");
|
||||
}
|
||||
}
|
||||
}, [events, seen, addToast]);
|
||||
|
||||
if (toasts.length === 0) return null;
|
||||
|
||||
const colors = {
|
||||
info: "border-blue-500/20 bg-blue-500/5 backdrop-blur-xl",
|
||||
warning: "border-amber-500/20 bg-amber-500/5 backdrop-blur-xl",
|
||||
error: "border-red-500/20 bg-red-500/5 backdrop-blur-xl",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm">
|
||||
{toasts.map(t => (
|
||||
<div key={t.id} className={`rounded-lg border px-4 py-3 text-xs shadow-lg backdrop-blur-md animate-slide-in ${colors[t.type]}`}>
|
||||
<p className="text-foreground">{t.message}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
dashboard/ui/components/ui/badge.tsx
Normal file
52
dashboard/ui/components/ui/badge.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
||||
return useRender({
|
||||
defaultTagName: "span",
|
||||
props: mergeProps<"span">(
|
||||
{
|
||||
className: cn(badgeVariants({ variant }), className),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "badge",
|
||||
variant,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
60
dashboard/ui/components/ui/button.tsx
Normal file
60
dashboard/ui/components/ui/button.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
"use client"
|
||||
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
103
dashboard/ui/components/ui/card.tsx
Normal file
103
dashboard/ui/components/ui/card.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
160
dashboard/ui/components/ui/dialog.tsx
Normal file
160
dashboard/ui/components/ui/dialog.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Backdrop
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: DialogPrimitive.Popup.Props & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Popup
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Popup>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close render={<Button variant="outline" />}>
|
||||
Close
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"font-heading text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Description.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
55
dashboard/ui/components/ui/scroll-area.tsx
Normal file
55
dashboard/ui/components/ui/scroll-area.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: ScrollAreaPrimitive.Root.Props) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
data-slot="scroll-area-viewport"
|
||||
className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
|
||||
>
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: ScrollAreaPrimitive.Scrollbar.Props) {
|
||||
return (
|
||||
<ScrollAreaPrimitive.Scrollbar
|
||||
data-slot="scroll-area-scrollbar"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Thumb
|
||||
data-slot="scroll-area-thumb"
|
||||
className="relative flex-1 rounded-full bg-border"
|
||||
/>
|
||||
</ScrollAreaPrimitive.Scrollbar>
|
||||
)
|
||||
}
|
||||
|
||||
export { ScrollArea, ScrollBar }
|
||||
25
dashboard/ui/components/ui/separator.tsx
Normal file
25
dashboard/ui/components/ui/separator.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: SeparatorPrimitive.Props) {
|
||||
return (
|
||||
<SeparatorPrimitive
|
||||
data-slot="separator"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
116
dashboard/ui/components/ui/table.tsx
Normal file
116
dashboard/ui/components/ui/table.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
82
dashboard/ui/components/ui/tabs.tsx
Normal file
82
dashboard/ui/components/ui/tabs.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client"
|
||||
|
||||
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: TabsPrimitive.Root.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-horizontal:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Tab
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
|
||||
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
||||
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
|
||||
return (
|
||||
<TabsPrimitive.Panel
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 text-sm outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
18
dashboard/ui/eslint.config.mjs
Normal file
18
dashboard/ui/eslint.config.mjs
Normal file
@@ -0,0 +1,18 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
17
dashboard/ui/lib/api.ts
Normal file
17
dashboard/ui/lib/api.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// In the browser, API calls go to the same origin (Next.js rewrites to backend).
|
||||
// On the server, they go directly to the backend.
|
||||
const API = typeof window === "undefined"
|
||||
? (process.env.BACKEND_URL || "http://localhost:18888")
|
||||
: "";
|
||||
|
||||
export async function fetchAPI<T>(path: string): Promise<T> {
|
||||
const res = await fetch(`${API}${path}`);
|
||||
if (!res.ok) throw new Error(`API error: ${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function postAPI<T>(path: string): Promise<T> {
|
||||
const res = await fetch(`${API}${path}`, { method: "POST" });
|
||||
if (!res.ok) throw new Error(`API error: ${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
80
dashboard/ui/lib/types.ts
Normal file
80
dashboard/ui/lib/types.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
// Types aligned with the actual API response from /api/stats/overview
|
||||
export interface OverviewStats {
|
||||
containers: {
|
||||
total: number;
|
||||
running?: number;
|
||||
endpoints?: Record<string, { total: number; running: number; error?: boolean }>;
|
||||
by_endpoint?: Record<string, { total: number; running: number; error?: boolean }>;
|
||||
};
|
||||
gpu: {
|
||||
available: boolean;
|
||||
name?: string;
|
||||
temp_c?: number;
|
||||
// API may use either naming convention
|
||||
power_w?: number;
|
||||
power_draw_w?: number;
|
||||
power_limit_w?: number;
|
||||
vram_used_mb?: number;
|
||||
vram_total_mb?: number;
|
||||
memory_used_mb?: number;
|
||||
memory_total_mb?: number;
|
||||
utilization_pct?: number;
|
||||
};
|
||||
// API returns either a number or {gmail, dvish, proton, total}
|
||||
emails_today?: number | Record<string, number>;
|
||||
email_today?: number | Record<string, number>;
|
||||
alerts?: number;
|
||||
unhealthy_count?: number;
|
||||
// API returns either an object or a boolean
|
||||
ollama?: { available: boolean; url: string };
|
||||
ollama_available?: boolean;
|
||||
hosts_online?: number;
|
||||
}
|
||||
|
||||
export interface ActivityEvent {
|
||||
type: string;
|
||||
timestamp: string;
|
||||
source: string;
|
||||
raw: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface Container {
|
||||
id: string;
|
||||
name: string;
|
||||
image: string;
|
||||
state: string;
|
||||
status: string;
|
||||
endpoint: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface JellyfinStatus {
|
||||
version: string;
|
||||
server_name: string;
|
||||
libraries: { name: string; type: string; paths: string[] }[];
|
||||
active_sessions: {
|
||||
user: string;
|
||||
device: string;
|
||||
client: string;
|
||||
title: string;
|
||||
type: string;
|
||||
}[];
|
||||
idle_sessions: number;
|
||||
}
|
||||
|
||||
export interface EmailStats {
|
||||
accounts: {
|
||||
account: string;
|
||||
today: number;
|
||||
categories: Record<string, number>;
|
||||
}[];
|
||||
sender_cache: Record<string, number>;
|
||||
}
|
||||
|
||||
export interface ExpenseSummary {
|
||||
month: string;
|
||||
total: number;
|
||||
count: number;
|
||||
top_vendors: { vendor: string; amount: number }[];
|
||||
}
|
||||
9
dashboard/ui/lib/use-poll.ts
Normal file
9
dashboard/ui/lib/use-poll.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import useSWR from "swr";
|
||||
import { fetchAPI } from "./api";
|
||||
|
||||
export function usePoll<T>(path: string, interval: number = 60000) {
|
||||
return useSWR<T>(path, () => fetchAPI<T>(path), {
|
||||
refreshInterval: interval,
|
||||
revalidateOnFocus: false,
|
||||
});
|
||||
}
|
||||
42
dashboard/ui/lib/use-sse.ts
Normal file
42
dashboard/ui/lib/use-sse.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import type { ActivityEvent } from "./types";
|
||||
|
||||
// Use same origin — Next.js rewrites /api/* to backend
|
||||
|
||||
export function useSSE(path: string, maxEvents: number = 30) {
|
||||
const [events, setEvents] = useState<ActivityEvent[]>([]);
|
||||
const retryTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let es: EventSource | null = null;
|
||||
|
||||
function connect() {
|
||||
es = new EventSource(path);
|
||||
|
||||
es.addEventListener("activity", (e: MessageEvent) => {
|
||||
try {
|
||||
const event: ActivityEvent = JSON.parse(e.data);
|
||||
setEvents((prev) => [event, ...prev].slice(0, maxEvents));
|
||||
} catch {
|
||||
// ignore malformed events
|
||||
}
|
||||
});
|
||||
|
||||
es.onerror = () => {
|
||||
es?.close();
|
||||
retryTimeout.current = setTimeout(connect, 5000);
|
||||
};
|
||||
}
|
||||
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
es?.close();
|
||||
if (retryTimeout.current) clearTimeout(retryTimeout.current);
|
||||
};
|
||||
}, [path, maxEvents]);
|
||||
|
||||
return events;
|
||||
}
|
||||
6
dashboard/ui/lib/utils.ts
Normal file
6
dashboard/ui/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
16
dashboard/ui/next.config.ts
Normal file
16
dashboard/ui/next.config.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
output: "standalone",
|
||||
async rewrites() {
|
||||
const backend = process.env.BACKEND_URL || "http://localhost:18888";
|
||||
return [
|
||||
{
|
||||
source: "/api/:path*",
|
||||
destination: `${backend}/api/:path*`,
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
9780
dashboard/ui/package-lock.json
generated
Normal file
9780
dashboard/ui/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
dashboard/ui/package.json
Normal file
34
dashboard/ui/package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.3.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^1.7.0",
|
||||
"next": "16.2.2",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"shadcn": "^4.1.2",
|
||||
"swr": "^2.4.1",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tw-animate-css": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.2.2",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
7
dashboard/ui/postcss.config.mjs
Normal file
7
dashboard/ui/postcss.config.mjs
Normal file
@@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
1
dashboard/ui/public/file.svg
Normal file
1
dashboard/ui/public/file.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 392 B |
1
dashboard/ui/public/globe.svg
Normal file
1
dashboard/ui/public/globe.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
dashboard/ui/public/next.svg
Normal file
1
dashboard/ui/public/next.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
dashboard/ui/public/vercel.svg
Normal file
1
dashboard/ui/public/vercel.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 129 B |
1
dashboard/ui/public/window.svg
Normal file
1
dashboard/ui/public/window.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 386 B |
34
dashboard/ui/tsconfig.json
Normal file
34
dashboard/ui/tsconfig.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"REDACTED_APP_PASSWORD": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user