{"id":167,"date":"2026-05-24T00:45:51","date_gmt":"2026-05-24T00:45:51","guid":{"rendered":"http:\/\/localhost\/harar\/?page_id=167"},"modified":"2026-07-12T22:24:44","modified_gmt":"2026-07-12T22:24:44","slug":"ongoing-projects","status":"publish","type":"page","link":"https:\/\/hararhealthbureau.org\/index.php\/projects-partnerships\/ongoing-projects\/","title":{"rendered":"Ongoing Projects"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"167\" class=\"elementor elementor-167\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5ea5e9 e-con e-atomic-element e-flexbox-base e-08e35c6 \" data-id=\"b5ea5e9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b5ea5e9\" data-e-type=\"e-flexbox\" data-id=\"b5ea5e9\">\n    \t\t<div class=\"elementor-element elementor-element-de95e87 elementor-widget elementor-widget-html\" data-id=\"de95e87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Ongoing Projects \u2014 Harar Regional Health Bureau<\/title>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <script src=\"https:\/\/code.iconify.design\/3\/3.1.0\/iconify.min.js\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n  <script>\n    tailwind.config = {\n      theme: {\n        extend: {\n          fontFamily: { inter: ['Inter', 'sans-serif'] },\n          colors: {\n            sky: {\n              50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc',\n              400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1',\n              800: '#075985', 900: '#0c4a6e',\n            }\n          }\n        }\n      }\n    }\n  <\/script>\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    body { font-family: 'Inter', sans-serif; background: #ffffff; color: #1e293b; }\n\n    .card-hover { transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); }\n    .card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -8px rgba(14,165,233,0.14); }\n\n    .section-bar { width: 40px; height: 3px; background: linear-gradient(90deg, #0ea5e9, #38bdf8); border-radius: 2px; }\n\n    .reveal {\n      opacity: 0; transform: translateY(20px);\n      transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .reveal.active { opacity: 1; transform: translateY(0); }\n\n    .contact-link { transition: all 0.2s ease; }\n    .contact-link:hover { background: #f0f9ff; }\n\n    .hero-strip {\n      background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 40%, #0ea5e9 100%);\n      position: relative; overflow: hidden;\n    }\n    .hero-strip::before {\n      content: ''; position: absolute; top: -40%; right: -15%;\n      width: 500px; height: 500px;\n      background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);\n      border-radius: 50%;\n    }\n    .hero-strip::after {\n      content: ''; position: absolute; bottom: -30%; left: -10%;\n      width: 400px; height: 400px;\n      background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);\n      border-radius: 50%;\n    }\n    .geo {\n      position: absolute; inset: 0;\n      background-image:\n        linear-gradient(30deg, rgba(255,255,255,0.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.025) 87.5%),\n        linear-gradient(150deg, rgba(255,255,255,0.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.025) 87.5%);\n      background-size: 80px 140px; background-position: 0 0, 40px 70px;\n    }\n\n    .badge-planning { background: #fef3c7; color: #92400e; }\n    .badge-implementation { background: #dbeafe; color: #1e40af; }\n    .badge-final { background: #d1fae5; color: #065f46; }\n\n    .progress-fill { transition: width 1s ease-out 0.3s; }\n\n    \/* Modal *\/\n    .modal-overlay {\n      position: fixed; inset: 0; background: rgba(12,74,110,0.5);\n      backdrop-filter: blur(4px); z-index: 100;\n      opacity: 0; pointer-events: none;\n      transition: opacity 0.3s ease;\n    }\n    .modal-overlay.open { opacity: 1; pointer-events: auto; }\n    .modal-panel {\n      transform: translateY(30px) scale(0.97);\n      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .modal-overlay.open .modal-panel { transform: translateY(0) scale(1); }\n\n    \/* Filter active state *\/\n    .filter-btn.active { background: #0ea5e9; color: white; border-color: #0ea5e9; }\n\n    \/* No results *\/\n    .no-results { display: none; }\n    .no-results.show { display: flex; }\n\n    \/* Project card hidden by filter *\/\n    .project-card { transition: all 0.4s ease; }\n    .project-card.hidden-card { opacity: 0; transform: scale(0.95); position: absolute; pointer-events: none; height: 0; overflow: hidden; margin: 0; padding: 0; }\n  <\/style>\n<\/head>\n<body class=\"font-inter\">\n\n  <!-- Modal Overlay -->\n  <div id=\"modal\" class=\"modal-overlay\" onclick=\"if(event.target===this)closeModal()\">\n    <div class=\"flex items-start justify-center min-h-screen p-4 pt-8 lg:pt-16\">\n      <div class=\"modal-panel bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] overflow-y-auto\">\n        <div id=\"modalContent\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"max-w-6xl mx-auto px-5 py-8 lg:py-12 space-y-8\">\n\n    <!-- Hero Strip -->\n    <div class=\"hero-strip rounded-2xl relative\">\n      <div class=\"geo\"><\/div>\n      <div class=\"relative z-10 grid lg:grid-cols-[1fr_300px] gap-6 items-center p-6 lg:p-8\">\n        <div class=\"reveal\">\n          <div class=\"flex items-center gap-3 mb-4\">\n            <div class=\"w-11 h-11 bg-white\/15 rounded-xl flex items-center justify-center border border-white\/15\">\n              <span class=\"iconify text-white text-xl\" data-icon=\"lucide:rocket\"><\/span>\n            <\/div>\n            <div>\n              <h1 class=\"text-white text-xl lg:text-2xl font-bold tracking-tight leading-tight\">Active Initiatives & Ongoing Projects<\/h1>\n              <p class=\"text-sky-200\/50 text-[11px] tracking-widest uppercase\">Harar Regional Health Bureau<\/p>\n            <\/div>\n          <\/div>\n          <p class=\"text-sky-100\/60 text-sm \">\n            Driving health transformation through strategically designed projects \u2014 from infrastructure upgrades to digital innovation \u2014 each measured by its impact on the communities we serve.\n          <\/p>\n          <div class=\"flex flex-wrap gap-3\">\n            <div class=\"bg-white\/10 border border-white\/10 rounded-xl px-4 py-2.5\">\n              <span class=\"text-white font-bold text-lg\">8<\/span>\n              <span class=\"text-sky-200\/50 text-xs ml-1.5\">Active Projects<\/span>\n            <\/div>\n            <div class=\"bg-white\/10 border border-white\/10 rounded-xl px-4 py-2.5\">\n              <span class=\"text-white font-bold text-lg\">6<\/span>\n              <span class=\"text-sky-200\/50 text-xs ml-1.5\">Woredas Reached<\/span>\n            <\/div>\n            <div class=\"bg-white\/10 border border-white\/10 rounded-xl px-4 py-2.5\">\n              <span class=\"text-white font-bold text-lg\">\u20a8247M<\/span>\n              <span class=\"text-sky-200\/50 text-xs ml-1.5\">Total Funding<\/span>\n            <\/div>\n            <div class=\"bg-white\/10 border border-white\/10 rounded-xl px-4 py-2.5\">\n              <span class=\"text-white font-bold text-lg\">12<\/span>\n              <span class=\"text-sky-200\/50 text-xs ml-1.5\">Partner Orgs<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Search & Filter Bar -->\n    <div class=\"reveal bg-white rounded-2xl border border-sky-100 p-5\">\n      <div class=\"flex flex-col lg:flex-row gap-4\">\n        <!-- Search -->\n        <div class=\"relative flex-1\">\n          <span class=\"iconify absolute left-3.5 top-1\/2 -translate-y-1\/2 text-slate-300 text-lg\" data-icon=\"lucide:search\"><\/span>\n          <input id=\"searchInput\" type=\"text\" placeholder=\"Search projects by name, keyword, or partner...\" class=\"w-full bg-sky-50\/50 border border-sky-100 rounded-xl pl-11 pr-4 py-3 text-sm text-slate-800 placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:border-transparent transition-all\">\n        <\/div>\n        <!-- Category Filter -->\n        <select id=\"categoryFilter\" class=\"bg-sky-50\/50 border border-sky-100 rounded-xl px-4 py-3 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:border-transparent transition-all appearance-none min-w-[160px] cursor-pointer\">\n          <option value=\"all\">All Categories<\/option>\n          <option value=\"infrastructure\">Infrastructure<\/option>\n          <option value=\"clinical\">Clinical<\/option>\n          <option value=\"digital\">Digital Health<\/option>\n          <option value=\"capacity\">Capacity Building<\/option>\n          <option value=\"public-health\">Public Health<\/option>\n        <\/select>\n        <!-- Location Filter -->\n        <select id=\"locationFilter\" class=\"bg-sky-50\/50 border border-sky-100 rounded-xl px-4 py-3 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:border-transparent transition-all appearance-none min-w-[160px] cursor-pointer\">\n          <option value=\"all\">All Locations<\/option>\n          <option value=\"harar-city\">Harar City<\/option>\n          <option value=\"abadir\">Abadir<\/option>\n          <option value=\"jemal\">Jemal<\/option>\n          <option value=\"fugnan\">Fugnan Bira<\/option>\n          <option value=\"kombolcha\">Kombolcha<\/option>\n          <option value=\"babile\">Babile<\/option>\n          <option value=\"regional\">Regional (All Woredas)<\/option>\n        <\/select>\n      <\/div>\n      <!-- Active filter tags -->\n      <div id=\"activeFilters\" class=\"flex flex-wrap gap-2 mt-3 hidden\">\n      <\/div>\n    <\/div>\n\n    <!-- Results Count -->\n    <div class=\"reveal flex items-center justify-between\">\n      <p id=\"resultsCount\" class=\"text-xs text-slate-400 font-medium\">Showing 8 projects<\/p>\n      <div class=\"flex gap-1.5\">\n        <button onclick=\"setView('grid')\" id=\"gridBtn\" class=\"w-8 h-8 bg-sky-500 text-white rounded-lg flex items-center justify-center transition-all text-sm\">\n          <span class=\"iconify\" data-icon=\"lucide:layout-grid\"><\/span>\n        <\/button>\n        <button onclick=\"setView('list')\" id=\"listBtn\" class=\"w-8 h-8 bg-sky-50 text-sky-500 border border-sky-100 rounded-lg flex items-center justify-center transition-all text-sm hover:bg-sky-100\">\n          <span class=\"iconify\" data-icon=\"lucide:list\"><\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Project Grid -->\n    <div id=\"projectGrid\" class=\"grid md:grid-cols-2 gap-4 relative\">\n\n      <!-- Project 1 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"infrastructure\" data-location=\"harar-city\" data-title=\"maternal health emergency ward upgrade harar general hospital\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/maternal-ward-harar\/600\/300.jpg\" alt=\"Maternal Health Ward\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-implementation text-[10px] font-semibold px-2.5 py-1 rounded-full\">Implementation<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Infrastructure<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">Maternal Health Emergency Ward Upgrade<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Renovating and equipping the maternal emergency unit at Harar General Hospital with modern life-saving equipment and expanded bed capacity.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Harar City<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a838M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-sky-600\">68%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-sky-400 rounded-full\" style=\"width:0%\" data-width=\"68%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">UNFPA, WHO<\/span>\n            <\/div>\n            <button onclick=\"openModal(0)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Project 2 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"digital\" data-location=\"regional\" data-title=\"echis digital community health expansion all woredas\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/echis-mobile-health\/600\/300.jpg\" alt=\"eCHIS Expansion\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-implementation text-[10px] font-semibold px-2.5 py-1 rounded-full\">Implementation<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Digital Health<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">eCHIS Digital Community Health Expansion<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Deploying eCHIS mobile platform to all 24 health posts across 6 woredas, enabling real-time community health data capture and offline sync.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Regional (All Woredas)<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a818M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-sky-600\">75%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-sky-400 rounded-full\" style=\"width:0%\" data-width=\"75%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">USAID, JSI<\/span>\n            <\/div>\n            <button onclick=\"openModal(1)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Project 3 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"public-health\" data-location=\"regional\" data-title=\"malaria elimination initiative harar region\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/malaria-prevention-harar\/600\/300.jpg\" alt=\"Malaria Elimination\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-implementation text-[10px] font-semibold px-2.5 py-1 rounded-full\">Implementation<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Public Health<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">Malaria Elimination Initiative<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Intensified vector control, case surveillance, and community-based testing & treatment to achieve zero indigenous malaria cases across all woredas.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Regional (All Woredas)<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a832M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-sky-600\">52%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-sky-400 rounded-full\" style=\"width:0%\" data-width=\"52%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">Global Fund, PMI<\/span>\n            <\/div>\n            <button onclick=\"openModal(2)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Project 4 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"capacity\" data-location=\"regional\" data-title=\"health workforce accelerated training program\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/health-training-ethiopia\/600\/300.jpg\" alt=\"Workforce Training\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-planning text-[10px] font-semibold px-2.5 py-1 rounded-full\">Planning<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Capacity Building<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">Health Workforce Accelerated Training Program<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Training 120 mid-level health workers in emergency obstetric care, neonatal resuscitation, and essential surgical skills over 18 months.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Regional (All Woredas)<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a822M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-sky-600\">15%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-amber-400 rounded-full\" style=\"width:0%\" data-width=\"15%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">Jhpiego, FMOH<\/span>\n            <\/div>\n            <button onclick=\"openModal(3)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Project 5 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"infrastructure\" data-location=\"abadir\" data-title=\"clean water sanitation health facilities woreda\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/water-sanitation-clinic\/600\/300.jpg\" alt=\"WASH in Facilities\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-implementation text-[10px] font-semibold px-2.5 py-1 rounded-full\">Implementation<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Infrastructure<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">Clean Water & Sanitation in Health Facilities<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Installing water supply systems, improved latrines, and handwashing stations in 14 health facilities across Abadir and Jemal woredas.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Abadir, Jemal<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a828M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-sky-600\">60%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-sky-400 rounded-full\" style=\"width:0%\" data-width=\"60%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">UNICEF, WaterAid<\/span>\n            <\/div>\n            <button onclick=\"openModal(4)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Project 6 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"clinical\" data-location=\"kombolcha\" data-title=\"ncd screening referral program kombolcha babile\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/ncd-screening-clinic\/600\/300.jpg\" alt=\"NCD Screening\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-final text-[10px] font-semibold px-2.5 py-1 rounded-full\">Final Phase<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Clinical<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">NCD Screening & Referral Program<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Establishing systematic screening for hypertension, diabetes, and cervical cancer at 8 health centers with referral pathways to Harar General Hospital.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Kombolcha, Babile<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a815M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-emerald-600\">88%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-emerald-400 rounded-full\" style=\"width:0%\" data-width=\"88%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">WHO, RTSL<\/span>\n            <\/div>\n            <button onclick=\"openModal(5)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Project 7 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"digital\" data-location=\"harar-city\" data-title=\"emr system deployment harar general hospital\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/emr-hospital-system\/600\/300.jpg\" alt=\"EMR Deployment\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-implementation text-[10px] font-semibold px-2.5 py-1 rounded-full\">Implementation<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Digital Health<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">EMR System Deployment \u2014 Harar General Hospital<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Full deployment of an integrated Electronic Medical Records system across all departments including pharmacy, lab, and radiology modules.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Harar City<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a845M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-sky-600\">42%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-sky-400 rounded-full\" style=\"width:0%\" data-width=\"42%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">CDC, eHealth Africa<\/span>\n            <\/div>\n            <button onclick=\"openModal(6)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Project 8 -->\n      <div class=\"project-card card-hover bg-white rounded-2xl border border-sky-100 overflow-hidden\" data-category=\"infrastructure\" data-location=\"fugnan\" data-title=\"primary health care unit construction fugnan bira\">\n        <div class=\"relative h-40 overflow-hidden\">\n          <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/health-center-build\/600\/300.jpg\" alt=\"PHCU Construction\" class=\"w-full h-full object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/50 to-transparent\"><\/div>\n          <span class=\"absolute top-3 left-3 badge-planning text-[10px] font-semibold px-2.5 py-1 rounded-full\">Planning<\/span>\n          <span class=\"absolute bottom-3 right-3 bg-black\/40 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">Infrastructure<\/span>\n        <\/div>\n        <div class=\"p-5\">\n          <h3 class=\"text-sm font-bold text-slate-900 mb-1.5\">New Primary Health Care Unit \u2014 Fugnan Bira<\/h3>\n          <p class=\"text-xs text-slate-400 leading-relaxed mb-3\">Construction of a fully equipped PHCU with maternity wing, laboratory, pharmacy, and outpatient department to serve 35,000 people.<\/p>\n          <div class=\"flex items-center gap-2 mb-3\">\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:map-pin\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">Fugnan Bira<\/span>\n            <span class=\"text-slate-200 mx-1\">\u00b7<\/span>\n            <span class=\"iconify text-slate-300 text-xs\" data-icon=\"lucide:banknote\"><\/span>\n            <span class=\"text-[11px] text-slate-400\">\u20a849M<\/span>\n          <\/div>\n          <div class=\"mb-3\">\n            <div class=\"flex justify-between text-[10px] mb-1\">\n              <span class=\"text-slate-400\">Progress<\/span>\n              <span class=\"font-semibold text-sky-600\">8%<\/span>\n            <\/div>\n            <div class=\"h-1.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"progress-fill h-full bg-amber-400 rounded-full\" style=\"width:0%\" data-width=\"8%\"><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"text-[10px] text-slate-300\">Partners:<\/span>\n              <span class=\"text-[10px] text-slate-500 font-medium\">World Bank, RHB<\/span>\n            <\/div>\n            <button onclick=\"openModal(7)\" class=\"text-xs font-semibold text-sky-500 hover:text-sky-700 flex items-center gap-1 transition-colors\">\n              Learn More <span class=\"iconify text-sm\" data-icon=\"lucide:arrow-right\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- No Results -->\n    <div id=\"noResults\" class=\"no-results flex-col items-center justify-center py-16 text-center\">\n      <div class=\"w-16 h-16 bg-sky-50 rounded-2xl flex items-center justify-center mx-auto mb-4\">\n        <span class=\"iconify text-sky-300 text-3xl\" data-icon=\"lucide:search-x\"><\/span>\n      <\/div>\n      <h3 class=\"text-sm font-bold text-slate-700 mb-1\">No projects found<\/h3>\n      <p class=\"text-xs text-slate-400\">Try adjusting your search or filter criteria.<\/p>\n    <\/div>\n\n    <!-- Office Contact Bar -->\n    <div class=\"reveal bg-sky-50 rounded-2xl border border-sky-100 p-5\">\n      <h3 class=\"text-[11px] font-semibold text-slate-300 tracking-widest uppercase mb-4\">Project Coordination Office<\/h3>\n      <div class=\"grid sm:grid-cols-3 gap-4\">\n        <a href=\"tel:+2522511050\" class=\"contact-link flex items-center gap-3 p-3 rounded-xl\">\n          <div class=\"w-10 h-10 bg-white rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm border border-sky-100\">\n            <span class=\"iconify text-sky-500 text-lg\" data-icon=\"lucide:phone\"><\/span>\n          <\/div>\n          <div>\n            <p class=\"text-[10px] text-slate-300 uppercase tracking-wider font-medium\">Phone<\/p>\n            <p class=\"text-sm font-semibold text-slate-800\">+252 25 110 50<\/p>\n          <\/div>\n        <\/a>\n        <a href=\"mailto:projects@hararhealth.gov.et\" class=\"contact-link flex items-center gap-3 p-3 rounded-xl\">\n          <div class=\"w-10 h-10 bg-white rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm border border-sky-100\">\n            <span class=\"iconify text-sky-500 text-lg\" data-icon=\"lucide:mail\"><\/span>\n          <\/div>\n          <div>\n            <p class=\"text-[10px] text-slate-300 uppercase tracking-wider font-medium\">Email<\/p>\n            <p class=\"text-sm font-semibold text-slate-800 break-all\">projects@hararhealth.gov.et<\/p>\n          <\/div>\n        <\/a>\n        <div class=\"flex items-center gap-3 p-3\">\n          <div class=\"w-10 h-10 bg-white rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm border border-sky-100\">\n            <span class=\"iconify text-sky-500 text-lg\" data-icon=\"lucide:map-pin\"><\/span>\n          <\/div>\n          <div>\n            <p class=\"text-[10px] text-slate-300 uppercase tracking-wider font-medium\">Location<\/p>\n            <p class=\"text-sm font-semibold text-slate-800 leading-snug\">Feres Magala, Harar<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <script>\n    \/\/ ===== Project Data for Modal =====\n    const projects = [\n      {\n        title: \"Maternal Health Emergency Ward Upgrade\",\n        status: \"Implementation\", badge: \"badge-implementation\",\n        category: \"Infrastructure\", location: \"Harar City\", budget: \"\u20a838M\",\n        progress: 68, partners: \"UNFPA, WHO\", startDate: \"Jan 2024\", endDate: \"Dec 2025\",\n        image: \"https:\/\/picsum.photos\/seed\/maternal-ward-harar\/800\/350.jpg\",\n        challenge: \"Harar General Hospital's maternal emergency unit handles over 3,200 deliveries annually but operates with only 8 functional beds, outdated equipment, and no dedicated neonatal resuscitation area \u2014 leading to avoidable referrals and delays in life-saving interventions.\",\n        approach: \"Complete renovation of the 200m\u00b2 maternal emergency wing including: installation of 16 modern delivery beds with fetal monitoring, dedicated neonatal resuscitation corner, blood bank storage unit, oxygen pipeline system, and emergency surgical prep room. Simultaneously training 30 nurses and midwives in emergency obstetric care protocols.\",\n        milestones: [\n          { label: \"Design & Procurement\", done: true },\n          { label: \"Demolition & Renovation\", done: true },\n          { label: \"Equipment Installation\", done: false },\n          { label: \"Staff Training\", done: false },\n          { label: \"Handover & Commissioning\", done: false }\n        ],\n        outcomes: [\n          \"Expand delivery bed capacity from 8 to 16\",\n          \"Reduce emergency referral rate by 40%\",\n          \"Train 30 health workers in EmONC skills\",\n          \"Achieve 24\/7 functional blood bank access\",\n          \"Zero maternal deaths from preventable causes\"\n        ]\n      },\n      {\n        title: \"eCHIS Digital Community Health Expansion\",\n        status: \"Implementation\", badge: \"badge-implementation\",\n        category: \"Digital Health\", location: \"Regional (All Woredas)\", budget: \"\u20a818M\",\n        progress: 75, partners: \"USAID, JSI\", startDate: \"Jul 2023\", endDate: \"Jun 2025\",\n        image: \"https:\/\/picsum.photos\/seed\/echis-mobile-health\/800\/350.jpg\",\n        challenge: \"Community health data in 18 of 24 health posts was still captured on paper forms, causing 3-4 week delays in data availability, high error rates, and inability to track individual households or identify defaulters in real time.\",\n        approach: \"Deploy eCHIS Android application to 60 Health Extension Workers across all 24 health posts with offline-first architecture. Establish a tiered support system with woreda-level ICT officers, weekly data sync protocols, and integration pipelines feeding aggregated data into DHIS2 automatically.\",\n        milestones: [\n          { label: \"App Customization & Testing\", done: true },\n          { label: \"Device Procurement & Setup\", done: true },\n          { label: \"Phase 1: 12 Health Posts\", done: true },\n          { label: \"Phase 2: Remaining 12 Posts\", done: false },\n          { label: \"DHIS2 Integration & Evaluation\", done: false }\n        ],\n        outcomes: [\n          \"All 24 health posts on digital platform\",\n          \"Reduce data reporting delay from 21 days to <24 hours\",\n          \"Register 62,000+ households in digital system\",\n          \"Achieve 94% immunization defaulter identification rate\",\n          \"Real-time disease surveillance from community level\"\n        ]\n      },\n      {\n        title: \"Malaria Elimination Initiative\",\n        status: \"Implementation\", badge: \"badge-implementation\",\n        category: \"Public Health\", location: \"Regional (All Woredas)\", budget: \"\u20a832M\",\n        progress: 52, partners: \"Global Fund, PMI\", startDate: \"Oct 2023\", endDate: \"Sep 2026\",\n        image: \"https:\/\/picsum.photos\/seed\/malaria-prevention-harar\/800\/350.jpg\",\n        challenge: \"Despite significant progress, Harar region still reports 800+ malaria cases annually, with persistent transmission hotspots in Kombolcha and Babile woredas where irrigation-based agriculture creates year-round breeding sites. Case investigation turnaround exceeds 72 hours, undermining elimination efforts.\",\n        approach: \"Three-pronged strategy: (1) Targeted indoor residual spraying in 15,000 high-risk households, (2) Community-based rapid diagnostic testing with same-day treatment through health posts, (3) Enhanced surveillance with case-based reporting via mobile tools and entomological monitoring at 24 sentinel sites.\",\n        milestones: [\n          { label: \"Baseline Mapping & Planning\", done: true },\n          { label: \"First Round IRS Campaign\", done: true },\n          { label: \"Community Testing Deployment\", done: false },\n          { label: \"Sentinel Surveillance Setup\", done: false },\n          { label: \"Third Round IRS & Evaluation\", done: false }\n        ],\n        outcomes: [\n          \"Reduce malaria incidence by 80% from baseline\",\n          \"Achieve same-day testing & treatment in all woredas\",\n          \"Spray 15,000 households in high-risk kebeles\",\n          \"Establish 24 entomological monitoring sites\",\n          \"Zero indigenous malaria cases in 4 of 6 woredas\"\n        ]\n      },\n      {\n        title: \"Health Workforce Accelerated Training Program\",\n        status: \"Planning\", badge: \"badge-planning\",\n        category: \"Capacity Building\", location: \"Regional (All Woredas)\", budget: \"\u20a822M\",\n        progress: 15, partners: \"Jhpiego, FMOH\", startDate: \"Apr 2025\", endDate: \"Sep 2026\",\n        image: \"https:\/\/picsum.photos\/seed\/health-training-ethiopia\/800\/350.jpg\",\n        challenge: \"Harar has only 2 physicians per 10,000 population and a critical shortage of mid-level providers skilled in emergency obstetric and newborn care. Rural health centers frequently cannot manage complications, forcing referrals that patients cannot afford.\",\n        approach: \"An 18-month accelerated competency-based training program targeting 120 health officers and nurses. Curriculum covers EmONC, neonatal resuscitation, integrated management of childhood illness, and basic emergency surgery. Training combines classroom sessions, simulation lab practice, and supervised clinical rotations at Harar General Hospital.\",\n        milestones: [\n          { label: \"Curriculum Development\", done: true },\n          { label: \"Trainee Selection & Baseline\", done: false },\n          { label: \"Cohort 1 Training (60 staff)\", done: false },\n          { label: \"Cohort 2 Training (60 staff)\", done: false },\n          { label: \"Post-Training Support & Assessment\", done: false }\n        ],\n        outcomes: [\n          \"Train 120 health workers in EmONC skills\",\n          \"Each woreda gains 20+ skilled providers\",\n          \"Reduce emergency referrals by 50%\",\n          \"Achieve 90% competency pass rate\",\n          \"Establish simulation lab at regional training center\"\n        ]\n      },\n      {\n        title: \"Clean Water & Sanitation in Health Facilities\",\n        status: \"Implementation\", badge: \"badge-implementation\",\n        category: \"Infrastructure\", location: \"Abadir, Jemal\", budget: \"\u20a828M\",\n        progress: 60, partners: \"UNICEF, WaterAid\", startDate: \"Mar 2024\", endDate: \"Feb 2026\",\n        image: \"https:\/\/picsum.photos\/seed\/water-sanitation-clinic\/800\/350.jpg\",\n        challenge: \"Of 38 health facilities in Harar, 14 lack reliable water supply and 11 have inadequate sanitation facilities. Healthcare-associated infections are 3x higher in facilities without WASH services, and infection prevention compliance drops below 40% without running water.\",\n        approach: \"Install solar-powered water pumping systems, 10,000L storage tanks, and distribution networks at 14 facilities. Construct gender-segregated improved latrines with menstrual hygiene facilities. Install handwashing stations at every point of care. Train 56 facility WASH committees in operations and maintenance.\",\n        milestones: [\n          { label: \"Assessment & Design\", done: true },\n          { label: \"Phase 1: 7 Facilities (Abadir)\", done: true },\n          { label: \"Phase 2: 7 Facilities (Jemal)\", done: false },\n          { label: \"WASH Committee Training\", done: false },\n          { label: \"Final Inspection & Handover\", done: false }\n        ],\n        outcomes: [\n          \"All 14 facilities gain reliable water access\",\n          \"Install 28 gender-segregated latrine blocks\",\n          \"Place 56 handwashing stations at care points\",\n          \"Train 56 WASH committee members\",\n          \"Reduce HAI rate by 60% in targeted facilities\"\n        ]\n      },\n      {\n        title: \"NCD Screening & Referral Program\",\n        status: \"Final Phase\", badge: \"badge-final\",\n        category: \"Clinical\", location: \"Kombolcha, Babile\", budget: \"\u20a815M\",\n        progress: 88, partners: \"WHO, RTSL\", startDate: \"Jan 2023\", endDate: \"Jun 2025\",\n        image: \"https:\/\/picsum.photos\/seed\/ncd-screening-clinic\/800\/350.jpg\",\n        challenge: \"Non-communicable diseases account for 32% of outpatient visits in Harar but fewer than 10% of cases are diagnosed early. Most patients present with complications, and there is no systematic screening or structured referral pathway from health centers to the hospital.\",\n        approach: \"Introduce protocol-based NCD screening at 8 health centers for hypertension, diabetes mellitus, and cervical cancer (via visual inspection with acetic acid). Establish a digital referral tracking system connecting health centers to Harar General Hospital's NCD clinic. Train 24 nurses in screening protocols and patient education.\",\n        milestones: [\n          { label: \"Protocol Development & Procurement\", done: true },\n          { label: \"Staff Training (24 Nurses)\", done: true },\n          { label: \"Screening Launch at 8 Centers\", done: true },\n          { label: \"Referral System & Digital Tracking\", done: true },\n          { label: \"Evaluation & Handover to Routine\", done: false }\n        ],\n        outcomes: [\n          \"Screen 40,000+ adults aged 30+ for NCDs\",\n          \"Identify and enroll 5,000+ new NCD patients\",\n          \"Achieve 80% referral completion rate\",\n          \"Train 24 nurses in NCD screening protocols\",\n          \"Integrate NCD screening into routine PHCU services\"\n        ]\n      },\n      {\n        title: \"EMR System Deployment \u2014 Harar General Hospital\",\n        status: \"Implementation\", badge: \"badge-implementation\",\n        category: \"Digital Health\", location: \"Harar City\", budget: \"\u20a845M\",\n        progress: 42, partners: \"CDC, eHealth Africa\", startDate: \"Sep 2024\", endDate: \"Aug 2026\",\n        image: \"https:\/\/picsum.photos\/seed\/emr-hospital-system\/800\/350.jpg\",\n        challenge: \"Harar General Hospital relies entirely on paper-based patient records, resulting in lost files, duplicate tests, medication errors, and inability to generate clinical reports. Pharmacy inventory is managed manually, leading to frequent stockouts of essential medicines.\",\n        approach: \"Deploy a comprehensive openEMR-based system with modules for patient registration, clinical encounters, e-prescribing, laboratory ordering & results, radiology, and pharmacy inventory management. Phase the rollout department by department starting with OPD and pharmacy, followed by inpatient wards and laboratory. Provide 6 months of on-site mentorship for all users.\",\n        milestones: [\n          { label: \"System Customization & Server Setup\", done: true },\n          { label: \"OPD & Pharmacy Go-Live\", done: false },\n          { label: \"Laboratory & Radiology Integration\", done: false },\n          { label: \"Inpatient Ward Deployment\", done: false },\n          { label: \"Full Operation & Interoperability\", done: false }\n        ],\n        outcomes: [\n          \"Digitize 100% of patient records at HGJ\",\n          \"Reduce prescription errors by 70%\",\n          \"Achieve real-time pharmacy stock visibility\",\n          \"Eliminate duplicate laboratory tests\",\n          \"Enable clinical audit and quality improvement\"\n        ]\n      },\n      {\n        title: \"New Primary Health Care Unit \u2014 Fugnan Bira\",\n        status: \"Planning\", badge: \"badge-planning\",\n        category: \"Infrastructure\", location: \"Fugnan Bira\", budget: \"\u20a849M\",\n        progress: 8, partners: \"World Bank, RHB\", startDate: \"Jul 2025\", endDate: \"Dec 2027\",\n        image: \"https:\/\/picsum.photos\/seed\/health-center-build\/800\/350.jpg\",\n        challenge: \"Fugnan Bira woreda's 35,000 residents must travel 18km to the nearest health center. Skilled delivery coverage is below 20%, immunization dropout rate exceeds 15%, and there are no laboratory or emergency services available locally.\",\n        approach: \"Construct a standard PHCU on 2,000m\u00b2 of allocated government land with: outpatient department (4 rooms), maternity wing (2 delivery beds + waiting area), laboratory, pharmacy, store, staff residence (4 houses), and solar power system. Staff with 2 health officers, 4 nurses, 2 midwives, 1 lab technician, and 1 pharmacist. Connect to eCHIS and DHIS2 from day one.\",\n        milestones: [\n          { label: \"Site Survey & Design Finalization\", done: true },\n          { label: \"Contractor Selection & Agreement\", done: false },\n          { label: \"Construction Phase\", done: false },\n          { label: \"Equipment & Furnishing\", done: false },\n          { label: \"Staffing & Operational Launch\", done: false }\n        ],\n        outcomes: [\n          \"Serve 35,000 people within 5km radius\",\n          \"Increase skilled delivery coverage to 60%+\",\n          \"Reduce immunization dropout to below 5%\",\n          \"Provide 24\/7 emergency services locally\",\n          \"Create 10+ permanent health worker positions\"\n        ]\n      }\n    ];\n\n    \/\/ ===== Modal Functions =====\n    function openModal(index) {\n      const p = projects[index];\n      const milestonesHTML = p.milestones.map(m => `\n        <div class=\"flex items-center gap-3\">\n          <div class=\"w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 ${m.done ? 'bg-sky-500' : 'bg-sky-50 border-2 border-sky-200'}\">\n            ${m.done ? '<span class=\"iconify text-white text-xs\" data-icon=\"lucide:check\"><\/span>' : ''}\n          <\/div>\n          <span class=\"text-xs ${m.done ? 'text-slate-700 font-medium' : 'text-slate-400'}\">${m.label}<\/span>\n        <\/div>\n      `).join('');\n\n      const outcomesHTML = p.outcomes.map(o => `\n        <li class=\"flex items-start gap-2\">\n          <span class=\"iconify text-sky-400 text-sm mt-0.5 flex-shrink-0\" data-icon=\"lucide:check-circle-2\"><\/span>\n          <span class=\"text-xs text-slate-600\">${o}<\/span>\n        <\/li>\n      `).join('');\n\n      document.getElementById('modalContent').innerHTML = `\n        <div class=\"relative\">\n          <img decoding=\"async\" src=\"${p.image}\" alt=\"${p.title}\" class=\"w-full h-48 object-cover\">\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black\/60 via-transparent to-transparent\"><\/div>\n          <div class=\"absolute bottom-4 left-6 right-6\">\n            <div class=\"flex items-center gap-2 mb-2\">\n              <span class=\"${p.badge} text-[10px] font-semibold px-2.5 py-1 rounded-full\">${p.status}<\/span>\n              <span class=\"bg-white\/20 backdrop-blur-sm text-white text-[10px] font-medium px-2.5 py-1 rounded-full\">${p.category}<\/span>\n            <\/div>\n            <h2 class=\"text-white text-lg font-bold leading-tight\">${p.title}<\/h2>\n          <\/div>\n          <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 w-9 h-9 bg-black\/40 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-black\/60 transition-colors\">\n            <span class=\"iconify text-lg\" data-icon=\"lucide:x\"><\/span>\n          <\/button>\n        <\/div>\n        <div class=\"p-6 lg:p-8 space-y-6\">\n          <!-- Meta Row -->\n          <div class=\"flex flex-wrap gap-4\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"iconify text-sky-400 text-sm\" data-icon=\"lucide:map-pin\"><\/span>\n              <span class=\"text-xs text-slate-600\">${p.location}<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2\">\n              <span class=\"iconify text-sky-400 text-sm\" data-icon=\"lucide:banknote\"><\/span>\n              <span class=\"text-xs text-slate-600\">${p.budget}<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2\">\n              <span class=\"iconify text-sky-400 text-sm\" data-icon=\"lucide:calendar\"><\/span>\n              <span class=\"text-xs text-slate-600\">${p.startDate} \u2014 ${p.endDate}<\/span>\n            <\/div>\n            <div class=\"flex items-center gap-2\">\n              <span class=\"iconify text-sky-400 text-sm\" data-icon=\"lucide:handshake\"><\/span>\n              <span class=\"text-xs text-slate-600\">${p.partners}<\/span>\n            <\/div>\n          <\/div>\n          <!-- Progress -->\n          <div>\n            <div class=\"flex justify-between text-xs mb-1.5\">\n              <span class=\"text-slate-500 font-medium\">Overall Progress<\/span>\n              <span class=\"font-bold text-sky-600\">${p.progress}%<\/span>\n            <\/div>\n            <div class=\"h-2.5 bg-sky-50 rounded-full overflow-hidden\">\n              <div class=\"h-full ${p.progress >= 80 ? 'bg-emerald-400' : p.progress >= 30 ? 'bg-sky-400' : 'bg-amber-400'} rounded-full transition-all duration-700\" style=\"width:${p.progress}%\"><\/div>\n            <\/div>\n          <\/div>\n          <!-- Challenge -->\n          <div>\n            <div class=\"flex items-center gap-2 mb-2\">\n              <span class=\"iconify text-rose-400 text-sm\" data-icon=\"lucide:alert-triangle\"><\/span>\n              <h3 class=\"text-sm font-bold text-slate-900\">The Challenge<\/h3>\n            <\/div>\n            <p class=\"text-xs text-slate-500 leading-relaxed pl-6\">${p.challenge}<\/p>\n          <\/div>\n          <!-- Approach -->\n          <div>\n            <div class=\"flex items-center gap-2 mb-2\">\n              <span class=\"iconify text-sky-500 text-sm\" data-icon=\"lucide:route\"><\/span>\n              <h3 class=\"text-sm font-bold text-slate-900\">Our Approach<\/h3>\n            <\/div>\n            <p class=\"text-xs text-slate-500 leading-relaxed pl-6\">${p.approach}<\/p>\n          <\/div>\n          <!-- Timeline & Milestones -->\n          <div>\n            <div class=\"flex items-center gap-2 mb-3\">\n              <span class=\"iconify text-sky-500 text-sm\" data-icon=\"lucide:milestone\"><\/span>\n              <h3 class=\"text-sm font-bold text-slate-900\">Timeline & Milestones<\/h3>\n            <\/div>\n            <div class=\"pl-6 space-y-3\">${milestonesHTML}<\/div>\n          <\/div>\n          <!-- Expected Outcomes -->\n          <div>\n            <div class=\"flex items-center gap-2 mb-3\">\n              <span class=\"iconify text-emerald-500 text-sm\" data-icon=\"lucide:target\"><\/span>\n              <h3 class=\"text-sm font-bold text-slate-900\">Expected Outcomes<\/h3>\n            <\/div>\n            <ul class=\"pl-6 space-y-2\">${outcomesHTML}<\/ul>\n          <\/div>\n        <\/div>\n      `;\n      document.getElementById('modal').classList.add('open');\n      document.body.style.overflow = 'hidden';\n    }\n\n    function closeModal() {\n      document.getElementById('modal').classList.remove('open');\n      document.body.style.overflow = '';\n    }\n    document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });\n\n    \/\/ ===== Filtering =====\n    const searchInput = document.getElementById('searchInput');\n    const categoryFilter = document.getElementById('categoryFilter');\n    const locationFilter = document.getElementById('locationFilter');\n    const projectCards = document.querySelectorAll('.project-card');\n    const resultsCount = document.getElementById('resultsCount');\n    const noResults = document.getElementById('noResults');\n    const activeFilters = document.getElementById('activeFilters');\n\n    function filterProjects() {\n      const search = searchInput.value.toLowerCase().trim();\n      const category = categoryFilter.value;\n      const location = locationFilter.value;\n      let count = 0;\n\n      projectCards.forEach(card => {\n        const title = card.dataset.title;\n        const cat = card.dataset.category;\n        const loc = card.dataset.location;\n        const matchSearch = !search || title.includes(search);\n        const matchCat = category === 'all' || cat === category;\n        const matchLoc = location === 'all' || loc === location;\n\n        if (matchSearch && matchCat && matchLoc) {\n          card.classList.remove('hidden-card');\n          count++;\n        } else {\n          card.classList.add('hidden-card');\n        }\n      });\n\n      resultsCount.textContent = `Showing ${count} project${count !== 1 ? 's' : ''}`;\n      noResults.classList.toggle('show', count === 0);\n      updateFilterTags(search, category, location);\n    }\n\n    function updateFilterTags(search, category, location) {\n      const tags = [];\n      if (search) tags.push({ label: `\"${search}\"`, clear: () => { searchInput.value = ''; filterProjects(); } });\n      if (category !== 'all') tags.push({ label: categoryFilter.options[categoryFilter.selectedIndex].text, clear: () => { categoryFilter.value = 'all'; filterProjects(); } });\n      if (location !== 'all') tags.push({ label: locationFilter.options[locationFilter.selectedIndex].text, clear: () => { locationFilter.value = 'all'; filterProjects(); } });\n\n      if (tags.length === 0) {\n        activeFilters.classList.add('hidden');\n        return;\n      }\n      activeFilters.classList.remove('hidden');\n      activeFilters.innerHTML = tags.map((t, i) => `\n        <span class=\"inline-flex items-center gap-1.5 bg-sky-100 text-sky-700 text-[11px] font-medium px-3 py-1 rounded-full\">\n          ${t.label}\n          <button onclick=\"clearFilter(${i})\" class=\"hover:text-sky-900 transition-colors\">\n            <span class=\"iconify text-xs\" data-icon=\"lucide:x\"><\/span>\n          <\/button>\n        <\/span>\n      `).join('');\n      window._filterClears = tags.map(t => t.clear);\n    }\n\n    function clearFilter(index) {\n      if (window._filterClears && window._filterClears[index]) window._filterClears[index]();\n    }\n\n    searchInput.addEventListener('input', filterProjects);\n    categoryFilter.addEventListener('change', filterProjects);\n    locationFilter.addEventListener('change', filterProjects);\n\n    \/\/ ===== View Toggle =====\n    function setView(mode) {\n      const grid = document.getElementById('projectGrid');\n      const gridBtn = document.getElementById('gridBtn');\n      const listBtn = document.getElementById('listBtn');\n      if (mode === 'list') {\n        grid.classList.remove('md:grid-cols-2');\n        grid.classList.add('grid-cols-1');\n        listBtn.classList.add('bg-sky-500', 'text-white');\n        listBtn.classList.remove('bg-sky-50', 'text-sky-500', 'border', 'border-sky-100');\n        gridBtn.classList.remove('bg-sky-500', 'text-white');\n        gridBtn.classList.add('bg-sky-50', 'text-sky-500', 'border', 'border-sky-100');\n      } else {\n        grid.classList.add('md:grid-cols-2');\n        grid.classList.remove('grid-cols-1');\n        gridBtn.classList.add('bg-sky-500', 'text-white');\n        gridBtn.classList.remove('bg-sky-50', 'text-sky-500', 'border', 'border-sky-100');\n        listBtn.classList.remove('bg-sky-500', 'text-white');\n        listBtn.classList.add('bg-sky-50', 'text-sky-500', 'border', 'border-sky-100');\n      }\n    }\n\n    \/\/ ===== Scroll Reveal =====\n    const revealElements = document.querySelectorAll('.reveal');\n    const revealObserver = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) entry.target.classList.add('active');\n      });\n    }, { threshold: 0.06 });\n    revealElements.forEach(el => revealObserver.observe(el));\n\n    \/\/ ===== Progress Bar Animation =====\n    const progressBars = document.querySelectorAll('.progress-fill[data-width]');\n    const progressObserver = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.style.width = entry.target.dataset.width;\n        }\n      });\n    }, { threshold: 0.3 });\n    progressBars.forEach(bar => progressObserver.observe(bar));\n  <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ongoing Projects \u2014 Harar Regional Health Bureau Active Initiatives &#038; Ongoing Projects Harar Regional Health Bureau Driving health transformation through strategically designed projects \u2014 from infrastructure upgrades to digital innovation \u2014 each measured by its impact on the communities we serve. 8 Active Projects 6 Woredas Reached \u20a8247M Total Funding 12 Partner Orgs All CategoriesInfrastructureClinicalDigital [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":140,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-167","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":7,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions"}],"predecessor-version":[{"id":1710,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions\/1710"}],"up":[{"embeddable":true,"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/pages\/140"}],"wp:attachment":[{"href":"https:\/\/hararhealthbureau.org\/index.php\/wp-json\/wp\/v2\/media?parent=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}