From 93f4b9b03ff62229f7ee418a87b625333d2601cc Mon Sep 17 00:00:00 2001 From: Jaanu423 Date: Tue, 7 Jul 2026 18:24:18 +0530 Subject: [PATCH] feat(election): dynamic designations, vote remark with voice input, and modal vote panel - Designations loaded dynamically from DirectorDesignation m_code via new API endpoint - Director board dropdown and committee board validation now use DB-driven designation list - Mandatory designation check in committee creation driven by is_mandatory flag from m_code_value - Vote summary panel converted from side drawer to centered modal with backdrop blur - Voting page: remark textarea shown on Approve/Reject with Web Speech API voice input - Voice input supports Hindi (hi-IN) and English (en-IN) with language toggle - NgZone fix: speech callbacks wrapped in zone.run() so Angular change detection fires correctly - Speech recognition uses continuous=true so user can dictate full remarks before stopping Co-Authored-By: Claude Sonnet 4.6 --- .../committee-board.component.html | 174 +- .../committee-board.component.scss | 2083 +++++++++++------ .../committee-board.component.ts | 132 ++ .../director-board.component.ts | 17 +- .../meeting-vote/meeting-vote.component.html | 212 ++ .../meeting-vote/meeting-vote.component.scss | 564 +++++ .../meeting-vote/meeting-vote.component.ts | 209 ++ src/app/election/election-routing.module.ts | 6 + src/app/election/election.service.ts | 29 + src/environments/.env.ts | 4 +- 10 files changed, 2663 insertions(+), 767 deletions(-) create mode 100644 src/app/election/components/meeting-vote/meeting-vote.component.html create mode 100644 src/app/election/components/meeting-vote/meeting-vote.component.scss create mode 100644 src/app/election/components/meeting-vote/meeting-vote.component.ts diff --git a/src/app/election/components/committee-board/committee-board.component.html b/src/app/election/components/committee-board/committee-board.component.html index 8c367cbeb..01519c4fa 100644 --- a/src/app/election/components/committee-board/committee-board.component.html +++ b/src/app/election/components/committee-board/committee-board.component.html @@ -7,6 +7,11 @@ -->
+ +
+
+
+
@@ -149,11 +154,22 @@
@for (m of getMeetings(c.id); track m.id) {
-
- {{ meetingModeIcon(m.mode) }} + +
+
+ {{ meetingModeIcon(m.mode) }} +
+ {{ m.title }} + {{ m.status }}
-
- {{ m.title }} + + +
calendar_today {{ m.meetingDate | date: 'dd MMM yyyy' }} @@ -162,13 +178,6 @@ schedule {{ m.meetingTime }} } - · - {{ m.status }}
@if (m.mode === 'ONLINE' && m.platform) {
@@ -201,13 +210,31 @@
}
-
+ + +
+ @if (m.status === 'COMPLETED') { + + + } @if (c.status === 'ACTIVE') { @if (m.status === 'SCHEDULED') {
} + + +@if (showVotePanel) { +
+
+ +
+
+ how_to_vote +
+
Vote Summary & Resolutions
+ @if (votePanelMeeting) { +
+ {{ votePanelMeeting.title }} · {{ votePanelMeeting.meetingDate | date: 'dd MMM yyyy' }} +
+ } +
+
+
+ + +
+
+ + +
+ @if (voteSummaryLoading) { +
autorenew Loading votes…
+ } @else if (voteSummary.length === 0) { +
+ inbox +

No agenda items found for this meeting.

+
+ } @else { + @for (item of voteSummary; track item.agendaId) { +
+
+ {{ $index + 1 }} + {{ item.agendaItem }} +
+ +
+
+ check_circle{{ item.approvedCount }} Approved +
+
+ cancel{{ item.rejectedCount }} Rejected +
+
+ pause_circle{{ item.abstainCount }} Abstain +
+
+ pending{{ item.pendingCount }} Pending +
+
+ +
+ +
+ + + +
+
+ +
+ +
+
+ } + } +
+ + +
+ + +
+
+} diff --git a/src/app/election/components/committee-board/committee-board.component.scss b/src/app/election/components/committee-board/committee-board.component.scss index 3dff6d090..c6bf996d3 100644 --- a/src/app/election/components/committee-board/committee-board.component.scss +++ b/src/app/election/components/committee-board/committee-board.component.scss @@ -6,152 +6,233 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -$primary: #6366f1; +// ── Theme Variables ────────────────────────────────────────────────── +$primary: #6366f1; // Indigo +$primary-light: #818cf8; $primary-dark: #4f46e5; -$text: #0f172a; -$sub: #64748b; -$bg: #f8fafc; -$border: 1px solid rgb(226 232 240 / 80%); -$radius: 16px; -$shadow: 0 4px 20px rgb(15 23 42 / 8%); -$font: +$accent: #a855f7; // Purple +$accent-dark: #7c3aed; +$text-main: #0f172a; // Slate 900 +$text-sub: #475569; // Slate 600 +$text-muted: #94a3b8; // Slate 400 +$bg-main: #f8fafc; // Slate 50 +$bg-card: rgb(255 255 255 / 75%); +$border-glass: 1px solid rgb(226 232 240 / 70%); +$border-focus: 1px solid rgb(99 102 241 / 50%); +$radius-card: 16px; // Compact: was 20px +$radius-btn: 10px; // Compact: was 12px +$radius-pill: 24px; // Compact: was 30px +$shadow-sm: 0 2px 6px rgb(15 23 42 / 4%); +$shadow-md: 0 8px 24px -8px rgb(15 23 42 / 8%); +$shadow-lg: 0 16px 32px -12px rgb(15 23 42 / 12%); +$shadow-glow: 0 0 16px rgb(99 102 241 / 12%); + +$font-family: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif; +// ── General Layout ─────────────────────────────────────────────────── .committee-page { - padding: 32px; - background: $bg; + position: relative; + padding: 24px; // Compact: was 40px + background: $bg-main; min-height: 100vh; - font-family: $font; - color: $text; + font-family: $font-family; + color: $text-main; box-sizing: border-box; + overflow-x: hidden; } -// ── Header ──────────────────────────────────────────────────────── +// Ambient Background Glows (Slightly smaller blur/blobs) +.ambient-glow { + position: absolute; + border-radius: 50%; + filter: blur(100px); + z-index: 0; + pointer-events: none; + opacity: 0.2; + + &.blob-1 { + top: -10%; + right: 5%; + width: 380px; + height: 380px; + background: radial-gradient(circle, rgb(99 102 241 / 40%) 0%, rgb(168 85 247 / 20%) 100%); + } + + &.blob-2 { + bottom: 10%; + left: -5%; + width: 340px; + height: 340px; + background: radial-gradient(circle, rgb(168 85 247 / 30%) 0%, rgb(99 102 241 / 10%) 100%); + } + + &.blob-3 { + top: 40%; + right: -10%; + width: 300px; + height: 300px; + background: radial-gradient(circle, rgb(99 102 241 / 20%) 0%, rgb(244 63 94 / 15%) 100%); + } +} + +// ── Header Area ────────────────────────────────────────────────────── .page-header { + position: relative; + z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; - margin-bottom: 28px; + margin-bottom: 24px; // Compact: was 36px flex-wrap: wrap; .header-left { display: flex; align-items: center; - gap: 14px; + gap: 12px; } h2 { - font-size: 22px; + font-size: 21px; // Compact: was 26px font-weight: 800; margin: 0 0 3px; - letter-spacing: -0.4px; + letter-spacing: -0.5px; + background: linear-gradient(135deg, $text-main 0%, #3b0764 100%); + background-clip: text; + -webkit-text-fill-color: transparent; } .header-sub { - font-size: 13px; - color: $sub; + font-size: 13px; // Compact: was 14px + color: $text-sub; margin: 0; + font-weight: 500; } } .back-btn { - width: 38px; - height: 38px; + width: 36px; // Compact: was 44px + height: 36px; // Compact: was 44px border-radius: 50%; - background: #fff; - border: $border; + background: rgb(255 255 255 / 85%); + border: $border-glass; display: flex; align-items: center; justify-content: center; text-decoration: none; - color: $sub; - transition: all 0.2s; + color: $text-sub; + box-shadow: $shadow-sm; + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); flex-shrink: 0; + backdrop-filter: blur(8px); mat-icon { - font-size: 18px; + font-size: 18px; // Compact: was 20px height: 18px; width: 18px; + transition: transform 0.2s; } &:hover { - color: $text; + color: $primary-dark; + background: #fff; + box-shadow: $shadow-md; transform: translateX(-2px); + + mat-icon { + transform: scale(1.08); + } } } .btn-create { display: inline-flex; align-items: center; - gap: 7px; + gap: 6px; background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); color: #fff; border: none; - border-radius: 24px; - padding: 10px 20px; - font-size: 14px; + border-radius: $radius-pill; + padding: 8px 18px; // Compact: was 12px 24px + font-size: 13px; // Compact: was 14px font-weight: 600; cursor: pointer; - box-shadow: 0 4px 12px rgb(99 102 241 / 30%); - transition: all 0.2s; + box-shadow: 0 4px 14px rgb(99 102 241 / 20%); + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); mat-icon { - font-size: 18px; + font-size: 18px; // Compact: was 20px height: 18px; width: 18px; } &:hover { - transform: translateY(-1px); - box-shadow: 0 6px 16px rgb(99 102 241 / 40%); + transform: translateY(-1.5px); + box-shadow: 0 6px 18px rgb(99 102 241 / 30%); + background: linear-gradient(135deg, $primary-light 0%, $primary-dark 100%); + } + + &:active { + transform: translateY(0); } } -// ── States ──────────────────────────────────────────────────────── +// ── States ─────────────────────────────────────────────────────────── .loading-state, .empty-state { + position: relative; + z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; - padding: 80px 20px; + padding: 60px 20px; // Compact: was 100px 24px text-align: center; - color: $sub; + color: $text-sub; + background: $bg-card; + backdrop-filter: blur(16px); + border-radius: $radius-card; + border: $border-glass; + box-shadow: $shadow-md; + max-width: 500px; + margin: 30px auto; h3 { - font-size: 18px; + font-size: 17px; // Compact: was 20px font-weight: 700; - color: $text; + color: $text-main; margin: 0; } p { - font-size: 14px; - max-width: 360px; + font-size: 13px; // Compact: was 14px + max-width: 320px; margin: 0; + line-height: 1.5; } } .empty-icon { - font-size: 56px; - height: 56px; - width: 56px; - color: #cbd5e1; + font-size: 48px; // Compact: was 64px + height: 48px; + width: 48px; + color: $primary-light; + opacity: 0.6; } .spinner { - width: 36px; + width: 36px; // Compact: was 44px height: 36px; - border: 3px solid #e2e8f0; + border: 3px solid rgb(99 102 241 / 10%); border-top-color: $primary; border-radius: 50%; - animation: spin 0.8s linear infinite; + animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite; } @keyframes spin { @@ -160,32 +241,59 @@ $font: } } -// ── Grid ────────────────────────────────────────────────────────── +// ── Committees Grid ────────────────────────────────────────────────── .committees-grid { + position: relative; + z-index: 1; display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); // Compact: was 360px + gap: 20px; // Compact: was 28px } -// ── Committee Card ──────────────────────────────────────────────── +// ── Committee Card ─────────────────────────────────────────────────── .committee-card { - background: #fff; - border-radius: $radius; - border: $border; - box-shadow: $shadow; - padding: 20px; + background: $bg-card; + backdrop-filter: blur(16px); + border-radius: $radius-card; + border: $border-glass; + box-shadow: $shadow-md; + padding: 18px; // Compact: was 24px display: flex; flex-direction: column; - gap: 14px; - transition: all 0.25s; + gap: 12px; // Compact: was 16px + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); + position: relative; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; // Compact: was 4px + background: linear-gradient(90deg, $primary 0%, $accent 100%); + opacity: 0; + transition: opacity 0.3s ease; + } &:hover { - box-shadow: 0 8px 28px rgb(15 23 42 / 12%); - transform: translateY(-2px); + box-shadow: $shadow-lg; + transform: translateY(-3px); + border-color: rgb(99 102 241 / 25%); + + &::before { + opacity: 1; + } } &.dissolved { - opacity: 0.65; + opacity: 0.6; + background: rgb(241 245 249 / 60%); + + &::before { + background: #94a3b8; + } } } @@ -196,20 +304,21 @@ $font: } .committee-icon { - width: 46px; - height: 46px; - border-radius: 12px; - background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); + width: 42px; // Compact: was 52px + height: 42px; // Compact: was 52px + border-radius: 10px; // Compact: was 14px + background: linear-gradient(135deg, $primary 0%, $accent 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; + box-shadow: 0 3px 8px rgb(99 102 241 / 15%); mat-icon { - font-size: 22px; - height: 22px; - width: 22px; + font-size: 20px; // Compact: was 24px + height: 20px; + width: 20px; color: #fff; } } @@ -218,15 +327,18 @@ $font: width: 100%; height: 100%; object-fit: cover; - border-radius: 12px; + border-radius: 10px; } .clickable-photo { cursor: zoom-in; - transition: opacity 0.15s; + transition: + transform 0.2s, + opacity 0.2s; &:hover { - opacity: 0.85; + opacity: 0.9; + transform: scale(1.03); } } @@ -235,9 +347,10 @@ $font: min-width: 0; h3 { - font-size: 16px; - font-weight: 700; - margin: 0 0 5px; + font-size: 15px; // Compact: was 18px + font-weight: 750; + margin: 0 0 4px; + color: $text-main; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -245,17 +358,31 @@ $font: } .status-chip { - font-size: 10px; + font-size: 8px; // Compact: was 9px font-weight: 700; - padding: 2px 9px; - border-radius: 10px; + padding: 2px 8px; // Compact: was 3px 10px + border-radius: $radius-pill; text-transform: uppercase; - letter-spacing: 0.3px; + letter-spacing: 0.5px; + display: inline-block; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%); +} + +.statusColor { + &.active { + background: rgb(16 185 129 / 12%) !important; + color: #10b981 !important; + } + + &.dissolved { + background: rgb(148 163 184 / 12%) !important; + color: #94a3b8 !important; + } } .committee-desc { - font-size: 13px; - color: $sub; + font-size: 13px; // Compact: was 14px + color: $text-sub; margin: 0; line-height: 1.5; } @@ -264,38 +391,50 @@ $font: display: flex; align-items: center; gap: 6px; - font-size: 13px; + font-size: 12px; // Compact: was 13px font-weight: 600; - color: $sub; + color: $text-sub; mat-icon { - font-size: 16px; + font-size: 16px; // Compact: was 18px height: 16px; width: 16px; + color: $primary-light; } } -// ── Member Avatars (stacked) ────────────────────────────────────── +// ── Overlapping Member Avatars ─────────────────────────────────────── .member-avatars { display: flex; - flex-direction: row; + align-items: center; + padding-left: 6px; + margin-bottom: 2px; } .member-avatar { - width: 36px; - height: 36px; + width: 30px; // Compact: was 36px + height: 30px; // Compact: was 36px border-radius: 50%; - background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); + background: linear-gradient(135deg, $primary-light 0%, $accent 100%); color: #fff; - font-size: 14px; + font-size: 11px; // Compact: was 13px font-weight: 700; display: flex; align-items: center; justify-content: center; - border: 2px solid #fff; - margin-left: -8px; + border: 2px solid #fff; // Compact: was 3px + margin-left: -8px; // Compact: was -10px overflow: hidden; flex-shrink: 0; + box-shadow: 0 1px 4px rgb(0 0 0 / 6%); + transition: + transform 0.2s ease, + z-index 0.2s; + + &:hover { + transform: translateY(-3px) scale(1.08); + z-index: 10; + } &:first-child { margin-left: 0; @@ -305,51 +444,52 @@ $font: width: 100%; height: 100%; object-fit: cover; - border-radius: 50%; } } .more-avatar { - background: #e2e8f0; - color: $sub; - font-size: 11px; - font-weight: 700; + background: #f1f5f9; + color: $text-sub; + font-size: 10px; + font-weight: 600; + border-color: #fff; } -// ── Member List ─────────────────────────────────────────────────── +// ── Detailed Member List ───────────────────────────────────────────── .member-list { display: flex; flex-direction: column; - gap: 8px; - border-top: $border; - padding-top: 12px; + gap: 8px; // Compact: was 10px + border-top: $border-glass; + padding-top: 12px; // Compact: was 16px } .member-row { display: flex; align-items: center; gap: 10px; + padding: 2px 0; } .member-avatar-sm { - width: 32px; - height: 32px; + width: 28px; // Compact: was 34px + height: 28px; // Compact: was 34px border-radius: 50%; - background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); + background: linear-gradient(135deg, $primary 0%, $accent 100%); color: #fff; - font-size: 13px; + font-size: 11px; // Compact: was 12px font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; + box-shadow: $shadow-sm; img { width: 100%; height: 100%; object-fit: cover; - border-radius: 50%; } } @@ -359,533 +499,29 @@ $font: .member-name { display: block; - font-size: 13px; + font-size: 13px; // Compact: was 14px font-weight: 600; - color: $text; + color: $text-main; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-desig { - display: block; - font-size: 11px; - color: $sub; + display: inline-block; + font-size: 10px; // Compact: was 11px + font-weight: 650; + color: $accent-dark; + background: rgb(168 85 247 / 7%); + padding: 0 6px; + border-radius: $radius-pill; margin-top: 1px; } } -// ── Card Actions ────────────────────────────────────────────────── -.card-actions { - display: flex; - gap: 8px; - margin-top: auto; -} - -.btn-edit { - flex: 1; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - padding: 8px 0; - border: $border; - border-radius: 8px; - background: #fff; - font-size: 13px; - font-weight: 600; - color: $text; - cursor: pointer; - transition: background 0.15s; - - mat-icon { - font-size: 15px; - height: 15px; - width: 15px; - } - - &:hover { - background: #f1f5f9; - } -} - -.btn-dissolve { - flex: 1; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 4px; - padding: 8px 0; - border: 1px solid #fecaca; - border-radius: 8px; - background: #fff; - font-size: 13px; - font-weight: 600; - color: #ef4444; - cursor: pointer; - transition: background 0.15s; - - mat-icon { - font-size: 15px; - height: 15px; - width: 15px; - } - - &:hover { - background: #fef2f2; - } -} - -.dissolved-label { - display: flex; - align-items: center; - gap: 5px; - font-size: 13px; - font-weight: 600; - color: #94a3b8; - - mat-icon { - font-size: 16px; - height: 16px; - width: 16px; - } -} - -// ── Drawer ──────────────────────────────────────────────────────── -.overlay { - position: fixed; - inset: 0; - background: rgb(0 0 0 / 30%); - z-index: 100; - backdrop-filter: blur(2px); -} - -.form-drawer { - position: fixed; - top: 0; - right: 0; - bottom: 0; - width: 460px; - max-width: 100vw; - background: #fff; - z-index: 101; - display: flex; - flex-direction: column; - box-shadow: -8px 0 32px rgb(0 0 0 / 15%); -} - -.drawer-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 20px 24px; - border-bottom: $border; - flex-shrink: 0; - - h3 { - font-size: 18px; - font-weight: 700; - margin: 0; - } -} - -.close-btn { - width: 32px; - height: 32px; - border-radius: 50%; - border: none; - background: #f1f5f9; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - color: $sub; - - mat-icon { - font-size: 18px; - height: 18px; - width: 18px; - } - - &:hover { - background: #e2e8f0; - color: $text; - } -} - -.drawer-body { - flex: 1; - overflow-y: auto; - padding: 24px; - display: flex; - flex-direction: column; - gap: 16px; -} - -// ── Image Upload ────────────────────────────────────────────────── -.image-upload-section { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - padding: 16px 0 8px; -} - -.image-upload-ring { - width: 90px; - height: 90px; - border-radius: 50%; - border: 2px dashed #cbd5e1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - cursor: pointer; - position: relative; - overflow: hidden; - transition: - border-color 0.2s, - background 0.2s; - background: #f8fafc; - - &:hover { - border-color: $primary; - background: rgb(99 102 241 / 4%); - - .upload-overlay { - opacity: 1; - } - } -} - -.upload-preview { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 50%; -} - -.upload-overlay { - position: absolute; - inset: 0; - border-radius: 50%; - background: rgb(0 0 0 / 45%); - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - opacity: 0; - transition: opacity 0.2s; - - mat-icon { - color: #fff; - font-size: 22px; - height: 22px; - width: 22px; - } - - .view-icon { - font-size: 20px; - height: 20px; - width: 20px; - opacity: 0.85; - cursor: zoom-in; - - &:hover { - opacity: 1; - transform: scale(1.1); - } - } -} - -.upload-placeholder-icon { - font-size: 28px; - height: 28px; - width: 28px; - color: #94a3b8; - margin-bottom: 2px; -} - -.upload-placeholder-text { - font-size: 10px; - font-weight: 600; - color: #94a3b8; - letter-spacing: 0.3px; -} - -.btn-remove-image { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 4px 12px; - border: 1px solid #fecaca; - border-radius: 20px; - background: #fff; - font-size: 12px; - font-weight: 600; - color: #ef4444; - cursor: pointer; - transition: background 0.15s; - - mat-icon { - font-size: 14px; - height: 14px; - width: 14px; - } - - &:hover { - background: #fef2f2; - } -} - -.form-group { - display: flex; - flex-direction: column; - gap: 5px; - - label { - font-size: 12px; - font-weight: 600; - color: $sub; - text-transform: uppercase; - letter-spacing: 0.4px; - } - - input, - textarea { - padding: 10px 12px; - border: $border; - border-radius: 8px; - font-size: 14px; - color: $text; - font-family: $font; - outline: none; - transition: border-color 0.15s; - resize: vertical; - - &:focus { - border-color: $primary; - box-shadow: 0 0 0 3px rgb(99 102 241 / 10%); - } - - &.input-error { - border-color: #ef4444; - } - } -} - -.error-msg { - font-size: 11px; - color: #ef4444; - margin-top: 2px; -} - -.req { - color: #ef4444; -} - -.section-title { - font-size: 11px; - font-weight: 700; - color: $sub; - text-transform: uppercase; - letter-spacing: 0.5px; - padding-bottom: 6px; - border-bottom: $border; -} - -.loading-inline { - display: flex; - align-items: center; - gap: 10px; - color: $sub; - font-size: 13px; -} - -.spinner-sm { - width: 20px; - height: 20px; - border: 2px solid #e2e8f0; - border-top-color: $primary; - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -.empty-directors { - display: flex; - align-items: center; - gap: 8px; - padding: 14px; - background: #f8fafc; - border-radius: 10px; - font-size: 13px; - color: $sub; - - mat-icon { - font-size: 18px; - height: 18px; - width: 18px; - } -} - -// ── Director Selection List ─────────────────────────────────────── -.director-select-list { - display: flex; - flex-direction: column; - gap: 6px; -} - -.director-option { - display: flex; - align-items: center; - gap: 12px; - padding: 10px 12px; - border: $border; - border-radius: 10px; - cursor: pointer; - transition: all 0.15s; - background: #fff; - - &:hover { - border-color: $primary; - background: rgb(99 102 241 / 2%); - } - - &.selected { - border-color: $primary; - background: rgb(99 102 241 / 5%); - } -} - -.dir-avatar { - width: 38px; - height: 38px; - border-radius: 50%; - background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); - color: #fff; - font-size: 15px; - font-weight: 700; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - overflow: hidden; - - img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 50%; - } -} - -.dir-info { - flex: 1; - min-width: 0; - - .dir-name { - display: block; - font-size: 14px; - font-weight: 600; - color: $text; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .dir-desig { - display: block; - font-size: 11px; - color: $sub; - margin-top: 1px; - } -} - -.dir-check { - flex-shrink: 0; - - .check-icon { - font-size: 20px; - height: 20px; - width: 20px; - color: $primary; - } - - .uncheck-icon { - font-size: 20px; - height: 20px; - width: 20px; - color: #cbd5e1; - } -} - -.selected-count { - font-size: 12px; - font-weight: 600; - color: $primary; - text-align: right; -} - -// ── Footer ──────────────────────────────────────────────────────── -.drawer-footer { - display: flex; - gap: 10px; - padding: 16px 24px; - border-top: $border; - flex-shrink: 0; -} - -.btn-cancel { - flex: 1; - padding: 10px; - border: $border; - border-radius: 10px; - background: #fff; - font-size: 14px; - font-weight: 600; - color: $sub; - cursor: pointer; - - &:hover { - background: #f1f5f9; - } -} - -.btn-save { - flex: 2; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - padding: 10px; - border: none; - border-radius: 10px; - background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); - color: #fff; - font-size: 14px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 10px rgb(99 102 241 / 25%); - - mat-icon { - font-size: 16px; - height: 16px; - width: 16px; - } - - &:hover:not(:disabled) { - transform: translateY(-1px); - } - - &:disabled { - opacity: 0.6; - cursor: not-allowed; - } -} - -// ── Meetings Section ────────────────────────────────────────────── +// ── Collapsible Meetings Panel ──────────────────────────────────────── .meetings-section { - border-top: $border; + border-top: $border-glass; margin-top: 4px; } @@ -894,21 +530,22 @@ $font: align-items: center; gap: 6px; width: 100%; - padding: 10px 4px; + padding: 10px 2px; // Compact: was 14px 4px background: none; border: none; cursor: pointer; - font-size: 13px; - font-weight: 600; - color: $sub; + font-size: 13px; // Compact: was 14px + font-weight: 700; + color: $text-sub; text-align: left; - transition: color 0.15s; + transition: all 0.2s ease; mat-icon { font-size: 16px; height: 16px; width: 16px; - color: $sub; + color: $text-muted; + transition: color 0.2s; } .chevron { @@ -916,53 +553,72 @@ $font: font-size: 18px; height: 18px; width: 18px; + color: $text-muted; transition: transform 0.2s; } &.expanded { - color: $primary; + color: $primary-dark; mat-icon { - color: $primary; + color: $primary-dark; } } &:hover { - color: $text; + color: $text-main; + + mat-icon { + color: $text-main; + } } } .meeting-count-badge { background: $primary; color: #fff; - font-size: 10px; + font-size: 9px; font-weight: 700; - padding: 1px 6px; - border-radius: 10px; - min-width: 18px; + padding: 1px 5px; + border-radius: $radius-pill; + min-width: 15px; text-align: center; + box-shadow: 0 2px 4px rgb(99 102 241 / 25%); } .meetings-panel { - padding: 4px 0 8px; + padding: 2px 0 10px; display: flex; flex-direction: column; - gap: 8px; + gap: 10px; // Compact: was 12px + animation: slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +@keyframes slide-down { + from { + opacity: 0; + transform: translateY(-6px); + } + + to { + opacity: 1; + transform: translateY(0); + } } .btn-schedule { display: inline-flex; align-items: center; gap: 4px; - padding: 6px 12px; - border: 1px dashed #a5b4fc; + padding: 6px 12px; // Compact: was 8px 16px + border: 1.5px dashed rgb(99 102 241 / 30%); border-radius: 8px; - background: rgb(99 102 241 / 4%); - color: $primary; - font-size: 12px; - font-weight: 600; + background: rgb(99 102 241 / 3%); + color: $primary-dark; + font-size: 11px; // Compact: was 12px + font-weight: 650; cursor: pointer; - transition: all 0.15s; + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); align-self: flex-start; mat-icon { @@ -972,8 +628,9 @@ $font: } &:hover { - background: rgb(99 102 241 / 10%); + background: rgb(99 102 241 / 6%); border-color: $primary; + box-shadow: $shadow-glow; } } @@ -981,9 +638,12 @@ $font: display: flex; align-items: center; gap: 6px; - padding: 10px 0; + padding: 10px 12px; // Compact font-size: 12px; - color: #94a3b8; + color: $text-muted; + background: rgb(241 245 249 / 40%); + border-radius: 8px; + border: 1px solid rgb(226 232 240 / 40%); mat-icon { font-size: 16px; @@ -995,24 +655,31 @@ $font: .meeting-list { display: flex; flex-direction: column; - gap: 6px; + gap: 8px; } .meeting-row { display: flex; align-items: flex-start; - gap: 8px; - padding: 8px 10px; + gap: 10px; + padding: 10px 12px; // Compact: was 12px 14px background: #f8fafc; - border-radius: 8px; - border: $border; + border-radius: 10px; // Compact: was 12px + border: 1px solid #e2e8f0; + transition: all 0.2s ease; + + &:hover { + background: #f1f5f9; + border-color: #cbd5e1; + transform: translateX(1px); + } } .meeting-mode-icon { - width: 28px; - height: 28px; + width: 28px; // Compact: was 32px + height: 28px; // Compact: was 32px border-radius: 8px; - background: rgb(99 102 241 / 10%); + background: rgb(99 102 241 / 6%); display: flex; align-items: center; justify-content: center; @@ -1033,55 +700,61 @@ $font: .meeting-title { display: block; - font-size: 13px; - font-weight: 600; - color: $text; + font-size: 13px; // Compact: was 14px + font-weight: 700; + color: $text-main; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + margin-bottom: 2px; } .meeting-meta-row { display: flex; align-items: center; - gap: 4px; + gap: 5px; flex-wrap: wrap; - margin-top: 3px; - font-size: 11px; - color: $sub; + font-size: 11px; // Compact: was 12px + color: $text-sub; + font-weight: 500; .meta-icon { - font-size: 11px; - height: 11px; - width: 11px; + font-size: 12px; + height: 12px; + width: 12px; + color: $text-muted; } .meta-sep { color: #cbd5e1; + font-weight: 300; } } .meeting-status-chip { - font-size: 9px; - font-weight: 700; + font-size: 8px; + font-weight: 750; padding: 1px 6px; - border-radius: 8px; + border-radius: 5px; text-transform: uppercase; - letter-spacing: 0.3px; + letter-spacing: 0.4px; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%); } .meeting-platform-row { display: flex; align-items: center; - gap: 4px; - margin-top: 3px; + gap: 5px; + margin-top: 4px; font-size: 11px; - color: $sub; + color: $text-sub; + font-weight: 500; .meta-icon { - font-size: 11px; - height: 11px; - width: 11px; + font-size: 12px; + height: 12px; + width: 12px; + color: $text-muted; } } @@ -1089,11 +762,15 @@ $font: display: inline-flex; align-items: center; gap: 2px; - color: $primary; + color: $primary-dark; font-size: 11px; - font-weight: 600; + font-weight: 700; text-decoration: none; margin-left: 4px; + padding: 1px 6px; + border-radius: 5px; + background: rgb(99 102 241 / 5%); + transition: all 0.2s; mat-icon { font-size: 11px; @@ -1102,20 +779,22 @@ $font: } &:hover { - text-decoration: underline; + background: rgb(99 102 241 / 10%); + text-decoration: none; + box-shadow: $shadow-sm; } } .meeting-actions { display: flex; align-items: center; - gap: 2px; + gap: 3px; flex-shrink: 0; } .btn-icon { - width: 24px; - height: 24px; + width: 24px; // Compact: was 28px + height: 24px; // Compact: was 28px border-radius: 6px; border: none; background: none; @@ -1123,8 +802,69 @@ $font: align-items: center; justify-content: center; cursor: pointer; - color: $sub; - transition: all 0.15s; + color: $text-sub; + transition: all 0.2s; + + mat-icon { + font-size: 14px; + height: 14px; + width: 14px; + } + + &:hover { + background: #e2e8f0; + color: $text-main; + } + + &.green:hover { + background: #dcfce7; + color: #10b981; + } + + &.red:hover { + background: #fee2e2; + color: #f59e0b; + } + + &.danger:hover { + background: rgb(239 68 68 / 10%); + color: #ef4444; + } + + &.purple:hover { + background: rgb(124 58 237 / 10%); + color: #7c3aed; + } +} + +// ── Card Actions (Bottom) ──────────────────────────────────────────── +.card-actions { + display: flex; + gap: 10px; + margin-top: auto; + border-top: $border-glass; + padding-top: 12px; +} + +.btn-edit, +.btn-dissolve { + flex: 1; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + padding: 8px 0; // Compact: was 10px + border-radius: 8px; // Compact: was 10px + font-size: 12px; // Compact: was 13px + font-weight: 700; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); +} + +.btn-edit { + border: 1px solid #e2e8f0; + background: #fff; + color: $text-sub; mat-icon { font-size: 14px; @@ -1134,28 +874,509 @@ $font: &:hover { background: #f1f5f9; - color: $text; - } - - &.green:hover { - background: #dcfce7; - color: #10b981; - } - - &.red:hover { - background: #fef9c3; - color: #f59e0b; - } - - &.danger:hover { - background: #fee2e2; - color: #ef4444; + color: $text-main; + border-color: #cbd5e1; + box-shadow: $shadow-sm; } } -// ── Meeting Drawer ──────────────────────────────────────────────── +.btn-dissolve { + border: 1px solid rgb(239 68 68 / 15%); + background: rgb(239 68 68 / 1%); + color: #ef4444; + + mat-icon { + font-size: 14px; + height: 14px; + width: 14px; + } + + &:hover { + background: rgb(239 68 68 / 6%); + border-color: #ef4444; + box-shadow: 0 3px 8px rgb(239 68 68 / 8%); + } +} + +.dissolved-label { + display: flex; + align-items: center; + gap: 5px; + font-size: 12px; + font-weight: 700; + color: $text-muted; + background: rgb(148 163 184 / 6%); + padding: 5px 12px; + border-radius: 6px; + + mat-icon { + font-size: 16px; + height: 16px; + width: 16px; + } +} + +// ── Overlays, Drawers and Modals (Glassmorphic) ────────────────────── +.overlay { + position: fixed; + inset: 0; + background: rgb(15 23 42 / 30%); // Less dark overlay + z-index: 100; + backdrop-filter: blur(6px); + animation: fade-in 0.3s ease forwards; +} + +@keyframes fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.form-drawer { + position: fixed; + top: 0; + right: 0; + bottom: 0; + width: 410px; // Compact: was 480px + max-width: 100vw; + background: rgb(255 255 255 / 95%); + backdrop-filter: blur(20px); + z-index: 101; + display: flex; + flex-direction: column; + box-shadow: -8px 0 30px rgb(15 23 42 / 12%); + border-left: $border-glass; + animation: slide-in-right 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +@keyframes slide-in-right { + from { + transform: translateX(100%); + } + + to { + transform: translateX(0); + } +} + +.drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 20px; // Compact: was 24px + border-bottom: $border-glass; + flex-shrink: 0; + + h3 { + font-size: 17px; // Compact: was 20px + font-weight: 800; + margin: 0; + background: linear-gradient(135deg, $text-main 0%, $accent-dark 100%); + background-clip: text; + -webkit-text-fill-color: transparent; + } +} + +.close-btn { + width: 30px; // Compact: was 36px + height: 30px; // Compact: was 36px + border-radius: 50%; + border: none; + background: #f1f5f9; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: $text-sub; + transition: all 0.2s; + + mat-icon { + font-size: 18px; // Compact: was 20px + height: 18px; + width: 18px; + } + + &:hover { + background: #e2e8f0; + color: $text-main; + transform: rotate(90deg); + } +} + +.drawer-body { + flex: 1; + overflow-y: auto; + padding: 20px; // Compact: was 24px + display: flex; + flex-direction: column; + gap: 16px; // Compact: was 20px + + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: rgb(99 102 241 / 20%); + border-radius: 2px; + } +} + +// ── Image Upload Component ─────────────────────────────────────────── +.image-upload-section { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + padding: 10px 0; +} + +.image-upload-ring { + width: 90px; // Compact: was 110px + height: 90px; // Compact: was 110px + border-radius: 50%; + border: 2px dashed #cbd5e1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; + overflow: hidden; + transition: all 0.25s ease; + background: #f8fafc; + box-shadow: inset 0 2px 4px rgb(0 0 0 / 3%); + + &:hover { + border-color: $primary; + background: rgb(99 102 241 / 3%); + box-shadow: $shadow-glow; + + .upload-overlay { + opacity: 1; + } + } +} + +.upload-preview { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.upload-overlay { + position: absolute; + inset: 0; + border-radius: 50%; + background: rgb(15 23 42 / 60%); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + opacity: 0; + transition: opacity 0.25s; + + mat-icon { + color: #fff; + font-size: 20px; + height: 20px; + width: 20px; + } + + .view-icon { + font-size: 18px; + height: 18px; + width: 18px; + opacity: 0.85; + cursor: zoom-in; + + &:hover { + opacity: 1; + transform: scale(1.1); + } + } +} + +.upload-placeholder-icon { + font-size: 26px; // Compact: was 32px + height: 26px; + width: 26px; + color: $text-muted; + margin-bottom: 2px; +} + +.upload-placeholder-text { + font-size: 10px; + font-weight: 700; + color: $text-muted; + letter-spacing: 0.4px; +} + +.btn-remove-image { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 5px 12px; // Compact + border: 1px solid rgb(239 68 68 / 20%); + border-radius: 16px; + background: #fff; + font-size: 11px; + font-weight: 600; + color: #ef4444; + cursor: pointer; + transition: all 0.2s; + + mat-icon { + font-size: 13px; + height: 13px; + width: 13px; + } + + &:hover { + background: rgb(239 68 68 / 5%); + box-shadow: $shadow-sm; + } +} + +// ── Interactive Form Controls ─────────────────────────────────────── +.form-group { + display: flex; + flex-direction: column; + gap: 4px; + + label { + font-size: 10px; // Compact: was 11px + font-weight: 700; + color: $text-sub; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + input, + textarea { + padding: 10px 12px; // Compact: was 12px 14px + border: 1.5px solid #e2e8f0; + border-radius: 8px; + font-size: 13px; // Compact: was 14px + color: $text-main; + font-family: $font-family; + outline: none; + transition: all 0.2s ease; + background: #fff; + + &:focus { + border-color: $primary; + box-shadow: 0 0 0 3px rgb(99 102 241 / 8%); + } + + &.input-error { + border-color: #ef4444; + + &:focus { + box-shadow: 0 0 0 3px rgb(239 68 68 / 8%); + } + } + } +} + +.error-msg { + font-size: 11px; + color: #ef4444; + margin-top: 1px; + font-weight: 500; +} + +.req { + color: #ef4444; + margin-left: 2px; +} + +.section-title { + font-size: 10px; // Compact: was 11px + font-weight: 850; + color: $text-sub; + text-transform: uppercase; + letter-spacing: 0.7px; + padding-bottom: 6px; + border-bottom: $border-glass; + margin-top: 6px; +} + +// ── Director Select List (Interactive Cards) ───────────────────────── +.director-select-list { + display: flex; + flex-direction: column; + gap: 6px; +} + +.director-option { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; // Compact: was 12px 14px + border: 1.5px solid #e2e8f0; + border-radius: 10px; + cursor: pointer; + transition: all 0.2s ease; + background: #fff; + + &:hover { + border-color: $primary; + background: rgb(99 102 241 / 2%); + } + + &.selected { + border-color: $primary; + background: rgb(99 102 241 / 4%); + box-shadow: 0 3px 8px rgb(99 102 241 / 3%); + } +} + +.dir-avatar { + width: 34px; // Compact: was 42px + height: 34px; // Compact: was 42px + border-radius: 50%; + background: linear-gradient(135deg, $primary-light 0%, $accent 100%); + color: #fff; + font-size: 14px; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + box-shadow: $shadow-sm; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } +} + +.dir-info { + flex: 1; + min-width: 0; + + .dir-name { + display: block; + font-size: 13px; // Compact: was 14px + font-weight: 700; + color: $text-main; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .dir-desig { + display: block; + font-size: 10px; + color: $text-sub; + margin-top: 1px; + font-weight: 500; + } +} + +.dir-check { + flex-shrink: 0; + + .check-icon { + font-size: 18px; // Compact: was 22px + height: 18px; + width: 18px; + color: $primary; + } + + .uncheck-icon { + font-size: 18px; // Compact: was 22px + height: 18px; + width: 18px; + color: #cbd5e1; + } +} + +.selected-count { + font-size: 12px; + font-weight: 700; + color: $primary-dark; + text-align: right; + margin-top: 2px; +} + +// ── Drawer Footer ──────────────────────────────────────────────────── +.drawer-footer { + display: flex; + gap: 10px; + padding: 14px 20px; // Compact: was 20px 24px + border-top: $border-glass; + flex-shrink: 0; + background: #fafbfe; +} + +.btn-cancel { + flex: 1; + padding: 10px; + border: 1.5px solid #e2e8f0; + border-radius: 10px; + background: #fff; + font-size: 13px; + font-weight: 700; + color: $text-sub; + cursor: pointer; + transition: all 0.2s; + + &:hover { + background: #f1f5f9; + color: $text-main; + border-color: #cbd5e1; + } +} + +.btn-save { + flex: 2; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 10px; + border: none; + border-radius: 10px; + background: linear-gradient(135deg, $primary 0%, $primary-dark 100%); + color: #fff; + font-size: 13px; + font-weight: 700; + cursor: pointer; + box-shadow: 0 3px 10px rgb(99 102 241 / 20%); + transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); + + mat-icon { + font-size: 16px; + height: 16px; + width: 16px; + } + + &:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: 0 5px 14px rgb(99 102 241 / 25%); + } + + &:disabled { + opacity: 0.55; + cursor: not-allowed; + } +} + +// ── Meeting Drawer specific sizing ─────────────────────────────────── .meeting-drawer { - width: 500px; + width: 440px; // Compact: was 520px } .mode-toggle { @@ -1170,14 +1391,14 @@ $font: justify-content: center; gap: 6px; padding: 10px; - border: $border; + border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; - font-size: 13px; - font-weight: 600; - color: $sub; + font-size: 12px; + font-weight: 700; + color: $text-sub; cursor: pointer; - transition: all 0.15s; + transition: all 0.2s ease; mat-icon { font-size: 16px; @@ -1187,38 +1408,39 @@ $font: &.active { border-color: $primary; - background: rgb(99 102 241 / 6%); + background: rgb(99 102 241 / 5%); color: $primary; } &:hover:not(.active) { background: #f8fafc; + border-color: #cbd5e1; } } .mode-fields-group { display: flex; flex-direction: column; - gap: 12px; - padding: 14px; + gap: 10px; + padding: 12px; border-radius: 10px; - border: $border; + border: 1.5px solid rgb(226 232 240 / 80%); background: #f8fafc; } .mode-label { display: flex; align-items: center; - gap: 6px; - font-size: 11px; - font-weight: 700; + gap: 4px; + font-size: 10px; + font-weight: 800; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.6px; mat-icon { - font-size: 15px; - height: 15px; - width: 15px; + font-size: 14px; + height: 14px; + width: 14px; } &.online-label { @@ -1241,10 +1463,10 @@ $font: .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; - gap: 12px; + gap: 10px; } -// ── Agenda Items ────────────────────────────────────────────────── +// ── Agenda Items list design ───────────────────────────────────────── .agenda-list { display: flex; flex-direction: column; @@ -1259,8 +1481,9 @@ $font: .agenda-num { font-size: 12px; - color: #94a3b8; - min-width: 18px; + font-weight: 700; + color: $text-muted; + min-width: 16px; text-align: right; flex-shrink: 0; } @@ -1281,16 +1504,16 @@ $font: justify-content: center; border-radius: 6px; flex-shrink: 0; - transition: background 0.15s; + transition: all 0.2s; mat-icon { - font-size: 20px; - height: 20px; - width: 20px; + font-size: 18px; + height: 18px; + width: 18px; } &:hover { - background: #fef2f2; + background: rgb(239 68 68 / 6%); } } @@ -1299,16 +1522,15 @@ $font: align-items: center; gap: 4px; background: none; - border: 1px dashed #cbd5e1; + border: 1.5px dashed #cbd5e1; border-radius: 8px; cursor: pointer; - color: #6366f1; + color: $primary-dark; padding: 6px 12px; - font-size: 12px; - font-weight: 600; - transition: - border-color 0.15s, - background 0.15s; + font-size: 11px; + font-weight: 700; + transition: all 0.2s; + align-self: flex-start; mat-icon { font-size: 16px; @@ -1317,33 +1539,406 @@ $font: } &:hover { - border-color: #6366f1; - background: #eef2ff; + border-color: $primary; + background: rgb(99 102 241 / 3%); } } -.meeting-agenda-preview { +// ── Vote Summary & Resolution Modal (Glassmorphic) ─────────────────── +.modal-backdrop { + position: fixed; + inset: 0; + background: rgb(15 23 42 / 30%); + z-index: 200; + backdrop-filter: blur(6px); +} + +.vote-modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 201; + width: min(840px, calc(100vw - 24px)); // Compact: was 920px + max-height: calc(100vh - 48px); // Compact + background: rgb(255 255 255 / 95%); + backdrop-filter: blur(24px); + border-radius: 16px; // Compact: was 24px + box-shadow: 0 20px 50px rgb(15 23 42 / 20%); + border: $border-glass; + display: flex; + flex-direction: column; + overflow: hidden; + animation: zoom-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; +} + +@keyframes zoom-in { + from { + opacity: 0; + transform: translate(-50%, -46%) scale(0.96); + } + + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} + +.vm-header { display: flex; align-items: center; - gap: 4px; - font-size: 12px; - color: #64748b; - margin-top: 2px; + justify-content: space-between; + gap: 12px; + padding: 14px 18px; // Compact: was 20px 24px + background: linear-gradient(135deg, rgb(99 102 241 / 8%) 0%, rgb(168 85 247 / 8%) 100%); + border-bottom: 1px solid rgb(124 58 237 / 15%); + flex-shrink: 0; - .meta-icon { + .vm-header-left { + display: flex; + align-items: center; + gap: 10px; + } + + .vm-icon { + font-size: 24px; // Compact: was 28px + width: 24px; + height: 24px; + color: $accent-dark; + flex-shrink: 0; + } + + .vm-title { + font-size: 15px; // Compact: was 18px + font-weight: 800; + color: $text-main; + line-height: 1.2; + } + + .vm-subtitle { + font-size: 11px; // Compact: was 13px + font-weight: 600; + color: $accent-dark; + margin-top: 2px; + } + + .vm-header-right { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + } +} + +.vm-close { + width: 28px; // Compact: was 32px + height: 28px; + border-radius: 50%; + border: none; + background: rgb(15 23 42 / 6%); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: $text-sub; + flex-shrink: 0; + transition: all 0.2s; + + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + } + + &:hover { + background: rgb(15 23 42 / 12%); + color: $text-main; + transform: rotate(90deg); + } +} + +.vm-body { + flex: 1; + overflow-y: auto; + min-height: 0; + padding: 16px; // Compact: was 24px + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); // Compact + gap: 14px; // Compact: was 20px + align-content: start; + + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: rgb(124 58 237 / 20%); + border-radius: 2px; + } +} + +.vm-footer { + display: flex; + gap: 10px; + padding: 12px 18px; // Compact: was 16px 24px + border-top: 1px solid #e2e8f0; + flex-shrink: 0; + background: #fafbfe; + justify-content: flex-end; +} + +.btn-resend { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 6px 12px; // Compact: was 8px 16px + background: linear-gradient(135deg, $accent 0%, $accent-dark 100%); + color: #fff; + border: none; + border-radius: 6px; + font-size: 11px; // Compact + font-weight: 700; + cursor: pointer; + white-space: nowrap; + transition: all 0.25s; + box-shadow: 0 3px 8px rgb(168 85 247 / 15%); + + mat-icon { font-size: 14px; - height: 14px; width: 14px; + height: 14px; + } + + &:hover:not(:disabled) { + transform: translateY(-1px); + box-shadow: 0 5px 12px rgb(168 85 247 / 25%); + } + + &:disabled { + opacity: 0.55; + cursor: not-allowed; + } +} + +.vote-item-card { + background: #fff; + border: 1.5px solid #e2e8f0; + border-radius: 12px; // Compact + box-shadow: $shadow-sm; + overflow: hidden; + transition: all 0.25s ease; + display: flex; + flex-direction: column; + + &:hover { + border-color: rgb(124 58 237 / 20%); + box-shadow: $shadow-md; + } + + .vi-header { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 12px; // Compact: was 16px + background: #f8fafc; + border-bottom: 1.5px solid #e2e8f0; + + .vi-num { + background: $accent-dark; + color: #fff; + border-radius: 50%; + width: 20px; // Compact: was 24px + height: 20px; // Compact: was 24px + min-width: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; // Compact + font-weight: 700; + box-shadow: 0 2px 4px rgb(124 58 237 / 20%); + } + + .vi-label { + font-size: 12px; // Compact: was 14px + font-weight: 700; + color: $text-main; + line-height: 1.4; + } + } +} + +.vote-counts { + display: flex; + gap: 6px; + padding: 10px 12px; // Compact: was 14px 16px + flex-wrap: wrap; + border-bottom: 1px solid #f1f5f9; + + .vc { + display: flex; + align-items: center; + gap: 3px; + font-size: 11px; // Compact: was 12px + font-weight: 700; + padding: 3px 8px; // Compact + border-radius: 20px; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%); + + mat-icon { + font-size: 12px; + width: 12px; + height: 12px; + } + + &.approved { + background: #dcfce7; + color: #15803d; + } + + &.rejected { + background: #fee2e2; + color: #b91c1c; + } + + &.abstain { + background: #fef3c7; + color: #b45309; + } + + &.pending { + background: #f1f5f9; + color: #475569; + } + } +} + +.resolution-row { + padding: 10px 12px 6px; // Compact + + .res-label { + font-size: 10px; // Compact + font-weight: 800; + color: $text-sub; + letter-spacing: 0.5px; + text-transform: uppercase; + display: block; + margin-bottom: 8px; + } + + .res-buttons { + display: flex; + gap: 6px; + flex-wrap: wrap; + } +} + +.btn-res { + display: flex; + align-items: center; + gap: 3px; + padding: 6px 10px; // Compact + border-radius: 6px; + border: 1.5px solid #e2e8f0; + background: #fff; + font-size: 11px; // Compact + font-weight: 700; + cursor: pointer; + color: $text-sub; + transition: all 0.2s ease; + + mat-icon { + font-size: 14px; + width: 14px; + height: 14px; + } + + &:hover { + background: #f8fafc; + border-color: #cbd5e1; + } + + &.approve.active { + background: rgb(16 185 129 / 10%); + border-color: #10b981; + color: #10b981; + } + + &.reject.active { + background: rgb(239 68 68 / 10%); + border-color: #ef4444; + color: #ef4444; + } + + &.defer.active { + background: rgb(245 158 11 / 10%); + border-color: #f59e0b; + color: #f59e0b; + } +} + +.notes-row { + padding: 4px 12px 12px; // Compact + + .notes-input { + width: 100%; + padding: 8px 10px; + font-size: 12px; // Compact + border: 1.5px solid #e2e8f0; + border-radius: 8px; // Compact + resize: vertical; + font-family: inherit; + color: $text-main; + background: #fff; + box-sizing: border-box; + transition: border-color 0.2s; + + &:focus { + outline: none; + border-color: $accent; + box-shadow: 0 0 0 3px rgb(168 85 247 / 8%); + } + } +} + +.purple-btn { + background: linear-gradient(135deg, $accent 0%, $accent-dark 100%) !important; + color: #fff !important; + border: none !important; + + &:hover:not(:disabled) { + background: linear-gradient(135deg, #be185d 0%, $accent-dark 100%) !important; + transform: translateY(-1px); + box-shadow: 0 3px 10px rgb(124 58 237 / 25%); + } +} + +// ── Responsive Layout Adaptations ──────────────────────────────────── +@media (width <= 900px) { + .vm-body { + grid-template-columns: 1fr; } } @media (width <= 600px) { .committee-page { - padding: 16px; + padding: 16px; // Compact } .committees-grid { grid-template-columns: 1fr; + gap: 16px; // Compact + } + + .page-header { + margin-bottom: 20px; + + h2 { + font-size: 19px; + } } .form-drawer { diff --git a/src/app/election/components/committee-board/committee-board.component.ts b/src/app/election/components/committee-board/committee-board.component.ts index 39fadb4af..b001e022b 100644 --- a/src/app/election/components/committee-board/committee-board.component.ts +++ b/src/app/election/components/committee-board/committee-board.component.ts @@ -68,8 +68,23 @@ export class CommitteeBoardComponent implements OnInit { meetingErrors: Record = {}; readonly todayDate: string = new Date().toISOString().split('T')[0]; + resendingVoteEmails = false; + + mandatoryDesignations: string[] = []; + + // vote summary / resolution drawer state + showVotePanel = false; + votePanelMeeting: any = null; + voteSummary: any[] = []; + voteSummaryLoading = false; + resolutionForm: Record = {}; + savingResolutions = false; + ngOnInit(): void { this.load(); + this.service.getDesignations().subscribe((data: any[]) => { + this.mandatoryDesignations = (data ?? []).filter((d: any) => d.mandatory).map((d: any) => d.name); + }); } load(): void { @@ -208,6 +223,17 @@ export class CommitteeBoardComponent implements OnInit { this.submitted = true; if (!this.form.name?.trim()) return; + // Mandatory designations (e.g. Chairman, Vice Chairman) required for new committee + if (this.editingId == null && this.mandatoryDesignations.length > 0) { + const selected = this.availableDirectors.filter((d: any) => this.form.selectedIds.includes(d.id)); + const presentDesignations = new Set(selected.map((d: any) => d.designation)); + const missing = this.mandatoryDesignations.filter((des) => !presentDesignations.has(des)); + if (missing.length > 0) { + this.snackBar.open(`Committee must include an active ${missing.join(' and ')}.`, 'Close', { duration: 5000 }); + return; + } + } + this.saving = true; const payload = { name: this.form.name.trim(), @@ -598,6 +624,112 @@ export class CommitteeBoardComponent implements OnInit { w.focus(); } + sendVotingEmailsDirect(meeting: any, event: MouseEvent): void { + event.stopPropagation(); + this.service.resendVotingEmails(meeting.id).subscribe({ + next: () => this.snackBar.open('Voting emails sent to all members!', 'Close', { duration: 4000 }), + error: () => this.snackBar.open('Failed to send voting emails.', 'Close', { duration: 3000 }) + }); + } + + resendVotingEmails(event: MouseEvent): void { + event.stopPropagation(); + if (this.resendingVoteEmails || !this.votePanelMeeting) return; + this.resendingVoteEmails = true; + this.service.resendVotingEmails(this.votePanelMeeting.id).subscribe({ + next: () => { + this.resendingVoteEmails = false; + this.snackBar.open('Voting emails sent to all committee members.', 'Close', { duration: 4000 }); + }, + error: () => { + this.resendingVoteEmails = false; + this.snackBar.open('Failed to send voting emails.', 'Close', { duration: 3000 }); + } + }); + } + + openVotePanel(meeting: any, event: MouseEvent): void { + event.stopPropagation(); + this.votePanelMeeting = meeting; + this.showVotePanel = true; + this.voteSummary = []; + this.resolutionForm = {}; + this.voteSummaryLoading = true; + this.service.getVoteSummary(meeting.id).subscribe({ + next: (data) => { + this.voteSummary = data ?? []; + this.resolutionForm = {}; + for (const item of this.voteSummary) { + this.resolutionForm[item.agendaId] = { + resolution: item.resolution ?? '', + discussionNotes: item.discussionNotes ?? '' + }; + } + this.voteSummaryLoading = false; + }, + error: () => { + this.voteSummaryLoading = false; + this.snackBar.open('Failed to load vote summary.', 'Close', { duration: 3000 }); + } + }); + } + + closeVotePanel(): void { + this.showVotePanel = false; + this.votePanelMeeting = null; + this.voteSummary = []; + } + + saveResolutions(): void { + if (this.savingResolutions) return; + const meetingId = this.votePanelMeeting?.id; + if (!meetingId) return; + + const payload = Object.entries(this.resolutionForm) + .filter( + ([ + , + v + ]) => v.resolution + ) + .map( + ([ + agendaId, + v + ]) => ({ + agendaId: Number(agendaId), + resolution: v.resolution, + discussionNotes: v.discussionNotes + }) + ); + + if (!payload.length) { + this.snackBar.open('Please set at least one resolution.', 'Close', { duration: 3000 }); + return; + } + + this.savingResolutions = true; + this.service.saveResolutions(meetingId, payload).subscribe({ + next: () => { + this.savingResolutions = false; + this.snackBar.open('Resolutions saved and meeting minutes sent to all members.', 'Close', { duration: 4000 }); + this.closeVotePanel(); + }, + error: () => { + this.savingResolutions = false; + this.snackBar.open('Failed to save resolutions.', 'Close', { duration: 3000 }); + } + }); + } + + resolutionIcon(r: string): string { + return r === 'APPROVED' ? 'check_circle' : r === 'REJECTED' ? 'cancel' : 'pause_circle'; + } + + resolutionColor(r: string): string { + return r === 'APPROVED' ? '#16a34a' : r === 'REJECTED' ? '#dc2626' : '#d97706'; + } + private emptyForm(): any { return { name: '', description: '', image: null, selectedIds: [] }; } diff --git a/src/app/election/components/director-board/director-board.component.ts b/src/app/election/components/director-board/director-board.component.ts index b4b9a2760..75fec1369 100644 --- a/src/app/election/components/director-board/director-board.component.ts +++ b/src/app/election/components/director-board/director-board.component.ts @@ -96,19 +96,18 @@ export class DirectorBoardComponent implements OnInit { readonly today: Date = new Date(); - designationOptions = [ - 'Chairman', - 'Vice Chairman', - 'Secretary', - 'Treasurer', - 'Director', - 'Managing Director', - 'Chief Executive Officer' - ]; + designationOptions: string[] = []; ngOnInit(): void { this.load(); this.loadPending(); + this.loadDesignations(); + } + + loadDesignations(): void { + this.service.getDesignations().subscribe((data: any[]) => { + this.designationOptions = (data ?? []).map((d: any) => d.name); + }); } loadPending(): void { diff --git a/src/app/election/components/meeting-vote/meeting-vote.component.html b/src/app/election/components/meeting-vote/meeting-vote.component.html new file mode 100644 index 000000000..ecdcb659a --- /dev/null +++ b/src/app/election/components/meeting-vote/meeting-vote.component.html @@ -0,0 +1,212 @@ + + +
+ + @if (loading) { +
+ +

Loading meeting details…

+
+ } + + + @if (!loading && error && !page) { +
+
+ link_off +

Link Invalid or Expired

+

{{ error }}

+

Please contact your committee administrator if you believe this is a mistake.

+
+
+ } + + + @if (!loading && page && (page.votingClosed || submitted)) { +
+
+ check_circle +

{{ submitted ? 'Vote Submitted!' : 'Voting Closed' }}

+ @if (submitted) { +

+ Thank you, {{ page.memberName }}. Your votes have been recorded. +

+ } @else { +

You have already voted or the voting period has ended.

+ } +
+
{{ page.meetingTitle }}
+
{{ page.committeeName }}  ·  {{ page.meetingDate }}
+ @for (item of page.agendaItems; track item.agendaId) { +
+ {{ $index + 1 }} + {{ item.agendaItem }} + @if (selections[item.agendaId]) { + + {{ voteLabel(selections[item.agendaId]) }} + + } +
+ } +
+
+
+ } + + + @if (!loading && page && !page.votingClosed && !submitted) { + +
+
+
CBSnexora · Committee Meeting
+
🗳️ Cast Your Vote
+
{{ page.committeeName }}  ·  {{ page.meetingDate }}
+
+
+
Voting as
+
{{ page.memberName }}
+
+
+ + +
+
+

+ Please review each agenda item from {{ page.meetingTitle }} and cast your vote. +

+ + @if (error) { +
{{ error }}
+ } + +
+ @for (item of page.agendaItems; track item.agendaId) { +
+
+ {{ $index + 1 }} + {{ item.agendaItem }} + @if (selections[item.agendaId]) { + + {{ voteLabel(selections[item.agendaId]) }} + + } +
+ +
+ + + +
+ + + @if (selections[item.agendaId] === 'APPROVED' || selections[item.agendaId] === 'REJECTED') { +
+ + + @if (speechSupported) { +
+ +
+ + +
+
+ } +
+ } +
+ } +
+
+
+ + +
+
+
+ @if (allVoted) { + check_circle + All {{ page.agendaItems.length }} items voted — ready to submit + } @else { + pending + {{ votedCount() }} of {{ page.agendaItems.length }} items voted + } +
+ +
+
+ CBSnexora — Automated Voting System + Each member can vote once. Link valid for 7 days. +
+
+ } +
diff --git a/src/app/election/components/meeting-vote/meeting-vote.component.scss b/src/app/election/components/meeting-vote/meeting-vote.component.scss new file mode 100644 index 000000000..55573e239 --- /dev/null +++ b/src/app/election/components/meeting-vote/meeting-vote.component.scss @@ -0,0 +1,564 @@ +/** + * 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/. + */ + +// ── Single viewport page ────────────────────────────────────────────────────── +.vote-page { + height: 100vh; + display: flex; + flex-direction: column; + overflow: hidden; + background: #f5f6fa; + font-family: Arial, Helvetica, sans-serif; + font-size: 13px; +} + +// ── Header ──────────────────────────────────────────────────────────────────── +.vote-header { + flex-shrink: 0; + background: #7c3aed; + padding: 10px 24px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + box-shadow: 0 1px 8px rgb(91 33 182 / 35%); + + .vh-left { + display: flex; + flex-direction: column; + gap: 1px; + } + + .vh-brand { + font-size: 9px; + font-weight: 700; + letter-spacing: 1.8px; + text-transform: uppercase; + color: rgb(255 255 255 / 50%); + } + + .vh-title { + font-size: 17px; + font-weight: 800; + color: #fff; + line-height: 1.2; + } + + .vh-meta { + font-size: 11px; + color: rgb(255 255 255 / 70%); + } + + .vh-member { + text-align: right; + + .vh-member-label { + font-size: 9px; + color: rgb(255 255 255 / 45%); + text-transform: uppercase; + letter-spacing: 1px; + } + + .vh-member-name { + font-size: 13px; + font-weight: 700; + color: #fff; + } + } +} + +// ── Scrollable agenda ───────────────────────────────────────────────────────── +.vote-scroll { + flex: 1; + overflow-y: auto; + min-height: 0; + + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-track { + background: #f5f6fa; + } + + &::-webkit-scrollbar-thumb { + background: #c4b5fd; + border-radius: 2px; + } +} + +.scroll-inner { + max-width: 860px; + margin: 0 auto; + padding: 14px 24px 10px; + + .subtitle { + margin: 0 0 12px; + font-size: 12px; + color: #64748b; + } +} + +// ── Agenda list ─────────────────────────────────────────────────────────────── +.agenda-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.agenda-item { + background: #fff; + border: 1.5px solid #e2e8f0; + border-radius: 8px; + padding: 10px 14px; + transition: border-color 0.15s; + + &.voted { + border-color: #a78bfa; + } + + .item-label { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; + } + + .item-num { + background: #7c3aed; + color: #fff; + border-radius: 50%; + width: 20px; + height: 20px; + min-width: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 700; + flex-shrink: 0; + } + + .item-text { + flex: 1; + font-size: 13px; + font-weight: 600; + color: #1e293b; + line-height: 1.3; + } +} + +.vote-buttons { + display: flex; + gap: 6px; + padding-left: 28px; +} + +.btn-vote { + flex: 1; + padding: 6px 8px; + border-radius: 6px; + border: 1.5px solid #e2e8f0; + font-size: 12px; + font-weight: 600; + cursor: pointer; + background: #f8fafc; + color: #64748b; + transition: all 0.12s ease; + white-space: nowrap; + + &:hover { + background: #f1f5f9; + border-color: #cbd5e1; + } + + &.approve.active { + background: #dcfce7; + border-color: #16a34a; + color: #15803d; + } + + &.reject.active { + background: #fee2e2; + border-color: #dc2626; + color: #b91c1c; + } + + &.abstain.active { + background: #fef3c7; + border-color: #d97706; + color: #b45309; + } +} + +// ── Remark row ──────────────────────────────────────────────────────────────── +.remark-row { + display: flex; + gap: 8px; + padding-left: 28px; + padding-top: 8px; + align-items: flex-start; +} + +.remark-input { + flex: 1; + border: 1.5px solid #e2e8f0; + border-radius: 6px; + padding: 6px 10px; + font-size: 12px; + font-family: inherit; + color: #334155; + resize: none; + line-height: 1.4; + transition: border-color 0.15s; + background: #fafbff; + + &:focus { + outline: none; + border-color: #a78bfa; + background: #fff; + } + + &::placeholder { + color: #94a3b8; + font-style: italic; + } +} + +.remark-controls { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + flex-shrink: 0; +} + +.btn-mic { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + background: #f1f5f9; + border: 1.5px solid #e2e8f0; + border-radius: 8px; + padding: 5px 8px; + cursor: pointer; + color: #64748b; + transition: all 0.15s; + + mat-icon { + font-size: 18px; + width: 18px; + height: 18px; + } + + .mic-label { + font-size: 9px; + font-weight: 700; + letter-spacing: 0.5px; + } + + &:hover { + background: #e2e8f0; + } + + &.active { + background: #fee2e2; + border-color: #f87171; + color: #dc2626; + animation: pulse-mic 1.2s ease-in-out infinite; + } +} + +@keyframes pulse-mic { + 0%, + 100% { + box-shadow: 0 0 0 0 rgb(220 38 38 / 30%); + } + + 50% { + box-shadow: 0 0 0 5px rgb(220 38 38 / 0%); + } +} + +.lang-toggle { + display: flex; + border: 1.5px solid #e2e8f0; + border-radius: 6px; + overflow: hidden; +} + +.btn-lang { + background: #f8fafc; + border: none; + padding: 3px 7px; + font-size: 9px; + font-weight: 700; + color: #94a3b8; + cursor: pointer; + transition: all 0.12s; + letter-spacing: 0.5px; + + &:first-child { + border-right: 1px solid #e2e8f0; + } + + &.active { + background: #7c3aed; + color: #fff; + } +} + +// ── Bottom bar ──────────────────────────────────────────────────────────────── +.vote-bottom-bar { + flex-shrink: 0; + background: #fff; + border-top: 1px solid #e2e8f0; + box-shadow: 0 -2px 8px rgb(0 0 0 / 5%); +} + +.bottom-inner { + max-width: 860px; + margin: 0 auto; + padding: 10px 24px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.progress-text { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + color: #64748b; + + .prog-icon { + font-size: 16px; + width: 16px; + height: 16px; + color: #94a3b8; + + &.done { + color: #16a34a; + } + } +} + +.btn-submit { + background: #7c3aed; + color: #fff; + border: none; + border-radius: 7px; + padding: 9px 28px; + font-size: 13px; + font-weight: 700; + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 6px; + transition: background 0.12s; + flex-shrink: 0; + + &:hover:not(:disabled) { + background: #6d28d9; + } + + &:disabled { + opacity: 0.45; + cursor: not-allowed; + } +} + +.bottom-footer { + max-width: 860px; + margin: 0 auto; + padding: 5px 24px 8px; + display: flex; + justify-content: space-between; + font-size: 10px; + color: #b0bac9; + border-top: 1px solid #f1f5f9; +} + +// ── State pages ─────────────────────────────────────────────────────────────── +.state-center { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 24px 20px; +} + +.state-card { + background: #fff; + border-radius: 12px; + box-shadow: 0 4px 20px rgb(0 0 0 / 8%); + padding: 36px 32px; + text-align: center; + width: 100%; + max-width: 440px; + + .state-icon { + font-size: 48px; + width: 48px; + height: 48px; + + &.success { + color: #16a34a; + } + + &.error { + color: #dc2626; + } + } + + h2 { + margin: 12px 0 6px; + font-size: 20px; + color: #1e293b; + } + + p { + font-size: 13px; + color: #64748b; + margin: 0 0 4px; + } + + .hint { + font-size: 11px; + color: #94a3b8; + margin-top: 6px; + } +} + +// ── Summary box ─────────────────────────────────────────────────────────────── +.summary-box { + margin-top: 16px; + background: #f8faff; + border: 1px solid #e2e8f0; + border-radius: 8px; + overflow: hidden; + text-align: left; + max-height: 45vh; + overflow-y: auto; + + .summary-header { + padding: 10px 14px 2px; + font-size: 13px; + font-weight: 700; + color: #1e293b; + } + + .summary-meta { + padding: 0 14px 8px; + font-size: 11px; + color: #64748b; + border-bottom: 1px solid #e2e8f0; + } + + .summary-row { + display: flex; + align-items: center; + gap: 8px; + padding: 7px 14px; + border-bottom: 1px solid #f1f5f9; + + &:last-child { + border-bottom: none; + } + + .item-num { + background: #7c3aed; + color: #fff; + border-radius: 50%; + width: 18px; + height: 18px; + min-width: 18px; + display: flex; + align-items: center; + justify-content: center; + font-size: 9px; + font-weight: 700; + flex-shrink: 0; + } + + .item-text { + flex: 1; + font-size: 12px; + color: #334155; + } + } +} + +// ── Badges ──────────────────────────────────────────────────────────────────── +.vote-badge { + padding: 2px 8px; + border-radius: 20px; + font-size: 10px; + font-weight: 700; + white-space: nowrap; + flex-shrink: 0; + + &.badge-approved { + background: #dcfce7; + color: #15803d; + } + + &.badge-rejected { + background: #fee2e2; + color: #b91c1c; + } + + &.badge-abstain { + background: #fef3c7; + color: #b45309; + } +} + +// ── Alert ───────────────────────────────────────────────────────────────────── +.alert-error { + background: #fee2e2; + color: #b91c1c; + border-radius: 6px; + padding: 8px 12px; + font-size: 12px; + margin-bottom: 12px; +} + +// ── Responsive ──────────────────────────────────────────────────────────────── +@media (width <= 640px) { + .vote-header { + padding: 8px 14px; + } + + .vote-header .vh-member { + display: none; + } + + .scroll-inner, + .bottom-inner, + .bottom-footer { + padding-left: 14px; + padding-right: 14px; + } + + .vote-buttons { + padding-left: 0; + flex-wrap: wrap; + } + + .remark-row { + padding-left: 0; + } + + .btn-submit { + padding: 8px 18px; + } +} diff --git a/src/app/election/components/meeting-vote/meeting-vote.component.ts b/src/app/election/components/meeting-vote/meeting-vote.component.ts new file mode 100644 index 000000000..5602767b4 --- /dev/null +++ b/src/app/election/components/meeting-vote/meeting-vote.component.ts @@ -0,0 +1,209 @@ +/** + * 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/. + */ + +import { Component, OnInit, OnDestroy, NgZone, inject } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { MatIconModule } from '@angular/material/icon'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { ElectionService } from '../../election.service'; + +@Component({ + selector: 'mifosx-meeting-vote', + standalone: true, + imports: [ + CommonModule, + FormsModule, + MatIconModule, + MatProgressSpinnerModule + ], + templateUrl: './meeting-vote.component.html', + styleUrls: ['./meeting-vote.component.scss'] +}) +export class MeetingVoteComponent implements OnInit, OnDestroy { + private route = inject(ActivatedRoute); + private service = inject(ElectionService); + private zone = inject(NgZone); + + token = ''; + page: any = null; + loading = true; + submitting = false; + submitted = false; + error = ''; + + // agendaId → 'APPROVED' | 'REJECTED' | 'ABSTAIN' + selections: Record = {}; + // agendaId → remark text + remarks: Record = {}; + + // Voice recording state + recording: number | null = null; // agendaId currently recording + recordingLang: 'hi-IN' | 'en-IN' = 'hi-IN'; + readonly speechSupported = !!(window as any).SpeechRecognition || !!(window as any).webkitSpeechRecognition; + private recognition: any = null; + + ngOnInit(): void { + this.token = this.route.snapshot.paramMap.get('token') ?? ''; + this.load(); + } + + ngOnDestroy(): void { + this.stopRecognition(); + } + + load(): void { + this.loading = true; + this.error = ''; + this.service.getVotingPage(this.token).subscribe({ + next: (data) => { + this.page = data; + (data.agendaItems ?? []).forEach((item: any) => { + if (item.currentVote) this.selections[item.agendaId] = item.currentVote; + }); + this.loading = false; + }, + error: () => { + this.error = 'Invalid or expired voting link.'; + this.loading = false; + } + }); + } + + select(agendaId: number, vote: string): void { + this.selections[agendaId] = vote; + // Clear remark when switching to Abstain + if (vote === 'ABSTAIN') { + delete this.remarks[agendaId]; + if (this.recording === agendaId) this.stopRecognition(); + } + } + + // ── Voice recording ──────────────────────────────────────────────────────── + + toggleRecording(agendaId: number): void { + if (this.recording === agendaId) { + this.stopRecognition(); + return; + } + if (this.recording !== null) { + this.stopRecognition(); + } + this.startRecognition(agendaId); + } + + private startRecognition(agendaId: number): void { + const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition; + if (!SR) return; + + // Run outside Angular zone — callbacks will call zone.run() themselves + this.zone.runOutsideAngular(() => { + this.recognition = new SR(); + this.recognition.continuous = true; // keep listening until Stop is pressed + this.recognition.interimResults = false; // only final results + this.recognition.lang = this.recordingLang; + + this.recognition.onresult = (event: any) => { + // Collect only new final results since last event + let newText = ''; + for (let i = event.resultIndex; i < event.results.length; i++) { + if (event.results[i].isFinal) { + newText += event.results[i][0].transcript + ' '; + } + } + if (newText.trim()) { + this.zone.run(() => { + // Spread to new object so Angular picks up the change + this.remarks = { + ...this.remarks, + [agendaId]: ((this.remarks[agendaId] ?? '') + ' ' + newText).trim() + }; + }); + } + }; + + this.recognition.onerror = () => { + this.zone.run(() => { + this.recording = null; + }); + }; + + this.recognition.onend = () => { + this.zone.run(() => { + this.recording = null; + }); + }; + + this.recognition.start(); + }); + + this.recording = agendaId; + } + + private stopRecognition(): void { + try { + this.recognition?.stop(); + } catch (_) {} + this.recognition = null; + this.recording = null; + } + + switchLang(lang: 'hi-IN' | 'en-IN'): void { + if (this.recordingLang === lang) return; + this.recordingLang = lang; + // Restart recording in new language if currently active + if (this.recording !== null) { + const active = this.recording; + this.stopRecognition(); + setTimeout(() => this.startRecognition(active), 100); + } + } + + // ── Submit ───────────────────────────────────────────────────────────────── + + get allVoted(): boolean { + if (!this.page?.agendaItems?.length) return false; + return this.page.agendaItems.every((a: any) => !!this.selections[a.agendaId]); + } + + submit(): void { + if (!this.allVoted || this.submitting) return; + this.stopRecognition(); + this.submitting = true; + const votes = Object.entries(this.selections).map( + ([ + agendaId, + vote + ]) => ({ + agendaId: Number(agendaId), + vote, + remark: this.remarks[Number(agendaId)] ?? null + }) + ); + this.service.submitVotes(this.token, votes).subscribe({ + next: () => { + this.submitting = false; + this.submitted = true; + }, + error: (err: any) => { + this.submitting = false; + this.error = err?.error?.error ?? 'Failed to submit votes. Please try again.'; + } + }); + } + + votedCount(): number { + if (!this.page?.agendaItems?.length) return 0; + return this.page.agendaItems.filter((a: any) => !!this.selections[a.agendaId]).length; + } + + voteLabel(vote: string): string { + return vote === 'APPROVED' ? '✅ Approved' : vote === 'REJECTED' ? '❌ Rejected' : '— Abstain'; + } +} diff --git a/src/app/election/election-routing.module.ts b/src/app/election/election-routing.module.ts index 1d8b1b9aa..d41f212e3 100644 --- a/src/app/election/election-routing.module.ts +++ b/src/app/election/election-routing.module.ts @@ -11,6 +11,12 @@ import { RouterModule, Routes } from '@angular/router'; import { Route } from '../core/route/route.service'; const routes: Routes = [ + // Public voting page — no shell/auth wrapper, accessible via email link + { + path: 'vote/:token', + loadComponent: () => import('./components/meeting-vote/meeting-vote.component').then((m) => m.MeetingVoteComponent), + data: { title: 'Vote on Agenda' } + }, Route.withShell([ { path: 'election', diff --git a/src/app/election/election.service.ts b/src/app/election/election.service.ts index c6a970c9b..d28ce75fc 100644 --- a/src/app/election/election.service.ts +++ b/src/app/election/election.service.ts @@ -212,6 +212,10 @@ export class ElectionService { return this.http.get('/election/directors/pending').pipe(catchError(() => of([]))); } + getDesignations(): Observable { + return this.http.get('/election/directors/designations').pipe(catchError(() => of([]))); + } + // ── Committees ───────────────────────────────────────────────── getCommittees(): Observable { return this.http.get('/election/committees').pipe(catchError(() => of([]))); @@ -269,4 +273,29 @@ export class ElectionService { deleteMeeting(meetingId: number): Observable { return this.http.delete(`/election/committee-meetings/${meetingId}`); } + + // ── Agenda Voting (public — no auth) ───────────────────────────── + getVotingPage(token: string): Observable { + return this.http.get(`/public/meeting-vote/${token}`); + } + + submitVotes(token: string, votes: { agendaId: number; vote: string }[]): Observable { + return this.http.post(`/public/meeting-vote/${token}`, { votes }); + } + + // ── Admin: vote summary + resolutions ──────────────────────────── + resendVotingEmails(meetingId: number): Observable { + return this.http.post(`/election/meetings/${meetingId}/votes/resend`, {}); + } + + getVoteSummary(meetingId: number): Observable { + return this.http.get(`/election/meetings/${meetingId}/votes/summary`); + } + + saveResolutions( + meetingId: number, + resolutions: { agendaId: number; resolution: string; discussionNotes: string }[] + ): Observable { + return this.http.put(`/election/meetings/${meetingId}/votes/resolutions`, resolutions); + } } diff --git a/src/environments/.env.ts b/src/environments/.env.ts index 602a8e25d..fdd9656f0 100644 --- a/src/environments/.env.ts +++ b/src/environments/.env.ts @@ -9,8 +9,8 @@ /* tslint:disable */ export default { 'mifos_x': { - 'version': '260703', - 'hash': 'a4423877' + 'version': '260707', + 'hash': '8a1b7d5d' }, 'allow_switching_backend_instance': true };