119 lines
4 KiB
Text
119 lines
4 KiB
Text
<.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">
|
|
<div class="card bg-base-100 shadow">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-base">Sites</h3>
|
|
<p class="text-3xl font-bold">{@sites_count}</p>
|
|
<p class="text-sm text-base-content/60">Total sites</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-base">Equipment</h3>
|
|
<p class="text-3xl font-bold">{@equipment_count}</p>
|
|
<div class="text-xs text-base-content/60 mt-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="badge badge-success badge-xs"></span>
|
|
{@equipment_up} Up
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="badge badge-error badge-xs"></span>
|
|
{@equipment_down} Down
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="badge badge-ghost badge-xs"></span>
|
|
{@equipment_unknown} Unknown
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-base">Active Alerts</h3>
|
|
<p class={[
|
|
"text-3xl font-bold",
|
|
length(@active_alerts) > 0 && "text-error"
|
|
]}>
|
|
{length(@active_alerts)}
|
|
</p>
|
|
<p class="text-sm text-base-content/60">Requires attention</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-base">System Status</h3>
|
|
<p class={[
|
|
"text-xl font-semibold mt-2",
|
|
@equipment_down == 0 && "text-success",
|
|
@equipment_down > 0 && "text-warning"
|
|
]}>
|
|
<%= if @equipment_down == 0 do %>
|
|
<.icon name="hero-check-circle" class="w-6 h-6" /> All Systems Operational
|
|
<% else %>
|
|
<.icon name="hero-exclamation-triangle" class="w-6 h-6" /> {@equipment_down} Equipment Down
|
|
<% end %>
|
|
</p>
|
|
</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">Active Alerts</h2>
|
|
<.link navigate={~p"/orgs/#{@current_organization.slug}/alerts"} class="link link-primary">
|
|
View All Alerts →
|
|
</.link>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<%= for alert <- Enum.take(@active_alerts, 5) do %>
|
|
<div class="alert alert-error">
|
|
<.icon name="hero-exclamation-triangle" class="w-5 h-5" />
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold">
|
|
<.link
|
|
navigate={~p"/orgs/#{@current_organization.slug}/equipment/#{alert.equipment.id}"}
|
|
class="link link-hover"
|
|
>
|
|
{alert.equipment.name}
|
|
</.link>
|
|
</h3>
|
|
<p class="text-sm">{alert.message}</p>
|
|
</div>
|
|
<span class="text-xs text-base-content/70">
|
|
{Calendar.strftime(alert.triggered_at, "%H:%M")}
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if length(@active_alerts) > 5 do %>
|
|
<div class="text-center text-sm text-base-content/60">
|
|
+ {length(@active_alerts) - 5} more alerts
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="mt-8">
|
|
<h2 class="text-xl font-semibold mb-4">Quick Actions</h2>
|
|
<div class="flex flex-wrap gap-4">
|
|
<.link navigate={~p"/orgs/#{@current_organization.slug}/sites"} class="btn btn-primary">
|
|
<.icon name="hero-building-office" class="w-5 h-5" /> Manage Sites
|
|
</.link>
|
|
<.link navigate={~p"/orgs/#{@current_organization.slug}/equipment"} class="btn btn-primary">
|
|
<.icon name="hero-server" class="w-5 h-5" /> Manage Equipment
|
|
</.link>
|
|
<.link navigate={~p"/orgs/#{@current_organization.slug}/alerts"} class="btn">
|
|
<.icon name="hero-bell" class="w-5 h-5" /> View Alerts
|
|
</.link>
|
|
</div>
|
|
</div>
|