403Webshell
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 :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :

[ Back ]     

Current File : /home/konzalta/constituency.work/ward_management.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ConstituencyOS – Ward Management</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);
}
html,body{height:100%;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;font-size:13px;color:var(--text);background:var(--bg);}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;z-index:40;}
.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;}
.s-av{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;}
.s-av .dot{position:absolute;bottom:1px;right:1px;width:8px;height:8px;border-radius:50%;background:var(--green-mid);border:2px solid white;}
.pname{font-size:11.5px;font-weight:600;}.psub{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-chev{margin-left:auto;font-size:10px;color:var(--light);}
.sidebar-footer{padding:12px 14px;border-top:1px solid var(--border);flex-shrink:0;}
.right-panel{margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh;}
.topbar{position:sticky;top:0;z-index:30;height:52px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 18px;}
.menu-btn{font-size:17px;cursor:pointer;color:var(--muted);}
.const-sel{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;}
.srch{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;}
.srch input{border:none;background:transparent;outline:none;width:100%;font-size:12px;font-family:inherit;}
.srch kbd{margin-left:auto;font-size:9.5px;background:var(--border);padding:1px 5px;border-radius:3px;font-family:inherit;}
.tbr{margin-left:auto;display:flex;align-items:center;gap:8px;}
.ibt{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;}
.ibt .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;}
.ibt .bdg.grn{background:var(--green-mid);}
.upill{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;}
.content{padding:18px 18px 40px;display:flex;flex-direction:column;gap:14px;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;border:none;transition:background .15s;}
.btn-primary{background:var(--green);color:white;}.btn-primary:hover{background:var(--green-mid);}
.btn-ghost{background:var(--white);color:var(--text);border:1px solid var(--border);}.btn-ghost:hover{background:var(--bg);}
.page-hdr{display:flex;align-items:flex-start;justify-content:space-between;}
.page-title{font-size:19px;font-weight:700;}
.page-sub{font-size:12px;color:var(--muted);margin-top:2px;}

/* WARD CARDS GRID */
.wards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.ward-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:box-shadow .15s;}
.ward-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);}
.ward-card.selected{border-color:var(--green);box-shadow:0 0 0 3px var(--green-light);}
.wc-header{padding:16px;display:flex;align-items:flex-start;gap:12px;}
.wc-icon{width:46px;height:46px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.wc-name{font-size:14px;font-weight:700;}
.wc-admin{font-size:11px;color:var(--muted);margin-top:1px;line-height:1.4;}
.wc-pop{font-size:11px;margin-top:3px;font-weight:500;}
.wc-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);}
.wc-stat{padding:10px 12px;text-align:center;border-right:1px solid var(--border);}
.wc-stat:last-child{border-right:none;}
.wcs-val{font-size:16px;font-weight:700;}
.wcs-lbl{font-size:9.5px;color:var(--muted);margin-top:2px;}
.wc-progress{padding:12px 16px;border-top:1px solid var(--border);}
.wcp-label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px;}
.wcp-bar{height:6px;background:var(--border);border-radius:6px;overflow:hidden;}
.wcp-fill{height:100%;border-radius:6px;}
.wc-footer{padding:10px 16px;background:var(--bg);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);}
.wc-issues{font-size:11px;color:var(--muted);}
.wc-btn{font-size:11px;font-weight:600;color:var(--green);cursor:pointer;}

/* DETAIL LAYOUT */
.detail-layout{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start;}
.dcard{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.dcard-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;}
.vlink{font-size:11px;color:var(--green);cursor:pointer;font-weight:500;}

/* STAFF LIST */
.staff-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);}
.staff-item:last-child{border-bottom:none;}
.staff-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;flex-shrink:0;}
.staff-name{font-size:12.5px;font-weight:600;}
.staff-role{font-size:11px;color:var(--muted);}
.staff-phone{font-size:11px;color:var(--muted);margin-left:auto;}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* PROJECTS LIST */
.proj-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);}
.proj-item:last-child{border-bottom:none;}
.proj-icon{font-size:18px;flex-shrink:0;}
.proj-name{font-size:12px;font-weight:600;}
.proj-meta{font-size:10.5px;color:var(--muted);}
.proj-prog{flex-shrink:0;text-align:right;}
.proj-pct{font-size:12px;font-weight:700;}
.mini-bar{width:60px;height:4px;background:var(--border);border-radius:4px;margin-top:3px;}
.mini-bar-fill{height:100%;border-radius:4px;}

/* ISSUES */
.issue-item{display:flex;align-items:flex-start;gap:8px;padding:9px 16px;border-bottom:1px solid var(--border);}
.issue-item:last-child{border-bottom:none;}
.issue-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0;}
.issue-title{font-size:12px;font-weight:600;}
.issue-meta{font-size:10.5px;color:var(--muted);margin-top:1px;}
.ptag{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:auto;flex-shrink:0;}
.ptag.hi{background:#fdecea;color:#b91c1c;}
.ptag.md{background:#fff7ed;color:#c2410c;}
.ptag.lo{background:#ecfdf5;color:#065f46;}

/* METRICS ROW */
.ward-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.wm{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.wm-val{font-size:20px;font-weight:700;}
.wm-lbl{font-size:10.5px;color:var(--muted);margin-top:2px;}
</style>
</head>
<body>
<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="s-av">DM<div class="dot"></div></div><div><div class="pname">Hon. David Mwangi, MP</div><div class="psub">Embakasi South</div></div></div>
  <nav class="sidebar-nav">
    <div class="nav-item" onclick="location.href='index.html'"><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 active"><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 style="display:flex;align-items:center;gap:9px;cursor:pointer"><span>❓</span><div><div style="font-size:11.5px;font-weight:600">Need Help?</div><div style="font-size:10.5px;color:var(--muted)">Contact Support</div></div></div></div>
</aside>

<div class="right-panel">
  <header class="topbar">
    <span class="menu-btn">☰</span>
    <div class="const-sel"><span style="font-size:13px">πŸ›οΈ</span>Embakasi South Constituency<span style="font-size:10px;color:var(--muted)">β–Ό</span></div>
    <div class="srch"><span>πŸ”</span><input type="text" placeholder="Search for anything…"><kbd>⌘K</kbd></div>
    <div class="tbr">
      <div class="ibt">πŸ””<div class="bdg">8</div></div>
      <div class="ibt">βœ‰οΈ<div class="bdg grn">3</div></div>
      <div class="upill"><div class="s-av" 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>

  <main class="content">
    <div class="page-hdr">
      <div><div class="page-title">Ward Management</div><div class="page-sub">Overview of all 6 wards β€” staff, projects, issues, and development progress</div></div>
      <div style="display:flex;gap:8px;">
        <button class="btn btn-ghost">πŸ“‹ Schedule Baraza</button>
        <button class="btn btn-primary">οΌ‹ Add Ward Officer</button>
      </div>
    </div>

    <!-- Constituency-level metrics -->
    <div class="ward-metrics">
      <div class="wm"><div class="wm-val">6</div><div class="wm-lbl">Wards</div></div>
      <div class="wm"><div class="wm-val" style="color:var(--blue)">124,850</div><div class="wm-lbl">Total Population</div></div>
      <div class="wm"><div class="wm-val" style="color:var(--green)">47</div><div class="wm-lbl">Active Projects</div></div>
      <div class="wm"><div class="wm-val" style="color:var(--red)">9</div><div class="wm-lbl">Open Complaints</div></div>
    </div>

    <!-- Ward cards -->
    <div class="wards-grid" id="wardsGrid"></div>

    <!-- Selected ward detail -->
    <div id="wardDetail" style="display:none;">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
        <div style="font-size:16px;font-weight:700" id="wd-title"></div>
        <button class="btn btn-ghost" style="font-size:11px;padding:4px 10px;" onclick="closeDetail()">βœ• Close</button>
      </div>
      <div class="detail-layout">
        <div style="display:flex;flex-direction:column;gap:12px;">
          <!-- Staff -->
          <div class="dcard">
            <div class="dcard-hdr"><span>Ward Staff</span><span class="vlink">Manage staff</span></div>
            <div id="wd-staff"></div>
          </div>
          <!-- Projects -->
          <div class="dcard">
            <div class="dcard-hdr"><span>Active Projects</span><span class="vlink" onclick="location.href='projects.html'">View all β†’</span></div>
            <div id="wd-projects"></div>
          </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:12px;">
          <!-- Open Issues -->
          <div class="dcard">
            <div class="dcard-hdr"><span>Open Complaints</span><span class="vlink" onclick="location.href='complaints.html'">View all β†’</span></div>
            <div id="wd-issues"></div>
          </div>
          <!-- Stats -->
          <div class="dcard">
            <div class="dcard-hdr"><span>Ward Statistics</span></div>
            <div id="wd-stats" style="padding:12px 16px;display:flex;flex-direction:column;gap:8px;font-size:12px;"></div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<script>
const WARDS = [
  {
    id:'pipeline',name:'Pipeline Ward',icon:'πŸ›£οΈ',color:'#2563eb',bg:'#eff6ff',
    administrator:'James Kamau',mca:'Hon. Robert Kiprotich',population:24800,voters:17200,
    projects:4,complaints:3,bursaries:312,social:94,
    projectProgress:62,
    staff:[
      {name:'James Kamau',role:'Ward Administrator',phone:'0712 300 001',color:'#2563eb'},
      {name:'Eng. Peter Mwangi',role:'Ward Engineer',phone:'0712 300 002',color:'#1a7a4a'},
      {name:'Joyce Wanjiku',role:'Social Worker',phone:'0712 300 003',color:'#7c3aed'},
      {name:'Hassan Abdi',role:'Ward Security Officer',phone:'0712 300 004',color:'#374151'},
    ],
    projects_detail:[
      {name:'Kiandutu Borehole Drilling',sector:'πŸ’§',progress:45,status:'In Progress'},
      {name:'Pipeline Road Rehabilitation',sector:'πŸ›£οΈ',progress:30,status:'Delayed'},
      {name:'School Fence – Pipeline Primary',sector:'🏫',progress:0,status:'Not Started'},
      {name:'Kiandutu Water Pipeline',sector:'πŸ’§',progress:68,status:'In Progress'},
    ],
    complaints_detail:[
      {title:'Water pipe burst',priority:'hi',date:'20 May 2024'},
      {title:'School fence vandalized',priority:'md',date:'16 May 2024'},
      {title:'School leaking roof',priority:'md',date:'13 May 2024'},
    ],
    stats:[
      {k:'Area (kmΒ²)',v:'4.2'},
      {k:'Registered Voters',v:'17,200'},
      {k:'Ward Fund (FY24)',v:'KSh 8.2M'},
      {k:'Bursary Recipients',v:'312'},
      {k:'Social Protection',v:'94'},
      {k:'Health Facilities',v:'2'},
      {k:'Schools',v:'7'},
      {k:'Markets',v:'3'},
    ]
  },
  {
    id:'imara',name:'Imara Daima',icon:'πŸ₯',color:'#dc2626',bg:'#fdecea',
    administrator:'Susan Muthoni',mca:'Hon. Lillian Adhiambo',population:22400,voters:15100,
    projects:4,complaints:2,bursaries:286,social:89,
    projectProgress:55,
    staff:[
      {name:'Susan Muthoni',role:'Ward Administrator',phone:'0723 400 001',color:'#dc2626'},
      {name:'Dr. Charles Achieng',role:'Health Coordinator',phone:'0723 400 002',color:'#1a7a4a'},
      {name:'Faith Omondi',role:'Social Worker',phone:'0723 400 003',color:'#7c3aed'},
    ],
    projects_detail:[
      {name:'Imara Daima Dispensary',sector:'πŸ₯',progress:75,status:'In Progress'},
      {name:'Footbridge Repair – Kwa Reuben',sector:'πŸ›£οΈ',progress:10,status:'Delayed'},
      {name:'Imara Daima Dispensary Handover',sector:'🏒',progress:0,status:'Not Started'},
      {name:'Noise Pollution Control',sector:'πŸ”‡',progress:20,status:'In Progress'},
    ],
    complaints_detail:[
      {title:'Broken bridge – Kwa Reuben',priority:'hi',date:'19 May 2024'},
      {title:'Health clinic out of stock',priority:'hi',date:'16 May 2024'},
    ],
    stats:[{k:'Area (kmΒ²)',v:'3.8'},{k:'Registered Voters',v:'15,100'},{k:'Ward Fund (FY24)',v:'KSh 7.8M'},{k:'Bursary Recipients',v:'286'},{k:'Social Protection',v:'89'},{k:'Health Facilities',v:'3'},{k:'Schools',v:'6'},{k:'Markets',v:'2'}]
  },
  {
    id:'mabatini',name:'Mabatini Ward',icon:'⚑',color:'#f59e0b',bg:'#fffbeb',
    administrator:'Peter Njoroge',mca:'Hon. Samuel Mutiso',population:19600,voters:13400,
    projects:3,complaints:2,bursaries:248,social:76,
    projectProgress:72,
    staff:[
      {name:'Peter Njoroge',role:'Ward Administrator',phone:'0734 500 001',color:'#f59e0b'},
      {name:'Eng. Grace Kamau',role:'Ward Engineer',phone:'0734 500 002',color:'#1a7a4a'},
      {name:'Ann Cherotich',role:'Social Worker',phone:'0734 500 003',color:'#7c3aed'},
    ],
    projects_detail:[
      {name:'Mabatini Solar Street Lights',sector:'⚑',progress:100,status:'Completed'},
      {name:'Mabatini Health Centre Upgrade',sector:'πŸ₯',progress:0,status:'Not Started'},
      {name:'School Roof Repair',sector:'🏫',progress:30,status:'In Progress'},
    ],
    complaints_detail:[
      {title:'Streetlight not working – Soweto',priority:'lo',date:'19 May 2024'},
      {title:'Borehole pump failure',priority:'hi',date:'15 May 2024'},
    ],
    stats:[{k:'Area (kmΒ²)',v:'3.1'},{k:'Registered Voters',v:'13,400'},{k:'Ward Fund (FY24)',v:'KSh 6.9M'},{k:'Bursary Recipients',v:'248'},{k:'Social Protection',v:'76'},{k:'Health Facilities',v:'2'},{k:'Schools',v:'5'},{k:'Markets',v:'2'}]
  },
  {
    id:'umoja',name:'Umoja Ward',icon:'🏟️',color:'#7c3aed',bg:'#f5f3ff',
    administrator:'Grace Wambua',mca:'Hon. Brian Otieno',population:21200,voters:14800,
    projects:3,complaints:1,bursaries:275,social:81,
    projectProgress:68,
    staff:[
      {name:'Grace Wambua',role:'Ward Administrator',phone:'0745 600 001',color:'#7c3aed'},
      {name:'Coach Samuel Karuri',role:'Youth Coordinator',phone:'0745 600 002',color:'#2563eb'},
      {name:'Patricia Akinyi',role:'Social Worker',phone:'0745 600 003',color:'#dc2626'},
    ],
    projects_detail:[
      {name:'Umoja Market Renovation',sector:'πŸͺ',progress:100,status:'Completed'},
      {name:'Umoja Youth Sports Complex',sector:'⚽',progress:40,status:'In Progress'},
      {name:'Umoja Road Drainage',sector:'🚰',progress:0,status:'Not Started'},
    ],
    complaints_detail:[
      {title:'Garbage collection – Umoja II',priority:'md',date:'18 May 2024'},
    ],
    stats:[{k:'Area (kmΒ²)',v:'3.5'},{k:'Registered Voters',v:'14,800'},{k:'Ward Fund (FY24)',v:'KSh 7.4M'},{k:'Bursary Recipients',v:'275'},{k:'Social Protection',v:'81'},{k:'Health Facilities',v:'2'},{k:'Schools',v:'6'},{k:'Markets',v:'4'}]
  },
  {
    id:'kwanjenga',name:'Kwa Njenga Ward',icon:'πŸ’§',color:'#0891b2',bg:'#ecfeff',
    administrator:'Joseph Odhiambo',mca:'Hon. Catherine Wanjala',population:20100,voters:13600,
    projects:3,complaints:2,bursaries:263,social:84,
    projectProgress:23,
    staff:[
      {name:'Joseph Odhiambo',role:'Ward Administrator',phone:'0756 700 001',color:'#0891b2'},
      {name:'Eng. Rose Njeri',role:'Ward Engineer',phone:'0756 700 002',color:'#1a7a4a'},
      {name:'Kevin Mwangi',role:'Community Liaison',phone:'0756 700 003',color:'#374151'},
    ],
    projects_detail:[
      {name:'Kwa Njenga Water Pipeline',sector:'πŸ’§',progress:68,status:'In Progress'},
      {name:'Kwa Njenga Drainage System',sector:'🚰',progress:0,status:'Not Started'},
      {name:'Kware Bridge Repair',sector:'πŸŒ‰',progress:0,status:'Not Started'},
    ],
    complaints_detail:[
      {title:'Drainage blockage – Kware',priority:'hi',date:'17 May 2024'},
      {title:'Illegal dumping – river bank',priority:'md',date:'15 May 2024'},
    ],
    stats:[{k:'Area (kmΒ²)',v:'3.9'},{k:'Registered Voters',v:'13,600'},{k:'Ward Fund (FY24)',v:'KSh 7.1M'},{k:'Bursary Recipients',v:'263'},{k:'Social Protection',v:'84'},{k:'Health Facilities',v:'1'},{k:'Schools',v:'5'},{k:'Markets',v:'2'}]
  },
  {
    id:'mihango',name:'Mihango Ward',icon:'🏫',color:'#1a7a4a',bg:'#e8f5ee',
    administrator:'Alice Njoroge',mca:'Hon. Dennis Karanja',population:16750,voters:11400,
    projects:3,complaints:1,bursaries:218,social:70,
    projectProgress:64,
    staff:[
      {name:'Alice Njoroge',role:'Ward Administrator',phone:'0767 800 001',color:'#1a7a4a'},
      {name:'Headmaster Paul Oduya',role:'Education Coordinator',phone:'0767 800 002',color:'#2563eb'},
      {name:'Mary Chebet',role:'Social Worker',phone:'0767 800 003',color:'#7c3aed'},
    ],
    projects_detail:[
      {name:'Mihango Primary Classrooms',sector:'🏫',progress:55,status:'In Progress'},
      {name:'Mihango Road Storm Drains',sector:'🚰',progress:100,status:'Completed'},
      {name:'Youth Empowerment Centre',sector:'🏟️',progress:0,status:'Not Started'},
    ],
    complaints_detail:[
      {title:'Road pothole – Mihango Rd',priority:'hi',date:'17 May 2024'},
    ],
    stats:[{k:'Area (kmΒ²)',v:'2.8'},{k:'Registered Voters',v:'11,400'},{k:'Ward Fund (FY24)',v:'KSh 5.9M'},{k:'Bursary Recipients',v:'218'},{k:'Social Protection',v:'70'},{k:'Health Facilities',v:'1'},{k:'Schools',v:'4'},{k:'Markets',v:'2'}]
  },
];

function initials(n){return n.split(' ').slice(0,2).map(x=>x[0]).join('').toUpperCase();}
const avatarPalette=['#1a7a4a','#2563eb','#7c3aed','#dc2626','#d97706','#0891b2'];
function pal(n){let h=0;for(let c of n)h=(h*31+c.charCodeAt(0))%avatarPalette.length;return avatarPalette[h];}

function renderWards(){
  document.getElementById('wardsGrid').innerHTML = WARDS.map(w=>`
    <div class="ward-card" id="wcard-${w.id}" onclick="selectWard('${w.id}')">
      <div class="wc-header">
        <div class="wc-icon" style="background:${w.bg}">${w.icon}</div>
        <div>
          <div class="wc-name">${w.name}</div>
          <div class="wc-admin">πŸ›οΈ MCA: <strong>${w.mca}</strong></div>
          <div class="wc-admin">πŸ‘€ ${w.administrator} (Ward Admin)</div>
          <div class="wc-pop" style="color:${w.color}">πŸ‘₯ ${w.population.toLocaleString()} residents</div>
        </div>
      </div>
      <div class="wc-stats">
        <div class="wc-stat">
          <div class="wcs-val" style="color:var(--blue)">${w.projects}</div>
          <div class="wcs-lbl">Projects</div>
        </div>
        <div class="wc-stat">
          <div class="wcs-val" style="color:var(--red)">${w.complaints}</div>
          <div class="wcs-lbl">Issues</div>
        </div>
        <div class="wc-stat">
          <div class="wcs-val" style="color:var(--purple)">${w.bursaries}</div>
          <div class="wcs-lbl">Bursaries</div>
        </div>
        <div class="wc-stat">
          <div class="wcs-val" style="color:var(--green)">${w.social}</div>
          <div class="wcs-lbl">Social</div>
        </div>
      </div>
      <div class="wc-progress">
        <div class="wcp-label"><span>Development Progress</span><span style="font-weight:700;color:${w.color}">${w.projectProgress}%</span></div>
        <div class="wcp-bar"><div class="wcp-fill" style="width:${w.projectProgress}%;background:${w.color}"></div></div>
      </div>
      <div class="wc-footer">
        <span class="wc-issues">${w.complaints} open complaint${w.complaints!==1?'s':''}</span>
        <span class="wc-btn">View ward β†’</span>
      </div>
    </div>
  `).join('');
}

let selectedWard = null;

function selectWard(id){
  // Deselect previous
  if(selectedWard) document.getElementById('wcard-'+selectedWard.id)?.classList.remove('selected');
  selectedWard = WARDS.find(w=>w.id===id);
  document.getElementById('wcard-'+id).classList.add('selected');

  const w = selectedWard;
  document.getElementById('wd-title').innerHTML = `${w.icon} ${w.name} β€” Detailed View <span style="font-size:12px;font-weight:500;color:var(--muted);margin-left:8px;">πŸ›οΈ MCA: ${w.mca}</span>`;

  // Staff
  document.getElementById('wd-staff').innerHTML = w.staff.map(s=>`
    <div class="staff-item">
      <div class="staff-av" style="background:${s.color||pal(s.name)}">${initials(s.name)}</div>
      <div>
        <div class="staff-name">${s.name}</div>
        <div class="staff-role">${s.role}</div>
      </div>
      <div class="staff-phone">πŸ“ž ${s.phone}</div>
      <div class="status-dot" style="background:#22c55e"></div>
    </div>
  `).join('');

  // Projects
  document.getElementById('wd-projects').innerHTML = w.projects_detail.map(p=>{
    const col = p.status==='Completed'?'#16a34a':p.status==='Delayed'?'#dc2626':p.status==='Not Started'?'#9ca3af':'#2563eb';
    return `<div class="proj-item">
      <div class="proj-icon">${p.sector}</div>
      <div style="flex:1;min-width:0;">
        <div class="proj-name">${p.name}</div>
        <div class="proj-meta">${p.status}</div>
      </div>
      <div class="proj-prog">
        <div class="proj-pct" style="color:${col}">${p.progress}%</div>
        <div class="mini-bar"><div class="mini-bar-fill" style="width:${p.progress}%;background:${col}"></div></div>
      </div>
    </div>`;
  }).join('');

  // Complaints
  document.getElementById('wd-issues').innerHTML = w.complaints_detail.length
    ? w.complaints_detail.map(c=>`
      <div class="issue-item">
        <div class="issue-dot" style="background:${c.priority==='hi'?'#dc2626':c.priority==='md'?'#f59e0b':'#16a34a'}"></div>
        <div style="flex:1;">
          <div class="issue-title">${c.title}</div>
          <div class="issue-meta">${c.date}</div>
        </div>
        <span class="ptag ${c.priority}">${c.priority==='hi'?'High':c.priority==='md'?'Medium':'Low'}</span>
      </div>
    `).join('')
    : '<div style="padding:14px;font-size:12px;color:var(--muted);text-align:center">βœ“ No open complaints</div>';

  // Stats β€” MCA shown first, then the rest
  document.getElementById('wd-stats').innerHTML = `
    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);">
      <span style="color:var(--muted)">πŸ›οΈ MCA</span>
      <strong>${w.mca}</strong>
    </div>
    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);">
      <span style="color:var(--muted)">πŸ‘€ Ward Administrator</span>
      <strong>${w.administrator}</strong>
    </div>
  ` + w.stats.map(s=>`
    <div style="display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);">
      <span style="color:var(--muted)">${s.k}</span>
      <strong>${s.v}</strong>
    </div>
  `).join('');

  document.getElementById('wardDetail').style.display='block';
  setTimeout(()=>document.getElementById('wardDetail').scrollIntoView({behavior:'smooth',block:'start'}),50);
}

function closeDetail(){
  if(selectedWard) document.getElementById('wcard-'+selectedWard.id)?.classList.remove('selected');
  selectedWard=null;
  document.getElementById('wardDetail').style.display='none';
}

renderWards();
</script>
</body>
</html>

Youez - 2016 - github.com/yon3zu
LinuXploit