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

<Layouts.authenticated flash={@flash} current_organization={@current_organization}>
  <.header>
    Dashboard
    <:subtitle>Welcome to {@current_organization.name}</:subtitle>
  </.header>

<div class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
  <.link
    navigate={~p"/orgs/#{@current_organization.slug}/sites"}
    class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900"
  >
    <h3 class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Sites</h3>
    <p class="mt-2 text-3xl font-bold text-zinc-900 dark:text-zinc-100">{@sites_count}</p>
    <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Total sites</p>
  </.link>

  <.link
    navigate={~p"/orgs/#{@current_organization.slug}/equipment"}
    class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900"
  >
    <h3 class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Equipment</h3>
    <p class="mt-2 text-3xl font-bold text-zinc-900 dark:text-zinc-100">{@equipment_count}</p>
    <div class="mt-3 space-y-1.5 text-sm">
      <div class="flex items-center gap-2 text-zinc-700 dark:text-zinc-300">
        <span class="h-2 w-2 rounded-full bg-green-500"></span>
        {@equipment_up} Up
      </div>
      <div class="flex items-center gap-2 text-zinc-700 dark:text-zinc-300">
        <span class="h-2 w-2 rounded-full bg-red-500"></span>
        {@equipment_down} Down
      </div>
      <div class="flex items-center gap-2 text-zinc-700 dark:text-zinc-300">
        <span class="h-2 w-2 rounded-full bg-zinc-400"></span>
        {@equipment_unknown} Unknown
      </div>
    </div>
  </.link>

  <.link
    navigate={~p"/orgs/#{@current_organization.slug}/alerts"}
    class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900"
  >
    <h3 class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Active Alerts</h3>
    <p class={[
      "mt-2 text-3xl font-bold",
      (length(@active_alerts) > 0 && "text-red-600 dark:text-red-500") ||
        "text-zinc-900 dark:text-zinc-100"
    ]}>
      {length(@active_alerts)}
    </p>
    <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Requires attention</p>
  </.link>

  <div class="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
    <h3 class="text-sm font-medium text-zinc-500 dark:text-zinc-400">System Status</h3>
    <div class={[
      "mt-3 flex items-center gap-2 text-sm font-semibold",
      (@equipment_down == 0 && "text-green-600 dark:text-green-500") ||
        "text-amber-600 dark:text-amber-500"
    ]}>
      <%= if @equipment_down == 0 do %>
        <.icon name="hero-check-circle" class="h-5 w-5" />
        <span>All Systems Operational</span>
      <% else %>
        <.icon name="hero-exclamation-triangle" class="h-5 w-5" />
        <span>{@equipment_down} Equipment Down</span>
      <% end %>
    </div>
  </div>
</div>

<%= if length(@active_alerts) > 0 do %>
  <div class="mt-8">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">Active Alerts</h2>
      <.link
        navigate={~p"/orgs/#{@current_organization.slug}/alerts"}
        class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400"
      >
        View All Alerts →
      </.link>
    </div>

    <div class="space-y-3">
      <%= for alert <- Enum.take(@active_alerts, 5) do %>
        <div class="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900/50 dark:bg-red-950/30">
          <.icon
            name="hero-exclamation-triangle"
            class="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-500"
          />
          <div class="flex-1 min-w-0">
            <h3 class="font-semibold text-zinc-900 dark:text-zinc-100">
              <.link
                navigate={~p"/orgs/#{@current_organization.slug}/equipment/#{alert.equipment.id}"}
                class="hover:text-blue-600 hover:underline dark:hover:text-blue-400"
              >
                {alert.equipment.name}
              </.link>
            </h3>
            <p class="mt-0.5 text-sm text-zinc-700 dark:text-zinc-300">{alert.message}</p>
          </div>
          <span class="text-xs text-zinc-500 dark:text-zinc-400 whitespace-nowrap">
            {Calendar.strftime(alert.triggered_at, "%H:%M")}
          </span>
        </div>
      <% end %>

      <%= if length(@active_alerts) > 5 do %>
        <div class="text-center text-sm text-zinc-500 dark:text-zinc-400">
          + {length(@active_alerts) - 5} more alerts
        </div>
      <% end %>
    </div>
  </div>
<% end %>

<div class="mt-8">
  <h2 class="text-xl font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Quick Actions</h2>
  <div class="flex flex-wrap gap-4">
    <.link
      navigate={~p"/orgs/#{@current_organization.slug}/sites"}
      class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600"
    >
      <.icon name="hero-building-office" class="h-5 w-5" />
      <span>Manage Sites</span>
    </.link>
    <.link
      navigate={~p"/orgs/#{@current_organization.slug}/equipment"}
      class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600"
    >
      <.icon name="hero-server" class="h-5 w-5" />
      <span>Manage Equipment</span>
    </.link>
    <.link
      navigate={~p"/orgs/#{@current_organization.slug}/alerts"}
      class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-4 py-2.5 text-sm font-semibold text-zinc-700 shadow-sm hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
    >
      <.icon name="hero-bell" class="h-5 w-5" />
      <span>View Alerts</span>
    </.link>
  </div>
</div>
</Layouts.authenticated>