383 lines
29 KiB
Text
383 lines
29 KiB
Text
@* Views/Admin/SurveyAnalysis/HighRiskResponses.cshtml *@
|
|
@model List<Services.AIViewModel.ResponseAnalysisResult>
|
|
|
|
@{
|
|
ViewData["Title"] = $"High Risk Responses — {ViewBag.QuestionnaireName}";
|
|
}
|
|
|
|
@section Styles {
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
|
|
<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-indigo:#818cf8;
|
|
--neon-teal:#33b3ae;--neon-amber:#f59e0b;--neon-orange:#fb923c;
|
|
--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.04);--glass-border:rgba(255,255,255,0.08);
|
|
--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}
|
|
|
|
.nex-bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
|
|
.nex-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(248,113,113,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(248,113,113,0.04) 1px,transparent 1px);background-size:60px 60px;animation:gridDrift 25s linear infinite}
|
|
.nex-bg .mesh{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 20%,rgba(248,113,113,0.06) 0%,transparent 55%),radial-gradient(ellipse at 75% 60%,rgba(220,38,38,0.05) 0%,transparent 55%),radial-gradient(ellipse at 50% 90%,rgba(251,191,36,0.04) 0%,transparent 55%);animation:meshFloat 18s ease-in-out infinite}
|
|
|
|
@@keyframes gridDrift{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}
|
|
@@keyframes meshFloat{0%,100%{filter:hue-rotate(0deg);transform:scale(1)}50%{filter:hue-rotate(8deg);transform:scale(1.02)}}
|
|
@@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.15)}}
|
|
@@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
|
|
@@keyframes ringPulse{0%{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.1}100%{transform:scale(1);opacity:.3}}
|
|
|
|
.container{max-width:1400px;margin:0 auto;padding:0 2rem}
|
|
|
|
/* ===== HEADER ===== */
|
|
.page-header{position:relative;z-index:10;padding:2rem 0 1.5rem;border-bottom:1px solid rgba(248,113,113,0.12)}
|
|
.breadcrumb-nex{display:flex;align-items:center;gap:.7rem;margin-bottom:1.8rem;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em;flex-wrap:wrap}
|
|
.breadcrumb-nex a{color:var(--dark-400);text-decoration:none;display:flex;align-items:center;gap:.4rem;transition:color .2s}
|
|
.breadcrumb-nex a:hover{color:var(--neon-red)}
|
|
.breadcrumb-nex .sep{color:var(--dark-600);font-size:.5rem}
|
|
.breadcrumb-nex .current{color:var(--neon-red);font-weight:600}
|
|
|
|
.header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
|
|
.header-left{flex:1}
|
|
.header-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.25);border-radius:50px;margin-bottom:1.5rem;font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--neon-red)}
|
|
.header-badge .dot{width:6px;height:6px;background:var(--neon-red);border-radius:50%;animation:pulse 1.5s infinite}
|
|
.header-title{font-size:2.8rem;font-weight:700;line-height:1.1;margin-bottom:.8rem;color:#fff}
|
|
.header-title .grad{background:linear-gradient(135deg,var(--neon-red),#dc2626,var(--neon-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.header-sub{font-size:.95rem;color:var(--dark-300);line-height:1.6}
|
|
|
|
.header-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-start;padding-top:.5rem}
|
|
.h-btn{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.2rem;border-radius:10px;text-decoration:none;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;transition:all .25s;border:1px solid;cursor:pointer;background:none}
|
|
.h-btn:hover{transform:translateY(-2px);text-decoration:none}
|
|
.h-btn.sec{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);color:var(--dark-300)}
|
|
.h-btn.sec:hover{background:rgba(248,113,113,0.08);border-color:rgba(248,113,113,0.25);color:var(--neon-red)}
|
|
.h-btn.green-fill{background:linear-gradient(135deg,var(--neon-green),var(--neon-teal));border-color:transparent;color:#fff}
|
|
.h-btn.green-fill:hover{box-shadow:0 10px 24px rgba(52,211,153,0.25);color:#fff}
|
|
.h-btn.blue-fill{background:linear-gradient(135deg,var(--neon-indigo),var(--neon-purple));border-color:transparent;color:#fff}
|
|
.h-btn.blue-fill:hover{box-shadow:0 10px 24px rgba(129,140,248,0.25);color:#fff}
|
|
|
|
/* ===== ALERT BANNER ===== */
|
|
.nex-card{background:rgba(30,41,59,0.45);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.07);border-radius:18px;overflow:hidden;position:relative;margin-bottom:1.5rem}
|
|
.alert-card{border-color:rgba(248,113,113,0.25)!important}
|
|
.alert-stripe{position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#dc2626,var(--neon-red));border-radius:18px 0 0 18px}
|
|
.alert-row{display:flex;align-items:center;gap:1.5rem;padding:1.8rem}
|
|
.alert-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--neon-red),#dc2626);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;flex-shrink:0}
|
|
.alert-body{flex:1}
|
|
.alert-body h2{font-family:var(--font-mono);font-size:1rem;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:.6rem}
|
|
.alert-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
|
|
.a-tag{padding:.25rem .7rem;border-radius:20px;font-family:var(--font-mono);font-size:.55rem;font-weight:700;letter-spacing:.06em;border:1px solid}
|
|
.a-tag.crit{background:rgba(127,29,29,0.25);border-color:#7f1d1d;color:#fca5a5}
|
|
.a-tag.high{background:rgba(248,113,113,0.15);border-color:rgba(248,113,113,0.35);color:var(--neon-red)}
|
|
.a-tag.imm{background:rgba(251,191,36,0.15);border-color:rgba(251,191,36,0.35);color:var(--neon-yellow)}
|
|
.alert-desc{font-size:.75rem;color:var(--dark-400)}
|
|
|
|
/* ===== RISK CARDS GRID ===== */
|
|
.risk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:1.5rem;margin-bottom:2rem}
|
|
|
|
.risk-card{background:rgba(30,41,59,0.45);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.07);border-radius:18px;overflow:hidden;position:relative;transition:all .35s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(24px)}
|
|
.risk-card.show{opacity:1;transform:translateY(0)}
|
|
.risk-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(248,113,113,0.08)}
|
|
.risk-card.immediate{border-color:rgba(251,191,36,0.3)}
|
|
.risk-card .top-glow{position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .3s}
|
|
.risk-card:hover .top-glow{opacity:1}
|
|
.risk-card.critical .top-glow{background:linear-gradient(90deg,#dc2626,#7f1d1d)}
|
|
.risk-card.high .top-glow{background:linear-gradient(90deg,var(--neon-red),#dc2626)}
|
|
.risk-card.moderate .top-glow{background:linear-gradient(90deg,var(--neon-yellow),var(--neon-orange))}
|
|
|
|
/* Card header */
|
|
.rk-head{padding:1.5rem 1.8rem 1rem;position:relative}
|
|
.rk-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:50px;font-family:var(--font-mono);font-size:.55rem;font-weight:700;letter-spacing:.08em;margin-bottom:.6rem;border:1px solid}
|
|
.rk-badge.critical{background:rgba(127,29,29,0.25);border-color:#7f1d1d;color:#fca5a5}
|
|
.rk-badge.high{background:rgba(248,113,113,0.15);border-color:rgba(248,113,113,0.35);color:var(--neon-red)}
|
|
.rk-badge.moderate{background:rgba(251,191,36,0.15);border-color:rgba(251,191,36,0.35);color:var(--neon-yellow)}
|
|
.rk-id{font-family:var(--font-mono);font-size:.6rem;color:var(--dark-500);letter-spacing:.06em}
|
|
|
|
.rk-score{position:absolute;top:1.5rem;right:1.8rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
|
|
.score-circ{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:#fff}
|
|
.score-circ.critical{background:linear-gradient(135deg,#dc2626,#7f1d1d)}
|
|
.score-circ.high{background:linear-gradient(135deg,var(--neon-red),#dc2626)}
|
|
.score-circ.moderate{background:linear-gradient(135deg,var(--neon-yellow),var(--neon-orange))}
|
|
.imm-flag{background:var(--neon-yellow);color:var(--dark-900);padding:.15rem .5rem;border-radius:10px;font-family:var(--font-mono);font-size:.5rem;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;gap:.3rem}
|
|
|
|
/* Card sections */
|
|
.rk-section{padding:0 1.8rem 1.2rem}
|
|
.rk-label{font-family:var(--font-mono);font-size:.58rem;font-weight:600;letter-spacing:.1em;color:var(--dark-500);text-transform:uppercase;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
|
|
.rk-label i{font-size:.6rem}
|
|
.rk-question{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:1rem;font-size:.78rem;line-height:1.5;color:var(--dark-200);margin-bottom:.1rem}
|
|
.rk-response{background:rgba(255,255,255,0.02);border-left:3px solid var(--neon-blue);border-radius:0 8px 8px 0;padding:1rem 1rem 1rem 1.3rem;font-style:italic;font-size:.78rem;line-height:1.6;color:var(--dark-200);margin-bottom:.1rem}
|
|
.rk-tags{display:flex;flex-wrap:wrap;gap:.4rem}
|
|
.rk-tag{padding:.2rem .6rem;border-radius:6px;font-size:.6rem;font-weight:600;border:1px solid}
|
|
.rk-tag.red{background:rgba(248,113,113,0.12);border-color:rgba(248,113,113,0.25);color:var(--neon-red)}
|
|
.rk-tag.green{background:rgba(52,211,153,0.12);border-color:rgba(52,211,153,0.25);color:var(--neon-green)}
|
|
.rk-action{background:rgba(52,211,153,0.05);border:1px solid rgba(52,211,153,0.2);border-radius:10px;padding:1rem;font-size:.75rem;line-height:1.5;color:var(--neon-green)}
|
|
.rk-insight{background:rgba(255,255,255,0.02);border-left:3px solid var(--neon-blue);border-radius:0 8px 8px 0;padding:.8rem;margin-bottom:.5rem}
|
|
.rk-insight:last-child{margin-bottom:0}
|
|
.rk-insight-cat{font-family:var(--font-mono);font-size:.55rem;font-weight:600;color:var(--neon-blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}
|
|
.rk-insight-txt{font-size:.72rem;color:var(--dark-200);line-height:1.4}
|
|
|
|
/* Card footer */
|
|
.rk-foot{padding:1rem 1.8rem;background:rgba(15,23,42,0.4);border-top:1px solid rgba(255,255,255,0.05);display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
|
|
.rk-time{font-family:var(--font-mono);font-size:.58rem;color:var(--dark-500);display:flex;align-items:center;gap:.4rem}
|
|
.rk-btns{display:flex;gap:.6rem}
|
|
.rk-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:8px;font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .2s;border:1px solid;text-decoration:none;background:none}
|
|
.rk-btn:hover{transform:translateY(-1px);text-decoration:none}
|
|
.rk-btn.blue{background:rgba(96,165,250,0.08);border-color:rgba(96,165,250,0.25);color:var(--neon-blue)}.rk-btn.blue:hover{background:rgba(96,165,250,0.15)}
|
|
.rk-btn.yellow{background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.25);color:var(--neon-yellow)}.rk-btn.yellow:hover{background:rgba(251,191,36,0.15)}
|
|
|
|
/* ===== ACTIONS DASHBOARD ===== */
|
|
.dash-head{padding:1.5rem 1.8rem;display:flex;align-items:center;gap:1.2rem;border-bottom:1px solid rgba(255,255,255,0.05)}
|
|
.dash-icon{width:46px;height:46px;background:linear-gradient(135deg,var(--neon-green),var(--neon-teal));border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;flex-shrink:0}
|
|
.dash-head h2{font-family:var(--font-mono);font-size:.9rem;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:.15rem}
|
|
.dash-head p{font-size:.72rem;color:var(--dark-400)}
|
|
.dash-body{padding:1.8rem}
|
|
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.5rem}
|
|
.dash-col{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:1.4rem}
|
|
.dash-col-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
|
|
.dash-col-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;flex-shrink:0}
|
|
.dash-col-icon.green{background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan))}
|
|
.dash-col-icon.blue{background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple))}
|
|
.dash-col-icon.amber{background:linear-gradient(135deg,var(--neon-yellow),var(--neon-orange))}
|
|
.dash-col-title{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;color:#fff}
|
|
.dash-list{list-style:none;padding:0}
|
|
.dash-list li{font-size:.72rem;color:var(--dark-300);line-height:1.5;margin-bottom:.4rem;padding-left:1rem;position:relative}
|
|
.dash-list li::before{content:'→';position:absolute;left:0;color:var(--neon-cyan);font-weight:700;font-size:.65rem}
|
|
.central-btns{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.06)}
|
|
|
|
/* ===== SUCCESS STATE ===== */
|
|
.success-state{text-align:center;padding:4rem 2rem}
|
|
.success-visual{position:relative;display:inline-block;margin-bottom:2rem}
|
|
.success-icon{width:100px;height:100px;background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#fff;position:relative;z-index:2}
|
|
.success-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
|
|
.ring{position:absolute;border:1px solid;border-radius:50%;opacity:.3}
|
|
.ring.r1{width:120px;height:120px;top:-60px;left:-60px;border-color:var(--neon-green);animation:ringPulse 3s infinite}
|
|
.ring.r2{width:140px;height:140px;top:-70px;left:-70px;border-color:var(--neon-cyan);animation:ringPulse 3s infinite 1s}
|
|
.ring.r3{width:160px;height:160px;top:-80px;left:-80px;border-color:var(--neon-blue);animation:ringPulse 3s infinite 2s}
|
|
.success-title{font-family:var(--font-mono);font-size:1.2rem;font-weight:700;letter-spacing:.05em;color:var(--neon-green);margin-bottom:.8rem}
|
|
.success-desc{color:var(--dark-300);font-size:.88rem;line-height:1.6;max-width:480px;margin:0 auto 2rem}
|
|
.success-btns{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@@media(max-width:1200px){.risk-grid{grid-template-columns:1fr}.dash-grid{grid-template-columns:1fr}}
|
|
@@media(max-width:768px){.header-row{flex-direction:column}.header-title{font-size:2rem}.alert-row{flex-direction:column;text-align:center}.central-btns,.success-btns{flex-direction:column;align-items:center}.rk-score{position:relative;top:auto;right:auto;flex-direction:row;margin-top:.6rem}.rk-foot{flex-direction:column;align-items:stretch;text-align:center}.rk-btns{justify-content:center}}
|
|
@@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.risk-card{opacity:1;transform:none}}
|
|
@@media print{.nex-bg,.h-btn,.rk-btn,.central-btns,.header-actions{display:none!important}body{background:#fff;color:#000}.nex-card,.risk-card{border:1px solid #ccc;background:#fff}}
|
|
</style>
|
|
}
|
|
|
|
<div class="nex-bg"><div class="grid"></div><div class="mesh"></div></div>
|
|
|
|
<!-- Header -->
|
|
<section class="page-header">
|
|
<div class="container">
|
|
<div class="breadcrumb-nex">
|
|
<a href="@Url.Action("Index")"><i class="fa-solid fa-brain"></i> Analysis Dashboard</a>
|
|
<i class="fa-solid fa-chevron-right sep"></i>
|
|
<a href="@Url.Action("AnalyzeQuestionnaire", new { id = ViewBag.QuestionnaireId })">@ViewBag.QuestionnaireName</a>
|
|
<i class="fa-solid fa-chevron-right sep"></i>
|
|
<span class="current">High Risk Cases</span>
|
|
</div>
|
|
<div class="header-row">
|
|
<div class="header-left">
|
|
<div class="header-badge"><span class="dot"></span> CRITICAL MENTAL HEALTH ANALYSIS</div>
|
|
<h1 class="header-title">High Risk <span class="grad">Cases</span></h1>
|
|
<p class="header-sub">Employees requiring immediate attention, identified by Claude AI analysis</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="@Url.Action("AnalyzeQuestionnaire", new { id = ViewBag.QuestionnaireId })" class="h-btn sec"><i class="fa-solid fa-chart-line"></i> Full Analysis</a>
|
|
<a href="@Url.Action("GenerateReport", new { id = ViewBag.QuestionnaireId })" class="h-btn sec"><i class="fa-solid fa-file-lines"></i> Report</a>
|
|
<a href="@Url.Action("AnalyzeTrends", new { id = ViewBag.QuestionnaireId })" class="h-btn sec"><i class="fa-solid fa-chart-area"></i> Trends</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="position:relative;z-index:10;padding:2rem 0 3rem">
|
|
<div class="container">
|
|
|
|
@if (Model != null && Model.Any())
|
|
{
|
|
var criticalCount = Model.Count(r => r.RiskAssessment?.RiskLevel == Services.AIViewModel.RiskLevel.Critical);
|
|
var highCount = Model.Count(r => r.RiskAssessment?.RiskLevel == Services.AIViewModel.RiskLevel.High);
|
|
var immediateCount = Model.Count(r => r.RiskAssessment?.RequiresImmediateAttention == true);
|
|
|
|
<!-- Alert Banner -->
|
|
<div class="nex-card alert-card">
|
|
<div class="alert-stripe"></div>
|
|
<div class="alert-row">
|
|
<div class="alert-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
|
<div class="alert-body">
|
|
<h2>MENTAL HEALTH ALERT: @Model.Count CASES REQUIRING ATTENTION</h2>
|
|
<div class="alert-tags">
|
|
@if (criticalCount > 0) { <span class="a-tag crit">@criticalCount CRITICAL</span> }
|
|
@if (highCount > 0) { <span class="a-tag high">@highCount HIGH RISK</span> }
|
|
@if (immediateCount > 0) { <span class="a-tag imm">@immediateCount IMMEDIATE</span> }
|
|
</div>
|
|
<div class="alert-desc">Professional intervention recommended — Privacy-protected analysis powered by Claude AI</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Risk Cards Grid -->
|
|
<div class="risk-grid">
|
|
@foreach (var resp in Model.OrderByDescending(r => r.RiskAssessment?.RiskScore ?? 0))
|
|
{
|
|
var riskLevel = resp.RiskAssessment?.RiskLevel ?? Services.AIViewModel.RiskLevel.Low;
|
|
var riskScore = resp.RiskAssessment?.RiskScore ?? 0;
|
|
var needsAttn = resp.RiskAssessment?.RequiresImmediateAttention ?? false;
|
|
var riskClass = riskLevel.ToString().ToLower();
|
|
|
|
<div class="risk-card @riskClass @(needsAttn ? "immediate" : "")">
|
|
<div class="top-glow"></div>
|
|
|
|
<div class="rk-head">
|
|
<div class="rk-badge @riskClass"><i class="fa-solid @GetRiskIcon(riskLevel)"></i> @riskLevel RISK</div>
|
|
<div class="rk-id">RESPONSE #@resp.ResponseId</div>
|
|
<div class="rk-score">
|
|
<div class="score-circ @riskClass">@Math.Round(riskScore * 100, 0)%</div>
|
|
@if (needsAttn) { <div class="imm-flag"><i class="fa-solid fa-bell"></i> IMMEDIATE</div> }
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rk-section">
|
|
<div class="rk-label"><i class="fa-solid fa-circle-question"></i> Question Context</div>
|
|
<div class="rk-question">@resp.QuestionText</div>
|
|
</div>
|
|
|
|
<div class="rk-section">
|
|
<div class="rk-label"><i class="fa-solid fa-comment-dots"></i> Response (Privacy Protected)</div>
|
|
<div class="rk-response">@(resp.AnonymizedResponseText?.Length > 150 ? resp.AnonymizedResponseText.Substring(0, 150) + "…" : resp.AnonymizedResponseText)</div>
|
|
</div>
|
|
|
|
@if (resp.RiskAssessment?.RiskIndicators?.Any() == true)
|
|
{
|
|
<div class="rk-section">
|
|
<div class="rk-label"><i class="fa-solid fa-triangle-exclamation"></i> Risk Indicators</div>
|
|
<div class="rk-tags">
|
|
@foreach (var ind in resp.RiskAssessment.RiskIndicators.Take(3)) { <span class="rk-tag red">@ind</span> }
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (!string.IsNullOrEmpty(resp.RiskAssessment?.RecommendedAction))
|
|
{
|
|
<div class="rk-section">
|
|
<div class="rk-label"><i class="fa-solid fa-clipboard-check"></i> Recommended Action</div>
|
|
<div class="rk-action">@resp.RiskAssessment.RecommendedAction</div>
|
|
</div>
|
|
}
|
|
|
|
@if (resp.Insights?.Any() == true)
|
|
{
|
|
<div class="rk-section">
|
|
<div class="rk-label"><i class="fa-solid fa-lightbulb"></i> Key Insights</div>
|
|
@foreach (var ins in resp.Insights.Take(2))
|
|
{
|
|
<div class="rk-insight"><div class="rk-insight-cat">@ins.Category</div><div class="rk-insight-txt">@ins.RecommendedIntervention</div></div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@if (resp.RiskAssessment?.ProtectiveFactors?.Any() == true)
|
|
{
|
|
<div class="rk-section">
|
|
<div class="rk-label"><i class="fa-solid fa-shield-halved"></i> Protective Factors</div>
|
|
<div class="rk-tags">
|
|
@foreach (var f in resp.RiskAssessment.ProtectiveFactors.Take(3)) { <span class="rk-tag green">@f</span> }
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<div class="rk-foot">
|
|
<div class="rk-time"><i class="fa-solid fa-clock"></i> ANALYZED: @resp.AnalyzedAt.ToString("MMM dd, HH:mm").ToUpper()</div>
|
|
<div class="rk-btns">
|
|
<a href="@Url.Action("ViewHighRiskResponse", new { questionnaireId = ViewBag.QuestionnaireId, responseId = resp.ResponseId })" class="rk-btn blue"><i class="fa-solid fa-eye"></i> DETAILS</a>
|
|
@if (needsAttn) { <button type="button" class="rk-btn yellow" onclick="markReviewed(@resp.ResponseId)"><i class="fa-solid fa-check"></i> REVIEWED</button> }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Actions Dashboard -->
|
|
<div class="nex-card">
|
|
<div class="dash-head">
|
|
<div class="dash-icon"><i class="fa-solid fa-user-doctor"></i></div>
|
|
<div><h2>Professional Actions</h2><p>Evidence-based intervention protocols</p></div>
|
|
</div>
|
|
<div class="dash-body">
|
|
<div class="dash-grid">
|
|
<div class="dash-col"><div class="dash-col-head"><div class="dash-col-icon green"><i class="fa-solid fa-phone"></i></div><div class="dash-col-title">IMMEDIATE</div></div><ul class="dash-list"><li>Contact Critical/High risk employees</li><li>Schedule follow-up conversations</li><li>Refer to mental health professionals</li></ul></div>
|
|
<div class="dash-col"><div class="dash-col-head"><div class="dash-col-icon blue"><i class="fa-solid fa-clipboard-list"></i></div><div class="dash-col-title">DOCUMENTATION</div></div><ul class="dash-list"><li>Document interventions taken</li><li>Track response to interventions</li><li>Update risk assessments</li></ul></div>
|
|
<div class="dash-col"><div class="dash-col-head"><div class="dash-col-icon amber"><i class="fa-solid fa-users"></i></div><div class="dash-col-title">ORGANIZATIONAL</div></div><ul class="dash-list"><li>Alert management to workplace issues</li><li>Implement preventive measures</li><li>Schedule team interventions</li></ul></div>
|
|
</div>
|
|
<div class="central-btns">
|
|
<button type="button" class="h-btn green-fill" onclick="exportHighRiskReport()"><i class="fa-solid fa-file-lines"></i> EXPORT REPORT</button>
|
|
<button type="button" class="h-btn blue-fill" onclick="scheduleFollowUps()"><i class="fa-solid fa-calendar-plus"></i> SCHEDULE FOLLOW-UPS</button>
|
|
<a href="@Url.Action("AnalyzeTrends", new { id = ViewBag.QuestionnaireId })" class="h-btn sec"><i class="fa-solid fa-chart-area"></i> VIEW TRENDS</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<!-- No high risk cases -->
|
|
<div class="nex-card">
|
|
<div class="success-state">
|
|
<div class="success-visual">
|
|
<div class="success-icon"><i class="fa-solid fa-shield-halved"></i></div>
|
|
<div class="success-rings"><div class="ring r1"></div><div class="ring r2"></div><div class="ring r3"></div></div>
|
|
</div>
|
|
<h3 class="success-title">EXCELLENT MENTAL HEALTH STATUS</h3>
|
|
<p class="success-desc">No high-risk or critical cases identified. This indicates a generally positive workplace mental health environment.</p>
|
|
<div class="success-btns">
|
|
<a href="@Url.Action("AnalyzeQuestionnaire", new { id = ViewBag.QuestionnaireId })" class="h-btn blue-fill"><i class="fa-solid fa-chart-line"></i> VIEW ANALYSIS</a>
|
|
<a href="@Url.Action("AnalyzeTrends", new { id = ViewBag.QuestionnaireId })" class="h-btn sec"><i class="fa-solid fa-chart-area"></i> TRENDS</a>
|
|
<a href="@Url.Action("GenerateReport", new { id = ViewBag.QuestionnaireId })" class="h-btn green-fill"><i class="fa-solid fa-file-lines"></i> REPORT</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
@functions {
|
|
private string GetRiskIcon(Services.AIViewModel.RiskLevel riskLevel)
|
|
{
|
|
return riskLevel switch
|
|
{
|
|
Services.AIViewModel.RiskLevel.Critical => "fa-skull-crossbones",
|
|
Services.AIViewModel.RiskLevel.High => "fa-triangle-exclamation",
|
|
Services.AIViewModel.RiskLevel.Moderate => "fa-circle-exclamation",
|
|
_ => "fa-circle-check"
|
|
};
|
|
}
|
|
}
|
|
|
|
@section Scripts {
|
|
<script>
|
|
function markReviewed(id) {
|
|
if (confirm('Confirm this high-risk case has been professionally reviewed?')) {
|
|
alert('Case marked as reviewed. Please ensure proper documentation.');
|
|
}
|
|
}
|
|
function exportHighRiskReport() {
|
|
window.location.href = '@Url.Action("DownloadReport", new { id = ViewBag.QuestionnaireId })';
|
|
}
|
|
function scheduleFollowUps() {
|
|
alert('This would integrate with your calendar system to schedule follow-up meetings.');
|
|
}
|
|
|
|
// Scroll-in animation for risk cards
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var obs = new IntersectionObserver(function (entries) {
|
|
entries.forEach(function (e) { if (e.isIntersecting) e.target.classList.add('show'); });
|
|
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
|
document.querySelectorAll('.risk-card').forEach(function (c) { obs.observe(c); });
|
|
});
|
|
</script>
|
|
}
|