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

Sanitized mirror from private repository - 2026-04-05 08:31:50 UTC
Some checks failed
Documentation / Build Docusaurus (push) Failing after 5m1s
Details
Documentation / Deploy to GitHub Pages (push) Has been skipped
Details

Browse Source
This commit is contained in:
Gitea Mirror Bot
2026-04-05 08:31:50 +00:00
commit 2be8f1fe17
1390 changed files with 354479 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -0,0 +1,150 @@
"use client";
import { usePoll } from "@/lib/use-poll";
import type { ExpenseSummary } from "@/lib/types";
import { StatCard } from "@/components/stat-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DataTable, Column } from "@/components/data-table";
interface Transaction {
date: string;
vendor: string;
amount: string | number;
currency?: string;
order_number?: string;
email_account?: string;
message_id?: string;
[key: string]: unknown;
}
export default function ExpensesPage() {
const { data: summary } = usePoll<ExpenseSummary>(
"/api/expenses/summary",
120000
);
const { data: expenseData } = usePoll<Transaction[] | { count: number; expenses: Transaction[] }>(
"/api/expenses",
120000
);
const transactions = Array.isArray(expenseData) ? expenseData : (expenseData?.expenses ?? []);
const maxVendor =
summary?.top_vendors.reduce(
(max, v) => Math.max(max, v.amount),
0
) ?? 1;
const txColumns: Column<Transaction>[] = [
{ key: "date", label: "Date" },
{
key: "vendor",
label: "Vendor",
render: (row) => (
<span className="font-medium text-foreground">{row.vendor}</span>
),
},
{
key: "amount",
label: "Amount",
render: (row) => (
<span className="text-foreground">
${Number(row.amount || 0).toFixed(2)} {row.currency ?? ""}
</span>
),
},
{ key: "order_number", label: "Order #" },
{
key: "email_account",
label: "Account",
render: (row) => (
<span className="text-muted-foreground truncate max-w-[120px] block text-[10px]">
{String(row.email_account ?? "")}
</span>
),
},
];
const accounts = transactions
? [...new Set(transactions.map((t) => String(t.email_account ?? "")).filter(Boolean))]
: [];
return (
<div className="space-y-8">
<h1 className="text-lg font-semibold">Expenses</h1>
{/* Summary Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<StatCard
label="Total Spend"
value={summary ? `$${summary.total.toFixed(2)}` : "\u2014"}
sub={summary?.month}
/>
<StatCard
label="Transactions"
value={summary?.count ?? "\u2014"}
sub="this month"
/>
<StatCard
label="Top Vendor"
value={
summary?.top_vendors?.[0]?.vendor ?? "\u2014"
}
sub={
summary?.top_vendors?.[0]
? `$${summary.top_vendors[0].amount.toFixed(2)}`
: undefined
}
/>
</div>
{/* Top Vendors Bar Chart */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Top Vendors</CardTitle>
</CardHeader>
<CardContent>
{!summary ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : (
<div className="space-y-3">
{summary.top_vendors.map((v) => (
<div key={v.vendor} className="space-y-1.5">
<div className="flex items-center justify-between text-xs">
<span className="text-foreground">{v.vendor}</span>
<span className="text-muted-foreground/70">
${v.amount.toFixed(2)}
</span>
</div>
<div className="glass-bar-track h-2">
<div
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-700"
style={{
width: `${(v.amount / maxVendor) * 100}%`,
}}
/>
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Transactions Table */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Transactions</CardTitle>
</CardHeader>
<CardContent>
<DataTable<Transaction>
data={transactions ?? []}
columns={txColumns}
searchKey="vendor"
filterKey="email_account"
filterOptions={accounts}
/>
</CardContent>
</Card>
</div>
);
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

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

@@ -0,0 +1,302 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-mono: var(--font-geist-mono);
--font-heading: var(--font-sans);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.4);
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
}
:root {
--radius: 0.625rem;
}
.dark {
--background: hsl(230 25% 5%);
--foreground: hsl(210 40% 96%);
--card: hsla(220, 30%, 8%, 0.4);
--card-foreground: hsl(210 40% 96%);
--popover: hsla(220, 30%, 8%, 0.8);
--popover-foreground: hsl(210 40% 96%);
--primary: hsl(217 91% 60%);
--primary-foreground: hsl(210 40% 96%);
--secondary: hsla(217, 33%, 12%, 0.5);
--secondary-foreground: hsl(210 40% 96%);
--muted: hsla(217, 33%, 12%, 0.5);
--muted-foreground: hsl(215 20% 55%);
--accent: hsla(217, 33%, 12%, 0.5);
--accent-foreground: hsl(210 40% 96%);
--destructive: hsl(0 84% 60%);
--border: hsla(0, 0%, 100%, 0.06);
--input: hsla(0, 0%, 100%, 0.06);
--ring: hsl(217 91% 60%);
--chart-1: hsl(217 91% 60%);
--chart-2: hsl(160 60% 45%);
--chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%);
--sidebar: hsla(220, 30%, 6%, 0.6);
--sidebar-foreground: hsl(210 40% 96%);
--sidebar-primary: hsl(217 91% 60%);
--sidebar-primary-foreground: hsl(210 40% 96%);
--sidebar-accent: hsla(217, 33%, 12%, 0.5);
--sidebar-accent-foreground: hsl(210 40% 96%);
--sidebar-border: hsla(0, 0%, 100%, 0.06);
--sidebar-ring: hsl(217 91% 60%);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply text-foreground;
}
html {
@apply font-sans;
}
}
/* --- Glassmorphism Background --- */
body {
background: linear-gradient(135deg, #0a0a1a 0%, #0d1117 40%, #0a0e1a 100%);
min-height: 100vh;
position: relative;
}
/* Subtle radial glow in the center */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: radial-gradient(ellipse 60% 50% at 50% 30%, hsla(230, 60%, 25%, 0.15) 0%, transparent 70%),
radial-gradient(ellipse 40% 40% at 70% 60%, hsla(260, 50%, 20%, 0.1) 0%, transparent 60%);
pointer-events: none;
}
/* --- Glass Utility --- */
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* --- Override shadcn Card for glassmorphism --- */
[data-slot="card"] {
background: rgba(255, 255, 255, 0.03) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
ring: none !important;
--tw-ring-shadow: none !important;
--tw-ring-color: transparent !important;
animation: fade-up 0.5s ease-out both;
}
/* Stagger card animations */
[data-slot="card"]:nth-child(1) { animation-delay: 0ms; }
[data-slot="card"]:nth-child(2) { animation-delay: 60ms; }
[data-slot="card"]:nth-child(3) { animation-delay: 120ms; }
[data-slot="card"]:nth-child(4) { animation-delay: 180ms; }
[data-slot="card"]:nth-child(5) { animation-delay: 240ms; }
[data-slot="card"]:nth-child(6) { animation-delay: 300ms; }
/* --- Animations --- */
/* Card entrance */
@keyframes fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
animation: fade-up 0.5s ease-out both;
}
/* Status dot glow */
.glow-green { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.4); }
.glow-red { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4); }
.glow-amber { box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.4); }
.glow-blue { box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.4); }
.glow-purple { box-shadow: 0 0 8px 2px rgba(168, 85, 247, 0.4); }
/* LIVE badge pulse */
@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-live-pulse {
animation: live-pulse 2s ease-in-out infinite;
}
/* Slide-in for feed items */
@keyframes slide-in {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in {
animation: slide-in 0.3s ease-out forwards;
}
/* Logo float animation */
@keyframes logo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.animate-logo-float {
animation: logo-float 3s ease-in-out infinite;
}
/* Logo shimmer */
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.animate-shimmer {
background-size: 200% auto;
animation: shimmer 3s linear infinite;
}
/* Number transition */
.tabular-nums-transition {
font-variant-numeric: tabular-nums;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* VRAM/progress bar glow */
@keyframes bar-glow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}
.animate-bar-glow {
animation: bar-glow 2s ease-in-out infinite;
}
/* Card hover lift - softer for glass */
.card-hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.card-hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(59, 130, 246, 0.04);
}
/* Active nav glow */
.nav-active-glow {
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}
/* --- Gauge Ring (SVG-based circular progress) --- */
.gauge-track {
fill: none;
stroke: rgba(255, 255, 255, 0.05);
}
.gauge-fill {
fill: none;
stroke-linecap: round;
transition: stroke-dashoffset 1s ease-out;
}
/* Number glow for big stat values */
.stat-glow {
text-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}
/* Glass input fields */
.glass-input {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: border-color 0.2s ease, background 0.2s ease;
}
.glass-input:focus {
border-color: rgba(59, 130, 246, 0.3);
background: rgba(255, 255, 255, 0.05);
outline: none;
}
/* Glass table rows */
.glass-table-header {
background: rgba(255, 255, 255, 0.04);
}
.glass-table-row {
transition: background 0.2s ease;
}
.glass-table-row:hover {
background: rgba(255, 255, 255, 0.03);
}
/* Glass progress bar track */
.glass-bar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 999px;
overflow: hidden;
}
/* Glass bar fill glow */
.glass-bar-fill {
border-radius: 999px;
position: relative;
}
.glass-bar-fill::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
animation: bar-shimmer 2s ease-in-out infinite;
}
@keyframes bar-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}

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

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

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

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

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

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

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

@@ -0,0 +1,388 @@
"use client";
import { usePoll } from "@/lib/use-poll";
import { JellyfinCard } from "@/components/jellyfin-card";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { StatusBadge } from "@/components/status-badge";
interface QueueItem {
title: string;
status: string;
size?: string;
timeleft?: string;
progress?: number;
}
interface SonarrQueueItem {
title: string;
status: string;
sizeleft?: string;
timeleft?: string;
}
interface RadarrQueueItem {
title: string;
status: string;
sizeleft?: string;
timeleft?: string;
}
interface SabQueue {
slots: QueueItem[];
speed: string;
paused: boolean;
}
interface ProwlarrIndexer {
name: string;
protocol: string;
}
interface ProwlarrStats {
total: number;
enabled: number;
indexers: ProwlarrIndexer[];
error?: string;
}
interface BazarrStatus {
version?: string;
sonarr_signalr?: string;
radarr_signalr?: string;
wanted_episodes?: number;
wanted_movies?: number;
error?: string;
}
interface ABSLibrary {
name: string;
type: string;
items: number;
}
interface ABSStats {
libraries: ABSLibrary[];
total: number;
error?: string;
}
interface DelugeStatus {
available: boolean;
total?: number;
active?: number;
downloading?: number;
seeding?: number;
error?: string;
}
export default function MediaPage() {
const { data: sonarrRaw } = usePoll<Record<string, unknown>>("/api/sonarr/queue", 30000);
const { data: radarrRaw } = usePoll<Record<string, unknown>>("/api/radarr/queue", 30000);
const { data: sabRaw } = usePoll<Record<string, unknown>>("/api/sabnzbd/queue", 30000);
const { data: prowlarr } = usePoll<ProwlarrStats>("/api/prowlarr/stats", 60000);
const { data: bazarr } = usePoll<BazarrStatus>("/api/bazarr/status", 60000);
const { data: abs } = usePoll<ABSStats>("/api/audiobookshelf/stats", 60000);
const { data: deluge } = usePoll<DelugeStatus>("/api/deluge/status", 30000);
const sonarr = (sonarrRaw?.records ?? sonarrRaw?.items ?? []) as SonarrQueueItem[];
const radarr = (radarrRaw?.records ?? radarrRaw?.items ?? []) as RadarrQueueItem[];
const sab = sabRaw?.queue as SabQueue | undefined;
return (
<div className="space-y-8">
<h1 className="text-lg font-semibold">Media</h1>
<JellyfinCard />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
{/* Sonarr Queue */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Sonarr Queue</CardTitle>
</CardHeader>
<CardContent>
{!sonarr ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : sonarr.length === 0 ? (
<p className="text-xs text-muted-foreground/60">Queue empty</p>
) : (
<div className="space-y-2">
{sonarr.map((item, i) => (
<div key={i} className="text-xs space-y-0.5 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
<p className="text-foreground font-medium truncate">
{item.title}
</p>
<div className="flex items-center gap-2">
<StatusBadge
color={
item.status === "completed"
? "green"
: item.status === "downloading"
? "blue"
: "amber"
}
label={item.status}
/>
{item.timeleft && (
<span className="text-muted-foreground/70">
{item.timeleft}
</span>
)}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Radarr Queue */}
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium">Radarr Queue</CardTitle>
</CardHeader>
<CardContent>
{!radarr ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : radarr.length === 0 ? (
<p className="text-xs text-muted-foreground/60">Queue empty</p>
) : (
<div className="space-y-2">
{radarr.map((item, i) => (
<div key={i} className="text-xs space-y-0.5 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
<p className="text-foreground font-medium truncate">
{item.title}
</p>
<div className="flex items-center gap-2">
<StatusBadge
color={
item.status === "completed"
? "green"
: item.status === "downloading"
? "blue"
: "amber"
}
label={item.status}
/>
{item.timeleft && (
<span className="text-muted-foreground/70">
{item.timeleft}
</span>
)}
</div>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* SABnzbd Queue */}
<Card>
<CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium">
SABnzbd Queue
</CardTitle>
{sab && (
<StatusBadge
color={sab.paused ? "amber" : "green"}
label={sab.paused ? "Paused" : sab.speed}
/>
)}
</CardHeader>
<CardContent>
{!sab ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : sab.slots.length === 0 ? (
<p className="text-xs text-muted-foreground/60">Queue empty</p>
) : (
<div className="space-y-2">
{sab.slots.map((item, i) => (
<div key={i} className="text-xs space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
<p className="text-foreground font-medium truncate">
{item.title}
</p>
<div className="flex items-center gap-2">
<StatusBadge
color={
item.status === "Downloading" ? "blue" : "amber"
}
label={item.status}
/>
{item.timeleft && (
<span className="text-muted-foreground/70">
{item.timeleft}
</span>
)}
</div>
{item.progress != null && (
<div className="glass-bar-track h-1">
<div
className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-cyan-400"
style={{ width: `${item.progress}%` }}
/>
</div>
)}
</div>
))}
</div>
)}
</CardContent>
</Card>
</div>
{/* Arr Suite Services */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
{/* Prowlarr */}
<Card>
<CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium">Prowlarr</CardTitle>
{prowlarr && !prowlarr.error && (
<StatusBadge color="green" label={`${prowlarr.enabled} active`} />
)}
</CardHeader>
<CardContent>
{!prowlarr ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : prowlarr.error ? (
<p className="text-xs text-red-400">{prowlarr.error}</p>
) : (
<div className="space-y-2">
<p className="text-xs text-muted-foreground/70">
{prowlarr.enabled}/{prowlarr.total} indexers enabled
</p>
{prowlarr.indexers.map((idx, i) => (
<div key={i} className="flex items-center justify-between text-xs">
<span className="text-foreground truncate">{idx.name}</span>
<span className="text-muted-foreground/60 ml-2 shrink-0">
{idx.protocol}
</span>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Bazarr */}
<Card>
<CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium">Bazarr</CardTitle>
{bazarr && !bazarr.error && (
<StatusBadge color="green" label={bazarr.version} />
)}
</CardHeader>
<CardContent>
{!bazarr ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : bazarr.error ? (
<p className="text-xs text-red-400">{bazarr.error}</p>
) : (
<div className="space-y-2">
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground/70">Wanted episodes</span>
<span className="text-foreground font-medium">
{bazarr.wanted_episodes}
</span>
</div>
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground/70">Wanted movies</span>
<span className="text-foreground font-medium">
{bazarr.wanted_movies}
</span>
</div>
<div className="flex items-center gap-2 text-xs">
<span className="text-muted-foreground/70">Sonarr SignalR</span>
<StatusBadge
color={bazarr.sonarr_signalr === "LIVE" ? "green" : "red"}
label={String(bazarr.sonarr_signalr)}
/>
</div>
<div className="flex items-center gap-2 text-xs">
<span className="text-muted-foreground/70">Radarr SignalR</span>
<StatusBadge
color={bazarr.radarr_signalr === "LIVE" ? "green" : "red"}
label={String(bazarr.radarr_signalr)}
/>
</div>
</div>
)}
</CardContent>
</Card>
{/* Audiobookshelf */}
<Card>
<CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium">Audiobookshelf</CardTitle>
{abs && !abs.error && (
<StatusBadge color="green" label={`${abs.total} items`} />
)}
</CardHeader>
<CardContent>
{!abs ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : abs.error ? (
<p className="text-xs text-red-400">{abs.error}</p>
) : (
<div className="space-y-2">
{abs.libraries.map((lib, i) => (
<div key={i} className="flex items-center justify-between text-xs">
<span className="text-foreground">{lib.name}</span>
<span className="text-muted-foreground/70">
{lib.items} {lib.type}
</span>
</div>
))}
</div>
)}
</CardContent>
</Card>
{/* Deluge */}
<Card>
<CardHeader className="pb-2 flex flex-row items-center justify-between">
<CardTitle className="text-sm font-medium">Deluge</CardTitle>
{deluge && (
<StatusBadge
color={deluge.available ? "green" : "red"}
label={deluge.available ? "Online" : "Offline"}
/>
)}
</CardHeader>
<CardContent>
{!deluge ? (
<p className="text-xs text-muted-foreground">Loading...</p>
) : !deluge.available ? (
<p className="text-xs text-red-400">
{deluge.error ?? "Unreachable"}
</p>
) : (
<div className="space-y-2">
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground/70">Total</span>
<span className="text-foreground font-medium">
{deluge.total}
</span>
</div>
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground/70">Downloading</span>
<StatusBadge
color={deluge.downloading ? "blue" : "green"}
label={String(deluge.downloading)}
/>
</div>
<div className="flex items-center justify-between text-xs">
<span className="text-muted-foreground/70">Seeding</span>
<StatusBadge
color={deluge.seeding ? "purple" : "green"}
label={String(deluge.seeding)}
/>
</div>
</div>
)}
</CardContent>
</Card>
</div>
</div>
);
}

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

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

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

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