410 lines
28 KiB
Text
410 lines
28 KiB
Text
@model IEnumerable<UserResponsesViewModel>
|
|
|
|
@{
|
|
ViewData["Title"] = "User Responses Management";
|
|
|
|
var totalUsers = Model.Count();
|
|
var totalResponses = Model.Sum(u => u.Responses?.Count ?? 0);
|
|
var uniqueSurveys = Model.Where(u => u.Responses != null).SelectMany(u => u.Responses).Select(r => r.Questionnaire?.Title).Distinct().Count();
|
|
var avgResponses = totalUsers > 0 ? Math.Round((double)totalResponses / totalUsers, 1) : 0;
|
|
}
|
|
|
|
@section Styles {
|
|
<style>
|
|
@@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--neon-blue: #60a5fa;
|
|
--neon-purple: #c084fc;
|
|
--neon-green: #34d399;
|
|
--neon-pink: #f472b6;
|
|
--neon-yellow: #fbbf24;
|
|
--neon-red: #f87171;
|
|
--neon-cyan: #22d3ee;
|
|
--neon-teal: #33b3ae;
|
|
--neon-indigo: #818cf8;
|
|
|
|
--dark-900: #0f172a;
|
|
--dark-800: #1e293b;
|
|
--dark-700: #334155;
|
|
--dark-600: #475569;
|
|
--dark-500: #64748b;
|
|
--dark-400: #94a3b8;
|
|
--dark-300: #cbd5e1;
|
|
--dark-200: #e2e8f0;
|
|
|
|
--glass-bg: rgba(255, 255, 255, 0.05);
|
|
--glass-border: rgba(255, 255, 255, 0.1);
|
|
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
|
|
--font-main: 'Space Grotesk', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: var(--font-main);
|
|
background: var(--dark-900);
|
|
color: #e2e8f0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.nexgen-urm { min-height: 100vh; position: relative; }
|
|
|
|
/* ===== DYNAMIC BACKGROUND ===== */
|
|
.bg-pattern { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; }
|
|
.grid-overlay {
|
|
position: absolute; inset: 0;
|
|
background-image: linear-gradient(rgba(96,165,250,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,0.1) 1px, transparent 1px);
|
|
background-size: 60px 60px; animation: gridMove 20s linear infinite;
|
|
}
|
|
.gradient-mesh {
|
|
position: absolute; inset: 0;
|
|
background: radial-gradient(circle at 20% 20%, rgba(96,165,250,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 60%, rgba(192,132,252,0.15) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(52,211,153,0.15) 0%, transparent 50%);
|
|
animation: meshShift 15s ease-in-out infinite;
|
|
}
|
|
@@keyframes gridMove { 0% { transform: translate(0,0); } 100% { transform: translate(60px,60px); } }
|
|
@@keyframes meshShift { 0%,100% { filter: hue-rotate(0deg); transform: scale(1); } 50% { filter: hue-rotate(30deg); transform: scale(1.05); } }
|
|
@@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
|
|
@@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.4); } 50% { box-shadow: 0 0 0 8px rgba(248,113,113,0); } }
|
|
|
|
/* ===== TOP NAV ===== */
|
|
.top-nav {
|
|
position: sticky; top: 0; z-index: 100;
|
|
background: rgba(15,23,42,0.85); backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(96,165,250,0.15); padding: 0.8rem 2rem;
|
|
}
|
|
.nav-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
|
|
.nav-brand { display: flex; align-items: center; gap: 0.8rem; }
|
|
.brand-icon {
|
|
width: 36px; height: 36px; border-radius: 10px;
|
|
background: linear-gradient(135deg, var(--neon-indigo), var(--neon-purple));
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 16px; color: #fff; box-shadow: 0 4px 16px rgba(129,140,248,0.3);
|
|
}
|
|
.brand-text { display: flex; flex-direction: column; }
|
|
.brand-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: #fff; letter-spacing: 0.1em; }
|
|
.brand-version { font-family: var(--font-mono); font-size: 0.58rem; color: var(--dark-500); }
|
|
.breadcrumb-nex { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.7rem; }
|
|
.breadcrumb-nex .crumb { color: var(--dark-400); text-decoration: none; transition: color 0.2s; }
|
|
.breadcrumb-nex .crumb:hover { color: var(--neon-blue); }
|
|
.breadcrumb-nex .crumb.active { color: var(--neon-indigo); }
|
|
.breadcrumb-nex i.sep { font-size: 0.5rem; color: var(--dark-600); }
|
|
|
|
/* ===== MAIN ===== */
|
|
.urm-content { max-width: 1200px; margin: 0 auto; padding: 2rem; }
|
|
|
|
/* ===== ALERTS ===== */
|
|
.nex-alert { border-radius: 10px; padding: 0.8rem 1.2rem; font-size: 0.82rem; font-weight: 500; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; backdrop-filter: blur(10px); animation: fadeInUp 0.4s ease both; }
|
|
.nex-alert-success { background: rgba(52,211,153,0.1); color: var(--neon-green); border: 1px solid rgba(52,211,153,0.25); }
|
|
.nex-alert-error { background: rgba(248,113,113,0.1); color: var(--neon-red); border: 1px solid rgba(248,113,113,0.25); }
|
|
|
|
/* ===== HERO ===== */
|
|
.urm-hero { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; box-shadow: var(--glass-shadow); margin-bottom: 1.5rem; position: relative; animation: fadeInUp 0.5s ease both; }
|
|
.urm-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--neon-indigo), var(--neon-purple), var(--neon-pink)); }
|
|
.urm-hero-inner { padding: 2rem 2.2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
|
|
.urm-hero-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--neon-indigo), var(--neon-purple)); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; box-shadow: 0 8px 24px rgba(129,140,248,0.3); }
|
|
.urm-hero-title { font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 0.15rem; }
|
|
.urm-hero-sub { font-size: 0.82rem; color: var(--dark-400); font-weight: 500; }
|
|
|
|
/* ===== STATS ===== */
|
|
.urm-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.8rem; margin-bottom: 1.5rem; animation: fadeInUp 0.5s ease 0.06s both; }
|
|
.urm-stat { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 14px; padding: 1.2rem 1rem; text-align: center; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; transition: all 0.3s; }
|
|
.urm-stat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.15); }
|
|
.urm-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
|
|
.urm-stat:nth-child(1)::before { background: linear-gradient(90deg, var(--neon-indigo), var(--neon-purple)); }
|
|
.urm-stat:nth-child(2)::before { background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan)); }
|
|
.urm-stat:nth-child(3)::before { background: linear-gradient(90deg, var(--neon-green), var(--neon-teal)); }
|
|
.urm-stat:nth-child(4)::before { background: linear-gradient(90deg, var(--neon-yellow), var(--neon-pink)); }
|
|
.urm-stat-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; margin: 0 auto 0.5rem; }
|
|
.urm-stat:nth-child(1) .urm-stat-icon { background: rgba(129,140,248,0.15); color: var(--neon-indigo); }
|
|
.urm-stat:nth-child(2) .urm-stat-icon { background: rgba(96,165,250,0.15); color: var(--neon-blue); }
|
|
.urm-stat:nth-child(3) .urm-stat-icon { background: rgba(52,211,153,0.15); color: var(--neon-green); }
|
|
.urm-stat:nth-child(4) .urm-stat-icon { background: rgba(251,191,36,0.15); color: var(--neon-yellow); }
|
|
.urm-stat-num { font-size: 1.6rem; font-weight: 800; display: block; line-height: 1.2; }
|
|
.urm-stat:nth-child(1) .urm-stat-num { background: linear-gradient(135deg, var(--neon-indigo), var(--neon-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.urm-stat:nth-child(2) .urm-stat-num { background: linear-gradient(135deg, var(--neon-blue), var(--neon-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.urm-stat:nth-child(3) .urm-stat-num { background: linear-gradient(135deg, var(--neon-green), var(--neon-teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.urm-stat:nth-child(4) .urm-stat-num { background: linear-gradient(135deg, var(--neon-yellow), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.urm-stat-label { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: var(--dark-500); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.25rem; }
|
|
|
|
/* ===== TOOLBAR ===== */
|
|
.urm-toolbar { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 12px; padding: 0.7rem 1.2rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; box-shadow: var(--glass-shadow); animation: fadeInUp 0.5s ease 0.1s both; }
|
|
.nex-cb { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--dark-600); background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; transition: all 0.2s; position: relative; }
|
|
.nex-cb:checked { background: var(--neon-indigo); border-color: var(--neon-indigo); }
|
|
.nex-cb:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 0.65rem; font-weight: 700; }
|
|
.toolbar-label { font-size: 0.8rem; font-weight: 600; color: var(--dark-400); cursor: pointer; }
|
|
.toolbar-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; color: var(--neon-indigo); background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.25); padding: 0.2rem 0.7rem; border-radius: 100px; }
|
|
.toolbar-actions { display: none; gap: 0.4rem; margin-left: 0.6rem; }
|
|
.toolbar-actions.show { display: flex; }
|
|
.nex-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; border-radius: 8px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; border: 1px solid; cursor: pointer; transition: all 0.2s; background: transparent; text-decoration: none; }
|
|
.nex-btn.danger { border-color: rgba(248,113,113,0.3); color: var(--neon-red); background: rgba(248,113,113,0.08); }
|
|
.nex-btn.danger:hover { background: var(--neon-red); color: #fff; border-color: var(--neon-red); }
|
|
.nex-btn.ghost { border-color: rgba(255,255,255,0.15); color: var(--dark-400); background: rgba(255,255,255,0.03); }
|
|
.nex-btn.ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }
|
|
|
|
/* ===== GRID ===== */
|
|
.urm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0.8rem; animation: fadeInUp 0.5s ease 0.14s both; }
|
|
.urm-card { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1.5px solid var(--glass-border); border-radius: 16px; overflow: hidden; transition: all 0.3s; position: relative; box-shadow: var(--glass-shadow); }
|
|
.urm-card:hover { border-color: rgba(129,140,248,0.25); box-shadow: 0 12px 48px rgba(0,0,0,0.2); transform: translateY(-3px); }
|
|
.urm-card.selected { border-color: rgba(129,140,248,0.5); box-shadow: 0 0 0 1px rgba(129,140,248,0.3), 0 12px 48px rgba(0,0,0,0.2); }
|
|
|
|
.urm-card-cb { position: absolute; top: 12px; right: 12px; z-index: 5; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--dark-600); background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; transition: all 0.2s; }
|
|
.urm-card-cb:checked { background: var(--neon-indigo); border-color: var(--neon-indigo); }
|
|
.urm-card-cb:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 0.6rem; font-weight: 700; }
|
|
|
|
.urm-card-head { padding: 1.1rem 1.3rem; padding-right: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 0.8rem; }
|
|
.urm-card-avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--neon-indigo), var(--neon-purple)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 12px rgba(129,140,248,0.25); }
|
|
.urm-card-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
|
|
.urm-card-email { font-size: 0.75rem; color: var(--dark-500); margin-top: 0.1rem; }
|
|
|
|
.urm-card-body { padding: 1rem 1.3rem; }
|
|
.urm-card-surveys-title { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; color: var(--dark-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
|
|
.urm-card-surveys-title i { color: var(--neon-green); }
|
|
.urm-surveys { display: flex; flex-wrap: wrap; gap: 0.35rem; }
|
|
.urm-survey-tag { background: rgba(129,140,248,0.1); border: 1px solid rgba(129,140,248,0.25); color: var(--neon-indigo); padding: 0.25rem 0.7rem; border-radius: 8px; font-size: 0.72rem; font-weight: 600; }
|
|
.urm-no-surveys { color: var(--dark-600); font-style: italic; font-size: 0.78rem; text-align: center; padding: 0.8rem; background: rgba(255,255,255,0.02); border-radius: 10px; border: 1px dashed rgba(255,255,255,0.08); }
|
|
|
|
.urm-card-foot { padding: 0; border-top: 1px solid rgba(255,255,255,0.06); }
|
|
.urm-view-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.85rem 1rem; background: transparent; border: none; color: var(--neon-indigo); text-decoration: none; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; transition: all 0.2s; }
|
|
.urm-view-btn:hover { background: rgba(129,140,248,0.08); color: #fff; text-decoration: none; }
|
|
|
|
/* ===== EMPTY ===== */
|
|
.urm-empty { text-align: center; padding: 4rem 2rem; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--glass-shadow); animation: fadeInUp 0.5s ease 0.14s both; }
|
|
.urm-empty-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--dark-600); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 1rem; }
|
|
.urm-empty h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark-300); margin-bottom: 0.3rem; }
|
|
.urm-empty p { font-size: 0.85rem; color: var(--dark-500); }
|
|
|
|
/* ===== MODAL ===== */
|
|
.urm-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); z-index: 1000; display: none; align-items: center; justify-content: center; }
|
|
.urm-modal-overlay.show { display: flex; }
|
|
.urm-modal { background: rgba(30,41,59,0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; max-width: 440px; width: 90%; box-shadow: 0 24px 64px rgba(0,0,0,0.4); overflow: hidden; }
|
|
.urm-modal-head { padding: 1.8rem 1.6rem 1rem; text-align: center; }
|
|
.urm-modal-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(248,113,113,0.12); color: var(--neon-red); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 0.9rem; border: 1px solid rgba(248,113,113,0.25); animation: pulseGlow 2s infinite; }
|
|
.urm-modal-head h2 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
|
|
.urm-modal-head p { font-size: 0.8rem; color: var(--dark-400); }
|
|
.urm-modal-body { padding: 0 1.6rem 1rem; }
|
|
.urm-modal-info { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); border-radius: 10px; padding: 0.7rem 1rem; text-align: center; margin-bottom: 0.7rem; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--neon-red); }
|
|
.urm-modal-detail { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.78rem; color: var(--dark-400); line-height: 1.6; }
|
|
.urm-modal-detail strong { color: var(--dark-300); }
|
|
.urm-modal-detail ul { margin: 0.4rem 0 0; padding-left: 1rem; }
|
|
.urm-modal-detail li { margin-bottom: 0.2rem; }
|
|
.urm-modal-foot { display: flex; gap: 0.5rem; padding: 1rem 1.6rem; border-top: 1px solid rgba(255,255,255,0.06); }
|
|
.urm-modal-btn { flex: 1; padding: 0.65rem 1rem; border-radius: 10px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
|
|
.urm-modal-btn.cancel { background: rgba(255,255,255,0.05); color: var(--dark-400); border: 1px solid rgba(255,255,255,0.1); }
|
|
.urm-modal-btn.cancel:hover { color: #fff; background: rgba(255,255,255,0.08); }
|
|
.urm-modal-btn.confirm { background: var(--neon-red); color: #fff; }
|
|
.urm-modal-btn.confirm:hover { background: #ef4444; box-shadow: 0 4px 16px rgba(248,113,113,0.3); }
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@@media (max-width: 768px) {
|
|
.urm-content { padding: 1rem; }
|
|
.urm-stats { grid-template-columns: repeat(2,1fr); }
|
|
.urm-grid { grid-template-columns: 1fr; }
|
|
.urm-hero-inner { padding: 1.3rem; flex-direction: column; align-items: flex-start; }
|
|
.nav-container { flex-wrap: wrap; }
|
|
.breadcrumb-nex { order: 3; flex-basis: 100%; }
|
|
.toolbar-actions { margin-left: 0; flex-basis: 100%; }
|
|
}
|
|
@@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
|
|
@@media print { .bg-pattern, .top-nav { display: none !important; } .urm-card, .urm-hero, .urm-stat, .urm-toolbar { background: white; color: black; border: 1px solid #ccc; backdrop-filter: none; } }
|
|
</style>
|
|
}
|
|
|
|
<div class="nexgen-urm">
|
|
<div class="bg-pattern"><div class="grid-overlay"></div><div class="gradient-mesh"></div></div>
|
|
|
|
<nav class="top-nav">
|
|
<div class="nav-container">
|
|
<div class="nav-brand">
|
|
<div class="brand-icon"><i class="bi bi-people-fill"></i></div>
|
|
<div class="brand-text">
|
|
<span class="brand-name">USER RESPONSES</span>
|
|
<span class="brand-version">v1.0</span>
|
|
</div>
|
|
</div>
|
|
<nav class="breadcrumb-nex">
|
|
<a href="#" class="crumb"><i class="bi bi-house"></i> ADMIN</a>
|
|
<i class="bi bi-chevron-right sep"></i>
|
|
<span class="crumb active">USER RESPONSES</span>
|
|
</nav>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="urm-content">
|
|
<partial name="_Notification" />
|
|
|
|
@if (TempData["Success"] != null)
|
|
{ <div class="nex-alert nex-alert-success"><i class="bi bi-check-circle"></i> @TempData["Success"]</div> }
|
|
@if (TempData["Error"] != null)
|
|
{ <div class="nex-alert nex-alert-error"><i class="bi bi-exclamation-triangle"></i> @TempData["Error"]</div> }
|
|
@if (TempData["Warning"] != null)
|
|
{ <div class="nex-alert nex-alert-error"><i class="bi bi-exclamation-circle"></i> @TempData["Warning"]</div> }
|
|
|
|
<div class="urm-hero">
|
|
<div class="urm-hero-inner">
|
|
<div class="urm-hero-icon"><i class="bi bi-people-fill"></i></div>
|
|
<div>
|
|
<h1 class="urm-hero-title">User Responses Management</h1>
|
|
<div class="urm-hero-sub">Monitor and manage all user survey responses and participation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (Model.Any())
|
|
{
|
|
<div class="urm-stats">
|
|
<div class="urm-stat"><div class="urm-stat-icon"><i class="bi bi-people"></i></div><span class="urm-stat-num">@totalUsers</span><span class="urm-stat-label">Users</span></div>
|
|
<div class="urm-stat"><div class="urm-stat-icon"><i class="bi bi-clipboard-data"></i></div><span class="urm-stat-num">@totalResponses</span><span class="urm-stat-label">Responses</span></div>
|
|
<div class="urm-stat"><div class="urm-stat-icon"><i class="bi bi-collection"></i></div><span class="urm-stat-num">@uniqueSurveys</span><span class="urm-stat-label">Surveys</span></div>
|
|
<div class="urm-stat"><div class="urm-stat-icon"><i class="bi bi-bar-chart"></i></div><span class="urm-stat-num">@avgResponses</span><span class="urm-stat-label">Avg / User</span></div>
|
|
</div>
|
|
|
|
<div class="urm-toolbar">
|
|
<input type="checkbox" class="nex-cb" id="masterCB" />
|
|
<label for="masterCB" class="toolbar-label">Select All</label>
|
|
<span class="toolbar-count" id="selCount">0 selected</span>
|
|
<div class="toolbar-actions" id="toolActions">
|
|
<button type="button" class="nex-btn danger" id="delSelBtn"><i class="bi bi-trash"></i> Delete Selected</button>
|
|
<button type="button" class="nex-btn ghost" id="deselectBtn"><i class="bi bi-x"></i> Deselect</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form asp-action="DeleteSelected" method="post" id="delForm" style="display:none;">
|
|
@Html.AntiForgeryToken()
|
|
<div id="delContainer"></div>
|
|
</form>
|
|
|
|
<div class="urm-grid">
|
|
@foreach (var item in Model)
|
|
{
|
|
<div class="urm-card" data-email="@item.UserEmail">
|
|
<input type="checkbox" class="urm-card-cb" value="@item.UserEmail" />
|
|
<div class="urm-card-head">
|
|
<div class="urm-card-avatar">@(item.UserName?.Substring(0, 1).ToUpper() ?? "U")</div>
|
|
<div>
|
|
<div class="urm-card-name">@(item.UserName ?? "Unknown")</div>
|
|
<div class="urm-card-email">@(item.UserEmail ?? "—")</div>
|
|
</div>
|
|
</div>
|
|
<div class="urm-card-body">
|
|
<div class="urm-card-surveys-title"><i class="bi bi-clipboard-check"></i> Surveys (@(item.Responses?.Count ?? 0))</div>
|
|
@if (item.Responses?.Any() == true)
|
|
{
|
|
<div class="urm-surveys">
|
|
@foreach (var r in item.Responses)
|
|
{ <span class="urm-survey-tag">@(r.Questionnaire?.Title ?? "Unknown")</span> }
|
|
</div>
|
|
}
|
|
else
|
|
{ <div class="urm-no-surveys"><i class="bi bi-inbox"></i> No responses yet</div> }
|
|
</div>
|
|
<div class="urm-card-foot">
|
|
<a asp-controller="UserResponseStatus" asp-action="UserResponsesStatus" asp-route-userEmail="@item.UserEmail" class="urm-view-btn">
|
|
<i class="bi bi-eye"></i> VIEW RESPONSE DETAILS
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="urm-empty">
|
|
<div class="urm-empty-icon"><i class="bi bi-people"></i></div>
|
|
<h3>No User Responses Yet</h3>
|
|
<p>When users start responding to surveys, they will appear here.</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="urm-modal-overlay" id="delModal">
|
|
<div class="urm-modal">
|
|
<div class="urm-modal-head">
|
|
<div class="urm-modal-icon"><i class="bi bi-trash"></i></div>
|
|
<h2>Delete User Responses</h2>
|
|
<p>Permanently remove all responses from selected users</p>
|
|
</div>
|
|
<div class="urm-modal-body">
|
|
<div class="urm-modal-info" id="modalInfo">0 users selected</div>
|
|
<div class="urm-modal-detail">
|
|
<strong>What will be deleted:</strong>
|
|
<ul>
|
|
<li>All survey response records from selected users</li>
|
|
<li>Associated response details and answers</li>
|
|
<li>This action cannot be undone</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="urm-modal-foot">
|
|
<button type="button" class="urm-modal-btn cancel" id="modalCancel">Cancel</button>
|
|
<button type="button" class="urm-modal-btn confirm" id="modalConfirm"><i class="bi bi-trash"></i> Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
let selected = [];
|
|
const cards = document.querySelectorAll('.urm-card');
|
|
const cbs = document.querySelectorAll('.urm-card-cb');
|
|
const masterCB = document.getElementById('masterCB');
|
|
const selCount = document.getElementById('selCount');
|
|
const toolActions = document.getElementById('toolActions');
|
|
const modal = document.getElementById('delModal');
|
|
|
|
function updateUI() {
|
|
selCount.textContent = selected.length + ' selected';
|
|
toolActions.classList.toggle('show', selected.length > 0);
|
|
masterCB.checked = selected.length === cbs.length && cbs.length > 0;
|
|
cards.forEach(c => {
|
|
const email = c.dataset.email;
|
|
c.classList.toggle('selected', selected.includes(email));
|
|
const cb = c.querySelector('.urm-card-cb');
|
|
if (cb) cb.checked = selected.includes(email);
|
|
});
|
|
}
|
|
|
|
cbs.forEach(cb => {
|
|
cb.addEventListener('change', function () {
|
|
const email = this.value;
|
|
if (this.checked) { if (!selected.includes(email)) selected.push(email); }
|
|
else { selected = selected.filter(x => x !== email); }
|
|
updateUI();
|
|
});
|
|
});
|
|
|
|
masterCB.addEventListener('change', function () {
|
|
if (this.checked) { selected = Array.from(cbs).map(cb => cb.value); }
|
|
else { selected = []; }
|
|
updateUI();
|
|
});
|
|
|
|
document.getElementById('deselectBtn').addEventListener('click', function () { selected = []; updateUI(); });
|
|
|
|
document.getElementById('delSelBtn').addEventListener('click', function () {
|
|
if (selected.length) {
|
|
document.getElementById('modalInfo').textContent = selected.length + ' user' + (selected.length !== 1 ? 's' : '') + ' selected';
|
|
modal.classList.add('show');
|
|
}
|
|
});
|
|
|
|
document.getElementById('modalCancel').addEventListener('click', function () { modal.classList.remove('show'); });
|
|
modal.addEventListener('click', function (e) { if (e.target === modal) modal.classList.remove('show'); });
|
|
|
|
document.getElementById('modalConfirm').addEventListener('click', function () {
|
|
const c = document.getElementById('delContainer'); c.innerHTML = '';
|
|
selected.forEach(email => {
|
|
const inp = document.createElement('input');
|
|
inp.type = 'hidden'; inp.name = 'selectedEmails'; inp.value = email;
|
|
c.appendChild(inp);
|
|
});
|
|
document.getElementById('delForm').submit();
|
|
modal.classList.remove('show');
|
|
});
|
|
});
|
|
</script>
|
|
}
|