overlord/Overlord-Server/public/logs.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/assets/nav-prelude.js"></script>
    <link rel="modulepreload" href="/assets/nav.js" />
    <title>Client Logs - Overlord</title>
    <link rel="stylesheet" href="/vendor/inter/400.css" />
    <link rel="stylesheet" href="/vendor/inter/600.css" />
    <link rel="stylesheet" href="/vendor/inter/700.css" />
    <link rel="stylesheet" href="/assets/tailwind.css" />
    <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
    <link rel="stylesheet" href="/assets/main.css" />
    <link rel="stylesheet" href="/assets/custom.css" />
    <script defer src="/assets/toast.js"></script>
    <script defer src="/assets/ripple.js"></script>
  </head>
  <body class="min-h-screen bg-slate-950 text-slate-100">
    <header id="top-nav"></header>

    <main class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="mb-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
        <div>
          <h1 class="text-2xl font-bold text-slate-100">Client Connection Logs</h1>
          <p class="text-slate-400 text-sm mt-1">Review connection lifecycle activity across enrolled clients.</p>
        </div>
        <div class="inline-flex self-start sm:self-auto items-center gap-2 px-3 py-1.5 rounded-full border border-slate-700 bg-slate-900/60 text-xs text-slate-400">
          <i class="fa-solid fa-clock-rotate-left text-indigo-400"></i>
          Updated <span id="last-update" class="text-slate-200">Never</span>
        </div>
      </div>

      <section class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5 mb-6 space-y-4">
        <div class="flex items-center gap-3">
          <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-indigo-500/10 border border-indigo-500/30">
            <i class="fa-solid fa-filter text-indigo-400"></i>
          </div>
          <div>
            <h2 class="text-base font-semibold">Filter activity</h2>
            <p class="text-xs text-slate-400">Narrow results by client, time range, or event type.</p>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
          <div class="xl:col-span-2">
            <label class="block text-xs font-medium text-slate-400 mb-1.5" for="client-filter">Client ID</label>
            <div class="relative">
              <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-500"></i>
              <input id="client-filter" type="search" placeholder="Search by client ID"
                class="w-full pl-10 pr-3 py-2.5 rounded-lg bg-slate-950/70 border border-slate-700 text-slate-100 placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/60 focus:border-indigo-500" />
            </div>
          </div>
          <div>
            <label class="block text-xs font-medium text-slate-400 mb-1.5" for="start-date">From</label>
            <input id="start-date" type="datetime-local"
              class="w-full px-3 py-2.5 rounded-lg bg-slate-950/70 border border-slate-700 text-slate-100 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/60 focus:border-indigo-500" />
          </div>
          <div>
            <label class="block text-xs font-medium text-slate-400 mb-1.5" for="end-date">To</label>
            <input id="end-date" type="datetime-local"
              class="w-full px-3 py-2.5 rounded-lg bg-slate-950/70 border border-slate-700 text-slate-100 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/60 focus:border-indigo-500" />
          </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
          <div id="action-filters" class="flex flex-wrap gap-2">
            <label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/20 text-sm cursor-pointer hover:bg-emerald-500/10">
              <input type="checkbox" class="action-checkbox accent-emerald-500" value="client_first_connect" checked />
              <i class="fa-solid fa-plug-circle-bolt text-emerald-400"></i><span class="text-emerald-200">First connect</span>
            </label>
            <label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-blue-500/5 border border-blue-500/20 text-sm cursor-pointer hover:bg-blue-500/10">
              <input type="checkbox" class="action-checkbox accent-blue-500" value="client_reconnect" checked />
              <i class="fa-solid fa-rotate text-blue-400"></i><span class="text-blue-200">Reconnect</span>
            </label>
            <label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-orange-500/5 border border-orange-500/20 text-sm cursor-pointer hover:bg-orange-500/10">
              <input type="checkbox" class="action-checkbox accent-orange-500" value="client_disconnect" checked />
              <i class="fa-solid fa-plug-circle-xmark text-orange-400"></i><span class="text-orange-200">Disconnect</span>
            </label>
            <label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-rose-500/5 border border-rose-500/20 text-sm cursor-pointer hover:bg-rose-500/10">
              <input type="checkbox" class="action-checkbox accent-rose-500" value="uninstall" checked />
              <i class="fa-solid fa-trash text-rose-400"></i><span class="text-rose-200">Uninstall</span>
            </label>
          </div>
          <div class="flex gap-2">
            <button id="clear-filters-btn" class="flex-1 lg:flex-none inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg border border-slate-700 bg-slate-800 hover:bg-slate-700 text-slate-300 text-sm">
              <i class="fa-solid fa-filter-circle-xmark"></i> Reset
            </button>
            <button id="refresh-btn" class="flex-1 lg:flex-none inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 border border-indigo-500 text-white font-medium text-sm">
              <i class="fa-solid fa-rotate"></i> Refresh
            </button>
          </div>
        </div>
      </section>

      <section class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
        <div class="px-4 sm:px-5 py-4 border-b border-slate-800 flex items-center justify-between gap-3">
          <div class="flex items-center gap-3">
            <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-sky-500/10 border border-sky-500/30">
              <i class="fa-solid fa-timeline text-sky-400"></i>
            </div>
            <div>
              <h2 class="text-base font-semibold">Activity timeline</h2>
              <p id="logs-count" class="text-xs text-slate-400">Loading events…</p>
            </div>
          </div>
        </div>

        <div id="logs-container" class="divide-y divide-slate-800/80"></div>
        <div id="logs-empty" class="hidden text-center px-4 py-16">
          <div class="mx-auto mb-3 flex items-center justify-center w-11 h-11 rounded-full bg-slate-800/70 text-slate-500">
            <i class="fa-solid fa-inbox text-xl"></i>
          </div>
          <p class="text-sm font-medium text-slate-300">No matching activity</p>
          <p class="text-xs text-slate-500 mt-1">Try widening the date range or resetting filters.</p>
        </div>

        <div class="px-4 sm:px-5 py-3 border-t border-slate-800 bg-slate-950/30 flex items-center justify-between gap-3 text-sm">
          <button id="prev-page" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 disabled:opacity-40 disabled:cursor-not-allowed">
            <i class="fa-solid fa-arrow-left"></i><span class="hidden sm:inline">Previous</span>
          </button>
          <div id="page-info" class="text-xs text-slate-400">Page 1</div>
          <button id="next-page" class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 disabled:opacity-40 disabled:cursor-not-allowed">
            <span class="hidden sm:inline">Next</span><i class="fa-solid fa-arrow-right"></i>
          </button>
        </div>
      </section>
    </main>

    <script type="module" src="/assets/nav.js"></script>
    <script type="module" src="/assets/logs.js"></script>
  </body>
</html>