Graham McIntire
dffa46dfde
- Remove default Phoenix branding and create custom layouts - Replace DaisyUI classes with custom Tailwind components throughout - Add authenticated layout with navigation bar for organization pages - Redesign all core components (buttons, forms, tables, alerts) - Make dashboard stat cards clickable to navigate to respective pages - Update alert acknowledge button to only show for equipment down alerts - Add consistent dark mode support across all pages - Implement modern design with zinc color palette and improved spacing
71 lines
2.7 KiB
Text
71 lines
2.7 KiB
Text
<Layouts.authenticated flash={@flash} current_organization={@current_organization}>
|
|
<.header>
|
|
{@page_title}
|
|
<:subtitle>Monitor and manage all your network equipment</:subtitle>
|
|
<:actions>
|
|
<.button navigate={~p"/orgs/#{@current_organization.slug}/equipment/new"} variant="primary">
|
|
<.icon name="hero-plus" class="h-5 w-5" /> New Equipment
|
|
</.button>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<%= if @equipment == [] do %>
|
|
<div class="text-center py-16">
|
|
<.icon name="hero-server" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
|
|
<h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">No equipment</h3>
|
|
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
|
Get started by adding your first equipment.
|
|
</p>
|
|
<div class="mt-6">
|
|
<.button navigate={~p"/orgs/#{@current_organization.slug}/equipment/new"} variant="primary">
|
|
<.icon name="hero-plus" class="h-5 w-5" /> New Equipment
|
|
</.button>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<.table id="equipment" rows={@equipment}>
|
|
<:col :let={eq} label="Name">
|
|
<span class="font-medium">{eq.name}</span>
|
|
</:col>
|
|
<:col :let={eq} label="IP Address">
|
|
<span class="font-mono text-sm">{eq.ip_address}</span>
|
|
</:col>
|
|
<:col :let={eq} label="Site">
|
|
<.link
|
|
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{eq.site.id}"}
|
|
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
{eq.site.name}
|
|
</.link>
|
|
</:col>
|
|
<:col :let={eq} label="Status">
|
|
<span class={[
|
|
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
eq.status == :up && "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
|
eq.status == :down && "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
|
|
eq.status == :unknown &&
|
|
"bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
|
|
]}>
|
|
{eq.status |> to_string() |> String.upcase()}
|
|
</span>
|
|
</:col>
|
|
<:col :let={eq} label="Last Checked">
|
|
<span class="text-sm text-zinc-600 dark:text-zinc-400">
|
|
<%= if eq.last_checked_at do %>
|
|
{Calendar.strftime(eq.last_checked_at, "%Y-%m-%d %H:%M")}
|
|
<% else %>
|
|
Never
|
|
<% end %>
|
|
</span>
|
|
</:col>
|
|
<:action :let={eq}>
|
|
<.link
|
|
navigate={~p"/orgs/#{@current_organization.slug}/equipment/#{eq.id}"}
|
|
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
View
|
|
</.link>
|
|
</:action>
|
|
</.table>
|
|
<% end %>
|
|
</Layouts.authenticated>
|