Claude Code
6d74d874b6
ARCHITECTURE ============ Backend: FastAPI + uvicorn (port 8000) - JWT authentication with PAM system users - ZFS CLI wrapper with caching (30-60s TTL) - WebSocket pool status broadcaster (30s interval) - Services: auth, zfs_runner, file_manager, shares, identities, system_info - Routers: pools, datasets, snapshots, shares, identities, navigator, system Frontend: Next.js 15 + TypeScript (static export) - Incremental Static Regeneration (ISR) for weak hardware - Type-safe API client (lib/api.ts) - Dark mode + custom Tailwind theme - Pages: Dashboard, Login, Snapshots, Datasets, Shares, etc. DEPLOYMENT ========== Test Target: 192.168.1.179:8090 (Debian LXC) Production: 10.66.120.3:9090 (Raspberry Pi 4GB ARM64) Updater: Automated Gitea-based deployment (update-test.sh, update-pi.sh) FEATURES COMPLETED ================== Phase 3a: Dashboard Quick Stats (System, CPU, Memory, Storage) - Real-time stats with color-coded progress bars - Responsive grid layout (mobile: 1, tablet: 2, desktop: 4 columns) - ISR-optimized for fast loads on weak hardware REBRANDING ========== Renamed throughout: - Project: 'ZFS Manager' → 'ZMB Webui' - Services: 'zfs-manager' → 'zmb-webui' - Systemd units: zfs-manager-backend → zmb-webui-backend - Configuration files and documentation Co-Authored-By: Patrick <patrick@perlbach24.de>
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect } from "react"
|
||
|
||
interface DialogProps {
|
||
open: boolean
|
||
onClose: () => void
|
||
title: string
|
||
children: React.ReactNode
|
||
}
|
||
|
||
export function Dialog({ open, onClose, title, children }: DialogProps) {
|
||
// Close on Escape key
|
||
useEffect(() => {
|
||
if (!open) return
|
||
const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose() }
|
||
document.addEventListener("keydown", handler)
|
||
return () => document.removeEventListener("keydown", handler)
|
||
}, [open, onClose])
|
||
|
||
if (!open) return null
|
||
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center"
|
||
onClick={onClose}
|
||
>
|
||
{/* Backdrop */}
|
||
<div className="absolute inset-0 bg-black/60" />
|
||
|
||
{/* Panel */}
|
||
<div
|
||
className="relative z-10 w-full max-w-md mx-4 rounded-lg border border-border bg-background shadow-xl"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
|
||
<h2 className="text-lg font-semibold">{title}</h2>
|
||
<button
|
||
onClick={onClose}
|
||
className="text-muted-foreground hover:text-foreground transition-colors text-xl leading-none"
|
||
aria-label="Close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<div className="px-6 py-4">{children}</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|