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/settings.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ConstituencyOS – Settings</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;
  --teal:#0891b2;--teal-light:#ecfeff;
  --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);}
.btn-danger{background:var(--white);color:var(--red);border:1px solid #fecaca;}.btn-danger:hover{background:var(--red-light);}
.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;}

/* LAYOUT */
.settings-layout{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start;}
.settings-nav{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:sticky;top:70px;}
.sn-item{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;border-left:3px solid transparent;}
.sn-item:hover{background:var(--bg);color:var(--text);}
.sn-item.active{background:var(--green-light);color:var(--green);font-weight:600;border-left-color:var(--green);}

/* PANELS */
.panel{display:none;flex-direction:column;gap:14px;}
.panel.active{display:flex;}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.card-hdr{padding:14px 18px;border-bottom:1px solid var(--border);}
.card-title{font-size:13.5px;font-weight:700;}
.card-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.card-body{padding:18px;display:flex;flex-direction:column;gap:16px;}

/* FORM ELEMENTS */
.field-row{display:flex;gap:14px;}
.field{flex:1;display:flex;flex-direction:column;gap:5px;}
.field-label{font-size:11.5px;font-weight:600;}
.field-hint{font-size:10.5px;color:var(--muted);}
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;
  font-size:12.5px;font-family:inherit;color:var(--text);outline:none;transition:border-color .15s;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--green);}
textarea{resize:none;}

/* PROFILE PHOTO */
.profile-photo-row{display:flex;align-items:center;gap:16px;}
.profile-photo{width:64px;height:64px;border-radius:50%;background:#374151;color:white;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;flex-shrink:0;}

/* TOGGLE SWITCH */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}
.toggle-row:last-child{border-bottom:none;}
.toggle-label{font-size:12.5px;font-weight:600;}
.toggle-hint{font-size:11px;color:var(--muted);margin-top:2px;}
.switch{position:relative;width:40px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:22px;transition:.2s;}
.slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.2s;}
input:checked + .slider{background:var(--green);}
input:checked + .slider::before{transform:translateX(18px);}

/* CONNECTOR CARDS (WhatsApp etc.) */
.connector-card{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);}
.connector-icon{width:46px;height:46px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.connector-name{font-size:13px;font-weight:700;}
.connector-desc{font-size:11px;color:var(--muted);margin-top:2px;}
.connector-status{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;flex-shrink:0;}
.connector-status.connected{background:#ecfdf5;color:#065f46;}
.connector-status.notconnected{background:var(--bg);color:var(--muted);}

/* WHATSAPP SETUP PANEL */
.wa-setup{border-top:1px solid var(--border);margin-top:14px;padding-top:16px;}
.wa-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.wa-step:last-child{border-bottom:none;}
.wa-step-num{width:24px;height:24px;border-radius:50%;background:var(--green-light);color:var(--green);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-step-title{font-size:12px;font-weight:700;}
.wa-step-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;}
.wa-number-box{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-top:8px;}
.wa-number{font-size:14px;font-weight:700;font-family:monospace;}
.copy-btn{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--green);cursor:pointer;background:none;border:none;}

/* WHATSAPP ROUTING RULES */
.rule-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;}
.rule-row:last-child{margin-bottom:0;}
.rule-icon{font-size:15px;}
.rule-text{flex:1;font-size:12px;}
.rule-text strong{color:var(--green);}
.rule-toggle{flex-shrink:0;}

/* TEAM TABLE */
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--bg);}
th{padding:9px 14px;font-size:10.5px;font-weight:600;color:var(--muted);text-align:left;}
tbody tr{border-bottom:1px solid var(--border);}
tbody tr:last-child{border-bottom:none;}
td{padding:9px 14px;font-size:12px;}
.role-pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--blue-light);color:var(--blue);}
.role-pill.admin{background:var(--green-light);color:var(--green);}

/* DANGER ZONE */
.danger-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}
.danger-row:last-child{border-bottom:none;}

/* TEST MESSAGE PREVIEW */
.phone-preview{background:#e5ddd5;border-radius:var(--radius);padding:16px;max-width:300px;}
.wa-bubble{background:white;border-radius:8px;padding:8px 10px;font-size:11.5px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,.1);position:relative;}
.wa-bubble.in{margin-right:30px;}
.wa-bubble.out{background:#dcf8c6;margin-left:30px;}
.wa-bubble-time{font-size:9px;color:var(--muted);text-align:right;margin-top:3px;}

.save-bar{position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--border);padding:12px 18px;display:flex;justify-content:flex-end;gap:8px;margin:0 -18px -18px;border-radius:0 0 var(--radius) var(--radius);}
</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">Settings</div><div class="page-sub">Manage your account, office configuration, and integrations</div></div>
    </div>

    <div class="settings-layout">
      <!-- Settings nav -->
      <div class="settings-nav">
        <div class="sn-item active" onclick="showPanel('profile',this)">πŸ‘€ Profile</div>
        <div class="sn-item" onclick="showPanel('office',this)">πŸ›οΈ Office Details</div>
        <div class="sn-item" onclick="showPanel('notifications',this)">πŸ”” Notifications</div>
        <div class="sn-item" onclick="showPanel('integrations',this)">πŸ”Œ Integrations</div>
        <div class="sn-item" onclick="showPanel('team',this)">πŸ‘₯ Team &amp; Roles</div>
        <div class="sn-item" onclick="showPanel('security',this)">πŸ”’ Security</div>
        <div class="sn-item" onclick="showPanel('danger',this)">⚠️ Danger Zone</div>
      </div>

      <!-- PANELS -->
      <div>
        <!-- PROFILE -->
        <div class="panel active" id="panel-profile">
          <div class="card">
            <div class="card-hdr"><div class="card-title">Profile Information</div><div class="card-sub">Your personal details as shown across the platform</div></div>
            <div class="card-body">
              <div class="profile-photo-row">
                <div class="profile-photo">DM</div>
                <div>
                  <button class="btn btn-ghost">Change Photo</button>
                  <div class="field-hint" style="margin-top:6px;">JPG or PNG, max 2MB</div>
                </div>
              </div>
              <div class="field-row">
                <div class="field"><label class="field-label">Full Name</label><input type="text" value="Hon. David Mwangi"></div>
                <div class="field"><label class="field-label">Title</label><input type="text" value="Member of Parliament"></div>
              </div>
              <div class="field-row">
                <div class="field"><label class="field-label">Email Address</label><input type="email" value="david.mwangi@parliament.go.ke"></div>
                <div class="field"><label class="field-label">Phone Number</label><input type="tel" value="+254 712 345 678"></div>
              </div>
              <div class="field"><label class="field-label">Bio</label><textarea rows="3">Member of Parliament for Embakasi South Constituency, serving since 2022. Focused on water access, education, and youth empowerment.</textarea></div>
              <div class="save-bar"><button class="btn btn-ghost">Cancel</button><button class="btn btn-primary">Save Changes</button></div>
            </div>
          </div>
        </div>

        <!-- OFFICE -->
        <div class="panel" id="panel-office">
          <div class="card">
            <div class="card-hdr"><div class="card-title">Office Details</div><div class="card-sub">Constituency office information shown to the public and staff</div></div>
            <div class="card-body">
              <div class="field-row">
                <div class="field"><label class="field-label">Constituency Name</label><input type="text" value="Embakasi South"></div>
                <div class="field"><label class="field-label">County</label><input type="text" value="Nairobi County"></div>
              </div>
              <div class="field"><label class="field-label">Office Address</label><input type="text" value="Embakasi South Constituency Office, Pipeline Road, Nairobi"></div>
              <div class="field-row">
                <div class="field"><label class="field-label">Office Phone</label><input type="tel" value="+254 20 123 4567"></div>
                <div class="field"><label class="field-label">Office Email</label><input type="email" value="info@embakasisouth.go.ke"></div>
              </div>
              <div class="field-row">
                <div class="field"><label class="field-label">Office Hours (Weekdays)</label><input type="text" value="8:00 AM – 5:00 PM"></div>
                <div class="field"><label class="field-label">Office Hours (Saturday)</label><input type="text" value="9:00 AM – 1:00 PM"></div>
              </div>
              <div class="save-bar"><button class="btn btn-ghost">Cancel</button><button class="btn btn-primary">Save Changes</button></div>
            </div>
          </div>
        </div>

        <!-- NOTIFICATIONS -->
        <div class="panel" id="panel-notifications">
          <div class="card">
            <div class="card-hdr"><div class="card-title">Notification Preferences</div><div class="card-sub">Choose what you get notified about and how</div></div>
            <div class="card-body" style="gap:0;">
              <div class="toggle-row"><div><div class="toggle-label">New complaints</div><div class="toggle-hint">Get notified when a constituent files a new complaint</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
              <div class="toggle-row"><div><div class="toggle-label">High-priority complaints</div><div class="toggle-hint">Immediate alert for urgent issues</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
              <div class="toggle-row"><div><div class="toggle-label">Project milestones</div><div class="toggle-hint">Updates when a project reaches a milestone</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
              <div class="toggle-row"><div><div class="toggle-label">Bursary applications</div><div class="toggle-hint">New applications and approvals</div></div><label class="switch"><input type="checkbox"><span class="slider"></span></label></div>
              <div class="toggle-row"><div><div class="toggle-label">Budget threshold alerts</div><div class="toggle-hint">Notify when a sector exceeds 90% utilisation</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
              <div class="toggle-row"><div><div class="toggle-label">Event reminders</div><div class="toggle-hint">1 hour before scheduled events</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
              <div class="toggle-row"><div><div class="toggle-label">Weekly summary email</div><div class="toggle-hint">Every Monday at 7:00 AM</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
              <div class="toggle-row"><div><div class="toggle-label">SMS alerts for emergencies</div><div class="toggle-hint">Critical issues sent via SMS to your phone</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
              <div class="save-bar"><button class="btn btn-primary">Save Preferences</button></div>
            </div>
          </div>
        </div>

        <!-- INTEGRATIONS (WhatsApp lives here) -->
        <div class="panel" id="panel-integrations">

          <div class="card">
            <div class="card-hdr"><div class="card-title">Connected Channels</div><div class="card-sub">Let constituents reach your office through the channels they already use</div></div>
            <div class="card-body">

              <!-- WhatsApp connector card -->
              <div class="connector-card">
                <div class="connector-icon" style="background:#dcfce7;color:#16a34a;">πŸ’¬</div>
                <div style="flex:1;">
                  <div class="connector-name">WhatsApp Intake</div>
                  <div class="connector-desc">Constituents can file complaints, ask questions, and check status via WhatsApp β€” auto-logged into Complaints</div>
                </div>
                <span class="connector-status connected" id="waStatusBadge">🟒 Connected</span>
                <button class="btn btn-ghost" onclick="toggleWaSetup()">Configure</button>
              </div>

              <!-- WhatsApp setup detail (expandable) -->
              <div class="wa-setup" id="waSetupPanel">

                <div style="display:grid;grid-template-columns:1fr 300px;gap:20px;">
                  <div>
                    <div class="wa-step">
                      <div class="wa-step-num">1</div>
                      <div>
                        <div class="wa-step-title">WhatsApp Business Number</div>
                        <div class="wa-step-desc">This is the number constituents message to reach your office. Connected via WhatsApp Business API (Meta).</div>
                        <div class="wa-number-box">
                          <span class="wa-number">+254 712 β€’β€’β€’ 678</span>
                          <button class="copy-btn" onclick="alert('Number copied')">Copy</button>
                        </div>
                      </div>
                    </div>

                    <div class="wa-step">
                      <div class="wa-step-num">2</div>
                      <div>
                        <div class="wa-step-title">Auto-Reply Greeting</div>
                        <div class="wa-step-desc">Sent automatically when a constituent messages for the first time.</div>
                        <textarea rows="3" style="margin-top:8px;">Karibu Embakasi South MP Office! πŸ‘‹ Reply with:
1️⃣ File a complaint
2️⃣ Check complaint status
3️⃣ Bursary enquiry
4️⃣ Speak to an officer</textarea>
                      </div>
                    </div>

                    <div class="wa-step">
                      <div class="wa-step-num">3</div>
                      <div>
                        <div class="wa-step-title">Intake Routing Rules</div>
                        <div class="wa-step-desc">Incoming messages are categorised automatically and routed into the right module.</div>
                        <div style="margin-top:10px;">
                          <div class="rule-row">
                            <span class="rule-icon">πŸ’§</span>
                            <div class="rule-text">Messages mentioning <strong>water, road, electricity, garbage</strong> β†’ auto-filed in <strong>Complaints</strong></div>
                            <label class="switch rule-toggle"><input type="checkbox" checked><span class="slider"></span></label>
                          </div>
                          <div class="rule-row">
                            <span class="rule-icon">πŸŽ“</span>
                            <div class="rule-text">Messages mentioning <strong>bursary, fees, school</strong> β†’ routed to <strong>Bursaries</strong> queue</div>
                            <label class="switch rule-toggle"><input type="checkbox" checked><span class="slider"></span></label>
                          </div>
                          <div class="rule-row">
                            <span class="rule-icon">πŸ›‘οΈ</span>
                            <div class="rule-text">Messages mentioning <strong>elderly, disability, vulnerable</strong> β†’ routed to <strong>Social Protection</strong></div>
                            <label class="switch rule-toggle"><input type="checkbox" checked><span class="slider"></span></label>
                          </div>
                          <div class="rule-row">
                            <span class="rule-icon">πŸ“</span>
                            <div class="rule-text">Ward auto-detected from sender's saved location or message text</div>
                            <label class="switch rule-toggle"><input type="checkbox" checked><span class="slider"></span></label>
                          </div>
                          <div class="rule-row">
                            <span class="rule-icon">πŸ“Έ</span>
                            <div class="rule-text">Photos sent with a complaint are attached automatically as evidence</div>
                            <label class="switch rule-toggle"><input type="checkbox" checked><span class="slider"></span></label>
                          </div>
                          <div class="rule-row">
                            <span class="rule-icon">πŸ””</span>
                            <div class="rule-text">Unrecognised messages are flagged for manual review by office staff</div>
                            <label class="switch rule-toggle"><input type="checkbox" checked><span class="slider"></span></label>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="wa-step">
                      <div class="wa-step-num">4</div>
                      <div>
                        <div class="wa-step-title">Assigned Staff</div>
                        <div class="wa-step-desc">Who reviews and triages incoming WhatsApp messages each day</div>
                        <select style="margin-top:8px;max-width:280px;">
                          <option>Catherine Omondi (Chief of Staff)</option>
                          <option>Rotating β€” Ward Administrators</option>
                          <option>Office Secretary β€” Lilian Wairimu</option>
                        </select>
                      </div>
                    </div>
                  </div>

                  <!-- Live preview -->
                  <div>
                    <div class="field-label" style="margin-bottom:8px;">Preview</div>
                    <div class="phone-preview">
                      <div class="wa-bubble in">Niaje, naomba kuripoti tatizo la maji Kiandutu, Pipeline Ward. Bomba limepasuka asubuhi.<div class="wa-bubble-time">8:31 AM</div></div>
                      <div class="wa-bubble out">Asante kwa taarifa! βœ… Tatizo limesajiliwa kama <strong>#1428 – Water pipe burst</strong>, Pipeline Ward. Timu yetu itashughulikia. Utapata update hapa hapa.<div class="wa-bubble-time">8:31 AM</div></div>
                      <div class="wa-bubble in">Asante sana πŸ™<div class="wa-bubble-time">8:32 AM</div></div>
                    </div>
                    <div style="font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.5;">This conversation auto-created complaint <strong>#1428</strong>, visible in the Complaints module with ward and category pre-filled.</div>
                  </div>
                </div>

                <div class="save-bar"><button class="btn btn-ghost" onclick="disconnectWa()">Disconnect</button><button class="btn btn-primary">Save WhatsApp Settings</button></div>
              </div>
            </div>
          </div>

          <!-- Other integrations -->
          <div class="card">
            <div class="card-hdr"><div class="card-title">Other Integrations</div></div>
            <div class="card-body">
              <div class="connector-card">
                <div class="connector-icon" style="background:var(--blue-light);color:var(--blue);">πŸ“±</div>
                <div style="flex:1;"><div class="connector-name">SMS Gateway</div><div class="connector-desc">Send bulk SMS alerts to constituents for emergencies and event reminders</div></div>
                <span class="connector-status connected">🟒 Connected</span>
                <button class="btn btn-ghost">Configure</button>
              </div>
              <div class="connector-card">
                <div class="connector-icon" style="background:var(--green-light);color:var(--green);">πŸ“§</div>
                <div style="flex:1;"><div class="connector-name">Email (Office 365)</div><div class="connector-desc">Sync office email for correspondence tracking</div></div>
                <span class="connector-status connected">🟒 Connected</span>
                <button class="btn btn-ghost">Configure</button>
              </div>
              <div class="connector-card">
                <div class="connector-icon" style="background:var(--purple-light);color:var(--purple);">πŸ“…</div>
                <div style="flex:1;"><div class="connector-name">Google Calendar</div><div class="connector-desc">Two-way sync with the Events module</div></div>
                <span class="connector-status notconnected">βšͺ Not Connected</span>
                <button class="btn btn-ghost">Connect</button>
              </div>
              <div class="connector-card">
                <div class="connector-icon" style="background:var(--amber-light);color:#b45309;">πŸ’³</div>
                <div style="flex:1;"><div class="connector-name">M-Pesa Disbursements</div><div class="connector-desc">Direct stipend and bursary payouts via M-Pesa Paybill</div></div>
                <span class="connector-status notconnected">βšͺ Not Connected</span>
                <button class="btn btn-ghost">Connect</button>
              </div>
            </div>
          </div>
        </div>

        <!-- TEAM -->
        <div class="panel" id="panel-team">
          <div class="card">
            <div class="card-hdr"><div class="card-title">Team Members &amp; Access</div><div class="card-sub">Control who can access ConstituencyOS and what they can do</div></div>
            <div class="card-body" style="padding:0;">
              <table>
                <thead><tr><th>Name</th><th>Role</th><th>Access Level</th><th>Last Active</th><th></th></tr></thead>
                <tbody>
                  <tr><td>Hon. David Mwangi</td><td>Member of Parliament</td><td><span class="role-pill admin">Owner</span></td><td>Now</td><td></td></tr>
                  <tr><td>Catherine Omondi</td><td>Chief of Staff</td><td><span class="role-pill admin">Admin</span></td><td>2 hours ago</td><td><button class="btn btn-ghost" style="font-size:10.5px;padding:4px 8px;">Manage</button></td></tr>
                  <tr><td>Felix Mutiso</td><td>Finance Manager</td><td><span class="role-pill">Editor</span></td><td>1 day ago</td><td><button class="btn btn-ghost" style="font-size:10.5px;padding:4px 8px;">Manage</button></td></tr>
                  <tr><td>James Kamau</td><td>Pipeline Ward Admin</td><td><span class="role-pill">Editor</span></td><td>5 hours ago</td><td><button class="btn btn-ghost" style="font-size:10.5px;padding:4px 8px;">Manage</button></td></tr>
                  <tr><td>Lilian Wairimu</td><td>Office Secretary</td><td><span class="role-pill">Viewer</span></td><td>3 hours ago</td><td><button class="btn btn-ghost" style="font-size:10.5px;padding:4px 8px;">Manage</button></td></tr>
                </tbody>
              </table>
              <div style="padding:14px 18px;"><button class="btn btn-primary">οΌ‹ Invite Team Member</button></div>
            </div>
          </div>
        </div>

        <!-- SECURITY -->
        <div class="panel" id="panel-security">
          <div class="card">
            <div class="card-hdr"><div class="card-title">Password</div></div>
            <div class="card-body">
              <div class="field"><label class="field-label">Current Password</label><input type="password" value="β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’β€’"></div>
              <div class="field-row">
                <div class="field"><label class="field-label">New Password</label><input type="password" placeholder="Enter new password"></div>
                <div class="field"><label class="field-label">Confirm New Password</label><input type="password" placeholder="Confirm new password"></div>
              </div>
              <div class="save-bar"><button class="btn btn-primary">Update Password</button></div>
            </div>
          </div>
          <div class="card">
            <div class="card-hdr"><div class="card-title">Two-Factor Authentication</div></div>
            <div class="card-body" style="gap:0;">
              <div class="toggle-row"><div><div class="toggle-label">SMS Verification</div><div class="toggle-hint">Require a code sent to +254 712 345 678 when logging in</div></div><label class="switch"><input type="checkbox" checked><span class="slider"></span></label></div>
            </div>
          </div>
        </div>

        <!-- DANGER ZONE -->
        <div class="panel" id="panel-danger">
          <div class="card" style="border-color:#fecaca;">
            <div class="card-hdr"><div class="card-title" style="color:var(--red);">Danger Zone</div><div class="card-sub">These actions are irreversible β€” proceed with caution</div></div>
            <div class="card-body" style="gap:0;">
              <div class="danger-row"><div><div class="toggle-label">Export all data</div><div class="toggle-hint">Download a full archive of constituency data</div></div><button class="btn btn-ghost">Export</button></div>
              <div class="danger-row"><div><div class="toggle-label">Disconnect WhatsApp intake</div><div class="toggle-hint">Stop receiving complaints via WhatsApp</div></div><button class="btn btn-danger">Disconnect</button></div>
              <div class="danger-row"><div><div class="toggle-label">Deactivate account</div><div class="toggle-hint">Temporarily disable your access</div></div><button class="btn btn-danger">Deactivate</button></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </main>
</div>

<script>
function showPanel(name, el){
  document.querySelectorAll('.sn-item').forEach(s=>s.classList.remove('active'));
  el.classList.add('active');
  document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
  document.getElementById('panel-'+name).classList.add('active');
}

let waConnected = true;
function toggleWaSetup(){
  const panel = document.getElementById('waSetupPanel');
  panel.style.display = panel.style.display==='none' ? 'block' : 'none';
}
document.getElementById('waSetupPanel').style.display = 'block';

function disconnectWa(){
  if(confirm('Disconnect WhatsApp intake? Constituents will no longer be able to file complaints via WhatsApp.')){
    waConnected = false;
    document.getElementById('waStatusBadge').textContent = 'βšͺ Not Connected';
    document.getElementById('waStatusBadge').className = 'connector-status notconnected';
    document.getElementById('waSetupPanel').style.display = 'none';
  }
}
</script>
</body>
</html>

Youez - 2016 - github.com/yon3zu
LinuXploit