Packages
phoenix_kit
1.2.5
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">
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0zM5 21v-1a6 6 0 0112 0v1z"
/>
</svg>
<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/roles")}
class="card bg-info text-info-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
/>
</svg>
<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/sessions")}
class="card bg-success text-success-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
<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/live_sessions")}
class="card bg-warning text-warning-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
<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
patch={PhoenixKit.Utils.Routes.path("/admin/users?action=add")}
class="card bg-primary text-primary-content hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
>
</path>
</svg>
<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/email-logs")}
class="card bg-purple-500 text-white hover:shadow-lg transition-all"
>
<div class="card-body">
<div class="flex items-center">
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
<div>
<h3 class="card-title text-lg">Email Tracking</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">
<svg class="w-8 h-8 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
>
</path>
</svg>
<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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M5 16L3 6l5.5 4L12 4l3.5 6L21 6l-2 10H5z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.88 9.88l-4.24 4.24c-.78.78-2.05.78-2.83 0-.78-.78-.78-2.05 0-2.83L12.05 10l-3.24-3.29c-.78-.78-.78-2.05 0-2.83.78-.78 2.05-.78 2.83 0l4.24 4.24c.39.39.39 1.02 0 1.41z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
<path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-6V7h2v4h4v2z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.1 3.89 23 5 23H11V21H5V3H13V9H21Z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M16,4C18.21,4 20,5.79 20,8C20,10.21 18.21,12 16,12C13.79,12 12,10.21 12,8C12,5.79 13.79,4 16,4M16,13.54C18.81,13.66 21.53,14.61 23,16.66V22H21V17.51C21,16.19 19.11,15.09 16,15.09C14.1,15.09 12.8,15.42 11.91,15.83L10.88,13.54C12.93,12.68 14.63,12.54 16,13.54M8,12C10.21,12 12,10.21 12,8C12,5.79 10.21,4 8,4C5.79,4 4,5.79 4,8C4,10.21 5.79,12 8,12M8,13C5.33,13 0,14.34 0,17V20H16V17C16,14.34 10.67,13 8,13Z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
/>
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
/>
</svg>
</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">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v2h-2v-2zm0-8h2v6h-2V9z" />
</svg>
</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">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</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>