| Server IP : 69.72.244.102 / Your IP : 216.73.216.164 Web Server : LiteSpeed System : Linux s3434.fra1.stableserver.net 4.18.0-513.24.1.lve.2.el8.x86_64 #1 SMP Fri May 24 12:42:50 UTC 2024 x86_64 User : konzalta ( 1271) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/konzalta/constituency.work/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ConstituencyOS – Embakasi South</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--green: #1a7a4a;
--green-light: #e8f5ee;
--green-mid: #2d9e63;
--red: #dc2626;
--red-light: #fdecea;
--amber: #f59e0b;
--amber-light: #fffbeb;
--blue: #2563eb;
--blue-light: #eff6ff;
--purple: #7c3aed;
--purple-light: #f5f3ff;
--text: #111827;
--muted: #6b7280;
--light: #9ca3af;
--border: #e5e7eb;
--bg: #f3f4f6;
--white: #ffffff;
--sidebar-w: 216px;
--radius: 10px;
--radius-sm: 6px;
--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
/* ── LAYOUT SHELL ── */
html, body { height: 100%; overflow: hidden; }
body {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text);
background: var(--bg);
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
grid-template-rows: 100%;
}
/* ── SIDEBAR ── */
.sidebar {
grid-column: 1;
background: var(--white);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: 9px;
padding: 14px 14px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.logo-icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, #b91c1c, #1a7a4a);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex-shrink: 0;
}
.logo-text strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--green); }
.logo-text small { font-size: 10px; color: var(--muted); line-height: 1.3; }
.sidebar-profile {
display: flex; align-items: center; gap: 9px;
padding: 11px 14px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.avatar {
width: 36px; height: 36px; border-radius: 50%;
background: #374151;
color: white; font-weight: 600; font-size: 13px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; position: relative;
}
.avatar .dot {
position: absolute; bottom: 1px; right: 1px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--green-mid); border: 2px solid white;
}
.profile-name { font-size: 11.5px; font-weight: 600; }
.profile-sub { font-size: 10.5px; color: var(--muted); }
.sidebar-nav { flex: 1; padding: 6px 0; }
.nav-item {
display: flex; align-items: center; gap: 9px;
padding: 8px 14px;
font-size: 12px; font-weight: 500;
color: var(--muted);
cursor: pointer; position: relative;
transition: background .12s, color .12s;
white-space: nowrap;
}
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.active {
background: var(--green-light);
color: var(--green); font-weight: 600;
}
.nav-item.active::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: var(--green); border-radius: 0 2px 2px 0;
}
.nav-icon { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.nav-badge {
margin-left: auto;
background: var(--red); color: white;
font-size: 9.5px; font-weight: 700;
padding: 1px 5px; border-radius: 10px;
}
.nav-new {
margin-left: auto;
background: var(--green); color: white;
font-size: 9px; font-weight: 700;
padding: 2px 5px; border-radius: 4px;
}
.nav-chevron { margin-left: auto; font-size: 10px; color: var(--light); }
.sidebar-footer {
padding: 12px 14px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.help-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.help-row span { font-size: 14px; }
.help-label { font-size: 11.5px; font-weight: 600; }
.help-sub { font-size: 10.5px; color: var(--muted); }
/* ── RIGHT PANEL ── */
.right-panel {
grid-column: 2;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
/* ── TOPBAR ── */
.topbar {
height: 52px;
background: var(--white);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
flex-shrink: 0;
}
.menu-btn { font-size: 17px; cursor: pointer; color: var(--muted); }
.const-selector {
display: flex; align-items: center; gap: 6px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 10px; cursor: pointer;
font-size: 12px; font-weight: 500;
}
.search {
flex: 1; max-width: 360px;
display: flex; align-items: center; gap: 7px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 11px;
color: var(--muted); font-size: 12px;
}
.search kbd {
margin-left: auto; font-size: 9.5px;
background: var(--border); padding: 1px 5px; border-radius: 3px;
font-family: inherit;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
position: relative;
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 15px;
}
.icon-btn .bdg {
position: absolute; top: -3px; right: -3px;
background: var(--red); color: white;
font-size: 9px; font-weight: 700;
width: 15px; height: 15px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid white;
}
.icon-btn .bdg.grn { background: var(--green-mid); }
.user-pill {
display: flex; align-items: center; gap: 7px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 3px 8px; cursor: pointer;
font-size: 12px; font-weight: 500;
}
/* ── SCROLLABLE CONTENT ── */
.content {
flex: 1;
overflow-y: auto;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
}
/* ── GREETING ── */
.greeting-row {
display: flex; align-items: center; justify-content: space-between;
}
.greeting h1 { font-size: 19px; font-weight: 700; }
.greeting p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.date-pill {
display: flex; align-items: center; gap: 6px;
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 5px 11px;
font-size: 11.5px; color: var(--muted);
}
/* ── STAT CARDS ── */
.stat-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.stat-card {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius); padding: 13px 14px;
display: flex; align-items: flex-start; gap: 11px;
cursor: pointer; transition: box-shadow .15s;
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.stat-icon {
width: 36px; height: 36px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex-shrink: 0;
}
.stat-label { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.stat-val { font-size: 22px; font-weight: 700; line-height: 1.15; margin: 1px 0; }
.stat-sub { font-size: 10.5px; display: flex; align-items: center; gap: 3px; }
.stat-sub.up { color: #16a34a; }
.stat-sub.warn { color: var(--red); }
.stat-sub.muted { color: var(--muted); }
.pbar { height: 4px; background: var(--border); border-radius: 4px; margin: 3px 0 2px; }
.pbar-fill { height: 100%; border-radius: 4px; background: var(--green); }
.stat-arrow { margin-left: auto; color: var(--light); font-size: 13px; }
/* ── MIDDLE 3-COL GRID ── */
.mid-grid {
display: grid;
grid-template-columns: 1fr 290px 250px;
gap: 12px;
align-items: start; /* prevent stretching */
}
/* ── GENERIC CARD ── */
.card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px 9px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.card-title { font-size: 12.5px; font-weight: 600; }
.view-link { font-size: 11px; color: var(--green); font-weight: 500; cursor: pointer; }
/* MAP */
.map-body {
position: relative; height: 310px;
background: #dce8dc; overflow: hidden;
}
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-ctrls {
position: absolute; top: 8px; left: 8px;
display: flex; flex-direction: column; gap: 3px;
}
.map-btn {
width: 26px; height: 26px; background: white;
border: 1px solid var(--border); border-radius: 4px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-weight: 700; font-size: 14px;
color: var(--muted); box-shadow: var(--shadow);
}
.map-pin {
position: absolute;
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; border: 2px solid white;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
cursor: pointer; transform: translate(-50%, -50%);
}
.map-legend {
display: flex; flex-wrap: wrap; gap: 10px;
padding: 7px 12px;
border-top: 1px solid var(--border);
background: var(--white);
}
.leg { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); cursor: pointer; }
.leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* COMPLAINTS */
.complaint {
display: flex; align-items: flex-start; gap: 9px;
padding: 8px 13px;
border-bottom: 1px solid var(--border);
cursor: pointer; transition: background .12s;
}
.complaint:last-of-type { border-bottom: none; }
.complaint:hover { background: var(--bg); }
.c-ico {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; flex-shrink: 0; margin-top: 1px;
}
.c-title { font-size: 11.5px; font-weight: 600; }
.c-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.ptag {
flex-shrink: 0; margin-top: 1px;
font-size: 9.5px; font-weight: 700;
padding: 2px 7px; border-radius: 20px;
}
.ptag.hi { background: #fdecea; color: #b91c1c; }
.ptag.md { background: #fff7ed; color: #c2410c; }
.ptag.lo { background: #ecfdf5; color: #065f46; }
.manage-btn {
margin: 10px 13px;
background: var(--green); color: white;
border: none; border-radius: var(--radius-sm);
padding: 8px; font-size: 12px; font-weight: 600;
cursor: pointer; transition: background .15s;
text-align: center;
}
.manage-btn:hover { background: var(--green-mid); }
/* SCHEDULE */
.sched-item {
display: flex; align-items: flex-start; gap: 8px;
padding: 7px 13px;
border-bottom: 1px solid var(--border);
}
.sched-item:last-of-type { border-bottom: none; }
.s-time { font-size: 10.5px; font-weight: 600; color: var(--muted); width: 42px; flex-shrink: 0; padding-top: 1px; }
.s-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.s-name { font-size: 11px; font-weight: 600; }
.s-loc { font-size: 10px; color: var(--muted); margin-top: 1px; }
/* BUDGET DONUT */
.budget-sect {
padding: 11px 13px 0;
border-top: 1px solid var(--border);
}
.bdg-title { font-size: 11.5px; font-weight: 600; }
.bdg-sub { font-size: 10px; color: var(--muted); }
.donut-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.donut-stat span { display: block; }
.donut-pct { font-size: 20px; font-weight: 700; }
.donut-lbl { font-size: 10px; color: var(--muted); }
.donut-info { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.finance-btn {
display: block; margin: 9px 13px 12px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 6px 10px;
font-size: 11px; font-weight: 500; color: var(--green);
text-align: center; cursor: pointer;
}
/* ── BOTTOM 3-COL GRID ── */
.bot-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
align-items: start;
}
/* PROJECTS CHART */
.proj-chart-row {
display: flex; align-items: center; gap: 14px;
padding: 13px 14px;
}
.pie-wrap { position: relative; flex-shrink: 0; }
.pie-center {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
pointer-events: none;
}
.pie-center strong { font-size: 20px; font-weight: 700; }
.pie-center small { font-size: 9.5px; color: var(--muted); }
.proj-leg-item {
display: flex; align-items: center; gap: 7px;
padding: 3px 0; font-size: 11px;
}
.proj-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.proj-count { margin-left: auto; font-weight: 600; }
/* BURSARY */
.bursary-hero {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
}
.bursary-ico {
width: 46px; height: 46px; border-radius: 50%;
background: var(--green-light);
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.bursary-num { font-size: 26px; font-weight: 700; line-height: 1; }
.bursary-lbl { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.bursary-segs {
display: flex; gap: 6px; padding: 0 14px 12px;
}
.bursary-seg {
flex: 1; padding: 7px 8px; border-radius: var(--radius-sm);
font-size: 10px;
}
.bursary-seg strong { display: block; font-size: 15px; font-weight: 700; margin-top: 3px; }
.seg-row { display: flex; align-items: center; gap: 4px; }
.seg-dot { width: 7px; height: 7px; border-radius: 50%; }
/* SOCIAL */
.social-hero {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
}
.social-ico {
width: 46px; height: 46px; border-radius: 50%;
background: var(--purple-light);
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.social-rows { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 5px; }
.soc-row {
display: flex; align-items: center; gap: 7px;
font-size: 11px;
}
.soc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.soc-count { margin-left: auto; font-weight: 600; }
/* ACTIVITY */
.act-section-title {
font-size: 13.5px; font-weight: 700; margin-bottom: 9px;
}
.act-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.act-card {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius); padding: 11px;
display: flex; flex-direction: column; gap: 7px;
}
.act-top { display: flex; align-items: flex-start; gap: 7px; }
.act-ava {
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
}
.act-text { font-size: 10.5px; line-height: 1.45; }
.act-time { font-size: 9.5px; color: var(--muted); margin-top: 2px; }
.act-img {
height: 44px; border-radius: var(--radius-sm);
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
</style>
</head>
<body>
<!-- ══ SIDEBAR ══ -->
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">🏛️</div>
<div class="logo-text">
<strong>ConstituencyOS</strong>
<small>Everything in your constituency,<br>in one place.</small>
</div>
</div>
<div class="sidebar-profile">
<div class="avatar">DM<div class="dot"></div></div>
<div>
<div class="profile-name">Hon. David Mwangi, MP</div>
<div class="profile-sub">Embakasi South</div>
</div>
</div>
<nav class="sidebar-nav">
<div class="nav-item active"><span class="nav-icon">🏠</span>Dashboard</div>
<div class="nav-item" onclick="location.href='constituents.html'"><span class="nav-icon">👥</span>Constituents</div>
<div class="nav-item" onclick="location.href='complaints.html'"><span class="nav-icon">📋</span>Complaints<span class="nav-badge">9</span></div>
<div class="nav-item" onclick="location.href='projects.html'"><span class="nav-icon">📁</span>Projects</div>
<div class="nav-item" onclick="location.href='bursaries.html'"><span class="nav-icon">🎓</span>Bursaries</div>
<div class="nav-item" onclick="location.href='events.html'"><span class="nav-icon">📅</span>Events</div>
<div class="nav-item" onclick="location.href='social_protection.html'"><span class="nav-icon">🛡️</span>Social Protection</div>
<div class="nav-item" onclick="location.href='ward_management.html'"><span class="nav-icon">🏘️</span>Ward Management</div>
<div class="nav-item" onclick="location.href='finance.html'"><span class="nav-icon">💰</span>Finance</div>
<div class="nav-item" onclick="location.href='documents.html'"><span class="nav-icon">📄</span>Documents</div>
<div class="nav-item" onclick="location.href='staff_management.html'"><span class="nav-icon">👤</span>Staff Management</div>
<div class="nav-item" onclick="location.href='reports_analytics.html'"><span class="nav-icon">📊</span>Reports & Analytics</div>
<div class="nav-item" onclick="location.href='ai_assistant.html'"><span class="nav-icon">🤖</span>AI Assistant<span class="nav-new">New</span></div>
<div class="nav-item" onclick="location.href='settings.html'"><span class="nav-icon">⚙️</span>Settings</div>
<div class="nav-item" onclick="location.href='public_portal.html'"><span class="nav-icon">🌐</span>Public Portal</div>
</nav>
<div class="sidebar-footer">
<div class="help-row">
<span>❓</span>
<div>
<div class="help-label">Need Help?</div>
<div class="help-sub">Contact Support</div>
</div>
</div>
</div>
</aside>
<!-- ══ RIGHT PANEL ══ -->
<div class="right-panel">
<!-- TOPBAR -->
<header class="topbar">
<span class="menu-btn">☰</span>
<div class="const-selector">
<span style="font-size:13px">🏛️</span>
Embakasi South Constituency
<span style="font-size:10px;color:var(--muted)">▼</span>
</div>
<div class="search">
<span>🔍</span>
<span>Search for anything...</span>
<kbd>⌘K</kbd>
</div>
<div class="topbar-right">
<div class="icon-btn">🔔<div class="bdg">8</div></div>
<div class="icon-btn">✉️<div class="bdg grn">3</div></div>
<div class="user-pill">
<div class="avatar" style="width:26px;height:26px;font-size:10px">DM</div>
Hon. David Mwangi
<span style="font-size:10px;color:var(--muted)">▼</span>
</div>
</div>
</header>
<!-- SCROLLABLE CONTENT -->
<main class="content">
<!-- Greeting -->
<div class="greeting-row">
<div class="greeting">
<h1>Good morning, Hon. David 👋</h1>
<p>Here's what's happening in Embakasi South today.</p>
</div>
<div class="date-pill">📅 Today, 20 May 2024 ▼</div>
</div>
<!-- Stat Cards -->
<div class="stat-row">
<div class="stat-card">
<div class="stat-icon" style="background:#fef9c3">📋</div>
<div style="flex:1">
<div class="stat-label">Complaints Pending</div>
<div class="stat-val">23</div>
<div class="stat-sub up">▲ 12% from yesterday</div>
</div>
<span class="stat-arrow">→</span>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:var(--blue-light)">🗂️</div>
<div style="flex:1">
<div class="stat-label">Projects in Progress</div>
<div class="stat-val">47</div>
<div class="stat-sub up">▲ 8% from last week</div>
</div>
<span class="stat-arrow">→</span>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:var(--green-light)">💹</div>
<div style="flex:1">
<div class="stat-label">Budget Utilization</div>
<div class="stat-val">63%</div>
<div class="pbar"><div class="pbar-fill" style="width:63%"></div></div>
<div class="stat-sub muted">KSh 123.4M of KSh 195.2M</div>
</div>
<span class="stat-arrow">→</span>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:var(--amber-light)">📅</div>
<div style="flex:1">
<div class="stat-label">Upcoming Events</div>
<div class="stat-val">6</div>
<div class="stat-sub muted">Today & Tomorrow</div>
</div>
<span class="stat-arrow">→</span>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:var(--red-light)">🔔</div>
<div style="flex:1">
<div class="stat-label">Emergency Alerts</div>
<div class="stat-val" style="color:var(--red)">2</div>
<div class="stat-sub warn">Requires attention</div>
</div>
<span class="stat-arrow">→</span>
</div>
</div>
<!-- Middle 3-column grid: map | complaints | schedule+budget -->
<div class="mid-grid">
<!-- Col 1: Map -->
<div class="card">
<div class="card-hdr">
<span class="card-title">Constituency Overview Map</span>
</div>
<div class="map-body">
<svg class="map-svg" viewBox="0 0 520 310" xmlns="http://www.w3.org/2000/svg">
<rect width="520" height="310" fill="#d4e8d4"/>
<g stroke="#b8d0b8" stroke-width="10" fill="none">
<line x1="0" y1="155" x2="520" y2="155"/>
<line x1="260" y1="0" x2="260" y2="310"/>
</g>
<g stroke="#c2d8c2" stroke-width="2.5" fill="none">
<line x1="0" y1="80" x2="520" y2="80"/>
<line x1="0" y1="240" x2="520" y2="240"/>
<line x1="110" y1="0" x2="110" y2="310"/>
<line x1="400" y1="0" x2="400" y2="310"/>
<line x1="0" y1="155" x2="520" y2="155"/>
</g>
<path d="M70,35 L450,35 L490,155 L450,280 L70,280 L30,155 Z"
fill="none" stroke="#1a7a4a" stroke-width="2" stroke-dasharray="8,4"/>
<rect x="45" y="45" width="185" height="105" rx="4" fill="#bddcb0" opacity=".45"/>
<rect x="285" y="45" width="185" height="105" rx="4" fill="#bddcb0" opacity=".45"/>
<rect x="45" y="175" width="185" height="92" rx="4" fill="#bddcb0" opacity=".45"/>
<rect x="285" y="175" width="185" height="92" rx="4" fill="#bddcb0" opacity=".45"/>
<text x="115" y="106" font-size="10" fill="#2d5a2d" font-family="Inter,sans-serif" font-weight="700">EMBAKASI</text>
<text x="55" y="232" font-size="8.5" fill="#2d5a2d" font-family="Inter,sans-serif">KWA NJENGA</text>
<text x="295" y="232" font-size="8.5" fill="#2d5a2d" font-family="Inter,sans-serif">IMARA DAIMA</text>
<text x="295" y="90" font-size="8.5" fill="#2d5a2d" font-family="Inter,sans-serif">MIHANGO</text>
<text x="55" y="90" font-size="8.5" fill="#2d5a2d" font-family="Inter,sans-serif">PIPELINE</text>
</svg>
<div class="map-ctrls">
<div class="map-btn">+</div>
<div class="map-btn">−</div>
</div>
<!-- Schools -->
<div class="map-pin" style="background:#16a34a;color:white;left:27%;top:33%">🏫</div>
<div class="map-pin" style="background:#16a34a;color:white;left:55%;top:22%">🏫</div>
<div class="map-pin" style="background:#16a34a;color:white;left:71%;top:47%">🏫</div>
<div class="map-pin" style="background:#16a34a;color:white;left:41%;top:66%">🏫</div>
<!-- Health -->
<div class="map-pin" style="background:#dc2626;color:white;left:17%;top:54%">🏥</div>
<div class="map-pin" style="background:#dc2626;color:white;left:63%;top:68%">🏥</div>
<div class="map-pin" style="background:#dc2626;color:white;left:48%;top:41%">🏥</div>
<!-- Water -->
<div class="map-pin" style="background:#2563eb;color:white;left:35%;top:52%">💧</div>
<div class="map-pin" style="background:#2563eb;color:white;left:76%;top:34%">💧</div>
<!-- Roads -->
<div class="map-pin" style="background:#d97706;color:white;left:22%;top:75%">🚧</div>
<div class="map-pin" style="background:#d97706;color:white;left:59%;top:57%">🚧</div>
<!-- Market -->
<div class="map-pin" style="background:#7c3aed;color:white;left:81%;top:72%">🏪</div>
</div>
<div class="map-legend">
<div class="leg"><div class="leg-dot" style="background:#16a34a"></div>Schools</div>
<div class="leg"><div class="leg-dot" style="background:#dc2626"></div>Health Facilities</div>
<div class="leg"><div class="leg-dot" style="background:#2563eb"></div>Water Points</div>
<div class="leg"><div class="leg-dot" style="background:#d97706"></div>Road Projects</div>
<div class="leg"><div class="leg-dot" style="background:#7c3aed"></div>Markets</div>
<div class="leg" style="color:var(--green);font-weight:600">More Layers ▼</div>
</div>
</div>
<!-- Col 2: Pending Complaints -->
<div class="card">
<div class="card-hdr">
<span class="card-title">Pending Complaints</span>
<span class="view-link">View all</span>
</div>
<div class="complaint">
<div class="c-ico" style="background:#dbeafe">💧</div>
<div style="flex:1;min-width:0">
<div class="c-title">Water pipe burst</div>
<div class="c-sub">Kiandutu, Pipeline Ward · Today, 8:30 AM</div>
</div>
<span class="ptag md">Medium</span>
</div>
<div class="complaint">
<div class="c-ico" style="background:#fee2e2">🌉</div>
<div style="flex:1;min-width:0">
<div class="c-title">Broken bridge</div>
<div class="c-sub">Kwa Reuben, Imara Daima · Yesterday, 4:15 PM</div>
</div>
<span class="ptag hi">High</span>
</div>
<div class="complaint">
<div class="c-ico" style="background:#fef9c3">💡</div>
<div style="flex:1;min-width:0">
<div class="c-title">Streetlight not working</div>
<div class="c-sub">Soweto, Mabatini Ward · Yesterday, 11:20 AM</div>
</div>
<span class="ptag lo">Low</span>
</div>
<div class="complaint">
<div class="c-ico" style="background:#fef3c7">🗑️</div>
<div style="flex:1;min-width:0">
<div class="c-title">Garbage collection</div>
<div class="c-sub">Umoja II, Umoja Ward · 18 May 2024</div>
</div>
<span class="ptag md">Medium</span>
</div>
<div class="complaint">
<div class="c-ico" style="background:#fce7f3">🚰</div>
<div style="flex:1;min-width:0">
<div class="c-title">Drainage blockage</div>
<div class="c-sub">Kware, Kwa Njenga Ward · 17 May 2024</div>
</div>
<span class="ptag hi">High</span>
</div>
<div class="manage-btn">Manage All Complaints</div>
</div>
<!-- Col 3: Schedule + Budget (single card) -->
<div class="card">
<div class="card-hdr">
<span class="card-title">Today's Schedule</span>
<span class="view-link">View calendar</span>
</div>
<div class="sched-item">
<div class="s-time">8:00 AM</div>
<div class="s-dot" style="background:#2563eb"></div>
<div><div class="s-name">Constituency Staff Meeting</div><div class="s-loc">Parliamentary Office</div></div>
</div>
<div class="sched-item">
<div class="s-time">10:00 AM</div>
<div class="s-dot" style="background:#16a34a"></div>
<div><div class="s-name">School Opening – St. Bakhita</div><div class="s-loc">Umoja II Primary School</div></div>
</div>
<div class="sched-item">
<div class="s-time">1:00 PM</div>
<div class="s-dot" style="background:#f59e0b"></div>
<div><div class="s-name">Baraza – Pipeline Ward</div><div class="s-loc">Pipeline Ward Office</div></div>
</div>
<div class="sched-item">
<div class="s-time">4:00 PM</div>
<div class="s-dot" style="background:#dc2626"></div>
<div><div class="s-name">Fundraiser – Youth Group</div><div class="s-loc">Mihango Social Hall</div></div>
</div>
<div class="sched-item">
<div class="s-time">6:30 PM</div>
<div class="s-dot" style="background:#7c3aed"></div>
<div><div class="s-name">Church Service – ACK Imara</div><div class="s-loc">Imara Daima</div></div>
</div>
<!-- Budget mini -->
<div class="budget-sect">
<div class="bdg-title">Budget Utilization</div>
<div class="bdg-sub">This Financial Year</div>
<div class="donut-row">
<svg width="66" height="66" viewBox="0 0 66 66" style="flex-shrink:0">
<circle cx="33" cy="33" r="26" fill="none" stroke="#e5e7eb" stroke-width="9"/>
<circle cx="33" cy="33" r="26" fill="none" stroke="#1a7a4a" stroke-width="9"
stroke-dasharray="103 60" stroke-dashoffset="0"
transform="rotate(-90 33 33)"/>
<text x="33" y="37" text-anchor="middle" font-size="12" font-weight="700"
fill="#111827" font-family="Inter,sans-serif">63%</text>
</svg>
<div>
<span class="donut-pct">63%</span>
<span class="donut-lbl">Used</span>
<div class="donut-info">
<strong>KSh 123.4M</strong> used<br>
<strong>KSh 71.8M</strong> balance
</div>
</div>
</div>
</div>
<div class="finance-btn">View finance dashboard</div>
</div>
</div><!-- /mid-grid -->
<!-- Bottom 3-column grid -->
<div class="bot-grid">
<!-- Projects Overview -->
<div class="card">
<div class="card-hdr">
<span class="card-title">Projects Overview</span>
<span class="view-link">View all</span>
</div>
<div class="proj-chart-row">
<div class="pie-wrap">
<svg width="96" height="96" viewBox="0 0 96 96">
<circle cx="48" cy="48" r="36" fill="none" stroke="#e5e7eb" stroke-width="13"/>
<!-- In Progress 26/47 = 55% -->
<circle cx="48" cy="48" r="36" fill="none" stroke="#2563eb" stroke-width="13"
stroke-dasharray="124 102" stroke-dashoffset="0" transform="rotate(-90 48 48)"/>
<!-- Completed 12/47 = 26% -->
<circle cx="48" cy="48" r="36" fill="none" stroke="#16a34a" stroke-width="13"
stroke-dasharray="51 175" stroke-dashoffset="-124" transform="rotate(-90 48 48)"/>
<!-- Delayed 5/47 = 11% -->
<circle cx="48" cy="48" r="36" fill="none" stroke="#f59e0b" stroke-width="13"
stroke-dasharray="21 205" stroke-dashoffset="-175" transform="rotate(-90 48 48)"/>
<!-- Not Started 4/47 = 9% -->
<circle cx="48" cy="48" r="36" fill="none" stroke="#9ca3af" stroke-width="13"
stroke-dasharray="17 209" stroke-dashoffset="-196" transform="rotate(-90 48 48)"/>
</svg>
<div class="pie-center">
<strong>47</strong>
<small>Total</small>
</div>
</div>
<div style="flex:1">
<div class="proj-leg-item"><div class="proj-dot" style="background:#2563eb"></div>In Progress<span class="proj-count">26</span></div>
<div class="proj-leg-item"><div class="proj-dot" style="background:#16a34a"></div>Completed<span class="proj-count">12</span></div>
<div class="proj-leg-item"><div class="proj-dot" style="background:#f59e0b"></div>Delayed<span class="proj-count">5</span></div>
<div class="proj-leg-item"><div class="proj-dot" style="background:#9ca3af"></div>Not Started<span class="proj-count">4</span></div>
</div>
</div>
</div>
<!-- Bursary Applications -->
<div class="card">
<div class="card-hdr">
<span class="card-title">Bursary Applications</span>
<div style="background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:3px 7px;font-size:10.5px;cursor:pointer">This Year ▼</div>
</div>
<div class="bursary-hero">
<div class="bursary-ico">🎓</div>
<div>
<div class="bursary-num">3,248</div>
<div class="bursary-lbl">Total Applications</div>
</div>
</div>
<div class="bursary-segs">
<div class="bursary-seg" style="background:#ecfdf5">
<div class="seg-row"><div class="seg-dot" style="background:#16a34a"></div><span style="color:var(--muted)">Approved</span></div>
<strong style="color:#16a34a">1,892</strong>
</div>
<div class="bursary-seg" style="background:#fffbeb">
<div class="seg-row"><div class="seg-dot" style="background:#f59e0b"></div><span style="color:var(--muted)">Under Review</span></div>
<strong style="color:#b45309">1,156</strong>
</div>
<div class="bursary-seg" style="background:#fef2f2">
<div class="seg-row"><div class="seg-dot" style="background:#dc2626"></div><span style="color:var(--muted)">Rejected</span></div>
<strong style="color:#dc2626">200</strong>
</div>
</div>
<div style="padding:0 14px 11px"><span class="view-link">Manage Bursaries →</span></div>
</div>
<!-- Social Protection Cases -->
<div class="card">
<div class="card-hdr">
<span class="card-title">Social Protection Cases</span>
<span class="view-link">View all</span>
</div>
<div class="social-hero">
<div class="social-ico">❤️</div>
<div>
<div class="bursary-num">1,024</div>
<div class="bursary-lbl">Total Beneficiaries</div>
</div>
</div>
<div class="social-rows">
<div class="soc-row"><div class="soc-dot" style="background:#f59e0b"></div>Elderly<span class="soc-count">312</span></div>
<div class="soc-row"><div class="soc-dot" style="background:#2563eb"></div>PWDs<span class="soc-count">278</span></div>
<div class="soc-row"><div class="soc-dot" style="background:#16a34a"></div>Orphans & Vulnerable<span class="soc-count">434</span></div>
</div>
<div style="padding:0 14px 11px"><span class="view-link">Manage Cases →</span></div>
</div>
</div><!-- /bot-grid -->
<!-- Recent Activity -->
<div>
<div class="act-section-title">Recent Activity</div>
<div class="act-grid">
<div class="act-card">
<div class="act-top">
<div class="act-ava" style="background:#dbeafe">👩</div>
<div>
<div class="act-text"><strong>Jane W.</strong> uploaded project update — <strong>Kwa Njenga Water Project</strong></div>
<div class="act-time">10 minutes ago</div>
</div>
</div>
<div class="act-img">🏗️</div>
</div>
<div class="act-card">
<div class="act-top">
<div class="act-ava" style="background:#dcfce7">✅</div>
<div>
<div class="act-text">Complaint <strong>#1421</strong> resolved — Streetlight not working, <strong>Soweto</strong></div>
<div class="act-time">25 minutes ago</div>
</div>
</div>
</div>
<div class="act-card">
<div class="act-top">
<div class="act-ava" style="background:#f3e8ff">🎓</div>
<div>
<div class="act-text">New bursary application — <strong>John Kamau</strong>, Kenyatta University</div>
<div class="act-time">1 hour ago</div>
</div>
</div>
</div>
<div class="act-card">
<div class="act-top">
<div class="act-ava" style="background:#fff7ed">🏗️</div>
<div>
<div class="act-text">Project milestone — <strong>Imara Daima Dispensary Construction 75% complete</strong></div>
<div class="act-time">2 hours ago</div>
</div>
</div>
</div>
<div class="act-card">
<div class="act-top">
<div class="act-ava" style="background:#fce7f3">📅</div>
<div>
<div class="act-text">New event created — <strong>Youth Empowerment Forum</strong></div>
<div class="act-time">3 hours ago</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div><!-- /right-panel -->
<script>
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', () => {
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
item.classList.add('active');
});
});
document.querySelectorAll('.stat-card').forEach(card => {
card.addEventListener('click', () => {
document.querySelectorAll('.stat-card').forEach(c => c.style.outline = '');
card.style.outline = '2px solid var(--green)';
setTimeout(() => { card.style.outline = ''; }, 1000);
});
});
</script>
</body>
</html>