{"project":{"id":"6I970cB","userId":"ken.ellis@gmail.com","username":null,"userPicture":null,"name":"Skill Proficiency App - Single Page Prototype","visible":true,"contributors":"","githubRepo":null,"forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"assessment.html","content":"\n\n\n \n \n Self-Assessment - Skill Proficiency App\n \n \n\n\n\n
\n
\n Back to Home\n
\n\n
\n
\n
Name: Jack Smith
\n
Email: jack.smith@companybank.com
\n
Role: Senior Analyst
\n
Division: Assurance
\n
Company: Company Bank
\n
\n
\n\n
\n

How it works

\n

Review each skill below and select the proficiency level (Foundational - Expert) that best describes your current capabilities. Refer to the Proficiency Scale for guidance. Once all skills are rated, submit your assessment to receive targeted training recommendations.

\n
\n\n
\n

Proficiency Scale

\n
\n
\n
\n
\n
Skill & Description
\n
Your Rating
\n
\n \n
\n \n
\n \n
\n \n
\n
\n
\n\n \n \n\n"},{"name":"index.html","content":"\n\n\n\n \n \n Skill Proficiency Assessment Prototype\n \n \n\n\n\n\n \n
\n Demo: Functionality of the app will be determined based on role-based access controls inherited\n from a single-sign-on integration (to be developed in future).\n
\n\n
\n

Capability Matrix Tool

\n

Assess your capabilities and discover targeted training.

\n
\n\n
\n
\n \n

Reviewer

\n

Complete your self-assessment to identify your current proficiency levels and receive personalized training\n recommendations.

\n Begin Self-Assessment\n
\n\n\n
\n \n

Manager

\n

Access aggregate reports and analyze the team's overall proficiency metrics across various roles and skills.\n

\n Reporting\n
\n
\n\n \n\n\n"},{"name":"README.md","content":"# Blnq Project\n"},{"name":"reporting.html","content":"\n\n\n \n \n Manager Reporting - Skill Proficiency Assessment\n \n \n\n\n\n \n
\n Manager View: Highly polished export utility for leaders & HR managers.\n
\n
\n
\n
\n \n Back to Hub\n \n

Manager Reporting & Exports

\n

Access, filter, and export assessment reports across Regions, Skills, and Managers.

\n
\n
\n \n Manager Access\n \n
\n
\n
\n\n
\n
\n \n \n
\n

Select Report Category

\n

Choose a reporting perspective below to preview live data and generate custom CSV exports.

\n \n
\n \n
\n
\n \n
\n
\n

Report by Region

\n

Analysis of average skill proficiencies and competency distributions grouped by geographical region (AMER, EMEA, APAC).

\n
\n \n
\n\n \n
\n
\n \n
\n
\n

Report by Skill

\n

Detailed performance index per skill, identifying key strengths, development gaps, and expert counts across the taxonomy.

\n
\n \n
\n\n \n
\n
\n \n
\n
\n

Report by Manager

\n

Team assessment summaries organized by direct managers, highlighting team-level capabilities and target alignments.

\n
\n \n
\n
\n
\n\n \n
\n
\n
\n

Report by Region

\n

Detailed view of self-assessment outputs grouped by office region.

\n
\n
\n
\n \n \n
\n \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n

No matching data found for your search query.

\n
\n
\n\n
\n Showing 0 records\n Table displays a complete preview. CSV export includes all matching metadata.\n
\n
\n\n
\n
\n\n \n\n \n\n\n"},{"name":"results.html","content":"\n\n\n \n \n Assessment Results - Skill Proficiency Assessment\n \n \n\n\n\n
\n
\n
\n \n Back to Hub\n \n

Your Self-Assessment Results

\n

Individual proficiency review and development analysis.

\n
\n
\n \n
\n
\n
\n\n
\n
\n\n \n
\n
\n \n
\n

Assessment Completed Successfully

\n

\n Thank you for completing your proficiency self-assessment. Your responses have been saved locally.\n

\n
\n\n \n
\n

Summary

\n
\n \n
\n
\n\n \n
\n \n
\n\n \n
\n

All Skills Breakdown

\n

Detailed scores for every skill, organized by category.

\n
\n \n
\n
\n\n \n
\n \n
\n\n
\n
\n\n \n\n \n\n\n"}],"folders":[{"folder":"css","files":[{"name":"styles.css","content":":root {\n --color-red: #D32F2F;\n --color-red-hover: #B71C1C;\n --color-red-bg: #FFEBEE;\n --color-green: #2E7D32;\n --color-green-light: #E8F5E9;\n --color-blue: #1565C0;\n --color-blue-light: #E3F2FD;\n --color-white: #FFFFFF;\n --color-gray-light: #F5F5F5;\n --color-gray-medium: #E0E0E0;\n --color-gray-dark: #616161;\n --color-text-dark: #212121;\n --color-text: #212121;\n --color-bg-light: #FAFAFA;\n --radius-sm: 6px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n}\n\nbody {\n background-color: var(--color-gray-light);\n color: var(--color-text-dark);\n font-family: var(--font-family);\n margin: 0;\n padding: 0;\n line-height: 1.6;\n}\n\n.demo-notice {\n background-color: var(--color-red);\n color: var(--color-white);\n padding: 0.75rem 1rem;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 500;\n}\n\n.demo-notice strong {\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-right: 0.5rem;\n}\n\nheader {\n background-color: var(--color-white);\n padding: 3rem 1rem;\n text-align: center;\n border-bottom: 1px solid var(--color-gray-medium);\n}\n\nheader h1 {\n margin: 0 0 0.5rem 0;\n color: var(--color-text-dark);\n}\n\nheader p {\n color: #666;\n margin: 0;\n font-size: 1.125rem;\n}\n\n.container {\n max-width: 1100px;\n margin: 4rem auto;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.card {\n background-color: var(--color-white);\n border: 1px solid var(--color-gray-medium);\n border-radius: 8px;\n padding: 2.5rem 2rem;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n}\n\n.card h2 {\n margin-top: 0;\n margin-bottom: 1rem;\n font-size: 1.5rem;\n}\n\n.card p {\n color: #555;\n margin-bottom: 2rem;\n}\n\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-red);\n color: var(--color-white);\n padding: 0.75rem 1.5rem;\n border-radius: 4px;\n text-decoration: none;\n font-weight: 600;\n border: none;\n cursor: pointer;\n transition: background-color 0.2s ease;\n width: 100%;\n max-width: 250px;\n}\n\n.btn:hover {\n background-color: var(--color-red-hover);\n}\n\n/* Assessment Page Styles */\n.top-nav {\n margin-bottom: 1.5rem;\n}\n\n.back-link {\n display: inline-flex;\n align-items: center;\n color: var(--color-red);\n text-decoration: none;\n font-weight: 500;\n font-size: 0.95rem;\n}\n\n.back-link i {\n width: 18px;\n height: 18px;\n margin-right: 0.5rem;\n}\n\n.back-link:hover {\n text-decoration: underline;\n}\n.assessment-container {\n max-width: 1000px;\n margin: 3rem auto;\n padding: 0 1rem;\n}\n\n.legend-section {\n background-color: var(--color-white);\n padding: 2rem;\n border-radius: 8px;\n border: 1px solid var(--color-gray-medium);\n margin-bottom: 3rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.03);\n}\n\n.legend-section h2 {\n margin-top: 0;\n margin-bottom: 1.5rem;\n font-size: 1.25rem;\n border-bottom: 2px solid var(--color-red);\n display: inline-block;\n padding-bottom: 0.5rem;\n}\n\n.scale-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n}\n\n.scale-card {\n background-color: var(--color-gray-light);\n padding: 1rem;\n border-radius: 6px;\n border-left: 4px solid var(--color-red);\n}\n\n.scale-level {\n font-weight: bold;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n color: var(--color-text-dark);\n}\n\n.scale-desc {\n font-size: 0.9rem;\n color: #444;\n}\n\n.assessment-form {\n background-color: var(--color-white);\n border: 1px solid var(--color-gray-medium);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n}\n\n.form-header {\n display: flex;\n background-color: var(--color-text-dark);\n color: var(--color-white);\n padding: 1rem 2rem;\n font-weight: 600;\n}\n\n.fh-left {\n flex: 1;\n}\n\n.fh-right {\n width: 250px;\n text-align: center;\n}\n\n.skills-list {\n display: flex;\n flex-direction: column;\n}\n\n.skill-row {\n display: flex;\n flex-direction: column;\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--color-gray-medium);\n gap: 1.5rem;\n}\n\n.skill-row:last-child {\n border-bottom: none;\n}\n\n.skill-info {\n flex: 1;\n}\n\n.skill-options {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.skill-info h3 {\n margin: 0 0 0.5rem 0;\n font-size: 1.1rem;\n color: var(--color-red);\n}\n\n.skill-info p {\n margin: 0;\n font-size: 0.95rem;\n color: #555;\n}\n\n.skill-rating {\n width: 250px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.radio-label {\n display: none;\n}\n\n.radio-custom .level-name {\n font-size: 1.125rem;\n font-weight: 700;\n color: var(--color-gray-dark);\n margin-bottom: 0.25rem;\n display: block;\n}\n.user-info-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.user-info-grid div {\n display: flex;\n align-items: center;\n font-size: 0.95rem;\n color: var(--color-text-dark);\n}\n\n.user-info-grid i {\n width: 18px;\n height: 18px;\n margin-right: 0.5rem;\n color: var(--color-red);\n}\n\n.user-info-grid strong {\n margin-right: 0.25rem;\n}\n\n.instructions-section {\n background-color: var(--color-white);\n padding: 2rem;\n border-radius: 8px;\n border: 1px solid var(--color-gray-medium);\n margin-bottom: 3rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.03);\n}\n\n.instructions-section h2 {\n margin-top: 0;\n margin-bottom: 1rem;\n font-size: 1.25rem;\n color: var(--color-text-dark);\n}\n\n.instructions-section p {\n margin: 0;\n color: #444;\n}\n\n/* Category Headers in Form */\n.category-header {\n background-color: var(--color-gray-light);\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--color-gray-medium);\n border-top: 4px solid var(--color-red);\n}\n\n.category-header:first-child {\n border-top: none; /* Let the form container border handle the top */\n}\n\n.category-header h2 {\n margin: 0 0 0.5rem 0;\n font-size: 1.25rem;\n color: var(--color-text-dark);\n}\n\n.category-header p {\n margin: 0;\n font-size: 0.95rem;\n color: #555;\n}\n\n.subcategory-header {\n background-color: var(--color-white);\n padding: 1.25rem 2rem;\n border-bottom: 1px solid var(--color-gray-medium);\n border-left: 4px solid var(--color-gray-medium);\n}\n\n.subcategory-header h4 {\n margin: 0 0 0.25rem 0;\n font-size: 1.1rem;\n color: var(--color-text-dark);\n}\n\n.subcategory-header p {\n margin: 0;\n font-size: 0.9rem;\n color: #666;\n}\n\n/* Results Page Styles */\n.results-group {\n background-color: var(--color-white);\n border: 1px solid var(--color-gray-medium);\n border-radius: 8px;\n margin-bottom: 2rem;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n}\n\n.gaps-group {\n border-top: 4px solid var(--color-red);\n}\n\n.met-group {\n border-top: 4px solid #4CAF50;\n}\n\n.success-group {\n padding: 3rem 2rem;\n text-align: center;\n border-top: 4px solid #4CAF50;\n}\n\n.group-title {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 1.5rem 2rem;\n font-size: 1.25rem;\n color: var(--color-text-dark);\n border-bottom: 1px solid var(--color-gray-medium);\n background-color: var(--color-gray-light);\n}\n\n.group-title i {\n margin-right: 0.75rem;\n width: 24px;\n height: 24px;\n}\n\n.icon-red {\n color: var(--color-red);\n}\n\n.group-desc {\n margin: 0;\n padding: 1rem 2rem;\n color: #555;\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-gray-medium);\n}\n\n.result-card {\n display: flex;\n padding: 1.5rem 2rem;\n border-bottom: 1px solid var(--color-gray-medium);\n}\n\n.result-card:last-child {\n border-bottom: none;\n}\n\n.result-info {\n flex: 1;\n padding-right: 2rem;\n}\n\n.result-info h3 {\n margin: 0 0 0.5rem 0;\n color: var(--color-text-dark);\n}\n\n.result-info p {\n margin: 0 0 1rem 0;\n color: #555;\n font-size: 0.95rem;\n}\n\n.training-link-wrap {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.95rem;\n background-color: #fff8f8;\n padding: 0.75rem 1rem;\n border-radius: 4px;\n border-left: 3px solid var(--color-red);\n}\n\n.training-link {\n display: inline-flex;\n align-items: center;\n color: var(--color-red);\n font-weight: 600;\n text-decoration: none;\n}\n\n.training-link:hover {\n text-decoration: underline;\n}\n\n.training-link i {\n width: 16px;\n height: 16px;\n margin-right: 0.4rem;\n}\n\n.result-scores {\n display: flex;\n gap: 1rem;\n align-items: center;\n}\n\n.score-box {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-width: 120px;\n padding: 1rem;\n border-radius: 8px;\n border: 1px solid var(--color-gray-medium);\n background-color: var(--color-gray-light);\n}\n\n.user-score {\n background-color: #ffebee;\n border-color: #ffcdd2;\n}\n\n.score-label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #666;\n margin-bottom: 0.25rem;\n}\n\n.score-value {\n font-size: 1.1rem;\n font-weight: bold;\n color: var(--color-text-dark);\n text-align: center;\n}\n\n.user-score .score-value {\n color: var(--color-red);\n}\n\n.compact-list .result-card {\n padding: 1rem 2rem;\n}\n \n.radio-option {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n margin: 0;\n flex: 1;\n}\n\n.radio-option input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n}\n\n.radio-btn {\n width: 100%;\n padding: 0.5rem 1rem;\n background-color: var(--color-gray-light);\n border: 2px solid var(--color-gray-medium);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-weight: 500;\n font-size: 0.9rem;\n color: #555;\n transition: all 0.2s ease;\n}\n\n.radio-option:hover .radio-btn {\n border-color: var(--color-red-hover);\n background-color: #fff;\n}\n\n.radio-option input:checked ~ .radio-btn {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: white;\n}\n\n.radio-btn.is-target {\n border-color: var(--color-red);\n color: white;\n}\n\n/* ==========================================================================\n DEVELOPMENT AREAS (below-target skills)\n ========================================================================== */\n.dev-item {\n padding: 1.25rem 1.5rem;\n border: 1px solid var(--color-gray-lighter);\n border-radius: var(--radius-md);\n background: var(--color-gray-lightest);\n margin-bottom: 0.75rem;\n}\n\n.dev-item-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-bottom: 0.5rem;\n flex-wrap: wrap;\n}\n\n.dev-badge {\n display: inline-block;\n padding: 0.2rem 0.6rem;\n border-radius: var(--radius-sm);\n font-size: 0.75rem;\n font-weight: 600;\n background: var(--color-red-light);\n color: var(--color-red);\n}\n\n.dev-item-desc {\n color: var(--color-gray-dark);\n font-size: 0.9rem;\n margin: 0 0 0.75rem 0;\n}\n\n.dev-all-pass {\n display: flex;\n align-items: center;\n background: var(--color-green-light);\n color: var(--color-green-dark, #1a5c2a);\n}\n\n/* ==========================================================================\n MANAGER REPORTING & EXPORTS\n ========================================================================== */\n\n.manager-reporting-page {\n background-color: var(--color-bg-light);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.reporting-container {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1.5rem;\n width: 100%;\n flex: 1;\n}\n\n.report-selection-section {\n margin-bottom: 3rem;\n}\n\n.section-desc {\n color: var(--color-gray-dark);\n margin-top: 0.5rem;\n margin-bottom: 1.5rem;\n font-size: 1rem;\n}\n\n.report-cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 1.5rem;\n}\n\n.report-card {\n background: white;\n border: 1px solid var(--color-border);\n border-radius: 8px;\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n position: relative;\n overflow: hidden;\n}\n\n.report-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 4px;\n height: 100%;\n background: transparent;\n transition: background 0.2s ease;\n}\n\n.report-card.active {\n border-color: var(--color-red);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\n}\n\n.report-card.active::before {\n background: var(--color-red);\n}\n\n.card-icon-wrapper {\n background: #fdf2f2;\n color: var(--color-red);\n width: 48px;\n height: 48px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1rem;\n}\n\n.report-card.active .card-icon-wrapper {\n background: var(--color-red);\n color: white;\n}\n\n.card-icon-wrapper i {\n width: 24px;\n height: 24px;\n}\n\n.card-info h3 {\n font-size: 1.2rem;\n font-weight: 600;\n color: var(--color-text-dark);\n margin-bottom: 0.5rem;\n}\n\n.card-info p {\n font-size: 0.9rem;\n color: var(--color-gray-dark);\n line-height: 1.5;\n margin-bottom: 1.5rem;\n}\n\n.card-action {\n margin-top: auto;\n width: 100%;\n justify-content: center;\n}\n\n.report-card.active .card-action {\n background: var(--color-red);\n color: white;\n border-color: var(--color-red);\n}\n\n/* Report Preview Area */\n.report-preview-section {\n background: white;\n border: 1px solid var(--color-border);\n border-radius: 8px;\n padding: 2rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.02);\n}\n\n.preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1.5rem;\n margin-bottom: 2rem;\n border-bottom: 1px solid var(--color-border);\n padding-bottom: 1.5rem;\n}\n\n.preview-title-block h2 {\n font-size: 1.5rem;\n color: var(--color-text-dark);\n margin-bottom: 0.25rem;\n}\n\n.preview-title-block p {\n color: var(--color-gray-dark);\n font-size: 0.9rem;\n}\n\n.preview-actions {\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.search-box {\n position: relative;\n}\n\n.search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--color-gray-dark);\n width: 18px;\n height: 18px;\n pointer-events: none;\n}\n\n.search-box input {\n padding: 0.6rem 1rem 0.6rem 2.2rem;\n border: 1px solid var(--color-border);\n border-radius: 6px;\n font-size: 0.9rem;\n width: 240px;\n transition: all 0.2s ease;\n}\n\n.search-box input:focus {\n outline: none;\n border-color: var(--color-red);\n box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);\n}\n\n/* Table styling */\n.preview-table-wrapper {\n overflow-x: auto;\n border: 1px solid var(--color-border);\n border-radius: 6px;\n margin-bottom: 1.5rem;\n background: #fdfdfd;\n}\n\n.preview-table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n font-size: 0.9rem;\n}\n\n.preview-table th {\n background: #f5f5f5;\n color: var(--color-text-dark);\n font-weight: 600;\n padding: 1rem;\n border-bottom: 2px solid var(--color-border);\n white-space: nowrap;\n}\n\n.preview-table td {\n padding: 1rem;\n border-bottom: 1px solid var(--color-border);\n color: #444;\n}\n\n.preview-table tr:last-child td {\n border-bottom: none;\n}\n\n.preview-table tr:hover td {\n background: #fafafa;\n}\n\n.no-results-message {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 3rem 1.5rem;\n color: var(--color-gray-dark);\n}\n\n.no-results-message i {\n width: 48px;\n height: 48px;\n margin-bottom: 1rem;\n stroke-width: 1.5;\n}\n\n.no-results-message.hidden {\n display: none !important;\n}\n\n/* ==========================================================================\n RESULTS: Score Category & Skills\n ========================================================================== */\n\n.score-category {\n margin-bottom: 2rem;\n}\n\n.score-category__header {\n margin-bottom: 1rem;\n}\n\n.score-category__header h3 {\n margin: 0 0 0.25rem 0;\n font-size: 1.15rem;\n}\n\n.score-category__desc {\n display: block;\n font-size: 0.85rem;\n color: var(--color-gray-dark);\n margin-bottom: 0.5rem;\n}\n\n.score-category__skills {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.score-subcategory {\n padding-left: 1rem;\n border-left: 3px solid var(--color-gray-light);\n}\n\n.score-subcategory__name {\n margin: 0 0 0.25rem 0;\n font-size: 0.95rem;\n font-weight: 600;\n}\n\n.score-subcategory__desc {\n font-size: 0.8rem;\n color: var(--color-gray-dark);\n margin: 0 0 0.75rem 0;\n}\n\n.score-skill {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding: 0.6rem 0.75rem;\n border-radius: var(--radius-sm);\n background: var(--color-bg-light);\n border: 1px solid var(--color-gray-light);\n}\n\n.score-skill--below {\n border-color: var(--color-red);\n background: var(--color-red-bg);\n}\n\n.score-skill__info {\n display: flex;\n flex-direction: column;\n gap: 0.15rem;\n min-width: 0;\n}\n\n.score-skill__name {\n font-weight: 600;\n font-size: 0.9rem;\n}\n\n.score-skill__desc {\n font-size: 0.78rem;\n color: var(--color-gray-dark);\n line-height: 1.3;\n}\n\n.score-skill__result {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n flex-shrink: 0;\n}\n\n.score-skill__level {\n font-size: 0.85rem;\n font-weight: 600;\n white-space: nowrap;\n}\n\n.score-skill__alert {\n width: 16px;\n height: 16px;\n color: var(--color-red);\n flex-shrink: 0;\n}\n\n.text-danger {\n color: var(--color-red) !important;\n}\n\n.text-success {\n color: var(--color-green) !important;\n}\n\n/* ==========================================================================\n RESULTS: Below Expectation Section\n ========================================================================== */\n\n.below-expectation__header {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n margin-bottom: 1.5rem;\n}\n\n.below-expectation__header-icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n border-radius: var(--radius-sm);\n background: var(--color-red-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--color-red);\n}\n\n.below-expectation__header h3 {\n margin: 0 0 0.25rem 0;\n font-size: 1.1rem;\n color: var(--color-red);\n}\n\n.below-expectation__header p {\n margin: 0;\n font-size: 0.85rem;\n color: var(--color-gray-dark);\n}\n\n.below-expectation__list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.below-expectation__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding: 0.75rem 1rem;\n background: var(--color-bg-light);\n border: 1px solid var(--color-gray-light);\n border-left: 4px solid var(--color-red);\n border-radius: var(--radius-sm);\n}\n\n.below-expectation__item-info {\n display: flex;\n flex-direction: column;\n gap: 0.2rem;\n min-width: 0;\n}\n\n.below-expectation__item-name {\n font-weight: 600;\n font-size: 0.95rem;\n}\n\n.below-expectation__item-meta {\n font-size: 0.78rem;\n color: var(--color-gray-dark);\n}\n\n.below-expectation__item-score {\n font-size: 0.8rem;\n color: var(--color-gray-dark);\n}\n\n.below-expectation__item-link {\n flex-shrink: 0;\n text-decoration: none;\n}\n\n.below-expectation__empty {\n text-align: center;\n padding: 2rem;\n}\n\n.below-expectation__empty-icon {\n color: var(--color-green);\n margin-bottom: 0.75rem;\n}\n\n.below-expectation__empty h3 {\n margin: 0 0 0.5rem 0;\n font-size: 1.1rem;\n}\n\n.below-expectation__empty p {\n margin: 0;\n font-size: 0.9rem;\n color: var(--color-gray-dark);\n max-width: 500px;\n margin-inline: auto;\n}\n\n/* ==========================================================================\n RESULTS: Summary Cards\n ========================================================================== */\n\n.summary-stats-grid .summary-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 1.25rem;\n}\n\n.summary-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.75rem;\n}\n\n.summary-icon--role { background: var(--color-blue-light); color: var(--color-blue); }\n.summary-icon--date { background: var(--color-gray-light); color: var(--color-gray-dark); }\n.summary-icon--score { background: var(--color-green-light); color: var(--color-green); }\n.summary-icon--target { background: var(--color-red-bg); color: var(--color-red); }\n\n.summary-details {\n display: flex;\n flex-direction: column;\n gap: 0.15rem;\n}\n\n.summary-value {\n font-weight: 700;\n font-size: 1.1rem;\n color: var(--color-text);\n}\n\n.summary-label {\n font-size: 0.8rem;\n color: var(--color-gray-dark);\n}\n\n/* ==========================================================================\n RESULTS: Actions\n ========================================================================== */\n\n.results-actions {\n display: flex;\n gap: 1rem;\n justify-content: center;\n margin-top: 1.5rem;\n}\n\n.preview-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n font-size: 0.85rem;\n color: var(--color-gray-dark);\n}\n\n.preview-badge {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n background: #f4f6f8;\n padding: 0.4rem 0.8rem;\n border-radius: 4px;\n}\n\n.preview-badge i {\n width: 14px;\n height: 14px;\n}\n\n.role-badge.manager-badge {\n background: #111;\n color: white;\n border: none;\n}\n\n.app-footer-bottom {\n border-top: 1px solid var(--color-border);\n background: white;\n padding: 1.5rem 0;\n text-align: center;\n font-size: 0.85rem;\n color: var(--color-gray-dark);\n margin-top: auto;\n}\n"}],"folders":[]},{"folder":"js","files":[{"name":"assessment.js","content":"import { scale, skills, categories, subcategories } from './data.js';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const urlParams = new URLSearchParams(window.location.search);\n const roleParam = urlParams.get('role');\n \n // Default to reviewer if accessed directly\n const role = roleParam === 'review-lead' ? 'Review Lead' : 'Reviewer';\n const roleKey = role === 'Review Lead' ? 'targetLead' : 'targetReviewer';\n \n // Set Demo Persona\n if (role === 'Review Lead') {\n document.getElementById('demo-name').textContent = 'Jane Doe';\n document.getElementById('demo-email').textContent = 'jane.doe@companybank.com';\n document.getElementById('demo-title').textContent = 'Review Lead';\n } else {\n document.getElementById('demo-name').textContent = 'Jack Smith';\n document.getElementById('demo-email').textContent = 'jack.smith@companybank.com';\n document.getElementById('demo-title').textContent = 'Senior Analyst';\n }\n \n // Render Scale Legend\n const legendContainer = document.getElementById('scale-legend');\n scale.forEach(s => {\n const card = document.createElement('div');\n card.className = 'scale-card';\n card.innerHTML = `\n
${s.name}
\n
${s.desc}
\n `;\n legendContainer.appendChild(card);\n });\n \n // Helper to render a single skill row\n const renderSkillRow = (skill, container) => {\n const row = document.createElement('div');\n row.className = 'skill-row';\n \n const infoCol = document.createElement('div');\n infoCol.className = 'skill-info';\n infoCol.innerHTML = `\n

${skill.name}

\n

${skill.desc}

\n `;\n \n const optionsCol = document.createElement('div');\n optionsCol.className = 'skill-options';\n \n let optionsHtml = '';\n scale.forEach(s => {\n optionsHtml += `\n \n `;\n });\n \n optionsCol.innerHTML = optionsHtml;\n \n row.appendChild(infoCol);\n row.appendChild(optionsCol);\n container.appendChild(row);\n };\n\n // Group skills logically\n const skillsContainer = document.getElementById('skills-container');\n\n categories.forEach(category => {\n // Render Category Header\n const catSection = document.createElement('div');\n catSection.className = 'category-section';\n catSection.innerHTML = `

${category.name}

`;\n \n // Check if category has subcategories\n const catSkills = skills.filter(s => s.category === category.id);\n const hasSubcats = catSkills.some(s => s.subcategoryId);\n \n if (hasSubcats) {\n // Group by subcategory\n const subcatsInCat = [...new Set(catSkills.map(s => s.subcategoryId))].filter(Boolean);\n \n subcatsInCat.forEach(subcatId => {\n const subcat = subcategories.find(sc => sc.id === subcatId);\n if (subcat) {\n const subcatDiv = document.createElement('div');\n subcatDiv.className = 'subcategory-section';\n subcatDiv.innerHTML = `\n
\n

${subcat.name}

\n

${subcat.desc}

\n
\n `;\n \n const subcatSkills = catSkills.filter(s => s.subcategoryId === subcatId);\n subcatSkills.forEach(skill => renderSkillRow(skill, subcatDiv));\n \n catSection.appendChild(subcatDiv);\n }\n });\n \n // Skills without subcategory in this category\n const noSubcatSkills = catSkills.filter(s => !s.subcategoryId);\n if (noSubcatSkills.length > 0) {\n noSubcatSkills.forEach(skill => renderSkillRow(skill, catSection));\n }\n \n } else {\n // Just render skills directly under category\n catSkills.forEach(skill => renderSkillRow(skill, catSection));\n }\n \n skillsContainer.appendChild(catSection);\n });\n\n // Handle Submission\n const form = document.getElementById('assessment-form');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const formData = new FormData(form);\n const results = {};\n let allAnswered = true;\n \n skills.forEach(skill => {\n const score = formData.get(skill.id);\n if (!score) {\n allAnswered = false;\n } else {\n const catObj = categories.find(c => c.id === skill.category);\n results[skill.id] = {\n skillName: skill.name,\n category: catObj ? catObj.name : skill.category,\n score: parseInt(score, 10),\n target: skill[roleKey]\n };\n }\n });\n \n if (!allAnswered) {\n alert('Please select a proficiency level for all skills before submitting.');\n return;\n }\n \n const submissionData = {\n role: role,\n date: new Date().toISOString(),\n results: results\n };\n \n localStorage.setItem('latestAssessment', JSON.stringify(submissionData));\n window.location.href = 'results.html';\n });\n\n if (window.lucide) {\n window.lucide.createIcons();\n }\n});"},{"name":"data.js","content":"export const scale = [\n { level: 1, name: 'Foundational', desc: 'You understand the basic concepts and terminology. You can complete straightforward tasks using guidance, templates, or examples.' },\n { level: 2, name: 'Developing', desc: 'You can apply the skill independently in common situations. You use standard methods and can resolve routine issues.' },\n { level: 3, name: 'Proficient', desc: 'You apply the skill confidently across a broad range of situations, including moderately complex work.' },\n { level: 4, name: 'Expert', desc: 'You apply the skill in complex, ambiguous, or high-risk situations and set a strong standard for others.' }\n];\n\nexport const categories = [\n { id: 'technical', name: 'Technical Skills', desc: 'Specialized knowledge and methods used to assess risks, perform reviews, and apply analytical tools in assurance work.' },\n { id: 'human', name: 'Human Excellence', desc: 'Personal attributes and work habits that support sound judgment, collaboration, communication, and effective execution.' },\n { id: 'leadership', name: 'Leadership Skills', desc: 'Capabilities used to guide people, influence outcomes, and align decisions with long-term organizational goals.' }\n];\n\nexport const subcategories = [\n { id: 'review_methodology', categoryId: 'technical', name: 'Review Methodology', desc: 'The structured approach used to plan, execute, document, and report a review or assurance engagement.' },\n { id: 'risk_taxonomy', categoryId: 'technical', name: 'Understanding Risk Taxonomy', desc: 'Knowledge of risk categories and how different risk types are defined, organized, and related.' },\n { id: 'risk_mgmt', categoryId: 'technical', name: 'Principles of Risk Management', desc: 'Core concepts for identifying, assessing, monitoring, and responding to risk in a controlled way.' },\n { id: 'assessment_analytics', categoryId: 'technical', name: 'Assessment and Analytics', desc: 'The use of evaluation techniques and data analysis to identify issues, patterns, and evidence-based insights.' },\n { id: 'language', categoryId: 'technical', name: 'Language Skills', desc: 'Fluency in a language in addition to English.' }\n];\n\nexport const skills = [\n // --- TECHNICAL SKILLS ---\n\n // Review Methodology\n { id: 'planning', category: 'technical', subcategoryId: 'review_methodology', name: 'Planning & Scoping', desc: 'Defining objectives, risks, coverage, and resources for a review before execution begins.', trainingUrl: '/training/planning-scoping' },\n { id: 'fieldwork', category: 'technical', subcategoryId: 'review_methodology', name: 'Fieldwork', desc: 'The execution phase of a review where evidence is gathered, tested, and analyzed.', trainingUrl: '/training/fieldwork' },\n { id: 'reporting', category: 'technical', subcategoryId: 'review_methodology', name: 'Reporting', desc: 'The process of summarizing findings, conclusions, and recommendations in a clear and useful format.', trainingUrl: '/training/reporting' },\n { id: 'quality_control', category: 'technical', subcategoryId: 'review_methodology', name: 'Quality Control', desc: 'Maintaining high standards of accuracy, consistency, and completeness throughout the work process.', trainingUrl: '/training/quality-control' },\n\n // Understanding Risk Taxonomy\n { id: 'resilience_risk', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Resilience Risk', desc: 'Knowledge of risks that could disrupt an organization\\u2019s ability to continue critical operations.', trainingUrl: '/training/resilience-risk' },\n { id: 'reg_compliance', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Regulatory Compliance', desc: 'Understanding and assessing adherence to laws, regulations, and internal compliance requirements.', trainingUrl: '/training/regulatory-compliance' },\n { id: 'financial_crime', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Financial Crime', desc: 'Knowledge of risks and controls related to fraud, money laundering, bribery, and other illicit activity.', trainingUrl: '/training/financial-crime' },\n { id: 'wholesale_credit', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Wholesale Credit', desc: 'Understanding credit risk associated with lending and exposures to corporate or institutional clients.', trainingUrl: '/training/wholesale-credit' },\n { id: 'treasury', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Treasury', desc: 'Knowledge of risks and activities involving liquidity, funding, capital, and balance sheet management.', trainingUrl: '/training/treasury' },\n { id: 'traded_risk', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Traded Risk', desc: 'Understanding risks arising from market-facing positions such as interest rate, foreign exchange, or trading exposures.', trainingUrl: '/training/traded-risk' },\n { id: 'strategic', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Strategic', desc: 'Knowledge of risks and decisions that affect long-term direction, competitiveness, and business performance.', trainingUrl: '/training/strategic' },\n { id: 'retail_credit', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Retail Credit', desc: 'Understanding credit risk associated with consumer lending products and retail customer portfolios.', trainingUrl: '/training/retail-credit' },\n { id: 'people', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'People', desc: 'Knowledge of workforce-related risks, including culture, conduct, capability, and talent management.', trainingUrl: '/training/people' },\n { id: 'model', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Model', desc: 'Understanding risks related to the design, use, validation, and governance of quantitative models.', trainingUrl: '/training/model' },\n { id: 'legal', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Legal', desc: 'Knowledge of legal risks, obligations, and exposures arising from contracts, disputes, or regulatory matters.', trainingUrl: '/training/legal' },\n { id: 'fin_reporting_tax', category: 'technical', subcategoryId: 'risk_taxonomy', name: 'Financial Reporting / Tax', desc: 'Understanding risks related to financial statements, accounting treatments, and tax compliance.', trainingUrl: '/training/financial-reporting-tax' },\n\n // Principles of Risk Management\n { id: 'risk_analysis', category: 'technical', subcategoryId: 'risk_mgmt', name: 'Risk Analysis', desc: 'The evaluation of risk likelihood, impact, drivers, and control effectiveness to support decisions.', trainingUrl: '/training/risk-analysis' },\n\n // Assessment and Analytics\n { id: 'issue_id', category: 'technical', subcategoryId: 'assessment_analytics', name: 'Issue Identification', desc: 'The ability to detect control gaps, weaknesses, or emerging concerns from evidence and analysis.', trainingUrl: '/training/issue-identification' },\n { id: 'analytics_testing', category: 'technical', subcategoryId: 'assessment_analytics', name: 'Analytics in Testing', desc: 'Applying data analysis techniques to improve the depth, efficiency, and precision of testing.', trainingUrl: '/training/analytics-testing' },\n { id: 'ai_assurance', category: 'technical', subcategoryId: 'assessment_analytics', name: 'AI in Assurance', desc: 'The use and evaluation of artificial intelligence tools and risks within assurance activities.', trainingUrl: '/training/ai-assurance' },\n\n // Language Skills (Assessed directly)\n { id: 'language_skills', category: 'technical', subcategoryId: 'language', name: 'Language Skills', desc: 'Fluency in a language in addition to English.', trainingUrl: '/training/language-skills' },\n\n // --- HUMAN EXCELLENCE ---\n { id: 'effective_writing', category: 'human', name: 'Effective Writing', desc: 'Communicating ideas in writing with clarity, structure, and appropriate tone.', trainingUrl: '/training/effective-writing' },\n { id: 'presentation', category: 'human', name: 'Presentation Skills', desc: 'Delivering information verbally in a clear, engaging, and audience-appropriate way.', trainingUrl: '/training/presentation-skills' },\n { id: 'root_cause', category: 'human', name: 'Root Cause Analysis', desc: 'A structured method for identifying the underlying reason an issue occurred.', trainingUrl: '/training/root-cause-analysis' },\n { id: 'resilience', category: 'human', name: 'Resilience', desc: 'The ability to adapt, recover, and continue performing effectively after setbacks or pressure.', trainingUrl: '/training/resilience' },\n { id: 'workload_mgmt', category: 'human', name: 'Workload Management', desc: 'Balancing tasks, capacity, and deadlines to maintain sustainable performance.', trainingUrl: '/training/workload-management' },\n\n // --- LEADERSHIP ---\n { id: 'conflict_res', category: 'leadership', name: 'Conflict Resolution', desc: 'Addressing disagreements constructively to reach understanding or workable solutions.', trainingUrl: '/training/conflict-resolution' },\n { id: 'mentorship', category: 'leadership', name: 'Mentorship & Coaching', desc: 'Helping others grow through guidance, feedback, support, and skill development.', trainingUrl: '/training/mentorship-coaching' },\n { id: 'influence', category: 'leadership', name: 'Influence', desc: 'The ability to shape decisions or behaviors through credibility, persuasion, and relationships.', trainingUrl: '/training/influence' },\n { id: 'cross_functional', category: 'leadership', name: 'Cross-functional Leadership', desc: 'Leading work effectively across teams, disciplines, or business areas with different priorities.', trainingUrl: '/training/cross-functional-leadership' },\n { id: 'systems_thinking', category: 'leadership', name: 'Systems Thinking', desc: 'Understanding how parts of an organization or process interact within a larger whole.', trainingUrl: '/training/systems-thinking' },\n { id: 'enterprise_mindset', category: 'leadership', name: 'Enterprise Mindset', desc: 'Thinking beyond local priorities to act in the best interests of the whole organization.', trainingUrl: '/training/enterprise-mindset' },\n { id: 'foresight', category: 'leadership', name: 'Foresight/Anticipation', desc: 'Recognizing emerging trends, risks, or opportunities before they fully materialize.', trainingUrl: '/training/foresight' }\n];\n"},{"name":"main.js","content":""},{"name":"reporting.js","content":"import { scale, skills, categories, subcategories } from './data.js';\n\n// --- RICH MOCK DATA FOR PROFESSIONAL DEMO ---\nconst mockEmployees = [\n { name: 'Marcus Sterling', role: 'Review Lead', region: 'EMEA', manager: 'Sarah Jenkins', scores: { planning: 4, fieldwork: 3, reporting: 3, quality_control: 3, resilience_risk: 4, reg_compliance: 3, decision_making: 4, effective_writing: 3, prioritisation: 3, mentorship: 3, influence: 3, foresight: 2 } },\n { name: 'Aiko Tanaka', role: 'Reviewer', region: 'APAC', manager: 'David Chen', scores: { planning: 2, fieldwork: 3, reporting: 2, quality_control: 2, reg_compliance: 2, financial_crime: 3, decision_making: 2, effective_writing: 3, presentation: 2, mentorship: 1, eq: 2, influence: 2 } },\n { name: 'Elena Rostova', role: 'Review Lead', region: 'EMEA', manager: 'Sarah Jenkins', scores: { planning: 3, fieldwork: 3, reporting: 4, quality_control: 3, wholesale_credit: 4, treasury: 3, decision_making: 3, effective_writing: 4, root_cause: 3, mentorship: 3, cross_functional: 3, systems_thinking: 3 } },\n { name: 'David Vance', role: 'Reviewer', region: 'AMER', manager: 'Amara Okafor', scores: { planning: 2, fieldwork: 2, reporting: 2, quality_control: 2, resilience_risk: 2, model: 3, decision_making: 2, effective_writing: 2, prioritisation: 3, eq: 2, systems_thinking: 2 } },\n { name: 'Chloe Laurent', role: 'Review Lead', region: 'EMEA', manager: 'Sarah Jenkins', scores: { planning: 3, fieldwork: 3, reporting: 3, quality_control: 4, legal: 4, reg_compliance: 4, decision_making: 3, effective_writing: 3, presentation: 4, mentorship: 4, influence: 3, enterprise_mindset: 3 } },\n { name: 'Siddharth Patel', role: 'Reviewer', region: 'APAC', manager: 'David Chen', scores: { planning: 3, fieldwork: 3, reporting: 2, quality_control: 3, traded_risk: 4, financial_reporting_tax: 3, decision_making: 3, effective_writing: 2, prioritisation: 2, resilience: 3, eq: 3 } },\n { name: 'Gabriela Silva', role: 'Review Lead', region: 'AMER', manager: 'Amara Okafor', scores: { planning: 4, fieldwork: 3, reporting: 3, quality_control: 3, retail_credit: 4, people: 3, decision_making: 4, effective_writing: 3, workload_mgmt: 4, mentorship: 3, cross_functional: 4, enterprise_mindset: 3 } },\n { name: 'Kenji Sato', role: 'Reviewer', region: 'APAC', manager: 'David Chen', scores: { planning: 2, fieldwork: 2, reporting: 2, quality_control: 3, resilience_risk: 3, ai_assurance: 2, decision_making: 2, effective_writing: 3, presentation: 2, conflict_res: 2, systems_thinking: 2 } },\n { name: 'Sarah Jenkins', role: 'Review Lead', region: 'EMEA', manager: 'Director of Assurance', scores: { planning: 4, fieldwork: 4, reporting: 4, quality_control: 4, resilience_risk: 4, reg_compliance: 4, decision_making: 4, effective_writing: 4, presentation: 4, mentorship: 4, influence: 4, foresight: 3 } },\n { name: 'Amara Okafor', role: 'Review Lead', region: 'AMER', manager: 'Director of Assurance', scores: { planning: 4, fieldwork: 3, reporting: 4, quality_control: 4, retail_credit: 4, wholesale_credit: 4, decision_making: 4, effective_writing: 4, workload_mgmt: 4, mentorship: 4, cross_functional: 4, systems_thinking: 4 } }\n];\n\nlet currentReportType = 'region';\nlet reportData = [];\nlet filteredData = [];\n\ndocument.addEventListener('DOMContentLoaded', () => {\n // Load any real assessment submitted by the active user in this session\n loadSessionData();\n \n // Set default report\n setActiveReport('region');\n \n // Initialize Lucide icons\n if (window.lucide) {\n window.lucide.createIcons();\n }\n});\n\n// Helper to load session data from localStorage\nfunction loadSessionData() {\n try {\n const savedAssessment = localStorage.getItem('skill_assessment_submission');\n if (savedAssessment) {\n const data = JSON.parse(savedAssessment);\n if (data && data.responses) {\n // Map user answers to scores\n const userScores = {};\n Object.keys(data.responses).forEach(key => {\n userScores[key] = parseInt(data.responses[key], 10);\n });\n \n // Add to employees list to show live updates!\n mockEmployees.unshift({\n name: data.userName || 'You (Active Session)',\n role: data.role === 'lead' ? 'Review Lead' : 'Reviewer',\n region: data.region || 'EMEA',\n manager: data.managerName || 'Sarah Jenkins',\n scores: userScores\n });\n }\n }\n } catch (e) {\n console.error('Error loading session data:', e);\n }\n}\n\n// Set active report category and generate datasets\nwindow.setActiveReport = function(type) {\n currentReportType = type;\n \n // Update UI Card states\n document.querySelectorAll('.report-card').forEach(card => {\n if (card.dataset.reportType === type) {\n card.classList.add('active');\n } else {\n card.classList.remove('active');\n }\n });\n\n // Clear search input\n const searchInput = document.getElementById('report-search');\n if (searchInput) {\n searchInput.value = '';\n }\n\n // Update headers and generate data\n const title = document.getElementById('active-report-title');\n const desc = document.getElementById('active-report-desc');\n \n if (type === 'region') {\n title.textContent = 'Report by Region';\n desc.textContent = 'Detailed view of self-assessment outputs grouped by office region.';\n generateRegionReport();\n } else if (type === 'skill') {\n title.textContent = 'Report by Skill';\n desc.textContent = 'Detailed performance index per skill, identifying strengths and development gaps.';\n generateSkillReport();\n } else if (type === 'manager') {\n title.textContent = 'Report by Manager';\n desc.textContent = 'Team assessment summaries organized by direct managers.';\n generateManagerReport();\n }\n\n // Initial preview render\n filterReportPreview();\n};\n\n// --- DATA GENERATORS ---\n\nfunction generateRegionReport() {\n reportData = mockEmployees.map(emp => {\n // Categorize scores\n let coreScores = [];\n let softScores = [];\n let leadScores = [];\n let belowCount = 0;\n let meetCount = 0;\n\n skills.forEach(s => {\n const score = emp.scores[s.id];\n if (score !== undefined) {\n // Grouping\n if (s.category === 'technical') coreScores.push(score);\n else if (s.category === 'human') softScores.push(score);\n else if (s.category === 'leadership') leadScores.push(score);\n\n // Gap calculation\n const target = emp.role === 'Review Lead' ? s.targetLead : s.targetReviewer;\n if (score < target) {\n belowCount++;\n } else {\n meetCount++;\n }\n }\n });\n\n const avgCore = coreScores.length ? (coreScores.reduce((a,b)=>a+b, 0) / coreScores.length).toFixed(1) : 'N/A';\n const avgSoft = softScores.length ? (softScores.reduce((a,b)=>a+b, 0) / softScores.length).toFixed(1) : 'N/A';\n const avgLead = leadScores.length ? (leadScores.reduce((a,b)=>a+b, 0) / leadScores.length).toFixed(1) : 'N/A';\n\n return {\n 'Employee Name': emp.name,\n 'Role': emp.role,\n 'Region': emp.region,\n 'Direct Manager': emp.manager,\n 'Avg Technical': avgCore,\n 'Avg Human Excellence': avgSoft,\n 'Avg Leadership': avgLead,\n 'Skills Below Target': belowCount,\n 'Skills At/Above Target': meetCount\n };\n });\n}\n\nfunction generateSkillReport() {\n reportData = skills.map(s => {\n const ratings = [];\n let expertCount = 0;\n let reviewerGapSum = 0;\n let reviewerCount = 0;\n let leadGapSum = 0;\n let leadCount = 0;\n\n mockEmployees.forEach(emp => {\n const score = emp.scores[s.id];\n if (score !== undefined) {\n ratings.push(score);\n if (score === 4) expertCount++;\n\n if (emp.role === 'Reviewer') {\n reviewerGapSum += (score - s.targetReviewer);\n reviewerCount++;\n } else {\n leadGapSum += (score - s.targetLead);\n leadCount++;\n }\n }\n });\n\n const avg = ratings.length ? (ratings.reduce((a,b)=>a+b,0)/ratings.length).toFixed(1) : 'N/A';\n const revGap = reviewerCount ? (reviewerGapSum/reviewerCount).toFixed(1) : 'N/A';\n const leadGap = leadCount ? (leadGapSum/leadCount).toFixed(1) : 'N/A';\n const pctProficient = ratings.length ? Math.round((ratings.filter(r => r >= 3).length / ratings.length) * 100) + '%' : '0%';\n\n // Find category name\n const catObj = categories.find(c => c.id === s.category);\n const catName = catObj ? catObj.name : s.category;\n\n // Find subcategory name\n const subcatObj = subcategories.find(sub => sub.id === s.subcategoryId);\n const subcatName = subcatObj ? subcatObj.name : 'N/A';\n\n return {\n 'Category': catName,\n 'Subcategory': subcatName,\n 'Skill Name': s.name,\n 'Overall Avg Score': avg,\n 'Target (Reviewer)': s.targetReviewer,\n 'Target (Lead)': s.targetLead,\n 'Avg Reviewer Gap': revGap,\n 'Avg Lead Gap': leadGap,\n '% Proficient/Expert': pctProficient,\n 'Expert Count': expertCount\n };\n });\n}\n\nfunction generateManagerReport() {\n reportData = mockEmployees.map(emp => {\n const scoresArray = Object.values(emp.scores);\n const avgScore = scoresArray.length ? (scoresArray.reduce((a,b)=>a+b, 0) / scoresArray.length).toFixed(1) : 'N/A';\n \n // Find biggest development areas (skills where they scored lowest)\n const sortedSkills = Object.keys(emp.scores)\n .map(id => {\n const s = skills.find(sk => sk.id === id);\n return s ? { name: s.name, score: emp.scores[id] } : null;\n })\n .filter(x => x !== null)\n .sort((a,b) => a.score - b.score);\n \n const priorityAreas = sortedSkills.slice(0, 3).map(x => `${x.name} (${x.score})`).join(', ');\n\n return {\n 'Direct Manager': emp.manager,\n 'Employee Name': emp.name,\n 'Role': emp.role,\n 'Region': emp.region,\n 'Total Assessed Skills': scoresArray.length,\n 'Average Rating': avgScore,\n 'Top Priority Areas': priorityAreas || 'None'\n };\n });\n}\n\n// --- RENDERING & FILTERING ---\n\nwindow.filterReportPreview = function() {\n const query = document.getElementById('report-search').value.toLowerCase().trim();\n \n if (!query) {\n filteredData = [...reportData];\n } else {\n filteredData = reportData.filter(row => {\n return Object.values(row).some(val => \n String(val).toLowerCase().includes(query)\n );\n });\n }\n\n renderPreviewTable();\n};\n\nfunction renderPreviewTable() {\n const headersRow = document.getElementById('table-headers');\n const tbody = document.getElementById('table-body');\n const recordCount = document.getElementById('record-count');\n const noResultsMsg = document.getElementById('no-results-msg');\n const previewTable = document.getElementById('preview-table');\n\n headersRow.innerHTML = '';\n tbody.innerHTML = '';\n\n if (filteredData.length === 0) {\n noResultsMsg.classList.remove('hidden');\n previewTable.style.opacity = '0.4';\n recordCount.textContent = 'Showing 0 records';\n return;\n }\n\n noResultsMsg.classList.add('hidden');\n previewTable.style.opacity = '1';\n\n // Get keys from first item to build headers\n const columns = Object.keys(filteredData[0]);\n columns.forEach(col => {\n const th = document.createElement('th');\n th.textContent = col;\n headersRow.appendChild(th);\n });\n\n // Populate data rows\n filteredData.forEach(row => {\n const tr = document.createElement('tr');\n columns.forEach(col => {\n const td = document.createElement('td');\n const val = row[col];\n \n // Styling helpers for specific column values\n if (col === 'Role') {\n td.innerHTML = `${val}`;\n } else if (col === 'Region') {\n td.innerHTML = `${val}`;\n } else if (col === 'Skills Below Target' && val > 0) {\n td.innerHTML = `${val}`;\n } else if (col === 'Avg Technical' || col === 'Overall Avg Score' || col === 'Average Rating') {\n td.innerHTML = `${val}`;\n } else {\n td.textContent = val;\n }\n \n tr.appendChild(td);\n });\n tbody.appendChild(tr);\n });\n\n recordCount.textContent = `Showing ${filteredData.length} of ${reportData.length} records`;\n}\n\n// --- CSV EXPORTER UTILITY ---\n\nwindow.triggerCSVDownload = function() {\n if (filteredData.length === 0) {\n alert('No data available to export.');\n return;\n }\n\n const columns = Object.keys(filteredData[0]);\n \n // Format Headers\n const csvHeaders = columns.map(col => `\"${col.replace(/\"/g, '\"\"')}\"`).join(',');\n \n // Format Rows\n const csvRows = filteredData.map(row => {\n return columns.map(col => {\n const val = row[col] === null || row[col] === undefined ? '' : String(row[col]);\n return `\"${val.replace(/\"/g, '\"\"')}\"`;\n }).join(',');\n });\n\n // Assemble full CSV\n const csvContent = '\\uFEFF' + [csvHeaders, ...csvRows].join('\\n'); // Add UTF-8 BOM\n \n // Create File Blob & trigger download\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n \n const link = document.createElement('a');\n link.setAttribute('href', url);\n \n const timestamp = new Date().toISOString().slice(0, 10);\n link.setAttribute('download', `assurance_report_${currentReportType}_${timestamp}.csv`);\n \n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n \n // Analytics Log\n console.log(`Successfully exported ${filteredData.length} records of category: \"${currentReportType}\" to CSV.`);\n};\n"},{"name":"results.js","content":"import { scale, skills, categories, subcategories } from './data.js';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const data = JSON.parse(localStorage.getItem('latestAssessment'));\n\n if (!data) {\n document.getElementById('belowExpectation').innerHTML = `\n
\n

No Assessment Found

\n

Complete a self-assessment to see your results.

\n Go to Home\n
`;\n document.getElementById('summaryCards').style.display = 'none';\n document.getElementById('categoryScores').style.display = 'none';\n return;\n }\n\n const role = data.role || 'reviewer';\n const targetThreshold = role === 'review-lead' ? 3 : 2;\n const roleName = role === 'review-lead' ? 'Review Lead' : 'Reviewer';\n\n // Set role badge\n document.getElementById('results-role-badge').textContent = roleName;\n\n const results = data.results;\n const totalSkills = Object.keys(results).length;\n\n let totalScore = 0;\n Object.values(results).forEach(r => totalScore += r.score);\n\n // Build skill list with gap info\n const allSkills = skills\n .filter(skill => results[skill.id])\n .map(skill => ({\n id: skill.id,\n name: skill.name,\n category: results[skill.id].category,\n categoryId: skill.category,\n score: results[skill.id].score,\n target: targetThreshold,\n gap: results[skill.id].score - targetThreshold,\n desc: skill.desc,\n training: skill.trainingUrl\n }));\n\n // Skills below target\n const belowTarget = allSkills.filter(s => s.score < targetThreshold);\n // Skills partially proficient (1 level below target)\n const partiallyProficient = belowTarget.filter(s => s.gap === -1);\n // Skills meeting or exceeding\n const meetingTarget = allSkills.filter(s => s.score >= targetThreshold);\n // Overall average\n const avgScore = (totalScore / totalSkills).toFixed(1);\n // Overall gap\n const gapScore = (totalScore / totalSkills - targetThreshold).toFixed(1);\n\n // ── Summary Cards ──\n document.getElementById('summaryCards').innerHTML = `\n
\n
${belowTarget.length}
\n
Skills Below Target
\n
Require development (target: level ${targetThreshold}+)
\n
\n
\n
${partiallyProficient.length}
\n
Partially Proficient
\n
One level below target
\n
\n
\n
${meetingTarget.length}
\n
Meeting / Exceeding
\n
At or above target level
\n
\n
\n
${avgScore}
\n
Average Score
\n
Overall gap: ${gapScore > 0 ? '+' : ''}${gapScore}
\n
\n `;\n\n // ── Below Expectation Section ──\n const belowSection = document.getElementById('belowExpectation');\n\n if (belowTarget.length === 0) {\n belowSection.innerHTML = `\n

Skills Below Expectation

\n
\n \n

All Skills Meet or Exceed Target

\n

Great job! All your skills are at or above the expected proficiency level for ${roleName} (level ${targetThreshold}+).

\n Return Home\n
\n `;\n } else {\n // Group below-target skills by category\n const grouped = {};\n belowTarget.forEach(skill => {\n if (!grouped[skill.category]) grouped[skill.category] = [];\n grouped[skill.category].push(skill);\n });\n\n let html = `

Skills Below Expectation

\n

\n The following ${belowTarget.length} skill(s) scored below the ${roleName} target of level ${targetThreshold} (${scale.find(s => s.level === targetThreshold)?.name}).\n

`;\n\n for (const [category, catSkills] of Object.entries(grouped)) {\n html += `

${category}

`;\n html += `
`;\n\n catSkills.forEach(skill => {\n const gapAbs = Math.abs(skill.gap);\n const scoreName = scale.find(s => s.level === skill.score)?.name || 'Unknown';\n const targetName = scale.find(s => s.level === skill.target)?.name || 'Unknown';\n const borderColor = gapAbs >= 2 ? 'var(--color-red)' : 'var(--color-amber)';\n\n html += `\n
\n
\n

${skill.name}

\n \n -${gapAbs} gap\n \n
\n

${skill.desc}

\n
\n
\n Your Level: \n ${scoreName} (${skill.score})\n
\n
\n Target: \n ${targetName} (${skill.target})\n
\n
\n ${skill.training ? `\n \n \n Recommended Training\n ` : ''}\n
`;\n });\n\n html += `
`;\n }\n\n belowSection.innerHTML = html;\n }\n\n // ── Full Category Scores ──\n const catSection = document.getElementById('categoryScores');\n let catHtml = '';\n\n categories.forEach(cat => {\n const catSkills = allSkills.filter(s => s.categoryId === cat.id);\n if (catSkills.length === 0) return;\n\n catHtml += `
\n

${cat.name}

\n
\n \n \n \n \n \n \n \n \n \n `;\n\n catSkills.forEach(skill => {\n const scoreName = scale.find(s => s.level === skill.score)?.name || 'Unknown';\n const isBelow = skill.score < targetThreshold;\n const statusColor = isBelow ? 'var(--color-red)' : 'var(--color-green)';\n const statusText = isBelow ? 'Below Target' : 'Meets Target';\n\n catHtml += `\n \n \n \n \n \n `;\n });\n\n catHtml += `
SkillYour ScoreTargetStatus
${skill.name}${scoreName} (${skill.score})${skill.target}\n ${statusText}\n
`;\n });\n\n catSection.innerHTML = catHtml;\n\n // ── Actions ──\n document.getElementById('resultsActions').innerHTML = `\n \n \n Retake Assessment\n \n \n \n Return Home\n \n `;\n\n // Initialize Lucide icons\n if (window.lucide) {\n window.lucide.createIcons();\n }\n});\n"}],"folders":[]},{"folder":"other","files":[{"name":"main.sketch","content":""}],"folders":[]}]},"variants":null,"createdAt":"2026-06-24T04:02:32.643Z","updatedAt":"2026-06-24T16:18:08.732Z","hasThumbnail":true}}