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

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  current_organization={@current_organization}
  active_page="dashboard"
  timezone={@timezone}
>
  <.header>
    Dashboard
    <:subtitle>Welcome to {@current_organization.name}</:subtitle>
  </.header>

  <%= if @sites_count == 0 do %>
    <div class="mt-8 rounded-lg border-2 border-dashed border-zinc-300 bg-zinc-50 p-12 text-center dark:border-zinc-700 dark:bg-zinc-900">
      <.icon
        name="hero-light-bulb"
        class="mx-auto h-16 w-16 text-blue-500 dark:text-blue-400"
      />
      <h3 class="mt-6 text-xl font-semibold text-zinc-900 dark:text-zinc-100">
        Let's get started!
      </h3>
      <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
        Follow these steps to set up your network monitoring:
      </p>
      <div class="mt-8 max-w-2xl mx-auto">
        <div class="space-y-4 text-left">
          <div class="flex gap-4 items-start">
            <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-semibold dark:bg-blue-900 dark:text-blue-300">
              1
            </div>
            <div>
              <h4 class="font-medium text-zinc-900 dark:text-zinc-100">Create a Site</h4>
              <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                Sites represent your physical locations (offices, data centers, towers, etc.)
              </p>
            </div>
          </div>
          <div class="flex gap-4 items-start">
            <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-zinc-200 text-zinc-600 font-semibold dark:bg-zinc-700 dark:text-zinc-400">
              2
            </div>
            <div>
              <h4 class="font-medium text-zinc-900 dark:text-zinc-100">Add Device</h4>
              <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                Add network devices (routers, switches, servers) to your sites
              </p>
            </div>
          </div>
          <div class="flex gap-4 items-start">
            <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-zinc-200 text-zinc-600 font-semibold dark:bg-zinc-700 dark:text-zinc-400">
              3
            </div>
            <div>
              <h4 class="font-medium text-zinc-900 dark:text-zinc-100">
                Monitor & Receive Alerts
              </h4>
              <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                Towerops will automatically monitor your devices and alert you of issues
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-8">
        <.button navigate={~p"/orgs/#{@current_organization.slug}/sites/new"} variant="primary">
          <.icon name="hero-plus" class="h-5 w-5" /> Create Your First Site
        </.button>
      </div>
    </div>
  <% else %>
    <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}/devices"}
        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">Device</h3>
        <p class="mt-2 text-3xl font-bold text-zinc-900 dark:text-zinc-100">{@device_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>
            {@device_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>
            {@device_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>
            {@device_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",
          (@device_down == 0 && "text-green-600 dark:text-green-500") ||
            "text-amber-600 dark:text-amber-500"
        ]}>
          <%= if @device_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>{@device_down} Device 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}/devices/#{alert.device.id}"}
                    class="hover:text-blue-600 hover:underline dark:hover:text-blue-400"
                  >
                    {alert.device.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">
                {ToweropsWeb.TimeHelpers.format_datetime(alert.triggered_at, @timezone)}
              </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}/devices"}
          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 Device</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>
  <% end %>
</Layouts.authenticated>