Merge pull request #1897 from airqo-platform/staging

move to production

Author: Baalmart

k8s/netmanager/values-prod.yaml

@@ -1,7 +1,7 @@
 replicaCount: 2
 image:
   repository: eu.gcr.io/airqo-250220/airqo-platform-frontend
-  tag: prod-ab2ae2ef-1709930981
+  tag: prod-d0e073b4-1709981759
   pullPolicy: Always
 imagePullSecrets: []
 nameOverride: ''

k8s/netmanager/values-stage.yaml

@@ -1,7 +1,7 @@
 replicaCount: 2
 image:
   repository: eu.gcr.io/airqo-250220/airqo-stage-platform-frontend
-  tag: stage-1943dfae-1709894381
+  tag: stage-c37ecd9f-1710234424
   pullPolicy: Always
 imagePullSecrets: []
 nameOverride: ''

k8s/platform/values-stage.yaml

@@ -2,7 +2,7 @@ replicaCount: 1
 image:
   repository: eu.gcr.io/airqo-250220/airqo-stage-next-platform
   pullPolicy: Always
-  tag: stage-7ac69339-1709894334
+  tag: stage-1d591b59-1710234659
 imagePullSecrets: []
 nameOverride: ''
 fullnameOverride: ''

netmanager/README.md

@@ -1,6 +1,6 @@
 # Netmanager application
 
-This application is used for monitoring, device registration, location registration. Can be accessed here: https://staging-platform.airqo.net/ and https://platform.airqo.net/
+This application is used for monitoring , device registration, location registration. Can be accessed here: https://staging-platform.airqo.net/ and https://platform.airqo.net/
 
 ## Local Setup
 

platform/public/icons/arrow_left.svg

@@ -11,8 +11,9 @@ const Button = ({
   color,
   bgColor,
   Icon,
+  paddingStyles = 'px-4 py-3',
 }) => {
-  let buttonClass = `flex justify-center items-center px-4 py-3 rounded sm:gap-1 ${className}`;
+  let buttonClass = `flex justify-center items-center ${paddingStyles} rounded sm:gap-1 ${className}`;
   let textColor = '';
   let backgroundColor = '';
   let border = '';
@@ -28,6 +29,8 @@ const Button = ({
   } else if (variant === 'disabled') {
     backgroundColor = 'bg-secondary-neutral-light-100';
     textColor = 'text-secondary-neutral-light-600';
+  } else if (variant === 'primaryText') {
+    textColor = 'text-blue-600';
   }
 
   if (bgColor) {

platform/public/images/map/UnknownAQ.png

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   format,
   startOfMonth,
@@ -17,25 +17,45 @@ import Footer from './components/Footer';
 import ShortCuts from './components/ShortCuts';
 import CalendarHeader from './components/CalendarHeader';
 
-const Calendar = ({ initialMonth1, initialMonth2, handleValueChange, closeDatePicker }) => {
+const Calendar = ({
+  initialMonth1,
+  initialMonth2,
+  handleValueChange,
+  closeDatePicker,
+  showAsSingle = false,
+  useRange = true,
+}) => {
   const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   const [selectedDays1, setSelectedDays1] = useState([]);
   const [selectedDays2, setSelectedDays2] = useState([]);
   const [month1, setMonth1] = useState(initialMonth1);
   const [month2, setMonth2] = useState(initialMonth2);
   const [selectedRange, setSelectedRange] = useState({ start: null, end: null });
 
+  useEffect(() => {
+    if (!useRange && showAsSingle) {
+      setSelectedRange({ start: new Date(), end: null });
+      setSelectedDays1((prev) => [...prev, new Date()]);
+    }
+  }, [useRange, showAsSingle]);
+
   const handleDayClick = (day, setSelectedDays) => {
-    setSelectedDays((prev) => [...prev, day]);
-    if (!selectedRange.start) {
+    if (!useRange) {
+      const newDay = new Date(month2.getFullYear(), month2.getMonth(), day.getDate());
+      setSelectedDays((prev) => [...prev, newDay]);
+      setSelectedRange({ start: newDay, end: null });
+    } else if (!selectedRange.start) {
+      setSelectedDays((prev) => [...prev, day]);
       setSelectedRange({ start: day, end: null });
     } else if (!selectedRange.end) {
+      setSelectedDays((prev) => [...prev, day]);
       if (isBefore(day, selectedRange.start)) {
         setSelectedRange({ start: day, end: selectedRange.start });
       } else {
         setSelectedRange({ start: selectedRange.start, end: day });
       }
     } else {
+      setSelectedDays([day]);
       setSelectedRange({ start: day, end: null });
     }
   };
@@ -75,13 +95,16 @@ const Calendar = ({ initialMonth1, initialMonth2, handleValueChange, closeDatePi
             (selectedRange.end && isSameDay(day, selectedRange.end)) || isEndOfWeek
               ? 'rounded-r-full'
               : ''
-          }`}>
+          }`}
+        >
           <button
             onClick={() => handleDayClick(day, setSelectedDays)}
             className={`
               w-10 h-10 text-sm flex justify-center items-center 
               ${
-                selectedDays.includes(day) || isStartOrEndDay
+                selectedDays.includes(day) ||
+                isStartOrEndDay ||
+                (showAsSingle && !useRange && isSameDay(day, selectedRange.start))
                   ? 'bg-blue-600 dark:bg-blue-500 rounded-full text-red-50 hover:text-red-50'
                   : ''
               }
@@ -94,7 +117,8 @@ const Calendar = ({ initialMonth1, initialMonth2, handleValueChange, closeDatePi
               }
               hover:border-blue-600 hover:text-blue-600 hover:rounded-full hover:border dark:hover:border-gray-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 
               disabled:text-gray-300 disabled:pointer-events-none md:w-14 lg:w-16
-            `}>
+            `}
+          >
             {format(day, 'd')}
           </button>
         </div>
@@ -103,54 +127,46 @@ const Calendar = ({ initialMonth1, initialMonth2, handleValueChange, closeDatePi
   };
 
   return (
-    <div className='flex flex-col items-center justify-center w-auto bg-none md:flex-row mb-10'>
-      <div className='z-50 flex flex-col border border-gray-100 bg-white shadow-lg rounded-xl max-w-full min-w-[260px] md:min-w-[660px] lg:min-w-[800px]'>
+    <div
+      className={
+        !showAsSingle && useRange
+          ? 'flex flex-col items-center justify-center w-full bg-none md:flex-row mb-10 z-[900]'
+          : ''
+      }
+    >
+      <div
+        className={`z-[900] border border-gray-100 bg-white shadow-lg rounded-xl ${
+          !showAsSingle && useRange
+            ? 'max-w-full min-w-[260px] md:min-w-[660px] lg:min-w-[800px]'
+            : 'max-w-[328px] w-full min-w-40'
+        }`}
+      >
         <div className='flex flex-col'>
           <div className='divide-x flex flex-col md:flex-row lg:flex-row'>
             {/* shortcut section */}
-            <ShortCuts setSelectedRange={setSelectedRange} />
+            {!showAsSingle && useRange && <ShortCuts setSelectedRange={setSelectedRange} />}
 
             {/* calendar section one */}
             <div className='flex flex-col px-6 pt-5 pb-6'>
               <CalendarHeader
-                month={format(month1, 'MMMM yyyy')}
-                onNext={() => {
-                  const nextMonth = addMonths(month1, 1);
-                  if (!isSameMonth(nextMonth, month2)) {
-                    setMonth1(nextMonth);
-                  }
-                }}
-                onPrev={() => {
-                  const prevMonth = subMonths(month1, 1);
-                  if (!isSameMonth(prevMonth, month2)) {
-                    setMonth1(prevMonth);
-                  }
-                }}
-              />
-              <div className='grid grid-cols-7 text-xs text-center text-gray-900 space-y-[1px]'>
-                {daysOfWeek.map((day) => (
-                  <span
-                    key={day}
-                    className='flex text-gray-600 items-center justify-center w-10 h-10 font-semibold rounded-lg'>
-                    {day}
-                  </span>
-                ))}
-                {renderDays(month1, selectedDays1, setSelectedDays1)}
-              </div>
-            </div>
-            {/* calendar section two */}
-            <div className='flex flex-col px-6 pt-5 pb-6'>
-              <CalendarHeader
-                month={format(month2, 'MMMM yyyy')}
+                month={format(useRange ? month1 : month2, 'MMMM yyyy')}
                 onNext={() => {
-                  const nextMonth = addMonths(month2, 1);
-                  if (!isSameMonth(nextMonth, month1)) {
+                  const nextMonth = addMonths(useRange ? month1 : month2, 1);
+                  if (useRange) {
+                    if (!isSameMonth(nextMonth, month2)) {
+                      setMonth1(nextMonth);
+                    }
+                  } else {
                     setMonth2(nextMonth);
                   }
                 }}
                 onPrev={() => {
-                  const prevMonth = subMonths(month2, 1);
-                  if (!isSameMonth(prevMonth, month1)) {
+                  const prevMonth = subMonths(useRange ? month1 : month2, 1);
+                  if (useRange) {
+                    if (!isSameMonth(prevMonth, month2)) {
+                      setMonth1(prevMonth);
+                    }
+                  } else {
                     setMonth2(prevMonth);
                   }
                 }}
@@ -159,16 +175,49 @@ const Calendar = ({ initialMonth1, initialMonth2, handleValueChange, closeDatePi
                 {daysOfWeek.map((day) => (
                   <span
                     key={day}
-                    className='flex text-gray-600 items-center justify-center w-10 h-10 font-semibold rounded-lg'>
+                    className='flex text-gray-600 items-center justify-center w-10 h-10 font-semibold rounded-lg'
+                  >
                     {day}
                   </span>
                 ))}
-                {renderDays(month2, selectedDays2, setSelectedDays2)}
+                {renderDays(month1, selectedDays1, setSelectedDays1, selectedRange)}
               </div>
             </div>
+            {/* calendar section two */}
+            {useRange && (
+              <div className='flex flex-col px-6 pt-5 pb-6'>
+                <CalendarHeader
+                  month={format(month2, 'MMMM yyyy')}
+                  onNext={() => {
+                    const nextMonth = addMonths(month2, 1);
+                    if (!isSameMonth(nextMonth, month1)) {
+                      setMonth2(nextMonth);
+                    }
+                  }}
+                  onPrev={() => {
+                    const prevMonth = subMonths(month2, 1);
+                    if (!isSameMonth(prevMonth, month1)) {
+                      setMonth2(prevMonth);
+                    }
+                  }}
+                />
+                <div className='grid grid-cols-7 text-xs text-center text-gray-900 space-y-[1px]'>
+                  {daysOfWeek.map((day) => (
+                    <span
+                      key={day}
+                      className='flex text-gray-600 items-center justify-center w-10 h-10 font-semibold rounded-lg'
+                    >
+                      {day}
+                    </span>
+                  ))}
+                  {renderDays(month2, selectedDays2, setSelectedDays2)}
+                </div>
+              </div>
+            )}
           </div>
           {/* footer section */}
           <Footer
+            useRange={useRange}
             selectedRange={selectedRange}
             setSelectedRange={setSelectedRange}
             handleValueChange={handleValueChange}

platform/src/common/components/Button/index.jsx

@@ -110,6 +110,7 @@ const CustomCalendar = ({
   useEffect(() => {
     if (openDatePicker) {
       document.addEventListener('click', handleClickOutside);
+      localStorage.setItem('collapsed', true);
     } else {
       document.removeEventListener('click', handleClickOutside);
     }
@@ -124,17 +125,23 @@ const CustomCalendar = ({
       <button
         onClick={handleClick}
         type='button'
-        className='relative border border-grey-750 rounded flex items-center justify-between gap-2 px-4 py-3'>
+        className='relative border border-grey-750 rounded flex items-center justify-between gap-2 px-4 py-3'
+      >
         {Icon ? <Icon /> : <CalendarIcon />}
         <span className='hidden sm:inline-block text-sm font-medium'>
           {chartData.chartDataRange.label}
         </span>
         {dropdown && <ChevronDownIcon />}
       </button>
-      <div className={`absolute top-[50px] ${className} ${openDatePicker ? 'block' : 'hidden'}`}>
+      <div
+        className={`absolute top-[50px] z-[900] ${className} ${
+          openDatePicker ? 'block' : 'hidden'
+        }`}
+      >
         <DatePickerHiddenInput />
       </div>
     </div>
   );
 };
+
 export default CustomCalendar;

platform/src/common/components/Calendar/Calendar.jsx

@@ -4,8 +4,9 @@ const CalendarHeader = ({ month, onNext, onPrev }) => {
   return (
     <div className='flex items-center justify-between'>
       <button
-        className='flex items-center justify-center p-2 hover:bg-gray-50 border border-gray-300 rounded-md'
-        onClick={onPrev}>
+        className='flex items-center justify-center p-2 w-10 h-10 hover:bg-gray-50 border border-gray-300 rounded-xl'
+        onClick={onPrev}
+      >
         <svg className='w-6 h-6 text-gray-500 stroke-current' fill='none'>
           <path
             d='M13.25 8.75L9.75 12l3.5 3.25'
@@ -17,8 +18,9 @@ const CalendarHeader = ({ month, onNext, onPrev }) => {
       </button>
       <div className='text-sm text-gray-700 font-semibold'>{month}</div>
       <button
-        className='flex items-center justify-center p-2 hover:bg-gray-50 border border-gray-300 rounded-md'
-        onClick={onNext}>
+        className='flex items-center justify-center p-2 hover:bg-gray-50 border border-gray-300 rounded-xl w-10 h-10'
+        onClick={onNext}
+      >
         <svg className='w-6 h-6 text-gray-500 stroke-current' fill='none'>
           <path
             d='M10.75 8.75l3.5 3.25-3.5 3.25'