Skip to content

Added Time to the Dates in the dashboard, and fixed comments on session_live file #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ddon merged 2 commits into from
Sep 3, 2025
Merged

Added Time to the Dates in the dashboard, and fixed comments on session_live file #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dec365c
Added Time to the Date components, both are formatted from the format…
Sep 3, 2025
84e1915
Updated comments in session_live.html.heex file to proper ones
Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 50 additions & 38 deletions lib/phoenix_kit_web/live/sessions_live.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
current_path={@current_path}
>
<div class="container flex-col mx-auto px-4 py-6">
<!-- Header Section -->
<%!-- Header Section --%>
<header class="w-full relative mb-6">
<!-- Back Button -->
<%!-- Back Button --%>
<.link
navigate="/phoenix_kit/admin/dashboard"
class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
Expand All @@ -23,15 +23,15 @@
</svg>
Back to Dashboard
</.link>
<!-- Title Section -->

<%!-- Title Section --%>
<div class="text-center">
<h1 class="text-4xl font-bold text-base-content mb-3">Session Management</h1>
<p class="text-lg text-base-content">Monitor and manage active user sessions</p>
</div>
</header>
<!-- Session Statistics -->

<%!-- Session Statistics --%>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-lg p-4">
<div class="flex items-center justify-between">
Expand Down Expand Up @@ -90,8 +90,8 @@
</div>
</div>
</div>
<!-- Revoke Session Modal -->

<%!-- Revoke Session Modal --%>
<%= if @show_revoke_modal do %>
<div class="modal modal-open">
<div class="modal-box">
Expand All @@ -104,7 +104,9 @@
<div class="text-sm">
<div><strong>Token:</strong> {@selected_session.token_preview}...</div>
<div>
<strong>Created:</strong> {UtilsDate.format_datetime_with_user_format(@selected_session.created_at)}
<strong>Created:</strong> {UtilsDate.format_datetime_with_user_format(
@selected_session.created_at
)}
</div>
<div><strong>Age:</strong> {@selected_session.age_in_days} days</div>
</div>
Expand Down Expand Up @@ -147,11 +149,11 @@
</div>
</div>
<% end %>
<!-- Controls -->

<%!-- Controls --%>
<div class="bg-base-200 rounded-lg p-6 mb-6">
<div class="flex flex-col lg:flex-row gap-4 items-end">
<!-- Search -->
<%!-- Search --%>
<div class="flex-1">
<label class="label">
<span class="label-text">Search by email or token</span>
Expand All @@ -166,8 +168,8 @@
class="input input-bordered w-full"
/>
</div>
<!-- Filter by User Status -->

<%!-- Filter by User Status --%>
<div>
<label class="label">
<span class="label-text">Filter by User Status</span>
Expand All @@ -192,8 +194,8 @@
</option>
</select>
</div>
<!-- Refresh Button -->

<%!-- Refresh Button --%>
<button
phx-click="refresh_sessions"
class="btn btn-primary"
Expand All @@ -210,8 +212,8 @@
</button>
</div>
</div>
<!-- Sessions Table -->

<%!-- Sessions Table --%>
<div class="bg-base-100 rounded-lg shadow-xl overflow-hidden mb-6">
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
Expand Down Expand Up @@ -240,52 +242,62 @@
<% else %>
<%= for session <- @sessions do %>
<tr class="hover:bg-base-200/50">
<!-- User -->
<%!-- User --%>
<td>
<div class="flex flex-col">
<span class="font-medium">{session.user_email}</span>
<span class="text-xs text-base-content/70">ID: {session.user_id}</span>
</div>
</td>
<!-- Token -->

<%!-- Token --%>
<td>
<code class="bg-base-200 px-2 py-1 rounded text-sm">
{session.token_preview}...
</code>
</td>
<!-- User Status -->

<%!-- User Status --%>
<td>
<% {badge_class, badge_text} =
user_status_badge(session.user_is_active, session.user_confirmed_at) %>
<span class={"badge #{badge_class} badge-sm"}>
{badge_text}
</span>
</td>
<!-- Created -->

<%!-- Created --%>
<td class="text-sm">
{UtilsDate.format_datetime_with_user_format(session.created_at)}
<div class="flex flex-col gap-1">
<div>{UtilsDate.format_date_with_user_format(session.created_at)}</div>
<div class="text-xs text-base-content/70">
{UtilsDate.format_time_with_user_format(session.created_at)}
</div>
</div>
</td>
<!-- Age -->

<%!-- Age --%>
<td>
<% {age_class, age_text} = format_age_badge(session.age_in_days) %>
<span class={"badge #{age_class} badge-sm"}>
{age_text}
</span>
</td>
<!-- Expires -->

<%!-- Expires --%>
<td class="text-sm">
{UtilsDate.format_datetime_with_user_format(session.expires_at)}
<div class="flex flex-col gap-1">
<div>{UtilsDate.format_date_with_user_format(session.expires_at)}</div>
<div class="text-xs text-base-content/70">
{UtilsDate.format_time_with_user_format(session.expires_at)}
</div>
</div>
</td>
<!-- Actions -->

<%!-- Actions --%>
<td>
<div class="flex gap-2">
<!-- Revoke Single Session -->
<%!-- Revoke Single Session --%>
<button
phx-click="show_revoke_session"
phx-value-token_id={session.token_id}
Expand All @@ -301,8 +313,8 @@
/>
</svg>
</button>
<!-- Revoke All User Sessions -->

<%!-- Revoke All User Sessions --%>
<button
phx-click="show_revoke_user_sessions"
phx-value-user_id={session.user_id}
Expand All @@ -327,8 +339,8 @@
</table>
</div>
</div>
<!-- Pagination -->

<%!-- Pagination --%>
<%= if @total_pages > 1 do %>
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
<div class="text-sm text-base-content/70">
Expand Down
18 changes: 16 additions & 2 deletions lib/phoenix_kit_web/live/users_live.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,10 +209,24 @@
</div>
</td>
<td class="text-sm">
{UtilsDate.format_datetime_with_user_format(user.inserted_at)}
<div class="flex flex-col gap-1">
<div>{UtilsDate.format_date_with_user_format(user.inserted_at)}</div>
<div class="text-xs text-base-content/70">
{UtilsDate.format_time_with_user_format(user.inserted_at)}
</div>
</div>
</td>
<td class="text-sm">
{UtilsDate.format_datetime_with_user_format(user.confirmed_at)}
<div class="flex flex-col gap-1">
<%= if user.confirmed_at do %>
<div>{UtilsDate.format_date_with_user_format(user.confirmed_at)}</div>
<div class="text-xs text-base-content/70">
{UtilsDate.format_time_with_user_format(user.confirmed_at)}
</div>
<% else %>
<div>Never</div>
<% end %>
</div>
</td>
<td>
<div class="flex flex-wrap gap-1">
Expand Down