Initial commit
This commit is contained in:
@@ -0,0 +1,257 @@
|
||||
@using PowderCoating.Web.Controllers
|
||||
@model List<UserActivityRow>
|
||||
@{
|
||||
ViewData["Title"] = "User Activity";
|
||||
int page = (int)ViewBag.Page;
|
||||
int totalPages = (int)ViewBag.TotalPages;
|
||||
|
||||
string SortLink(string col)
|
||||
{
|
||||
var currentCol = (string)ViewBag.SortCol;
|
||||
var currentDir = (string)ViewBag.SortDir;
|
||||
var newDir = currentCol == col && currentDir == "asc" ? "desc" : "asc";
|
||||
return Url.Action("Index", new {
|
||||
sortCol = col, sortDir = newDir,
|
||||
companyId = ViewBag.CompanyIdFilter, role = ViewBag.RoleFilter,
|
||||
activeStatus = ViewBag.ActiveStatusFilter, loginAge = ViewBag.LoginAgeFilter,
|
||||
search = ViewBag.Search, pageSize = ViewBag.PageSize
|
||||
})!;
|
||||
}
|
||||
|
||||
string SortIcon(string col)
|
||||
{
|
||||
if ((string)ViewBag.SortCol != col) return "bi-arrow-down-up text-muted";
|
||||
return (string)ViewBag.SortDir == "asc" ? "bi-sort-up" : "bi-sort-down";
|
||||
}
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<style>
|
||||
[data-bs-theme="dark"] a.text-dark { color: var(--bs-body-color) !important; }
|
||||
</style>
|
||||
}
|
||||
|
||||
<div class="container-fluid py-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<h4 class="mb-0"><i class="bi bi-people me-2 text-primary"></i>User Activity</h4>
|
||||
<a href="@Url.Action("ExportCsv", new { companyId = ViewBag.CompanyIdFilter, role = ViewBag.RoleFilter, activeStatus = ViewBag.ActiveStatusFilter, loginAge = ViewBag.LoginAgeFilter, search = ViewBag.Search })"
|
||||
class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-download me-1"></i>Export CSV
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@* Summary cards *@
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card text-center border-0 shadow-sm">
|
||||
<div class="card-body py-2">
|
||||
<div class="fs-4 fw-bold">@ViewBag.TotalUsers</div>
|
||||
<div class="small text-muted">Total Users</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card text-center border-0 shadow-sm">
|
||||
<div class="card-body py-2">
|
||||
<div class="fs-4 fw-bold text-success">@ViewBag.ActiveUsers</div>
|
||||
<div class="small text-muted">Active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card text-center border-0 shadow-sm border-warning">
|
||||
<div class="card-body py-2">
|
||||
<div class="fs-4 fw-bold text-warning">@ViewBag.Inactive30</div>
|
||||
<div class="small text-muted">No Login 30+ Days</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card text-center border-0 shadow-sm border-danger">
|
||||
<div class="card-body py-2">
|
||||
<div class="fs-4 fw-bold text-danger">@ViewBag.NeverLoggedIn</div>
|
||||
<div class="small text-muted">Never Logged In</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Filters *@
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-body py-2">
|
||||
<form method="get" class="row g-2 align-items-end">
|
||||
<div class="col-12 col-md-2">
|
||||
<label class="form-label small mb-1">Company</label>
|
||||
<select name="companyId" class="form-select form-select-sm">
|
||||
<option value="">All Companies</option>
|
||||
@foreach (var c in (IEnumerable<dynamic>)ViewBag.Companies)
|
||||
{
|
||||
<option value="@c.Id" selected="@(ViewBag.CompanyIdFilter?.ToString() == c.Id.ToString())">@c.CompanyName</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<label class="form-label small mb-1">Role</label>
|
||||
<select name="role" class="form-select form-select-sm">
|
||||
<option value="">All Roles</option>
|
||||
@foreach (var r in new[] { "CompanyAdmin", "Manager", "Employee", "ShopFloor", "ReadOnly" })
|
||||
{
|
||||
<option value="@r" selected="@(ViewBag.RoleFilter == r)">@r</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<label class="form-label small mb-1">Status</label>
|
||||
<select name="activeStatus" class="form-select form-select-sm">
|
||||
<option value="">All</option>
|
||||
<option value="active" selected="@(ViewBag.ActiveStatusFilter == "active")">Active Only</option>
|
||||
<option value="inactive" selected="@(ViewBag.ActiveStatusFilter == "inactive")">Inactive Only</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<label class="form-label small mb-1">Last Login</label>
|
||||
<select name="loginAge" class="form-select form-select-sm">
|
||||
<option value="">Any</option>
|
||||
<option value="recent" selected="@(ViewBag.LoginAgeFilter == "recent")">Last 7 Days</option>
|
||||
<option value="7plus" selected="@(ViewBag.LoginAgeFilter == "7plus")">7+ Days Ago</option>
|
||||
<option value="30plus" selected="@(ViewBag.LoginAgeFilter == "30plus")">30+ Days Ago</option>
|
||||
<option value="90plus" selected="@(ViewBag.LoginAgeFilter == "90plus")">90+ Days Ago</option>
|
||||
<option value="never" selected="@(ViewBag.LoginAgeFilter == "never")">Never</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<label class="form-label small mb-1">Search</label>
|
||||
<input type="text" name="search" class="form-control form-control-sm" value="@ViewBag.Search" placeholder="Name or email..." />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-primary btn-sm">Filter</button>
|
||||
<a href="@Url.Action("Index")" class="btn btn-outline-secondary btn-sm ms-1">Clear</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Table *@
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header py-2 small fw-semibold">@((int)ViewBag.TotalCount) user(s)</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover mb-0 align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th><a href="@SortLink("Company")" class="text-decoration-none text-body">Company <i class="bi @SortIcon("Company")"></i></a></th>
|
||||
<th><a href="@SortLink("Name")" class="text-decoration-none text-body">Name <i class="bi @SortIcon("Name")"></i></a></th>
|
||||
<th>Email</th>
|
||||
<th><a href="@SortLink("Role")" class="text-decoration-none text-body">Role <i class="bi @SortIcon("Role")"></i></a></th>
|
||||
<th>Status</th>
|
||||
<th><a href="@SortLink("LastLogin")" class="text-decoration-none text-body">Last Login <i class="bi @SortIcon("LastLogin")"></i></a></th>
|
||||
<th><a href="@SortLink("Created")" class="text-decoration-none text-body">Created <i class="bi @SortIcon("Created")"></i></a></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (!Model.Any())
|
||||
{
|
||||
<tr><td colspan="7" class="text-center text-muted py-4">No users found.</td></tr>
|
||||
}
|
||||
@foreach (var u in Model)
|
||||
{
|
||||
var loginClass = u.DaysSinceLogin == null ? "text-danger"
|
||||
: u.DaysSinceLogin > 90 ? "text-warning"
|
||||
: u.DaysSinceLogin > 30 ? "text-secondary"
|
||||
: "text-success";
|
||||
var loginText = u.LastLoginDate.HasValue
|
||||
? $"{u.LastLoginDate.Value:MM/dd/yy} ({u.DaysSinceLogin}d ago)"
|
||||
: "Never";
|
||||
<tr>
|
||||
<td class="small">@u.CompanyName</td>
|
||||
<td class="small fw-semibold">@u.FullName</td>
|
||||
<td class="small text-muted">@u.Email</td>
|
||||
<td class="small">@u.CompanyRole</td>
|
||||
<td>
|
||||
<span class="badge @(u.IsActive ? "bg-success" : "bg-secondary")">
|
||||
@(u.IsActive ? "Active" : "Inactive")
|
||||
</span>
|
||||
</td>
|
||||
<td class="small @loginClass">@loginText</td>
|
||||
<td class="small text-muted">@u.CreatedAt.ToString("MM/dd/yy")</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Mobile card view — shown on screens < 992px -->
|
||||
<div class="mobile-card-view">
|
||||
<div class="mobile-card-list">
|
||||
@if (!Model.Any())
|
||||
{
|
||||
<p class="text-center text-muted py-4">No users found.</p>
|
||||
}
|
||||
@foreach (var u in Model)
|
||||
{
|
||||
var loginClass = u.DaysSinceLogin == null ? "text-danger"
|
||||
: u.DaysSinceLogin > 90 ? "text-warning"
|
||||
: u.DaysSinceLogin > 30 ? "text-secondary"
|
||||
: "text-success";
|
||||
var loginText = u.LastLoginDate.HasValue
|
||||
? $"{u.LastLoginDate.Value:MM/dd/yy} ({u.DaysSinceLogin}d ago)"
|
||||
: "Never";
|
||||
<div class="mobile-data-card">
|
||||
<div class="mobile-card-header">
|
||||
<div class="mobile-card-icon bg-primary"><i class="bi bi-person"></i></div>
|
||||
<div class="mobile-card-title">
|
||||
<h6>@u.Email</h6>
|
||||
<small>@u.FullName</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-card-body">
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Status</span>
|
||||
<span class="mobile-card-value">
|
||||
<span class="badge @(u.IsActive ? "bg-success" : "bg-secondary")">
|
||||
@(u.IsActive ? "Active" : "Inactive")
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Company</span>
|
||||
<span class="mobile-card-value">@u.CompanyName</span>
|
||||
</div>
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Role</span>
|
||||
<span class="mobile-card-value">@u.CompanyRole</span>
|
||||
</div>
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Last Login</span>
|
||||
<span class="mobile-card-value @loginClass">@loginText</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-card-footer">
|
||||
<span class="small text-muted">Joined @u.CreatedAt.ToString("MM/dd/yy")</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@if (totalPages > 1)
|
||||
{
|
||||
<div class="card-footer d-flex justify-content-between align-items-center py-2">
|
||||
<span class="small text-muted">Page @(page) of @(totalPages)</span>
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
@if (page > 1)
|
||||
{
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="@Url.Action("Index", new { page = page - 1, pageSize = ViewBag.PageSize, companyId = ViewBag.CompanyIdFilter, role = ViewBag.RoleFilter, activeStatus = ViewBag.ActiveStatusFilter, loginAge = ViewBag.LoginAgeFilter, search = ViewBag.Search, sortCol = ViewBag.SortCol, sortDir = ViewBag.SortDir })">‹</a>
|
||||
</li>
|
||||
}
|
||||
@if (page < totalPages)
|
||||
{
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="@Url.Action("Index", new { page = page + 1, pageSize = ViewBag.PageSize, companyId = ViewBag.CompanyIdFilter, role = ViewBag.RoleFilter, activeStatus = ViewBag.ActiveStatusFilter, loginAge = ViewBag.LoginAgeFilter, search = ViewBag.Search, sortCol = ViewBag.SortCol, sortDir = ViewBag.SortDir })">›</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,197 @@
|
||||
@model List<PowderCoating.Web.Controllers.OnlineUserRow>
|
||||
@{
|
||||
ViewData["Title"] = "Online Now";
|
||||
int windowMinutes = ViewBag.WindowMinutes ?? 15;
|
||||
int count = Model.Count;
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<style>
|
||||
.online-pulse {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 0 0 rgba(34,197,94,.6);
|
||||
animation: pulse-ring 1.6s ease-out infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@keyframes pulse-ring {
|
||||
0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
|
||||
70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
|
||||
}
|
||||
.path-badge {
|
||||
font-size: 0.75rem;
|
||||
font-family: monospace;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
.last-seen-bar {
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, #22c55e, #86efac);
|
||||
transition: width .4s ease;
|
||||
}
|
||||
[data-bs-theme="dark"] thead.table-dark th {
|
||||
background-color: #343a40 !important;
|
||||
border-bottom-color: #4d5154 !important;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
<div class="container-fluid py-3">
|
||||
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div>
|
||||
<h4 class="mb-0">
|
||||
<span class="online-pulse me-2"></span>
|
||||
Online Now
|
||||
</h4>
|
||||
<small class="text-muted">Users active in the last @windowMinutes minutes — refreshes every 30 s</small>
|
||||
</div>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<span class="badge bg-success fs-6 px-3 py-2" id="onlineCount">@count online</span>
|
||||
<a asp-controller="UserActivity" asp-action="Index" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-person-lines-fill me-1"></i>All Users
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (count == 0)
|
||||
{
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-moon-stars fs-1 text-muted opacity-50 d-block mb-3"></i>
|
||||
<p class="text-muted mb-0">No users have been active in the last @windowMinutes minutes.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
@* Desktop table *@
|
||||
<div class="card border-0 shadow-sm d-none d-lg-block">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover mb-0 align-middle" id="onlineTable">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th style="width:36px"></th>
|
||||
<th>User</th>
|
||||
<th>Company</th>
|
||||
<th>Role</th>
|
||||
<th>Current Page</th>
|
||||
<th style="width:140px">Last Seen</th>
|
||||
<th style="width:130px">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var u in Model)
|
||||
{
|
||||
var secsAgo = (int)(DateTime.UtcNow - u.LastSeen).TotalSeconds;
|
||||
var barPct = Math.Max(5, 100 - (int)(secsAgo / (windowMinutes * 60.0) * 100));
|
||||
<tr>
|
||||
<td class="text-center">
|
||||
<span class="online-pulse"></span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">@u.DisplayName</div>
|
||||
<small class="text-muted">@u.Email</small>
|
||||
</td>
|
||||
<td>
|
||||
@if (u.CompanyId.HasValue && !u.IsSuperAdmin)
|
||||
{
|
||||
<a asp-controller="Companies" asp-action="Details" asp-route-id="@u.CompanyId"
|
||||
class="text-decoration-none">@u.CompanyName</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>@u.CompanyName</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
@if (u.IsSuperAdmin)
|
||||
{
|
||||
<span class="badge bg-danger">SuperAdmin</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="badge bg-secondary-subtle text-body border">@u.Role</span>
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<span class="path-badge text-muted" title="@u.CurrentPath">@(u.CurrentPath ?? "—")</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="mb-1 small text-muted">@secsAgo s ago</div>
|
||||
<div class="last-seen-bar" style="width:@barPct%"></div>
|
||||
</td>
|
||||
<td class="small text-muted">@(u.IpAddress ?? "—")</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@* Mobile card view *@
|
||||
<div class="mobile-card-view d-lg-none">
|
||||
<div class="mobile-card-list">
|
||||
@foreach (var u in Model)
|
||||
{
|
||||
var secsAgo = (int)(DateTime.UtcNow - u.LastSeen).TotalSeconds;
|
||||
<div class="mobile-data-card">
|
||||
<div class="mobile-card-header">
|
||||
<div class="mobile-card-icon bg-success"><i class="bi bi-person-check-fill"></i></div>
|
||||
<div class="mobile-card-title">
|
||||
<h6>@u.DisplayName</h6>
|
||||
<small>@u.Email</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-card-body">
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Company</span>
|
||||
<span class="mobile-card-value">@(u.CompanyName ?? "—")</span>
|
||||
</div>
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Role</span>
|
||||
<span class="mobile-card-value">
|
||||
@if (u.IsSuperAdmin)
|
||||
{ <span class="badge bg-danger">SuperAdmin</span> }
|
||||
else
|
||||
{ <span class="badge bg-secondary-subtle text-body border">@u.Role</span> }
|
||||
</span>
|
||||
</div>
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Page</span>
|
||||
<span class="mobile-card-value small text-muted" style="font-family:monospace">@(u.CurrentPath ?? "—")</span>
|
||||
</div>
|
||||
<div class="mobile-card-row">
|
||||
<span class="mobile-card-label">Last Seen</span>
|
||||
<span class="mobile-card-value text-success">@secsAgo s ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script>
|
||||
// Auto-refresh the page every 30 seconds
|
||||
let countdown = 30;
|
||||
const badge = document.getElementById('onlineCount');
|
||||
|
||||
setInterval(() => {
|
||||
countdown--;
|
||||
if (countdown <= 0) {
|
||||
location.reload();
|
||||
}
|
||||
}, 1000);
|
||||
</script>
|
||||
}
|
||||
Reference in New Issue
Block a user