nas-tools/dashboard/frontend/src/routes/Dashboard.svelte

<script>
  import { onMount, onDestroy } from "svelte";
  import { get } from "../lib/api.js";

  let containers = $state([]);
  let repos = $state([]);
  let stats = $state(null);
  let loading = $state(true);

  async function load() {
    const [c, g, s] = await Promise.all([
      get("/docker/containers"),
      get("/gitea/repos"),
      get("/system/stats"),
    ]);
    containers = c || [];
    repos = Array.isArray(g) ? g : g?.data || [];
    stats = s;
    loading = false;
  }

  function fmtBytes(b) {
    if (!b) return "0 B";
    const u = ["B", "KB", "MB", "GB", "TB"];
    const i = Math.floor(Math.log(b) / Math.log(1024));
    return (b / Math.pow(1024, i)).toFixed(1) + " " + u[i];
  }

  function pctColor(pct) {
    if (pct > 90) return "text-rose-500";
    if (pct > 70) return "text-amber-500";
    return "text-emerald-500";
  }

  let interval;

  onMount(() => { load(); interval = setInterval(load, 10000); });
  onDestroy(() => clearInterval(interval));
</script>

<div class="space-y-8">
  <div>
    <h1 class="text-2xl font-bold text-surface-900 tracking-tight">Overview</h1>
    <p class="text-sm text-surface-400 mt-1">System status at a glance</p>
  </div>

  {#if loading}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {#each Array(4) as _}
        <div class="h-[120px] rounded-xl bg-surface-100 animate-pulse"></div>
      {/each}
    </div>
  {:else}
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <!-- CPU -->
      <div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
        <div class="flex items-center justify-between mb-3">
          <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">CPU</p>
          <div class="w-8 h-8 rounded-lg bg-sky-50 flex items-center justify-center">
            <svg class="w-4 h-4 text-sky-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
          </div>
        </div>
        <p class="text-2xl font-bold {pctColor(stats?.cpu_percent || 0)}">{stats?.cpu_percent || 0}%</p>
        <p class="text-xs text-surface-400 mt-1">{stats?.cpu_count || 0} cores · Load {stats?.load_avg?.[0] || 0}</p>
      </div>

      <!-- Memory -->
      <div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
        <div class="flex items-center justify-between mb-3">
          <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Memory</p>
          <div class="w-8 h-8 rounded-lg bg-violet-50 flex items-center justify-center">
            <svg class="w-4 h-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
          </div>
        </div>
        <p class="text-2xl font-bold {pctColor(stats?.memory?.percent || 0)}">{stats?.memory?.percent || 0}%</p>
        <p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.memory?.used)} / {fmtBytes(stats?.memory?.total)}</p>
      </div>

      <!-- Disk -->
      <div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
        <div class="flex items-center justify-between mb-3">
          <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Disk</p>
          <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
            <svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" /></svg>
          </div>
        </div>
        <p class="text-2xl font-bold {pctColor(stats?.disk?.percent || 0)}">{stats?.disk?.percent || 0}%</p>
        <p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.disk?.free)} free of {fmtBytes(stats?.disk?.total)}</p>
      </div>

      <!-- Uptime -->
      <div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
        <div class="flex items-center justify-between mb-3">
          <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Uptime</p>
          <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
            <svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
          </div>
        </div>
        <p class="text-2xl font-bold text-surface-800">{stats?.uptime || "—"}</p>
        <p class="text-xs text-surface-400 mt-1 truncate" title={stats?.platform}>{stats?.platform || "—"}</p>
      </div>
    </div>

    <!-- Services Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <!-- Docker Summary -->
      <div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-sm font-semibold text-surface-700">Docker Containers</h3>
          <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">{containers.filter(c => c.status === "running").length}/{containers.length} running</span>
        </div>
        <div class="space-y-2">
          {#each containers.slice(0, 5) as c}
            <div class="flex items-center justify-between py-1.5 text-sm">
              <div class="flex items-center gap-2">
                <span class="w-1.5 h-1.5 rounded-full {c.status !== 'running' ? 'bg-surface-300' : c.health === 'unhealthy' ? 'bg-rose-400' : c.health === 'healthy' ? 'bg-emerald-400' : 'bg-sky-400'}"></span>
                <span class="font-medium text-surface-700">{c.name}</span>
              </div>
              <span class="text-xs text-surface-400 truncate max-w-[180px]">{c.image}</span>
            </div>
          {/each}
          {#if containers.length > 5}
            <p class="text-xs text-primary-500 font-medium pt-1">+{containers.length - 5} more</p>
          {/if}
        </div>
      </div>

      <!-- Repos Summary -->
      <div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-sm font-semibold text-surface-700">Git Repositories</h3>
          <span class="text-xs font-medium text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{repos.length} repos</span>
        </div>
        <div class="space-y-2">
          {#each repos.slice(0, 5) as r}
            <div class="flex items-center justify-between py-1.5 text-sm">
              <div class="flex items-center gap-2">
                <svg class="w-3.5 h-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
                <span class="font-medium text-surface-700">{r.name}</span>
              </div>
              <span class="text-xs text-surface-400">{r.language || "—"}</span>
            </div>
          {/each}
          {#if repos.length > 5}
            <p class="text-xs text-primary-500 font-medium pt-1">+{repos.length - 5} more</p>
          {/if}
        </div>
      </div>
    </div>

    <!-- Storage Usage -->
    {#if stats?.volumes?.length}
      <div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
        <h3 class="text-sm font-semibold text-surface-700 mb-3">Storage Usage</h3>
        <div class="space-y-3">
          {#each stats.volumes as vol}
            <div>
              <div class="flex justify-between text-xs text-surface-500 mb-1">
                <span class="font-medium">{vol.mount}</span>
                <span>{vol.percent}%</span>
              </div>
              <div class="w-full h-3 bg-surface-100 rounded-full overflow-hidden">
                <div
                  class="h-full rounded-full transition-all duration-700 ease-out {vol.percent > 90 ? 'bg-gradient-to-r from-rose-400 to-rose-500' : vol.percent > 70 ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-emerald-400 to-emerald-500'}"
                  style="width: {vol.percent}%"
                ></div>
              </div>
              <div class="flex justify-between mt-1 text-xs text-surface-400">
                <span>{fmtBytes(vol.used)} used</span>
                <span>{fmtBytes(vol.free)} free</span>
              </div>
            </div>
          {/each}
        </div>
      </div>
    {/if}
  {/if}
</div>