Packages
phoenix_kit
1.2.9
1.7.210
1.7.209
1.7.208
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit_web/live/dashboard_live.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title="{@project_title} Dashboard"
current_path={@current_path}
project_title={@project_title}
>
<div class="container flex-col mx-auto px-4 py-8">
<div class="mb-8">
<h1 class="text-3xl font-bold text-base-content mb-2">
{@project_title} Dashboard
</h1>
<p class="text-base-content/70">
Welcome to the {@project_title} administration panel
</p>
</div>
<%!-- Admin Menu Actions --%>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 mb-8">
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/users")}
class="card bg-secondary text-secondary-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_users class="w-8 h-8 mr-3" />
<div>
<h3 class="card-title text-lg">Users</h3>
<p class="text-sm opacity-75">User management</p>
</div>
</div>
</div>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/users/roles")}
class="card bg-info text-info-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_roles class="w-8 h-8 mr-3" />
<div>
<h3 class="card-title text-lg">Roles</h3>
<p class="text-sm opacity-75">Role management</p>
</div>
</div>
</div>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/users/sessions")}
class="card bg-success text-success-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_sessions class="w-8 h-8 mr-3" />
<div>
<h3 class="card-title text-lg">Sessions</h3>
<p class="text-sm opacity-75">Active sessions</p>
</div>
</div>
</div>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/users/live_sessions")}
class="card bg-warning text-warning-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_eye />
<div>
<h3 class="card-title text-lg">Live Activity</h3>
<p class="text-sm opacity-75">Real-time visitors</p>
</div>
</div>
</div>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/users/new")}
class="card bg-primary text-primary-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_user_add class="w-8 h-8 mr-3" />
<div>
<h3 class="card-title text-lg">Add User</h3>
<p class="text-sm opacity-75">Create new account</p>
</div>
</div>
</div>
</.link>
<%= if PhoenixKit.EmailTracking.enabled?() do %>
<.link
navigate={PhoenixKit.Utils.Routes.path("/admin/emails")}
class="card bg-purple-500 text-white hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_email class="w-8 h-8 mr-3" />
<div>
<h3 class="card-title text-lg">Email</h3>
<p class="text-sm opacity-75">Email logs & analytics</p>
</div>
</div>
</div>
</.link>
<% end %>
<button
phx-click="refresh_stats"
class="card bg-accent text-accent-content hover:shadow-lg transition-all cursor-pointer"
>
<div class="card-body">
<div class="flex items-center">
<PhoenixKitWeb.Components.Core.Icons.icon_refresh class="w-8 h-8 mr-3" />
<div>
<h3 class="card-title text-lg">Refresh</h3>
<p class="text-sm opacity-75">Update statistics</p>
</div>
</div>
</div>
</button>
</div>
<%!-- Platform Statistics --%>
<div class="mb-12">
<h2 class="text-2xl font-bold text-base-content mb-8">
Platform Statistics
</h2>
<%!-- Main Statistics Cards --%>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<%!-- System Owners Card --%>
<div class="card bg-gradient-to-br from-red-500 via-red-600 to-red-700 text-white shadow-2xl hover:shadow-3xl transition-all duration-300 border-0">
<div class="card-body relative overflow-hidden">
<div class="absolute top-0 right-0 w-20 h-20 bg-white/10 rounded-full -translate-y-6 translate-x-6">
</div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_crown />
</div>
<h2 class="card-title text-xl">System Owners</h2>
</div>
<div class="text-7xl font-black mb-2 tracking-tight">{@stats.owner_count}</div>
<p class="text-red-100 text-sm">Complete system authority</p>
</div>
</div>
</div>
<%!-- Administrators Card --%>
<div class="card bg-gradient-to-br from-amber-500 via-orange-500 to-orange-600 text-white shadow-2xl hover:shadow-3xl transition-all duration-300">
<div class="card-body relative overflow-hidden">
<div class="absolute top-0 right-0 w-16 h-16 bg-white/10 rounded-full -translate-y-4 translate-x-4">
</div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_star />
</div>
<h2 class="card-title text-xl">Administrators</h2>
</div>
<div class="text-7xl font-black mb-2 tracking-tight">{@stats.admin_count}</div>
<p class="text-orange-100 text-sm">Management privileges</p>
</div>
</div>
</div>
<%!-- Total Users Card --%>
<div class="card bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 text-white shadow-2xl hover:shadow-3xl transition-all duration-300">
<div class="card-body relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -translate-y-8 translate-x-8">
</div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-4">
<div class="p-2 bg-white/20 rounded-lg">
👥
</div>
<h2 class="card-title text-xl">Total Users</h2>
</div>
<div class="text-7xl font-black mb-2 tracking-tight">{@stats.total_users}</div>
<p class="text-blue-100 text-sm">Registered accounts</p>
</div>
</div>
</div>
</div>
<%!-- Sessions Statistics --%>
<div class="mb-8">
<h3 class="text-xl font-bold text-base-content mb-4">Active Sessions</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<%!-- Total Active Sessions --%>
<div class="bg-gradient-to-br from-purple-500 via-purple-600 to-indigo-600 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_activity />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@session_stats.total_active}</div>
<div class="text-purple-100 font-medium">Active Sessions</div>
<div class="text-purple-200 text-xs mt-1">Currently logged in</div>
</div>
<%!-- Unique Users --%>
<div class="bg-gradient-to-br from-teal-500 via-teal-600 to-cyan-600 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_user_simple />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@session_stats.unique_users}</div>
<div class="text-teal-100 font-medium">Unique Users</div>
<div class="text-teal-200 text-xs mt-1">With active sessions</div>
</div>
<%!-- Today's Sessions --%>
<div class="bg-gradient-to-br from-emerald-500 via-emerald-600 to-green-600 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_clock />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@session_stats.sessions_today}</div>
<div class="text-emerald-100 font-medium">Today's Sessions</div>
<div class="text-emerald-200 text-xs mt-1">New login activity</div>
</div>
<%!-- Expired Sessions --%>
<div class="bg-gradient-to-br from-slate-500 via-slate-600 to-gray-600 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_clock_expired />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@session_stats.expired_sessions}</div>
<div class="text-slate-100 font-medium">Expired Sessions</div>
<div class="text-slate-200 text-xs mt-1">Need cleanup</div>
</div>
</div>
</div>
<%!-- Real-Time Presence Statistics --%>
<div class="mb-8">
<h3 class="text-xl font-bold text-base-content mb-4">Real-Time Activity</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<%!-- Total Active Visitors --%>
<div class="bg-gradient-to-br from-violet-500 via-purple-600 to-indigo-600 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_user_profile />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@presence_stats.total_sessions}</div>
<div class="text-violet-100 font-medium">Active Visitors</div>
<div class="text-violet-200 text-xs mt-1">Real-time connections</div>
</div>
<%!-- Anonymous Visitors --%>
<div class="bg-gradient-to-br from-cyan-500 via-blue-500 to-indigo-600 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_user_anonymous />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@presence_stats.anonymous_sessions}</div>
<div class="text-cyan-100 font-medium">Anonymous</div>
<div class="text-cyan-200 text-xs mt-1">Unregistered visitors</div>
</div>
<%!-- Authenticated Users --%>
<div class="bg-gradient-to-br from-green-500 via-emerald-600 to-teal-600 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_check_circle_outline />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@presence_stats.authenticated_sessions}</div>
<div class="text-green-100 font-medium">Authenticated</div>
<div class="text-green-200 text-xs mt-1">Logged in users</div>
</div>
<%!-- Unique Visitors --%>
<div class="bg-gradient-to-br from-orange-500 via-amber-500 to-yellow-500 text-white rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_users_multiple />
</div>
</div>
<div class="text-3xl font-bold mb-2">
{@presence_stats.unique_anonymous_visitors +
@presence_stats.active_authenticated_users}
</div>
<div class="text-yellow-100 font-medium">Unique Visitors</div>
<div class="text-yellow-200 text-xs mt-1">Individual connections</div>
</div>
</div>
</div>
<%!-- Secondary Statistics - Gradient Cards --%>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
<%!-- Active Users --%>
<div class="bg-gradient-to-br from-green-500 via-green-600 to-emerald-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_check_circle_filled />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@stats.active_users}</div>
<div class="text-green-100 font-medium">Active Users</div>
<div class="text-green-200 text-xs mt-1">Currently online</div>
</div>
<%!-- Inactive Users --%>
<div class="bg-gradient-to-br from-red-500 via-red-600 to-rose-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_x_circle_filled />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@stats.inactive_users}</div>
<div class="text-red-100 font-medium">Inactive Users</div>
<div class="text-red-200 text-xs mt-1">Disabled accounts</div>
</div>
<%!-- Email Confirmed --%>
<div class="bg-gradient-to-br from-blue-500 via-blue-600 to-cyan-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_email class="w-6 h-6" />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@stats.confirmed_users}</div>
<div class="text-blue-100 font-medium">Email Confirmed</div>
<div class="text-blue-200 text-xs mt-1">Verified emails</div>
</div>
<%!-- Pending Email --%>
<div class="bg-gradient-to-br from-yellow-500 via-orange-500 to-amber-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_info_filled />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@stats.pending_users}</div>
<div class="text-yellow-100 font-medium">Pending Email</div>
<div class="text-yellow-200 text-xs mt-1">Awaiting confirmation</div>
</div>
<%!-- Regular Users --%>
<div class="bg-gradient-to-br from-gray-500 via-slate-600 to-gray-700 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
<div class="flex items-center justify-between mb-4">
<div class="p-2 bg-white/20 rounded-lg">
<PhoenixKitWeb.Components.Core.Icons.icon_user_simple />
</div>
</div>
<div class="text-3xl font-bold mb-2">{@stats.user_count}</div>
<div class="text-gray-100 font-medium">Regular Users</div>
<div class="text-gray-200 text-xs mt-1">Standard access level</div>
</div>
</div>
</div>
<%!-- System Information --%>
<div class="mb-8">
<h2 class="text-2xl font-bold text-base-content mb-6">
System Information
</h2>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center">
<div class="text-2xl font-bold text-primary mb-2">{@phoenix_kit_version}</div>
<div class="text-sm text-base-content/70">{@project_title} Version</div>
</div>
<div class="text-center">
<div class="badge badge-success badge-lg mb-2">Active</div>
<div class="text-sm text-base-content/70">Role System</div>
</div>
<div class="text-center">
<div class="badge badge-success badge-lg mb-2">Enabled</div>
<div class="text-sm text-base-content/70">Authentication</div>
</div>
</div>
</div>
</div>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>