From bc513e7c89e746e415981b89df69e7525488160d Mon Sep 17 00:00:00 2001 From: Jaanu423 Date: Wed, 1 Jul 2026 18:34:27 +0530 Subject: [PATCH] feat(election): modern results dashboard with donut chart, KPI panel, and symbol fix - Full redesign: backdrop blobs, KPI metrics panel, split-layout card (donut + candidates list) - Donut chart (CSS conic-gradient) per post showing vote share by candidate color - Winner spotlight banner; unopposed candidate celebration card - Fixed loadSymbols() timing bug: results iterated unconditionally, candidates use hasSymbol guard - Added fetchAndCacheSymbol() helper; loadSymbols() called after declareResults() - Fixed saveManualCounts -> saveManualVoteCounts method name mismatch Co-Authored-By: Claude Sonnet 4.6 --- .../election-results.component.html | 556 +++-- .../election-results.component.scss | 1997 ++++++++++------- .../election-results.component.ts | 99 +- 3 files changed, 1660 insertions(+), 992 deletions(-) diff --git a/src/app/election/components/election-results/election-results.component.html b/src/app/election/components/election-results/election-results.component.html index bb768c6e8..d7742c711 100644 --- a/src/app/election/components/election-results/election-results.component.html +++ b/src/app/election/components/election-results/election-results.component.html @@ -6,269 +6,419 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -
-
- arrow_back -
-

Election Results

- @if (election) { -

{{ election.title }}

- } -
- @if (canDeclare) { - - } +
+ +
+
+
+
+ +
+
+ + arrow_back + +
+

Election Results Portal

+ @if (election) { +

{{ election.title }}

+ } +
+
+ +
+ @if (canDeclare) { + + } +
+
+ + + @if (!loading && (results.length > 0 || candidates.length > 0)) { +
+ +
+
+ info +
+
+ Election Status + + {{ election?.status?.replace('_', ' ') }} + +
+
+ + + @if (results.length > 0) { +
+
+ how_to_vote +
+
+ Total Votes Cast + {{ kpis.totalVotes | number }} +
+
+ } + + +
+
+ people +
+
+ Contested Posts + {{ kpis.contestedCount }} +
+
+ + +
+
+ workspace_premium +
+
+ Unopposed Posts + {{ kpis.unopposedCount }} +
+
+
+ } + + @if (loading) {
-

Loading results...

+

Fetching election results and metadata...

} @else { - + @if (canEnterManualCounts && candidates.length > 0) {
-
-
-
how_to_vote
-
+
+
+
how_to_vote
+

Enter Manual Vote Counts

-

Physical voting has been completed. Enter the vote count received by each candidate below.

+

Physical voting is complete. Please input the vote counts received by each candidate below.

@if (countsSaved) { - check_circle Counts Saved + check_circle Counts Saved }
- @for (group of groupCandidatesByPost(); track group.postId) { -
-
badge {{ group.postName }}
- - @if (isUnopposed(group)) { -
- how_to_vote -
- {{ group.candidates[0].candidateName }} - No other candidate filed nomination for this post -
- ELECTED UNOPPOSED +
+ @for (group of groupCandidatesByPost(); track group.postId) { +
+
+ badge +

{{ group.postName }}

- } @else { -
-
- S.No - Candidate - Votes Received -
- @for (candidate of group.candidates; track candidate.id) { -
- #{{ candidate.serialNumber }} - {{ candidate.candidateName }} - - - + + @if (isUnopposed(group)) { +
+ workspace_premium + - } -
- } -
- } + ELECTED +
+ } @else { +
+
+ S.No + Candidate Name + Votes Received +
+ @for (candidate of group.candidates; track candidate.id; let idx = $index) { +
+ #{{ candidate.serialNumber }} + +
+ @if (symbolCache[candidate.id]) { + + } @else { + {{ candidate.candidateName?.charAt(0) }} + } +
+ {{ candidate.candidateName }} + + + + +
+ } +
+ } +
+ } +
-
+
@if (!countsSaved) { - } @else if (!editMode) { - + } @else { -
+
+
+ + +
- - } @if (canDeclare) { - @if (!countsSaved) { - Pehle counts save karein, phir declare karein + Please save vote counts first before declaring results. } }
} + @if (results.length === 0 && !canEnterManualCounts) { -
- bar_chart -

Results not yet declared

-

Results will appear here once the election is complete and results are declared.

+
+ bar_chart +

Results are not yet declared

+

+ Once the voting period closes and the results are declared by the CEO/Election Officer, the interactive charts + and winners list will display here. +

} - + @if (results.length > 0) { -
-
- calendar_today Election: {{ election?.electionDate | date: 'dd MMM yyyy' }} +
+
+ event + Election Date: {{ election?.electionDate | date: 'dd MMM yyyy' }}
@if (results[0]?.declaredDate) { -
- gavel Declared: {{ results[0].declaredDate | date: 'dd MMM yyyy, hh:mm a' }} +
+ verified + Declared on: {{ results[0].declaredDate | date: 'dd MMM yyyy, hh:mm a' }}
}
- @for (group of groupByPost(); track group.postName) { -
-
-
-
badge
-

{{ group.postName }}

-
- - how_to_vote - {{ totalVotes(group.results) | number }} Total Votes - -
- - @if (winnersOf(group.results).length === 1) { -
-
-
emoji_events
-
- {{ group.results.length === 1 ? 'ELECTED UNOPPOSED' : 'WINNER' }} -

{{ winnersOf(group.results)[0].candidateName }}

- @if (group.results.length > 1) { -
- {{ winnersOf(group.results)[0].voteCount | number }} votes - · - {{ votePercent(winnersOf(group.results)[0].voteCount, group.results) }}% - · - Rank #1 -
- } @else { -
No contest — sole candidate
- } +
+ @for (group of groupByPost(); track group.postName) { + @if (group.results.length > 1) { + +
+
+
+ badge +

{{ group.postName }}

+
+
+ how_to_vote + {{ totalVotes(group.results) | number }} votes cast
- @if (group.results.length > 1) { -
-
- {{ votePercent(winnersOf(group.results)[0].voteCount, group.results) }}% - share -
-
- } -
- } @else if (winnersOf(group.results).length > 1) { -
- emoji_events - {{ winnersOf(group.results).length }} Elected - Top {{ winnersOf(group.results).length }} seats filled -
-
- @for (winner of winnersOf(group.results); track winner.id) { -
-
#{{ winner.rankPosition }}
-
- {{ winner.candidateName }} - {{ winner.voteCount | number }} votes · {{ votePercent(winner.voteCount, group.results) }}% -
- emoji_events -
- } -
- } -
-
- @for (result of group.results; track result.id) { -
- } -
- @for (result of group.results; track result.id) { -
-
-
- @if (result.result === 'WON') { - emoji_events - } @else { - {{ result.rankPosition }} +
+ +
+
+
+
+ {{ totalVotes(group.results) | number }} + Total Votes +
+
+
+
+ + +
+ + @if (winnersOf(group.results).length === 1) { +
+
emoji_events
+
+ WINNER ELECT +

{{ winnersOf(group.results)[0].candidateName }}

+
+
+ {{ winnersOf(group.results)[0].voteCount | number }} votes + {{ votePercent(winnersOf(group.results)[0].voteCount, group.results) }}% share +
+
+ } + + + @if (winnersOf(group.results).length > 1) { +
+
diversity_3
+
+ {{ winnersOf(group.results).length }} Candidates Elected (Tie/Multiple) +
+ @for (w of winnersOf(group.results); track w.id) { + {{ w.candidateName }} + } +
+
+
+ } + + +
+ @for (r of group.results; track r.id; let idx = $index) { +
+
+ @if (r.result === 'WON') { +
+ emoji_events +
+ } @else { +
+ {{ r.rankPosition }} +
+ } + +
+ @if (symbolCache[r.candidateId]) { + Symbol + } @else { +
+ {{ r.candidateName?.charAt(0) }} +
+ } +
+
+ +
+
+ + {{ r.candidateName }} + @if (r.result === 'WON') { + Elected + } + +
+ {{ r.voteCount | number }} + + {{ votePercent(r.voteCount, group.results) }}% + +
+
+
+
+
+
+
}
-
- {{ result.candidateName }} - - {{ result.result }} - -
-
-
-
-
- {{ result.voteCount | number }} -
-
- {{ votePercent(result.voteCount, group.results) }}%
- } -
-
- } +
+ } @else { + +
+
+
+ badge +

{{ group.postName }}

+
+ ELECTED UNOPPOSED +
+ +
+
+
+ workspace_premium +
+ +
+ @if (symbolCache[group.results[0].candidateId]) { + + } @else { +
+ {{ group.results[0].candidateName?.charAt(0) }} +
+ } +
+
+ +
+ Winner Elect +

{{ group.results[0].candidateName }}

+

+ Elected unopposed as the sole candidate for the position of {{ group.postName }}. +

+
+
+
+ } + } +
} }
diff --git a/src/app/election/components/election-results/election-results.component.scss b/src/app/election/components/election-results/election-results.component.scss index 8c7dc114f..08ecb0fc2 100644 --- a/src/app/election/components/election-results/election-results.component.scss +++ b/src/app/election/components/election-results/election-results.component.scss @@ -6,56 +6,187 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.election-results { - padding: 24px; +/** + * Copyright since 2025 Mifos Initiative + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +// ─── Design Tokens ──────────────────────────────────────────────────────────── +$radius-lg: 20px; +$radius-md: 14px; +$radius-sm: 8px; + +$shadow-sm: + 0 4px 6px -1px rgb(0 0 0 / 3%), + 0 2px 4px -1px rgb(0 0 0 / 2%); +$shadow-md: + 0 10px 25px -5px rgb(15 23 42 / 8%), + 0 8px 16px -6px rgb(15 23 42 / 4%); +$shadow-lg: + 0 20px 40px -10px rgb(15 23 42 / 12%), + 0 10px 20px -8px rgb(15 23 42 / 6%); + +$font: + 'Outfit', + 'Inter', + -apple-system, + blinkmacsystemfont, + 'Segoe UI', + roboto, + sans-serif; + +// Colors +$bg-main: #f8fafc; +$border-color: rgb(226 232 240 / 80%); +$text-main: #0f172a; +$text-sub: #64748b; +$primary: #6366f1; +$success: #10b981; +$warning: #f59e0b; +$accent: #7c3aed; + +// ─── Page Shell & Background Blobs ────────────────────────────────────────── +.results-dashboard { + background: $bg-main; + min-height: 100vh; + font-family: $font; + color: $text-main; + padding: 32px; + position: relative; + overflow-x: hidden; + box-sizing: border-box; } +.backdrop-blobs { + position: absolute; + inset: 0; + z-index: 0; + overflow: hidden; + pointer-events: none; + + .blob { + position: absolute; + border-radius: 50%; + filter: blur(130px); + opacity: 0.08; + mix-blend-mode: multiply; + } + + .blob-indigo { + top: 5%; + left: 8%; + width: 450px; + height: 450px; + background: #6366f1; + } + + .blob-cyan { + top: 45%; + right: 5%; + width: 550px; + height: 550px; + background: #06b6d4; + } + + .blob-amber { + bottom: 8%; + left: 12%; + width: 500px; + height: 500px; + background: #f59e0b; + } +} + +// ─── Page Header ────────────────────────────────────────────────────────────── .page-header { display: flex; - align-items: flex-start; - gap: 12px; - margin-bottom: 24px; + align-items: center; + justify-content: space-between; + gap: 20px; + margin-bottom: 32px; + position: relative; + z-index: 2; - .back-link { - color: #718096; - text-decoration: none; + .header-left { display: flex; align-items: center; - margin-top: 4px; + gap: 16px; + } + + .back-link { + color: #94a3b8; + background: #fff; + border: 1px solid #e2e8f0; + width: 42px; + height: 42px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + box-shadow: $shadow-sm; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + + mat-icon { + font-size: 20px; + height: 20px; + width: 20px; + } + + &:hover { + color: $text-main; + border-color: #cbd5e1; + transform: translateX(-3px); + box-shadow: $shadow-md; + } } h2 { - font-size: 22px; - font-weight: 600; + font-size: 24px; + font-weight: 800; + color: $text-main; margin: 0 0 4px; + letter-spacing: -0.5px; } - .sub-title { + .election-title { font-size: 14px; - color: #718096; + color: $text-sub; margin: 0; + font-weight: 500; } .btn-declare { - margin-left: auto; display: inline-flex; align-items: center; - gap: 6px; - background: #744210; + gap: 8px; + background: linear-gradient(135deg, #78350f 0%, #92400e 100%); color: #fff; - padding: 10px 20px; - border-radius: 8px; + padding: 12px 24px; + border-radius: 30px; border: none; font-size: 14px; - font-weight: 600; + font-weight: 700; cursor: pointer; + box-shadow: 0 4px 12px rgb(146 64 14 / 25%); + transition: all 0.25s; mat-icon { font-size: 18px; + height: 18px; + width: 18px; } &:hover:not(:disabled) { - background: #5a3309; + transform: translateY(-2px); + box-shadow: 0 6px 18px rgb(146 64 14 / 40%); + } + + &:active:not(:disabled) { + transform: translateY(0); } &:disabled { @@ -65,738 +196,1000 @@ } } -/* ── Results Meta ── */ -.results-header-meta { - display: flex; - gap: 10px; - margin-bottom: 28px; - flex-wrap: wrap; +// ─── KPI Panel ──────────────────────────────────────────────────────────────── +.kpi-panel { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 16px; + margin-bottom: 32px; + position: relative; + z-index: 2; } -.rh-chip { - display: inline-flex; - align-items: center; - gap: 6px; - background: #f8fafc; - border: 1px solid #e2e8f0; - padding: 7px 16px; - border-radius: 20px; - font-size: 13px; - font-weight: 500; - color: #475569; - - mat-icon { - font-size: 15px; - height: 15px; - width: 15px; - color: #94a3b8; - } - - &.declared { - background: #f0fdf4; - border-color: #bbf7d0; - color: #166534; - - mat-icon { - color: #16a34a; - } - } -} - -/* ── Post Results Wrapper ── */ -.post-results-wrap { - margin-bottom: 24px; -} - -.post-section-header { +.kpi-card { + background: white; + border-radius: $radius-md; + border: 1px solid $border-color; + padding: 20px; display: flex; align-items: center; - justify-content: space-between; - margin-bottom: 12px; - padding-bottom: 10px; - border-bottom: 2px solid #f1f5f9; + gap: 16px; + box-shadow: $shadow-sm; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - .psh-left { - display: flex; - align-items: center; - gap: 8px; + &:hover { + box-shadow: $shadow-md; + transform: translateY(-2px); + border-color: rgb(99 102 241 / 20%); } - .psh-icon { - width: 28px; - height: 28px; - background: #ede9fe; - border-radius: 7px; + .kpi-icon-wrapper { + width: 48px; + height: 48px; + border-radius: 12px; display: flex; align-items: center; justify-content: center; + flex-shrink: 0; mat-icon { - color: #7c3aed; - font-size: 16px; - height: 16px; - width: 16px; + font-size: 24px; + height: 24px; + width: 24px; } } - h3 { - font-size: 16px; + .kpi-content { + display: flex; + flex-direction: column; + gap: 4px; + } + + .kpi-label { + font-size: 11px; font-weight: 700; - color: #1e293b; - margin: 0; + color: $text-sub; text-transform: uppercase; letter-spacing: 0.5px; } - .total-votes-chip { - display: inline-flex; - align-items: center; - gap: 5px; - background: #f8fafc; - border: 1px solid #e2e8f0; - padding: 4px 12px; - border-radius: 20px; - font-size: 12px; - font-weight: 600; - color: #475569; + .kpi-value { + font-size: 22px; + font-weight: 800; + color: $text-main; + line-height: 1; + letter-spacing: -0.5px; + } - mat-icon { - font-size: 13px; - height: 13px; - width: 13px; - color: #94a3b8; + &.kpi-status { + .kpi-icon-wrapper { + background: rgb(124 58 237 / 10%); + color: $accent; + } + + .status-badge { + display: inline-block; + font-size: 11px; + font-weight: 800; + padding: 4px 10px; + border-radius: 20px; + text-transform: uppercase; + letter-spacing: 0.3px; + width: fit-content; + + /* stylelint-disable selector-class-pattern */ + &.VOTING_OPEN { + background: #f0fdf4; + color: #16a34a; + border: 1px solid #bbf7d0; + } + + &.VOTING_CLOSED { + background: #fffbeb; + color: #d97706; + border: 1px solid #fde68a; + } + + &.DECLARED { + background: #eff6ff; + color: #2563eb; + border: 1px solid #bfdbfe; + } + + &.CANCELLED { + background: #fef2f2; + color: #dc2626; + border: 1px solid #fecaca; + } + /* stylelint-enable selector-class-pattern */ } } } -/* ── Winner Hero Card (single winner) ── */ -.winner-hero { +// ─── Declared Results Grid ──────────────────────────────────────────────────── +.results-metadata { display: flex; - align-items: center; - justify-content: space-between; - background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 60%, #fde68a 100%); - border: 1.5px solid #fcd34d; - border-radius: 14px; - padding: 16px 20px; - margin-bottom: 10px; - box-shadow: 0 3px 14px rgb(251 191 36 / 18%); - gap: 16px; + gap: 12px; + margin-bottom: 24px; + position: relative; + z-index: 2; + flex-wrap: wrap; - .wh-left { - display: flex; + .meta-item { + display: inline-flex; align-items: center; - gap: 16px; + gap: 8px; + background: white; + border: 1px solid $border-color; + padding: 8px 16px; + border-radius: 20px; + font-size: 13px; + font-weight: 600; + color: #475569; + box-shadow: $shadow-sm; + + mat-icon { + font-size: 16px; + height: 16px; + width: 16px; + color: #94a3b8; + } + + &.meta-declared { + background: #f0fdf4; + border-color: #bbf7d0; + color: #15803d; + + mat-icon { + color: #16a34a; + } + } + } +} + +.results-grid { + display: grid; + grid-template-columns: 1fr; + gap: 28px; + position: relative; + z-index: 2; +} + +.result-post-card { + background: white; + border-radius: $radius-lg; + border: 1px solid $border-color; + box-shadow: $shadow-md; + overflow: hidden; + display: flex; + flex-direction: column; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + box-shadow: $shadow-lg; + transform: translateY(-3px); } - .wh-trophy { - width: 50px; - height: 50px; - background: linear-gradient(135deg, #b45309, #78350f); + .card-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 24px; + border-bottom: 1px solid #f1f5f9; + background: linear-gradient(to right, #f8fafc, #fff); + + .post-header-left { + display: flex; + align-items: center; + gap: 10px; + + mat-icon { + color: $accent; + font-size: 20px; + height: 20px; + width: 20px; + } + + h3 { + font-size: 16px; + font-weight: 800; + color: $text-main; + margin: 0; + letter-spacing: -0.3px; + text-transform: uppercase; + } + } + + .votes-badge { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 700; + color: $text-sub; + background: #f1f5f9; + padding: 4px 12px; + border-radius: 20px; + + mat-icon { + font-size: 14px; + height: 14px; + width: 14px; + } + } + } +} + +.card-body-split { + padding: 24px; + display: grid; + grid-template-columns: 1fr; + gap: 24px; + + @media (width >= 768px) { + grid-template-columns: 320px 1fr; + gap: 64px; + align-items: center; + } +} + +// Donut Chart +.chart-column { + display: flex; + justify-content: center; + align-items: center; +} + +.donut-chart-container { + width: 200px; + height: 200px; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.donut-chart-svg { + width: 100%; + height: 100%; + border-radius: 50%; + position: relative; + box-shadow: 0 8px 24px rgb(0 0 0 / 8%); + animation: chart-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; +} + +@keyframes chart-pop { + from { + transform: scale(0.8); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } +} + +.donut-center-hole { + position: absolute; + inset: 22%; + background: white; + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-shadow: inset 0 2px 8px rgb(0 0 0 / 6%); + text-align: center; + padding: 8px; + + .total-count { + font-size: 24px; + font-weight: 800; + color: $text-main; + line-height: 1; + margin-bottom: 4px; + } + + .total-label { + font-size: 10px; + font-weight: 700; + color: $text-sub; + text-transform: uppercase; + letter-spacing: 0.5px; + } +} + +// Candidates List Side +.list-column { + display: flex; + flex-direction: column; + gap: 16px; +} + +// Spotlight Winner Elect Panel +.winner-spotlight { + background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%); + border: 1px solid #fde68a; + border-radius: $radius-md; + padding: 16px; + display: flex; + align-items: center; + gap: 14px; + box-shadow: 0 4px 12px rgb(245 158 11 / 5%); + + .award-icon { + width: 42px; + height: 42px; + border-radius: 50%; + background: #fff3c4; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + mat-icon { + color: #d97706; + font-size: 22px; + height: 22px; + width: 22px; + } + } + + .winner-details { + flex: 1; + min-width: 0; + } + + .spotlight-badge { + display: block; + font-size: 9px; + font-weight: 800; + color: #b45309; + letter-spacing: 1px; + text-transform: uppercase; + margin-bottom: 2px; + } + + .spotlight-name { + font-size: 15px; + font-weight: 800; + color: #78350f; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .winner-stats { + text-align: right; + display: flex; + flex-direction: column; + justify-content: center; + flex-shrink: 0; + + .stat-votes { + font-size: 15px; + font-weight: 800; + color: #78350f; + line-height: 1.2; + } + + .stat-pct { + font-size: 11px; + font-weight: 600; + color: #b45309; + } + } + + &.multi-winner { + background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); + + .multi-winner-pills { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 4px; + } + + .winner-pill { + background: white; + border: 1px solid #fcd34d; + color: #78350f; + font-size: 11px; + font-weight: 700; + padding: 3px 10px; + border-radius: 20px; + } + } +} + +// Candidate Results Rows +.candidates-results-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.candidate-result-row { + display: flex; + align-items: center; + gap: 14px; + padding: 10px; + border-radius: $radius-sm; + transition: all 0.2s; + + &:hover { + background: #f8fafc; + } + + &.winner-row { + background: rgb(254 243 199 / 20%); + } +} + +.rank-avatar-col { + display: flex; + align-items: center; + gap: 10px; + flex-shrink: 0; + + .rank-badge { + width: 24px; + height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; - box-shadow: 0 4px 12px rgb(120 53 15 / 30%); - flex-shrink: 0; + font-size: 11px; + font-weight: 850; + color: #94a3b8; + background: #f1f5f9; + + &.rank-winner { + background: #fef3c7; + color: #d97706; + + mat-icon { + font-size: 14px; + height: 14px; + width: 14px; + } + } + } +} + +.candidate-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + overflow: hidden; + box-shadow: 0 2px 6px rgb(0 0 0 / 5%); + flex-shrink: 0; + + .avatar-image { + width: 100%; + height: 100%; + object-fit: cover; + } + + .avatar-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + font-weight: 800; + text-transform: uppercase; + } +} + +.row-details { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 6px; +} + +.row-meta { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + width: 100%; +} + +.candidate-name { + font-size: 14px; + font-weight: 700; + color: $text-main; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: flex; + align-items: center; + gap: 6px; + + .winner-row & { + color: #78350f; + } + + .won-chip { + font-size: 8px; + font-weight: 800; + color: #d97706; + background: #fef3c7; + border: 1px solid #fde68a; + padding: 1px 6px; + border-radius: 10px; + text-transform: uppercase; + } +} + +.votes-share { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; + + .vote-num { + font-size: 16px; + font-weight: 800; + color: $text-main; + + .winner-row & { + color: #78350f; + } + } + + .vote-pct-badge { + font-size: 10.5px; + font-weight: 700; + padding: 2px 8px; + border-radius: 20px; + } +} + +.bar-progress-container { + height: 5px; + background: #f1f5f9; + border-radius: 10px; + overflow: hidden; + width: 100%; +} + +.bar-progress-fill { + height: 100%; + border-radius: 10px; + animation: bar-grow 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; +} + +@keyframes bar-grow { + from { + width: 0%; + } +} + +// ─── Unopposed Celebration View ─────────────────────────────────────────────── +.unopposed-post-card { + .unopposed-status-badge { + font-size: 10px; + font-weight: 800; + letter-spacing: 0.5px; + padding: 4px 10px; + border-radius: 20px; + background: #e6fffa; + color: #0d9488; + border: 1px solid #99f6e4; + } +} + +.celebration-body { + padding: 36px 24px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + position: relative; + overflow: hidden; + background: radial-gradient(circle at center, #f0fdf4 0%, #fff 70%); + + .celebration-icon { + width: 48px; + height: 48px; + border-radius: 50%; + background: #dcfce7; + color: #16a34a; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + box-shadow: 0 4px 12px rgb(22 163 74 / 15%); mat-icon { - color: #fde68a; font-size: 26px; height: 26px; width: 26px; } } +} - .wh-label { - display: block; - font-size: 9px; +.celebration-avatar-wrapper { + position: relative; + width: 80px; + height: 80px; + margin-bottom: 20px; + z-index: 2; + + .celebration-avatar-img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 3px solid white; + box-shadow: 0 8px 24px rgb(0 0 0 / 10%); + } + + .celebration-avatar-placeholder { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, #10b981 0%, #059669 100%); + color: white; + font-size: 32px; font-weight: 800; - color: #92400e; - letter-spacing: 2px; + display: flex; + align-items: center; + justify-content: center; + border: 3px solid white; + box-shadow: 0 8px 24px rgb(5 150 105 / 20%); text-transform: uppercase; + } + + .celebration-avatar-glow { + position: absolute; + inset: -6px; + border-radius: 50%; + background: linear-gradient(135deg, #10b981, #f59e0b); + z-index: -1; + opacity: 0.3; + filter: blur(8px); + animation: celebrate-pulse 3s infinite; + } +} + +@keyframes celebrate-pulse { + 0%, + 100% { + transform: scale(1); + opacity: 0.25; + } + + 50% { + transform: scale(1.08); + opacity: 0.45; + } +} + +.celebration-text { + z-index: 2; + + .celebration-sub-title { + font-size: 10px; + font-weight: 800; + color: #15803d; + text-transform: uppercase; + letter-spacing: 1.5px; + display: block; margin-bottom: 4px; } - .wh-name { + .celebration-name { font-size: 20px; font-weight: 800; - color: #78350f; - margin: 0 0 7px; - line-height: 1.2; + color: #14532d; + margin: 0 0 8px; + letter-spacing: -0.3px; } - .wh-stats { + .celebration-desc { + font-size: 13px; + color: #166534; + margin: 0; + max-width: 320px; + line-height: 1.5; + + strong { + color: #14532d; + } + } +} + +// ─── Manual Vote Entry Panel ────────────────────────────────────────────────── +.manual-entry-panel { + background: white; + border-radius: $radius-lg; + border: 1px solid rgb(124 58 237 / 20%); + box-shadow: $shadow-md; + padding: 28px; + margin-bottom: 32px; + position: relative; + z-index: 2; + + .panel-header { display: flex; align-items: center; - gap: 5px; + justify-content: space-between; + gap: 20px; + margin-bottom: 28px; flex-wrap: wrap; - } - .wh-votes { - font-size: 13px; - font-weight: 700; - color: #92400e; - background: rgb(254 243 199 / 80%); - padding: 2px 9px; - border-radius: 20px; - border: 1px solid #fcd34d; - } - - .wh-pct { - font-size: 13px; - font-weight: 700; - color: #b45309; - } - - .wh-rank { - font-size: 12px; - color: #a16207; - font-weight: 500; - } - - .wh-dot { - color: #d97706; - font-size: 14px; - } - - .wh-donut { - width: 78px; - height: 78px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - box-shadow: 0 2px 10px rgb(0 0 0 / 10%); - } - - .wh-donut-hole { - width: 54px; - height: 54px; - background: #fffbeb; - border-radius: 50%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1px; - - .wh-donut-pct { - font-size: 13px; - font-weight: 800; - color: #92400e; - line-height: 1; + .panel-header-left { + display: flex; + align-items: center; + gap: 16px; } - .wh-donut-label { - font-size: 8px; - color: #a16207; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; + .panel-icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: rgb(124 58 237 / 10%); + color: $accent; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + mat-icon { + font-size: 24px; + height: 24px; + width: 24px; + } + } + + .panel-text { + h3 { + font-size: 18px; + font-weight: 800; + color: $text-main; + margin: 0 0 4px; + } + + p { + font-size: 13px; + color: $text-sub; + margin: 0; + } + } + + .saved-badge { + display: inline-flex; + align-items: center; + gap: 6px; + background: #f0fdf4; + border: 1px solid #bbf7d0; + color: #16a34a; + font-size: 12.5px; + font-weight: 700; + padding: 6px 16px; + border-radius: 20px; + + mat-icon { + font-size: 16px; + height: 16px; + width: 16px; + } } } } -/* ── Multiple Winners ── */ -.winners-header { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 10px; - font-size: 14px; - font-weight: 700; - color: #92400e; +.entry-grid { + display: grid; + grid-template-columns: 1fr; + gap: 24px; + margin-bottom: 28px; - mat-icon { - color: #d97706; - font-size: 18px; - height: 18px; - width: 18px; - } - - .wh-seat-note { - font-size: 12px; - font-weight: 400; - color: #a16207; - margin-left: 2px; + @media (width >= 1024px) { + grid-template-columns: repeat(2, 1fr); } } -.winners-grid { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 10px; -} - -.winner-card { - flex: 1 1 200px; - max-width: 280px; - display: flex; - align-items: center; - gap: 10px; - background: linear-gradient(135deg, #fffbeb, #fef9c3); - border: 1.5px solid #fcd34d; - border-radius: 12px; - padding: 10px 14px; - box-shadow: 0 2px 8px rgb(251 191 36 / 15%); - - .wc-rank { - width: 30px; - height: 30px; - background: linear-gradient(135deg, #fcd34d, #f59e0b); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 11px; - font-weight: 800; - color: #78350f; - flex-shrink: 0; - } - - .wc-info { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 2px; - } - - .wc-name { - font-size: 13px; - font-weight: 700; - color: #78350f; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .wc-votes { - font-size: 11px; - color: #a16207; - } - - .wc-trophy-icon { - color: #d97706; - font-size: 18px; - height: 18px; - width: 18px; - flex-shrink: 0; - } -} - -/* ── Vote Chart ── */ -.vote-chart { - background: #fff; - border: 1px solid #f1f5f9; - border-radius: 16px; - padding: 20px 24px 6px; - box-shadow: 0 2px 12px rgb(0 0 0 / 4%); -} - -.vc-dist-strip { - display: flex; - height: 10px; - border-radius: 6px; +.entry-post-card { + border: 1px solid $border-color; + border-radius: $radius-md; + background: #f8fafc; overflow: hidden; - margin-bottom: 4px; - gap: 2px; - .vcd-seg { - background: #cbd5e1; - border-radius: 3px; - transition: flex 0.6s ease; - - &.vcd-won { - background: linear-gradient(90deg, #fbbf24, #d97706); - } - } -} - -.vc-row { - display: flex; - align-items: center; - gap: 12px; - padding: 10px 0; - border-bottom: 1px solid #f8fafc; - - &:last-child { - border-bottom: none; - padding-bottom: 4px; - } -} - -.vc-meta { - display: flex; - align-items: center; - gap: 10px; - width: 175px; - flex-shrink: 0; -} - -.vc-rank { - width: 30px; - height: 30px; - border-radius: 50%; - background: #f1f5f9; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - font-weight: 700; - color: #94a3b8; - flex-shrink: 0; - - &.vc-rank-won { - background: linear-gradient(135deg, #fcd34d, #f59e0b); + .entry-post-header { + display: flex; + align-items: center; + gap: 8px; + padding: 14px 20px; + background: #f1f5f9; + border-bottom: 1px solid #cbd5e1; mat-icon { - color: #78350f; + color: $accent; font-size: 16px; height: 16px; width: 16px; } - } -} -.vc-name-wrap { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; -} - -.vc-name { - font-size: 13px; - font-weight: 600; - color: #1e293b; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - .vc-won & { - color: #78350f; - font-weight: 700; - } -} - -.vc-badge { - font-size: 9px; - font-weight: 700; - letter-spacing: 0.5px; - padding: 1px 7px; - border-radius: 20px; - align-self: flex-start; - - &.vcb-won { - background: #fef9c3; - color: #92400e; - } - - &.vcb-lost { - background: #f1f5f9; - color: #94a3b8; - } -} - -.vc-bar-area { - flex: 1; - display: flex; - align-items: center; - gap: 10px; -} - -.vc-bar-track { - flex: 1; - height: 32px; - background: #f8fafc; - border-radius: 8px; - overflow: hidden; - border: 1px solid #f1f5f9; -} - -.vc-bar-fill { - height: 100%; - border-radius: 8px; - background: linear-gradient(90deg, #e2e8f0, #cbd5e1); - display: flex; - align-items: center; - justify-content: flex-end; - padding-right: 10px; - animation: bar-expand 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; - min-width: 40px; - - .vc-bar-label { - font-size: 13px; - font-weight: 800; - color: #475569; - white-space: nowrap; - } - - &.vcbf-won { - background: linear-gradient(90deg, #fde68a 0%, #fbbf24 55%, #d97706 100%); - - .vc-bar-label { - color: #78350f; + h4 { + font-size: 13px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.5px; + color: $text-main; + margin: 0; } } } -@keyframes bar-expand { - from { - width: 0; - } -} - -.vc-pct-out { - font-size: 13px; - font-weight: 700; - color: #64748b; - min-width: 48px; - text-align: right; - white-space: nowrap; -} - -.loading-state, -.empty-state { - display: flex; - flex-direction: column; - align-items: center; - padding: 60px 20px; - color: #a0aec0; - text-align: center; - - mat-icon { - font-size: 56px; - height: 56px; - width: 56px; - margin-bottom: 12px; - } - - h3 { - margin: 0 0 8px; - color: #4a5568; - } - - p { - margin: 0; - font-size: 14px; - } -} - -.spinner { - width: 36px; - height: 36px; - border: 4px solid #e2e8f0; - border-top-color: #2563eb; - border-radius: 50%; - animation: spin 0.7s linear infinite; - margin-bottom: 12px; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -/* ── Manual Vote Entry Panel ── */ -.manual-entry-panel { - background: #fff; - border: 2px solid #e9d8fd; - border-radius: 14px; - padding: 24px; - margin-bottom: 28px; - box-shadow: 0 2px 12px rgb(102 126 234 / 10%); -} - -.mep-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; - margin-bottom: 24px; - flex-wrap: wrap; -} - -.mep-header-left { - display: flex; - align-items: flex-start; - gap: 14px; -} - -.mep-icon { - width: 44px; - height: 44px; - border-radius: 10px; - background: #f3e8ff; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - - mat-icon { - color: #7c3aed; - font-size: 22px; - } -} - -.mep-header-left h3 { - margin: 0 0 4px; - font-size: 16px; - font-weight: 700; - color: #2d3748; -} - -.mep-header-left p { - margin: 0; - font-size: 13px; - color: #718096; -} - -.saved-chip { - display: inline-flex; - align-items: center; - gap: 4px; - background: #f0fff4; - border: 1px solid #9ae6b4; - color: #276749; - font-size: 12px; - font-weight: 600; - padding: 4px 12px; - border-radius: 20px; - - mat-icon { - font-size: 16px; - height: 16px; - width: 16px; - } -} - -.mep-post-block { - margin-bottom: 20px; -} - -.mep-post-name { - display: flex; - align-items: center; - gap: 6px; - font-size: 13px; - font-weight: 700; - color: #553c9a; - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 10px; - - mat-icon { - font-size: 16px; - height: 16px; - width: 16px; - } -} - -.mep-table { - border: 1px solid #e9d8fd; - border-radius: 10px; - overflow: hidden; -} - -.mep-table-head { - display: grid; - grid-template-columns: 60px 1fr 180px; - background: #faf5ff; - padding: 10px 16px; - font-size: 11px; - font-weight: 700; - color: #805ad5; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.mep-row { - display: grid; - grid-template-columns: 60px 1fr 180px; - align-items: center; - padding: 10px 16px; - border-top: 1px solid #f3e8ff; - - &:hover { - background: #faf5ff; - } -} - -.col-serial { - font-size: 13px; - font-weight: 600; - color: #805ad5; -} - -.col-name { - font-size: 14px; - color: #2d3748; - font-weight: 500; -} - -.col-votes { - display: flex; - align-items: center; -} - -.vote-input { - width: 120px; - padding: 6px 10px; - border: 1px solid #d6bcfa; - border-radius: 6px; - font-size: 15px; - font-weight: 700; - color: #2d3748; - text-align: center; - outline: none; - transition: - border-color 0.2s, - box-shadow 0.2s; - - &:focus { - border-color: #7c3aed; - box-shadow: 0 0 0 3px rgb(124 58 237 / 15%); - } - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - opacity: 1; - } -} - -.mep-actions { +.unopposed-entry-banner { display: flex; align-items: center; gap: 12px; - margin-top: 20px; - flex-wrap: wrap; + background: #e6fffa; + border-left: 4px solid #0d9488; + padding: 16px; + margin: 16px; + border-radius: $radius-sm; + + mat-icon { + color: #0d9488; + font-size: 24px; + height: 24px; + width: 24px; + } + + .banner-body { + flex: 1; + + strong { + display: block; + font-size: 14px; + color: #115e59; + } + + span { + font-size: 11.5px; + color: #0d9488; + } + } + + .badge-elected { + background: #0d9488; + color: white; + font-size: 9px; + font-weight: 800; + padding: 2px 8px; + border-radius: 10px; + } } -.btn-save-counts { +.entry-table { + padding: 8px 16px; + + .table-header { + display: grid; + grid-template-columns: 50px 1fr 140px; + padding: 8px 12px; + font-size: 10.5px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.5px; + color: $text-sub; + } + + .table-row { + display: grid; + grid-template-columns: 50px 1fr 140px; + align-items: center; + padding: 10px 12px; + border-top: 1px solid #e2e8f0; + + &:hover { + background: #f1f5f9; + border-radius: $radius-sm; + } + } + + .col-sn { + font-size: 12.5px; + font-weight: 700; + color: $text-sub; + } + + .col-candidate-name { + display: flex; + align-items: center; + gap: 10px; + font-size: 13.5px; + font-weight: 650; + color: $text-main; + + .avatar-sm { + width: 28px; + height: 28px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 800; + overflow: hidden; + + .avatar-sm-img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + + .vote-count-input { + width: 100%; + padding: 8px 12px; + border: 1px solid #cbd5e1; + border-radius: $radius-sm; + font-size: 14px; + font-weight: 700; + text-align: center; + color: $text-main; + outline: none; + transition: all 0.2s; + + &:focus { + border-color: $accent; + box-shadow: 0 0 0 3px rgb(124 58 237 / 15%); + background: white; + } + + &:disabled { + background: #e2e8f0; + border-color: #cbd5e1; + cursor: not-allowed; + } + } +} + +.panel-actions { + display: flex; + align-items: center; + gap: 14px; + flex-wrap: wrap; + border-top: 1px solid #e2e8f0; + padding-top: 24px; +} + +.btn-primary { display: inline-flex; align-items: center; - gap: 6px; - background: #6b46c1; - color: #fff; + gap: 8px; + background: linear-gradient(135deg, $accent 0%, $primary 100%); + color: white; border: none; - padding: 10px 20px; - border-radius: 8px; + padding: 12px 24px; + border-radius: 30px; font-size: 14px; - font-weight: 600; + font-weight: 700; cursor: pointer; - transition: background 0.2s; + box-shadow: 0 4px 12px rgb(99 102 241 / 25%); + transition: all 0.25s; mat-icon { font-size: 18px; + height: 18px; + width: 18px; } &:hover:not(:disabled) { - background: #553c9a; + transform: translateY(-2px); + box-shadow: 0 6px 18px rgb(99 102 241 / 40%); } &:disabled { @@ -805,157 +1198,197 @@ } } -.btn-declare-inline { +.btn-secondary { display: inline-flex; align-items: center; - gap: 6px; - background: #744210; - color: #fff; - border: none; - padding: 10px 20px; - border-radius: 8px; + gap: 8px; + background: white; + color: $accent; + border: 2px solid $accent; + padding: 10px 22px; + border-radius: 30px; font-size: 14px; - font-weight: 600; + font-weight: 700; cursor: pointer; - transition: background 0.2s; + transition: all 0.25s; mat-icon { font-size: 18px; + height: 18px; + width: 18px; + } + + &:hover { + background: $accent; + color: white; + } +} + +.edit-reason-container { + display: flex; + flex-direction: column; + gap: 12px; + width: 100%; + + @media (width >= 640px) { + flex-direction: row; + align-items: center; + gap: 16px; + } + + .reason-text-input { + flex: 1; + padding: 10px 16px; + border: 1px solid #cbd5e1; + border-radius: $radius-sm; + font-size: 13.5px; + outline: none; + transition: all 0.2s; + + &:focus { + border-color: $accent; + box-shadow: 0 0 0 3px rgb(124 58 237 / 15%); + } + } + + .edit-action-buttons { + display: flex; + align-items: center; + gap: 8px; + } +} + +.btn-cancel { + display: inline-flex; + align-items: center; + gap: 6px; + background: white; + color: $text-sub; + border: 1px solid #cbd5e1; + padding: 10px 18px; + border-radius: 30px; + font-size: 13.5px; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + + mat-icon { + font-size: 18px; + height: 18px; + width: 18px; + } + + &:hover { + background: #f1f5f9; + color: $text-main; + } +} + +.btn-declare-accent { + display: inline-flex; + align-items: center; + gap: 8px; + background: linear-gradient(135deg, #10b981 0%, #059669 100%); + color: white; + border: none; + padding: 12px 24px; + border-radius: 30px; + font-size: 14px; + font-weight: 700; + cursor: pointer; + box-shadow: 0 4px 12px rgb(16 185 129 / 25%); + margin-left: auto; + transition: all 0.25s; + + mat-icon { + font-size: 18px; + height: 18px; + width: 18px; } &:hover:not(:disabled) { - background: #5a3309; + transform: translateY(-2px); + box-shadow: 0 6px 18px rgb(16 185 129 / 40%); } &:disabled { - opacity: 0.5; + opacity: 0.6; cursor: not-allowed; } } -.declare-hint { +.hint-text { font-size: 12px; - color: #e53e3e; + color: #dc2626; font-style: italic; + margin-left: auto; } -.btn-edit-counts { - display: inline-flex; - align-items: center; - gap: 6px; - background: #fff; - color: #6b46c1; - border: 2px solid #6b46c1; - padding: 9px 18px; - border-radius: 8px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - transition: - background 0.2s, - color 0.2s; - - mat-icon { - font-size: 18px; - } - - &:hover { - background: #6b46c1; - color: #fff; - } -} - -.btn-cancel-edit { - display: inline-flex; - align-items: center; - gap: 6px; - background: #fff; - color: #718096; - border: 1px solid #cbd5e0; - padding: 9px 16px; - border-radius: 8px; - font-size: 14px; - font-weight: 500; - cursor: pointer; - - mat-icon { - font-size: 18px; - } - - &:hover { - background: #f7fafc; - } -} - -.edit-reason-row { - width: 100%; - margin-bottom: 10px; -} - -.reason-input { - width: 100%; - padding: 9px 14px; - border: 1px solid #d6bcfa; - border-radius: 8px; - font-size: 14px; - color: #2d3748; - outline: none; - transition: - border-color 0.2s, - box-shadow 0.2s; - - &:focus { - border-color: #7c3aed; - box-shadow: 0 0 0 3px rgb(124 58 237 / 15%); - } - - &::placeholder { - color: #a0aec0; - } -} - -/* ── Unopposed Election Banner ── */ -.unopposed-banner { +// ─── Loading & Empty States ─────────────────────────────────────────────────── +.loading-state, +.empty-results-card { + background: white; + border-radius: $radius-lg; + border: 1px solid $border-color; + box-shadow: $shadow-sm; + padding: 64px 24px; + text-align: center; + color: $text-sub; display: flex; + flex-direction: column; align-items: center; - gap: 14px; - background: linear-gradient(135deg, #e6fffa, #b2f5ea); - border: 1px solid #81e6d9; - border-radius: 10px; - padding: 16px 20px; + justify-content: center; + position: relative; + z-index: 2; - mat-icon { - color: #2c7a7b; - font-size: 28px; - height: 28px; - width: 28px; - flex-shrink: 0; + .empty-icon { + font-size: 64px; + height: 64px; + width: 64px; + color: #cbd5e1; + margin-bottom: 20px; + animation: icon-bounce 2s infinite; } - .unopposed-info { - flex: 1; - - strong { - display: block; - font-size: 15px; - font-weight: 700; - color: #234e52; - } - - span { - font-size: 12px; - color: #2c7a7b; - } + h3 { + font-size: 18px; + font-weight: 800; + color: $text-main; + margin: 0 0 10px; } - .unopposed-chip { - background: #2c7a7b; - color: #fff; - padding: 4px 12px; - border-radius: 20px; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.5px; - white-space: nowrap; + p { + font-size: 14px; + color: $text-sub; + max-width: 440px; + line-height: 1.5; + margin: 0; + } +} + +@keyframes icon-bounce { + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-8px); + } +} + +.spinner { + width: 40px; + height: 40px; + border: 4px solid #e2e8f0; + border-top-color: $accent; + border-radius: 50%; + animation: spin 0.8s linear infinite; + margin-bottom: 20px; +} + +@keyframes spin { + to { + transform: rotate(360deg); } } diff --git a/src/app/election/components/election-results/election-results.component.ts b/src/app/election/components/election-results/election-results.component.ts index 83df73eb1..ec64c89b4 100644 --- a/src/app/election/components/election-results/election-results.component.ts +++ b/src/app/election/components/election-results/election-results.component.ts @@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms'; import { RouterModule, ActivatedRoute } from '@angular/router'; import { MatIconModule } from '@angular/material/icon'; import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { catchError, of } from 'rxjs'; import { ElectionService } from '../../election.service'; @@ -32,6 +33,7 @@ export class ElectionResultsComponent implements OnInit { private service = inject(ElectionService); private route = inject(ActivatedRoute); private snackBar = inject(MatSnackBar); + private sanitizer = inject(DomSanitizer); electionId!: number; election: any = null; @@ -46,6 +48,20 @@ export class ElectionResultsComponent implements OnInit { // candidateId → entered vote count manualCounts: Record = {}; + symbolCache: Record = {}; + + readonly candidateColors = [ + '#6366f1', // Indigo + '#10b981', // Emerald + '#f59e0b', // Amber + '#3b82f6', // Blue + '#ec4899', // Pink + '#8b5cf6', // Violet + '#ef4444', // Red + '#06b6d4', // Cyan + '#f97316', // Orange + '#14b8a6' // Teal + ]; ngOnInit(): void { this.electionId = +this.route.snapshot.params['electionId']; @@ -56,9 +72,7 @@ export class ElectionResultsComponent implements OnInit { loadElection(): void { this.service.getElection(this.electionId).subscribe((e) => { this.election = e; - if (this.canEnterManualCounts) { - this.loadCandidates(); - } + this.loadCandidates(); }); } @@ -70,6 +84,7 @@ export class ElectionResultsComponent implements OnInit { .subscribe((data: any[]) => { this.results = data; this.loading = false; + this.loadSymbols(); }); } @@ -85,9 +100,32 @@ export class ElectionResultsComponent implements OnInit { if (c.manualVoteCount != null) anySaved = true; } if (anySaved) this.countsSaved = true; + this.loadSymbols(); }); } + loadSymbols(): void { + // Results: always try — no hasSymbol guard (result objects don't carry it) + for (const r of this.results) { + const cid = r.candidateId; + if (!cid || this.symbolCache[cid] !== undefined) continue; + this.fetchAndCacheSymbol(cid); + } + // Candidates: respect hasSymbol to avoid redundant 404s in manual-entry mode + for (const c of this.candidates) { + const cid = c.id; + if (!cid || this.symbolCache[cid] !== undefined) continue; + if (!c.hasSymbol) continue; + this.fetchAndCacheSymbol(cid); + } + } + + private fetchAndCacheSymbol(cid: number): void { + this.service.getCandidateSymbol(this.electionId, cid).subscribe((base64) => { + this.symbolCache[cid] = base64 ? this.sanitizer.bypassSecurityTrustResourceUrl(base64) : null; + }); + } + groupCandidatesByPost(): { postId: number; postName: string; candidates: any[] }[] { const grouped: Record = {}; for (const c of this.candidates) { @@ -106,7 +144,7 @@ export class ElectionResultsComponent implements OnInit { return hasContested ? 'Save Vote Counts' : 'Confirm Unopposed Election'; } - saveManualCounts(): void { + saveManualVoteCounts(): void { const groups = this.groupCandidatesByPost(); const contestedGroups = groups.filter((g) => g.candidates.length > 1); @@ -163,6 +201,7 @@ export class ElectionResultsComponent implements OnInit { next: (data: any[]) => { this.results = data; this.declaring = false; + this.loadSymbols(); this.snackBar.open('Results declared successfully!', 'Close', { duration: 4000 }); this.loadElection(); }, @@ -205,9 +244,55 @@ export class ElectionResultsComponent implements OnInit { return Math.round((voteCount / total) * 1000) / 10; } - conicGradient(voteCount: number, postResults: any[]): string { - const pct = this.votePercent(voteCount, postResults); - return `conic-gradient(#f59e0b 0% ${pct}%, #e2e8f0 ${pct}% 100%)`; + candidateColor(index: number): string { + return this.candidateColors[index % this.candidateColors.length]; + } + + getPostConicGradient(postResults: any[]): string { + const total = this.totalVotes(postResults); + if (total === 0) return 'conic-gradient(#e2e8f0 0% 100%)'; + + const parts: string[] = []; + let accumulated = 0; + postResults.forEach((r, idx) => { + const pct = ((r.voteCount ?? 0) / total) * 100; + if (pct > 0) { + const color = this.candidateColor(idx); + parts.push(`${color} ${accumulated}% ${accumulated + pct}%`); + accumulated += pct; + } + }); + + if (parts.length === 0) return 'conic-gradient(#e2e8f0 0% 100%)'; + return `conic-gradient(${parts.join(', ')})`; + } + + get kpis(): { totalVotes: number; contestedCount: number; unopposedCount: number } { + let totalVotes = 0; + let contestedCount = 0; + let unopposedCount = 0; + + if (this.results.length > 0) { + const grouped = this.groupByPost(); + totalVotes = this.results.reduce((sum, r) => sum + (r.voteCount ?? 0), 0); + for (const g of grouped) { + if (g.results.length > 1) { + contestedCount++; + } else { + unopposedCount++; + } + } + } else if (this.candidates.length > 0) { + const grouped = this.groupCandidatesByPost(); + for (const g of grouped) { + if (g.candidates.length > 1) { + contestedCount++; + } else { + unopposedCount++; + } + } + } + return { totalVotes, contestedCount, unopposedCount }; } winnersOf(postResults: any[]): any[] {