1264 lines
No EOL
46 KiB
Text
1264 lines
No EOL
46 KiB
Text
@using Newtonsoft.Json
|
|
@model UserResponsesViewModel
|
|
|
|
@{
|
|
ViewData["Title"] = "User Response Details";
|
|
}
|
|
|
|
<style>
|
|
/* Modern Design System */
|
|
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
:root {
|
|
--primary-color: #6366f1;
|
|
--primary-light: #8b5cf6;
|
|
--primary-dark: #4338ca;
|
|
--success-color: #10b981;
|
|
--success-light: #34d399;
|
|
--success-dark: #059669;
|
|
--info-color: #06b6d4;
|
|
--info-light: #22d3ee;
|
|
--info-dark: #0891b2;
|
|
--warning-color: #f59e0b;
|
|
--warning-light: #fbbf24;
|
|
--warning-dark: #d97706;
|
|
--danger-color: #ef4444;
|
|
--danger-light: #fca5a5;
|
|
--danger-dark: #dc2626;
|
|
--gray-50: #f8fafc;
|
|
--gray-100: #f1f5f9;
|
|
--gray-200: #e2e8f0;
|
|
--gray-300: #cbd5e1;
|
|
--gray-400: #94a3b8;
|
|
--gray-500: #64748b;
|
|
--gray-600: #475569;
|
|
--gray-700: #334155;
|
|
--gray-800: #1e293b;
|
|
--gray-900: #0f172a;
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
--border-radius-sm: 8px;
|
|
--border-radius-md: 12px;
|
|
--border-radius-lg: 16px;
|
|
--border-radius-xl: 24px;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container-fluid {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
/* Back Button */
|
|
.back-button {
|
|
background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
box-shadow: var(--shadow-md);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Header Section */
|
|
.user-header {
|
|
background: white;
|
|
border-radius: var(--border-radius-xl);
|
|
box-shadow: var(--shadow-xl);
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.user-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--primary-color), var(--info-color), var(--success-color));
|
|
}
|
|
|
|
.user-info-section {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
|
|
color: white;
|
|
padding: 2.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.user-info-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" stop-color="white" stop-opacity="0.1"/><stop offset="100%" stop-color="white" stop-opacity="0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.user-info-content {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 2rem;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.user-avatar {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.user-details h2 {
|
|
font-size: 1.75rem;
|
|
font-weight: 800;
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
.user-email {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
font-weight: 500;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.response-count {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: var(--border-radius-md);
|
|
backdrop-filter: blur(10px);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.export-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.export-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
color: white;
|
|
text-decoration: none;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Charts Section */
|
|
.charts-section {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-top: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.charts-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.chart-container {
|
|
background: var(--gray-50);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-chart {
|
|
background: white;
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--gray-200);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Timeline/Stepper Design */
|
|
.responses-timeline {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.timeline-header {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-lg);
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.timeline-header h3 {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--gray-800);
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
.timeline-subtitle {
|
|
color: var(--gray-600);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stepper-wrapper {
|
|
position: relative;
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
.stepper-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 2rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: linear-gradient(180deg, var(--primary-color), var(--info-color), var(--success-color));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.stepper-item {
|
|
position: relative;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.step-counter {
|
|
position: absolute;
|
|
left: -3rem;
|
|
top: 1.5rem;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-lg);
|
|
border: 4px solid white;
|
|
z-index: 2;
|
|
}
|
|
|
|
.step-counter i {
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.step-content {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
/* Response Card */
|
|
.response-card {
|
|
background: white;
|
|
border-radius: var(--border-radius-xl);
|
|
box-shadow: var(--shadow-xl);
|
|
overflow: hidden;
|
|
border: 1px solid var(--gray-200);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.response-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-2xl);
|
|
}
|
|
|
|
.response-header {
|
|
background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
|
|
padding: 2rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.response-info {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 2rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.response-details h4 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--gray-800);
|
|
margin: 0 0 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.response-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.meta-item i {
|
|
color: var(--primary-color);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.submission-date {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.question-count {
|
|
color: var(--info-color);
|
|
}
|
|
|
|
.chart-mini {
|
|
width: 200px;
|
|
height: 120px;
|
|
background: white;
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.response-actions {
|
|
background: var(--gray-50);
|
|
padding: 1.5rem 2rem;
|
|
border-top: 1px solid var(--gray-200);
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
box-shadow: var(--shadow-sm);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-pdf {
|
|
background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-pdf:hover {
|
|
background: linear-gradient(135deg, var(--danger-dark) 0%, #b91c1c 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-excel {
|
|
background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-excel:hover {
|
|
background: linear-gradient(135deg, var(--success-dark) 0%, #047857 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-toggle {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-toggle:hover {
|
|
background: linear-gradient(135deg, var(--primary-dark) 0%, #3730a3 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-toggle.expanded {
|
|
background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
|
|
}
|
|
|
|
.btn-toggle.expanded:hover {
|
|
background: linear-gradient(135deg, var(--info-dark) 0%, #0e7490 100%);
|
|
color: white;
|
|
}
|
|
|
|
/* Response Details Table */
|
|
.response-details-section {
|
|
padding: 0;
|
|
background: white;
|
|
}
|
|
|
|
.details-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 0;
|
|
}
|
|
|
|
.details-table th {
|
|
background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
|
|
color: white;
|
|
padding: 1.25rem;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
border: none;
|
|
}
|
|
|
|
.details-table td {
|
|
padding: 1.5rem 1.25rem;
|
|
border-bottom: 1px solid var(--gray-200);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.details-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.details-table tr:hover {
|
|
background: var(--gray-50);
|
|
}
|
|
|
|
.question-cell {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.question-text {
|
|
font-weight: 600;
|
|
color: var(--gray-800);
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.question-type {
|
|
background: var(--gray-100);
|
|
color: var(--gray-600);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Status Indicators */
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.status-answered {
|
|
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
color: #065f46;
|
|
border: 1px solid #34d399;
|
|
}
|
|
|
|
.status-shown {
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
color: #92400e;
|
|
border: 1px solid #fbbf24;
|
|
}
|
|
|
|
.status-skipped {
|
|
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
|
color: #1e40af;
|
|
border: 1px solid #60a5fa;
|
|
}
|
|
|
|
.status-unknown {
|
|
background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
|
|
color: var(--gray-700);
|
|
border: 1px solid var(--gray-300);
|
|
}
|
|
|
|
.status-description {
|
|
font-size: 0.75rem;
|
|
opacity: 0.8;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Response Display */
|
|
.response-display {
|
|
min-width: 250px;
|
|
}
|
|
|
|
.answer-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.answer-badge {
|
|
background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--border-radius-md);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
box-shadow: var(--shadow-sm);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.other-option-badge {
|
|
background: var(--warning-color);
|
|
color: var(--gray-900);
|
|
font-size: 0.7rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.text-response {
|
|
background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
|
|
border: 1px solid var(--gray-200);
|
|
border-radius: var(--border-radius-md);
|
|
padding: 1rem;
|
|
font-weight: 500;
|
|
color: var(--gray-800);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.text-response-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Other Text Response */
|
|
.other-text-response {
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
|
border: 2px solid var(--warning-color);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: 1.25rem;
|
|
margin-top: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.other-text-response::before {
|
|
content: "CUSTOM RESPONSE";
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 20px;
|
|
background: var(--warning-color);
|
|
color: white;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.other-text-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
color: #92400e;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.other-text-content {
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: var(--border-radius-md);
|
|
border-left: 4px solid var(--warning-color);
|
|
color: var(--gray-800);
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.no-response {
|
|
color: var(--gray-500);
|
|
font-style: italic;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
background: var(--gray-50);
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px dashed var(--gray-300);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@@media (max-width: 1024px) {
|
|
.charts-grid
|
|
|
|
{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.user-info-content {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.response-info {
|
|
grid-template-columns: 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
}
|
|
|
|
@@media (max-width: 768px) {
|
|
.container-fluid
|
|
|
|
{
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stepper-wrapper {
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.stepper-wrapper::before {
|
|
left: 1rem;
|
|
}
|
|
|
|
.step-counter {
|
|
left: -2rem;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.step-counter i {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.response-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.action-btn {
|
|
justify-content: center;
|
|
}
|
|
|
|
.export-buttons {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.details-table {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.details-table th,
|
|
.details-table td {
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
|
|
}
|
|
|
|
/* Animations */
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
@@keyframes fadeIn {
|
|
from
|
|
|
|
{
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
}
|
|
|
|
.slide-in {
|
|
animation: slideIn 0.4s ease-out;
|
|
}
|
|
|
|
@@keyframes slideIn {
|
|
from
|
|
|
|
{
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
}
|
|
|
|
.stagger-animation {
|
|
animation: fadeIn 0.6s ease-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.stagger-animation:nth-child(1) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(3) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(4) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(5) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.stagger-animation:nth-child(6) {
|
|
animation-delay: 0.6s;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid">
|
|
<!-- Back Button -->
|
|
<a asp-action="Index" class="back-button fade-in">
|
|
<i class="bi bi-arrow-left"></i>
|
|
Back to List
|
|
</a>
|
|
|
|
<!-- User Header Section -->
|
|
<div class="user-header fade-in">
|
|
<div class="user-info-section">
|
|
<div class="user-info-content">
|
|
<div class="user-avatar">
|
|
@(Model.UserName?.Substring(0, 1).ToUpper() ?? "U")
|
|
</div>
|
|
<div class="user-details">
|
|
<h2>@Model.UserName</h2>
|
|
<p class="user-email">@Model.UserEmail</p>
|
|
<div class="response-count">
|
|
<i class="bi bi-clipboard-data"></i>
|
|
Total Responses: @Model.Responses.Count()
|
|
</div>
|
|
</div>
|
|
<div class="export-buttons">
|
|
<a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="pdf" class="export-btn">
|
|
<i class="bi bi-filetype-pdf"></i>
|
|
PDF Report
|
|
</a>
|
|
<a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="excel" class="export-btn">
|
|
<i class="bi bi-file-excel"></i>
|
|
Excel Report
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="charts-section">
|
|
<div class="charts-grid">
|
|
<div class="chart-container">
|
|
<h4 class="chart-title">Survey Summary</h4>
|
|
<div id="user_survey_summary_chart_div" style="width: 100%; height: 200px;"></div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h4 class="chart-title">Progress Overview</h4>
|
|
<div style="height: 200px; display: flex; align-items: center; justify-content: center; color: var(--gray-500);">
|
|
<i class="bi bi-graph-up" style="font-size: 3rem; margin-bottom: 1rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-chart">
|
|
<h4 class="chart-title">User Progress Timeline</h4>
|
|
<div id="chart_div" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Responses Timeline -->
|
|
<div class="responses-timeline">
|
|
<div class="timeline-header fade-in">
|
|
<h3>Response Timeline</h3>
|
|
<p class="timeline-subtitle">Detailed view of all survey responses and interactions</p>
|
|
</div>
|
|
|
|
<div class="stepper-wrapper">
|
|
@foreach (var response in Model.Responses.Select((r, index) => new { Response = r, Index = index }))
|
|
{
|
|
<div class="stepper-item stagger-animation">
|
|
<div class="step-counter">
|
|
<i class="bi bi-clipboard-check-fill"></i>
|
|
</div>
|
|
<div class="step-content">
|
|
<div class="response-card">
|
|
<!-- Response Header -->
|
|
<div class="response-header">
|
|
<div class="response-info">
|
|
<div class="response-details">
|
|
<h4>
|
|
<i class="bi bi-clipboard-data"></i>
|
|
@response.Response.Questionnaire.Title
|
|
</h4>
|
|
<div class="response-meta">
|
|
<div class="meta-item submission-date">
|
|
<i class="bi bi-calendar-check"></i>
|
|
Submitted: @response.Response.SubmissionDate.ToString("MMMM dd, yyyy 'at' HH:mm")
|
|
</div>
|
|
<div class="meta-item question-count">
|
|
<i class="bi bi-question-circle"></i>
|
|
Questions: @response.Response.Questionnaire.Questions.Count()
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-mini">
|
|
<div id="survey_questions_answers_summary_chart_div_@response.Response.Questionnaire.Id" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Response Actions -->
|
|
<div class="response-actions">
|
|
<a asp-action="GenerateQuestionnairePdfReport" asp-route-questionnaireId="@response.Response.Questionnaire.Id" class="action-btn btn-pdf">
|
|
<i class="bi bi-filetype-pdf"></i>
|
|
PDF Report
|
|
</a>
|
|
<a asp-action="GenerateQuestionnaireExcelReport" asp-route-questionnaireId="@response.Response.Questionnaire.Id" class="action-btn btn-excel">
|
|
<i class="bi bi-file-excel"></i>
|
|
Excel Report
|
|
</a>
|
|
<button class="action-btn btn-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Response.Id">
|
|
<i class="bi bi-eye"></i>
|
|
<span class="toggle-text">View Details</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Collapsible Response Details -->
|
|
<div class="collapse" id="collapseResponse-@response.Response.Id">
|
|
<div class="response-details-section">
|
|
<table class="details-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 30%;">Question</th>
|
|
<th style="width: 25%;">Status</th>
|
|
<th style="width: 45%;">Response</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var question in response.Response.Questionnaire.Questions.OrderBy(q => q.Id))
|
|
{
|
|
var responseDetail = response.Response.ResponseDetails.FirstOrDefault(rd => rd.QuestionId == question.Id);
|
|
|
|
<tr>
|
|
<td class="question-cell">
|
|
<div class="question-text">@question.Text</div>
|
|
<span class="question-type">@question.Type</span>
|
|
</td>
|
|
<td>
|
|
@if (responseDetail != null)
|
|
{
|
|
@switch (responseDetail.Status)
|
|
{
|
|
case ResponseStatus.Answered:
|
|
<div class="status-badge status-answered">
|
|
<i class="bi bi-check-circle-fill"></i>
|
|
<div>
|
|
<div>Answered</div>
|
|
<div class="status-description">Completed successfully</div>
|
|
</div>
|
|
</div>
|
|
break;
|
|
|
|
case ResponseStatus.Shown:
|
|
<div class="status-badge status-shown">
|
|
<i class="bi bi-exclamation-triangle-fill"></i>
|
|
<div>
|
|
<div>Shown</div>
|
|
<div class="status-description">Displayed but not answered</div>
|
|
</div>
|
|
</div>
|
|
break;
|
|
|
|
case ResponseStatus.Skipped:
|
|
<div class="status-badge status-skipped">
|
|
<i class="bi bi-skip-forward-fill"></i>
|
|
<div>
|
|
<div>Skipped</div>
|
|
<div class="status-description">@responseDetail.SkipReason</div>
|
|
</div>
|
|
</div>
|
|
break;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<div class="status-badge status-unknown">
|
|
<i class="bi bi-question-circle-fill"></i>
|
|
<div>
|
|
<div>Unknown</div>
|
|
<div class="status-description">No response data</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</td>
|
|
<td class="response-display">
|
|
@if (responseDetail != null && responseDetail.Status == ResponseStatus.Answered)
|
|
{
|
|
@if (responseDetail.QuestionType == QuestionType.Text || responseDetail.QuestionType == QuestionType.Slider || responseDetail.QuestionType == QuestionType.Open_ended)
|
|
{
|
|
<div class="text-response">
|
|
<div class="text-response-label">Text Response</div>
|
|
@responseDetail.TextResponse
|
|
</div>
|
|
}
|
|
else if (responseDetail.ResponseAnswers.Any())
|
|
{
|
|
<div class="answer-container">
|
|
@foreach (var answer in responseDetail.ResponseAnswers)
|
|
{
|
|
var answerObj = question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId);
|
|
var answerText = answerObj?.Text;
|
|
<span class="answer-badge">
|
|
@answerText
|
|
@if (answerObj?.IsOtherOption == true)
|
|
{
|
|
<span class="other-option-badge">Other</span>
|
|
}
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@* Display "Other" text if available *@
|
|
@if (!string.IsNullOrEmpty(responseDetail.OtherText))
|
|
{
|
|
<div class="other-text-response">
|
|
<div class="other-text-label">
|
|
<i class="bi bi-pencil-square"></i>
|
|
Custom Response:
|
|
</div>
|
|
<div class="other-text-content">
|
|
@responseDetail.OtherText
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<div class="no-response">
|
|
<i class="bi bi-dash-circle"></i>
|
|
No response provided
|
|
</div>
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<!-- Include Bootstrap 5 JS for collapse functionality -->
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
google.charts.load('current', { packages: ['corechart', 'line'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function getDescriptiveValue(sliderValue) {
|
|
if (sliderValue >= 0 && sliderValue <= 10) {
|
|
return 1; // Normal
|
|
} else if (sliderValue > 10 && sliderValue <= 20) {
|
|
return 2; // Better
|
|
} else if (sliderValue > 20 && sliderValue <= 30) {
|
|
return 3; // Good
|
|
} else if (sliderValue > 30 && sliderValue <= 40) {
|
|
return 4; // Very Good
|
|
} else if (sliderValue > 40 && sliderValue <= 50) {
|
|
return 5; // Excellent
|
|
} else if (sliderValue > 50 && sliderValue <= 60) {
|
|
return 6; // Outstanding
|
|
} else if (sliderValue > 60 && sliderValue <= 70) {
|
|
return 7; // Remarkable
|
|
} else if (sliderValue > 70 && sliderValue <= 80) {
|
|
return 8; // Exceptional
|
|
} else if (sliderValue > 80 && sliderValue <= 90) {
|
|
return 9; // Superior
|
|
} else if (sliderValue > 90 && sliderValue <= 100) {
|
|
return 10; // Perfect
|
|
} else {
|
|
return 0; // Unknown
|
|
}
|
|
}
|
|
|
|
function drawChart() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Survey and Submission Date');
|
|
data.addColumn('number', 'Status');
|
|
|
|
var responsesData = [
|
|
@foreach (var response in Model.Responses)
|
|
{
|
|
@foreach (var detail in response.ResponseDetails.Where(d => d.QuestionType == QuestionType.Slider))
|
|
{
|
|
@:['@response.Questionnaire.Title - @response.SubmissionDate.ToString("yyyy-MMMM-dd HH:mm")', getDescriptiveValue(@(detail.TextResponse != null ? int.Parse(detail.TextResponse) : 0))],
|
|
}
|
|
}
|
|
];
|
|
|
|
responsesData.forEach(function (row) {
|
|
data.addRow(row);
|
|
});
|
|
|
|
var options = {
|
|
title: 'User Progress Over Time',
|
|
hAxis: {
|
|
title: 'Questionnaire and Submission Date',
|
|
titleTextStyle: { color: '#475569', fontSize: 12, bold: true }
|
|
},
|
|
vAxis: {
|
|
title: 'Progress Level',
|
|
titleTextStyle: { color: '#475569', fontSize: 12, bold: true },
|
|
ticks: [
|
|
{ v: 0, f: 'Unknown' },
|
|
{ v: 1, f: 'Normal' },
|
|
{ v: 2, f: 'Better' },
|
|
{ v: 3, f: 'Good' },
|
|
{ v: 4, f: 'Very Good' },
|
|
{ v: 5, f: 'Excellent' },
|
|
{ v: 6, f: 'Outstanding' },
|
|
{ v: 7, f: 'Remarkable' },
|
|
{ v: 8, f: 'Exceptional' },
|
|
{ v: 9, f: 'Superior' },
|
|
{ v: 10, f: 'Perfect' }
|
|
]
|
|
},
|
|
titleTextStyle: { color: '#1e293b', fontSize: 16, bold: true },
|
|
backgroundColor: 'transparent',
|
|
colors: ['#6366f1'],
|
|
lineWidth: 3,
|
|
pointSize: 6
|
|
};
|
|
|
|
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
|
|
chart.draw(data, options);
|
|
}
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
google.charts.load('current', { packages: ['corechart', 'bar'] });
|
|
google.charts.setOnLoadCallback(drawUserSurveySummaryChart);
|
|
|
|
function drawUserSurveySummaryChart() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Metric');
|
|
data.addColumn('number', 'Count');
|
|
|
|
var userSurveySummaryData = @Html.Raw(JsonConvert.SerializeObject(
|
|
Model.Responses
|
|
.GroupBy(response => response.UserEmail)
|
|
.Select(g => new
|
|
{
|
|
TotalSurveys = g.Count(),
|
|
TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
|
|
TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
|
|
})
|
|
.FirstOrDefault()
|
|
));
|
|
|
|
if (userSurveySummaryData) {
|
|
data.addRow(['Surveys', userSurveySummaryData.TotalSurveys]);
|
|
data.addRow(['Questions', userSurveySummaryData.TotalQuestions]);
|
|
data.addRow(['Answers', userSurveySummaryData.TotalAnswers]);
|
|
}
|
|
|
|
var options = {
|
|
title: 'Response Summary',
|
|
titleTextStyle: { color: '#1e293b', fontSize: 14, bold: true },
|
|
backgroundColor: 'transparent',
|
|
colors: ['#06b6d4', '#10b981', '#f59e0b'],
|
|
legend: { position: 'none' },
|
|
hAxis: {
|
|
titleTextStyle: { color: '#475569', fontSize: 11 }
|
|
},
|
|
vAxis: {
|
|
titleTextStyle: { color: '#475569', fontSize: 11 }
|
|
}
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById('user_survey_summary_chart_div'));
|
|
chart.draw(data, options);
|
|
}
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
google.charts.load('current', { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawSurveyQuestionsAnswersSummaryCharts);
|
|
|
|
function drawSurveyQuestionsAnswersSummaryCharts() {
|
|
var surveyQuestionsSummaryData = @Html.Raw(JsonConvert.SerializeObject(
|
|
Model.Responses
|
|
.GroupBy(response => response.Questionnaire.Title)
|
|
.Select(g => new
|
|
{
|
|
SurveyTitle = g.Key,
|
|
SurveyId = g.First().Questionnaire.Id,
|
|
TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
|
|
TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
|
|
})
|
|
.ToList()
|
|
));
|
|
|
|
surveyQuestionsSummaryData.forEach(function (row) {
|
|
drawSingleSurveyChart(row.SurveyTitle, row.SurveyId, row.TotalQuestions, row.TotalAnswers);
|
|
});
|
|
}
|
|
|
|
function drawSingleSurveyChart(surveyTitle, surveyId, totalQuestions, totalAnswers) {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Category');
|
|
data.addColumn('number', 'Count');
|
|
|
|
data.addRow(['Questions', totalQuestions]);
|
|
data.addRow(['Answers', totalAnswers]);
|
|
|
|
var options = {
|
|
backgroundColor: 'transparent',
|
|
is3D: false,
|
|
colors: ['#6366f1', '#10b981'],
|
|
legend: {
|
|
position: 'bottom',
|
|
textStyle: { fontSize: 10 }
|
|
},
|
|
chartArea: { width: '90%', height: '70%' }
|
|
};
|
|
|
|
var chart = new google.visualization.PieChart(document.getElementById('survey_questions_answers_summary_chart_div_' + surveyId));
|
|
chart.draw(data, options);
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var collapseElements = document.querySelectorAll('[data-bs-toggle="collapse"]');
|
|
|
|
collapseElements.forEach(function (element) {
|
|
var targetId = element.getAttribute('data-bs-target');
|
|
var targetElement = document.querySelector(targetId);
|
|
var toggleText = element.querySelector('.toggle-text');
|
|
var icon = element.querySelector('i');
|
|
|
|
// Initialize button state
|
|
if (targetElement.classList.contains('show')) {
|
|
toggleText.textContent = 'Hide Details';
|
|
element.classList.add('expanded');
|
|
icon.className = 'bi bi-eye-slash';
|
|
} else {
|
|
toggleText.textContent = 'View Details';
|
|
element.classList.remove('expanded');
|
|
icon.className = 'bi bi-eye';
|
|
}
|
|
|
|
targetElement.addEventListener('shown.bs.collapse', function () {
|
|
toggleText.textContent = 'Hide Details';
|
|
element.classList.add('expanded');
|
|
icon.className = 'bi bi-eye-slash';
|
|
});
|
|
|
|
targetElement.addEventListener('hidden.bs.collapse', function () {
|
|
toggleText.textContent = 'View Details';
|
|
element.classList.remove('expanded');
|
|
icon.className = 'bi bi-eye';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
} |