towerops/lib/towerops_web/live/admin/dashboard_live.html.heex

<Layouts.admin flash={@flash} timezone={@timezone}>
  <div class="space-y-6">
    <div>
      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{t("Dashboard")}</h1>
      <p class="text-cool-steel-600 dark:text-cool-steel-400">
        System overview and recent activity
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
          {t("Users")}
        </h2>
        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white">{@user_count}</p>
        <.link
          navigate={~p"/admin/users"}
          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
        >
          View all users →
        </.link>
      </div>

      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
          {t("Organizations")}
        </h2>
        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white">{@org_count}</p>
        <.link
          navigate={~p"/admin/organizations"}
          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
        >
          View all organizations →
        </.link>
      </div>

      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
          <.icon name="hero-queue-list" class="w-5 h-5 inline mr-1" /> Oban Dashboard
        </h2>
        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
          {t("Monitor background jobs and queues")}
        </p>
        <.link
          navigate={~p"/admin/oban"}
          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
        >
          Open Oban →
        </.link>
      </div>

      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
          <.icon name="hero-chart-bar" class="w-5 h-5 inline mr-1" /> LiveDashboard
        </h2>
        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
          {t("System metrics and performance")}
        </p>
        <.link
          navigate={~p"/admin/dashboard"}
          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
        >
          Open Dashboard →
        </.link>
      </div>

      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
          <.icon name="hero-bug-ant" class="w-5 h-5 inline mr-1" /> Exceptions
        </h2>
        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
          {t("Tracked errors and exceptions")}
        </p>
        <.link
          navigate={~p"/admin/errors"}
          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
        >
          Open Error Tracker →
        </.link>
      </div>

      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
          <.icon name="hero-cpu-chip" class="w-5 h-5 inline mr-1" /> Job Monitoring
        </h2>
        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
          {t("Real-time polling and discovery job monitoring")}
        </p>
        <.link
          navigate={~p"/admin/monitoring"}
          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
        >
          Open Monitoring →
        </.link>
      </div>

      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
          <.icon name="hero-server" class="w-5 h-5 inline mr-1" /> All Agents
        </h2>
        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
          {t("Agents across all organizations and cloud pollers")}
        </p>
        <.link
          navigate={~p"/admin/agents"}
          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
        >
          View all agents →
        </.link>
      </div>
    </div>

    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
      <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 flex items-center justify-between">
        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
          {t("Recent Audit Logs")}
        </h2>
        <.link
          navigate={~p"/admin/audit"}
          class="text-sm text-cerulean-600 dark:text-cerulean-400 hover:underline"
        >
          View all →
        </.link>
      </div>
      <.table id="audit-logs" rows={@recent_logs}>
        <:col :let={log} label={t("Action")}>{log.action}</:col>
        <:col :let={log} label={t("User")}>{log.superuser && log.superuser.email}</:col>
        <:col :let={log} label={t("Target")}>{log.target_user && log.target_user.email}</:col>
        <:col :let={log} label={t("Time")}>
          {ToweropsWeb.TimeHelpers.format_iso8601(log.inserted_at, @timezone)}
        </:col>
      </.table>
      <div class="px-4 pb-3">
        <.pagination meta={@pagination} path={~p"/admin"} />
      </div>
    </div>
  </div>
</Layouts.admin>