CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(election): committee management module with image upload, zoom viewer, and member profiles

Browse Source 
- Add Committee Board component: create/edit committees with profile image upload
- Image viewer: redesigned zoom dialog with frosted glass toolbar, SVG icons, dark theme
- Committee profile image: circular upload ring, full-size zoom via ImagePreviewDialogComponent
- Member photos: clickable avatars open zoom viewer in both stacked and list views
- Backend: committee API service methods (CRUD, members, dissolve, current directors)
- Route and navigation link added to election dashboard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jaanu423
2026-07-03 16:38:42 +05:30
co-authored by Claude Sonnet 4.6
parent c4387c5c79
commit 83e9fc9e68
8 changed files with 1597 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/cashier/transaction-entry/transaction-entry.component.ts
+144 -65
View File
@@ -420,16 +420,15 @@ export class JointHolderDialogComponent implements OnInit {
selector: 'mifosx-image-preview-dialog',
template: `
<div class="ipd-wrap">
<div class="ipd-header">
<div class="ipd-topbar">
<span class="ipd-title">{{ data.title }}</span>
<div class="ipd-controls">
<button class="ipd-btn" (click)="zoomOut()" title="Zoom Out">−</button>
<span class="ipd-zoom-label">{{ zoomPct }}%</span>
<button class="ipd-btn" (click)="zoomIn()" title="Zoom In">+</button>
<button class="ipd-btn" (click)="reset()" title="Reset">↺</button>
<button class="ipd-btn ipd-btn--close" (click)="close()">✕</button>
</div>
<button class="ipd-close-btn" (click)="close()" title="Close">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
</svg>
</button>
</div>
<div
class="ipd-body"
(wheel)="onWheel($event)"
@@ -437,7 +436,7 @@ export class JointHolderDialogComponent implements OnInit {
(mousemove)="onMouseMove($event)"
(mouseup)="onMouseUp()"
(mouseleave)="onMouseUp()"
[style.cursor]="dragging ? 'grabbing' : zoom > 1 ? 'grab' : 'zoom-in'"
[style.cursor]="dragging ? 'grabbing' : zoom > 1 ? 'grab' : 'default'"
>
<img
[src]="safeUrl"
@@ -447,7 +446,37 @@ export class JointHolderDialogComponent implements OnInit {
(dragstart)="$event.preventDefault()"
/>
</div>
<div class="ipd-hint">Scroll = Zoom &nbsp;·&nbsp; Drag = Pan</div>
<div class="ipd-footer">
<div class="ipd-toolbar">
<button class="ipd-tool" (click)="zoomOut()" [disabled]="zoom <= min" title="Zoom out">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5" />
<path d="M4 6h4M11 11l-2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
</button>
<span class="ipd-zoom-val">{{ zoomPct }}%</span>
<button class="ipd-tool" (click)="zoomIn()" [disabled]="zoom >= max" title="Zoom in">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5" />
<path d="M6 4v4M4 6h4M11 11l-2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
</button>
<div class="ipd-sep"></div>
<button class="ipd-tool" (click)="reset()" title="Reset zoom">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
<path
d="M2 7a5 5 0 1 0 1.2-3.2M2 3.5V7h3.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<span class="ipd-hint">Scroll to zoom &nbsp;·&nbsp; Drag to pan</span>
</div>
</div>
`,
styles: [
@@ -455,91 +484,141 @@ export class JointHolderDialogComponent implements OnInit {
.ipd-wrap {
display: flex;
flex-direction: column;
width: 85vw;
max-width: 960px;
border-radius: 10px;
width: min(88vw, 840px);
border-radius: 20px;
overflow: hidden;
background: #07080f;
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(255, 255, 255, 0.06);
}
.ipd-header {
/* ── Top bar ─────────────────────────── */
.ipd-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: #1e293b;
color: #e2e8f0;
gap: 12px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
flex-shrink: 0;
}
.ipd-title {
font-size: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.ipd-controls {
display: flex;
align-items: center;
gap: 6px;
}
.ipd-btn {
width: 32px;
height: 32px;
border-radius: 7px;
border: 1px solid #334155;
background: #0f172a;
color: #e2e8f0;
font-size: 17px;
font-weight: 700;
.ipd-close-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s;
transition: all 0.15s;
padding: 0;
}
.ipd-btn:hover {
background: #1e40af;
border-color: #3b82f6;
}
.ipd-btn--close {
background: #450a0a;
border-color: #dc2626;
}
.ipd-btn--close:hover {
background: #dc2626;
}
.ipd-zoom-label {
font-size: 12px;
font-weight: 700;
color: #94a3b8;
min-width: 44px;
text-align: center;
.ipd-close-btn:hover {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.45);
color: #fca5a5;
}
/* ── Image area ──────────────────────── */
.ipd-body {
background: #0f172a;
background: #040508;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 75vh;
height: 68vh;
user-select: none;
position: relative;
}
.ipd-img {
max-width: 80vw;
max-height: 70vh;
max-width: 82%;
max-height: 64vh;
object-fit: contain;
border-radius: 6px;
border-radius: 10px;
transform-origin: center center;
transition: transform 0.08s ease;
display: block;
transition: transform 0.07s ease;
pointer-events: none;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.ipd-hint {
background: #0f172a;
color: #475569;
font-size: 11px;
/* ── Footer ──────────────────────────── */
.ipd-footer {
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 12px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* ── Toolbar pill ────────────────────── */
.ipd-toolbar {
display: flex;
align-items: center;
gap: 2px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50px;
padding: 4px 6px;
}
.ipd-tool {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
padding: 0;
flex-shrink: 0;
}
.ipd-tool:hover:not(:disabled) {
background: rgba(99, 102, 241, 0.22);
color: #a5b4fc;
}
.ipd-tool:disabled {
opacity: 0.2;
cursor: not-allowed;
}
.ipd-zoom-val {
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
min-width: 44px;
text-align: center;
padding: 5px;
border-top: 1px solid #1e293b;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
padding: 0 2px;
}
.ipd-sep {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, 0.1);
margin: 0 4px;
flex-shrink: 0;
}
/* ── Hint ────────────────────────────── */
.ipd-hint {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.03em;
}
`
],