From b8932b86fef01794868d76e5c028c39cc660ed07 Mon Sep 17 00:00:00 2001
From: manjitapandey <97273021+manjitapandey@users.noreply.github.com>
Date: Wed, 17 Jan 2024 11:43:13 +0545
Subject: [PATCH 1/5] fix:  header removed, search bar adjusted

---
 frontend/src/views/projectLiveMonitoring.css |  2 +-
 frontend/src/views/projectLiveMonitoring.js  | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/projectLiveMonitoring.css b/frontend/src/views/projectLiveMonitoring.css
index a1532bb527..8852c1f8a9 100644
--- a/frontend/src/views/projectLiveMonitoring.css
+++ b/frontend/src/views/projectLiveMonitoring.css
@@ -6,7 +6,7 @@
 
 .top {
   position: absolute;
-  top: 390px;
+  top: 200px;
   left: 20px;
   z-index: 999;
 }
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index 8ac147acea..650b547ba6 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -212,9 +212,6 @@ export function ProjectLiveMonitoring() {
       className="pr3"
     >
       <div>
-        <div className="w-100 fl pv3 ph2 ph4-ns bg-white blue-dark">
-          <ProjectHeader project={project} showEditLink={true} />
-        </div>
         <div className="flex p-2">
           <div style={{ flex: 2 }}>
             <div className="top">
@@ -241,7 +238,7 @@ export function ProjectLiveMonitoring() {
                 options={imageryOptions}
                 // placeholder={<FormattedMessage {...messages.selectImagery} />}
                 onChange={handleMapSourceSelect}
-                className="w-50 z-2"
+                className="w-60 z-2"
               />
             </div>
             <UnderpassMap
@@ -263,12 +260,15 @@ export function ProjectLiveMonitoring() {
           <div
             style={{
               flex: 1,
-              padding: 10,
+              padding: 5,
               display: 'flex',
               flexDirection: 'column',
               backgroundColor: `rgb(${hottheme.colors.white})`,
             }}
           >
+            <div className="w-100 fl pv3 ph2 ph4-ns bg-white blue-dark">
+          <ProjectHeader project={project} showEditLink={true} />
+        </div>
             <div className="border-b-2 pb-5 space-y-3">
               <UnderpassFeatureStats
                 tags={tags}

From dc893a0bb7f0a086937e73c7e44889825a06adb6 Mon Sep 17 00:00:00 2001
From: manjitapandey <97273021+manjitapandey@users.noreply.github.com>
Date: Wed, 17 Jan 2024 13:14:06 +0545
Subject: [PATCH 2/5] padding changes

---
 frontend/src/views/projectLiveMonitoring.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index 650b547ba6..538f1b982d 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -234,11 +234,12 @@ export function ProjectLiveMonitoring() {
               <Select
                 classNamePrefix="react-select"
                 isClearable={true}
+                
                 value={imageryOptions.find((item) => item.value === mapSource)}
                 options={imageryOptions}
                 // placeholder={<FormattedMessage {...messages.selectImagery} />}
                 onChange={handleMapSourceSelect}
-                className="w-60 z-2"
+                className="w-60 z-2 mt-2"
               />
             </div>
             <UnderpassMap
@@ -266,7 +267,7 @@ export function ProjectLiveMonitoring() {
               backgroundColor: `rgb(${hottheme.colors.white})`,
             }}
           >
-            <div className="w-100 fl pv3 ph2 ph4-ns bg-white blue-dark">
+            <div className="w-100 fl pv1 bg-white blue-dark">
           <ProjectHeader project={project} showEditLink={true} />
         </div>
             <div className="border-b-2 pb-5 space-y-3">

From caa68caeba9850f0d744dc3839795d9926dbc5f9 Mon Sep 17 00:00:00 2001
From: Emillio Mariscal <emi420@gmail.com>
Date: Wed, 17 Jan 2024 09:33:42 -0300
Subject: [PATCH 3/5] Fixes for styling, more compact design

---
 frontend/src/views/projectLiveMonitoring.css |  8 +-
 frontend/src/views/projectLiveMonitoring.js  | 96 ++++----------------
 2 files changed, 25 insertions(+), 79 deletions(-)

diff --git a/frontend/src/views/projectLiveMonitoring.css b/frontend/src/views/projectLiveMonitoring.css
index 8852c1f8a9..1767519aab 100644
--- a/frontend/src/views/projectLiveMonitoring.css
+++ b/frontend/src/views/projectLiveMonitoring.css
@@ -6,8 +6,14 @@
 
 .top {
   position: absolute;
-  top: 200px;
+  top: 150px;
   left: 20px;
   z-index: 999;
 }
 
+svg.pl2 {
+  display: inherit;
+  height: 22px !important;
+  width: 19px !important;
+  margin-left: 0px;
+}
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index 538f1b982d..1e8eaa78e2 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -10,7 +10,8 @@ import {
   UnderpassValidationStats,
 } from '@hotosm/underpass-ui';
 
-import { ProjectHeader } from '../components/projectDetail/header';
+import { ProjectVisibilityBox } from '../components/projectDetail/visibilityBox';
+import { ProjectStatusBox } from '../components/projectDetail/statusBox';
 import { useSetTitleTag } from '../hooks/UseMetaTags';
 import { useParams } from 'react-router-dom';
 import { useFetch } from '../hooks/UseFetch';
@@ -267,9 +268,22 @@ export function ProjectLiveMonitoring() {
               backgroundColor: `rgb(${hottheme.colors.white})`,
             }}
           >
-            <div className="w-100 fl pv1 bg-white blue-dark">
-          <ProjectHeader project={project} showEditLink={true} />
-        </div>
+            { project &&
+              <div className="w-100 fl pv1 bg-white blue-dark">
+                <div>
+                  <h3
+                    className="f2 fw5 mt3 mt2-ns mb3 ttu barlow-condensed blue-dark dib mr3"
+                    lang={project.projectInfo.locale}
+                  >
+                    {project.projectInfo && project.projectInfo.name}
+                  </h3>
+                  {project.private && <ProjectVisibilityBox className="pv2 ph3 mb3 mr3 v-mid dib" />}
+                  {['DRAFT', 'ARCHIVED'].includes(project.status) && (
+                    <ProjectStatusBox status={project.status} className="pv2 ph3 mb3 v-mid dib mr3" />
+                  )}
+                </div>
+              </div> 
+            }
             <div className="border-b-2 pb-5 space-y-3">
               <UnderpassFeatureStats
                 tags={tags}
@@ -306,80 +320,6 @@ export function ProjectLiveMonitoring() {
                 />
                 <label target="liveMapCheckbox">Live map</label>
               </form>
-              <form className="space-x-2 py-4">
-                <input
-                  checked={status === statusList.ALL}
-                  onChange={() => {
-                    setStatus(statusList.ALL);
-                  }}
-                  name="allCheckbox"
-                  id="allCheckbox"
-                  type="radio"
-                />
-                <label htmlFor="allCheckbox">All</label>
-                <input
-                  checked={status === statusList.UNSQUARED}
-                  onChange={() => {
-                    setStatus(statusList.UNSQUARED);
-                  }}
-                  name="geospatialCheckbox"
-                  id="geospatialCheckbox"
-                  type="radio"
-                />
-                <label htmlFor="geospatialCheckbox">Geospatial</label>
-                <input
-                  checked={status === statusList.BADVALUE}
-                  onChange={() => {
-                    setStatus(statusList.BADVALUE);
-                  }}
-                  name="semanticCheckbox"
-                  id="semanticCheckbox"
-                  type="radio"
-                />
-                <label htmlFor="semanticCheckbox">Semantic</label>
-              </form>
-              <form className="space-x-2">
-                <input
-                  checked={featureType === 'all'}
-                  onChange={() => {
-                    setFeatureType('all');
-                  }}
-                  name="featureTypeAllCheckbox"
-                  id="featureTypeAllCheckbox"
-                  type="radio"
-                />
-                <label htmlFor="featureTypeAllCheckbox">All</label>
-                <input
-                  checked={featureType === 'polygon'}
-                  onChange={() => {
-                    setFeatureType('polygon');
-                  }}
-                  name="featureTypePolygonCheckbox"
-                  id="featureTypePolygonCheckbox"
-                  type="radio"
-                />
-                <label htmlFor="featureTypePolygonCheckbox">Polygon</label>
-                <input
-                  checked={featureType === 'line'}
-                  onChange={() => {
-                    setFeatureType('line');
-                  }}
-                  name="featureTypeLineCheckbox"
-                  id="featureTypeLineCheckbox"
-                  type="radio"
-                />
-                <label htmlFor="featureTypeLineCheckbox">Line</label>
-                <input
-                  checked={featureType === 'node'}
-                  onChange={() => {
-                    setFeatureType('node');
-                  }}
-                  name="featureTypeNodeCheckbox"
-                  id="featureTypeNodeCheckbox"
-                  type="radio"
-                />
-                <label htmlFor="featureTypeNodeCheckbox">Node</label>
-              </form>
             </div>
             <UnderpassFeatureList
               style={{

From da9d7f5f5320ce7ca440e67306c64f58db6b0599 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Thu, 18 Jan 2024 11:41:10 +0545
Subject: [PATCH 4/5] Add `OSM` as default layer in `Live Monitoring`

---
 frontend/src/views/projectLiveMonitoring.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index 1e8eaa78e2..812ef8b915 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -19,6 +19,7 @@ import './projectLiveMonitoring.css';
 import { MAPBOX_TOKEN } from '../config';
 
 const availableImageryOptions = [
+  { label: 'OSM', value: 'osm' },
   { label: 'Bing', value: 'Bing' },
   { label: 'Mapbox Satellite', value: 'Mapbox' },
   { label: 'ESRI World Imagery', value: 'EsriWorldImagery' },
@@ -96,6 +97,7 @@ export function ProjectLiveMonitoring() {
   const [mapConfig, setMapConfig] = useState(config);
   const [realtimeList, setRealtimeList] = useState(false);
   const [realtimeMap, setRealtimeMap] = useState(false);
+  // eslint-disable-next-line
   const [status, setStatus] = useState(statusList.UNSQUARED);
   // eslint-disable-next-line
   const [area, setArea] = useState(null);
@@ -133,7 +135,7 @@ export function ProjectLiveMonitoring() {
       ? 'custom'
       : availableImageryValues.includes(data.imagery)
       ? data.imagery
-      : 'Bing';
+      : 'osm';
     setMapSource(mapSourceValue);
   }, [data]);
 
@@ -235,7 +237,6 @@ export function ProjectLiveMonitoring() {
               <Select
                 classNamePrefix="react-select"
                 isClearable={true}
-                
                 value={imageryOptions.find((item) => item.value === mapSource)}
                 options={imageryOptions}
                 // placeholder={<FormattedMessage {...messages.selectImagery} />}
@@ -268,7 +269,7 @@ export function ProjectLiveMonitoring() {
               backgroundColor: `rgb(${hottheme.colors.white})`,
             }}
           >
-            { project &&
+            {project && (
               <div className="w-100 fl pv1 bg-white blue-dark">
                 <div>
                   <h3
@@ -277,13 +278,18 @@ export function ProjectLiveMonitoring() {
                   >
                     {project.projectInfo && project.projectInfo.name}
                   </h3>
-                  {project.private && <ProjectVisibilityBox className="pv2 ph3 mb3 mr3 v-mid dib" />}
+                  {project.private && (
+                    <ProjectVisibilityBox className="pv2 ph3 mb3 mr3 v-mid dib" />
+                  )}
                   {['DRAFT', 'ARCHIVED'].includes(project.status) && (
-                    <ProjectStatusBox status={project.status} className="pv2 ph3 mb3 v-mid dib mr3" />
+                    <ProjectStatusBox
+                      status={project.status}
+                      className="pv2 ph3 mb3 v-mid dib mr3"
+                    />
                   )}
                 </div>
-              </div> 
-            }
+              </div>
+            )}
             <div className="border-b-2 pb-5 space-y-3">
               <UnderpassFeatureStats
                 tags={tags}

From 559efa69e1f5f773b8758a3d11600016c16252c8 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Thu, 18 Jan 2024 11:42:57 +0545
Subject: [PATCH 5/5] Fix crash issue when `imagery` not selected in `Live
 Monitoring`

---
 frontend/src/views/projectLiveMonitoring.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index 812ef8b915..39404fb9f8 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -113,7 +113,7 @@ export function ProjectLiveMonitoring() {
     if (!Object.keys(data).length) return;
     setProject(data);
     // add custom to config sources if the project has custom imagery
-    const hasCustomImagery = data.imagery.includes('http');
+    const hasCustomImagery = data.imagery?.includes('http');
     if (hasCustomImagery) {
       setMapConfig((prev) => ({
         ...prev,