From 1e9b10f5b4feda494f9e313e2cd27493a45a961b Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:50:43 +0300
Subject: [PATCH 1/7] added maintenance banner

---
 .../src/common/components/Layout/index.jsx    |  7 ++++
 .../components/MaintenanceBanner/index.jsx    | 35 +++++++++++++++++
 platform/src/core/apis/Account.js             | 11 ++++++
 .../src/core/hooks/useMaintenanceStatus.js    | 38 +++++++++++++++++++
 platform/src/core/urls/authentication.js      |  7 ++--
 5 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 platform/src/common/components/MaintenanceBanner/index.jsx
 create mode 100644 platform/src/core/hooks/useMaintenanceStatus.js

diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx
index 26d2139516..a00a09834c 100644
--- a/platform/src/common/components/Layout/index.jsx
+++ b/platform/src/common/components/Layout/index.jsx
@@ -9,12 +9,14 @@ import AuthenticatedSideBar from '@/components/SideBar/AuthenticatedSidebar';
 import TopBar from '../TopBar';
 import SideBarDrawer from '../SideBar/SideBarDrawer';
 import Modal from '../Modal/dataDownload';
+import MaintenanceBanner from '../MaintenanceBanner';
 
 import { setOpenModal } from '@/lib/store/services/downloadModal';
 
 import useUserPreferences from '@/core/hooks/useUserPreferences';
 import useUserChecklists from '@/core/hooks/useUserChecklists';
 import useInactivityLogout from '@/core/hooks/useInactivityLogout';
+import useMaintenanceStatus from '@/core/hooks/useMaintenanceStatus';
 
 const Layout = ({
   pageTitle = 'AirQo Analytics',
@@ -36,6 +38,8 @@ const Layout = ({
   const isCollapsed = useSelector((state) => state.sidebar.isCollapsed);
   const isOpen = useSelector((state) => state.modal.openModal);
 
+  const { maintenance } = useMaintenanceStatus();
+
   // Handler to close the modal
   const handleCloseModal = () => {
     dispatch(setOpenModal(false));
@@ -48,6 +52,9 @@ const Layout = ({
         <meta property="og:title" content={pageTitle} key="title" />
       </Head>
 
+      {/* Maintenance Banner */}
+      <MaintenanceBanner maintenance={maintenance} />
+
       {/* Sidebar */}
       <aside className="fixed left-0 top-0 z-50 text-[#1C1D20] transition-all duration-300 ease-in-out">
         <AuthenticatedSideBar />
diff --git a/platform/src/common/components/MaintenanceBanner/index.jsx b/platform/src/common/components/MaintenanceBanner/index.jsx
new file mode 100644
index 0000000000..79758af8f6
--- /dev/null
+++ b/platform/src/common/components/MaintenanceBanner/index.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { IoWarningOutline } from 'react-icons/io5';
+import { format } from 'date-fns';
+
+const MaintenanceBanner = ({ maintenance }) => {
+  if (!maintenance?.isActive) return null;
+
+  const startTime = format(new Date(maintenance.startDate), 'HH:mm');
+  const endTime = format(new Date(maintenance.endDate), 'HH:mm');
+
+  return (
+    <div className="bg-yellow-50 border-b border-yellow-200">
+      <div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-center">
+          <div className="flex items-center">
+            <span className="flex">
+              <IoWarningOutline
+                className="h-6 w-6 text-yellow-600"
+                aria-hidden="true"
+              />
+            </span>
+            <p className="ml-3 font-medium text-yellow-700">
+              {maintenance.message}
+              <span className="ml-2 text-yellow-600">
+                ({startTime} - {endTime})
+              </span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MaintenanceBanner;
diff --git a/platform/src/core/apis/Account.js b/platform/src/core/apis/Account.js
index 165f3fa17a..84fa1444c4 100644
--- a/platform/src/core/apis/Account.js
+++ b/platform/src/core/apis/Account.js
@@ -12,6 +12,7 @@ import {
   USER_CHECKLISTS_URL,
   FORGOT_PWD_URL,
   RESET_PWD_URL,
+  MAINTENANCE_STATUS_URL,
 } from '../urls/authentication';
 import axios from 'axios';
 import createAxiosInstance from './axiosConfig';
@@ -221,3 +222,13 @@ export const updateGroupDetailsApi = async (groupID, data) => {
     .put(`${GROUPS_URL}/${groupID}`, data)
     .then((response) => response.data);
 };
+
+export const getMaintenanceStatus = async () => {
+  try {
+    const response = await createAxiosInstance().get(MAINTENANCE_STATUS_URL);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching maintenance status:', error);
+    throw error;
+  }
+};
diff --git a/platform/src/core/hooks/useMaintenanceStatus.js b/platform/src/core/hooks/useMaintenanceStatus.js
new file mode 100644
index 0000000000..bd7be72e33
--- /dev/null
+++ b/platform/src/core/hooks/useMaintenanceStatus.js
@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { getMaintenanceStatus } from '../apis/Account';
+
+const POLLING_INTERVAL = 5 * 60 * 1000; // 5 minutes
+
+const useMaintenanceStatus = () => {
+  const [maintenance, setMaintenance] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchMaintenanceStatus = async () => {
+    try {
+      const response = await getMaintenanceStatus();
+      if (response.success && response.maintenance?.length > 0) {
+        setMaintenance(response.maintenance[0]);
+      } else {
+        setMaintenance(null);
+      }
+      setError(null);
+    } catch (err) {
+      setError(err);
+      console.error('Error fetching maintenance status:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMaintenanceStatus();
+    const interval = setInterval(fetchMaintenanceStatus, POLLING_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { maintenance, loading, error };
+};
+
+export default useMaintenanceStatus;
diff --git a/platform/src/core/urls/authentication.js b/platform/src/core/urls/authentication.js
index 3277ab5bbe..d0843c0a93 100644
--- a/platform/src/core/urls/authentication.js
+++ b/platform/src/core/urls/authentication.js
@@ -1,7 +1,4 @@
-import {
-  NEXT_PUBLIC_API_BASE_URL,
-  NEXT_PUBLIC_API_TOKEN,
-} from '../../lib/envConstants';
+import { NEXT_PUBLIC_API_BASE_URL } from '../../lib/envConstants';
 import { stripTrailingSlash } from '../utils/strings';
 
 const BASE_AUTH_URL = stripTrailingSlash(NEXT_PUBLIC_API_BASE_URL);
@@ -41,3 +38,5 @@ export const GENERATE_TOKEN_URI = `${AUTH_URL}/tokens`;
 export const ACTIVATE_USER_CLIENT = `${CLIENT_URI}/activate`;
 
 export const ACTIVATION_REQUEST_URI = `${CLIENT_URI}/activate-request`;
+
+export const MAINTENANCE_STATUS_URL = `${AUTH_URL}/maintenances/analytics`;

From d97584ad096ccad0ce44e72cf4f3068d56c508da Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:07:29 +0300
Subject: [PATCH 2/7] Update index.jsx

---
 platform/src/common/components/Layout/index.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx
index a00a09834c..eb0805b98b 100644
--- a/platform/src/common/components/Layout/index.jsx
+++ b/platform/src/common/components/Layout/index.jsx
@@ -52,9 +52,6 @@ const Layout = ({
         <meta property="og:title" content={pageTitle} key="title" />
       </Head>
 
-      {/* Maintenance Banner */}
-      <MaintenanceBanner maintenance={maintenance} />
-
       {/* Sidebar */}
       <aside className="fixed left-0 top-0 z-50 text-[#1C1D20] transition-all duration-300 ease-in-out">
         <AuthenticatedSideBar />
@@ -82,6 +79,9 @@ const Layout = ({
             />
           )}
 
+          {/* Maintenance Banner */}
+          <MaintenanceBanner maintenance={maintenance} />
+
           {/* Children */}
           <div className="text-[#1C1D20] transition-all duration-300 ease-in-out overflow-hidden">
             {children}

From b84c5de2117dbb2fd131b864efc61acdc8e45c76 Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:19:26 +0300
Subject: [PATCH 3/7] adjust size and positioning

---
 platform/src/common/components/Layout/index.jsx            | 6 +++---
 platform/src/common/components/MaintenanceBanner/index.jsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx
index eb0805b98b..9d8b951b70 100644
--- a/platform/src/common/components/Layout/index.jsx
+++ b/platform/src/common/components/Layout/index.jsx
@@ -70,6 +70,9 @@ const Layout = ({
               : 'max-w-[1200px] mx-auto space-y-8 px-4 py-8 sm:px-6 lg:px-8'
           } overflow-hidden`}
         >
+          {/* Maintenance Banner */}
+          <MaintenanceBanner maintenance={maintenance} />
+
           {/* TopBar */}
           {noTopNav && (
             <TopBar
@@ -79,9 +82,6 @@ const Layout = ({
             />
           )}
 
-          {/* Maintenance Banner */}
-          <MaintenanceBanner maintenance={maintenance} />
-
           {/* Children */}
           <div className="text-[#1C1D20] transition-all duration-300 ease-in-out overflow-hidden">
             {children}
diff --git a/platform/src/common/components/MaintenanceBanner/index.jsx b/platform/src/common/components/MaintenanceBanner/index.jsx
index 79758af8f6..923a124c46 100644
--- a/platform/src/common/components/MaintenanceBanner/index.jsx
+++ b/platform/src/common/components/MaintenanceBanner/index.jsx
@@ -9,8 +9,8 @@ const MaintenanceBanner = ({ maintenance }) => {
   const endTime = format(new Date(maintenance.endDate), 'HH:mm');
 
   return (
-    <div className="bg-yellow-50 border-b border-yellow-200">
-      <div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
+    <div className="bg-yellow-50 border-b border-yellow-200 mb-2">
+      <div className="py-3 px-3 sm:px-6 lg:px-8">
         <div className="flex items-center justify-center">
           <div className="flex items-center">
             <span className="flex">

From bdda6b69723ba66a7109927d4bc3ab4309c66d1a Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:36:01 +0300
Subject: [PATCH 4/7] format time

---
 platform/src/common/components/MaintenanceBanner/index.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/platform/src/common/components/MaintenanceBanner/index.jsx b/platform/src/common/components/MaintenanceBanner/index.jsx
index 923a124c46..484ed12571 100644
--- a/platform/src/common/components/MaintenanceBanner/index.jsx
+++ b/platform/src/common/components/MaintenanceBanner/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { IoWarningOutline } from 'react-icons/io5';
 import { format } from 'date-fns';
+import dayjs from 'dayjs';
 
 const MaintenanceBanner = ({ maintenance }) => {
   if (!maintenance?.isActive) return null;
@@ -22,7 +23,9 @@ const MaintenanceBanner = ({ maintenance }) => {
             <p className="ml-3 font-medium text-yellow-700">
               {maintenance.message}
               <span className="ml-2 text-yellow-600">
-                ({startTime} - {endTime})
+                (Estimated downtime:{' '}
+                {dayjs(startTime).format('DDD MM, YYYY HH:mm')} -{' '}
+                {dayjs(endTime).format('DDD MM, YYYY HH:mm')})
               </span>
             </p>
           </div>

From 5202804abbf4a6c5cd9e18928093f9099af70273 Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:47:09 +0300
Subject: [PATCH 5/7] fix date time

---
 .../src/common/components/MaintenanceBanner/index.jsx     | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/platform/src/common/components/MaintenanceBanner/index.jsx b/platform/src/common/components/MaintenanceBanner/index.jsx
index 484ed12571..5e5f97634b 100644
--- a/platform/src/common/components/MaintenanceBanner/index.jsx
+++ b/platform/src/common/components/MaintenanceBanner/index.jsx
@@ -1,14 +1,10 @@
 import React from 'react';
 import { IoWarningOutline } from 'react-icons/io5';
-import { format } from 'date-fns';
 import dayjs from 'dayjs';
 
 const MaintenanceBanner = ({ maintenance }) => {
   if (!maintenance?.isActive) return null;
 
-  const startTime = format(new Date(maintenance.startDate), 'HH:mm');
-  const endTime = format(new Date(maintenance.endDate), 'HH:mm');
-
   return (
     <div className="bg-yellow-50 border-b border-yellow-200 mb-2">
       <div className="py-3 px-3 sm:px-6 lg:px-8">
@@ -24,8 +20,8 @@ const MaintenanceBanner = ({ maintenance }) => {
               {maintenance.message}
               <span className="ml-2 text-yellow-600">
                 (Estimated downtime:{' '}
-                {dayjs(startTime).format('DDD MM, YYYY HH:mm')} -{' '}
-                {dayjs(endTime).format('DDD MM, YYYY HH:mm')})
+                {dayjs(maintenance.startDate).format('DDD MM, YYYY HH:mm')} -{' '}
+                {dayjs(maintenance.endDate).format('DDD MM, YYYY HH:mm')})
               </span>
             </p>
           </div>

From d27cd8e65275d89914011b406c04e61cde4b338d Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:58:51 +0300
Subject: [PATCH 6/7] Update index.jsx

---
 platform/src/common/components/MaintenanceBanner/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/src/common/components/MaintenanceBanner/index.jsx b/platform/src/common/components/MaintenanceBanner/index.jsx
index 5e5f97634b..8caa5686dc 100644
--- a/platform/src/common/components/MaintenanceBanner/index.jsx
+++ b/platform/src/common/components/MaintenanceBanner/index.jsx
@@ -20,8 +20,8 @@ const MaintenanceBanner = ({ maintenance }) => {
               {maintenance.message}
               <span className="ml-2 text-yellow-600">
                 (Estimated downtime:{' '}
-                {dayjs(maintenance.startDate).format('DDD MM, YYYY HH:mm')} -{' '}
-                {dayjs(maintenance.endDate).format('DDD MM, YYYY HH:mm')})
+                {dayjs(maintenance.startDate).format('D MMM, YYYY HH:mm A')} -{' '}
+                {dayjs(maintenance.endDate).format('D MMM, YYYY HH:mm A')})
               </span>
             </p>
           </div>

From 5b332d066a2673ebd09d1cf2055bd3e9bdb9611c Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 4 Dec 2024 17:07:55 +0300
Subject: [PATCH 7/7] Update index.jsx

---
 platform/src/common/components/MaintenanceBanner/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/src/common/components/MaintenanceBanner/index.jsx b/platform/src/common/components/MaintenanceBanner/index.jsx
index 8caa5686dc..82d0ebb84d 100644
--- a/platform/src/common/components/MaintenanceBanner/index.jsx
+++ b/platform/src/common/components/MaintenanceBanner/index.jsx
@@ -20,8 +20,8 @@ const MaintenanceBanner = ({ maintenance }) => {
               {maintenance.message}
               <span className="ml-2 text-yellow-600">
                 (Estimated downtime:{' '}
-                {dayjs(maintenance.startDate).format('D MMM, YYYY HH:mm A')} -{' '}
-                {dayjs(maintenance.endDate).format('D MMM, YYYY HH:mm A')})
+                {dayjs(maintenance.startDate).format('D MMM, YYYY hh:mm A')} -{' '}
+                {dayjs(maintenance.endDate).format('D MMM, YYYY hh:mm A')})
               </span>
             </p>
           </div>