ZMB Webui: Complete Project – Rebrand & Initial Clean Commit

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>

frontend/components/PoolCard.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { Pool } from "@/lib/api"
+import { formatBytes } from "@/lib/utils"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+
+interface PoolCardProps {
+  pool: Pool
+  onClick?: () => void
+}
+
+export function PoolCard({ pool, onClick }: PoolCardProps) {
+  const usedBytes = pool.alloc
+  const freeBytes = pool.free
+  const totalBytes = pool.size
+  const capacityPercent = parseInt(pool.capacity)
+
+  let badgeVariant: "success" | "warning" | "destructive" = "success"
+  if (pool.health === "DEGRADED") badgeVariant = "warning"
+  else if (pool.health !== "ONLINE") badgeVariant = "destructive"
+
+  return (
+    <Card
+      onClick={onClick}
+      className={`cursor-pointer hover:shadow-lg transition-shadow ${onClick ? "cursor-pointer" : ""}`}
+    >
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-xl">{pool.name}</CardTitle>
+          <Badge variant={badgeVariant}>{pool.health}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Capacity Bar */}
+        <div>
+          <div className="flex justify-between text-sm mb-2">
+            <span className="text-muted-foreground">Capacity</span>
+            <span className="font-medium">{pool.capacity}</span>
+          </div>
+          <Progress value={capacityPercent} max={100} />
+        </div>
+
+        {/* Size Information */}
+        <div className="grid grid-cols-3 gap-4 text-sm">
+          <div>
+            <div className="text-muted-foreground text-xs">Total</div>
+            <div className="font-medium">{formatBytes(totalBytes)}</div>
+          </div>
+          <div>
+            <div className="text-muted-foreground text-xs">Used</div>
+            <div className="font-medium">{formatBytes(usedBytes)}</div>
+          </div>
+          <div>
+            <div className="text-muted-foreground text-xs">Free</div>
+            <div className="font-medium">{formatBytes(freeBytes)}</div>
+          </div>
+        </div>
+
+        {/* Fragmentation */}
+        <div className="flex justify-between items-center text-sm pt-2 border-t border-border">
+          <span className="text-muted-foreground">Fragmentation</span>
+          <span className="font-medium">{pool.fragmentation}</span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}