From ecfbfb7cfbf4a3a8a08fa5e35fca939861780714 Mon Sep 17 00:00:00 2001
From: eric <erotush77@gmail.com>
Date: Thu, 18 Jan 2024 17:42:31 +0300
Subject: [PATCH] Fixed Public Facilities Filters

---
 components/Forms/BasicDetailsForm.js     |    2 +-
 components/Forms/FacilityContactsForm.js |    2 +-
 components/Forms/GeolocationForm.js      |    4 +-
 components/HeaderLayout.js               |    6 +-
 pages/facilities/approve_reject/[id].js  |    2 +-
 pages/public/chu/index.js                |    9 +-
 pages/public/facilities/index.js         | 1002 +++++++++++++---------
 7 files changed, 599 insertions(+), 428 deletions(-)

diff --git a/components/Forms/BasicDetailsForm.js b/components/Forms/BasicDetailsForm.js
index 49a3d3b6..c33fd675 100644
--- a/components/Forms/BasicDetailsForm.js
+++ b/components/Forms/BasicDetailsForm.js
@@ -618,7 +618,7 @@ export function BasicDeatilsForm({ editMode }) {
         className='flex flex-col w-full mt-4 items-start bg-blue-50 p-3 justify-start gap-3'>
 
       {
-        formError && <Alert severity='error' className='w-full'>{formError}</Alert> 
+        formError && <Alert severity='error' className='w-full border-2 border-red-500 rounded-none'>{formError}</Alert> 
       }
 
         {/* Facility Official Name */}
diff --git a/components/Forms/FacilityContactsForm.js b/components/Forms/FacilityContactsForm.js
index 98479fa0..da6f85f9 100644
--- a/components/Forms/FacilityContactsForm.js
+++ b/components/Forms/FacilityContactsForm.js
@@ -391,7 +391,7 @@ export function FacilityContactsForm() {
 
                             >
                                 {
-                                    formError && <Alert severity='error' className='w-full'>{formError}</Alert> 
+                                    formError && <Alert severity='error' className='w-full border-2 border-red-500 rounded-none'>{formError}</Alert> 
                                 }
 
                                 {/* Contacts */}
diff --git a/components/Forms/GeolocationForm.js b/components/Forms/GeolocationForm.js
index bd894ca9..bc440343 100644
--- a/components/Forms/GeolocationForm.js
+++ b/components/Forms/GeolocationForm.js
@@ -340,7 +340,7 @@ export function GeolocationForm({ editMode }) {
     >
 
       {
-        formError && <Alert severity='error' className='w-full'>{formError}</Alert> 
+        formError && <Alert severity='error' className='w-full border-2 border-red-500 rounded-none'>{formError}</Alert> 
       }
 
       {/* Collection Date */}
@@ -431,7 +431,7 @@ export function GeolocationForm({ editMode }) {
 
                 <Map markerCoordinates={[latitude, longitude]} geoJSON={geoJSON} from={from} ward={wardName} center={geoCenter} />
                 :
-                <Alert severity='warning' className='w-full p-1'>Geolocation Data is Missing For this facility</Alert>
+                <Alert severity='warning' className='w-full p-1 border-2 border-yellow-500 rounded-none'>Geolocation Data is Missing For this facility</Alert>
             }
           </Suspense>
         </div>
diff --git a/components/HeaderLayout.js b/components/HeaderLayout.js
index 63e8ae49..fdc377a0 100644
--- a/components/HeaderLayout.js
+++ b/components/HeaderLayout.js
@@ -323,7 +323,7 @@ export default function HeaderLayout({
                     hidden 
                     sm:inline
                     cursor-pointer
-                    ${(currentPath == "/public/facility/facilities" || currentPath == "/public/chu/community_units"
+                    ${(currentPath == "/public/facilities" || currentPath == "/public/chu/community_units"
                     ? activeClasses
                     : inactiveClasses)
                   }`}>
@@ -429,13 +429,13 @@ export default function HeaderLayout({
           className="inline-flex flex-row justify-start flex-grow mt-2 lg:py-0"
           action= {(()=>{
             if(searchOption == "Facilities"){
-              return "/public/facility/facilities"
+              return "/public/facilities"
             }else if(searchOption == "Community Health Unit"){
               return "/public/chu/community_units"
             }else if(searchOption == "Services"){
               return "/public/services"
             }else{
-             return  router.asPath.includes('searchTerm')? router.route : "/public/facility/facilities"
+             return  router.asPath.includes('searchTerm')? router.route : "/public/facilities"
             }
           })()}
         >
diff --git a/pages/facilities/approve_reject/[id].js b/pages/facilities/approve_reject/[id].js
index bf006391..1a427923 100644
--- a/pages/facilities/approve_reject/[id].js
+++ b/pages/facilities/approve_reject/[id].js
@@ -317,7 +317,7 @@ function ApproveReject(props) {
                 >
                    {/* Alert Section */}
             
-                  {formError && <Alert severity='error' className='w-full'>{formError}</Alert>}
+                  {formError && <Alert severity='error' className='w-full border-2 border-red-500 rounded-none'>{formError}</Alert>}
 
 
                   {
diff --git a/pages/public/chu/index.js b/pages/public/chu/index.js
index 5ad1685c..87f8000e 100644
--- a/pages/public/chu/index.js
+++ b/pages/public/chu/index.js
@@ -9,8 +9,7 @@ import {SearchIcon } from "@heroicons/react/solid";
 import Select from 'react-select'
 
 
-
-const Home = (props) => {
+function Home(props) {
 	const router = useRouter();
 	// const cus = props?.data?.results;
 	const [cus, setcus] = useState([])
@@ -180,11 +179,11 @@ const Home = (props) => {
 					</div>
 				
                     {/* Filter section */}
-					<form className='col-span-1 w-full flex flex-col item-center justify-start md:col-start-1 gap-8 ' onSubmit={(e)=>filterCHUs(e)}>
+					<form className='col-span-1 w-full flex flex-col item-center justify-start md:col-start-1 gap-8' onSubmit={(e)=>filterCHUs(e)}>
 						{/* <div className='card flex flex-wrap'> */}
 						<div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
 
-									{/* <label className="text-gray-600">Search all CHUs</label> */}
+									<h2>Search for a Community Health Unit</h2>
 									{/* &nbsp; */}
 									<input
 										name="allchus"
@@ -254,7 +253,7 @@ const Home = (props) => {
 						<div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
 							<h2>Administrative Units</h2> &nbsp;
 							<div  className="w-full max-w-xs flex flex-col gap-3 items-start justify-start mb-3" id='first'>
-								{administrative_units.map(ct=>(
+								{administrative_units?.map(ct=>(
 									<>
 									{/* <label htmlFor={ct.label} className="text-gray-600 capitalize text-sm ml-1">{ct.label}:</label> */}
 									<Select name={ct.label}  ref={ct.ref} defaultValue={drillDown[ct.label] || "national"} id={ct.label} className="w-full max-w-xs border border-gray-400"
diff --git a/pages/public/facilities/index.js b/pages/public/facilities/index.js
index 81b97eb6..6b8a99cc 100644
--- a/pages/public/facilities/index.js
+++ b/pages/public/facilities/index.js
@@ -1,62 +1,57 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import MainLayout from '../../../components/MainLayout';
-import {DotsHorizontalIcon} from '@heroicons/react/solid';
+import { DotsHorizontalIcon } from '@heroicons/react/solid';
 import { checkToken } from '../../../controllers/auth/public_auth';
 import React, { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
-import {SearchIcon } from "@heroicons/react/solid";
+import { SearchIcon } from "@heroicons/react/solid";
 import Select from 'react-select'
+import { Alert } from '@mui/lab'
+import Spinner from '../../../components/Spinner'
 
-
-
-const Home = (props) => {
-    // console.log(props)
+function Home(props) {
+	// console.log(props)
 	const router = useRouter();
-	const [facilities, setFacilities] = useState([])
+	const [facilities, setFacilities] = useState(props?.data)
 	const filters = props?.filters;
 	const [drillDown, setDrillDown] = useState({});
 	const qf = props?.query?.qf || 'all';
-	const [viewAll, setViewAll] = useState(false);
+	const [viewAll, setViewAll] = useState(true);
 	const API_URL = process.env.NEXT_PUBLIC_API_URL;
 	const counties = props?.filters?.county || [];
 	const facility_type = props?.filters?.facility_type || [];
 	const keph_level = props?.filters?.keph_level || [];
 	const operation_status = props?.filters?.operation_status || [];
 	const owner = props?.filters?.owner || [];
-	const owner_type = props?.filters.owner_type || [];
+	const owner_type = props?.filters?.owner_type || [];
 	const service_ = props?.filters?.service || [];
 	const service_category = props?.filters?.service_category || [];
 
 
 	const [units, setUnits] = useState([])
+	const [reset, setReset] = useState(false)
+	const [submitting, setSubmitting] = useState(false)
+	const [formError, setFormError] = useState(null)
+
 
-	const code=useRef(null)
-	const allfacilities = useRef(null)
-	const service = useRef(null)
-	const name = useRef(null)
 	const county = useRef(null)
 	const subcounty = useRef(null)
 	const ward = useRef(null)
 	const constituency = useRef(null)
-	const facilitytype = useRef(null)
-	const kephlevel = useRef(null)
-	const operationstatus = useRef(null)
-	const facilityowner = useRef(null)
-	const ownertype = useRef(null)
-	const facilityservice= useRef(null)
-	const servicecategory = useRef(null)
-	const beds = useRef(null)
-	const cots = useRef(null)
-	const available_holiday =useRef(null)
-	const available_weekends =useRef(null)
-	const available_24hrs = useRef(null)
-
-	// const [title, setTitle] = useState('Facilities') 
+	const facilityType = useRef(null)
+	const kephLevel = useRef(null)
+	const operationStatus = useRef(null)
+	const facilityOwner = useRef(null)
+	const ownerType = useRef(null)
+	const facilityService = useRef(null)
+	const serviceCategory = useRef(null)
+
+
+
 
-	
 	useEffect(() => {
-		
+
 		let qry = props?.query;
 		delete qry.searchTerm;
 		delete qry.qf
@@ -68,103 +63,110 @@ const Home = (props) => {
 
 	}, [filters]);
 
-	useEffect(() => {
-		if(props?.current_url.includes('search')|| router.asPath.includes('search')){
-			setFacilities(props?.data)
-			setViewAll(true)
+	// useEffect(() => {
+	// 	if (props?.current_url.includes('search') || router.asPath.includes('search')) {
+	// 		setFacilities(props?.data)
+	// 		setViewAll(true)
+
+	// 	} else {
+	// 		setViewAll(false)
+	// 	}
+	// }, [props?.current_url]);
+
+	// useEffect(() => {
+	// 	setViewAll(true)
+	// }, [])
 
-		}else{
-			setViewAll(false)
-		}
-	}, [props?.current_url]);
- 
 	//admin units
-	const administrative_units= [
-		{label:'county', ref:county,array: counties},
-		{label: 'subcounty', ref:subcounty, array: units['sub_counties']},
-		{label: 'constituency', ref:constituency, array: units['sub_counties']},
-		{label: 'wards', ref:ward, array: units['wards']}
+	const administrative_units = [
+		{ label: 'county', name: 'county', ref: county, array: counties },
+		{ label: 'subcounty', name: 'sub_county', ref: subcounty, array: units['sub_counties'] },
+		{ label: 'constituency', name: 'constituency', ref: constituency, array: units['sub_counties'] },
+		{ label: 'wards', name: 'ward', ref: ward, array: units['wards'] }
 	]
 
 	//services
-	const service_units= [
-		{label: 'service category', ref:servicecategory, array: service_category},
-		{label:'service', ref:facilityservice,array: service_},
+	const service_units = [
+		{ label: 'service category', name: 'service_category', ref: serviceCategory, array: service_category },
+		{ label: 'service', name: 'service', ref: facilityService, array: service_ },
 	]
 
 	//facility details
-	const facility_details =[
-		{label:'keph level', ref:kephlevel,array: keph_level},
-		{label:'facility type', ref:facilitytype,array: facility_type},
-		{label:'facility owner category', ref:ownertype,array: owner_type},
-		{label:'facility owner', ref:facilityowner,array: owner},
-		{label:'operation status', ref:operationstatus,array: operation_status},
+	const facility_details = [
+		{ label: 'keph level', name: 'keph_level', ref: kephLevel, array: keph_level },
+		{ label: 'facility type', name: 'facility_type', ref: facilityType, array: facility_type },
+		{ label: 'owner category', name: 'owner_type', ref: ownerType, array: owner_type },
+		{ label: 'facility owner', name: 'owner', ref: facilityOwner, array: owner },
+		{ label: 'operation status', name: 'operation_status', ref: operationStatus, array: operation_status },
 
 	]
 	const getUnits = async (path, id) => {
-		try{
+		try {
 			let url = `/api/common/fetch_form_data/?path=${path}&id=${id}`
 
 			const response = await fetch(url, {
-				headers:{
+				headers: {
 					'Accept': 'application/json, text/plain, */*',
 					'Content-Type': 'application/json',
 				},
-				method:'GET'
+				method: 'GET'
 			})
 
 			let results = await response.json()
 			let res = {}
-			res[path]= results.results
-			setUnits({...units,...res})
-			
-		}catch (err){
-			
+			res[path] = results.results
+			setUnits({ ...units, ...res })
+
+		} catch (err) {
+
 		}
 	}
-	const filterFacilities = async (e) => {
-		if(e !== undefined){
+
+
+	function handleSubmit(e) {
+		/*
+		if (e !== undefined) {
 			e.preventDefault()
 		}
-		let url = API_URL +`/facilities/material/?fields=id,code,name,regulatory_status_name,facility_type_name,owner_name,county,constituency,ward_name,keph_level,operation_status_name`
-		const filter_options ={
+		let url = API_URL + `/facilities/material/?fields=id,code,name,regulatory_status_name,facility_type_name,owner_name,county,constituency,ward_name,keph_level,operation_status_name`
+		const filter_options = {
 			name: name.current?.value,
 			code: code.current?.value,
-			county: county?.current?.state?.value?.value || '',
-			sub_county: subcounty?.current?.state?.value?.value || '',
-			constituency: constituency?.current?.state?.value?.value || '',
-			ward:ward?.current?.state?.value?.value || '',
-			facility_type: facilitytype?.current?.state?.value?.value || '', 
-			keph_level: kephlevel?.current?.state?.value?.value || '',
-			operation_status: operationstatus?.current?.state?.value?.value || '',
-			owner: facilityowner?.current?.state?.value?.value || '',
-			owner_type: ownertype?.current?.state?.value?.value || '',
-			service: facilityservice?.current?.state?.value?.value || '', 
-			service_category: servicecategory?.current?.state?.value?.value || '',
-			number_of_beds:beds?.current?.checked || '',
-			number_of_cots:cots?.current?.checked || '',
-			open_public_holidays:available_holiday?.current?.checked || '',
-			open_weekends:available_weekends?.current?.checked || '',
+			county: county?.current.clearValue()
+			sub_county: subcounty?.current.clearValue()
+			constituency: constituency?.current.clearValue()
+			ward: ward?.current.clearValue()
+			facility_type: facilitytype?.current.clearValue()
+			keph_level: kephLevel?.current.clearValue()
+			operation_status: operationstatus?.current.clearValue()
+			owner: facilityowner?.current.clearValue()
+			owner_type: ownertype?.current.clearValue()
+			service: facilityservice?.current.clearValue()
+			service_category: servicecategory?.current.clearValue()
+			number_of_beds: beds?.current?.checked || '',
+			number_of_cots: cots?.current?.checked || '',
+			open_public_holidays: available_holiday?.current?.checked || '',
+			open_weekends: available_weekends?.current?.checked || '',
 			open_whole_day: available_24hrs?.current?.checked || ''
 		}
-		
+
 		let qry = Object.keys(filter_options).map(function (key) {
-			if(filter_options[key] !== ''){
+			if (filter_options[key] !== '') {
 				let er = (key) + '=' + (filter_options[key]);
 				return er
 			}
-         }).filter(Boolean).join('&')
-		
-		if(qry !== ''){
+		}).filter(Boolean).join('&')
+
+		if (qry !== '') {
 			url += `&${qry}`
 		}
-		if(allfacilities.current?.value !== ''){
+		if (allfacilities.current?.value !== '') {
 			url += `&search={"query":{"query_string":{"default_field":"name","query":"${allfacilities.current?.value}"}}}`
 		}
-		if(service.current?.value !== ''){
+		if (service.current?.value !== '') {
 			url += `&service_name={"query":{"query_string":{"default_field":"service_names","query":"${service.current?.value}"}}}`
 		}
-		
+
 		try {
 			const r = await fetch(url, {
 				headers: {
@@ -181,6 +183,115 @@ const Home = (props) => {
 			setFacilities([])
 			setViewAll(false)
 		}
+		*/
+
+		e.preventDefault()
+
+		//Should be /facilitie/material
+
+		// TODO: Fix the facility detials display list
+
+		let url = API_URL + `/facilities/facilities/?fields=id,code,name,regulatory_status_name,facility_type_name,owner_name,county,constituency,ward_name,keph_level,operation_status_name` 
+	
+
+		const formData = new FormData(e.target)
+		const formDataObject = Object.fromEntries(formData)
+
+		const children = e.target.children
+
+		if (reset) {
+			for (let child of children) {
+
+				for (let node of child.querySelectorAll("input")) {
+
+					if (node.type == "search") {
+						node.value = ""
+					}
+
+					if (node.type == "text") {
+
+						county?.current.clearValue()
+						subcounty?.current.clearValue()
+						constituency?.current.clearValue()
+						ward?.current.clearValue()
+						facilityType?.current.clearValue()
+						kephLevel?.current.clearValue()
+						operationStatus?.current.clearValue()
+						facilityOwner?.current.clearValue()
+						ownerType?.current.clearValue()
+						facilityService?.current.clearValue()
+						serviceCategory?.current.clearValue()
+
+
+					}
+
+					if (node.type == 'checkbox') {
+						node.checked = false
+					}
+
+				}
+
+			}
+
+
+		}
+
+
+		if (!reset) {
+
+			setSubmitting(true)
+
+			const qry = Object.keys(formDataObject).map(function (key) {
+				if (formDataObject[key] !== '') {
+					const er = (key) + '=' + (formDataObject[key]);
+					return er
+				}
+			}).filter(Boolean).join('&')
+
+			if (qry !== '') {
+				url += `&${qry}`
+			}
+			if (!formDataObject?.facility?.includes('')) {
+				url += `&search={"query":{"query_string":{"default_field":"name","query":"${query.searchTerm}"}}}`
+			}
+			if (!formDataObject?.service?.includes('')) {
+				url += `&service_name={"query":{"query_string":{"default_field":"service_names","query":"${formDataObject?.service}"}}}`
+			}
+
+			console.log({url})
+			fetch(url, {
+				headers: {
+					Authorization: 'Bearer ' + props?.token,
+					Accept: 'application/json',
+				},
+
+			})
+				.then(resp => {
+					if (resp.status == 200 || resp.status == 204) {
+						setSubmitting(false)
+					} else {
+						setSubmitting(false)
+					}
+					return resp.json()
+				})
+				.then(facilities => {
+					console.log({facilities})
+					setFacilities(facilities)
+					setViewAll(true)
+
+				})
+				.catch(e => {
+					setFormError(e.message)
+					setFacilities([])
+					setViewAll(false)
+				})
+
+
+
+		}
+
+		if (reset) setReset(false)
+
 	}
 
 	// console.log(facilities)
@@ -194,7 +305,7 @@ const Home = (props) => {
 
 			<MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
 				<div className='w-full grid grid-cols-5 gap-4 px-1 md:px-4 py-2 my-4'>
-					<div className='col-span-5 flex flex-col gap-3 md:gap-5 '>
+					<div className='col-span-5 flex flex-col gap-4 md:gap-5 '>
 						<div className='flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-3'>
 							{/* Bread Crumbs */}
 
@@ -206,313 +317,381 @@ const Home = (props) => {
 								<span className='text-gray-500'>Facilities</span>
 							</div>
 							<div className={"col-span-5 flex justify-between w-full bg-gray-50 drop-shadow  text-black p-4 md:divide-x md:divide-gray-200z items-center border-l-8 " + (true ? "border-blue-600" : "border-red-600")}>
-                                <h2 className='flex items-center text-xl font-bold text-black capitalize gap-2'>
-                                    {'Facilities'}
-                                </h2>
-								<p>Use the form on the left to filter facilities or &nbsp;
-								<button className='text-lg text-blue-500 font-semibold' 
-								 onClick={()=>{
-									setViewAll(true)
-									filterFacilities()
-								}
-								}
-								>view all facilities</button></p>								
-								
-                               
-                        </div>
+								<h2 className='flex items-center text-xl font-bold text-black capitalize gap-2'>
+									{'Facilities'}
+								</h2>
+								<p>Use the form on the left to filter facilities or
+									{'   '}
+									<button className='text-lg text-blue-500 hover:underline font-semibold'
+										onClick={() => {
+											setViewAll(true)
+											fetchAllfacilities()
+										}
+										}
+									>view all facilities</button></p>
+
+
+							</div>
+
+
 
 						</div>
-							
+
 					</div>
-				    
-					  {/* Side Menu Filters*/}
-					
-                    <div className='col-span-1 w-full md:col-start-1 border-r-2 border-gray-300 h-full'>
-                        <form onSubmit={(e)=>filterFacilities(e)}>
-                            {/* <div className='card flex flex-wrap'> */}
-                            <div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3 gap-2 shadow-lg border border-gray-300/70 bg-gray-50" style={{ minHeight: '50px' }}>
-
-                                        <label className=" text-gray-600">Search all facilities</label>
-                                        <input
-                                            name="facility"
-											ref={allfacilities}
-                                            id="search-input"
-                                            className="flex-none bg-gray-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-200 focus:shadow-none focus:bg-white focus:border-black outline-none"
-                                            type="search"
-                                            placeholder="Search all facilities"
-                                        />      
-                                        <label className=" text-gray-600">Search services</label>
-                                        <input
-                                            name="service"
-											ref={service}
-                                            id="search-input"
-                                            className="flex-none bg-gray-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-200 focus:shadow-none focus:bg-white focus:border-black outline-none"
-                                            type="search"
-                                            placeholder="Search services"
-                                        />                      
-                            </div>
-                            &nbsp;
-                            <div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-gray-50" style={{ minHeight: '50px' }}>
-                                        <h2>Facility Info</h2>
-                                        &nbsp; 
-                                        <label className=" text-gray-600">Facility Name</label>
-                                        <input
-                                            name="name"
-											ref={name}
-                                            id="search-input"
-                                            className="flex-none bg-gray-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-200 focus:shadow-none focus:bg-white focus:border-black outline-none"
-                                            type="search"
-                                            placeholder="Facility Name"
-                                        />    
-                                        <label className=" text-gray-600">Facility Code</label>
-                                        <input
-                                            name="code"
-											ref={code}
-                                            id="search-input"
-                                            className="flex-none bg-gray-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-200 focus:shadow-none focus:bg-white focus:border-black outline-none"
-                                            type="search"
-                                            placeholder="Facility Code"
-                                        />  
-                                                          
-                            </div>
-							&nbsp;
-							<div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-gray-50" style={{ minHeight: '50px' }}>
-								<h2>Administrative Unit</h2> &nbsp;
-								<div  className="w-full max-w-xs flex flex-col items-start gap-2 justify-start mb-3" id='first'>
-									{administrative_units.map(ct=>(
-										<>
-										<label htmlFor={ct.label} className="text-gray-600 capitalize text-sm ml-1">{ct.label}:</label>
-									   <Select name={ct.label}  ref={ct.ref} defaultValue={drillDown[ct.label] || "national"} id={ct.label} className="w-full max-w-xs p-1 justify-start bg-gray-50"
-										   options={
-											   (() => {
-													   let opts = [...Array.from(ct.array || [],
-														   fltopt => {
-															   if (fltopt.id != null && fltopt.id.length > 0) {
-																   return {
-																	   value: fltopt.id, label: fltopt.name 
-																   }
-															   }
-														   })]
-													   return opts
-											   })()
-										   }
-										   placeholder={`Select ${ct.label}`}
-										   onChange={sl => {
-											   let nf = {}
-											   if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) {
-												   nf[ct.label] = sl.value
-											   } else {
-												   delete nf[ct.label]
-											   }
-											   ct.label == 'county' && sl?.value !== undefined && getUnits('sub_counties', sl?.value)
-											   ct.label == 'subcounty' && sl?.value !== undefined && getUnits('wards', sl?.value)
-										   }} 
-										   />
-										</>
-									))}
-								</div>
-								
+
+					{/* Side Menu Filters*/}
+
+
+					<form className='col-span-1 w-full flex flex-col item-center justify-start md:col-start-1 gap-8'
+						onSubmit={handleSubmit}>
+
+						<div className='flex flex-row gap-4'>
+							<button
+								type="submit"
+								disabled={submitting}
+								className="bg-blue-500 border-1 border-gray-50 text-gray-50 flex place-content-center gap-2 px-2 py-1 "
+							>
+								<span className='text-medium font-semibold text-white'>
+									{
+										submitting ?
+											<Spinner />
+											:
+											'Search'
+
+
+									}
+								</span>
+								{
+									submitting &&
+									<span className='text-white'>Searching... </span>
+
+
+								}
+							</button>
+							<button
+								type='submit'
+								className="bg-blue-50  text-black flex items-center justify-center px-4 py-1 "
+								onClick={() => setReset(true)}
+							>Reset
+							</button>
+						</div>
+
+
+						{/* <div className='card flex flex-wrap'> */}
+						<div className="card col-span-6 md:col-span-2 flex flex-col items-start gap-4 justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
+							<h2>Search for a Facility</h2>
+
+
+							<input
+								name="facility"
+								className="flex-none bg-blue-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-400 focus:shadow-none focus:bg-white focus:border-black outline-none"
+								type="search"
+								placeholder="Search all facilities"
+							/>
+
+							<input
+								name="service"
+								className="flex-none bg-blue-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-400 focus:shadow-none focus:bg-white focus:border-black outline-none"
+								type="search"
+								placeholder="Search services"
+							/>
+						</div>
+
+						<div className="card col-span-6 md:col-span-2 flex flex-col gap-4 items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
+							<h2>Facility Info</h2>
+
+							<input
+								name="name"
+								className="flex-none bg-blue-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-400 focus:shadow-none focus:bg-white focus:border-black outline-none"
+								type="search"
+								placeholder="Facility Name"
+							/>
+
+							<input
+								name="code"
+								className="flex-none bg-blue-50  p-2 flex-grow shadow-sm border placeholder-gray-500 w-full border-gray-400 focus:shadow-none focus:bg-white focus:border-black outline-none"
+								type="search"
+								placeholder="Facility Code"
+							/>
+
+						</div>
+
+						<div className="card col-span-6 md:col-span-2 flex flex-col gap-4 items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
+							<h2>Administrative Unit</h2>
+							<div className="w-full max-w-xs flex flex-col gap-4 items-start justify-start mb-3" id='first'>
+								{administrative_units?.map((ct, i) => (
+									<>
+
+										<Select
+											key={i}
+											className="w-full max-w-xs  border border-gray-400"
+											ref={ct.ref}
+											styles={{
+												control: (baseStyles) => ({
+													...baseStyles,
+													backgroundColor: 'transparent',
+													outLine: 'none',
+													border: 'none',
+													outLine: 'none',
+													textColor: 'transparent',
+													padding: 0,
+													height: '4px'
+												}),
+
+											}}
+
+											name={ct.name}
+											options={
+												(() => {
+													let opts = [...Array.from(ct.array || [],
+														fltopt => {
+															if (fltopt.id != null && fltopt.id.length > 0) {
+																return {
+																	value: fltopt.id, label: fltopt.name
+																}
+															}
+														})]
+													return opts
+												})()
+											}
+											placeholder={`Select ${ct.label}`}
+											onChange={sl => {
+												let nf = {}
+												if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) {
+													nf[ct.label] = sl.value
+												} else {
+													delete nf[ct.label]
+												}
+												ct.label == 'county' && sl?.value !== undefined && getUnits('sub_counties', sl?.value)
+												ct.label == 'subcounty' && sl?.value !== undefined && getUnits('wards', sl?.value)
+											}}
+										/>
+									</>
+								))}
 							</div>
 
-							&nbsp;
-							<div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-gray-50" style={{ minHeight: '50px' }}>
-								<h2>Services</h2> &nbsp;
-								<div  className="w-full max-w-xs flex flex-col items-start gap-2 justify-start mb-3" id='first'>
-									{service_units.map(ct=>(
-										<>
-										<label htmlFor={ct.label} className="text-gray-600 capitalize text-sm ml-1">{ct.label}:</label>
-									   <Select name={ct.label}  ref={ct.ref} defaultValue={drillDown[ct.label] || "national"} id={ct.label} className="w-full max-w-xs p-1  bg-gray-50"
-										   options={
-											   (() => {
-													   let opts = [...Array.from(ct.array || [],
-														   fltopt => {
-															   if (fltopt.id != null && fltopt.id.length > 0) {
-																   return {
-																	   value: fltopt.id, label: fltopt.name 
-																   }
-															   }
-														   })]
-													   return opts
-											   })()
-										   }
-										   placeholder={`Select ${ct.label}`}
-										   onChange={sl => {
-											   let nf = {}
-											   if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) {
-												   nf[ct.label] = sl.value
-											   } else {
-												   delete nf[ct.label]
-											   }
-											   ct.label == 'county' && sl?.value !== undefined && getUnits('sub_counties', sl?.value)
-											   ct.label == 'subcounty' && sl?.value !== undefined && getUnits('wards', sl?.value)
-										   }} 
-										   />
-										</>
-									))}
-								</div>
-								
+						</div>
+
+
+						<div className="card col-span-6 md:col-span-2 flex flex-col gap-4 items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
+							<h2>Services</h2>
+							<div className="w-full max-w-xs flex flex-col gap-4 items-start justify-start mb-3" id='first'>
+								{service_units.map((ct, i) => (
+									<>
+
+										<Select
+											key={i}
+											ref={ct.ref}
+											className="w-full max-w-xs  border border-gray-400"
+											styles={{
+												control: (baseStyles) => ({
+													...baseStyles,
+													backgroundColor: 'transparent',
+													outLine: 'none',
+													border: 'none',
+													outLine: 'none',
+													textColor: 'transparent',
+													padding: 0,
+													height: '4px'
+												}),
+
+											}}
+
+											name={ct.name}
+											options={
+												(() => {
+													let opts = [...Array.from(ct.array || [],
+														fltopt => {
+															if (fltopt.id != null && fltopt.id.length > 0) {
+																return {
+																	value: fltopt.id, label: fltopt.name
+																}
+															}
+														})]
+													return opts
+												})()
+											}
+											placeholder={`Select ${ct.label}`}
+											onChange={sl => {
+												let nf = {}
+												if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) {
+													nf[ct.label] = sl.value
+												} else {
+													delete nf[ct.label]
+												}
+												ct.label == 'county' && sl?.value !== undefined && getUnits('sub_counties', sl?.value)
+												ct.label == 'subcounty' && sl?.value !== undefined && getUnits('wards', sl?.value)
+											}}
+										/>
+									</>
+								))}
 							</div>
 
-							&nbsp;
-							<div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-gray-50" style={{ minHeight: '50px' }}>
-								<h2>Facility Details</h2> &nbsp;
-								<div  className="w-full max-w-xs flex flex-col items-start gap-2 justify-start mb-3" id='first'>
-									{facility_details.map(ct=>(
-										<>
-										<label htmlFor={ct.label} className="text-gray-600 capitalize text-sm ml-1">{ct.label}:</label>
-									   <Select name={ct.label}  ref={ct.ref} defaultValue={drillDown[ct.label] || "national"} id={ct.label} className="w-full max-w-xs p-1  bg-gray-50"
-										   options={
-											   (() => {
-													   let opts = [...Array.from(ct.array || [],
-														   fltopt => {
-															   if (fltopt.id != null && fltopt.id.length > 0) {
-																   return {
-																	   value: fltopt.id, label: fltopt.name 
-																   }
-															   }
-														   })]
-													   return opts
-											   })()
-										   }
-										   placeholder={`Select ${ct.label}`}
-										   onChange={sl => {
-											   let nf = {}
-											   if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) {
-												   nf[ct.label] = sl.value
-											   } else {
-												   delete nf[ct.label]
-											   }
-											   ct.label == 'county' && sl?.value !== undefined && getUnits('sub_counties', sl?.value)
-											   ct.label == 'subcounty' && sl?.value !== undefined && getUnits('wards', sl?.value)
-										   }} 
-										   />
-										</>
-									))}
-									<br/>
-									<div  className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
+						</div>
+
+
+						<div className="card col-span-6 md:col-span-2 flex flex-col gap-4 items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
+							<h2>Facility Details</h2>
+							<div className="w-full max-w-xs flex flex-col gap-4 items-start justify-start mb-3" id='first'>
+								{facility_details.map((ct, i) => (
+									<>
+
+										<Select
+											key={i}
+											className="w-full max-w-xs  border border-gray-400"
+											ref={ct.ref}
+											styles={{
+												control: (baseStyles) => ({
+													...baseStyles,
+													backgroundColor: 'transparent',
+													outLine: 'none',
+													border: 'none',
+													outLine: 'none',
+													textColor: 'transparent',
+													padding: 0,
+													height: '4px'
+												}),
+
+											}}
+
+											name={ct.name}
+											options={
+												(() => {
+													let opts = [...Array.from(ct.array || [],
+														fltopt => {
+															if (fltopt.id != null && fltopt.id.length > 0) {
+																return {
+																	value: fltopt.id, label: fltopt.name
+																}
+															}
+														})]
+													return opts
+												})()
+											}
+											placeholder={`Select ${ct.label}`}
+											onChange={sl => {
+												let nf = {}
+												if (sl && sl !== null && typeof sl === 'object' && !Array.isArray(sl)) {
+													nf[ct.label] = sl.value
+												} else {
+													delete nf[ct.label]
+												}
+												ct.label == 'county' && sl?.value !== undefined && getUnits('sub_counties', sl?.value)
+												ct.label == 'subcounty' && sl?.value !== undefined && getUnits('wards', sl?.value)
+											}}
+										/>
+									</>
+								))}
+
+								<div className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
 									<input
 										className='form-checkbox w-3 h-3'
-										ref={beds}
-                                        type="checkbox"
-                                        name='number_of_beds'
-                                        id='number_of_beds'
-                                    />
-									<label htmlFor={'Has Beds'} className="text-gray-600 capitalize text-sm ml-1">{'Has Beds'}</label>
-									
-									</div>
-									<div  className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
+
+										type="checkbox"
+										name='number_of_beds'
+										id='number_of_beds'
+									/>
+
+									<label htmlFor="number_of_beds" className="text-gray-600 capitalize text-sm ml-1">{'Has Beds'}</label>
+
+
+
+								</div>
+								<div className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
 									<input
 										className='form-checkbox w-3 h-3'
-										ref={cots}
-                                        type="checkbox"
-                                        name='number_of_cots'
-                                        id='number_of_cots'
-                                    />
-									<label htmlFor={'Has Cots'} className="text-gray-600 capitalize text-sm ml-1">{'Has Cots'}</label>
-									
-									</div>
+
+										type="checkbox"
+										name='number_of_cots'
+										id='number_of_cots'
+									/>
+
+									<label htmlFor="number_of_cots" className="text-gray-600 capitalize text-sm ml-1">{'Has Cots'}</label>
+
+
 								</div>
-								
 							</div>
 
-							&nbsp;
-							<div className="card col-span-6 md:col-span-2 flex flex-col items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-gray-50" style={{ minHeight: '50px' }}>
-								<h2>Availability</h2> &nbsp;
-								<div  className="w-full max-w-xs flex flex-col items-start gap-2 justify-start mb-3" id='first'>
-									<div  className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
+						</div>
+
+
+						<div className="card col-span-6 md:col-span-2 flex flex-col gap-4 items-start justify-start p-3  shadow-lg border border-gray-300/70 bg-blue-50" style={{ minHeight: '50px' }}>
+							<h2>Availability</h2>
+							<div className="w-full max-w-xs flex flex-col gap-3 items-start justify-start mb-3" id='first'>
+								<div className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
 									<input
 										className='form-checkbox w-3 h-3'
-										ref={available_holiday}
-                                        type="checkbox"
-                                        name='available_holiday'
-                                        id='available_holiday'
-                                    />
-									<label htmlFor={'Open Public Holidays '} className="text-gray-600 capitalize text-sm ml-1">{'Open Public Holidays '}</label>
-									
-									</div>
-									<div  className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
+
+										type="checkbox"
+										name='available_holiday'
+										id='available_holiday'
+									/>
+
+									<label htmlFor={'available_holiday'} className="text-gray-600 capitalize text-sm ml-1">{'Open Public Holidays'}</label>
+
+
+								</div>
+								<div className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
 									<input
 										className='form-checkbox w-3 h-3'
-										ref={available_weekends}
-                                        type="checkbox"
-                                        name='available_weekends'
-                                        id='available_weekends'
-                                    />
-									<label htmlFor={'Open Weekends '} className="text-gray-600 capitalize text-sm ml-1">{'Open Weekends '}</label>
-									
-									</div>
-									<div  className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
+
+										type="checkbox"
+										name='available_weekends'
+										id='available_weekends'
+									/>
+
+									<label htmlFor={'available_weekends'} className="text-gray-600 capitalize text-sm ml-1">{'Open Weekends'}</label>
+
+								</div>
+								<div className="w-full max-w-xs  flex-col items-start justify-start mb-3" id='first'>
 									<input
 										className='form-checkbox w-3 h-3'
-										ref={available_24hrs}
-                                        type="checkbox"
-                                        name='available_24hrs'
-                                        id='available_24hrs'
-                                    />
-									<label htmlFor={'Open 24 Hours '} className="text-gray-600 capitalize text-sm ml-1">{'Open 24 Hours '}</label>
-									
-									</div>
+
+										type="checkbox"
+										name='available_24hrs'
+										id='available_24hrs'
+									/>
+
+									<label htmlFor={'available_24hrs'} className="text-gray-600 capitalize text-sm ml-1">{'Open 24 Hours '}</label>
+
 
 								</div>
-								
+
 							</div>
 
-							&nbsp;
-							<div className='flex flex-row gap-4'> 
-								<button
-									type="submit"
-									className="bg-blue-500 border-1 border-black text-black flex items-center justify-center px-4 py-1 "
-								>
-									<SearchIcon className="w-5 h-5" /> Search
-								</button>  
-								<button
-									type="button"
-									className="bg-gray-100 border-1 border-black text-black flex items-center justify-center px-4 py-1 "
-									onClick={()=>{
-										setDrillDown({})
-										name.current?.value ='';
-										code.current?.value='';
-										allfacilities.current?.value ='';
-										county.current?.select?.clearValue();
-										subcounty.current?.select.clearValue();
-										ward.current?.select.clearValue();
-										constituency.current?.select.clearValue();
-										facilityservice.current?.select.clearValue();
-										facilitytype.current?.select.clearValue();
-										operationstatus.current?.select.clearValue();
-										facilityowner.current?.select.clearValue();
-										ownertype.current?.select.clearValue();
-										servicecategory.current?.select.clearValue();
-										beds.current?.checked=false; 
-										cots.current?.checked=false; 
-										available_holiday.current?.checked=false; 
-										available_24hrs.current?.checked=false;
-										available_weekends.current?.checked=false;
-
-									}}
-								>Reset
-								</button>  
-							</div>                       
-							</form>
-                    </div>
-
-                     {/* Main body */}
+						</div>
+
+
+
+					</form>
+
+					{/* <pre>
+						{JSON.stringify(facilities, null, 2)}
+					</pre> */}
+
+
+					{/* Main body */}
 					{/* <div className='col-span-5 md:col-span-4 flex flex-col items-center gap-4 mt-2 order-last md:order-none'> */}
-					<div className="col-span-6 border border-blue-600  md:col-span-4 flex flex-col gap-4 order-last md:order-none"> {/* CHANGED colspan */}
-					    {/* <div className='mx-4 float-right'>
-							 
-						    {viewAll && <h5 className="text-lg font-medium text-gray-800 float-right">
-                                {facilities.count && facilities?.count > 0 && <small className="text-gray-500 ml-2 text-base">{facilities?.start_index || 0} - {facilities?.end_index || 0} of {facilities?.count || 0} </small>}
-                            </h5>}
-						</div> */}
+					<div className={`${(Array.isArray(facilities) && facilities?.length == 0) || (!formError || !submitting) && 'p-4'} col-span-6 bg-blue-50 shadow-md md:col-span-4 flex flex-col gap-4 order-last md:order-none`}> {/* CHANGED colspan */}
+
+						{
+							formError && <Alert severity='error' className='w-full border-2 border-red-500 rounded-none'>{formError}</Alert>
+						}
+
+
+						{
+							submitting && <Alert severity='info' className='w-full border-2 border-blue-500 rounded-none'>Loading...</Alert>
+						}
+
+
 						<div className='flex flex-col justify-center items-center  w-full '>
 							{/* <pre>{JSON.stringify(facilities[0], null, 2)}</pre> */}
 
 							{viewAll && facilities?.results && facilities?.results.length > 0 ? (
 								facilities?.results.map((hf, index) => (
 									<div
-										key={hf.id}
-										className='px-1 md:px-3 grid grid-cols-8 gap-3 border-b border-blue-600 py-4 hover:bg-gray-50 w-full'>
+										key={index}
+										className='px-1 md:px-3 grid grid-cols-8 gap-4 border-b border-blue-600 py-4 hover:bg-gray-50 w-full'>
 										<div className='col-span-8 md:col-span-4 flex flex-col gap-1 group items-center justify-start text-left'>
 											<h3 className='text-2xl w-full'>
 												<a
@@ -535,18 +714,17 @@ const Home = (props) => {
 											</p>
 											<p className='text-sm text-gray-600 w-full flex gap-2 items-center'>
 
-											{(hf?.facility_type_category) ? <span className={"shadow-sm leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 text-black"}>{hf?.facility_type_category}</span> : ""}
+												{(hf?.facility_type_category) ? <span className={"shadow-sm leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 text-black"}>{hf?.facility_type_category}</span> : ""}
 											</p>
 											<p className='text-sm text-gray-600 w-full flex gap-2 items-center'>
 
-										    {(hf?.facility_type_name) ? <span className={"shadow-sm leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 text-black"}>{hf?.facility_type_name}</span> : ""}
+												{(hf?.facility_type_name) ? <span className={"shadow-sm leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 text-black"}>{hf?.facility_type_name}</span> : ""}
 											</p>
 
-											<div className='text-base grid grid-cols-2 md:grid-cols-4 items-center justify-start gap-3 w-full'>
+											<div className='text-base grid grid-cols-2 md:grid-cols-4 items-center justify-start gap-4 w-full'>
 												<div className='flex flex-col items-start justify-start gap-0 leading-none'>
-													<label className='text-xs text-gray-500'>
-														County:
-													</label>
+
+
 													<span>
 														{hf.facility_county ||
 															hf.county_name ||
@@ -554,9 +732,8 @@ const Home = (props) => {
 													</span>
 												</div>
 												<div className='flex flex-col items-start justify-start gap-0 leading-none'>
-													<label className='text-xs text-gray-500'>
-														Sub-county:
-													</label>
+
+
 													<span>
 														{hf.facility_subcounty ||
 															hf.sub_county_name ||
@@ -564,13 +741,12 @@ const Home = (props) => {
 													</span>
 												</div>
 												<div className='flex flex-col items-start justify-start gap-0 leading-none'>
-													<label className='text-xs text-gray-500'>Ward:</label>
+
 													<span>{hf.ward_name || 'N/A'}</span>
 												</div>
 												<div className='flex flex-col items-start justify-start gap-0 leading-none'>
-													<label className='text-xs text-gray-500'>
-														Constituency:
-													</label>
+
+
 													<span>
 														{hf.constituency_name ||
 															hf.constituency_name ||
@@ -579,62 +755,58 @@ const Home = (props) => {
 												</div>
 											</div>
 										</div>
-										<div className='col-span-8 md:col-span-3 flex flex-wrap items-center gap-3 text-lg'>
-										{(hf?.operational || hf?.operation_status_name) ? <span className={"shadow-sm leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 text-black"}>Operational</span> : ""}
+										<div className='col-span-8 md:col-span-3 flex flex-wrap items-center gap-4 text-lg'>
+											{(hf?.operational || hf?.operation_status_name) ? <span className={"shadow-sm leading-none whitespace-nowrap text-sm  py-1 px-2 bg-blue-200 text-black"}>Operational</span> : ""}
 										</div>
 										<div className='col-span-8 md:col-span-1 flex flex-wrap items-center gap-4 text-lg pt-3 md:pt-0 justify-around md:justify-end'>
 										</div>
 									</div>
 								))
 							) : (
-								<div className='w-full flex items-center justify-start gap-2 bg-yellow-100 border font-medium  border-yellow-300 p-3'>
-									<span className='text-base text-gray-700'>
-										No facilities found
-									</span>
-								</div>
+								<>{!formError && !submitting && <Alert severity='warning' className='w-full border-2 border-yellow-500 rounded-none'>Could not find facility</Alert>}</>
 							)}
 							{viewAll && facilities?.results && facilities?.results.length >= 30 && (
 								<ul className='list-none flex p-2 flex-row gap-2 w-full items-center my-2'>
 									<li className='text-base text-gray-600'>
-		
+
 										<a
 											href={
-												(() => 
-												props.path.includes('?page') ?
-												props.path.replace(/\?page=\d+/,`?page=${facilities?.current_page}`)
-												:
-												props.path.includes('?q') && props.path.includes('&page') ?
-												props.path.replace(/&page=\d+/, `&page=${facilities?.current_page}`)
-												:
-												props.path.includes('?q') ?
-												`${props.path}&page=${facilities?.current_page}`                                    
-												:
-												`${props.path}?page=${facilities?.current_page}`
-											)()
+												(() =>
+													props.path.includes('?page') ?
+														props.path.replace(/\?page=\d+/, `?page=${facilities?.current_page}`)
+														:
+														props.path.includes('?q') && props.path.includes('&page') ?
+															props.path.replace(/&page=\d+/, `&page=${facilities?.current_page}`)
+															:
+															props.path.includes('?q') ?
+																`${props.path}&page=${facilities?.current_page}`
+																:
+																`${props.path}?page=${facilities?.current_page}`
+												)()
 											}
 											className='text-gray-400 font-semibold p-2 hover:underline active:underline focus:underline'>
 											{facilities?.current_page}
 										</a>
 									</li>
 									{facilities?.near_pages &&
-										facilities?.near_pages.map((page) => (
-											<li key={page} className='text-base text-gray-600'>
+										facilities?.near_pages.map((page, i) => (
+											<li key={i} className='text-base text-gray-600'>
 
 												<a
 													href={
-														(() => 
-                                                            props.path.includes('?page') ?
-                                                            props.path.replace(/\?page=\d+/,`?page=${page}`)
-                                                            :
-                                                            props.path.includes('?q') && props.path.includes('&page') ?
-                                                            props.path.replace(/&page=\d+/, `&page=${page}`)
-                                                            :
-                                                            props.path.includes('?q') ?
-                                                            `${props.path}&page=${page}`
-                                                            :
-                                                            `${props.path}?page=${page}`
-                   
-                                                        )()
+														(() =>
+															props.path.includes('?page') ?
+																props.path.replace(/\?page=\d+/, `?page=${page}`)
+																:
+																props.path.includes('?q') && props.path.includes('&page') ?
+																	props.path.replace(/&page=\d+/, `&page=${page}`)
+																	:
+																	props.path.includes('?q') ?
+																		`${props.path}&page=${page}`
+																		:
+																		`${props.path}?page=${page}`
+
+														)()
 													}
 													className='text-blue-800 p-2 hover:underline active:underline focus:underline'>
 													{page}
@@ -644,12 +816,12 @@ const Home = (props) => {
 									<li className='text-sm text-gray-400 flex'>
 										<DotsHorizontalIcon className='h-3' />
 									</li>
-									
+
 								</ul>
 							)}
 						</div>
 					</div>
-					
+
 				</div>
 			</MainLayout>
 		</div>
@@ -683,7 +855,7 @@ Home.getInitialProps = async (ctx) => {
 	};
 
 	const fetchData = async (token) => {
-		let url = API_URL +`/facilities/material/?fields=id,code,name,regulatory_status_name,facility_type_name,owner_name,county,constituency,ward_name,keph_level,operation_status_name`
+		let url = API_URL + `/facilities/material/?fields=id,code,name,regulatory_status_name,facility_type_name,owner_name,county,constituency,ward_name,keph_level,operation_status_name`
 		let query = { searchTerm: '' };
 		if (ctx?.query?.q) {
 			query.searchTerm = ctx.query.q;