<.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" >

Sites

{@sites_count}

Total sites

<.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" >

Equipment

{@equipment_count}

{@equipment_up} Up

{@equipment_down} Down

{@equipment_unknown} Unknown

<.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" >

Active Alerts

0 && "text-red-600 dark:text-red-500") || "text-zinc-900 dark:text-zinc-100" ]}> {length(@active_alerts)}

Requires attention

System Status

<%= if @equipment_down == 0 do %> <.icon name="hero-check-circle" class="h-5 w-5" /> All Systems Operational <% else %> <.icon name="hero-exclamation-triangle" class="h-5 w-5" /> {@equipment_down} Equipment Down <% end %>

Active Alerts

<.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 →

<%= for alert <- Enum.take(@active_alerts, 5) do %>

<.icon name="hero-exclamation-triangle" class="h-5 w-5 flex-shrink-0 text-red-600 dark:text-red-500" />

<.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}

{alert.message}

{Calendar.strftime(alert.triggered_at, "%H:%M")}

<% end %> <%= if length(@active_alerts) > 5 do %>

+ {length(@active_alerts) - 5} more alerts

<% end %>

Quick Actions

<.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" /> Manage Sites <.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" /> Manage Equipment <.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" /> View Alerts