Sanitized mirror from private repository - 2026-04-19 08:15:48 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.
|
||||
402
dashboard/ui/app/automations/page.tsx
Normal file
402
dashboard/ui/app/automations/page.tsx
Normal file
@@ -0,0 +1,402 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import type { EmailStats, AutomationTimelineEntry } from "@/lib/types";
|
||||
import { StatCard } from "@/components/stat-card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { StatusBadge } from "@/components/status-badge";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
import { EmptyState } from "@/components/empty-state";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const categoryColors: Record<string, string> = {
|
||||
receipts: "bg-amber-500/20 border-amber-500/30 text-amber-400",
|
||||
newsletters: "bg-blue-500/20 border-blue-500/30 text-blue-400",
|
||||
accounts: "bg-violet-500/20 border-violet-500/30 text-violet-400",
|
||||
spam: "bg-red-500/20 border-red-500/30 text-red-400",
|
||||
personal: "bg-green-500/20 border-green-500/30 text-green-400",
|
||||
finance: "bg-emerald-500/20 border-emerald-500/30 text-emerald-400",
|
||||
work: "bg-cyan-500/20 border-cyan-500/30 text-cyan-400",
|
||||
promotions: "bg-amber-500/15 border-amber-500/25 text-amber-300",
|
||||
social: "bg-purple-500/20 border-purple-500/30 text-purple-400",
|
||||
travel: "bg-cyan-500/15 border-cyan-500/25 text-cyan-300",
|
||||
orders: "bg-orange-500/20 border-orange-500/30 text-orange-400",
|
||||
updates: "bg-teal-500/20 border-teal-500/30 text-teal-400",
|
||||
};
|
||||
|
||||
function getAccountColor(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
if (lower.includes("gmail") || lower.includes("lzbellina")) return "text-blue-400";
|
||||
if (lower.includes("dvish")) return "text-amber-400";
|
||||
if (lower.includes("proton") || lower.includes("admin")) return "text-violet-400";
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
function getAccountGradient(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
if (lower.includes("gmail") || lower.includes("lzbellina")) return "bg-gradient-to-b from-blue-300 to-blue-500 bg-clip-text text-transparent";
|
||||
if (lower.includes("dvish")) return "bg-gradient-to-b from-amber-300 to-amber-500 bg-clip-text text-transparent";
|
||||
if (lower.includes("proton") || lower.includes("admin")) return "bg-gradient-to-b from-violet-300 to-violet-500 bg-clip-text text-transparent";
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
function getCategoryClass(cat: string): string {
|
||||
const lower = cat.toLowerCase();
|
||||
for (const [key, cls] of Object.entries(categoryColors)) {
|
||||
if (lower.includes(key)) return cls;
|
||||
}
|
||||
return "bg-white/[0.06] border-white/[0.08] text-muted-foreground";
|
||||
}
|
||||
|
||||
// Order matters — more specific keys must come BEFORE generic ones
|
||||
// ("digest" before "email" so "Email Digest" matches digest, not email)
|
||||
const expectedIntervals: [string, number][] = [
|
||||
["digest", 36 * 60 * 60 * 1000], // 36 hours (daily)
|
||||
["changelog", 8 * 24 * 60 * 60 * 1000], // 8 days (weekly)
|
||||
["predictor", 8 * 24 * 60 * 60 * 1000], // 8 days (weekly)
|
||||
["validator", 36 * 60 * 60 * 1000], // 36 hours (daily)
|
||||
["receipt", 36 * 60 * 60 * 1000], // 36 hours (daily)
|
||||
["drift", 36 * 60 * 60 * 1000], // 36 hours (daily)
|
||||
["backup", 36 * 60 * 60 * 1000], // 36 hours (daily)
|
||||
["restart", 30 * 60 * 1000], // 30 min
|
||||
["stack", 30 * 60 * 1000], // 30 min
|
||||
["email", 2 * 60 * 60 * 1000], // 2 hours
|
||||
["organizer", 2 * 60 * 60 * 1000], // 2 hours
|
||||
];
|
||||
|
||||
function getExpectedInterval(name: string): number {
|
||||
const lower = name.toLowerCase();
|
||||
for (const [key, interval] of expectedIntervals) {
|
||||
if (lower.includes(key)) return interval;
|
||||
}
|
||||
return 60 * 60 * 1000; // default 1 hour
|
||||
}
|
||||
|
||||
function isOnSchedule(entry: AutomationTimelineEntry): boolean {
|
||||
if (!entry.last_run || !entry.exists) return false;
|
||||
const lastRun = new Date(entry.last_run).getTime();
|
||||
const now = Date.now();
|
||||
const expected = getExpectedInterval(entry.name);
|
||||
// Allow 2x the expected interval as grace
|
||||
return (now - lastRun) < expected * 2;
|
||||
}
|
||||
|
||||
function formatRelativeTime(dateStr: string): string {
|
||||
try {
|
||||
const d = new Date(dateStr);
|
||||
const now = Date.now();
|
||||
const diff = now - d.getTime();
|
||||
if (diff < 60000) return "just now";
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
|
||||
return `${Math.floor(diff / 86400000)}d ago`;
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeOnly(dateStr: string): string {
|
||||
try {
|
||||
return new Date(dateStr).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
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 { data: timeline } = usePoll<AutomationTimelineEntry[]>("/api/automation-timeline", 60000);
|
||||
const restarts = restartsData?.entries ?? [];
|
||||
|
||||
// Compute stats for top row
|
||||
const totalEmailsToday = emails?.accounts
|
||||
? emails.accounts.reduce((sum, acct) => {
|
||||
const today = Number((acct as Record<string, unknown>).today ?? (acct as Record<string, unknown>).today_total ?? 0);
|
||||
return sum + today;
|
||||
}, 0)
|
||||
: 0;
|
||||
|
||||
const backupOk = String(backups?.status ?? "unknown") === "ok";
|
||||
const driftStatus = String(drift?.status ?? "unknown");
|
||||
const driftClean = driftStatus === "clean" || driftStatus === "no_log";
|
||||
const restartCount = restarts.length;
|
||||
|
||||
// Sort timeline by most recent first
|
||||
const sortedTimeline = timeline
|
||||
? [...timeline].sort((a, b) => {
|
||||
if (!a.last_run) return 1;
|
||||
if (!b.last_run) return -1;
|
||||
return new Date(b.last_run).getTime() - new Date(a.last_run).getTime();
|
||||
})
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Automations</h1>
|
||||
|
||||
{/* Top: Big stats row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
label="Emails Today"
|
||||
value={emails ? totalEmailsToday : "--"}
|
||||
color="blue"
|
||||
sub="classified"
|
||||
/>
|
||||
<StatCard
|
||||
label="Backup Status"
|
||||
value={backups ? (backupOk ? "OK" : "FAIL") : "--"}
|
||||
color={backupOk || !backups ? "green" : "amber"}
|
||||
sub={backups?.has_errors ? "errors detected" : "all good"}
|
||||
/>
|
||||
<StatCard
|
||||
label="Config Drift"
|
||||
value={drift ? (driftClean ? "0" : driftStatus) : "--"}
|
||||
color={driftClean || !drift ? "emerald" : "amber"}
|
||||
sub={drift ? String(drift.last_result ?? "no scan yet") : "loading"}
|
||||
/>
|
||||
<StatCard
|
||||
label="Restarts"
|
||||
value={restartsData ? restartCount : "--"}
|
||||
color={restartCount === 0 || !restartsData ? "violet" : "amber"}
|
||||
sub="container restarts"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Color Legend */}
|
||||
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-muted-foreground/70 px-1">
|
||||
<span className="font-medium text-foreground/60">Legend:</span>
|
||||
<span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-green-500" style={{boxShadow:"0 0 6px rgba(34,197,94,0.4)"}} /> On schedule</span>
|
||||
<span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-amber-500" style={{boxShadow:"0 0 6px rgba(245,158,11,0.4)"}} /> Overdue</span>
|
||||
<span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-gray-500" /> No log</span>
|
||||
<span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-blue-500" style={{boxShadow:"0 0 6px rgba(59,130,246,0.4)"}} /> Email</span>
|
||||
<span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-violet-500" style={{boxShadow:"0 0 6px rgba(139,92,246,0.4)"}} /> Accounts</span>
|
||||
<span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-amber-400" style={{boxShadow:"0 0 6px rgba(251,191,36,0.4)"}} /> Receipts</span>
|
||||
<span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-red-500" style={{boxShadow:"0 0 6px rgba(239,68,68,0.4)"}} /> Spam</span>
|
||||
</div>
|
||||
|
||||
{/* Automation Timeline */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base font-semibold">Automation Timeline</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!timeline ? (
|
||||
<CardSkeleton lines={6} />
|
||||
) : sortedTimeline.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No automation data</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sortedTimeline.map((entry, i) => {
|
||||
const onSchedule = isOnSchedule(entry);
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between text-sm rounded-lg px-3 py-2 hover:bg-white/[0.03] transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full shrink-0 ${
|
||||
!entry.exists
|
||||
? "bg-gray-500"
|
||||
: onSchedule
|
||||
? "bg-green-500"
|
||||
: "bg-amber-500"
|
||||
}`}
|
||||
style={{
|
||||
boxShadow: !entry.exists
|
||||
? "none"
|
||||
: onSchedule
|
||||
? "0 0 8px rgba(34, 197, 94, 0.5)"
|
||||
: "0 0 8px rgba(245, 158, 11, 0.5)",
|
||||
}}
|
||||
/>
|
||||
<span className="text-foreground font-medium truncate">{entry.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 shrink-0 ml-3">
|
||||
{entry.last_run ? (
|
||||
<>
|
||||
<span className="text-xs text-muted-foreground/60">
|
||||
{formatTimeOnly(entry.last_run)}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/40 min-w-[60px] text-right">
|
||||
{formatRelativeTime(entry.last_run)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground/40">never</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Middle: Email Organizers */}
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base font-semibold">Email Organizers</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!emails ? (
|
||||
<CardSkeleton lines={4} />
|
||||
) : (
|
||||
<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="flex items-center gap-6 rounded-xl px-4 py-3 bg-white/[0.02] border border-white/[0.04] hover:bg-white/[0.04] transition-colors">
|
||||
<div className="shrink-0 min-w-[140px]">
|
||||
<p className={`text-base font-medium ${getAccountColor(name)}`}>{name}</p>
|
||||
<p className="text-xs text-muted-foreground/60 mt-0.5">today</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<p className={`text-3xl font-bold ${getAccountGradient(name)}`}>{today}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 flex-1">
|
||||
{Object.entries(cats).map(([cat, count]) => (
|
||||
<Badge
|
||||
key={cat}
|
||||
variant="secondary"
|
||||
className={`text-xs px-2.5 py-0.5 border ${getCategoryClass(cat)}`}
|
||||
>
|
||||
{cat}: {count}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Bottom: System Health -- 2 columns */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{/* Backup Details */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Backup Details</CardTitle>
|
||||
{backups && (
|
||||
<StatusBadge
|
||||
color={backupOk ? "green" : "red"}
|
||||
label={String(backups.status ?? "unknown")}
|
||||
/>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!backups ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{backups.has_errors ? (
|
||||
<p className="text-sm text-red-400 font-medium">Errors detected in backup</p>
|
||||
) : null}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Log entries today</span>
|
||||
<span className="text-foreground font-medium">{String(backups.entries ?? 0)}</span>
|
||||
</div>
|
||||
{backups.last_run ? (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Last run</span>
|
||||
<span className="text-foreground">{String(backups.last_run)}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{backups.email_count != null ? (
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground/70">Emails backed up</span>
|
||||
<span className="text-foreground font-medium">{String(backups.email_count)}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Config Drift + Restarts */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Config Drift & Restarts</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Drift */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">Config Drift</p>
|
||||
{drift && (
|
||||
<StatusBadge
|
||||
color={driftClean ? "green" : "amber"}
|
||||
label={driftStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{drift && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{String(drift.last_result ?? "No scan results yet")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Restarts */}
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Restarts</p>
|
||||
{restarts.length === 0 ? (
|
||||
<EmptyState icon={"OK"} title="All healthy" description="No containers needed restarting" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{restarts.map((r, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground font-medium">{r.stack}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge
|
||||
color={r.status === "success" ? "green" : "red"}
|
||||
label={r.status}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground/70">
|
||||
{new Date(r.timestamp).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
162
dashboard/ui/app/expenses/page.tsx
Normal file
162
dashboard/ui/app/expenses/page.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
"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";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
|
||||
interface Transaction {
|
||||
date: string;
|
||||
vendor: string;
|
||||
amount: string | number;
|
||||
currency?: string;
|
||||
order_number?: string;
|
||||
email_account?: string;
|
||||
message_id?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
function getExpenseAccountColor(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
if (lower.includes("gmail") || lower.includes("lzbellina")) return "text-blue-400";
|
||||
if (lower.includes("dvish")) return "text-amber-400";
|
||||
if (lower.includes("proton") || lower.includes("admin")) return "text-violet-400";
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
|
||||
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) => {
|
||||
const amt = Number(row.amount || 0);
|
||||
return (
|
||||
<span className={amt >= 0 ? "text-green-400" : "text-red-400"}>
|
||||
${amt.toFixed(2)} {row.currency ?? ""}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ key: "order_number", label: "Order #" },
|
||||
{
|
||||
key: "email_account",
|
||||
label: "Account",
|
||||
render: (row) => (
|
||||
<span className={`truncate max-w-[120px] block text-xs ${getExpenseAccountColor(String(row.email_account ?? ""))}`}>
|
||||
{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)}` : "--"}
|
||||
sub={summary?.month}
|
||||
/>
|
||||
<StatCard
|
||||
label="Transactions"
|
||||
value={summary?.count ?? "--"}
|
||||
sub="this month"
|
||||
/>
|
||||
<StatCard
|
||||
label="Top Vendor"
|
||||
value={
|
||||
summary?.top_vendors?.[0]?.vendor ?? "--"
|
||||
}
|
||||
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-base font-semibold">Top Vendors</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!summary ? (
|
||||
<CardSkeleton lines={4} />
|
||||
) : (
|
||||
<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-sm">
|
||||
<span className="text-foreground">{v.vendor}</span>
|
||||
<span className="text-green-400">
|
||||
${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-base font-semibold">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 |
519
dashboard/ui/app/globals.css
Normal file
519
dashboard/ui/app/globals.css
Normal file
@@ -0,0 +1,519 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
/* Exo 2 Font */
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Exo 2';
|
||||
src: url('/fonts/Exo2-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
/* Midnight theme defaults — used before ThemeProvider hydrates on client.
|
||||
ThemeProvider overrides these inline on :root once JS loads. */
|
||||
.dark {
|
||||
--background: 230 25% 4%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 220 30% 8%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 220 30% 8%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217 91% 60%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 217 33% 17%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217 33% 17%;
|
||||
--muted-foreground: 215 20% 68%;
|
||||
--accent: 217 33% 17%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 84% 60%;
|
||||
--border: 217 33% 20%;
|
||||
--input: 217 33% 20%;
|
||||
--ring: 217 91% 60%;
|
||||
--chart-1: 217 91% 60%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar: 220 30% 6%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 217 91% 60%;
|
||||
--sidebar-primary-foreground: 210 40% 98%;
|
||||
--sidebar-accent: 217 33% 17%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217 33% 20%;
|
||||
--sidebar-ring: 217 91% 60%;
|
||||
--card-bg: rgba(15, 20, 40, 0.35);
|
||||
--card-border: rgba(255, 255, 255, 0.12);
|
||||
--card-hover-bg: rgba(15, 20, 40, 0.45);
|
||||
--card-hover-border: rgba(255, 255, 255, 0.2);
|
||||
--glass-bg: rgba(15, 20, 40, 0.30);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--glass-hover: rgba(255, 255, 255, 0.03);
|
||||
--glass-input-bg: rgba(255, 255, 255, 0.06);
|
||||
--glass-input-border: rgba(255, 255, 255, 0.1);
|
||||
--glass-input-focus: rgba(59, 130, 246, 0.3);
|
||||
--glass-input-focus-bg: rgba(255, 255, 255, 0.08);
|
||||
--glass-table-header: rgba(255, 255, 255, 0.08);
|
||||
--glass-bar-track: rgba(255, 255, 255, 0.10);
|
||||
--nav-bg: rgba(6, 6, 17, 0.65);
|
||||
--nav-border: rgba(255, 255, 255, 0.08);
|
||||
--nav-active: rgba(255, 255, 255, 0.08);
|
||||
--nav-hover: rgba(255, 255, 255, 0.05);
|
||||
--accent-color: #3b82f6;
|
||||
--accent-glow: rgba(59, 130, 246, 0.3);
|
||||
--card-lift-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
|
||||
--stat-glow: 0 0 20px rgba(59, 130, 246, 0.15);
|
||||
--nav-active-glow: 0 2px 10px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Light theme base values (overridden by ThemeProvider inline styles) */
|
||||
:root:not(.dark) {
|
||||
--background: 210 20% 98%;
|
||||
--foreground: 215 25% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 215 25% 15%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 215 25% 15%;
|
||||
--primary: 217 91% 53%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 214 32% 91%;
|
||||
--secondary-foreground: 215 25% 15%;
|
||||
--muted: 214 32% 91%;
|
||||
--muted-foreground: 215 16% 47%;
|
||||
--accent: 214 32% 91%;
|
||||
--accent-foreground: 215 25% 15%;
|
||||
--destructive: 0 84% 60%;
|
||||
--border: 214 32% 88%;
|
||||
--input: 214 32% 88%;
|
||||
--ring: 217 91% 53%;
|
||||
--chart-1: 217 91% 53%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar: 210 20% 97%;
|
||||
--sidebar-foreground: 215 25% 15%;
|
||||
--sidebar-primary: 217 91% 53%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 214 32% 91%;
|
||||
--sidebar-accent-foreground: 215 25% 15%;
|
||||
--sidebar-border: 214 32% 88%;
|
||||
--sidebar-ring: 217 91% 53%;
|
||||
|
||||
--card-bg: rgba(255, 255, 255, 0.9);
|
||||
--card-border: rgba(0, 0, 0, 0.08);
|
||||
--card-hover-bg: rgba(255, 255, 255, 1);
|
||||
--card-hover-border: rgba(0, 0, 0, 0.12);
|
||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
||||
--glass-border: rgba(0, 0, 0, 0.06);
|
||||
--glass-hover: rgba(0, 0, 0, 0.02);
|
||||
--glass-input-bg: rgba(255, 255, 255, 0.8);
|
||||
--glass-input-border: rgba(0, 0, 0, 0.1);
|
||||
--glass-input-focus: rgba(37, 99, 235, 0.3);
|
||||
--glass-input-focus-bg: rgba(255, 255, 255, 0.95);
|
||||
--glass-table-header: rgba(0, 0, 0, 0.03);
|
||||
--glass-bar-track: rgba(0, 0, 0, 0.06);
|
||||
--nav-bg: rgba(255, 255, 255, 0.8);
|
||||
--nav-border: rgba(0, 0, 0, 0.06);
|
||||
--nav-active: rgba(0, 0, 0, 0.05);
|
||||
--nav-hover: rgba(0, 0, 0, 0.03);
|
||||
--accent-color: #2563eb;
|
||||
--accent-glow: rgba(37, 99, 235, 0.2);
|
||||
--card-lift-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 0 40px rgba(37, 99, 235, 0.02);
|
||||
--stat-glow: 0 0 20px rgba(37, 99, 235, 0.08);
|
||||
--nav-active-glow: 0 2px 10px rgba(37, 99, 235, 0.15);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Force readable text in dark mode --- */
|
||||
.dark body,
|
||||
.dark [data-slot="card"],
|
||||
.dark [data-slot="card-content"],
|
||||
.dark [data-slot="card-header"],
|
||||
.dark [data-slot="card-title"],
|
||||
.dark p,
|
||||
.dark span,
|
||||
.dark div {
|
||||
color: inherit;
|
||||
}
|
||||
.dark {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
.dark [data-slot="card-title"] {
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
.dark .text-muted-foreground {
|
||||
color: hsl(var(--muted-foreground, 215 20% 68%)) !important;
|
||||
}
|
||||
|
||||
/* --- Glassmorphism Background --- */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background: #080818;
|
||||
}
|
||||
|
||||
/* Animated gradient background */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 140% 70% at 5% 5%, rgba(59, 130, 246, 0.35), transparent 50%),
|
||||
radial-gradient(ellipse 100% 90% at 95% 15%, rgba(139, 92, 246, 0.28), transparent 50%),
|
||||
radial-gradient(ellipse 120% 70% at 50% 105%, rgba(16, 185, 129, 0.22), transparent 50%),
|
||||
radial-gradient(ellipse 80% 50% at 75% 55%, rgba(236, 72, 153, 0.15), transparent 50%);
|
||||
}
|
||||
|
||||
/* --- Glass Utility --- */
|
||||
.glass {
|
||||
background: rgba(15, 20, 35, 0.45);
|
||||
backdrop-filter: blur(16px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(140%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* --- Override shadcn Card for glassmorphism --- */
|
||||
[data-slot="card"] {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(15, 20, 35, 0.35) !important;
|
||||
backdrop-filter: blur(24px) saturate(160%) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(160%) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
|
||||
--tw-ring-shadow: none !important;
|
||||
--tw-ring-color: transparent !important;
|
||||
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
|
||||
animation: fade-up 0.5s ease-out both;
|
||||
}
|
||||
[data-slot="card"]:hover {
|
||||
background: rgba(20, 25, 45, 0.45) !important;
|
||||
border-color: var(--accent-color, rgba(59, 130, 246, 0.3)) !important;
|
||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 0 20px var(--accent-glow, rgba(59, 130, 246, 0.08)) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Card inner glow removed — was too visible/distracting */
|
||||
|
||||
/* 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: var(--card-lift-shadow);
|
||||
}
|
||||
|
||||
/* Active nav glow */
|
||||
.nav-active-glow {
|
||||
box-shadow: var(--nav-active-glow);
|
||||
}
|
||||
|
||||
/* --- Gauge Ring (SVG-based circular progress) --- */
|
||||
.gauge-track {
|
||||
fill: none;
|
||||
stroke: var(--glass-bar-track);
|
||||
}
|
||||
.gauge-fill {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 1s ease-out;
|
||||
}
|
||||
|
||||
/* Number glow for big stat values */
|
||||
.stat-glow {
|
||||
text-shadow: var(--stat-glow);
|
||||
}
|
||||
|
||||
/* Glass input fields */
|
||||
.glass-input {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #f1f5f9;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
.glass-input:focus {
|
||||
border-color: var(--glass-input-focus);
|
||||
background: var(--glass-input-focus-bg);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Frosted nav bar */
|
||||
nav, .dark nav {
|
||||
background: rgba(8, 8, 24, 0.7) !important;
|
||||
backdrop-filter: blur(24px) saturate(150%) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(150%) !important;
|
||||
}
|
||||
|
||||
/* Glass table rows */
|
||||
.glass-table-header {
|
||||
background: var(--glass-table-header);
|
||||
}
|
||||
.glass-table-row {
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.glass-table-row:hover {
|
||||
background: var(--glass-hover);
|
||||
}
|
||||
|
||||
/* Glass progress bar track */
|
||||
.glass-bar-track {
|
||||
background: var(--glass-bar-track);
|
||||
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%); }
|
||||
}
|
||||
|
||||
/* --- Visual Flair Effects --- */
|
||||
|
||||
/* Particle/sparkle dots — CSS-only floating dots in background */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.15), transparent),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.1), transparent),
|
||||
radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.12), transparent),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.08), transparent),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.15), transparent),
|
||||
radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.1), transparent),
|
||||
radial-gradient(1px 1px at 45% 50%, rgba(255,255,255,0.12), transparent),
|
||||
radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.08), transparent),
|
||||
radial-gradient(1.5px 1.5px at 25% 35%, rgba(255,255,255,0.18), transparent),
|
||||
radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,0.14), transparent),
|
||||
radial-gradient(1.5px 1.5px at 75% 25%, rgba(255,255,255,0.16), transparent),
|
||||
radial-gradient(1.5px 1.5px at 40% 90%, rgba(255,255,255,0.1), transparent);
|
||||
animation: sparkle-drift 30s linear infinite;
|
||||
}
|
||||
@keyframes sparkle-drift {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Gradient text for headings */
|
||||
.dark h1 {
|
||||
background: linear-gradient(135deg, #f1f5f9, var(--accent-color, #3b82f6));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Smooth number counter animation on stat values */
|
||||
.stat-value {
|
||||
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* Active nav tab underline glow */
|
||||
.nav-active-glow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-color, #3b82f6), transparent);
|
||||
border-radius: 2px;
|
||||
filter: blur(1px);
|
||||
}
|
||||
450
dashboard/ui/app/infrastructure/page.tsx
Normal file
450
dashboard/ui/app/infrastructure/page.tsx
Normal file
@@ -0,0 +1,450 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import type { Container, OverviewStats, KumaStats, DiskUsageEntry } from "@/lib/types";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
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";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
|
||||
interface OlaresPod {
|
||||
name: string;
|
||||
namespace: string;
|
||||
status: string;
|
||||
restarts: number;
|
||||
age: string;
|
||||
}
|
||||
|
||||
const endpointColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
homelab: "text-green-400",
|
||||
};
|
||||
|
||||
function getContainerStateColor(state: string): string {
|
||||
const lower = state.toLowerCase();
|
||||
if (lower === "running") return "text-green-400";
|
||||
if (lower === "exited" || lower === "dead") return "text-red-400";
|
||||
if (lower === "created" || lower === "restarting" || lower === "paused") return "text-amber-400";
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
const hostColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
homelab: "text-green-400",
|
||||
guava: "text-orange-400",
|
||||
seattle: "text-teal-400",
|
||||
jellyfish: "text-indigo-400",
|
||||
"matrix-ubuntu": "text-pink-400",
|
||||
};
|
||||
|
||||
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 { data: kuma } = usePoll<KumaStats>("/api/kuma/monitors", 60000);
|
||||
const { data: disks } = usePoll<DiskUsageEntry[]>("/api/disk-usage", 300000);
|
||||
const { data: temps } = usePoll<{ host: string; cpu_temp: number; hot_nvme?: { label: string; temp: number } }[]>("/api/temperatures", 60000);
|
||||
|
||||
const [logsTarget, setLogsTarget] = useState<{
|
||||
id: string;
|
||||
name: string;
|
||||
endpoint: string;
|
||||
} | null>(null);
|
||||
|
||||
const [hoveredMonitor, setHoveredMonitor] = useState<number | 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",
|
||||
render: (row) => (
|
||||
<span className={`font-medium ${endpointColors[row.endpoint.toLowerCase()] ?? "text-foreground"}`}>
|
||||
{row.endpoint}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
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>
|
||||
|
||||
{/* Kuma Monitors */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Uptime Kuma</CardTitle>
|
||||
{kuma && (
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
|
||||
{kuma.up} up
|
||||
</Badge>
|
||||
{kuma.down > 0 && (
|
||||
<Badge variant="secondary" className="text-xs bg-red-500/10 border border-red-500/20 text-red-400">
|
||||
{kuma.down} down
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">{kuma.total} total</span>
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!kuma ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : (
|
||||
<div className="relative">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{kuma.monitors.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="relative"
|
||||
onMouseEnter={() => setHoveredMonitor(m.id)}
|
||||
onMouseLeave={() => setHoveredMonitor(null)}
|
||||
>
|
||||
<span
|
||||
className={`inline-block w-3 h-3 rounded-sm cursor-pointer transition-all ${
|
||||
!m.active
|
||||
? "bg-gray-500/50"
|
||||
: m.status
|
||||
? "bg-green-500 hover:bg-green-400"
|
||||
: "bg-red-500 hover:bg-red-400"
|
||||
}`}
|
||||
style={{
|
||||
boxShadow: !m.active
|
||||
? "none"
|
||||
: m.status
|
||||
? "0 0 4px rgba(34, 197, 94, 0.4)"
|
||||
: "0 0 4px rgba(239, 68, 68, 0.5)",
|
||||
}}
|
||||
/>
|
||||
{hoveredMonitor === m.id && (
|
||||
<div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 rounded-lg bg-gray-900/95 border border-white/[0.12] text-xs whitespace-nowrap shadow-lg pointer-events-none">
|
||||
<p className="text-foreground font-medium">{m.name}</p>
|
||||
{m.url && <p className="text-muted-foreground/60 mt-0.5">{m.url}</p>}
|
||||
<p className={`mt-0.5 ${m.active ? (m.status ? "text-green-400" : "text-red-400") : "text-gray-400"}`}>
|
||||
{!m.active ? "Inactive" : m.status ? "Up" : "Down"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Container Table */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">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-base font-semibold">Olares Pods</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DataTable<OlaresPod>
|
||||
data={pods ?? []}
|
||||
columns={podColumns}
|
||||
searchKey="name"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">GPU Status</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{!gpu ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : 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 ?? "--"}°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 ?? "--"}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 ?? "--"}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">GPU not available</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
|
||||
{/* Host Temperatures */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Temperatures</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!temps ? (
|
||||
<CardSkeleton lines={6} />
|
||||
) : temps.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No temperature data</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{[...temps]
|
||||
.sort((a, b) => b.cpu_temp - a.cpu_temp)
|
||||
.map((t) => {
|
||||
const color =
|
||||
t.cpu_temp >= 80
|
||||
? "from-red-500 to-red-400"
|
||||
: t.cpu_temp >= 60
|
||||
? "from-amber-500 to-amber-400"
|
||||
: "from-green-500 to-emerald-400";
|
||||
const hostCls =
|
||||
hostColors[t.host.toLowerCase()] ?? "text-foreground";
|
||||
// Scale bar: 0-100°C range
|
||||
const barWidth = Math.min(100, t.cpu_temp);
|
||||
|
||||
return (
|
||||
<div key={t.host} className="space-y-1">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`font-medium ${hostCls}`}>{t.host}</span>
|
||||
{t.hot_nvme && (
|
||||
<span className="text-xs text-red-400/80">
|
||||
{t.hot_nvme.label} {t.hot_nvme.temp}°C
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs font-medium tabular-nums-transition min-w-[40px] text-right">
|
||||
{t.cpu_temp}°C
|
||||
</span>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2">
|
||||
<div
|
||||
className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
|
||||
style={{ width: `${barWidth}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Disk Usage */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Disk Usage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!disks ? (
|
||||
<CardSkeleton lines={6} />
|
||||
) : disks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No disk data</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{[...disks]
|
||||
.sort((a, b) => b.used_pct - a.used_pct)
|
||||
.map((d, i) => {
|
||||
const color =
|
||||
d.used_pct >= 85
|
||||
? "from-red-500 to-red-400"
|
||||
: d.used_pct >= 70
|
||||
? "from-amber-500 to-amber-400"
|
||||
: "from-green-500 to-emerald-400";
|
||||
const hostCls =
|
||||
hostColors[d.host.toLowerCase()] ?? "text-foreground";
|
||||
|
||||
return (
|
||||
<div key={`${d.host}-${d.mount}-${i}`} className="space-y-1">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`font-medium ${hostCls}`}>{d.host}</span>
|
||||
<span className="text-muted-foreground/60 font-mono text-xs truncate">
|
||||
{d.mount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{d.total_gb >= 1000
|
||||
? `${(d.total_gb / 1000).toFixed(1)} TB`
|
||||
: `${Math.round(d.total_gb)} GB`}
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums-transition min-w-[36px] text-right">
|
||||
{d.used_pct}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2">
|
||||
<div
|
||||
className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
|
||||
style={{ width: `${d.used_pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Logs Modal */}
|
||||
<ContainerLogsModal
|
||||
containerId={logsTarget?.id ?? null}
|
||||
containerName={logsTarget?.name ?? ""}
|
||||
endpoint={logsTarget?.endpoint ?? ""}
|
||||
onClose={() => setLogsTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
dashboard/ui/app/layout.tsx
Normal file
49
dashboard/ui/app/layout.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
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";
|
||||
import { CommandSearch } from "@/components/command-search";
|
||||
import { ThemeProvider } from "@/components/theme-provider";
|
||||
|
||||
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",
|
||||
icons: { icon: "/favicon.svg" },
|
||||
};
|
||||
|
||||
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" style={{ fontFamily: "'Exo 2', var(--font-geist-sans), system-ui, sans-serif" }}>
|
||||
<ThemeProvider>
|
||||
<Nav />
|
||||
<main className="flex-1 p-6">{children}</main>
|
||||
<ToastProvider />
|
||||
<OllamaChat />
|
||||
<KeyboardShortcuts />
|
||||
<CommandSearch />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
136
dashboard/ui/app/logs/page.tsx
Normal file
136
dashboard/ui/app/logs/page.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
"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";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
|
||||
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-base font-semibold">Log Files</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-[460px]">
|
||||
{logFiles.length === 0 ? (
|
||||
<CardSkeleton lines={8} />
|
||||
) : (
|
||||
<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-sm 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-base font-semibold">
|
||||
{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 ? (
|
||||
<CardSkeleton lines={10} />
|
||||
) : (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
726
dashboard/ui/app/media/page.tsx
Normal file
726
dashboard/ui/app/media/page.tsx
Normal file
@@ -0,0 +1,726 @@
|
||||
"use client";
|
||||
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { StatusBadge } from "@/components/status-badge";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { JellyfinLatestItem, ArrHistoryItem } from "@/lib/types";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
import { EmptyState } from "@/components/empty-state";
|
||||
import { TdarrCard } from "@/components/tdarr-card";
|
||||
|
||||
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 ProwlarrStats {
|
||||
total: number;
|
||||
enabled: number;
|
||||
indexers: { name: string; protocol: string }[];
|
||||
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;
|
||||
}
|
||||
|
||||
interface JellyfinStatus {
|
||||
version: string;
|
||||
server_name: string;
|
||||
libraries: { name: string; type: string }[];
|
||||
active_sessions: {
|
||||
user: string;
|
||||
client: string;
|
||||
device: string;
|
||||
now_playing: string;
|
||||
type: string;
|
||||
}[];
|
||||
idle_sessions: number;
|
||||
}
|
||||
|
||||
interface PlexSession {
|
||||
title: string;
|
||||
type: string;
|
||||
year?: string;
|
||||
player?: string;
|
||||
platform?: string;
|
||||
device?: string;
|
||||
state?: string;
|
||||
local?: boolean;
|
||||
user?: string;
|
||||
bandwidth?: string;
|
||||
location?: string;
|
||||
video_resolution?: string;
|
||||
video_codec?: string;
|
||||
media_bitrate?: string;
|
||||
transcode?: boolean;
|
||||
video_decision?: string;
|
||||
transcode_speed?: string;
|
||||
}
|
||||
|
||||
interface PlexServer {
|
||||
name: string;
|
||||
url: string;
|
||||
online: boolean;
|
||||
sessions: PlexSession[];
|
||||
libraries: { title: string; type: string }[];
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface PlexStatus {
|
||||
servers: PlexServer[];
|
||||
}
|
||||
|
||||
const serverColors: Record<string, string> = {
|
||||
calypso: "text-violet-400",
|
||||
atlantis: "text-blue-400",
|
||||
jellyfin: "text-cyan-400",
|
||||
};
|
||||
|
||||
function colorizeServerName(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
for (const [key, cls] of Object.entries(serverColors)) {
|
||||
if (lower.includes(key)) return cls;
|
||||
}
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
const libraryTypeColors: Record<string, string> = {
|
||||
movies: "text-blue-400",
|
||||
movie: "text-blue-400",
|
||||
tvshows: "text-violet-400",
|
||||
tvshow: "text-violet-400",
|
||||
series: "text-violet-400",
|
||||
music: "text-green-400",
|
||||
anime: "text-pink-400",
|
||||
};
|
||||
|
||||
function getLibraryTypeColor(type: string): string {
|
||||
return libraryTypeColors[type.toLowerCase()] ?? "text-foreground";
|
||||
}
|
||||
|
||||
const serviceNameColors: Record<string, string> = {
|
||||
sonarr: "text-blue-400",
|
||||
radarr: "text-amber-400",
|
||||
prowlarr: "text-violet-400",
|
||||
bazarr: "text-green-400",
|
||||
};
|
||||
|
||||
function formatShortDate(dateStr: string): string {
|
||||
try {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString("en-US", { month: "short", day: "2-digit" });
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
const eventColors: Record<string, string> = {
|
||||
grabbed: "text-blue-400",
|
||||
imported: "text-green-400",
|
||||
downloadfolderimported: "text-green-400",
|
||||
downloadfailed: "text-red-400",
|
||||
deleted: "text-red-400",
|
||||
renamed: "text-amber-400",
|
||||
upgraded: "text-violet-400",
|
||||
};
|
||||
|
||||
function getEventColor(event: string): string {
|
||||
return eventColors[event.toLowerCase()] ?? "text-muted-foreground";
|
||||
}
|
||||
|
||||
const mediaTypeColors: Record<string, string> = {
|
||||
movie: "text-blue-400",
|
||||
episode: "text-violet-400",
|
||||
series: "text-violet-400",
|
||||
season: "text-violet-400",
|
||||
audio: "text-green-400",
|
||||
musicalbum: "text-green-400",
|
||||
};
|
||||
|
||||
export default function MediaPage() {
|
||||
const { data: jellyfin } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
|
||||
const { data: plex } = usePoll<PlexStatus>("/api/plex/status", 30000);
|
||||
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 { data: jellyfinLatest } = usePoll<JellyfinLatestItem[]>("/api/jellyfin/latest", 60000);
|
||||
const { data: sonarrHistory } = usePoll<ArrHistoryItem[]>("/api/sonarr/history", 60000);
|
||||
const { data: radarrHistory } = usePoll<ArrHistoryItem[]>("/api/radarr/history", 60000);
|
||||
|
||||
const sonarr = (sonarrRaw?.records ?? sonarrRaw?.items ?? []) as SonarrQueueItem[];
|
||||
const radarr = (radarrRaw?.records ?? radarrRaw?.items ?? []) as RadarrQueueItem[];
|
||||
const sab = sabRaw?.queue as SabQueue | undefined;
|
||||
|
||||
// Collect all active streams from both Jellyfin and Plex
|
||||
const allStreams: {
|
||||
title: string; player: string; device: string; source: string;
|
||||
transcode?: boolean; bandwidth?: string; state?: string;
|
||||
user?: string; quality?: string; location?: string;
|
||||
}[] = [];
|
||||
|
||||
if (jellyfin?.active_sessions) {
|
||||
for (const s of jellyfin.active_sessions) {
|
||||
allStreams.push({
|
||||
title: s.now_playing,
|
||||
player: s.client,
|
||||
device: s.device,
|
||||
source: `Jellyfin (${jellyfin.server_name})`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (plex?.servers) {
|
||||
for (const server of plex.servers) {
|
||||
for (const s of server.sessions) {
|
||||
const quality = [
|
||||
s.video_resolution?.toUpperCase(),
|
||||
s.video_codec?.toUpperCase(),
|
||||
].filter(Boolean).join(" ");
|
||||
allStreams.push({
|
||||
title: s.title,
|
||||
player: s.player ?? "?",
|
||||
device: s.device ?? s.platform ?? "?",
|
||||
source: `Plex (${server.name})`,
|
||||
transcode: s.transcode,
|
||||
bandwidth: s.bandwidth,
|
||||
state: s.state,
|
||||
user: s.user,
|
||||
quality,
|
||||
location: s.location,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<h1 className="text-lg font-semibold">Media</h1>
|
||||
|
||||
{/* Tdarr Cluster */}
|
||||
<TdarrCard />
|
||||
|
||||
{/* Now Playing Hero */}
|
||||
<Card className="overflow-hidden relative">
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Now Playing</CardTitle>
|
||||
{allStreams.length > 0 && (
|
||||
<Badge variant="outline" className="text-xs border-green-500/30 text-green-400 bg-green-500/5">
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-green-400 mr-1.5 glow-green" />
|
||||
{allStreams.length} stream{allStreams.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{allStreams.length === 0 ? (
|
||||
<EmptyState icon={">"} title="Nothing playing" description="Start something on Jellyfin or Plex" />
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{allStreams.map((stream, i) => (
|
||||
<div key={i} className="rounded-xl bg-white/[0.03] border border-white/[0.06] px-4 py-3 space-y-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<p className="text-base font-semibold text-foreground truncate">{stream.title}</p>
|
||||
{stream.user && (
|
||||
<span className="text-xs text-muted-foreground/80 shrink-0">{stream.user}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08]">
|
||||
{stream.source}
|
||||
</Badge>
|
||||
{stream.state && (
|
||||
<StatusBadge
|
||||
color={stream.state === "playing" ? "green" : "amber"}
|
||||
label={stream.state}
|
||||
/>
|
||||
)}
|
||||
{stream.quality && (
|
||||
<Badge variant="secondary" className="text-xs bg-blue-500/10 border border-blue-500/20 text-blue-400">
|
||||
{stream.quality}
|
||||
</Badge>
|
||||
)}
|
||||
{stream.transcode && (
|
||||
<Badge variant="secondary" className="text-xs bg-amber-500/10 border border-amber-500/20 text-amber-400">
|
||||
Transcoding
|
||||
</Badge>
|
||||
)}
|
||||
{stream.location && (
|
||||
<Badge variant="secondary" className={`text-xs ${stream.location === "lan" ? "bg-green-500/10 border-green-500/20 text-green-400" : "bg-purple-500/10 border-purple-500/20 text-purple-400"}`}>
|
||||
{stream.location.toUpperCase()}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span>{stream.player}</span>
|
||||
<span>·</span>
|
||||
<span>{stream.device}</span>
|
||||
{stream.bandwidth && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{(Number(stream.bandwidth) / 1000).toFixed(1)} Mbps</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Recently Added + Download History */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
{/* Recently Added to Jellyfin */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold text-cyan-400">Recently Added</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!jellyfinLatest ? (
|
||||
<CardSkeleton lines={5} />
|
||||
) : jellyfinLatest.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No recent additions</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{jellyfinLatest.slice(0, 8).map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground font-medium truncate">
|
||||
{item.series ? `${item.series}: ${item.name}` : item.name}
|
||||
{item.year ? ` (${item.year})` : ""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0 ml-3">
|
||||
<span className={`text-xs ${mediaTypeColors[item.type.toLowerCase()] ?? "text-muted-foreground"}`}>
|
||||
{item.type}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/60">
|
||||
{formatShortDate(item.date)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Sonarr History */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className={`text-base font-semibold ${serviceNameColors.sonarr}`}>Sonarr History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!sonarrHistory ? (
|
||||
<CardSkeleton lines={5} />
|
||||
) : sonarrHistory.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No recent activity</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sonarrHistory.slice(0, 8).map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground font-medium truncate">{item.title}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0 ml-3">
|
||||
<span className={`text-xs ${getEventColor(item.event)}`}>{item.event}</span>
|
||||
<span className="text-xs text-muted-foreground/60 font-mono">{item.quality}</span>
|
||||
<span className="text-xs text-muted-foreground/50">{formatShortDate(item.date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Radarr History */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className={`text-base font-semibold ${serviceNameColors.radarr}`}>Radarr History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!radarrHistory ? (
|
||||
<CardSkeleton lines={5} />
|
||||
) : radarrHistory.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No recent activity</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{radarrHistory.slice(0, 8).map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-foreground font-medium truncate">{item.title}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0 ml-3">
|
||||
<span className={`text-xs ${getEventColor(item.event)}`}>{item.event}</span>
|
||||
<span className="text-xs text-muted-foreground/60 font-mono">{item.quality}</span>
|
||||
<span className="text-xs text-muted-foreground/50">{formatShortDate(item.date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Media Servers -- 2 columns */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{/* Jellyfin */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className={`text-base font-semibold ${serverColors.jellyfin}`}>Jellyfin</CardTitle>
|
||||
{jellyfin && (
|
||||
<StatusBadge color="green" label={`v${jellyfin.version}`} />
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!jellyfin ? (
|
||||
<CardSkeleton lines={4} />
|
||||
) : (
|
||||
<>
|
||||
<p className={`text-sm ${colorizeServerName(jellyfin.server_name)}`}>{jellyfin.server_name}</p>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">Libraries</p>
|
||||
{jellyfin.libraries.map((lib) => (
|
||||
<div key={lib.name} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground">{lib.name}</span>
|
||||
<span className={`text-xs font-medium ${getLibraryTypeColor(lib.type)}`}>{lib.type || "library"}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{jellyfin.idle_sessions > 0 && (
|
||||
<p className="text-xs text-muted-foreground/60">
|
||||
{jellyfin.idle_sessions} idle session{jellyfin.idle_sessions > 1 ? "s" : ""}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Plex */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Plex</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{!plex ? (
|
||||
<CardSkeleton lines={4} />
|
||||
) : (
|
||||
plex.servers.map((server) => (
|
||||
<div key={server.name} className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-sm font-medium ${colorizeServerName(server.name)}`}>{server.name}</span>
|
||||
<StatusBadge
|
||||
color={server.online ? "green" : "red"}
|
||||
label={server.online ? "Online" : "Offline"}
|
||||
/>
|
||||
</div>
|
||||
{server.online && server.libraries.length > 0 && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{server.libraries.map((lib, j) => (
|
||||
<div key={j} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground/80">{lib.title}</span>
|
||||
<span className={`text-xs ${getLibraryTypeColor(lib.type)}`}>{lib.type}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{server.error && (
|
||||
<p className="text-xs text-red-400 pl-2">{server.error}</p>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Downloads & Services */}
|
||||
<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-base font-semibold ${serviceNameColors.sonarr}`}>Sonarr Queue</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!sonarr ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : sonarr.length === 0 ? (
|
||||
<EmptyState icon={"v"} title="Queue empty" description="Nothing downloading" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sonarr.map((item, i) => (
|
||||
<div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<p className="text-sm 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-xs text-muted-foreground/70">{item.timeleft}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Radarr Queue */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className={`text-base font-semibold ${serviceNameColors.radarr}`}>Radarr Queue</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!radarr ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : radarr.length === 0 ? (
|
||||
<EmptyState icon={"v"} title="Queue empty" description="Nothing downloading" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{radarr.map((item, i) => (
|
||||
<div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<p className="text-sm 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-xs text-muted-foreground/70">{item.timeleft}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* SABnzbd + Deluge combined Downloads card */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Downloads</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{sab && (
|
||||
<StatusBadge color={sab.paused ? "amber" : "green"} label={sab.paused ? "SAB Paused" : `SAB ${sab.speed}`} />
|
||||
)}
|
||||
{deluge && (
|
||||
<StatusBadge color={deluge.available ? "green" : "red"} label={deluge.available ? "Deluge" : "Deluge Off"} />
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* SABnzbd */}
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">SABnzbd</p>
|
||||
{!sab ? (
|
||||
<CardSkeleton lines={2} />
|
||||
) : sab.slots.length === 0 ? (
|
||||
<EmptyState icon={"v"} title="Queue empty" description="Nothing downloading" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sab.slots.map((item, i) => (
|
||||
<div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
|
||||
<p className="text-sm 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-xs text-muted-foreground/70">{item.timeleft}</span>}
|
||||
</div>
|
||||
{item.progress != null && (
|
||||
<div className="glass-bar-track h-1.5">
|
||||
<div
|
||||
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-cyan-400"
|
||||
style={{ width: `${item.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Deluge */}
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Deluge</p>
|
||||
{!deluge ? (
|
||||
<CardSkeleton lines={2} />
|
||||
) : !deluge.available ? (
|
||||
<p className="text-sm text-red-400">{deluge.error ?? "Unreachable"}</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-3 text-center">
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-foreground">{deluge.total}</p>
|
||||
<p className="text-xs text-muted-foreground">Total</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-blue-400">{deluge.downloading}</p>
|
||||
<p className="text-xs text-muted-foreground">Downloading</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-purple-400">{deluge.seeding}</p>
|
||||
<p className="text-xs text-muted-foreground">Seeding</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Prowlarr + Bazarr combined */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Indexers & Subtitles</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Prowlarr */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className={`text-xs uppercase tracking-wider font-medium ${serviceNameColors.prowlarr}`}>Prowlarr</p>
|
||||
{prowlarr && !prowlarr.error && (
|
||||
<StatusBadge color="green" label={`${prowlarr.enabled} active`} />
|
||||
)}
|
||||
</div>
|
||||
{!prowlarr ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : prowlarr.error ? (
|
||||
<p className="text-sm text-red-400">{prowlarr.error}</p>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-muted-foreground/70">
|
||||
{prowlarr.enabled}/{prowlarr.total} indexers enabled
|
||||
</p>
|
||||
{prowlarr.indexers.slice(0, 5).map((idx, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground truncate">{idx.name}</span>
|
||||
<span className="text-xs text-muted-foreground/60 ml-2 shrink-0">{idx.protocol}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Bazarr */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<p className={`text-xs uppercase tracking-wider font-medium ${serviceNameColors.bazarr}`}>Bazarr</p>
|
||||
{bazarr && !bazarr.error && (
|
||||
<StatusBadge color="green" label={bazarr.version} />
|
||||
)}
|
||||
</div>
|
||||
{!bazarr ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : bazarr.error ? (
|
||||
<p className="text-sm text-red-400">{bazarr.error}</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<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-sm">
|
||||
<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-3 text-sm">
|
||||
<span className="text-muted-foreground/70">SignalR</span>
|
||||
<StatusBadge color={bazarr.sonarr_signalr === "LIVE" ? "green" : "red"} label={`Sonarr ${bazarr.sonarr_signalr}`} />
|
||||
<StatusBadge color={bazarr.radarr_signalr === "LIVE" ? "green" : "red"} label={`Radarr ${bazarr.radarr_signalr ?? ""}`} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Audiobookshelf */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Audiobookshelf</CardTitle>
|
||||
{abs && !abs.error && (
|
||||
<Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08]">
|
||||
{abs.total} items
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!abs ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : abs.error ? (
|
||||
<p className="text-sm text-red-400">{abs.error}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{abs.libraries.map((lib, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<span className="text-foreground font-medium">{lib.name}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl font-bold text-foreground">{lib.items}</span>
|
||||
<span className="text-xs text-muted-foreground">{lib.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
379
dashboard/ui/app/network/page.tsx
Normal file
379
dashboard/ui/app/network/page.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
"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 { Badge } from "@/components/ui/badge";
|
||||
import { DataTable, Column } from "@/components/data-table";
|
||||
import type { CloudflareStats, AuthentikStats, GiteaActivity } from "@/lib/types";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
import { Copyable } from "@/components/copyable";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const nodeColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
"homelab-vm": "text-green-400",
|
||||
"matrix-ubuntu": "text-pink-400",
|
||||
guava: "text-orange-400",
|
||||
seattle: "text-teal-400",
|
||||
jellyfish: "text-indigo-400",
|
||||
};
|
||||
|
||||
function getNodeColor(name: string): string {
|
||||
const lower = name.toLowerCase();
|
||||
for (const [key, cls] of Object.entries(nodeColors)) {
|
||||
if (lower.includes(key)) return cls;
|
||||
}
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
function formatTime(ts: string): string {
|
||||
try {
|
||||
return new Date(ts).toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
const dnsTypeColors: Record<string, string> = {
|
||||
A: "text-blue-400",
|
||||
AAAA: "text-violet-400",
|
||||
CNAME: "text-cyan-400",
|
||||
MX: "text-amber-400",
|
||||
TXT: "text-green-400",
|
||||
SRV: "text-pink-400",
|
||||
NS: "text-teal-400",
|
||||
};
|
||||
|
||||
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 { data: cloudflare } = usePoll<CloudflareStats>("/api/network/cloudflare", 120000);
|
||||
const { data: authentik } = usePoll<AuthentikStats & { users?: Array<{ username: string; last_login: string; active: boolean }> }>("/api/network/authentik", 60000);
|
||||
const { data: gitea } = usePoll<GiteaActivity>("/api/network/gitea", 60000);
|
||||
|
||||
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-cyan-400">{row.domain}</span>,
|
||||
},
|
||||
{
|
||||
key: "answer",
|
||||
label: "Answer",
|
||||
render: (row) => <Copyable text={row.answer} className="text-amber-400 font-mono" />,
|
||||
},
|
||||
];
|
||||
|
||||
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() : "--"; })()}
|
||||
sub="DNS queries"
|
||||
/>
|
||||
<StatCard
|
||||
label="Blocked"
|
||||
value={(() => { const v = adguard?.blocked ?? adguard?.num_blocked_filtering; return v != null ? v.toLocaleString() : "--"; })()}
|
||||
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` : "--"; })()}
|
||||
sub="processing time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Middle: Headscale nodes grid */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-cyan-400">Headscale Nodes</CardTitle>
|
||||
{nodes.length > 0 && (
|
||||
<Badge variant="secondary" className="text-xs bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">
|
||||
{nodes.filter(n => n.online).length}/{nodes.length} online
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{nodes.length === 0 ? (
|
||||
(nodesRaw as Record<string,unknown>)?.error ? <p className="text-sm text-red-400">{String((nodesRaw as Record<string,unknown>).error)}</p> : <CardSkeleton lines={4} />
|
||||
) : (
|
||||
<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 truncate ${getNodeColor(node.name)}`}>{node.name}</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground/70 font-mono">
|
||||
<Copyable text={node.ip_addresses?.[0] ?? node.ip ?? "--"} />
|
||||
</p>
|
||||
{node.last_seen && (
|
||||
<p className="text-xs 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>
|
||||
|
||||
{/* Cloudflare DNS — full width */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-orange-400">Cloudflare DNS</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{cloudflare && (
|
||||
<>
|
||||
<Badge variant="secondary" className="text-xs bg-orange-500/10 border border-orange-500/20 text-orange-400">
|
||||
{cloudflare.proxied} proxied
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08] text-muted-foreground">
|
||||
{cloudflare.dns_only} DNS only
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="text-xs bg-white/[0.04] border border-white/[0.06]">
|
||||
{cloudflare.total} total
|
||||
</Badge>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!cloudflare ? (
|
||||
<CardSkeleton lines={6} />
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Type badges */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.entries(cloudflare.types).map(([type, count]) => (
|
||||
<Badge
|
||||
key={type}
|
||||
variant="secondary"
|
||||
className={`text-xs bg-white/[0.04] border border-white/[0.08] ${dnsTypeColors[type] ?? "text-foreground"}`}
|
||||
>
|
||||
{type}: {count}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
{/* Records table */}
|
||||
{(cloudflare as CloudflareStats & { records?: { name: string; type: string; content: string; proxied: boolean; ttl: number }[] }).records && (
|
||||
<div className="rounded-lg border border-white/[0.06] overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-white/[0.04] text-xs text-muted-foreground uppercase tracking-wider">
|
||||
<th className="text-left px-3 py-2 font-medium">Name</th>
|
||||
<th className="text-left px-3 py-2 font-medium w-16">Type</th>
|
||||
<th className="text-left px-3 py-2 font-medium">Content</th>
|
||||
<th className="text-center px-3 py-2 font-medium w-20">Proxy</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{((cloudflare as CloudflareStats & { records?: { name: string; type: string; content: string; proxied: boolean; ttl: number }[] }).records ?? []).map((rec, i) => (
|
||||
<tr key={i} className="border-t border-white/[0.04] hover:bg-white/[0.03] transition-colors">
|
||||
<td className="px-3 py-1.5 text-cyan-400 font-mono text-xs truncate max-w-[220px]">{rec.name}</td>
|
||||
<td className="px-3 py-1.5">
|
||||
<span className={`text-xs font-medium ${dnsTypeColors[rec.type] ?? ""}`}>{rec.type}</span>
|
||||
</td>
|
||||
<td className="px-3 py-1.5 text-amber-400/80 font-mono text-xs truncate max-w-[200px]"><Copyable text={rec.content} /></td>
|
||||
<td className="px-3 py-1.5 text-center">
|
||||
{rec.proxied ? (
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-orange-400" style={{ boxShadow: "0 0 6px rgba(251,146,60,0.5)" }} title="Proxied" />
|
||||
) : (
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-gray-500" title="DNS Only" />
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Authentik, Gitea -- 2 columns */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
|
||||
{/* Authentik SSO */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-violet-400">Authentik SSO</CardTitle>
|
||||
{authentik && (
|
||||
<Badge variant="secondary" className="text-xs bg-violet-500/10 border border-violet-500/20 text-violet-400">
|
||||
{authentik.active_sessions} sessions
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!authentik ? (
|
||||
<CardSkeleton lines={4} />
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Users */}
|
||||
{authentik.users && authentik.users.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Users</p>
|
||||
<div className="space-y-2">
|
||||
{authentik.users.map((u, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge color={u.active ? "green" : "red"} />
|
||||
<span className="text-violet-400 font-medium">{u.username}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground/60">
|
||||
{u.last_login === "never" ? "never" : u.last_login.slice(0, 10)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(authentik.recent_events ?? []).length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Events</p>
|
||||
<div className="space-y-2">
|
||||
{(authentik.recent_events ?? []).slice(0, 6).map((evt, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<StatusBadge
|
||||
color={String(evt.action).includes("login") ? "green" : String(evt.action).includes("fail") ? "red" : "blue"}
|
||||
label={String(evt.action)}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground/60 truncate">{String(evt.user ?? "")}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground/50 shrink-0 ml-2">
|
||||
{String(evt.created ?? "").slice(11, 16)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(authentik.recent_events ?? []).length === 0 && !(authentik.users?.length) && (
|
||||
<p className="text-sm text-muted-foreground/60">No recent activity</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Gitea Activity */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold text-green-400">Gitea</CardTitle>
|
||||
{gitea && gitea.open_prs.length > 0 && (
|
||||
<Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
|
||||
{gitea.open_prs.length} open PR{gitea.open_prs.length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!gitea ? (
|
||||
<CardSkeleton lines={4} />
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{gitea.commits.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Commits</p>
|
||||
<div className="space-y-2">
|
||||
{gitea.commits.slice(0, 6).map((c, i) => (
|
||||
<div key={i} className="text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-amber-400 font-mono text-xs shrink-0">{c.sha.slice(0, 7)}</span>
|
||||
<span className="text-foreground truncate">{c.message.split("\n")[0]}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-muted-foreground/60">{c.author}</span>
|
||||
<span className="text-xs text-muted-foreground/40">{formatTime(c.date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{gitea.open_prs.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Open PRs</p>
|
||||
<div className="space-y-1.5">
|
||||
{gitea.open_prs.map((pr, i) => (
|
||||
<div key={i} className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-green-400 font-mono text-xs shrink-0">#{pr.number}</span>
|
||||
<span className="text-foreground truncate">{pr.title}</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground/60 shrink-0 ml-2">{pr.author}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Bottom: DNS rewrites table */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">DNS Rewrites</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<DataTable<DnsRewrite>
|
||||
data={rewrites}
|
||||
columns={rewriteColumns}
|
||||
searchKey="domain"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
301
dashboard/ui/app/page.tsx
Normal file
301
dashboard/ui/app/page.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { postAPI } from "@/lib/api";
|
||||
import type { OverviewStats, HealthScore, DiskUsageEntry } 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 { CalendarCard } from "@/components/calendar-card";
|
||||
import { HostRow } from "@/components/host-card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CardSkeleton, TableSkeleton } from "@/components/skeleton";
|
||||
|
||||
/* --- Quick Action Button --- */
|
||||
interface ActionButtonProps {
|
||||
label: string;
|
||||
endpoint: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
function ActionButton({ label, endpoint, icon }: ActionButtonProps) {
|
||||
const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");
|
||||
|
||||
const run = useCallback(async () => {
|
||||
setState("loading");
|
||||
try {
|
||||
await postAPI(endpoint);
|
||||
setState("success");
|
||||
} catch {
|
||||
setState("error");
|
||||
}
|
||||
setTimeout(() => setState("idle"), 2000);
|
||||
}, [endpoint]);
|
||||
|
||||
const bg =
|
||||
state === "loading"
|
||||
? "bg-white/[0.08] cursor-wait"
|
||||
: state === "success"
|
||||
? "bg-green-500/15 border-green-500/30"
|
||||
: state === "error"
|
||||
? "bg-red-500/15 border-red-500/30"
|
||||
: "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]";
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={run}
|
||||
disabled={state === "loading"}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${bg}`}
|
||||
>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 rounded bg-white/[0.08] text-muted-foreground">{icon}</span>
|
||||
<span>
|
||||
{state === "loading"
|
||||
? "Running..."
|
||||
: state === "success"
|
||||
? "Done!"
|
||||
: state === "error"
|
||||
? "Failed"
|
||||
: label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Organizer Toggle --- */
|
||||
function OrganizerToggle() {
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [state, setState] = useState<"idle" | "loading">("idle");
|
||||
|
||||
const toggle = useCallback(async () => {
|
||||
setState("loading");
|
||||
try {
|
||||
if (paused) {
|
||||
await postAPI("/api/actions/resume-organizers");
|
||||
setPaused(false);
|
||||
} else {
|
||||
await postAPI("/api/actions/pause-organizers");
|
||||
setPaused(true);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
setState("idle");
|
||||
}, [paused]);
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggle}
|
||||
disabled={state === "loading"}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${
|
||||
paused
|
||||
? "bg-amber-500/15 border-amber-500/30 hover:bg-amber-500/25"
|
||||
: "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]"
|
||||
}`}
|
||||
>
|
||||
<span>{paused ? ">" : "||"}</span>
|
||||
<span>
|
||||
{state === "loading" ? "..." : paused ? "Resume Organizers" : "Pause Organizers"}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* --- Disk Usage Bar --- */
|
||||
function DiskBar({ entry }: { entry: DiskUsageEntry }) {
|
||||
const color =
|
||||
entry.used_pct >= 85
|
||||
? "from-red-500 to-red-400"
|
||||
: entry.used_pct >= 70
|
||||
? "from-amber-500 to-amber-400"
|
||||
: "from-green-500 to-emerald-400";
|
||||
|
||||
const hostColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
homelab: "text-green-400",
|
||||
guava: "text-orange-400",
|
||||
seattle: "text-teal-400",
|
||||
};
|
||||
const hostCls =
|
||||
hostColors[entry.host.toLowerCase()] ?? "text-foreground";
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className={`font-medium ${hostCls}`}>{entry.host}</span>
|
||||
<span className="text-muted-foreground/60 font-mono text-xs truncate">
|
||||
{entry.mount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{entry.total_gb >= 1000
|
||||
? `${(entry.total_gb / 1000).toFixed(1)} TB`
|
||||
: `${Math.round(entry.total_gb)} GB`}
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums-transition">
|
||||
{entry.used_pct}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="glass-bar-track h-2">
|
||||
<div
|
||||
className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
|
||||
style={{ width: `${entry.used_pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
|
||||
const { data: health } = usePoll<HealthScore>("/api/health-score", 60000);
|
||||
const { data: disks } = usePoll<DiskUsageEntry[]>("/api/disk-usage", 300000);
|
||||
|
||||
// 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;
|
||||
const totalHosts = Object.keys(endpoints).length;
|
||||
|
||||
// Top 5 most-used disks
|
||||
const topDisks = disks
|
||||
? [...disks].sort((a, b) => b.used_pct - a.used_pct).slice(0, 5)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Row 1: Stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<StatCard
|
||||
label="Health"
|
||||
value={health ? `${health.score}` : "—"}
|
||||
color={
|
||||
health
|
||||
? health.score >= 80
|
||||
? "green"
|
||||
: health.score >= 60
|
||||
? "amber"
|
||||
: "amber"
|
||||
: "blue"
|
||||
}
|
||||
gauge={health ? health.score : undefined}
|
||||
sub={health ? `Grade: ${health.grade}` : undefined}
|
||||
/>
|
||||
<StatCard
|
||||
label="Containers"
|
||||
value={data ? `${running}/${data.containers.total}` : "—"}
|
||||
color="blue"
|
||||
sub={data ? "running / total" : undefined}
|
||||
/>
|
||||
<StatCard
|
||||
label="Hosts Online"
|
||||
value={data ? hostsOnline : "—"}
|
||||
color="green"
|
||||
sub="endpoints"
|
||||
/>
|
||||
<StatCard
|
||||
label="GPU — RTX 5090"
|
||||
value={
|
||||
data?.gpu?.available
|
||||
? `${gpuPct ?? 0}%`
|
||||
: "—"
|
||||
}
|
||||
color="violet"
|
||||
gauge={data?.gpu?.available ? gpuPct : undefined}
|
||||
sub={data?.gpu?.available ? `${data.gpu.temp_c ?? "—"}°C · ${data.gpu.power_w ?? data.gpu.power_draw_w ?? "—"}W` : "unavailable"}
|
||||
/>
|
||||
<StatCard
|
||||
label="Emails Today"
|
||||
value={data ? emailCount : "—"}
|
||||
color="amber"
|
||||
sub="processed"
|
||||
/>
|
||||
<StatCard
|
||||
label="Alerts"
|
||||
value={data ? alertCount : "—"}
|
||||
color="emerald"
|
||||
sub="active"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Row 1.5: Quick Actions */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mr-1">
|
||||
Quick Actions
|
||||
</span>
|
||||
<ActionButton label="Restart Jellyfin" endpoint="/api/actions/restart-jellyfin" icon="JF" />
|
||||
<ActionButton label="Restart Ollama" endpoint="/api/actions/restart-ollama" icon="AI" />
|
||||
<OrganizerToggle />
|
||||
<ActionButton label="Run Backup" endpoint="/api/actions/run-backup" icon="BK" />
|
||||
</div>
|
||||
|
||||
{/* Row 2: Calendar + Activity Feed */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<CalendarCard />
|
||||
<ActivityFeed />
|
||||
</div>
|
||||
|
||||
{/* Row 3: Jellyfin + GPU + Hosts */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<JellyfinCard />
|
||||
<OllamaCard />
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">
|
||||
Hosts {data ? `(${hostsOnline}/${totalHosts} online)` : ""}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data ? (
|
||||
<div className="divide-y divide-white/[0.06]">
|
||||
{Object.entries(endpoints).map(([name, info]) => (
|
||||
<HostRow
|
||||
key={name}
|
||||
name={name}
|
||||
running={info.running}
|
||||
total={info.total}
|
||||
error={info.error}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<CardSkeleton lines={5} />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Row 4: Storage / Disk Usage */}
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Storage</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!disks ? (
|
||||
<CardSkeleton lines={5} />
|
||||
) : topDisks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground/60">No disk data</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{topDisks.map((d, i) => (
|
||||
<DiskBar key={`${d.host}-${d.mount}-${i}`} entry={d} />
|
||||
))}
|
||||
</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": {}
|
||||
}
|
||||
198
dashboard/ui/components/activity-feed.tsx
Normal file
198
dashboard/ui/components/activity-feed.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
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 green = { bg: "#22c55e", shadow: "0 0 8px rgba(34, 197, 94, 0.4)" };
|
||||
const blue = { bg: "#3b82f6", shadow: "0 0 8px rgba(59, 130, 246, 0.4)" };
|
||||
const amber = { bg: "#f59e0b", shadow: "0 0 8px rgba(245, 158, 11, 0.4)" };
|
||||
const red = { bg: "#ef4444", shadow: "0 0 8px rgba(239, 68, 68, 0.4)" };
|
||||
const purple = { bg: "#a855f7", shadow: "0 0 8px rgba(168, 85, 247, 0.4)" };
|
||||
|
||||
const typeColors: Record<string, { bg: string; shadow: string }> = {
|
||||
stack_healthy: green,
|
||||
backup_result: green,
|
||||
drift_clean: green,
|
||||
cron_complete: green,
|
||||
disk_scan_complete: green,
|
||||
email_classified: blue,
|
||||
email_classifying: blue,
|
||||
email_cached: blue,
|
||||
start: blue,
|
||||
receipt_extracted: amber,
|
||||
container_restarted: amber,
|
||||
restart_analysis: amber,
|
||||
container_unhealthy: red,
|
||||
drift_found: red,
|
||||
disk_warning: red,
|
||||
error: red,
|
||||
changelog_generated: purple,
|
||||
changelog_commits: purple,
|
||||
pr_reviewed: purple,
|
||||
};
|
||||
const defaultDot = { bg: "#6b7280", shadow: "none" };
|
||||
|
||||
function formatTime(ts: string) {
|
||||
try {
|
||||
return new Date(ts).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
const feedCategoryColors: Record<string, string> = {
|
||||
receipts: "text-amber-400",
|
||||
newsletters: "text-blue-400",
|
||||
accounts: "text-violet-400",
|
||||
spam: "text-red-400",
|
||||
personal: "text-green-400",
|
||||
finance: "text-emerald-400",
|
||||
work: "text-cyan-400",
|
||||
promotions: "text-amber-400",
|
||||
social: "text-purple-400",
|
||||
};
|
||||
|
||||
function getCategoryColor(cat: string): string {
|
||||
const lower = cat.toLowerCase();
|
||||
for (const [key, cls] of Object.entries(feedCategoryColors)) {
|
||||
if (lower.includes(key)) return cls;
|
||||
}
|
||||
return "text-foreground";
|
||||
}
|
||||
|
||||
function EventMessage({ event }: { event: ActivityEvent }): React.ReactElement {
|
||||
switch (event.type) {
|
||||
case "email_classified": {
|
||||
const cat = String(event.category ?? "?");
|
||||
return (
|
||||
<span>
|
||||
Classified as <span className={getCategoryColor(cat)}>{cat}</span>
|
||||
{event.label ? ` - ${String(event.label)}` : ""}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
case "email_classifying":
|
||||
return <span>[{String(event.progress ?? "?")}] Classifying: {String(event.subject ?? "?")}</span>;
|
||||
case "email_cached": {
|
||||
const cat = String(event.category ?? "?");
|
||||
return (
|
||||
<span>
|
||||
Cached: {String(event.subject ?? "?")} → <span className={getCategoryColor(cat)}>{cat}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
case "receipt_extracted":
|
||||
return (
|
||||
<span>
|
||||
Receipt: {String(event.vendor ?? "?")} <span className="text-green-400">${String(event.amount ?? "?")}</span>
|
||||
</span>
|
||||
);
|
||||
case "container_restarted":
|
||||
return (
|
||||
<span>
|
||||
Restarted <span className="text-cyan-400">{String(event.container)}</span> on {String(event.endpoint)}
|
||||
</span>
|
||||
);
|
||||
case "container_unhealthy":
|
||||
return event.container ? (
|
||||
<span>
|
||||
Unhealthy: <span className="text-cyan-400">{String(event.container)}</span> on {String(event.endpoint)}
|
||||
</span>
|
||||
) : (
|
||||
<span>{String(event.raw ?? "Unhealthy container detected")}</span>
|
||||
);
|
||||
case "backup_result":
|
||||
return <span>Backup: {String(event.status ?? "?")}</span>;
|
||||
case "drift_clean":
|
||||
return <span>Config drift check: <span className="text-green-400">all clean</span></span>;
|
||||
case "drift_found":
|
||||
return <span>Config drift: {String(event.drifts ?? "?")} drifts in {String(event.services ?? "?")} services</span>;
|
||||
case "cron_complete":
|
||||
return <span>Automation run completed</span>;
|
||||
case "stack_healthy":
|
||||
return <span>All containers <span className="text-green-400">healthy</span></span>;
|
||||
case "disk_warning":
|
||||
return <span>Disk warning: {String(event.days)} days remaining</span>;
|
||||
case "disk_scan_complete":
|
||||
return <span>Disk scan: {String(event.count)} filesystems checked</span>;
|
||||
case "pr_reviewed":
|
||||
return <span>AI reviewed PR <span className="text-violet-400">#{String(event.pr)}</span></span>;
|
||||
case "changelog_generated":
|
||||
return <span>Changelog: {String(event.commits)} commits</span>;
|
||||
case "changelog_commits":
|
||||
return <span>{String(event.count)} new commits found</span>;
|
||||
case "restart_analysis":
|
||||
return (
|
||||
<span>
|
||||
LLM says {String(event.decision)} for <span className="text-cyan-400">{String(event.container)}</span>
|
||||
</span>
|
||||
);
|
||||
default: {
|
||||
if (typeof event.raw === "string") {
|
||||
const cleaned = event.raw.replace(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},?\d*\s+\S+\s+/, "");
|
||||
return <span>{cleaned}</span>;
|
||||
}
|
||||
return <span>{event.type} from {event.source}</span>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function ActivityFeed() {
|
||||
const events = useSSE("/api/activity");
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden relative">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
<CardTitle className="text-base font-semibold">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"
|
||||
style={{
|
||||
background: (typeColors[event.type] ?? defaultDot).bg,
|
||||
boxShadow: (typeColors[event.type] ?? defaultDot).shadow,
|
||||
}}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-foreground truncate">
|
||||
<EventMessage event={event} />
|
||||
</p>
|
||||
<p className="text-muted-foreground/70">
|
||||
{formatTime(event.timestamp)} · {event.source}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
55
dashboard/ui/components/calendar-card.tsx
Normal file
55
dashboard/ui/components/calendar-card.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
import { EmptyState } from "@/components/empty-state";
|
||||
|
||||
interface CalEvent {
|
||||
summary: string;
|
||||
date: string;
|
||||
time: string;
|
||||
location?: string;
|
||||
start: string;
|
||||
}
|
||||
|
||||
export function CalendarCard() {
|
||||
const { data } = usePoll<{ events: CalEvent[]; total?: number }>("/api/calendar", 300000); // 5min
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-sm font-medium">Calendar</CardTitle>
|
||||
{data?.total != null && (
|
||||
<span className="text-[10px] text-muted-foreground">{data.total} upcoming</span>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!data ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : data.events.length === 0 ? (
|
||||
<EmptyState icon={"o"} title="No upcoming events" description="Your calendar is clear" />
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{data.events.map((event, i) => (
|
||||
<div key={i} className="flex gap-3 items-start">
|
||||
<div className="text-center min-w-[44px] rounded-lg bg-white/[0.04] border border-white/[0.06] px-2 py-1.5">
|
||||
<p className="text-[10px] font-medium text-blue-400">{event.date.split(" ")[0]}</p>
|
||||
<p className="text-lg font-bold leading-none">{event.date.split(" ")[1]}</p>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-medium text-foreground truncate">{event.summary}</p>
|
||||
<p className="text-[10px] text-muted-foreground">{event.time}</p>
|
||||
{event.location && (
|
||||
<p className="text-[10px] text-muted-foreground/60 truncate">{event.location}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
153
dashboard/ui/components/command-search.tsx
Normal file
153
dashboard/ui/components/command-search.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface SearchResult {
|
||||
type: "page" | "container" | "node" | "dns" | "action";
|
||||
title: string;
|
||||
description?: string;
|
||||
href?: string;
|
||||
action?: () => void;
|
||||
}
|
||||
|
||||
const PAGES: SearchResult[] = [
|
||||
{ type: "page", title: "Dashboard", href: "/" },
|
||||
{ type: "page", title: "Infrastructure", href: "/infrastructure" },
|
||||
{ type: "page", title: "Media", href: "/media" },
|
||||
{ type: "page", title: "Automations", href: "/automations" },
|
||||
{ type: "page", title: "Expenses", href: "/expenses" },
|
||||
{ type: "page", title: "Network", href: "/network" },
|
||||
{ type: "page", title: "Logs", href: "/logs" },
|
||||
];
|
||||
|
||||
export function CommandSearch() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [query, setQuery] = useState("");
|
||||
const [results, setResults] = useState<SearchResult[]>([]);
|
||||
const [selected, setSelected] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const router = useRouter();
|
||||
|
||||
// Open on Cmd+K / Ctrl+K
|
||||
useEffect(() => {
|
||||
function handler(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
setOpen(prev => !prev);
|
||||
}
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
window.addEventListener("keydown", handler);
|
||||
return () => window.removeEventListener("keydown", handler);
|
||||
}, []);
|
||||
|
||||
// Focus input when opened
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setQuery("");
|
||||
setSelected(0);
|
||||
setTimeout(() => inputRef.current?.focus(), 50);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// Search
|
||||
useEffect(() => {
|
||||
if (!query.trim()) {
|
||||
setResults(PAGES);
|
||||
return;
|
||||
}
|
||||
const q = query.toLowerCase();
|
||||
const filtered = PAGES.filter(p => p.title.toLowerCase().includes(q));
|
||||
|
||||
// Also search for dynamic items (async fetch could go here in future)
|
||||
// For now just do page search + some action shortcuts
|
||||
const actions: SearchResult[] = [];
|
||||
if ("restart".includes(q) || "jellyfin".includes(q)) {
|
||||
actions.push({ type: "action", title: "Restart Jellyfin", description: "Restart Jellyfin on Olares" });
|
||||
}
|
||||
if ("restart".includes(q) || "ollama".includes(q)) {
|
||||
actions.push({ type: "action", title: "Restart Ollama", description: "Restart Ollama on Olares" });
|
||||
}
|
||||
if ("backup".includes(q)) {
|
||||
actions.push({ type: "action", title: "Run Backup", description: "Run email backup now" });
|
||||
}
|
||||
|
||||
setResults([...filtered, ...actions]);
|
||||
setSelected(0);
|
||||
}, [query]);
|
||||
|
||||
const execute = useCallback((result: SearchResult) => {
|
||||
setOpen(false);
|
||||
if (result.href) router.push(result.href);
|
||||
if (result.action) result.action();
|
||||
}, [router]);
|
||||
|
||||
// Keyboard nav
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); setSelected(s => Math.min(s + 1, results.length - 1)); }
|
||||
if (e.key === "ArrowUp") { e.preventDefault(); setSelected(s => Math.max(s - 1, 0)); }
|
||||
if (e.key === "Enter" && results[selected]) { execute(results[selected]); }
|
||||
}, [results, selected, execute]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const typeIcons: Record<string, string> = {
|
||||
page: "->", container: "[]", node: "(o)", dns: "<>", action: "!",
|
||||
};
|
||||
const typeColors: Record<string, string> = {
|
||||
page: "text-blue-400", container: "text-cyan-400", node: "text-green-400",
|
||||
dns: "text-amber-400", action: "text-violet-400",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[200]" onClick={() => setOpen(false)} />
|
||||
<div className="fixed top-[20%] left-1/2 -translate-x-1/2 w-full max-w-lg z-[201]">
|
||||
<div className="rounded-2xl overflow-hidden shadow-2xl" style={{
|
||||
background: "rgba(10, 10, 25, 0.95)",
|
||||
border: "1px solid rgba(255,255,255,0.12)",
|
||||
backdropFilter: "blur(30px)",
|
||||
}}>
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.08]">
|
||||
<span className="text-muted-foreground text-sm">Ctrl+K</span>
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Search pages, containers, actions..."
|
||||
className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 outline-none"
|
||||
style={{ color: "#f1f5f9" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="max-h-[300px] overflow-y-auto py-1">
|
||||
{results.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground/60 text-center py-6">No results</p>
|
||||
)}
|
||||
{results.map((r, i) => (
|
||||
<button
|
||||
key={`${r.type}-${r.title}`}
|
||||
onClick={() => execute(r)}
|
||||
className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
|
||||
i === selected ? "bg-white/[0.08]" : "hover:bg-white/[0.04]"
|
||||
}`}
|
||||
>
|
||||
<span className={`text-sm ${typeColors[r.type] ?? ""}`}>{typeIcons[r.type] ?? "·"}</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium" style={{ color: "#f1f5f9" }}>{r.title}</p>
|
||||
{r.description && <p className="text-xs text-muted-foreground/60 truncate">{r.description}</p>}
|
||||
</div>
|
||||
<span className="ml-auto text-[10px] text-muted-foreground/40 capitalize">{r.type}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="px-4 py-2 border-t border-white/[0.06] flex gap-4 text-[10px] text-muted-foreground/40">
|
||||
<span>Up/Down navigate</span>
|
||||
<span>Enter select</span>
|
||||
<span>esc close</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
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/${containerId}/logs?endpoint=${endpoint}&tail=200`
|
||||
)
|
||||
.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>
|
||||
);
|
||||
}
|
||||
22
dashboard/ui/components/copyable.tsx
Normal file
22
dashboard/ui/components/copyable.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
import { useState, useCallback } from "react";
|
||||
|
||||
export function Copyable({ text, className = "" }: { text: string; className?: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const copy = useCallback(() => {
|
||||
navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
}, [text]);
|
||||
|
||||
return (
|
||||
<span
|
||||
onClick={copy}
|
||||
className={`cursor-pointer hover:underline decoration-dotted underline-offset-2 ${className}`}
|
||||
title="Click to copy"
|
||||
>
|
||||
{copied ? "OK copied" : text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
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-sm 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-sm 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-sm text-muted-foreground/80">
|
||||
{col.label}
|
||||
</TableHead>
|
||||
))}
|
||||
{actions && <TableHead className="text-sm 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-sm">
|
||||
{col.render
|
||||
? col.render(row)
|
||||
: String(row[col.key] ?? "")}
|
||||
</TableCell>
|
||||
))}
|
||||
{actions && (
|
||||
<TableCell className="text-sm">{actions(row)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
dashboard/ui/components/empty-state.tsx
Normal file
15
dashboard/ui/components/empty-state.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
interface EmptyStateProps {
|
||||
icon?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export function EmptyState({ icon = "--", title, description }: EmptyStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<span className="text-3xl mb-2 opacity-30">{icon}</span>
|
||||
<p className="text-sm font-medium text-muted-foreground">{title}</p>
|
||||
{description && <p className="text-xs text-muted-foreground/60 mt-1">{description}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
88
dashboard/ui/components/host-card.tsx
Normal file
88
dashboard/ui/components/host-card.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { StatusBadge } from "./status-badge";
|
||||
|
||||
const hostColors: Record<string, string> = {
|
||||
atlantis: "text-blue-400",
|
||||
calypso: "text-violet-400",
|
||||
olares: "text-emerald-400",
|
||||
nuc: "text-amber-400",
|
||||
rpi5: "text-cyan-400",
|
||||
};
|
||||
|
||||
const hostDescriptions: Record<string, string> = {
|
||||
atlantis: "NAS · media stack",
|
||||
calypso: "DNS · SSO · Headscale",
|
||||
olares: "K3s · 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_16px_rgba(239,68,68,0.05)]"
|
||||
: running > 0
|
||||
? "hover:shadow-[0_0_16px_rgba(34,197,94,0.05)]"
|
||||
: "hover:shadow-[0_0_16px_rgba(245,158,11,0.05)]";
|
||||
|
||||
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 capitalize ${hostColors[name] ?? "text-foreground"}`}>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
export function HostRow({ name, running, total, error }: HostCardProps) {
|
||||
const isOlares = name === "olares";
|
||||
return (
|
||||
<div className="flex items-center justify-between py-2 px-1 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`w-2 h-2 rounded-full ${error ? "bg-red-500" : "bg-green-500"}`}
|
||||
style={{
|
||||
boxShadow: error
|
||||
? "0 0 6px rgba(239,68,68,0.5)"
|
||||
: "0 0 6px rgba(34,197,94,0.5)",
|
||||
}}
|
||||
/>
|
||||
<span className={`font-medium capitalize ${hostColors[name] ?? "text-foreground"}`}>{name}</span>
|
||||
</div>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{isOlares && !total ? "K3s + GPU" : `${running}/${total}`}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
import { EmptyState } from "@/components/empty-state";
|
||||
|
||||
export function JellyfinCard() {
|
||||
const { data } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-semibold">Jellyfin</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!data ? (
|
||||
<CardSkeleton lines={4} />
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-xs 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-sm rounded-lg bg-white/[0.03] px-3 py-2">
|
||||
<p className="text-foreground font-medium">{s.title}</p>
|
||||
<p className="text-sm text-muted-foreground/70">
|
||||
{s.user} · {s.device}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState icon={">"} title="Nothing playing" description="Start something on Jellyfin" />
|
||||
)}
|
||||
</div>
|
||||
<div className="h-px bg-white/[0.06]" />
|
||||
<div>
|
||||
<p className="text-xs 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-sm"
|
||||
>
|
||||
<span className="text-foreground">{lib.name}</span>
|
||||
<StatusBadge color="green" label={lib.type} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{data.idle_sessions > 0 && (
|
||||
<p className="text-xs 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;
|
||||
}
|
||||
105
dashboard/ui/components/nav.tsx
Normal file
105
dashboard/ui/components/nav.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { RefreshIndicator } from "@/components/refresh-indicator";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
|
||||
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" style={{
|
||||
background: "var(--nav-bg)",
|
||||
backdropFilter: "blur(30px) saturate(180%)",
|
||||
WebkitBackdropFilter: "blur(30px) saturate(180%)",
|
||||
borderBottom: "1px solid var(--nav-border)",
|
||||
}}>
|
||||
{/* Accent gradient line at very top */}
|
||||
<div className="h-[2px] w-full" style={{
|
||||
background: `linear-gradient(90deg, var(--accent-color, #3b82f6), rgba(139,92,246,0.8), var(--accent-color, #3b82f6))`,
|
||||
opacity: 0.6,
|
||||
}} />
|
||||
<div className="flex items-center justify-between px-6 h-12">
|
||||
<div className="flex items-center gap-5">
|
||||
<Link href="/" className="flex items-center gap-2.5 group">
|
||||
<div className="w-8 h-8 rounded-[10px] bg-gradient-to-br from-blue-500 via-violet-500 to-pink-500 flex items-center justify-center text-white font-bold text-sm animate-logo-float transition-all group-hover:scale-105" style={{ boxShadow: "0 0 20px var(--accent-glow, rgba(139, 92, 246, 0.3))" }}>
|
||||
H
|
||||
</div>
|
||||
<span className="font-semibold hidden sm:inline" style={{ color: "#f1f5f9" }}>Homelab</span>
|
||||
</Link>
|
||||
<div className="h-5 w-px bg-white/10 hidden sm:block" />
|
||||
<div className="flex items-center gap-0.5">
|
||||
{tabs.map((tab) => {
|
||||
const isActive =
|
||||
tab.href === "/"
|
||||
? pathname === "/"
|
||||
: pathname.startsWith(tab.href);
|
||||
return (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
className={cn(
|
||||
"px-2.5 py-1.5 text-xs rounded-md transition-all duration-200 whitespace-nowrap",
|
||||
isActive
|
||||
? "font-medium"
|
||||
: "hover:text-foreground"
|
||||
)}
|
||||
style={
|
||||
isActive
|
||||
? {
|
||||
background: "var(--nav-active)",
|
||||
color: "#f1f5f9",
|
||||
boxShadow: "var(--nav-active-glow, 0 2px 10px rgba(59,130,246,0.2))",
|
||||
}
|
||||
: { color: "rgba(148, 163, 184, 0.8)" }
|
||||
}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.background = "var(--nav-hover)";
|
||||
e.currentTarget.style.color = "#e2e8f0";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!isActive) {
|
||||
e.currentTarget.style.background = "";
|
||||
e.currentTarget.style.color = "rgba(148, 163, 184, 0.8)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<kbd className="hidden sm:inline-flex items-center gap-1 rounded-md border border-white/[0.1] bg-white/[0.04] px-2 py-0.5 text-[10px] text-muted-foreground/60 cursor-pointer hover:bg-white/[0.08] transition-colors" onClick={() => window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }))}>
|
||||
Ctrl+K
|
||||
</kbd>
|
||||
<ThemeSwitcher />
|
||||
<div className="h-5 w-px bg-white/10 hidden md:block" />
|
||||
<span className="text-[11px] hidden md:inline" style={{ color: "rgba(148, 163, 184, 0.6)" }}>{today}</span>
|
||||
<RefreshIndicator />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
117
dashboard/ui/components/ollama-card.tsx
Normal file
117
dashboard/ui/components/ollama-card.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"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";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
|
||||
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-base font-semibold">LLM / GPU</CardTitle>
|
||||
{data && (
|
||||
<StatusBadge
|
||||
color={ollamaUp ? "green" : "red"}
|
||||
label={ollamaUp ? "Online" : "Offline"}
|
||||
/>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{!data ? (
|
||||
<CardSkeleton lines={3} />
|
||||
) : 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}%`, boxShadow: "0 0 12px rgba(139, 92, 246, 0.3)" }}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
90
dashboard/ui/components/ollama-chat.tsx
Normal file
90
dashboard/ui/components/ollama-chat.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"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" style={{ background: "rgba(10, 10, 25, 0.95)", backdropFilter: "blur(30px)", border: "1px solid rgba(139, 92, 246, 0.2)" }}>
|
||||
<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 && (
|
||||
<div className="text-center py-3 space-y-2">
|
||||
<p className="text-muted-foreground/60">Ask about your homelab...</p>
|
||||
<div className="flex flex-wrap gap-1 justify-center">
|
||||
{["How many containers?", "GPU status?", "What's unhealthy?", "Disk space?"].map(q => (
|
||||
<button key={q} onClick={() => { setInput(q); }} className="text-[10px] px-2 py-1 rounded-md bg-white/[0.04] border border-white/[0.06] hover:bg-white/[0.08] transition-colors text-muted-foreground">
|
||||
{q}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{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>
|
||||
);
|
||||
}
|
||||
39
dashboard/ui/components/skeleton.tsx
Normal file
39
dashboard/ui/components/skeleton.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
export function Skeleton({ className = "", style }: { className?: string; style?: React.CSSProperties }) {
|
||||
return (
|
||||
<div className={`animate-pulse rounded-lg bg-white/[0.06] ${className}`} style={style} />
|
||||
);
|
||||
}
|
||||
|
||||
export function StatCardSkeleton() {
|
||||
return (
|
||||
<div className="rounded-2xl border border-white/[0.08] p-5 space-y-3" style={{ background: "rgba(15,20,35,0.35)" }}>
|
||||
<Skeleton className="h-3 w-20" />
|
||||
<Skeleton className="h-8 w-24" />
|
||||
<Skeleton className="h-3 w-32" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardSkeleton({ lines = 4, className = "" }: { lines?: number; className?: string }) {
|
||||
return (
|
||||
<div className={`rounded-2xl border border-white/[0.08] p-5 space-y-3 ${className}`} style={{ background: "rgba(15,20,35,0.35)" }}>
|
||||
<Skeleton className="h-4 w-32 mb-2" />
|
||||
{Array.from({ length: lines }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-3" style={{ width: `${70 + Math.random() * 30}%` }} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TableSkeleton({ rows = 5 }: { rows?: number }) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-full rounded-lg" />
|
||||
{Array.from({ length: rows }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-6 w-full rounded" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
134
dashboard/ui/components/stat-card.tsx
Normal file
134
dashboard/ui/components/stat-card.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
type StatColor = "blue" | "green" | "violet" | "amber" | "emerald";
|
||||
|
||||
const gradientMap: Record<StatColor, string> = {
|
||||
blue: "from-blue-300 to-blue-500",
|
||||
green: "from-green-300 to-green-500",
|
||||
violet: "from-violet-300 to-violet-500",
|
||||
amber: "from-amber-300 to-amber-500",
|
||||
emerald: "from-emerald-300 to-emerald-500",
|
||||
};
|
||||
|
||||
const accentLineMap: Record<StatColor, string> = {
|
||||
blue: "#3b82f6",
|
||||
green: "#22c55e",
|
||||
violet: "#8b5cf6",
|
||||
amber: "#f59e0b",
|
||||
emerald: "#10b981",
|
||||
};
|
||||
|
||||
const strokeColorMap: Record<StatColor, [string, string]> = {
|
||||
blue: ["#93c5fd", "#3b82f6"],
|
||||
green: ["#86efac", "#22c55e"],
|
||||
violet: ["#c4b5fd", "#8b5cf6"],
|
||||
amber: ["#fcd34d", "#f59e0b"],
|
||||
emerald: ["#6ee7b7", "#10b981"],
|
||||
};
|
||||
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
value: string | number;
|
||||
sub?: React.ReactNode;
|
||||
color?: StatColor;
|
||||
gauge?: number; // 0-100 percentage for ring gauge
|
||||
}
|
||||
|
||||
function colorizeSubText(sub: React.ReactNode): React.ReactNode {
|
||||
if (typeof sub !== "string") return sub;
|
||||
const keywords: [RegExp, string][] = [
|
||||
[/\b(running|online|healthy|clean|clear|all good|ok)\b/gi, "text-green-400"],
|
||||
[/\b(error|alert|fail|errors detected)\b/gi, "text-red-400"],
|
||||
];
|
||||
for (const [pattern, cls] of keywords) {
|
||||
if (pattern.test(sub)) {
|
||||
return (
|
||||
<>
|
||||
{sub.split(pattern).map((part, i) =>
|
||||
pattern.test(part) ? (
|
||||
<span key={i} className={cls}>{part}</span>
|
||||
) : (
|
||||
<span key={i}>{part}</span>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
return sub;
|
||||
}
|
||||
|
||||
function GaugeRing({ pct, color, size = 64, stroke = 4 }: { pct: number; color: StatColor; size?: number; stroke?: number }) {
|
||||
const radius = (size - stroke) / 2;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (pct / 100) * circumference;
|
||||
const gradientId = `gauge-grad-${color}`;
|
||||
const [stopStart, stopEnd] = strokeColorMap[color] ?? ["#93c5fd", "#3b82f6"];
|
||||
|
||||
return (
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
|
||||
<defs>
|
||||
<linearGradient id={gradientId}>
|
||||
<stop offset="0%" stopColor={stopStart} />
|
||||
<stop offset="100%" stopColor={stopEnd} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<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={`url(#${gradientId})`}
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={offset}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function StatCard({ label, value, sub, color = "blue", gauge }: StatCardProps) {
|
||||
const hasGauge = gauge != null && gauge >= 0;
|
||||
const accent = accentLineMap[color];
|
||||
|
||||
return (
|
||||
<Card className="card-hover-lift overflow-hidden relative group">
|
||||
{/* Top accent line */}
|
||||
<span
|
||||
className="absolute top-0 left-[20%] right-[20%] h-px"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, transparent, ${accent}, transparent)`,
|
||||
}}
|
||||
/>
|
||||
<CardContent className="pt-5 pb-4 px-4 relative flex flex-col items-center justify-center text-center min-h-[110px]">
|
||||
{hasGauge ? (
|
||||
<div className="relative flex items-center justify-center mb-1" style={{ width: 64, height: 64 }}>
|
||||
<GaugeRing pct={gauge} color={color} />
|
||||
<span
|
||||
className={`absolute inset-0 flex items-center justify-center text-xl font-bold bg-gradient-to-b ${gradientMap[color]} bg-clip-text text-transparent tabular-nums-transition`}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<p
|
||||
className={`text-3xl font-bold bg-gradient-to-b ${gradientMap[color]} bg-clip-text text-transparent tabular-nums-transition mb-1`}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs uppercase tracking-wider text-muted-foreground font-medium">
|
||||
{label}
|
||||
</p>
|
||||
{sub && <div className="mt-0.5 text-sm text-muted-foreground/70">{colorizeSubText(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 colorStyles: Record<string, { bg: string; shadow: string }> = {
|
||||
green: { bg: "bg-green-500", shadow: "0 0 8px rgba(34, 197, 94, 0.5)" },
|
||||
red: { bg: "bg-red-500", shadow: "0 0 8px rgba(239, 68, 68, 0.5)" },
|
||||
amber: { bg: "bg-amber-500", shadow: "0 0 8px rgba(245, 158, 11, 0.5)" },
|
||||
blue: { bg: "bg-blue-500", shadow: "0 0 8px rgba(59, 130, 246, 0.5)" },
|
||||
purple: { bg: "bg-purple-500", shadow: "0 0 8px rgba(139, 92, 246, 0.5)" },
|
||||
};
|
||||
|
||||
interface StatusBadgeProps {
|
||||
color: "green" | "red" | "amber" | "blue" | "purple";
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function StatusBadge({ color, label }: StatusBadgeProps) {
|
||||
const style = colorStyles[color] ?? { bg: "bg-gray-500", shadow: "none" };
|
||||
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1.5 text-xs">
|
||||
<span
|
||||
className={cn("w-2 h-2 rounded-full shrink-0", style.bg)}
|
||||
style={{ boxShadow: style.shadow }}
|
||||
/>
|
||||
{label && <span className="text-muted-foreground">{label}</span>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
139
dashboard/ui/components/tdarr-card.tsx
Normal file
139
dashboard/ui/components/tdarr-card.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
"use client";
|
||||
import { usePoll } from "@/lib/use-poll";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { CardSkeleton } from "@/components/skeleton";
|
||||
|
||||
interface TdarrWorker {
|
||||
id: string;
|
||||
type: string;
|
||||
file: string;
|
||||
percentage: number;
|
||||
fps: number;
|
||||
eta: string;
|
||||
}
|
||||
|
||||
interface TdarrNode {
|
||||
id: string;
|
||||
name: string;
|
||||
paused: boolean;
|
||||
hardware: string;
|
||||
workers: TdarrWorker[];
|
||||
active: number;
|
||||
}
|
||||
|
||||
interface TdarrCluster {
|
||||
server_version?: string;
|
||||
nodes: TdarrNode[];
|
||||
total_active: number;
|
||||
stats: {
|
||||
total_files: number;
|
||||
transcoded: number;
|
||||
health_checked: number;
|
||||
size_saved_gb: number;
|
||||
queue_transcode: number;
|
||||
error_transcode: number;
|
||||
tdarr_score: string;
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// Node hardware colors
|
||||
const hwColors: Record<string, string> = {
|
||||
"NVENC (RTX 5090)": "text-green-400",
|
||||
"VAAPI (Radeon 760M)": "text-amber-400",
|
||||
"QSV (Intel)": "text-cyan-400",
|
||||
"CPU": "text-muted-foreground",
|
||||
};
|
||||
|
||||
export function TdarrCard() {
|
||||
const { data } = usePoll<TdarrCluster>("/api/tdarr/cluster", 10000); // 10s refresh for live worker updates
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2 flex flex-row items-center justify-between">
|
||||
<CardTitle className="text-base font-semibold">Tdarr Cluster</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{data && !data.error && (
|
||||
<>
|
||||
<Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
|
||||
{data.total_active} active
|
||||
</Badge>
|
||||
{data.stats.error_transcode > 0 && (
|
||||
<Badge variant="secondary" className="text-xs bg-red-500/10 border border-red-500/20 text-red-400">
|
||||
{data.stats.error_transcode} errors
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!data ? (
|
||||
<CardSkeleton lines={5} />
|
||||
) : data.error ? (
|
||||
<p className="text-sm text-red-400">{data.error}</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{/* Stats row */}
|
||||
<div className="flex flex-wrap gap-x-5 gap-y-1 text-xs text-muted-foreground">
|
||||
<span>{data.stats.total_files.toLocaleString()} files</span>
|
||||
<span className="text-green-400">{data.stats.transcoded.toLocaleString()} transcoded</span>
|
||||
<span>{data.stats.health_checked.toLocaleString()} health checked</span>
|
||||
<span className="text-amber-400">{data.stats.size_saved_gb} GB saved</span>
|
||||
{data.stats.queue_transcode > 0 && (
|
||||
<span className="text-blue-400">{data.stats.queue_transcode} in queue</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nodes */}
|
||||
<div className="space-y-3">
|
||||
{data.nodes.map((node) => (
|
||||
<div key={node.id} className="rounded-lg bg-white/[0.03] border border-white/[0.06] p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full ${node.active > 0 ? "bg-green-500" : node.paused ? "bg-amber-500" : "bg-gray-500"}`}
|
||||
style={{ boxShadow: node.active > 0 ? "0 0 6px rgba(34,197,94,0.5)" : "none" }} />
|
||||
<span className="text-sm font-medium">{node.name}</span>
|
||||
<span className={`text-xs ${hwColors[node.hardware] ?? "text-muted-foreground"}`}>{node.hardware}</span>
|
||||
</div>
|
||||
{node.paused && <Badge variant="secondary" className="text-[10px] bg-amber-500/10 text-amber-400">Paused</Badge>}
|
||||
</div>
|
||||
|
||||
{node.workers.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{node.workers.map((w) => (
|
||||
<div key={w.id} className="space-y-1">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-foreground/80 truncate max-w-[60%]">{w.file}</span>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<span className="text-green-400 font-mono">{w.fps} fps</span>
|
||||
<span className="text-muted-foreground">{w.eta}</span>
|
||||
<span className="text-foreground font-medium w-12 text-right">{w.percentage}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000"
|
||||
style={{
|
||||
width: `${w.percentage}%`,
|
||||
background: `linear-gradient(90deg, #3b82f6, ${w.percentage > 80 ? "#22c55e" : "#8b5cf6"})`,
|
||||
boxShadow: "0 0 8px rgba(59, 130, 246, 0.3)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground/50">Idle</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
103
dashboard/ui/components/theme-provider.tsx
Normal file
103
dashboard/ui/components/theme-provider.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { themes, getTheme, DEFAULT_THEME, type Theme } from "@/lib/themes";
|
||||
|
||||
interface ThemeContextValue {
|
||||
theme: Theme;
|
||||
themeName: string;
|
||||
setTheme: (name: string) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue>({
|
||||
theme: themes[0],
|
||||
themeName: DEFAULT_THEME,
|
||||
setTheme: () => {},
|
||||
});
|
||||
|
||||
export function useTheme() {
|
||||
return useContext(ThemeContext);
|
||||
}
|
||||
|
||||
// Unique ID for the dynamic style element
|
||||
const STYLE_ID = "theme-gradient-style";
|
||||
|
||||
function applyTheme(theme: Theme) {
|
||||
const root = document.documentElement;
|
||||
|
||||
// Toggle dark class based on theme
|
||||
if (theme.isDark) {
|
||||
root.classList.add("dark");
|
||||
} else {
|
||||
root.classList.remove("dark");
|
||||
}
|
||||
|
||||
// Set all CSS custom properties from the theme
|
||||
for (const [key, value] of Object.entries(theme.vars)) {
|
||||
root.style.setProperty(key, value);
|
||||
}
|
||||
|
||||
// Set the body background
|
||||
document.body.style.background = theme.bodyBg;
|
||||
|
||||
// Set the gradient via a style element (body::before can't be styled inline)
|
||||
let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
|
||||
if (!styleEl) {
|
||||
styleEl = document.createElement("style");
|
||||
styleEl.id = STYLE_ID;
|
||||
document.head.appendChild(styleEl);
|
||||
}
|
||||
styleEl.textContent = `
|
||||
body::before {
|
||||
background: ${theme.bgGradient} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// Store in localStorage
|
||||
try {
|
||||
localStorage.setItem("homelab-theme", theme.name);
|
||||
} catch {
|
||||
// ignore storage errors
|
||||
}
|
||||
}
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [themeName, setThemeName] = useState(DEFAULT_THEME);
|
||||
const theme = getTheme(themeName);
|
||||
|
||||
// Load saved theme on mount
|
||||
useEffect(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem("homelab-theme");
|
||||
if (saved && themes.some((t) => t.name === saved)) {
|
||||
setThemeName(saved);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Apply theme whenever it changes
|
||||
useEffect(() => {
|
||||
applyTheme(theme);
|
||||
}, [theme]);
|
||||
|
||||
const setTheme = useCallback((name: string) => {
|
||||
if (themes.some((t) => t.name === name)) {
|
||||
setThemeName(name);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, themeName, setTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
108
dashboard/ui/components/theme-switcher.tsx
Normal file
108
dashboard/ui/components/theme-switcher.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useTheme } from "@/components/theme-provider";
|
||||
import { themes } from "@/lib/themes";
|
||||
|
||||
export function ThemeSwitcher() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
if (open) {
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
function handleKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
}
|
||||
if (open) {
|
||||
document.addEventListener("keydown", handleKey);
|
||||
return () => document.removeEventListener("keydown", handleKey);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center gap-2 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 hover:bg-[var(--nav-hover)]"
|
||||
aria-label="Switch theme"
|
||||
>
|
||||
<span
|
||||
className="w-3 h-3 rounded-full shrink-0 border border-white/10"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${theme.swatch[0]}, ${theme.swatch[1]})`,
|
||||
}}
|
||||
/>
|
||||
<span className="text-muted-foreground hidden sm:inline">{theme.label}</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
className="absolute right-0 top-full mt-2 w-52 rounded-xl p-1.5 z-[100] shadow-2xl max-h-[70vh] overflow-y-auto"
|
||||
style={{
|
||||
background: theme.isDark ? "rgba(10, 10, 25, 0.95)" : "rgba(255, 255, 255, 0.97)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.15)",
|
||||
backdropFilter: "blur(30px) saturate(180%)",
|
||||
WebkitBackdropFilter: "blur(30px) saturate(180%)",
|
||||
}}
|
||||
>
|
||||
<div className="px-2.5 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: theme.isDark ? "#64748b" : "#94a3b8" }}>
|
||||
Themes
|
||||
</div>
|
||||
{themes.map((t) => (
|
||||
<button
|
||||
key={t.name}
|
||||
onClick={() => {
|
||||
setTheme(t.name);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-xs transition-all duration-150"
|
||||
style={{
|
||||
background: theme.name === t.name
|
||||
? (theme.isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)")
|
||||
: "transparent",
|
||||
color: theme.name === t.name
|
||||
? (theme.isDark ? "#f1f5f9" : "#1e293b")
|
||||
: (theme.isDark ? "#94a3b8" : "#64748b"),
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (theme.name !== t.name)
|
||||
e.currentTarget.style.background = theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.03)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (theme.name !== t.name)
|
||||
e.currentTarget.style.background = "transparent";
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-4 h-4 rounded-full shrink-0"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
|
||||
boxShadow: `0 0 8px ${t.swatch[0]}40`,
|
||||
border: "1px solid rgba(255,255,255,0.15)",
|
||||
}}
|
||||
/>
|
||||
<span className="flex-1 text-left font-medium">{t.label}</span>
|
||||
{theme.name === t.name && (
|
||||
<span style={{ color: t.swatch[0], fontSize: "14px" }}>●</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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();
|
||||
}
|
||||
982
dashboard/ui/lib/themes.ts
Normal file
982
dashboard/ui/lib/themes.ts
Normal file
@@ -0,0 +1,982 @@
|
||||
export interface Theme {
|
||||
name: string;
|
||||
label: string;
|
||||
isDark: boolean;
|
||||
bgGradient: string;
|
||||
bodyBg: string;
|
||||
// Preview swatch colors for the switcher
|
||||
swatch: [string, string];
|
||||
vars: Record<string, string>;
|
||||
}
|
||||
|
||||
export const themes: Theme[] = [
|
||||
// 1. Midnight (default)
|
||||
{
|
||||
name: "midnight",
|
||||
label: "Midnight",
|
||||
isDark: true,
|
||||
swatch: ["#3b82f6", "#8b5cf6"],
|
||||
bodyBg: "linear-gradient(135deg, #060611 0%, #0d1117 40%, #0a0e1a 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(59, 130, 246, 0.38), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(139, 92, 246, 0.30), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(16, 185, 129, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(236, 72, 153, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "230 25% 4%",
|
||||
"--foreground": "210 40% 98%",
|
||||
"--card": "220 30% 8% / 0.4",
|
||||
"--card-foreground": "210 40% 98%",
|
||||
"--popover": "220 30% 8% / 0.8",
|
||||
"--popover-foreground": "210 40% 93%",
|
||||
"--primary": "217 91% 60%",
|
||||
"--primary-foreground": "210 40% 93%",
|
||||
"--secondary": "217 33% 12% / 0.5",
|
||||
"--secondary-foreground": "210 40% 93%",
|
||||
"--muted": "217 33% 12% / 0.5",
|
||||
"--muted-foreground": "215 20% 68%",
|
||||
"--accent": "217 33% 12% / 0.5",
|
||||
"--accent-foreground": "210 40% 93%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "0 0% 100% / 0.08",
|
||||
"--input": "0 0% 100% / 0.06",
|
||||
"--ring": "217 91% 60%",
|
||||
"--chart-1": "217 91% 60%",
|
||||
"--chart-2": "160 60% 45%",
|
||||
"--chart-3": "30 80% 55%",
|
||||
"--chart-4": "280 65% 60%",
|
||||
"--chart-5": "340 75% 55%",
|
||||
"--sidebar": "220 30% 6%",
|
||||
"--sidebar-foreground": "210 40% 93%",
|
||||
"--sidebar-primary": "217 91% 60%",
|
||||
"--sidebar-primary-foreground": "210 40% 93%",
|
||||
"--sidebar-accent": "217 33% 12%",
|
||||
"--sidebar-accent-foreground": "210 40% 93%",
|
||||
"--sidebar-border": "0 0% 100% / 0.06",
|
||||
"--sidebar-ring": "217 91% 60%",
|
||||
"--card-bg": "rgba(15, 20, 40, 0.35)",
|
||||
"--card-border": "rgba(255, 255, 255, 0.12)",
|
||||
"--card-hover-bg": "rgba(15, 20, 40, 0.45)",
|
||||
"--card-hover-border": "rgba(255, 255, 255, 0.2)",
|
||||
"--glass-bg": "rgba(15, 20, 40, 0.30)",
|
||||
"--glass-border": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-hover": "rgba(255, 255, 255, 0.03)",
|
||||
"--glass-input-bg": "rgba(255, 255, 255, 0.06)",
|
||||
"--glass-input-border": "rgba(255, 255, 255, 0.1)",
|
||||
"--glass-input-focus": "rgba(59, 130, 246, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-table-header": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-bar-track": "rgba(255, 255, 255, 0.10)",
|
||||
"--nav-bg": "rgba(6, 6, 17, 0.65)",
|
||||
"--nav-border": "rgba(255, 255, 255, 0.08)",
|
||||
"--nav-active": "rgba(255, 255, 255, 0.06)",
|
||||
"--nav-hover": "rgba(255, 255, 255, 0.04)",
|
||||
"--accent-color": "#3b82f6",
|
||||
"--accent-glow": "rgba(59, 130, 246, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(59, 130, 246, 0.04)",
|
||||
"--stat-glow": "0 0 20px rgba(59, 130, 246, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(59, 130, 246, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 2. Light
|
||||
{
|
||||
name: "light",
|
||||
label: "Light",
|
||||
isDark: false,
|
||||
swatch: ["#2563eb", "#e2e8f0"],
|
||||
bodyBg: "linear-gradient(135deg, #fafafa 0%, #f1f5f9 40%, #f8fafc 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.06), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(99, 102, 241, 0.04), transparent)",
|
||||
vars: {
|
||||
"--background": "210 20% 98%",
|
||||
"--foreground": "215 25% 15%",
|
||||
"--card": "0 0% 100%",
|
||||
"--card-foreground": "215 25% 15%",
|
||||
"--popover": "0 0% 100%",
|
||||
"--popover-foreground": "215 25% 15%",
|
||||
"--primary": "217 91% 53%",
|
||||
"--primary-foreground": "0 0% 100%",
|
||||
"--secondary": "214 32% 91%",
|
||||
"--secondary-foreground": "215 25% 15%",
|
||||
"--muted": "214 32% 91%",
|
||||
"--muted-foreground": "215 16% 47%",
|
||||
"--accent": "214 32% 91%",
|
||||
"--accent-foreground": "215 25% 15%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "214 32% 88%",
|
||||
"--input": "214 32% 88%",
|
||||
"--ring": "217 91% 53%",
|
||||
"--card-bg": "rgba(255, 255, 255, 0.9)",
|
||||
"--card-border": "rgba(0, 0, 0, 0.12)",
|
||||
"--card-hover-bg": "rgba(255, 255, 255, 1)",
|
||||
"--card-hover-border": "rgba(0, 0, 0, 0.12)",
|
||||
"--glass-bg": "rgba(255, 255, 255, 0.7)",
|
||||
"--glass-border": "rgba(0, 0, 0, 0.10)",
|
||||
"--glass-hover": "rgba(0, 0, 0, 0.02)",
|
||||
"--glass-input-bg": "rgba(255, 255, 255, 0.8)",
|
||||
"--glass-input-border": "rgba(0, 0, 0, 0.1)",
|
||||
"--glass-input-focus": "rgba(37, 99, 235, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(255, 255, 255, 0.95)",
|
||||
"--glass-table-header": "rgba(0, 0, 0, 0.03)",
|
||||
"--glass-bar-track": "rgba(0, 0, 0, 0.10)",
|
||||
"--nav-bg": "rgba(255, 255, 255, 0.8)",
|
||||
"--nav-border": "rgba(0, 0, 0, 0.06)",
|
||||
"--nav-active": "rgba(0, 0, 0, 0.05)",
|
||||
"--nav-hover": "rgba(0, 0, 0, 0.03)",
|
||||
"--accent-color": "#2563eb",
|
||||
"--accent-glow": "rgba(37, 99, 235, 0.2)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.08), 0 0 40px rgba(37, 99, 235, 0.02)",
|
||||
"--stat-glow": "0 0 20px rgba(37, 99, 235, 0.08)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(37, 99, 235, 0.15)",
|
||||
},
|
||||
},
|
||||
|
||||
// 3. Cyberpunk
|
||||
{
|
||||
name: "cyberpunk",
|
||||
label: "Cyberpunk",
|
||||
isDark: true,
|
||||
swatch: ["#ec4899", "#06b6d4"],
|
||||
bodyBg: "linear-gradient(135deg, #0a0a0f 0%, #0d0515 40%, #05080f 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 10% 10%, rgba(236, 72, 153, 0.38), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(6, 182, 212, 0.30), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(139, 92, 246, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(6, 182, 212, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "260 30% 4%",
|
||||
"--foreground": "185 10% 98%",
|
||||
"--card": "270 30% 8% / 0.4",
|
||||
"--card-foreground": "185 10% 98%",
|
||||
"--popover": "270 30% 8% / 0.8",
|
||||
"--popover-foreground": "185 20% 92%",
|
||||
"--primary": "330 80% 60%",
|
||||
"--primary-foreground": "185 20% 95%",
|
||||
"--secondary": "270 30% 14% / 0.5",
|
||||
"--secondary-foreground": "185 20% 92%",
|
||||
"--muted": "270 30% 14% / 0.5",
|
||||
"--muted-foreground": "200 15% 68%",
|
||||
"--accent": "185 80% 45%",
|
||||
"--accent-foreground": "185 20% 95%",
|
||||
"--destructive": "330 80% 55%",
|
||||
"--border": "0 0% 100% / 0.06",
|
||||
"--input": "0 0% 100% / 0.06",
|
||||
"--ring": "330 80% 60%",
|
||||
"--card-bg": "rgba(25, 10, 35, 0.35)",
|
||||
"--card-border": "rgba(236, 72, 153, 0.12)",
|
||||
"--card-hover-bg": "rgba(25, 10, 35, 0.45)",
|
||||
"--card-hover-border": "rgba(236, 72, 153, 0.2)",
|
||||
"--glass-bg": "rgba(25, 10, 35, 0.30)",
|
||||
"--glass-border": "rgba(236, 72, 153, 0.08)",
|
||||
"--glass-hover": "rgba(236, 72, 153, 0.03)",
|
||||
"--glass-input-bg": "rgba(255, 255, 255, 0.06)",
|
||||
"--glass-input-border": "rgba(236, 72, 153, 0.1)",
|
||||
"--glass-input-focus": "rgba(6, 182, 212, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-table-header": "rgba(236, 72, 153, 0.08)",
|
||||
"--glass-bar-track": "rgba(255, 255, 255, 0.10)",
|
||||
"--nav-bg": "rgba(10, 10, 15, 0.65)",
|
||||
"--nav-border": "rgba(236, 72, 153, 0.08)",
|
||||
"--nav-active": "rgba(236, 72, 153, 0.08)",
|
||||
"--nav-hover": "rgba(236, 72, 153, 0.04)",
|
||||
"--accent-color": "#ec4899",
|
||||
"--accent-glow": "rgba(236, 72, 153, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(236, 72, 153, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(6, 182, 212, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(236, 72, 153, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 4. Steampunk
|
||||
{
|
||||
name: "steampunk",
|
||||
label: "Steampunk",
|
||||
isDark: true,
|
||||
swatch: ["#d4a76a", "#b87333"],
|
||||
bodyBg: "linear-gradient(135deg, #0f0a07 0%, #12100b 40%, #0e0905 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(212, 167, 106, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(184, 115, 51, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(245, 158, 11, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(184, 115, 51, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "30 30% 4%",
|
||||
"--foreground": "40 20% 97%",
|
||||
"--card": "30 25% 10% / 0.4",
|
||||
"--card-foreground": "40 20% 97%",
|
||||
"--popover": "30 25% 10% / 0.8",
|
||||
"--popover-foreground": "40 30% 88%",
|
||||
"--primary": "35 55% 62%",
|
||||
"--primary-foreground": "30 40% 10%",
|
||||
"--secondary": "30 20% 14% / 0.5",
|
||||
"--secondary-foreground": "40 30% 88%",
|
||||
"--muted": "30 20% 14% / 0.5",
|
||||
"--muted-foreground": "35 15% 68%",
|
||||
"--accent": "25 60% 46%",
|
||||
"--accent-foreground": "40 30% 92%",
|
||||
"--destructive": "15 70% 50%",
|
||||
"--border": "35 30% 50% / 0.08",
|
||||
"--input": "35 30% 50% / 0.06",
|
||||
"--ring": "35 55% 62%",
|
||||
"--card-bg": "rgba(30, 20, 12, 0.35)",
|
||||
"--card-border": "rgba(212, 167, 106, 0.12)",
|
||||
"--card-hover-bg": "rgba(30, 20, 12, 0.45)",
|
||||
"--card-hover-border": "rgba(212, 167, 106, 0.22)",
|
||||
"--glass-bg": "rgba(30, 20, 12, 0.30)",
|
||||
"--glass-border": "rgba(212, 167, 106, 0.08)",
|
||||
"--glass-hover": "rgba(212, 167, 106, 0.03)",
|
||||
"--glass-input-bg": "rgba(212, 167, 106, 0.06)",
|
||||
"--glass-input-border": "rgba(212, 167, 106, 0.1)",
|
||||
"--glass-input-focus": "rgba(184, 115, 51, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(212, 167, 106, 0.08)",
|
||||
"--glass-table-header": "rgba(212, 167, 106, 0.08)",
|
||||
"--glass-bar-track": "rgba(212, 167, 106, 0.10)",
|
||||
"--nav-bg": "rgba(15, 10, 7, 0.65)",
|
||||
"--nav-border": "rgba(212, 167, 106, 0.08)",
|
||||
"--nav-active": "rgba(212, 167, 106, 0.08)",
|
||||
"--nav-hover": "rgba(212, 167, 106, 0.04)",
|
||||
"--accent-color": "#d4a76a",
|
||||
"--accent-glow": "rgba(212, 167, 106, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 167, 106, 0.04)",
|
||||
"--stat-glow": "0 0 20px rgba(212, 167, 106, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(212, 167, 106, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 5. Portland
|
||||
{
|
||||
name: "portland",
|
||||
label: "Portland",
|
||||
isDark: true,
|
||||
swatch: ["#15803d", "#0e7490"],
|
||||
bodyBg: "linear-gradient(135deg, #060d08 0%, #081210 40%, #050b08 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(21, 128, 61, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(14, 116, 144, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(34, 197, 94, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(14, 116, 144, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "140 25% 4%",
|
||||
"--foreground": "140 10% 97%",
|
||||
"--card": "150 20% 9% / 0.4",
|
||||
"--card-foreground": "140 10% 97%",
|
||||
"--popover": "150 20% 9% / 0.8",
|
||||
"--popover-foreground": "140 15% 88%",
|
||||
"--primary": "142 64% 36%",
|
||||
"--primary-foreground": "140 20% 95%",
|
||||
"--secondary": "150 18% 14% / 0.5",
|
||||
"--secondary-foreground": "140 15% 88%",
|
||||
"--muted": "150 18% 14% / 0.5",
|
||||
"--muted-foreground": "150 10% 68%",
|
||||
"--accent": "189 80% 32%",
|
||||
"--accent-foreground": "140 20% 95%",
|
||||
"--destructive": "25 80% 50%",
|
||||
"--border": "140 20% 50% / 0.08",
|
||||
"--input": "140 20% 50% / 0.06",
|
||||
"--ring": "142 64% 36%",
|
||||
"--card-bg": "rgba(10, 25, 15, 0.35)",
|
||||
"--card-border": "rgba(21, 128, 61, 0.12)",
|
||||
"--card-hover-bg": "rgba(10, 25, 15, 0.45)",
|
||||
"--card-hover-border": "rgba(21, 128, 61, 0.22)",
|
||||
"--glass-bg": "rgba(10, 25, 15, 0.30)",
|
||||
"--glass-border": "rgba(21, 128, 61, 0.08)",
|
||||
"--glass-hover": "rgba(21, 128, 61, 0.03)",
|
||||
"--glass-input-bg": "rgba(21, 128, 61, 0.06)",
|
||||
"--glass-input-border": "rgba(21, 128, 61, 0.1)",
|
||||
"--glass-input-focus": "rgba(14, 116, 144, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(21, 128, 61, 0.08)",
|
||||
"--glass-table-header": "rgba(21, 128, 61, 0.08)",
|
||||
"--glass-bar-track": "rgba(21, 128, 61, 0.10)",
|
||||
"--nav-bg": "rgba(6, 13, 8, 0.65)",
|
||||
"--nav-border": "rgba(21, 128, 61, 0.08)",
|
||||
"--nav-active": "rgba(21, 128, 61, 0.08)",
|
||||
"--nav-hover": "rgba(21, 128, 61, 0.04)",
|
||||
"--accent-color": "#15803d",
|
||||
"--accent-glow": "rgba(21, 128, 61, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(21, 128, 61, 0.04)",
|
||||
"--stat-glow": "0 0 20px rgba(21, 128, 61, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(21, 128, 61, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 6. Racing
|
||||
{
|
||||
name: "racing",
|
||||
label: "Racing",
|
||||
isDark: true,
|
||||
swatch: ["#dc2626", "#a1a1aa"],
|
||||
bodyBg: "linear-gradient(135deg, #080808 0%, #0c0c0c 40%, #070707 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(220, 38, 38, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(161, 161, 170, 0.22), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(220, 38, 38, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(161, 161, 170, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "0 0% 4%",
|
||||
"--foreground": "0 0% 98%",
|
||||
"--card": "0 0% 9% / 0.4",
|
||||
"--card-foreground": "0 0% 98%",
|
||||
"--popover": "0 0% 9% / 0.8",
|
||||
"--popover-foreground": "0 0% 93%",
|
||||
"--primary": "0 72% 51%",
|
||||
"--primary-foreground": "0 0% 98%",
|
||||
"--secondary": "0 0% 14% / 0.5",
|
||||
"--secondary-foreground": "0 0% 93%",
|
||||
"--muted": "0 0% 14% / 0.5",
|
||||
"--muted-foreground": "0 0% 68%",
|
||||
"--accent": "0 0% 63%",
|
||||
"--accent-foreground": "0 0% 93%",
|
||||
"--destructive": "0 72% 51%",
|
||||
"--border": "0 0% 100% / 0.06",
|
||||
"--input": "0 0% 100% / 0.06",
|
||||
"--ring": "0 72% 51%",
|
||||
"--card-bg": "rgba(20, 18, 20, 0.35)",
|
||||
"--card-border": "rgba(220, 38, 38, 0.12)",
|
||||
"--card-hover-bg": "rgba(20, 18, 20, 0.45)",
|
||||
"--card-hover-border": "rgba(220, 38, 38, 0.22)",
|
||||
"--glass-bg": "rgba(20, 18, 20, 0.30)",
|
||||
"--glass-border": "rgba(220, 38, 38, 0.08)",
|
||||
"--glass-hover": "rgba(220, 38, 38, 0.03)",
|
||||
"--glass-input-bg": "rgba(255, 255, 255, 0.06)",
|
||||
"--glass-input-border": "rgba(255, 255, 255, 0.1)",
|
||||
"--glass-input-focus": "rgba(220, 38, 38, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-table-header": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-bar-track": "rgba(255, 255, 255, 0.10)",
|
||||
"--nav-bg": "rgba(8, 8, 8, 0.65)",
|
||||
"--nav-border": "rgba(220, 38, 38, 0.08)",
|
||||
"--nav-active": "rgba(220, 38, 38, 0.08)",
|
||||
"--nav-hover": "rgba(220, 38, 38, 0.04)",
|
||||
"--accent-color": "#dc2626",
|
||||
"--accent-glow": "rgba(220, 38, 38, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(220, 38, 38, 0.04)",
|
||||
"--stat-glow": "0 0 20px rgba(220, 38, 38, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(220, 38, 38, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 7. Ocean
|
||||
{
|
||||
name: "ocean",
|
||||
label: "Ocean",
|
||||
isDark: true,
|
||||
swatch: ["#0284c7", "#2dd4bf"],
|
||||
bodyBg: "linear-gradient(135deg, #030712 0%, #0a1628 40%, #041020 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(2, 132, 199, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(45, 212, 191, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(2, 132, 199, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(45, 212, 191, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "220 50% 4%",
|
||||
"--foreground": "200 10% 98%",
|
||||
"--card": "215 40% 9% / 0.4",
|
||||
"--card-foreground": "200 10% 98%",
|
||||
"--popover": "215 40% 9% / 0.8",
|
||||
"--popover-foreground": "200 20% 90%",
|
||||
"--primary": "200 80% 44%",
|
||||
"--primary-foreground": "200 20% 95%",
|
||||
"--secondary": "210 30% 14% / 0.5",
|
||||
"--secondary-foreground": "200 20% 90%",
|
||||
"--muted": "210 30% 14% / 0.5",
|
||||
"--muted-foreground": "200 15% 68%",
|
||||
"--accent": "170 70% 50%",
|
||||
"--accent-foreground": "200 20% 95%",
|
||||
"--destructive": "10 70% 55%",
|
||||
"--border": "200 30% 50% / 0.08",
|
||||
"--input": "200 30% 50% / 0.06",
|
||||
"--ring": "200 80% 44%",
|
||||
"--card-bg": "rgba(8, 15, 30, 0.35)",
|
||||
"--card-border": "rgba(2, 132, 199, 0.12)",
|
||||
"--card-hover-bg": "rgba(8, 15, 30, 0.45)",
|
||||
"--card-hover-border": "rgba(2, 132, 199, 0.22)",
|
||||
"--glass-bg": "rgba(8, 15, 30, 0.30)",
|
||||
"--glass-border": "rgba(2, 132, 199, 0.08)",
|
||||
"--glass-hover": "rgba(2, 132, 199, 0.03)",
|
||||
"--glass-input-bg": "rgba(2, 132, 199, 0.06)",
|
||||
"--glass-input-border": "rgba(2, 132, 199, 0.1)",
|
||||
"--glass-input-focus": "rgba(45, 212, 191, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(2, 132, 199, 0.08)",
|
||||
"--glass-table-header": "rgba(2, 132, 199, 0.08)",
|
||||
"--glass-bar-track": "rgba(2, 132, 199, 0.10)",
|
||||
"--nav-bg": "rgba(3, 7, 18, 0.65)",
|
||||
"--nav-border": "rgba(2, 132, 199, 0.08)",
|
||||
"--nav-active": "rgba(2, 132, 199, 0.08)",
|
||||
"--nav-hover": "rgba(2, 132, 199, 0.04)",
|
||||
"--accent-color": "#0284c7",
|
||||
"--accent-glow": "rgba(2, 132, 199, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(2, 132, 199, 0.04)",
|
||||
"--stat-glow": "0 0 20px rgba(45, 212, 191, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(2, 132, 199, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 8. Aurora
|
||||
{
|
||||
name: "aurora",
|
||||
label: "Aurora",
|
||||
isDark: true,
|
||||
swatch: ["#4ade80", "#a78bfa"],
|
||||
bodyBg: "linear-gradient(135deg, #050510 0%, #080818 40%, #050510 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(74, 222, 128, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(167, 139, 250, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(56, 189, 248, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(74, 222, 128, 0.18), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "240 33% 4%",
|
||||
"--foreground": "220 15% 88%",
|
||||
"--card": "240 25% 9% / 0.4",
|
||||
"--card-foreground": "220 15% 88%",
|
||||
"--popover": "240 25% 9% / 0.8",
|
||||
"--popover-foreground": "220 15% 88%",
|
||||
"--primary": "142 70% 58%",
|
||||
"--primary-foreground": "240 20% 8%",
|
||||
"--secondary": "240 20% 14% / 0.5",
|
||||
"--secondary-foreground": "220 15% 88%",
|
||||
"--muted": "240 20% 14% / 0.5",
|
||||
"--muted-foreground": "230 12% 62%",
|
||||
"--accent": "263 70% 72%",
|
||||
"--accent-foreground": "220 15% 95%",
|
||||
"--destructive": "45 90% 55%",
|
||||
"--border": "260 20% 60% / 0.08",
|
||||
"--input": "260 20% 60% / 0.06",
|
||||
"--ring": "142 70% 58%",
|
||||
"--card-bg": "rgba(12, 10, 25, 0.35)",
|
||||
"--card-border": "rgba(167, 139, 250, 0.12)",
|
||||
"--card-hover-bg": "rgba(12, 10, 25, 0.45)",
|
||||
"--card-hover-border": "rgba(167, 139, 250, 0.22)",
|
||||
"--glass-bg": "rgba(12, 10, 25, 0.30)",
|
||||
"--glass-border": "rgba(167, 139, 250, 0.08)",
|
||||
"--glass-hover": "rgba(74, 222, 128, 0.03)",
|
||||
"--glass-input-bg": "rgba(167, 139, 250, 0.06)",
|
||||
"--glass-input-border": "rgba(167, 139, 250, 0.1)",
|
||||
"--glass-input-focus": "rgba(74, 222, 128, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(167, 139, 250, 0.08)",
|
||||
"--glass-table-header": "rgba(167, 139, 250, 0.08)",
|
||||
"--glass-bar-track": "rgba(167, 139, 250, 0.10)",
|
||||
"--nav-bg": "rgba(5, 5, 16, 0.65)",
|
||||
"--nav-border": "rgba(167, 139, 250, 0.08)",
|
||||
"--nav-active": "rgba(74, 222, 128, 0.06)",
|
||||
"--nav-hover": "rgba(167, 139, 250, 0.04)",
|
||||
"--accent-color": "#4ade80",
|
||||
"--accent-glow": "rgba(74, 222, 128, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(167, 139, 250, 0.04)",
|
||||
"--stat-glow": "0 0 20px rgba(74, 222, 128, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(74, 222, 128, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 9. Sakura
|
||||
{
|
||||
name: "sakura",
|
||||
label: "Sakura",
|
||||
isDark: true,
|
||||
swatch: ["#f472b6", "#fda4af"],
|
||||
bodyBg: "linear-gradient(135deg, #0a0508 0%, #100810 40%, #0a0508 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(244, 114, 182, 0.35), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(253, 164, 175, 0.28), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(251, 113, 133, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(244, 114, 182, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "330 30% 4%",
|
||||
"--foreground": "340 15% 95%",
|
||||
"--card": "330 25% 9% / 0.4",
|
||||
"--card-foreground": "340 15% 95%",
|
||||
"--popover": "330 25% 9% / 0.8",
|
||||
"--popover-foreground": "340 15% 90%",
|
||||
"--primary": "330 70% 65%",
|
||||
"--primary-foreground": "330 20% 10%",
|
||||
"--secondary": "330 20% 14% / 0.5",
|
||||
"--secondary-foreground": "340 15% 90%",
|
||||
"--muted": "330 20% 14% / 0.5",
|
||||
"--muted-foreground": "330 12% 65%",
|
||||
"--accent": "350 65% 70%",
|
||||
"--accent-foreground": "340 15% 95%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "330 20% 60% / 0.08",
|
||||
"--input": "330 20% 60% / 0.06",
|
||||
"--ring": "330 70% 65%",
|
||||
"--chart-1": "330 70% 65%",
|
||||
"--chart-2": "350 65% 70%",
|
||||
"--chart-3": "310 60% 55%",
|
||||
"--chart-4": "0 60% 65%",
|
||||
"--chart-5": "340 75% 55%",
|
||||
"--sidebar": "330 25% 6%",
|
||||
"--sidebar-foreground": "340 15% 90%",
|
||||
"--sidebar-primary": "330 70% 65%",
|
||||
"--sidebar-primary-foreground": "340 15% 90%",
|
||||
"--sidebar-accent": "330 20% 12%",
|
||||
"--sidebar-accent-foreground": "340 15% 90%",
|
||||
"--sidebar-border": "330 20% 60% / 0.06",
|
||||
"--sidebar-ring": "330 70% 65%",
|
||||
"--card-bg": "rgba(25, 10, 15, 0.35)",
|
||||
"--card-border": "rgba(244, 114, 182, 0.12)",
|
||||
"--card-hover-bg": "rgba(25, 10, 15, 0.45)",
|
||||
"--card-hover-border": "rgba(244, 114, 182, 0.22)",
|
||||
"--glass-bg": "rgba(25, 10, 15, 0.30)",
|
||||
"--glass-border": "rgba(244, 114, 182, 0.08)",
|
||||
"--glass-hover": "rgba(244, 114, 182, 0.03)",
|
||||
"--glass-input-bg": "rgba(244, 114, 182, 0.06)",
|
||||
"--glass-input-border": "rgba(244, 114, 182, 0.1)",
|
||||
"--glass-input-focus": "rgba(253, 164, 175, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(244, 114, 182, 0.08)",
|
||||
"--glass-table-header": "rgba(244, 114, 182, 0.08)",
|
||||
"--glass-bar-track": "rgba(244, 114, 182, 0.10)",
|
||||
"--nav-bg": "rgba(10, 5, 8, 0.65)",
|
||||
"--nav-border": "rgba(244, 114, 182, 0.08)",
|
||||
"--nav-active": "rgba(244, 114, 182, 0.08)",
|
||||
"--nav-hover": "rgba(244, 114, 182, 0.04)",
|
||||
"--accent-color": "#f472b6",
|
||||
"--accent-glow": "rgba(244, 114, 182, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(244, 114, 182, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(244, 114, 182, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(244, 114, 182, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 10. Emerald
|
||||
{
|
||||
name: "emerald",
|
||||
label: "Emerald",
|
||||
isDark: true,
|
||||
swatch: ["#34d399", "#059669"],
|
||||
bodyBg: "linear-gradient(135deg, #040a06 0%, #061008 40%, #040a06 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(52, 211, 153, 0.35), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(5, 150, 105, 0.28), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(16, 185, 129, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(52, 211, 153, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "155 40% 3%",
|
||||
"--foreground": "155 15% 95%",
|
||||
"--card": "155 30% 8% / 0.4",
|
||||
"--card-foreground": "155 15% 95%",
|
||||
"--popover": "155 30% 8% / 0.8",
|
||||
"--popover-foreground": "155 15% 90%",
|
||||
"--primary": "160 60% 52%",
|
||||
"--primary-foreground": "155 40% 8%",
|
||||
"--secondary": "155 25% 14% / 0.5",
|
||||
"--secondary-foreground": "155 15% 90%",
|
||||
"--muted": "155 25% 14% / 0.5",
|
||||
"--muted-foreground": "155 12% 62%",
|
||||
"--accent": "160 84% 39%",
|
||||
"--accent-foreground": "155 15% 95%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "155 25% 50% / 0.08",
|
||||
"--input": "155 25% 50% / 0.06",
|
||||
"--ring": "160 60% 52%",
|
||||
"--chart-1": "160 60% 52%",
|
||||
"--chart-2": "170 70% 45%",
|
||||
"--chart-3": "145 55% 50%",
|
||||
"--chart-4": "180 60% 40%",
|
||||
"--chart-5": "140 70% 55%",
|
||||
"--sidebar": "155 30% 5%",
|
||||
"--sidebar-foreground": "155 15% 90%",
|
||||
"--sidebar-primary": "160 60% 52%",
|
||||
"--sidebar-primary-foreground": "155 15% 90%",
|
||||
"--sidebar-accent": "155 25% 12%",
|
||||
"--sidebar-accent-foreground": "155 15% 90%",
|
||||
"--sidebar-border": "155 25% 50% / 0.06",
|
||||
"--sidebar-ring": "160 60% 52%",
|
||||
"--card-bg": "rgba(8, 25, 15, 0.35)",
|
||||
"--card-border": "rgba(52, 211, 153, 0.12)",
|
||||
"--card-hover-bg": "rgba(8, 25, 15, 0.45)",
|
||||
"--card-hover-border": "rgba(52, 211, 153, 0.22)",
|
||||
"--glass-bg": "rgba(8, 25, 15, 0.30)",
|
||||
"--glass-border": "rgba(52, 211, 153, 0.08)",
|
||||
"--glass-hover": "rgba(52, 211, 153, 0.03)",
|
||||
"--glass-input-bg": "rgba(52, 211, 153, 0.06)",
|
||||
"--glass-input-border": "rgba(52, 211, 153, 0.1)",
|
||||
"--glass-input-focus": "rgba(5, 150, 105, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(52, 211, 153, 0.08)",
|
||||
"--glass-table-header": "rgba(52, 211, 153, 0.08)",
|
||||
"--glass-bar-track": "rgba(52, 211, 153, 0.10)",
|
||||
"--nav-bg": "rgba(4, 10, 6, 0.65)",
|
||||
"--nav-border": "rgba(52, 211, 153, 0.08)",
|
||||
"--nav-active": "rgba(52, 211, 153, 0.08)",
|
||||
"--nav-hover": "rgba(52, 211, 153, 0.04)",
|
||||
"--accent-color": "#34d399",
|
||||
"--accent-glow": "rgba(52, 211, 153, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(52, 211, 153, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(52, 211, 153, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(52, 211, 153, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 11. Sunset
|
||||
{
|
||||
name: "sunset",
|
||||
label: "Sunset",
|
||||
isDark: true,
|
||||
swatch: ["#f97316", "#dc2626"],
|
||||
bodyBg: "linear-gradient(135deg, #0a0604 0%, #100a06 40%, #0a0604 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(249, 115, 22, 0.35), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(220, 38, 38, 0.28), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(245, 158, 11, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(249, 115, 22, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "20 35% 3%",
|
||||
"--foreground": "25 15% 95%",
|
||||
"--card": "20 30% 9% / 0.4",
|
||||
"--card-foreground": "25 15% 95%",
|
||||
"--popover": "20 30% 9% / 0.8",
|
||||
"--popover-foreground": "25 15% 90%",
|
||||
"--primary": "25 95% 53%",
|
||||
"--primary-foreground": "25 30% 8%",
|
||||
"--secondary": "20 25% 14% / 0.5",
|
||||
"--secondary-foreground": "25 15% 90%",
|
||||
"--muted": "20 25% 14% / 0.5",
|
||||
"--muted-foreground": "20 12% 62%",
|
||||
"--accent": "0 72% 51%",
|
||||
"--accent-foreground": "25 15% 95%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "20 25% 50% / 0.08",
|
||||
"--input": "20 25% 50% / 0.06",
|
||||
"--ring": "25 95% 53%",
|
||||
"--chart-1": "25 95% 53%",
|
||||
"--chart-2": "0 72% 51%",
|
||||
"--chart-3": "40 90% 55%",
|
||||
"--chart-4": "15 80% 50%",
|
||||
"--chart-5": "350 75% 55%",
|
||||
"--sidebar": "20 30% 5%",
|
||||
"--sidebar-foreground": "25 15% 90%",
|
||||
"--sidebar-primary": "25 95% 53%",
|
||||
"--sidebar-primary-foreground": "25 15% 90%",
|
||||
"--sidebar-accent": "20 25% 12%",
|
||||
"--sidebar-accent-foreground": "25 15% 90%",
|
||||
"--sidebar-border": "20 25% 50% / 0.06",
|
||||
"--sidebar-ring": "25 95% 53%",
|
||||
"--card-bg": "rgba(25, 15, 8, 0.35)",
|
||||
"--card-border": "rgba(249, 115, 22, 0.12)",
|
||||
"--card-hover-bg": "rgba(25, 15, 8, 0.45)",
|
||||
"--card-hover-border": "rgba(249, 115, 22, 0.22)",
|
||||
"--glass-bg": "rgba(25, 15, 8, 0.30)",
|
||||
"--glass-border": "rgba(249, 115, 22, 0.08)",
|
||||
"--glass-hover": "rgba(249, 115, 22, 0.03)",
|
||||
"--glass-input-bg": "rgba(249, 115, 22, 0.06)",
|
||||
"--glass-input-border": "rgba(249, 115, 22, 0.1)",
|
||||
"--glass-input-focus": "rgba(220, 38, 38, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(249, 115, 22, 0.08)",
|
||||
"--glass-table-header": "rgba(249, 115, 22, 0.08)",
|
||||
"--glass-bar-track": "rgba(249, 115, 22, 0.10)",
|
||||
"--nav-bg": "rgba(10, 6, 4, 0.65)",
|
||||
"--nav-border": "rgba(249, 115, 22, 0.08)",
|
||||
"--nav-active": "rgba(249, 115, 22, 0.08)",
|
||||
"--nav-hover": "rgba(249, 115, 22, 0.04)",
|
||||
"--accent-color": "#f97316",
|
||||
"--accent-glow": "rgba(249, 115, 22, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(249, 115, 22, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(249, 115, 22, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(249, 115, 22, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 12. Arctic
|
||||
{
|
||||
name: "arctic",
|
||||
label: "Arctic",
|
||||
isDark: true,
|
||||
swatch: ["#38bdf8", "#e0f2fe"],
|
||||
bodyBg: "linear-gradient(135deg, #040810 0%, #061018 40%, #040810 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(56, 189, 248, 0.40), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(224, 242, 254, 0.25), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(56, 189, 248, 0.28), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(125, 211, 252, 0.18), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "215 50% 4%",
|
||||
"--foreground": "210 20% 96%",
|
||||
"--card": "215 40% 9% / 0.4",
|
||||
"--card-foreground": "210 20% 96%",
|
||||
"--popover": "215 40% 9% / 0.8",
|
||||
"--popover-foreground": "210 20% 92%",
|
||||
"--primary": "199 89% 56%",
|
||||
"--primary-foreground": "215 50% 8%",
|
||||
"--secondary": "215 30% 14% / 0.5",
|
||||
"--secondary-foreground": "210 20% 92%",
|
||||
"--muted": "215 30% 14% / 0.5",
|
||||
"--muted-foreground": "210 15% 62%",
|
||||
"--accent": "204 94% 94%",
|
||||
"--accent-foreground": "215 50% 8%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "210 25% 60% / 0.08",
|
||||
"--input": "210 25% 60% / 0.06",
|
||||
"--ring": "199 89% 56%",
|
||||
"--chart-1": "199 89% 56%",
|
||||
"--chart-2": "190 80% 50%",
|
||||
"--chart-3": "210 70% 60%",
|
||||
"--chart-4": "185 70% 45%",
|
||||
"--chart-5": "200 80% 65%",
|
||||
"--sidebar": "215 40% 5%",
|
||||
"--sidebar-foreground": "210 20% 92%",
|
||||
"--sidebar-primary": "199 89% 56%",
|
||||
"--sidebar-primary-foreground": "210 20% 92%",
|
||||
"--sidebar-accent": "215 30% 12%",
|
||||
"--sidebar-accent-foreground": "210 20% 92%",
|
||||
"--sidebar-border": "210 25% 60% / 0.06",
|
||||
"--sidebar-ring": "199 89% 56%",
|
||||
"--card-bg": "rgba(8, 15, 30, 0.35)",
|
||||
"--card-border": "rgba(56, 189, 248, 0.12)",
|
||||
"--card-hover-bg": "rgba(8, 15, 30, 0.45)",
|
||||
"--card-hover-border": "rgba(56, 189, 248, 0.22)",
|
||||
"--glass-bg": "rgba(8, 15, 30, 0.30)",
|
||||
"--glass-border": "rgba(56, 189, 248, 0.08)",
|
||||
"--glass-hover": "rgba(56, 189, 248, 0.03)",
|
||||
"--glass-input-bg": "rgba(56, 189, 248, 0.06)",
|
||||
"--glass-input-border": "rgba(56, 189, 248, 0.1)",
|
||||
"--glass-input-focus": "rgba(224, 242, 254, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(56, 189, 248, 0.08)",
|
||||
"--glass-table-header": "rgba(56, 189, 248, 0.08)",
|
||||
"--glass-bar-track": "rgba(56, 189, 248, 0.10)",
|
||||
"--nav-bg": "rgba(4, 8, 16, 0.65)",
|
||||
"--nav-border": "rgba(56, 189, 248, 0.08)",
|
||||
"--nav-active": "rgba(56, 189, 248, 0.08)",
|
||||
"--nav-hover": "rgba(56, 189, 248, 0.04)",
|
||||
"--accent-color": "#38bdf8",
|
||||
"--accent-glow": "rgba(56, 189, 248, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(56, 189, 248, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(56, 189, 248, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(56, 189, 248, 0.3)",
|
||||
},
|
||||
},
|
||||
// 13. Crimson
|
||||
{
|
||||
name: "crimson",
|
||||
label: "Crimson",
|
||||
isDark: true,
|
||||
swatch: ["#ef4444", "#1a1a1a"],
|
||||
bodyBg: "linear-gradient(135deg, #080404 0%, #0c0606 40%, #080404 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(239, 68, 68, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 85%, rgba(185, 28, 28, 0.25), transparent 50%), radial-gradient(ellipse 80% 50% at 50% 50%, rgba(127, 29, 29, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "0 20% 3%",
|
||||
"--foreground": "0 0% 98%",
|
||||
"--card": "0 15% 9% / 0.4",
|
||||
"--card-foreground": "0 0% 98%",
|
||||
"--popover": "0 15% 9% / 0.8",
|
||||
"--popover-foreground": "0 0% 93%",
|
||||
"--primary": "0 84% 60%",
|
||||
"--primary-foreground": "0 0% 98%",
|
||||
"--secondary": "0 15% 14% / 0.5",
|
||||
"--secondary-foreground": "0 0% 93%",
|
||||
"--muted": "0 15% 14% / 0.5",
|
||||
"--muted-foreground": "0 10% 68%",
|
||||
"--accent": "0 84% 60%",
|
||||
"--accent-foreground": "0 0% 98%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "0 60% 40% / 0.12",
|
||||
"--input": "0 60% 40% / 0.06",
|
||||
"--ring": "0 84% 60%",
|
||||
"--chart-1": "0 84% 60%",
|
||||
"--chart-2": "350 70% 55%",
|
||||
"--chart-3": "15 80% 50%",
|
||||
"--chart-4": "330 60% 50%",
|
||||
"--chart-5": "0 60% 45%",
|
||||
"--sidebar": "0 15% 5%",
|
||||
"--sidebar-foreground": "0 0% 93%",
|
||||
"--sidebar-primary": "0 84% 60%",
|
||||
"--sidebar-primary-foreground": "0 0% 93%",
|
||||
"--sidebar-accent": "0 15% 12%",
|
||||
"--sidebar-accent-foreground": "0 0% 93%",
|
||||
"--sidebar-border": "0 60% 40% / 0.06",
|
||||
"--sidebar-ring": "0 84% 60%",
|
||||
"--card-bg": "rgba(25, 8, 8, 0.35)",
|
||||
"--card-border": "rgba(239, 68, 68, 0.12)",
|
||||
"--card-hover-bg": "rgba(25, 8, 8, 0.45)",
|
||||
"--card-hover-border": "rgba(239, 68, 68, 0.22)",
|
||||
"--glass-bg": "rgba(25, 8, 8, 0.30)",
|
||||
"--glass-border": "rgba(239, 68, 68, 0.08)",
|
||||
"--glass-hover": "rgba(239, 68, 68, 0.03)",
|
||||
"--glass-input-bg": "rgba(239, 68, 68, 0.06)",
|
||||
"--glass-input-border": "rgba(239, 68, 68, 0.1)",
|
||||
"--glass-input-focus": "rgba(239, 68, 68, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(239, 68, 68, 0.08)",
|
||||
"--glass-table-header": "rgba(239, 68, 68, 0.08)",
|
||||
"--glass-bar-track": "rgba(239, 68, 68, 0.10)",
|
||||
"--nav-bg": "rgba(8, 4, 4, 0.65)",
|
||||
"--nav-border": "rgba(239, 68, 68, 0.08)",
|
||||
"--nav-active": "rgba(239, 68, 68, 0.08)",
|
||||
"--nav-hover": "rgba(239, 68, 68, 0.04)",
|
||||
"--accent-color": "#ef4444",
|
||||
"--accent-glow": "rgba(239, 68, 68, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(239, 68, 68, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(239, 68, 68, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(239, 68, 68, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 14. Trinidad
|
||||
{
|
||||
name: "trinidad",
|
||||
label: "Trinidad",
|
||||
isDark: true,
|
||||
swatch: ["#ef4444", "#fbbf24"],
|
||||
bodyBg: "linear-gradient(135deg, #080604 0%, #0c0906 40%, #080604 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 140% 70% at 5% 5%, rgba(239, 68, 68, 0.28), transparent 50%), radial-gradient(ellipse 100% 80% at 90% 30%, rgba(251, 191, 36, 0.22), transparent 50%), radial-gradient(ellipse 120% 60% at 50% 100%, rgba(239, 68, 68, 0.15), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "30 20% 3%",
|
||||
"--foreground": "40 20% 97%",
|
||||
"--card": "30 18% 9% / 0.4",
|
||||
"--card-foreground": "40 20% 97%",
|
||||
"--popover": "30 18% 9% / 0.8",
|
||||
"--popover-foreground": "40 20% 90%",
|
||||
"--primary": "45 93% 58%",
|
||||
"--primary-foreground": "30 30% 8%",
|
||||
"--secondary": "30 18% 14% / 0.5",
|
||||
"--secondary-foreground": "40 20% 90%",
|
||||
"--muted": "30 18% 14% / 0.5",
|
||||
"--muted-foreground": "35 15% 68%",
|
||||
"--accent": "0 84% 60%",
|
||||
"--accent-foreground": "40 20% 97%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "35 40% 45% / 0.12",
|
||||
"--input": "35 40% 45% / 0.06",
|
||||
"--ring": "45 93% 58%",
|
||||
"--chart-1": "45 93% 58%",
|
||||
"--chart-2": "0 84% 60%",
|
||||
"--chart-3": "30 80% 55%",
|
||||
"--chart-4": "15 80% 50%",
|
||||
"--chart-5": "50 90% 55%",
|
||||
"--sidebar": "30 18% 5%",
|
||||
"--sidebar-foreground": "40 20% 90%",
|
||||
"--sidebar-primary": "45 93% 58%",
|
||||
"--sidebar-primary-foreground": "40 20% 90%",
|
||||
"--sidebar-accent": "30 18% 12%",
|
||||
"--sidebar-accent-foreground": "40 20% 90%",
|
||||
"--sidebar-border": "35 40% 45% / 0.06",
|
||||
"--sidebar-ring": "45 93% 58%",
|
||||
"--card-bg": "rgba(20, 12, 5, 0.35)",
|
||||
"--card-border": "rgba(251, 191, 36, 0.12)",
|
||||
"--card-hover-bg": "rgba(20, 12, 5, 0.45)",
|
||||
"--card-hover-border": "rgba(251, 191, 36, 0.22)",
|
||||
"--glass-bg": "rgba(20, 12, 5, 0.30)",
|
||||
"--glass-border": "rgba(251, 191, 36, 0.08)",
|
||||
"--glass-hover": "rgba(251, 191, 36, 0.03)",
|
||||
"--glass-input-bg": "rgba(251, 191, 36, 0.06)",
|
||||
"--glass-input-border": "rgba(251, 191, 36, 0.1)",
|
||||
"--glass-input-focus": "rgba(239, 68, 68, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(251, 191, 36, 0.08)",
|
||||
"--glass-table-header": "rgba(251, 191, 36, 0.08)",
|
||||
"--glass-bar-track": "rgba(251, 191, 36, 0.10)",
|
||||
"--nav-bg": "rgba(8, 6, 4, 0.65)",
|
||||
"--nav-border": "rgba(251, 191, 36, 0.08)",
|
||||
"--nav-active": "rgba(251, 191, 36, 0.08)",
|
||||
"--nav-hover": "rgba(251, 191, 36, 0.04)",
|
||||
"--accent-color": "#fbbf24",
|
||||
"--accent-glow": "rgba(251, 191, 36, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(251, 191, 36, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(251, 191, 36, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(251, 191, 36, 0.3)",
|
||||
},
|
||||
},
|
||||
|
||||
// 15. Samurai
|
||||
{
|
||||
name: "samurai",
|
||||
label: "Samurai",
|
||||
isDark: true,
|
||||
swatch: ["#dc2626", "#fafafa"],
|
||||
bodyBg: "linear-gradient(135deg, #0a0808 0%, #0e0b0b 40%, #0a0808 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 100% 80% at 20% 10%, rgba(220, 38, 38, 0.25), transparent 50%), radial-gradient(ellipse 80% 60% at 80% 80%, rgba(180, 83, 9, 0.15), transparent 50%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 255, 255, 0.03), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "0 10% 4%",
|
||||
"--foreground": "0 0% 97%",
|
||||
"--card": "0 8% 9% / 0.4",
|
||||
"--card-foreground": "0 0% 97%",
|
||||
"--popover": "0 8% 9% / 0.8",
|
||||
"--popover-foreground": "0 0% 92%",
|
||||
"--primary": "0 72% 51%",
|
||||
"--primary-foreground": "0 0% 97%",
|
||||
"--secondary": "0 8% 14% / 0.5",
|
||||
"--secondary-foreground": "0 0% 92%",
|
||||
"--muted": "0 8% 14% / 0.5",
|
||||
"--muted-foreground": "0 5% 65%",
|
||||
"--accent": "0 72% 51%",
|
||||
"--accent-foreground": "0 0% 97%",
|
||||
"--destructive": "0 72% 51%",
|
||||
"--border": "0 10% 50% / 0.10",
|
||||
"--input": "0 10% 50% / 0.06",
|
||||
"--ring": "0 72% 51%",
|
||||
"--chart-1": "0 72% 51%",
|
||||
"--chart-2": "30 70% 40%",
|
||||
"--chart-3": "350 60% 50%",
|
||||
"--chart-4": "15 50% 45%",
|
||||
"--chart-5": "0 50% 40%",
|
||||
"--sidebar": "0 8% 5%",
|
||||
"--sidebar-foreground": "0 0% 92%",
|
||||
"--sidebar-primary": "0 72% 51%",
|
||||
"--sidebar-primary-foreground": "0 0% 92%",
|
||||
"--sidebar-accent": "0 8% 12%",
|
||||
"--sidebar-accent-foreground": "0 0% 92%",
|
||||
"--sidebar-border": "0 10% 50% / 0.06",
|
||||
"--sidebar-ring": "0 72% 51%",
|
||||
"--card-bg": "rgba(18, 10, 10, 0.35)",
|
||||
"--card-border": "rgba(220, 38, 38, 0.10)",
|
||||
"--card-hover-bg": "rgba(18, 10, 10, 0.45)",
|
||||
"--card-hover-border": "rgba(220, 38, 38, 0.18)",
|
||||
"--glass-bg": "rgba(18, 10, 10, 0.30)",
|
||||
"--glass-border": "rgba(220, 38, 38, 0.06)",
|
||||
"--glass-hover": "rgba(220, 38, 38, 0.03)",
|
||||
"--glass-input-bg": "rgba(255, 255, 255, 0.06)",
|
||||
"--glass-input-border": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-input-focus": "rgba(220, 38, 38, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
|
||||
"--glass-table-header": "rgba(255, 255, 255, 0.06)",
|
||||
"--glass-bar-track": "rgba(255, 255, 255, 0.08)",
|
||||
"--nav-bg": "rgba(10, 8, 8, 0.65)",
|
||||
"--nav-border": "rgba(220, 38, 38, 0.06)",
|
||||
"--nav-active": "rgba(220, 38, 38, 0.08)",
|
||||
"--nav-hover": "rgba(220, 38, 38, 0.04)",
|
||||
"--accent-color": "#dc2626",
|
||||
"--accent-glow": "rgba(220, 38, 38, 0.2)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.35)",
|
||||
"--stat-glow": "0 0 20px rgba(220, 38, 38, 0.12)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(220, 38, 38, 0.25)",
|
||||
},
|
||||
},
|
||||
|
||||
// 16. Supra
|
||||
{
|
||||
name: "supra",
|
||||
label: "Supra",
|
||||
isDark: true,
|
||||
swatch: ["#f97316", "#18181b"],
|
||||
bodyBg: "linear-gradient(135deg, #060606 0%, #0a0806 40%, #060606 100%)",
|
||||
bgGradient:
|
||||
"radial-gradient(ellipse 120% 60% at 10% 10%, rgba(249, 115, 22, 0.30), transparent 50%), radial-gradient(ellipse 80% 70% at 85% 70%, rgba(234, 88, 12, 0.20), transparent 50%), radial-gradient(ellipse 100% 40% at 50% 100%, rgba(249, 115, 22, 0.12), transparent 50%)",
|
||||
vars: {
|
||||
"--background": "24 10% 3%",
|
||||
"--foreground": "24 10% 97%",
|
||||
"--card": "24 8% 9% / 0.4",
|
||||
"--card-foreground": "24 10% 97%",
|
||||
"--popover": "24 8% 9% / 0.8",
|
||||
"--popover-foreground": "24 10% 92%",
|
||||
"--primary": "25 95% 53%",
|
||||
"--primary-foreground": "24 20% 8%",
|
||||
"--secondary": "24 10% 14% / 0.5",
|
||||
"--secondary-foreground": "24 10% 92%",
|
||||
"--muted": "24 10% 14% / 0.5",
|
||||
"--muted-foreground": "24 10% 65%",
|
||||
"--accent": "25 95% 53%",
|
||||
"--accent-foreground": "24 10% 97%",
|
||||
"--destructive": "0 84% 60%",
|
||||
"--border": "25 40% 40% / 0.10",
|
||||
"--input": "25 40% 40% / 0.06",
|
||||
"--ring": "25 95% 53%",
|
||||
"--chart-1": "25 95% 53%",
|
||||
"--chart-2": "15 80% 50%",
|
||||
"--chart-3": "35 90% 55%",
|
||||
"--chart-4": "10 70% 45%",
|
||||
"--chart-5": "30 85% 50%",
|
||||
"--sidebar": "24 8% 5%",
|
||||
"--sidebar-foreground": "24 10% 92%",
|
||||
"--sidebar-primary": "25 95% 53%",
|
||||
"--sidebar-primary-foreground": "24 10% 92%",
|
||||
"--sidebar-accent": "24 10% 12%",
|
||||
"--sidebar-accent-foreground": "24 10% 92%",
|
||||
"--sidebar-border": "25 40% 40% / 0.06",
|
||||
"--sidebar-ring": "25 95% 53%",
|
||||
"--card-bg": "rgba(15, 10, 5, 0.35)",
|
||||
"--card-border": "rgba(249, 115, 22, 0.12)",
|
||||
"--card-hover-bg": "rgba(15, 10, 5, 0.45)",
|
||||
"--card-hover-border": "rgba(249, 115, 22, 0.22)",
|
||||
"--glass-bg": "rgba(15, 10, 5, 0.30)",
|
||||
"--glass-border": "rgba(249, 115, 22, 0.08)",
|
||||
"--glass-hover": "rgba(249, 115, 22, 0.03)",
|
||||
"--glass-input-bg": "rgba(249, 115, 22, 0.06)",
|
||||
"--glass-input-border": "rgba(249, 115, 22, 0.1)",
|
||||
"--glass-input-focus": "rgba(249, 115, 22, 0.3)",
|
||||
"--glass-input-focus-bg": "rgba(249, 115, 22, 0.08)",
|
||||
"--glass-table-header": "rgba(249, 115, 22, 0.08)",
|
||||
"--glass-bar-track": "rgba(249, 115, 22, 0.10)",
|
||||
"--nav-bg": "rgba(6, 6, 6, 0.65)",
|
||||
"--nav-border": "rgba(249, 115, 22, 0.08)",
|
||||
"--nav-active": "rgba(249, 115, 22, 0.08)",
|
||||
"--nav-hover": "rgba(249, 115, 22, 0.04)",
|
||||
"--accent-color": "#f97316",
|
||||
"--accent-glow": "rgba(249, 115, 22, 0.3)",
|
||||
"--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(249, 115, 22, 0.06)",
|
||||
"--stat-glow": "0 0 20px rgba(249, 115, 22, 0.15)",
|
||||
"--nav-active-glow": "0 2px 10px rgba(249, 115, 22, 0.3)",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_THEME = "midnight";
|
||||
|
||||
export function getTheme(name: string): Theme {
|
||||
return themes.find((t) => t.name === name) ?? themes[0];
|
||||
}
|
||||
151
dashboard/ui/lib/types.ts
Normal file
151
dashboard/ui/lib/types.ts
Normal file
@@ -0,0 +1,151 @@
|
||||
// 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 }[];
|
||||
}
|
||||
|
||||
export interface HealthScore {
|
||||
score: number;
|
||||
grade: string;
|
||||
details: { name: string; score: number; max: number; status: string }[];
|
||||
}
|
||||
|
||||
export interface KumaMonitor {
|
||||
id: number;
|
||||
name: string;
|
||||
url?: string;
|
||||
type: string;
|
||||
active: boolean;
|
||||
status: boolean; // true = up
|
||||
parent?: number;
|
||||
}
|
||||
|
||||
export interface KumaStats {
|
||||
monitors: KumaMonitor[];
|
||||
total: number;
|
||||
up: number;
|
||||
down: number;
|
||||
}
|
||||
|
||||
export interface JellyfinLatestItem {
|
||||
name: string;
|
||||
type: string;
|
||||
series?: string;
|
||||
date: string;
|
||||
year?: number;
|
||||
}
|
||||
|
||||
export interface ArrHistoryItem {
|
||||
title: string;
|
||||
event: string;
|
||||
date: string;
|
||||
quality: string;
|
||||
}
|
||||
|
||||
export interface CloudflareStats {
|
||||
total: number;
|
||||
proxied: number;
|
||||
dns_only: number;
|
||||
types: Record<string, number>;
|
||||
}
|
||||
|
||||
export interface AuthentikStats {
|
||||
active_sessions: number;
|
||||
users?: { username: string; last_login: string; active: boolean }[];
|
||||
sessions?: { user: string; last_used?: string }[];
|
||||
recent_events?: { action: string; user?: string; created?: string; timestamp?: string }[];
|
||||
}
|
||||
|
||||
export interface GiteaActivity {
|
||||
commits: { sha: string; message: string; author: string; date: string }[];
|
||||
open_prs: { title: string; number: number; author: string }[];
|
||||
}
|
||||
|
||||
export interface AutomationTimelineEntry {
|
||||
name: string;
|
||||
last_run: string;
|
||||
exists: boolean;
|
||||
}
|
||||
|
||||
export interface DiskUsageEntry {
|
||||
host: string;
|
||||
mount: string;
|
||||
total_gb: number;
|
||||
avail_gb: number;
|
||||
used_pct: 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,
|
||||
});
|
||||
}
|
||||
52
dashboard/ui/lib/use-sse.ts
Normal file
52
dashboard/ui/lib/use-sse.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
"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);
|
||||
|
||||
// Backend sends "init" with the full batch and "update" with new events
|
||||
es.addEventListener("init", (e: MessageEvent) => {
|
||||
try {
|
||||
const batch: ActivityEvent[] = JSON.parse(e.data);
|
||||
setEvents(batch.slice(0, maxEvents));
|
||||
} catch {
|
||||
// ignore malformed events
|
||||
}
|
||||
});
|
||||
|
||||
es.addEventListener("update", (e: MessageEvent) => {
|
||||
try {
|
||||
const batch: ActivityEvent[] = JSON.parse(e.data);
|
||||
setEvents((prev) => [...batch, ...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;
|
||||
11
dashboard/ui/public/favicon.svg
Normal file
11
dashboard/ui/public/favicon.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#3b82f6"/>
|
||||
<stop offset="50%" stop-color="#8b5cf6"/>
|
||||
<stop offset="100%" stop-color="#ec4899"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="8" fill="url(#g)"/>
|
||||
<text x="16" y="22" text-anchor="middle" font-family="sans-serif" font-size="18" font-weight="bold" fill="white">H</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 488 B |
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 |
BIN
dashboard/ui/public/fonts/Exo2-Bold.ttf
Normal file
BIN
dashboard/ui/public/fonts/Exo2-Bold.ttf
Normal file
Binary file not shown.
BIN
dashboard/ui/public/fonts/Exo2-Light.ttf
Normal file
BIN
dashboard/ui/public/fonts/Exo2-Light.ttf
Normal file
Binary file not shown.
BIN
dashboard/ui/public/fonts/Exo2-Medium.ttf
Normal file
BIN
dashboard/ui/public/fonts/Exo2-Medium.ttf
Normal file
Binary file not shown.
BIN
dashboard/ui/public/fonts/Exo2-Regular.ttf
Normal file
BIN
dashboard/ui/public/fonts/Exo2-Regular.ttf
Normal file
Binary file not shown.
BIN
dashboard/ui/public/fonts/Exo2-SemiBold.ttf
Normal file
BIN
dashboard/ui/public/fonts/Exo2-SemiBold.ttf
Normal file
Binary file not shown.
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