From e7251a69bc5ac29eb6ac8377c2e0879c37c9ccf0 Mon Sep 17 00:00:00 2001
From: eric <erotush77@gmail.com>
Date: Thu, 7 Mar 2024 17:57:22 +0300
Subject: [PATCH] Updated the wide view port UI for all the pages; and fixed
 the facility edit form issue

---
 components/Forms/BasicDetailsForm.js          |  12 +-
 components/Forms/RegulationForm.js            |   2 +-
 .../Forms/formComponents/EditListWithCount.js |  14 +-
 package.json                                  |   1 +
 pages/account.js                              |   2 +-
 pages/admin_offices/add.js                    |   2 +-
 pages/admin_offices/edit/[id].js              |   2 +-
 pages/admin_offices/index.js                  |   2 +-
 pages/community-units/add.js                  |   2 +-
 pages/facilities/[id].js                      |  12 +-
 pages/facilities/edit/[id].js                 | 537 ++++++++++--------
 pages/facilities/facility_changes/[id].js     |   2 +-
 pages/facilities/index.js                     |  13 +-
 pages/facilities/regulate/[id].js             |   6 +-
 pages/index.js                                |   2 +-
 pages/reports/index.js                        |   2 +-
 pages/reports/officers_in_charge.js           |   2 +-
 pages/system_setup/index.js                   |   2 +-
 pages/user/add.js                             |   2 +-
 pages/user/edit/[id].js                       |   2 +-
 pages/user/groups/add.js                      |   4 +-
 pages/user/groups/edit/[id].js                |   4 +-
 pages/user/groups/index.js                    |   4 +-
 pages/user/index.js                           |   2 +-
 pnpm-lock.yaml                                |  12 +
 25 files changed, 350 insertions(+), 297 deletions(-)

diff --git a/components/Forms/BasicDetailsForm.js b/components/Forms/BasicDetailsForm.js
index dcd3d4c2..c32f9950 100644
--- a/components/Forms/BasicDetailsForm.js
+++ b/components/Forms/BasicDetailsForm.js
@@ -545,15 +545,16 @@ export function BasicDeatilsForm({ editMode }) {
   useEffect(() => {
 
     // console.log({facility: options?.data})
-    async function updateFacilityTypeDetailOptions() {
+    async function updateFacilityTypeDetailOptions(e) {
       try {
-        const facilityTypeDetails = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_types_details/?is_parent=false&parent=${e.target.value}`, {
+        const facilityTypeDetails = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_types_details/?is_parent=false`, {
           headers: {
             'Accept': 'application/json',
             'Authorization': `Bearer ${options?.token}`
           }
         })
 
+
         const filteredFacilityType = (await facilityTypeDetails.json())?.results
 
         if (!filteredFacilityType) throw Error('Unable to Fetch Facility Type Details')
@@ -571,7 +572,7 @@ export function BasicDeatilsForm({ editMode }) {
 
       }
       catch (e) {
-        console.error(e.message)
+        console.error(e?.message)
       }
     }
 
@@ -1582,9 +1583,10 @@ export function BasicDeatilsForm({ editMode }) {
           </label>
 
           <input
-            type='file'
+            type={editMode ? 'text' : 'file' }
             name='facility_checklist_document'
-            defaultValue={options?.data?.facility_checklist_document ?? ''}
+            disabled={editMode}
+            defaultValue={`Checklist File ${options?.data?.facility_checklist_document?.url ?? 'missing'}`}
             className='flex-none w-full bg-transparent  p-2 flex-grow border placeholder-gray-500 border-gray-400 rounded focus:shadow-none focus:border-black outline-none'
           />
 
diff --git a/components/Forms/RegulationForm.js b/components/Forms/RegulationForm.js
index afc2d290..5320eaae 100644
--- a/components/Forms/RegulationForm.js
+++ b/components/Forms/RegulationForm.js
@@ -302,7 +302,7 @@ export function RegulationForm() {
                              !hideLicenseNumber &&
                             <div className="w-full flex flex-col items-start justify-start gap-1 mb-3">
                                 <label htmlFor="license_number" className="text-gray-600 bg-transparent capitalize text-sm">License Number</label>
-                                <Field type="text" name="license_number" className="flex-none w-full bg-transparent p-2 flex-grow border placeholder-gray-500 border-gray-400 rounded focus:shadow-none focus:border-black outline-none" />
+                                <Field type="text" name="license_number" className="flex-none  w-full bg-transparent p-2 flex-grow border placeholder-gray-500 border-gray-400 rounded focus:shadow-none focus:border-black outline-none" />
                             </div>
                             }
 
diff --git a/components/Forms/formComponents/EditListWithCount.js b/components/Forms/formComponents/EditListWithCount.js
index 36aa32e1..cb9953ab 100644
--- a/components/Forms/formComponents/EditListWithCount.js
+++ b/components/Forms/formComponents/EditListWithCount.js
@@ -455,8 +455,8 @@ function EditListWithCount(
                     {
                     showItemCategory &&
                     <ul className='max-h-96 overflow-auto border-r border-l border-b border-gray-500'>
-                        {categoryOptions.map(({ label, value, catcount }) => (
-                            <div key={value}
+                        {categoryOptions.map(({ label, value, catcount }, i) => (
+                            <div key={i}
                                 className='card bg-gray-50 shadow-md p-2 group hover:bg-gray-500 hover:text-gray-50 hover:cursor-pointer'
                             >
                                 <li
@@ -464,7 +464,7 @@ function EditListWithCount(
                                     onClick={() => {
                                         filterSpecialities(value)
                                     }}
-                                    key={value}>{label}</li>
+                                    >{label}</li>
                                 <span>({catcount} selected)</span>
                                 <hr className='border-xs boredr-gray-200 group-hover:border-gray-500'></hr>
                             </div>
@@ -489,9 +489,9 @@ function EditListWithCount(
                             <tbody className='bg-gray-50 shadow-md'>
                                 {specialities.length === 0 && <tr><td colSpan={3} className="text-center">{`No ${itemsCategoryName.includes('infrastructure') ? 'infrastructure' : 'specialities'} found`}</td></tr>}
 
-                                {specialities.map((row) => (
+                                {specialities.map((row, i) => (
 
-                                    <tr key={row?.id} >
+                                    <tr key={i} >
                                         <td className=" px-1 py-1">
                                             <label className="w-full p-2" >{row?.name}</label>
                                         </td>
@@ -549,9 +549,9 @@ function EditListWithCount(
                         <tbody className='bg-gray-50 shadow-md'>
                             {selectedRows.length === 0 && <tr><td colSpan={3} className="text-center">No specialities found</td></tr>}
                             {/* {selectedRows.pop()} */}
-                            {selectedRows.map((row) => {
+                            {selectedRows.map((row, i) => {
                                 // if(row.name !== "Vaccine Carriers" || row.name !== "Public Health Technician"){
-                                return ( <tr>
+                                return ( <tr key={i}>
                                         <td className="border border-gray-300 px-1 py-1">{row?.sname}</td>
                                        {row?.iscategoryvisible ? <td className="border border-gray-300 px-1 py-1">{row?.category_name}</td> :null }
                                         <td className="border border-gray-300 px-1 py-1">Yes</td>
diff --git a/package.json b/package.json
index 5ffaae99..f5cfe52e 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "react-datepicker": "^4.16.0",
     "react-dom": "^18.2.0",
     "react-dual-listbox": "^5.0.2",
+    "react-error-boundary": "^4.0.13",
     "react-highcharts": "^16.1.0",
     "react-icons": "^4.10.1",
     "react-leaflet": "^4.2.1",
diff --git a/pages/account.js b/pages/account.js
index c89d5369..4f569cb7 100644
--- a/pages/account.js
+++ b/pages/account.js
@@ -163,7 +163,7 @@ const Account = () => {
                 <link rel="icon" href="/favicon.ico" />
             </Head>
 
-            <MainLayout className="w-full grid grid-cols-5 gap-3 md:mt-3 mb-12">
+            <MainLayout className="w-full  md:w-[85%] md:mx-auto  grid grid-cols-5 gap-3 md:mt-3 mb-12">
             {open && 
 			<Modal
 				aria-labelledby="transition-modal-title"
diff --git a/pages/admin_offices/add.js b/pages/admin_offices/add.js
index 00e3dd30..31cca0a6 100644
--- a/pages/admin_offices/add.js
+++ b/pages/admin_offices/add.js
@@ -88,7 +88,7 @@ function AddAdminOffice(props) {
     if(isClient){
     return (
         <MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
-            <div className="w-full grid grid-cols-5 gap-4 px-1 md:px-4 py-2 h-auto mt-8 my-4">
+            <div className="w-full  md:w-[85%] md:mx-auto px-4 md:px-0 grid grid-cols-5 gap-4  py-2 h-auto mt-8 my-4">
                 <div className="col-span-5 flex flex-col gap-3 md:gap-5 px-4">
                     <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-3">
                         <div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
diff --git a/pages/admin_offices/edit/[id].js b/pages/admin_offices/edit/[id].js
index be87145a..cdc8ccac 100644
--- a/pages/admin_offices/edit/[id].js
+++ b/pages/admin_offices/edit/[id].js
@@ -149,7 +149,7 @@ function EditAdminOffice(props) {
 
     return (
         <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="w-full  md:w-[85%] md:mx-auto grid grid-cols-5 gap-4 px-4 md:px-0 py-2 my-4">
                 <div className="col-span-5 flex flex-col gap-3 md:gap-5 px-4">
                     <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-3">
                         <div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
diff --git a/pages/admin_offices/index.js b/pages/admin_offices/index.js
index 82d4194c..7f543378 100644
--- a/pages/admin_offices/index.js
+++ b/pages/admin_offices/index.js
@@ -108,7 +108,7 @@ function AdminOffices(props) {
                 <link rel="icon" href="/favicon.ico" />
             </Head>
             <MainLayout isLoading={false} isFullWidth={false}>
-                <div className="w-full grid grid-cols-7 mt-8 gap-4 p-1 md:mx-4 my-2">
+                <div className="w-full  md:w-[85%] px-4 md:px-0 grid grid-cols-7 mt-8 gap-4 p-1 md:mx-4 my-2">
                     <div className="col-span-7 flex flex-col gap-x-1">
                         <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-1">
                             <div className="flex flex-row items-center justify-between gap-x-2 gap-y-0 text-sm md:text-base py-1">
diff --git a/pages/community-units/add.js b/pages/community-units/add.js
index a4927224..d67d6554 100644
--- a/pages/community-units/add.js
+++ b/pages/community-units/add.js
@@ -1054,7 +1054,7 @@ function AddCommunityUnit(props) {
 
 			{/* Main Layout */}
 			<MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
-				<div className='w-full h-full grid grid-cols-5 gap-4 px-0 md:px-4 py-2 my-4'>
+				<div className='w-full md:w-[85%] md:mx-auto h-full grid grid-cols-5 gap-4 px-0 md:px-4 py-2 my-4'>
 					{/* Breadcrumbs */}
 					<div className='col-span-5 flex flex-col gap-3 md:gap-5 px-0'>
 						<div className='flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-3'>
diff --git a/pages/facilities/[id].js b/pages/facilities/[id].js
index 9621fac3..e3d435d6 100644
--- a/pages/facilities/[id].js
+++ b/pages/facilities/[id].js
@@ -636,17 +636,7 @@ const Facility = (props) => {
                       
                       <button
                         onClick={() => {
-                          // /api/facilities/facility_detail_report/b2f3c373-40ef-4ca9-bc9c-4237eb9a06b2/?access_token=token
-
-                            // fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_detail_report/${facility?.id}/?access_token=${props['3']?.token}`,
-                            //   {
-                            //     'headers': {
-                            //       "Accept": "application/json",
-                            //       'cache-control': "no-cache",
-                            //       "Authorization": "Bearer " + props['3']?.token
-                            //     }
-                            //   })
-                          
+                                               
                             router.push(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_detail_report/${facility?.id}/?access_token=${props['3']?.token}`)
                         }}
                         className="p-2 text-center -md font-semibold text-base  text-white bg-gray-600  rounded"
diff --git a/pages/facilities/edit/[id].js b/pages/facilities/edit/[id].js
index 2d313014..f52309eb 100644
--- a/pages/facilities/edit/[id].js
+++ b/pages/facilities/edit/[id].js
@@ -12,214 +12,253 @@ import { useAlert } from "react-alert";
 // import { all } from "underscore";
 import { UserContext } from "../../../providers/user";
 import { KeyboardArrowRight, KeyboardArrowDown } from "@mui/icons-material"
+import { withErrorBoundary } from 'react-error-boundary'
+import Backdrop from '@mui/material/Backdrop';
+import Alert from '@mui/material/Alert'
+
 
 
 export const FacilityUpdatesContext = createContext(null)
 
-export default function EditFacility(props) {
-	const userCtx = React.useContext(UserContext);
-	const [user, setUser] = useState(userCtx);
+function FallBack() {
+
+	const [isOpen, setIsOpen] = useState(false)
+
+	return (
+		<Backdrop
+			sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'start', paddingTop: '170px' }}
+			open={isOpen}
+			onClick={() => {
+				setIsOpen(!isOpen)
+			}}
+		>
+			<Alert className="w-auto h-auto md:mx-0 mx-5" severity="error">An Error Occured When Loading Page</Alert>
+		</Backdrop>
+	)
+}
 
-	const filters = [];
-	const [khisSynched, setKhisSynched] = useState(false);
-	const [facilityFeedBack, setFacilityFeedBack] = useState([])
-	const [pathId, setPathId] = useState('')
-	const [allFctsSelected, setAllFctsSelected] = useState(false);
-	const [title, setTitle] = useState('');
-	const [isClient, setIsClient] = useState(false)
+const EditFacility = withErrorBoundary(
+	(props) => {
+		const userCtx = React.useContext(UserContext);
+		const [user, setUser] = useState(userCtx);
 
-	const [facilityUpdateData, setFacilityUpdateData] = useState(null);
-	const [isSavedChanges, setIsSavedChanges] = useState(false);
-	const [isMenuOpen, setIsMenuOpen] = useState(false)
+		const filters = [];
+		const [khisSynched, setKhisSynched] = useState(false);
+		const [facilityFeedBack, setFacilityFeedBack] = useState([])
+		const [pathId, setPathId] = useState('')
+		const [allFctsSelected, setAllFctsSelected] = useState(false);
+		const [title, setTitle] = useState('');
+		const [isClient, setIsClient] = useState(false)
 
+		const [facilityUpdateData, setFacilityUpdateData] = useState(null);
+		const [isSavedChanges, setIsSavedChanges] = useState(false);
+		const [isMenuOpen, setIsMenuOpen] = useState(false)
 
-	const router = useRouter();
-	const alert = useAlert();
 
-	const { facility_updated_json } = facilityUpdateData ?? {
-		updated: new Date(),
-		updated_by: "",
-		facility_updated_json: [],
-		created_by_name: "",
-		code:null,
-		facilityId:null
-	  };
+		const router = useRouter();
+		const alert = useAlert();
 
+		const { facility_updated_json } = facilityUpdateData ?? {
+			updated: new Date(),
+			updated_by: "",
+			facility_updated_json: [],
+			created_by_name: "",
+			code: null,
+			facilityId: null
+		};
 
 
 
-	useEffect(() => {
 
-		// console.log({allOptions: props})
+		useEffect(() => {
 
-		setUser(userCtx)
-		if(user?.id === 6){
-			router.push('/auth/login')
-		}
-		
-		setIsClient(true)
-
-	}, [])
-
-	if (isClient) {
-		return (
-			<>
-				<Head>
-					<title>KMHFR - Edit Facility</title>
-					<link rel="icon" href="/favicon.ico" />
-					<link rel="stylesheet" href="/assets/css/leaflet.css" />
-
-				</Head>
-
-				<MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
-					<div className="w-full md:w-[85%] md:mx-auto px-4 md:px-0 grid grid-cols-1 md:grid-cols-5 h-full gap-4">
-						<div className="md:col-span-5 col-span-1 flex flex-col gap-3 md:gap-5 mb-4">
-							<div className="flex flex-wrap items-center  justify-between gap-2 text-sm md:text-base py-3">
-								<div className="flex flex-row mt-8 items-center justify-between gap-2 text-sm md:text-base py-3">
-									<Link className="text-gray-800" href="/dashboard">Home</Link> {'/'}
-									<Link className="text-gray-800" href="/facilities">Facilities</Link> {'/'}
-									<span className="text-gray-500">Edit Facility</span>
-								</div>
-							</div>
+			// console.log({allOptions: props})
 
-							<div className={"col-span-1 md:col-span-5 flex flex-col items-start w-full  border border-gray-600  text-black p-4 md:divide-x md:divide-gray-200z border-l-8 " + (true ? "border-gray-600" : "border-red-600")}>
-								<h2  className='flex items-center text-xl text-start font-bold text-black capitalize gap-2'>
-									 <span className="cursor-pointer hover:text-gray-800" onClick={() => router.push(`/facilities/${props?.data?.id}`)}>Editing  {props?.data?.official_name}</span> 
-								</h2>
-								<h3 className='text-gray-900 font-semibold '>{props?.data?.facility_type_name ?? ''}</h3>
-								<h4 className='text-gray-700'>{`# ${props?.data?.code ?? 'NO_CODE'}`}</h4>
-							</div>
+			setUser(userCtx)
+			if (user?.id === 6) {
+				router.push('/auth/login')
+			}
 
-						</div>
+			setIsClient(true)
+
+		}, [])
+
+		if (isClient) {
+
+			// return <pre className='font-semibold'>
+			// 		{
+			// 			JSON.stringify(props?.data?.facility_checklist_document, null, 2)
+			// 		}
+			// 		</pre>
+			return (
+				<>
+					<Head>
+						<title>KMHFR - Edit Facility</title>
+						<link rel="icon" href="/favicon.ico" />
+						<link rel="stylesheet" href="/assets/css/leaflet.css" />
+
+					</Head>
+
+					<MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
+						<div className="w-full md:w-[85%] md:mx-auto px-4 md:px-0 grid grid-cols-1 md:grid-cols-5 h-full gap-4">
+							<div className="md:col-span-5 col-span-1 flex flex-col gap-3 md:gap-5 mb-4">
+								<div className="flex flex-wrap items-center  justify-between gap-2 text-sm md:text-base py-3">
+									<div className="flex flex-row mt-8 items-center justify-between gap-2 text-sm md:text-base py-3">
+										<Link className="text-gray-800" href="/dashboard">Home</Link> {'/'}
+										<Link className="text-gray-800" href="/facilities">Facilities</Link> {'/'}
+										<span className="text-gray-500">Edit Facility</span>
+									</div>
+								</div>
 
+								<div className={"col-span-1 md:col-span-5 flex flex-col items-start w-full  border border-gray-600  text-black p-4 md:divide-x md:divide-gray-200z border-l-8 " + (true ? "border-gray-600" : "border-red-600")}>
+									<h2 className='flex items-center text-xl text-start font-bold text-black capitalize gap-2'>
+										<span className="cursor-pointer hover:text-gray-800" onClick={() => router.push(`/facilities/${props?.data?.id}`)}>Editing  {props?.data?.official_name}</span>
+									</h2>
+									<h3 className='text-gray-900 font-semibold '>{props?.data?.facility_type_name ?? ''}</h3>
+									<h4 className='text-gray-700'>{`# ${props?.data?.code ?? 'NO_CODE'}`}</h4>
+								</div>
 
-						
-						{/* Facility Side Menu Filters */}
-						<div className="hidden md:flex col-span-1">
+							</div>
 
-							<FacilitySideMenu
-								filters={filters}
-								states={[khisSynched, facilityFeedBack, pathId, allFctsSelected, title]}
-								stateSetters={[setKhisSynched, setFacilityFeedBack, setPathId, setAllFctsSelected, setTitle]} />
-						</div>
 
-						<button className='md:hidden relative p-2 border border-gray-800 rounded w-full self-start my-4' onClick={() => setIsMenuOpen(!isMenuOpen)}>
-							Facility Menu
-							{
-								!isMenuOpen &&
-								<KeyboardArrowRight className='w-8 aspect-square text-gray-800' />
-							}
 
-							{
-								isMenuOpen &&
-								<KeyboardArrowDown className='w-8 aspect-square text-gray-800' />
-							}
+							{/* Facility Side Menu Filters */}
+							<div className="hidden md:flex col-span-1">
 
-							{
-								isMenuOpen &&
 								<FacilitySideMenu
 									filters={filters}
 									states={[khisSynched, facilityFeedBack, pathId, allFctsSelected, title]}
 									stateSetters={[setKhisSynched, setFacilityFeedBack, setPathId, setAllFctsSelected, setTitle]} />
-							}
-						</button>
-
-
+							</div>
 
+							<button className='md:hidden relative p-2 border border-gray-800 rounded w-full self-start my-4' onClick={() => setIsMenuOpen(!isMenuOpen)}>
+								Facility Menu
+								{
+									!isMenuOpen &&
+									<KeyboardArrowRight className='w-8 aspect-square text-gray-800' />
+								}
 
+								{
+									isMenuOpen &&
+									<KeyboardArrowDown className='w-8 aspect-square text-gray-800' />
+								}
 
-						{isSavedChanges && facilityUpdateData ? (
-							// Display Changes to be updated
-						<div className="col-span-1 md:col-span-4 bg-gray-50 p-3 shadow-md flex flex-col items-center md:gap-3 gap-y-3"> 
+								{
+									isMenuOpen &&
+									<FacilitySideMenu
+										filters={filters}
+										states={[khisSynched, facilityFeedBack, pathId, allFctsSelected, title]}
+										stateSetters={[setKhisSynched, setFacilityFeedBack, setPathId, setAllFctsSelected, setTitle]} />
+								}
+							</button>
+
+							{isSavedChanges && facilityUpdateData ? (
+								// Display Changes to be updated
+								<div className="col-span-1 md:col-span-4 bg-gray-50 p-3 shadow-md flex flex-col items-center md:gap-3 gap-y-3">
+
+									<div className="flex flex-col justify-start w-full space-y-3">
+										<h2 className="text-2xl font-bold justify-center items-center md:ml-0 ml-4">
+											Updated details
+										</h2>
+										{/* Update Metadata */}
+										<div className="grid grid-cols-1 gap-y-2 grid-rows-1 md:flex justify-between md:space-x-4 w-full md:mx-0 mx-4">
+											<p className="text-base font-normal flex items-center gap-x-1">
+												Updates were made on {" "}
+												<span className="text-gray-900 font-semibold text-base ">
+													{
+														new Date(facilityUpdateData?.updated)
+															.toLocaleString()
+															.split(",")[0]
+													}
+												</span>
+												{" "}
+												by
+												{" "}
+												<span className="text-gray-900 font-semibold text-base ">
+													{facilityUpdateData?.created_by_name}
+												</span>
+											</p>
 
-							<div className="flex flex-col justify-start w-full space-y-3">
-								<h2 className="text-2xl font-bold justify-center items-center md:ml-0 ml-4">
-									Updated details
-								</h2>
-								{/* Update Metadata */}
-								<div className="grid grid-cols-1 gap-y-2 grid-rows-1 md:flex justify-between md:space-x-4 w-full md:mx-0 mx-4">
-									<p className="text-base font-normal flex items-center gap-x-1">
-										Updates were made on {" "}
-										<span className="text-gray-900 font-semibold text-base ">
 											{
-												new Date(facilityUpdateData?.updated)
-													.toLocaleString()
-													.split(",")[0]
+												facilityUpdateData?.code &&
+												<p className="text-base font-normal flex gap-x-1 ">
+													Facility Code:
+													{" "}
+													<span className="text-gray-900 font-semibold text-base ">
+														{facilityUpdateData?.code}
+													</span>
+												</p>
 											}
-										</span>
-										{" "}
-										by
-										{" "}
-										<span className="text-gray-900 font-semibold text-base ">
-											{facilityUpdateData?.created_by_name}
-										</span>
-									</p>
-
-								    {
-										facilityUpdateData?.code &&
-									<p className="text-base font-normal flex gap-x-1 ">
-										Facility Code:
-										{" "}
-										<span className="text-gray-900 font-semibold text-base ">
-											{facilityUpdateData?.code}
-										</span>
-									</p>
-									}
 
-									<span className="flex space-x-2">
-										<button
-											className="flex justify-center text-base font-semibold text-white bg-gray-500  py-1 px-2"
-											onClick={() => router.push(`/facilities/edit/${facilityUpdateData?.id}`)}
-										>
-											Edit
-										</button>
-										<button
-											className="flex justify-center text-base font-semibold text-white bg-gray-500  py-1 px-2"
-											onClick={() => {
-												if (isSavedChanges) {
-													alert.success("Facility updates saved successfully")
-												} else {
-													alert.error("Unable to save facility updates")
-												}
-												router.push("/facilities")
-											}}
-										>
-											Confirm Updates
-										</button>
-									</span>
+											<span className="flex space-x-2">
+												<button
+													className="flex justify-center text-base font-semibold text-white bg-gray-500  py-1 px-2"
+													onClick={() => router.push(`/facilities/edit/${facilityUpdateData?.id}`)}
+												>
+													Edit
+												</button>
+												<button
+													className="flex justify-center text-base font-semibold text-white bg-gray-500  py-1 px-2"
+													onClick={() => {
+														if (isSavedChanges) {
+															alert.success("Facility updates saved successfully")
+														} else {
+															alert.error("Unable to save facility updates")
+														}
+														router.push("/facilities")
+													}}
+												>
+													Confirm Updates
+												</button>
+											</span>
+										</div>
+
+										{/* Update Details */}
+
+										<FacilityUpdatesTable
+											facilityUpdatedJson={facility_updated_json}
+											originalData={props?.data}
+										/>
+									</div>
 								</div>
+							) : (
+
+								<FacilityUpdatesContext.Provider value={{
+									updatedSavedChanges: setIsSavedChanges,
+									updateFacilityUpdateData: setFacilityUpdateData
+								}} >
+									<FormOptionsContext.Provider value={props}>
+										<EditForm />
+									</FormOptionsContext.Provider>
+								</FacilityUpdatesContext.Provider>
+							)
+							}
+						</div>
+					</MainLayout >
+				</>
 
-								{/* Update Details */}
-
-								<FacilityUpdatesTable
-									facilityUpdatedJson={facility_updated_json}
-									originalData={props?.data}
-								/>
-							</div>
-							</div>
-						) : (
-
-							<FacilityUpdatesContext.Provider value={{
-								updatedSavedChanges:setIsSavedChanges,
-								updateFacilityUpdateData:setFacilityUpdateData
-							}} >
-								<FormOptionsContext.Provider value={props}>
-									<EditForm />
-								</FormOptionsContext.Provider>
-							</FacilityUpdatesContext.Provider>
-						)
-						}
-					</div>
-				</MainLayout >
-			</>
-
-		)
-	}
-	else {
-		return null;
+			)
+		}
+		else {
+			return null;
+		}
+	}, {
+
+	fallback: <Backdrop
+		sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'start', paddingTop: '170px' }}
+		open={true}
+	>
+		<Alert className="w-auto h-auto md:mx-0 mx-5" severity="error">An Error occured when loading page. <Link className="text-blue-700 hover:underline" href={`/facilities/`}>Go back to facilities</Link></Alert>
+	</Backdrop>,
+	onError: error => {
+		console.log("\nError Boundary: \n", error?.message)
 	}
 }
 
+)
+
+export default EditFacility
+
 
 EditFacility.getInitialProps = async (ctx) => {
 
@@ -274,28 +313,28 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_facilityTypeData) throw Error('Unable facility type data')
+								if (!_facilityTypeData) throw Error('Unable facility type data')
 
 
 								let facilityTypeData = (await _facilityTypeData.json())
 
-								facilityTypeData = Array.from(facilityTypeData?.results, ({id, name}) => {
-								return {
-									label: name,
-									value: id
-								}
-									
+								facilityTypeData = Array.from(facilityTypeData?.results, ({ id, name }) => {
+									return {
+										label: name,
+										value: id
+									}
+
 								})
 
-							
+
 
 								allOptions['facility_types'] = facilityTypeData;
-								
+
 
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 
 							break;
@@ -310,7 +349,7 @@ EditFacility.getInitialProps = async (ctx) => {
 										Accept: 'application/json',
 									},
 								})
-								
+
 								if (!_facilityTypeDetails) throw Error("Unable to fetch facility type details")
 
 
@@ -323,7 +362,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case 'owners':
@@ -339,16 +378,16 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_owners) throw new Error('Unable to fetch owners')
+								if (!_owners) throw new Error('Unable to fetch owners')
 
-								const owners = (await _owners.json())?.results 
+								const owners = (await _owners.json())?.results
 
 								allOptions['owners'] = owners
 
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 
 							break;
@@ -365,8 +404,8 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_owner_types) throw Error('Unable to fetch owner types')
-								
+								if (!_owner_types) throw Error('Unable to fetch owner types')
+
 								const owner_types = await _owner_types.json()
 
 
@@ -376,7 +415,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 
 							break;
@@ -392,9 +431,9 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_keph) throw Error('Unable to fetch keph')
+								if (!_keph) throw Error('Unable to fetch keph')
 
-								const keph = (await _keph.json()).results.map(({ id, name }) => ({ value: id, label: name })) 
+								const keph = (await _keph.json()).results.map(({ id, name }) => ({ value: id, label: name }))
 
 
 								allOptions["keph"] = keph
@@ -402,7 +441,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-							
+
 							}
 
 							break;
@@ -419,17 +458,17 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_facility_admission_status) throw Error('Unabe to fetch Faility type details')
+								if (!_facility_admission_status) throw Error('Unabe to fetch Faility type details')
 
 								const facility_admission_status = (await _facility_admission_status.json()).results.map(({ id, name }) => ({ value: id, label: name }))
 
 
-								allOptions["facility_admission_status"] =  facility_admission_status
+								allOptions["facility_admission_status"] = facility_admission_status
 
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case 'job_titles':
@@ -445,9 +484,9 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_job_titles) throw Error('Unable to fetch job titles')
+								if (!_job_titles) throw Error('Unable to fetch job titles')
 
-								const job_titles = (await _job_titles.json()).results.map(({ id, name }) => ({ value: id, label: name })) 
+								const job_titles = (await _job_titles.json()).results.map(({ id, name }) => ({ value: id, label: name }))
 
 
 								allOptions["job_titles"] = job_titles
@@ -455,7 +494,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case 'contact_types':
@@ -471,15 +510,15 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_contact_types) Error("Unable to Contact Types")
+								if (!_contact_types) Error("Unable to Contact Types")
 
-								const contact_types = (await _contact_types.json()).results.map(({ id, name }) => ({ value: id, label: name })) 
+								const contact_types = (await _contact_types.json()).results.map(({ id, name }) => ({ value: id, label: name }))
 								allOptions["contact_types"] = contact_types
 
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case 'facility_depts':
@@ -495,7 +534,7 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-							    if(!_faciilty_depts) throw Error("Unable to fetch facility Departments")
+								if (!_faciilty_depts) throw Error("Unable to fetch facility Departments")
 
 								const facility_depts = (await _faciilty_depts.json()).results.map(({ id, name, regulatory_body_name }) => ({ value: id, label: name, reg_body_name: regulatory_body_name }))
 
@@ -504,7 +543,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case 'regulating_bodies':
@@ -521,7 +560,7 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_regulating_bodies) throw Error("Unable to fetch reguating bodies")
+								if (!_regulating_bodies) throw Error("Unable to fetch reguating bodies")
 
 								const regulating_bodies = (await _regulating_bodies.json()).results.map(({ id, name }) => ({ value: id, label: name }))
 
@@ -530,7 +569,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.log(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case 'regulation_status':
@@ -546,7 +585,7 @@ EditFacility.getInitialProps = async (ctx) => {
 									},
 								})
 
-								if(!_regulation_status) throw Error("Unable to fetch Regulation Status")
+								if (!_regulation_status) throw Error("Unable to fetch Regulation Status")
 
 								const regulation_status = (await _regulation_status.json()).results.map(({ id, name }) => ({ value: id, label: name }))
 
@@ -555,7 +594,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case 'services':
@@ -571,7 +610,7 @@ EditFacility.getInitialProps = async (ctx) => {
 									}
 								})
 
-								if(!_services) throw Error("Unable to fetch services") 
+								if (!_services) throw Error("Unable to fetch services")
 
 								const services = (await _services.json()).results.map(({ id, name, category, category_name }) => ({ id, name, category, category_name }))
 
@@ -580,7 +619,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 
 							break;
@@ -597,7 +636,7 @@ EditFacility.getInitialProps = async (ctx) => {
 									}
 								})
 
-								if(!_infrastructure) throw Error("Unable to fetch infrstructure")
+								if (!_infrastructure) throw Error("Unable to fetch infrstructure")
 
 								const infrastructure = (await _infrastructure.json()).results.map(({ id, name, category_name, category }) => ({ id, name, category_name, category }))
 
@@ -606,7 +645,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.log(`Error fetching ${option}: `, err);
-							
+
 							}
 
 							break;
@@ -622,7 +661,7 @@ EditFacility.getInitialProps = async (ctx) => {
 									}
 								})
 
-								if(!_specialities) throw Error("Unable to fetch specialities")
+								if (!_specialities) throw Error("Unable to fetch specialities")
 
 								const specialities = (await _specialities.json()).results.map(({ id, name, category_name, category }) => ({ id, name, category_name, category }))
 
@@ -631,7 +670,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.log(`Error fetching ${option}: `, err);
-								
+
 							}
 
 							break;
@@ -649,17 +688,17 @@ EditFacility.getInitialProps = async (ctx) => {
 
 
 								const [_result] = (await _collection_date.json()).results;
-								if(_result && _result["collection_date"]){
+								if (_result && _result["collection_date"]) {
 									allOptions["collection_date"] = _result["collection_date"];
-								}else{
+								} else {
 									allOptions["collection_date"] = null;
 								}
-								
+
 
 							} catch (err) {
 								console.log(`Error fetching ${option}: `, err);
 								console.error(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 						case "facility_data":
@@ -674,11 +713,11 @@ EditFacility.getInitialProps = async (ctx) => {
 									}
 
 								);
-								
+
 								const facilityData = await _facility_data.json()
 
 								// console.log({facilityData: facilityData?.ward})
-							
+
 
 								if (facilityData) {
 
@@ -699,52 +738,52 @@ EditFacility.getInitialProps = async (ctx) => {
 										);
 
 										const wardData = await response.json();
-										
-										if(wardData){
 
-										const [lng, lat] =
-										wardData?.ward_boundary.properties.center.coordinates;
+										if (wardData) {
+
+											const [lng, lat] =
+												wardData?.ward_boundary.properties.center.coordinates;
 
-										allOptions["geolocation"] = {
+											allOptions["geolocation"] = {
 												geoJSON: JSON.parse(JSON.stringify(wardData?.ward_boundary)),
 												centerCoordinates: JSON.parse(
 													JSON.stringify([lat, lng])
 												)
 											}
-										
 
-									}
 
-										
-											try {
-												const response = await fetch(
-													`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_regulation_status/?facility=${facilityData?.id}/?format=json`,
-													{
-														headers: {
-															Authorization: 'Bearer ' + token,
-															Accept: 'application/json',
-														}
+										}
+
+
+										try {
+											const response = await fetch(
+												`${process.env.NEXT_PUBLIC_API_URL}/facilities/facility_regulation_status/?facility=${facilityData?.id}/?format=json`,
+												{
+													headers: {
+														Authorization: 'Bearer ' + token,
+														Accept: 'application/json',
 													}
-												);
-												const regulationData = await response.json();
-												
-												if (regulationData) {
+												}
+											);
+											const regulationData = await response.json();
+
+											if (regulationData) {
 												allOptions['facility_regulation_status'] = (await regulationData).results
-												
-											}
-											} catch (err) {
-												console.log(`Error fetching ${option}: `, err);
-											
+
 											}
-										
+										} catch (err) {
+											console.log(`Error fetching ${option}: `, err);
+
+										}
+
 									} catch (err) {
 										console.log(`Error fetching ${option}: `, err);
-										
+
 									}
 								}
 							} catch (err) {
 								console.log(`Error fetching ${option}: `, err);
-								
+
 							}
 
 							break;
@@ -773,7 +812,7 @@ EditFacility.getInitialProps = async (ctx) => {
 							}
 							catch (err) {
 								console.log(`Error fetching ${option}: `, err);
-								
+
 							}
 							break;
 
@@ -782,10 +821,10 @@ EditFacility.getInitialProps = async (ctx) => {
 
 
 				allOptions["token"] = token
-		
-				
+
+
 				// console.log("allOptions Log", allOptions)
-				return  allOptions
+				return allOptions
 
 
 			}
diff --git a/pages/facilities/facility_changes/[id].js b/pages/facilities/facility_changes/[id].js
index bd674aef..d680319c 100644
--- a/pages/facilities/facility_changes/[id].js
+++ b/pages/facilities/facility_changes/[id].js
@@ -34,7 +34,7 @@ export default function FacilityChanges({ facility }) {
     if (isClient) {
         return (
             <MainLayout>
-                <div className="w-full grid grid-cols-5 h-full my-24 gap-4">
+                <div className="w-full md:w-[85%] grid grid-cols-5 h-full my-24 gap-4">
                     {/* Facility Side Menu Filters */}
                     <div className="md:col-span-1 ">
                         <FacilitySideMenu
diff --git a/pages/facilities/index.js b/pages/facilities/index.js
index 8c2df04a..649495d3 100644
--- a/pages/facilities/index.js
+++ b/pages/facilities/index.js
@@ -114,6 +114,15 @@ function FacilityHome (props){
     }
 
     if(isClient){
+
+    // return (
+    //     <pre>
+    //         {
+    //             JSON.stringify(facilities, null , 2)// ({is_complete: facilities[0]?.is_complete, in_complete_details: facilities[0]?.in_complete_details}, null, 2)
+    //         }
+    //     </pre>
+    // )
+
     return (
         <>
             <Head>
@@ -561,7 +570,7 @@ function FacilityHome (props){
                                             facilities.map((facility, index) => (
                                                 <div key={index} 
                                                 title={`Incomplete Details : ${facility?.is_complete ? 'none' : facility?.in_complete_details}`}
-                                                className={`grid grid-cols-8 gap-2 border-b py-4 w-full ${!facility?.is_complete ? 'bg-yellow-50 border-yellow-500 hover:bg-gray-50' : 'bg-transparent border-gray-400 hover:border-yellow-100' }`}>
+                                                className={`grid grid-cols-8 gap-2 border-b py-4 w-full ${!facility?.is_complete && !facility?.in_complete_details ? 'bg-yellow-50 border-yellow-500 hover:bg-gray-50' : 'bg-transparent border-gray-400 hover:border-grat-400' }`}>
                                                     <div className="px-2 col-span-8 md:col-span-8 lg:col-span-6 flex flex-col group items-center justify-start text-left">
                                                         <h3 className="text-2xl font-semibold w-full">
                                                             <span onClick={() => router.push({pathname: `/facilities/${facility?.id}`, query: {qf: router.query.qf}})} className={`cursor-pointer ${facility?.is_complete ? 'hover:text-gray-600' : 'hover:text-yellow-600'} group-focus:text-gray-800 active:text-gray-800`} >
@@ -776,7 +785,7 @@ FacilityHome.getInitialProps = async (ctx) => {
 
     function fetchData(token) {
 
-        let url = `${process.env.NEXT_PUBLIC_API_URL}/facilities/material/?fields=id,code,official_name,facility_type_name,owner_name,county,sub_county,constituency_name,ward_name,updated,operation_status_name,sub_county_name,name,is_complete,in_complete_details,approved_national_level,has_edits,approved,rejected,keph_level` // ?fields=id,code,official_name,facility_type_name,owner_name,county,sub_county,constituency_name,ward_name,updated,operation_status_name,sub_county_name,name,is_complete,in_complete_details,approved_national_level,has_edits,approved,rejected,keph_level`
+        let url = `${process.env.NEXT_PUBLIC_API_URL}/facilities/facilities/?fields=id,code,official_name,facility_type_name,owner_name,county,sub_county,constituency_name,ward_name,updated,operation_status_name,sub_county_name,name,is_complete,in_complete_details,approved_national_level,has_edits,approved,rejected,keph_level` // ?fields=id,code,official_name,facility_type_name,owner_name,county,sub_county,constituency_name,ward_name,updated,operation_status_name,sub_county_name,name,is_complete,in_complete_details,approved_national_level,has_edits,approved,rejected,keph_level`
      
         let query = { 'searchTerm': '' }
         if (ctx?.query?.qf) {
diff --git a/pages/facilities/regulate/[id].js b/pages/facilities/regulate/[id].js
index dbca3e4f..d1770dbd 100644
--- a/pages/facilities/regulate/[id].js
+++ b/pages/facilities/regulate/[id].js
@@ -17,7 +17,7 @@ import { UserContext } from "../../../providers/user";
 import FacilitySideMenu from '../../../components/FacilitySideMenu'
 
 
-const RegulateFacility = props => {
+function RegulateFacility (props) {
     const userCtx = useContext(UserContext)
     const facility = props["0"]?.data;
     const regulationStateOptions = props['1']?.regulation_status
@@ -95,9 +95,9 @@ const RegulateFacility = props => {
                 <link rel="icon" href="/favicon.ico" />
             </Head>
             <MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
-                <div className="w-full grid md:grid-cols-7 gap-4 px-1 md:px-4 py-2 my-4">
+                <div className="w-full md:w-[85%] md:mx-auto grid md:grid-cols-7 gap-4 px-4 md:px-0 py-2 my-4">
                     {/* Header */}
-                    <div className="md:col-span-7 flex flex-col items-start px-4 justify-start gap-3">
+                    <div className="md:col-span-7 flex flex-col items-start md justify-start gap-3">
                         {/* Breadcramps */}
                         <div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
                             <Link className="text-gray-700" href="/">
diff --git a/pages/index.js b/pages/index.js
index f0891486..8639203e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -174,7 +174,7 @@ function Home(props) {
             {/* Menu Heading */}
             <nav className="hidden max-h-min w-[60%] container md:flex mx-auto ">
               <ul className='list-none w-full flex items-center  justify-between '>
-               <li className={`text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 ${router.asPath == "/" && 'border-b-2 text-gray-100 border-b-gray-50 bg-blue-800/85'} font-semibold capitalize text-gray-900 `}>
+               <li className={`text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 ${router.asPath == "/" && 'border-b-2 text-blue-50 border-b-gray-50 bg-blue-800/85'} font-semibold capitalize text-gray-900 `}>
                   <Link href="/">Home</Link>
                 </li>
                 <li className='text-lg h-[60px] flex items-center  hover:text-gray-100  duration-200 ease-out hover:bg-blue-800 px-4 font-semibold capitalize text-gray-900 '>
diff --git a/pages/reports/index.js b/pages/reports/index.js
index 4e395af7..80431582 100644
--- a/pages/reports/index.js
+++ b/pages/reports/index.js
@@ -84,7 +84,7 @@ function Reports(props) {
 
 
                 <MainLayout isLoading={false} isFullWidth={false}>
-                    <div className="w-full grid grid-cols-7 gap-4 p-1  my-3">
+                    <div className="w-full md:w-[85%] md:mx-auto grid grid-cols-7 gap-4 p-1  my-3">
                         {/* Header */}
                         <div className="col-span-1 md:col-span-7 flex-1 flex-col items-start justify-start gap-4">
                             {/* Breadcramps */}
diff --git a/pages/reports/officers_in_charge.js b/pages/reports/officers_in_charge.js
index 2af060da..4c381997 100644
--- a/pages/reports/officers_in_charge.js
+++ b/pages/reports/officers_in_charge.js
@@ -70,7 +70,7 @@ const OfficersInCharge = (props) => {
                 <link rel="icon" href="/favicon.ico" />
             </Head>
             <MainLayout isLoading={false} isFullWidth={false}>
-                <div className="w-full grid grid-cols-8 gap-4 p-1 md:mx-4 my-2">
+                <div className="w-full  md:w-[85%] grid grid-cols-8 gap-4 p-1 md:mx-4 my-2">
                     <div className="col-span-8 flex flex-col gap-x-1">
                         <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-1">
                             <div className="flex flex-row items-center justify-between gap-x-2 gap-y-0 text-sm md:text-base py-1">
diff --git a/pages/system_setup/index.js b/pages/system_setup/index.js
index 95a6a66f..10c12927 100644
--- a/pages/system_setup/index.js
+++ b/pages/system_setup/index.js
@@ -1184,7 +1184,7 @@ function SystemSetup(props) {
 
                 <MainLayout>
 
-                    <div className="w-full grid grid-cols-5 gap-4 p-2 my-6">
+                    <div className="w-full  md:w-[85%] md:mx-auto grid grid-cols-5 gap-4 p-2 my-6">
                         {open && 
                         <Modal
                                 aria-labelledby="transition-modal-title"
diff --git a/pages/user/add.js b/pages/user/add.js
index 47c4b150..f4f71a85 100644
--- a/pages/user/add.js
+++ b/pages/user/add.js
@@ -266,7 +266,7 @@ function User(props){
 						</Fade>
 					</Modal>
 				}
-				<div className="w-full grid grid-cols-5 gap-4 px-1 md:px-4 py-2 my-4">
+				<div className="w-full  md:w-[85%] md:mx-auto 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 px-4">
 						<div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base pb-3">
 							<div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
diff --git a/pages/user/edit/[id].js b/pages/user/edit/[id].js
index 2cec88a0..fb651141 100644
--- a/pages/user/edit/[id].js
+++ b/pages/user/edit/[id].js
@@ -266,7 +266,7 @@ const User = (props) => {
 						</Fade>
 					</Modal>
 				}
-				<div className="w-full grid grid-cols-5 gap-4 px-1 md:px-4 py-2 my-4">
+				<div className="w-full  md:w-[85%] md:mx-auto 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 px-4">
 						<div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base pb-3">
 							<div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
diff --git a/pages/user/groups/add.js b/pages/user/groups/add.js
index 0c3b3611..e50282b3 100644
--- a/pages/user/groups/add.js
+++ b/pages/user/groups/add.js
@@ -11,7 +11,7 @@ import { useAlert } from "react-alert";
 import { UserContext } from '../../../providers/user';
 import { hasPermission } from '../../../utils/checkPermissions';
 
-const AddGroup = (props)=> {
+function AddGroup(props){
 	const [selPermissions, setselPermissions] = useState([])
 	let permissions = props?.data?.results
 	const alert = useAlert()
@@ -82,7 +82,7 @@ const AddGroup = (props)=> {
 // console.log(groupData);
   return (
     <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="w-full md:w-[85%] md:mx-auto 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 px-4 ">
                         <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-3">
                             <div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
diff --git a/pages/user/groups/edit/[id].js b/pages/user/groups/edit/[id].js
index 09295b0a..ee87f2fc 100644
--- a/pages/user/groups/edit/[id].js
+++ b/pages/user/groups/edit/[id].js
@@ -17,7 +17,7 @@ import Alert from '@mui/material/Alert';
 import 'react-dual-listbox/lib/react-dual-listbox.css';
 
 
-const EditGroup=(props)=> {
+function EditGroup (props) {
     
 	const [selPermissions, setselPermissions] = useState(props?.data.permissions.map((pm)=>{return pm.id}))
 
@@ -109,7 +109,7 @@ const EditGroup=(props)=> {
 // console.log(delete_permission);
   return (
     <MainLayout isLoading={false} searchTerm={props?.query?.searchTerm}>
-        <div className="w-full grid grid-cols-5 gap-4 md:mx-4 my-4">
+        <div className="w-full  md:w-[85%] grid grid-cols-5 gap-4 md:mx-4 my-4">
 		{open && 
                        <Modal
                             aria-labelledby="transition-modal-title"
diff --git a/pages/user/groups/index.js b/pages/user/groups/index.js
index 9f4c53cc..c866b4c5 100644
--- a/pages/user/groups/index.js
+++ b/pages/user/groups/index.js
@@ -29,7 +29,7 @@ const StyledDataGrid = styled(DataGrid)(() => ({
 }))
 
 
-const Groups = (props) => {
+function Groups(props) {
 
    
     const router = useRouter()
@@ -69,7 +69,7 @@ const Groups = (props) => {
                 <link rel="icon" href="/favicon.ico" />
             </Head>
             <MainLayout isLoading={false} isFullWidth={false}>
-                <div className="w-full grid grid-cols-7 gap-4 p-1 md:px-4 my-2">
+                <div className="w-full  md:w-[85%] md:mx-auto grid grid-cols-7 gap-4 p-1 md:px-4 my-2">
                     <div className="col-span-7 flex flex-col gap-x-1 px-4">
                         <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-1">
                             <div className="flex flex-row items-center justify-between gap-x-2 gap-y-0 text-sm md:text-base py-1">
diff --git a/pages/user/index.js b/pages/user/index.js
index 1e2aeb5b..a5767cc1 100644
--- a/pages/user/index.js
+++ b/pages/user/index.js
@@ -136,7 +136,7 @@ function Users (props) {
                 </Head>
                 <MainLayout isLoading={false} isFullWidth={false}>
                     {/* {console.log({rows})} */}
-                    <div className="w-full grid grid-cols-7 gap-4 p-1 md:mx-4 my-2">
+                    <div className="w-full  md:w-[85%] px-4 md:px-0 grid grid-cols-7 gap-4 p-1 md:mx-4 my-2">
                         <div className="col-span-7 flex flex-col gap-x-1 ">
                             <div className="flex flex-wrap items-center justify-between gap-2 text-sm md:text-base py-1">
                                 <div className="flex flex-row items-center justify-between gap-2 text-sm md:text-base py-3">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7f577a71..8dc9288a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -137,6 +137,9 @@ dependencies:
   react-dual-listbox:
     specifier: ^5.0.2
     version: 5.0.2(react@18.2.0)
+  react-error-boundary:
+    specifier: ^4.0.13
+    version: 4.0.13(react@18.2.0)
   react-highcharts:
     specifier: ^16.1.0
     version: 16.1.0(react-dom@18.2.0)(react@18.2.0)
@@ -6509,6 +6512,15 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-error-boundary@4.0.13(react@18.2.0):
+    resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==}
+    peerDependencies:
+      react: '>=16.13.1'
+    dependencies:
+      '@babel/runtime': 7.23.9
+      react: 18.2.0
+    dev: false
+
   /react-fast-compare@2.0.4:
     resolution: {integrity: sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==}
     dev: false