From 984455e815ae6c32dd1ee2e7ebfa408cc3c6fff7 Mon Sep 17 00:00:00 2001
From: Noe <noe@devnullmail.com>
Date: Tue, 13 Feb 2024 15:20:58 +0100
Subject: [PATCH 1/2] V2 of front-end is ready

---
 .../dashboards/Installations/index.tsx        |  12 +-
 .../src/content/dashboards/Log/Log.tsx        |  11 +-
 .../dashboards/Overview/chartOptions.tsx      |  11 +
 .../content/dashboards/Overview/overview.tsx  | 518 ++++++++++--------
 .../frontend-marios2/src/interfaces/Chart.tsx |  24 +-
 5 files changed, 329 insertions(+), 247 deletions(-)

diff --git a/typescript/frontend-marios2/src/content/dashboards/Installations/index.tsx b/typescript/frontend-marios2/src/content/dashboards/Installations/index.tsx
index 42f8ba4ac..376a2d256 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Installations/index.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Installations/index.tsx
@@ -104,7 +104,10 @@ function InstallationTabs() {
           value: 'live',
           label: <FormattedMessage id="live" defaultMessage="Live" />
         },
-
+        {
+          value: 'overview',
+          label: <FormattedMessage id="overview" defaultMessage="Overview" />
+        },
         {
           value: 'batteryview',
           label: (
@@ -148,12 +151,7 @@ function InstallationTabs() {
           value: 'overview',
           label: <FormattedMessage id="overview" defaultMessage="Overview" />
         },
-        {
-          value: 'batteryview',
-          label: (
-            <FormattedMessage id="batteryview" defaultMessage="Battery View" />
-          )
-        },
+
         {
           value: 'log',
           label: <FormattedMessage id="log" defaultMessage="Log" />
diff --git a/typescript/frontend-marios2/src/content/dashboards/Log/Log.tsx b/typescript/frontend-marios2/src/content/dashboards/Log/Log.tsx
index cd9823a17..559c9debc 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Log/Log.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Log/Log.tsx
@@ -29,10 +29,17 @@ interface LogProps {
 
 function Log(props: LogProps) {
   const theme = useTheme();
+  const searchParams = new URLSearchParams(location.search);
+  const openModal = searchParams.get('open');
+
   const [warnings, setWarnings] = useState<ErrorMessage[]>([]);
   const [errors, setErrors] = useState<ErrorMessage[]>([]);
-  const [errorButtonPressed, setErrorButtonPressed] = useState(false);
-  const [warningButtonPressed, setWarningButtonPressed] = useState(false);
+  const [errorButtonPressed, setErrorButtonPressed] = useState(
+    openModal === 'error' ? true : false
+  );
+  const [warningButtonPressed, setWarningButtonPressed] = useState(
+    openModal === 'warning' ? true : false
+  );
   const [updateCount, setUpdateCount] = useState(0);
   const navigate = useNavigate();
   const tokencontext = useContext(TokenContext);
diff --git a/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx b/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx
index ccb93510b..037f835b8 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx
@@ -306,6 +306,17 @@ export const getChartOptions = (
             }
           }
         },
+        annotations: {
+          yaxis: [
+            {
+              y: 0,
+              strokeDashArray: 0,
+              borderColor: '#d3d3d3',
+              borderWidth: 1,
+              yAxisIndex: 0
+            }
+          ]
+        },
         tooltip: {
           y: {
             formatter: function (val) {
diff --git a/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx b/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx
index 4f5061b72..39a5af4d5 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx
@@ -444,20 +444,20 @@ function Overview(props: OverviewProps) {
             >
               <FormattedMessage id="lastweek" defaultMessage="Last week" />
             </Button>
-            <Button
-              variant="contained"
-              onClick={handleMonthData}
-              disabled={loading}
-              sx={{
-                marginTop: '20px',
-                marginLeft: '10px',
-                backgroundColor: monthlyData ? '#808080' : '#ffc04d',
-                color: '#000000',
-                '&:hover': { bgcolor: '#f7b34d' }
-              }}
-            >
-              <FormattedMessage id="lastmonth" defaultMessage="Last Month" />
-            </Button>
+            {/*<Button*/}
+            {/*  variant="contained"*/}
+            {/*  onClick={handleMonthData}*/}
+            {/*  disabled={loading}*/}
+            {/*  sx={{*/}
+            {/*    marginTop: '20px',*/}
+            {/*    marginLeft: '10px',*/}
+            {/*    backgroundColor: monthlyData ? '#808080' : '#ffc04d',*/}
+            {/*    color: '#000000',*/}
+            {/*    '&:hover': { bgcolor: '#f7b34d' }*/}
+            {/*  }}*/}
+            {/*>*/}
+            {/*  <FormattedMessage id="lastmonth" defaultMessage="Last Month" />*/}
+            {/*</Button>*/}
             {dailyData && (
               <>
                 <Button
@@ -687,7 +687,7 @@ function Overview(props: OverviewProps) {
                             },
                             {
                               name: 'Net Energy',
-                              color: '#666666',
+                              color: '#ff3333',
                               type: 'line',
                               data: weeklybalance
                             }
@@ -917,7 +917,7 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {weeklyData && (
+                    {weeklyData && currentUser.hasWriteAccess && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
@@ -930,7 +930,7 @@ function Overview(props: OverviewProps) {
                         series={[
                           {
                             ...weeklyDataArray.chartData.dcChargingPower,
-                            color: '#69d2e7'
+                            color: '#008FFB'
                           },
                           {
                             ...weeklyDataArray.chartData.heatingPower,
@@ -938,7 +938,7 @@ function Overview(props: OverviewProps) {
                           },
                           {
                             ...weeklyDataArray.chartData.dcDischargingPower,
-                            color: '#008FFB'
+                            color: '#69d2e7'
                           }
                         ]}
                         type="bar"
@@ -946,7 +946,33 @@ function Overview(props: OverviewProps) {
                       />
                     )}
 
-                    {monthlyData && (
+                    {weeklyData && !currentUser.hasWriteAccess && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            weeklyDataArray.chartOverview.dcPowerWithoutHeating,
+                            'weekly',
+                            weeklyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...weeklyDataArray.chartData.dcChargingPower,
+                            color: '#008FFB'
+                          },
+
+                          {
+                            ...weeklyDataArray.chartData.dcDischargingPower,
+                            color: '#69d2e7'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
+
+                    {monthlyData && currentUser.hasWriteAccess && (
                       <ReactApexChart
                         options={{
                           ...getChartOptions(
@@ -959,7 +985,7 @@ function Overview(props: OverviewProps) {
                         series={[
                           {
                             ...monthlyDataArray.chartData.dcChargingPower,
-                            color: '#69d2e7'
+                            color: '#008FFB'
                           },
                           {
                             ...weeklyDataArray.chartData.heatingPower,
@@ -967,7 +993,34 @@ function Overview(props: OverviewProps) {
                           },
                           {
                             ...monthlyDataArray.chartData.dcDischargingPower,
+                            color: '#69d2e7'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
+
+                    {monthlyData && !currentUser.hasWriteAccess && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            monthlyDataArray.chartOverview
+                              .dcPowerWithoutHeating,
+                            'monthly',
+                            monthlyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...monthlyDataArray.chartData.dcChargingPower,
                             color: '#008FFB'
+                          },
+
+                          {
+                            ...monthlyDataArray.chartData.dcDischargingPower,
+                            color: '#69d2e7'
                           }
                         ]}
                         type="bar"
@@ -1106,232 +1159,229 @@ function Overview(props: OverviewProps) {
                 </Grid>
               )}
 
-              {currentUser.hasWriteAccess && (
-                <Grid
-                  container
-                  direction="row"
-                  justifyContent="center"
-                  alignItems="stretch"
-                  spacing={3}
-                >
-                  <Grid item md={6} xs={12}>
-                    <Card
+              <Grid
+                container
+                direction="row"
+                justifyContent="center"
+                alignItems="stretch"
+                spacing={3}
+              >
+                <Grid item md={6} xs={12}>
+                  <Card
+                    sx={{
+                      overflow: 'visible',
+                      marginTop: '30px',
+                      marginBottom: '30px'
+                    }}
+                  >
+                    <Box
                       sx={{
-                        overflow: 'visible',
-                        marginTop: '30px',
-                        marginBottom: '30px'
+                        marginLeft: '20px'
                       }}
                     >
+                      <Box display="flex" alignItems="center">
+                        <Box>
+                          <Typography variant="subtitle1" noWrap>
+                            <FormattedMessage
+                              id="pv_production"
+                              defaultMessage="PV Production"
+                            />
+                          </Typography>
+                        </Box>
+                      </Box>
                       <Box
                         sx={{
-                          marginLeft: '20px'
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'flex-start',
+                          pt: 3
                         }}
-                      >
-                        <Box display="flex" alignItems="center">
-                          <Box>
-                            <Typography variant="subtitle1" noWrap>
-                              <FormattedMessage
-                                id="pv_production"
-                                defaultMessage="PV Production"
-                              />
-                            </Typography>
-                          </Box>
-                        </Box>
-                        <Box
-                          sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-start',
-                            pt: 3
-                          }}
-                        ></Box>
-                      </Box>
+                      ></Box>
+                    </Box>
 
-                      {dailyData && (
-                        <ReactApexChart
-                          options={{
-                            ...getChartOptions(
-                              dailyDataArray[chartState].chartOverview
-                                .pvProduction,
-                              'daily',
-                              [],
-                              true
-                            ),
-                            chart: {
-                              events: {
-                                beforeZoom: handleBeforeZoom
-                              }
+                    {dailyData && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            dailyDataArray[chartState].chartOverview
+                              .pvProduction,
+                            'daily',
+                            [],
+                            true
+                          ),
+                          chart: {
+                            events: {
+                              beforeZoom: handleBeforeZoom
                             }
-                          }}
-                          series={[
-                            {
-                              ...dailyDataArray[chartState].chartData
-                                .pvProduction,
-                              color: '#ff9900'
-                            }
-                          ]}
-                          type="line"
-                          height={400}
-                        />
-                      )}
-
-                      {weeklyData && (
-                        <ReactApexChart
-                          options={{
-                            ...getChartOptions(
-                              weeklyDataArray.chartOverview.pvProduction,
-                              'weekly',
-                              weeklyDateList,
-                              true
-                            )
-                          }}
-                          series={[
-                            {
-                              ...weeklyDataArray.chartData.pvProduction,
-                              color: '#ff9900'
-                            }
-                          ]}
-                          type="bar"
-                          height={400}
-                        />
-                      )}
-
-                      {monthlyData && (
-                        <ReactApexChart
-                          options={{
-                            ...getChartOptions(
-                              monthlyDataArray.chartOverview.pvProduction,
-                              'monthly',
-                              monthlyDateList,
-                              true
-                            )
-                          }}
-                          series={[
-                            {
-                              ...monthlyDataArray.chartData.pvProduction,
-                              color: '#ff9900'
-                            }
-                          ]}
-                          type="bar"
-                          height={400}
-                        />
-                      )}
-                    </Card>
-                  </Grid>
-                  <Grid item md={6} xs={12}>
-                    <Card
-                      sx={{
-                        overflow: 'visible',
-                        marginTop: '30px',
-                        marginBottom: '30px'
-                      }}
-                    >
-                      <Box
-                        sx={{
-                          marginLeft: '20px'
+                          }
                         }}
-                      >
-                        <Box display="flex" alignItems="center">
-                          <Box>
-                            <Typography variant="subtitle1" noWrap>
-                              <FormattedMessage
-                                id="grid_power"
-                                defaultMessage={
-                                  dailyData ? 'Grid Power' : 'Grid Energy'
-                                }
-                              />
-                            </Typography>
-                          </Box>
-                        </Box>
-                        <Box
-                          sx={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-start',
-                            pt: 3
-                          }}
-                        ></Box>
-                      </Box>
-                      {dailyData && (
-                        <ReactApexChart
-                          options={{
-                            ...getChartOptions(
-                              dailyDataArray[chartState].chartOverview
-                                .gridPower,
-                              'daily',
-                              [],
-                              true
-                            ),
-                            chart: {
-                              events: {
-                                beforeZoom: handleBeforeZoom
-                              }
-                            }
-                          }}
-                          series={[
-                            {
-                              ...dailyDataArray[chartState].chartData.gridPower,
-                              color: '#ff3333'
-                            }
-                          ]}
-                          type="line"
-                          height={400}
-                        />
-                      )}
-                      {weeklyData && (
-                        <ReactApexChart
-                          options={{
-                            ...getChartOptions(
-                              weeklyDataArray.chartOverview.gridPower,
-                              'weekly',
-                              weeklyDateList,
-                              true
-                            )
-                          }}
-                          series={[
-                            {
-                              ...weeklyDataArray.chartData.gridImportPower,
-                              color: '#b30000'
-                            },
+                        series={[
+                          {
+                            ...dailyDataArray[chartState].chartData
+                              .pvProduction,
+                            color: '#ff9900'
+                          }
+                        ]}
+                        type="line"
+                        height={400}
+                      />
+                    )}
 
-                            {
-                              ...weeklyDataArray.chartData.gridExportPower,
-                              color: '#ff3333'
-                            }
-                          ]}
-                          type="bar"
-                          height={400}
-                        />
-                      )}
+                    {weeklyData && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            weeklyDataArray.chartOverview.pvProduction,
+                            'weekly',
+                            weeklyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...weeklyDataArray.chartData.pvProduction,
+                            color: '#ff9900'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
 
-                      {monthlyData && (
-                        <ReactApexChart
-                          options={{
-                            ...getChartOptions(
-                              monthlyDataArray.chartOverview.gridPower,
-                              'monthly',
-                              monthlyDateList,
-                              true
-                            )
-                          }}
-                          series={[
-                            {
-                              ...monthlyDataArray.chartData.gridImportPower,
-                              color: '#b30000'
-                            },
-                            {
-                              ...monthlyDataArray.chartData.gridExportPower,
-                              color: '#ff3333'
-                            }
-                          ]}
-                          type="bar"
-                          height={400}
-                        />
-                      )}
-                    </Card>
-                  </Grid>
+                    {monthlyData && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            monthlyDataArray.chartOverview.pvProduction,
+                            'monthly',
+                            monthlyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...monthlyDataArray.chartData.pvProduction,
+                            color: '#ff9900'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
+                  </Card>
                 </Grid>
-              )}
+                <Grid item md={6} xs={12}>
+                  <Card
+                    sx={{
+                      overflow: 'visible',
+                      marginTop: '30px',
+                      marginBottom: '30px'
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        marginLeft: '20px'
+                      }}
+                    >
+                      <Box display="flex" alignItems="center">
+                        <Box>
+                          <Typography variant="subtitle1" noWrap>
+                            <FormattedMessage
+                              id="grid_power"
+                              defaultMessage={
+                                dailyData ? 'Grid Power' : 'Grid Energy'
+                              }
+                            />
+                          </Typography>
+                        </Box>
+                      </Box>
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'flex-start',
+                          pt: 3
+                        }}
+                      ></Box>
+                    </Box>
+                    {dailyData && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            dailyDataArray[chartState].chartOverview.gridPower,
+                            'daily',
+                            [],
+                            true
+                          ),
+                          chart: {
+                            events: {
+                              beforeZoom: handleBeforeZoom
+                            }
+                          }
+                        }}
+                        series={[
+                          {
+                            ...dailyDataArray[chartState].chartData.gridPower,
+                            color: '#ff3333'
+                          }
+                        ]}
+                        type="line"
+                        height={400}
+                      />
+                    )}
+                    {weeklyData && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            weeklyDataArray.chartOverview.gridPower,
+                            'weekly',
+                            weeklyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...weeklyDataArray.chartData.gridImportPower,
+                            color: '#b30000'
+                          },
+
+                          {
+                            ...weeklyDataArray.chartData.gridExportPower,
+                            color: '#ff3333'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
+
+                    {monthlyData && (
+                      <ReactApexChart
+                        options={{
+                          ...getChartOptions(
+                            monthlyDataArray.chartOverview.gridPower,
+                            'monthly',
+                            monthlyDateList,
+                            true
+                          )
+                        }}
+                        series={[
+                          {
+                            ...monthlyDataArray.chartData.gridImportPower,
+                            color: '#b30000'
+                          },
+                          {
+                            ...monthlyDataArray.chartData.gridExportPower,
+                            color: '#ff3333'
+                          }
+                        ]}
+                        type="bar"
+                        height={400}
+                      />
+                    )}
+                  </Card>
+                </Grid>
+              </Grid>
             </Grid>
           )}
         </Grid>
diff --git a/typescript/frontend-marios2/src/interfaces/Chart.tsx b/typescript/frontend-marios2/src/interfaces/Chart.tsx
index 63abacf73..cc4b4a63a 100644
--- a/typescript/frontend-marios2/src/interfaces/Chart.tsx
+++ b/typescript/frontend-marios2/src/interfaces/Chart.tsx
@@ -11,6 +11,7 @@ export interface overviewInterface {
   soc: chartInfoInterface;
   temperature: chartInfoInterface;
   dcPower: chartInfoInterface;
+  dcPowerWithoutHeating: chartInfoInterface;
   gridPower: chartInfoInterface;
   pvProduction: chartInfoInterface;
   dcBusVoltage: chartInfoInterface;
@@ -78,6 +79,7 @@ export const transformInputToDailyData = async (
     soc: { magnitude: 0, unit: '', min: 0, max: 0 },
     temperature: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcPower: { magnitude: 0, unit: '', min: 0, max: 0 },
+    dcPowerWithoutHeating: { magnitude: 0, unit: '', min: 0, max: 0 },
     gridPower: { magnitude: 0, unit: '', min: 0, max: 0 },
     pvProduction: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcBusVoltage: { magnitude: 0, unit: '', min: 0, max: 0 },
@@ -280,7 +282,7 @@ export const transformInputToAggregatedData = async (
     maxsoc: { name: 'max SOC', data: [] },
     pvProduction: { name: 'Pv Energy', data: [] },
     dcChargingPower: { name: 'Charging Battery Energy', data: [] },
-    heatingPower: { name: 'Heating Power', data: [] },
+    heatingPower: { name: 'Heating Energy', data: [] },
     dcDischargingPower: { name: 'Discharging Battery Energy', data: [] },
     gridImportPower: { name: 'Grid Import Energy', data: [] },
     gridExportPower: { name: 'Grid Export Energy', data: [] }
@@ -290,6 +292,7 @@ export const transformInputToAggregatedData = async (
     soc: { magnitude: 0, unit: '', min: 0, max: 0 },
     temperature: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcPower: { magnitude: 0, unit: '', min: 0, max: 0 },
+    dcPowerWithoutHeating: { magnitude: 0, unit: '', min: 0, max: 0 },
     gridPower: { magnitude: 0, unit: '', min: 0, max: 0 },
     pvProduction: { magnitude: 0, unit: '', min: 0, max: 0 },
     dcBusVoltage: { magnitude: 0, unit: '', min: 0, max: 0 },
@@ -329,6 +332,9 @@ export const transformInputToAggregatedData = async (
       dateList.push(currentDay.format('DD-MM'));
       pathsToSearch.forEach((path) => {
         if (result[path]) {
+          if (path === '/GridExportPower') {
+            result[path].value = -result[path].value;
+          }
           if (result[path].value < overviewData[path].min) {
             overviewData[path].min = result[path].value;
           }
@@ -336,9 +342,9 @@ export const transformInputToAggregatedData = async (
           if (result[path].value > overviewData[path].max) {
             overviewData[path].max = result[path].value;
           }
-          if (path === '/GridExportPower' && result[path].value < 0.1) {
-            result[path].value = 0.3;
-          }
+          // if (path === '/GridExportPower' && Math.abs(result[path].value) < 0.1) {
+          //   result[path].value = -0.3;
+          // }
           data[path].push(result[path].value as number);
         }
       });
@@ -395,6 +401,16 @@ export const transformInputToAggregatedData = async (
   path = '/HeatingPower';
   chartAggregatedData.heatingPower.data = data[path];
 
+  chartOverview.dcPowerWithoutHeating = {
+    magnitude: Math.max(
+      overviewData['/ChargingBatteryPower'].magnitude,
+      overviewData['/DischargingBatteryPower'].magnitude
+    ),
+    unit: '(kWh)',
+    min: overviewData['/DischargingBatteryPower'].min,
+    max: overviewData['/ChargingBatteryPower'].max
+  };
+
   chartOverview.dcPower = {
     magnitude: Math.max(
       overviewData['/ChargingBatteryPower'].magnitude,

From 38afc5b0036dc02f1270b9dc7be6830aab206c6b Mon Sep 17 00:00:00 2001
From: Noe <noe@devnullmail.com>
Date: Wed, 14 Feb 2024 14:34:11 +0100
Subject: [PATCH 2/2] Fixed login route bug

---
 typescript/frontend-marios2/src/App.tsx       | 13 ++++-
 .../frontend-marios2/src/components/login.tsx |  4 +-
 .../dashboards/Overview/chartOptions.tsx      |  4 +-
 .../content/dashboards/Overview/overview.tsx  | 28 +++++-----
 .../content/dashboards/Topology/Topology.tsx  | 39 ++++++++++----
 .../dashboards/Topology/topologyBox.tsx       | 17 +++++--
 .../dashboards/Topology/topologyFlow.tsx      | 15 ++++--
 .../src/content/dashboards/Users/User.tsx     | 45 +++++++++++++++-
 .../src/content/dashboards/Users/index.tsx    |  4 +-
 .../src/content/dashboards/Users/userForm.tsx | 19 ++++---
 .../content/pages/Status/Status404/index.tsx  | 51 ++++---------------
 .../frontend-marios2/src/interfaces/Chart.tsx | 10 ++--
 .../SidebarLayout/Header/Menu/index.tsx       | 31 ++++++-----
 .../SidebarLayout/Header/Userbox/index.tsx    | 30 +++++++----
 .../src/layouts/SidebarLayout/index.tsx       | 10 ++--
 15 files changed, 197 insertions(+), 123 deletions(-)

diff --git a/typescript/frontend-marios2/src/App.tsx b/typescript/frontend-marios2/src/App.tsx
index 29ee0324f..ba1934e1b 100644
--- a/typescript/frontend-marios2/src/App.tsx
+++ b/typescript/frontend-marios2/src/App.tsx
@@ -119,6 +119,10 @@ function App() {
             path={routes.forgotPassword}
             element={<ForgotPassword />}
           ></Route>
+          <Route
+            path={'*'}
+            element={<Navigate to={routes.login}></Navigate>}
+          ></Route>
         </Routes>
       </ThemeProvider>
     );
@@ -147,6 +151,10 @@ function App() {
               path={''}
               element={<Navigate to={routes.installations}></Navigate>}
             ></Route>
+            <Route
+              path={'login'}
+              element={<Navigate to={routes.installations}></Navigate>}
+            ></Route>
             <Route
               path="/"
               element={
@@ -168,7 +176,10 @@ function App() {
               />
 
               <Route path={routes.users + '*'} element={<Users />} />
-
+              <Route
+                path={'*'}
+                element={<Navigate to={routes.installations}></Navigate>}
+              ></Route>
               <Route path="ResetPassword" element={<ResetPassword />}></Route>
             </Route>
           </Routes>
diff --git a/typescript/frontend-marios2/src/components/login.tsx b/typescript/frontend-marios2/src/components/login.tsx
index dbcd203b3..c0148d42a 100644
--- a/typescript/frontend-marios2/src/components/login.tsx
+++ b/typescript/frontend-marios2/src/components/login.tsx
@@ -91,7 +91,7 @@ function Login() {
   };
 
   return (
-    <>
+    <div style={{ userSelect: 'none' }}>
       <Container maxWidth="xl" sx={{ pt: 2 }} className="login">
         <Grid container>
           <Grid item xs={3} container justifyContent="flex-start" mb={2}>
@@ -263,7 +263,7 @@ function Login() {
           </Grid>
         </Box>
       </Box>
-    </>
+    </div>
   );
 }
 
diff --git a/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx b/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx
index 037f835b8..006ce83af 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx
@@ -260,7 +260,7 @@ export const getChartOptions = (
               : chartInfo.max <= 0
               ? Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
                 findPower(chartInfo.min).value
-              : Math.abs(chartInfo.min) < 1
+              : Math.abs(chartInfo.min) < 1 || Math.abs(chartInfo.max) < 1
               ? -Math.max(
                   Math.abs(
                     Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
@@ -278,7 +278,7 @@ export const getChartOptions = (
                 ).toFixed(2)
               : chartInfo.max <= 0
               ? 0
-              : Math.abs(chartInfo.min) < 1
+              : Math.abs(chartInfo.min) < 1 || Math.abs(chartInfo.max) < 1
               ? +Math.max(
                   Math.abs(
                     Math.ceil(chartInfo.min / findPower(chartInfo.min).value) *
diff --git a/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx b/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx
index 39a5af4d5..723924cda 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx
@@ -444,20 +444,20 @@ function Overview(props: OverviewProps) {
             >
               <FormattedMessage id="lastweek" defaultMessage="Last week" />
             </Button>
-            {/*<Button*/}
-            {/*  variant="contained"*/}
-            {/*  onClick={handleMonthData}*/}
-            {/*  disabled={loading}*/}
-            {/*  sx={{*/}
-            {/*    marginTop: '20px',*/}
-            {/*    marginLeft: '10px',*/}
-            {/*    backgroundColor: monthlyData ? '#808080' : '#ffc04d',*/}
-            {/*    color: '#000000',*/}
-            {/*    '&:hover': { bgcolor: '#f7b34d' }*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <FormattedMessage id="lastmonth" defaultMessage="Last Month" />*/}
-            {/*</Button>*/}
+            <Button
+              variant="contained"
+              onClick={handleMonthData}
+              disabled={loading}
+              sx={{
+                marginTop: '20px',
+                marginLeft: '10px',
+                backgroundColor: monthlyData ? '#808080' : '#ffc04d',
+                color: '#000000',
+                '&:hover': { bgcolor: '#f7b34d' }
+              }}
+            >
+              <FormattedMessage id="lastmonth" defaultMessage="Last Month" />
+            </Button>
             {dailyData && (
               <>
                 <Button
diff --git a/typescript/frontend-marios2/src/content/dashboards/Topology/Topology.tsx b/typescript/frontend-marios2/src/content/dashboards/Topology/Topology.tsx
index 5960b6ab7..f778e7aeb 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Topology/Topology.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Topology/Topology.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Container, Grid, Switch } from '@mui/material';
+import { Container, Grid, Switch, Typography } from '@mui/material';
 import TopologyColumn from './topologyColumn';
 import {
   getAmount,
@@ -41,16 +41,33 @@ function Topology(props: TopologyProps) {
             justifyContent: 'right'
           }}
         >
-          <Switch
-            edge="start"
-            color="secondary"
-            onChange={handleSwitch()}
-            sx={{
-              '& .MuiSwitch-thumb': {
-                backgroundColor: 'orange'
-              }
-            }}
-          />
+          <div>
+            <Typography sx={{ marginTop: '5px', marginRight: '20px' }}>
+              Display Values
+            </Typography>
+            <Switch
+              edge="start"
+              color="secondary"
+              onChange={handleSwitch()}
+              sx={{
+                '& .MuiSwitch-thumb': {
+                  backgroundColor: 'orange'
+                },
+                marginLeft: '20px'
+              }}
+            />
+          </div>
+
+          {/*<Switch*/}
+          {/*  edge="start"*/}
+          {/*  color="secondary"*/}
+          {/*  onChange={handleSwitch()}*/}
+          {/*  sx={{*/}
+          {/*    '& .MuiSwitch-thumb': {*/}
+          {/*      backgroundColor: 'orange'*/}
+          {/*    }*/}
+          {/*  }}*/}
+          {/*/>*/}
         </Grid>
 
         <Grid
diff --git a/typescript/frontend-marios2/src/content/dashboards/Topology/topologyBox.tsx b/typescript/frontend-marios2/src/content/dashboards/Topology/topologyBox.tsx
index 8dd344bfe..6b87c960e 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Topology/topologyBox.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Topology/topologyBox.tsx
@@ -29,7 +29,7 @@ const isInt = (value: number) => {
   return value % 1 === 0;
 };
 
-function formatPower(value) {
+function formatPower(value, unit) {
   if (isNaN(value)) {
     return 'Invalid';
   }
@@ -47,7 +47,12 @@ function formatPower(value) {
     magnitude++;
   }
 
-  const roundedValue = value.toFixed(1);
+  const roundedValue = Math.round(value);
+
+  //Filter all values less than 100 Watts
+  if (magnitude === 0 && value < 100 && unit === 'W') {
+    return 0;
+  }
 
   return negative === false
     ? `${roundedValue} ${prefixes[magnitude]}`
@@ -243,8 +248,12 @@ function TopologyBox(props: TopologyBoxProps) {
               {props.data.values.map((boxData, index) => {
                 return (
                   <Typography key={index}>
-                    {formatPower(boxData.value)}
-                    {boxData.unit}
+                    {formatPower(boxData.value, boxData.unit) === 0
+                      ? null
+                      : formatPower(boxData.value, boxData.unit)}
+                    {formatPower(boxData.value, boxData.unit) === 0
+                      ? null
+                      : boxData.unit}
                   </Typography>
                 );
               })}
diff --git a/typescript/frontend-marios2/src/content/dashboards/Topology/topologyFlow.tsx b/typescript/frontend-marios2/src/content/dashboards/Topology/topologyFlow.tsx
index 650806b9d..81d17316a 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Topology/topologyFlow.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Topology/topologyFlow.tsx
@@ -45,7 +45,12 @@ function formatPower(value) {
     magnitude++;
   }
 
-  const roundedValue = value.toFixed(1);
+  const roundedValue = Math.round(value);
+
+  //Filter all values less than 100 Watts
+  if (magnitude === 0 && value < 100) {
+    return 0;
+  }
 
   return negative === false
     ? `${roundedValue} ${prefixes[magnitude]}`
@@ -113,8 +118,12 @@ function TopologyFlow(props: TopologyFlowProps) {
                 zIndex: 1
               }}
             >
-              {formatPower(props.data.values[0].value)}
-              {props.data.values[0].unit}
+              {formatPower(props.data.values[0].value) === 0
+                ? null
+                : formatPower(props.data.values[0].value)}
+              {formatPower(props.data.values[0].value) === 0
+                ? null
+                : props.data.values[0].unit}
             </Typography>
           )}
         </Box>
diff --git a/typescript/frontend-marios2/src/content/dashboards/Users/User.tsx b/typescript/frontend-marios2/src/content/dashboards/Users/User.tsx
index d7c4de937..8edb90915 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Users/User.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Users/User.tsx
@@ -9,6 +9,7 @@ import {
   Grid,
   IconButton,
   Modal,
+  Switch,
   Tab,
   Tabs,
   TextField,
@@ -22,6 +23,7 @@ import { InnovEnergyUser } from 'src/interfaces/UserTypes';
 import { TokenContext } from 'src/contexts/tokenContext';
 import { TabsContainerWrapper } from 'src/layouts/TabsContainerWrapper';
 import { FormattedMessage } from 'react-intl';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 interface singleUserProps {
   current_user: InnovEnergyUser;
@@ -80,6 +82,14 @@ function User(props: singleUserProps) {
       [name]: value
     });
   };
+
+  const handleAdminChange = (event) => {
+    setFormValues({
+      ...formValues,
+      ['hasWriteAccess']: event.target.checked
+    });
+  };
+
   const handleSubmit = async (e) => {
     setLoading(true);
     setError(false);
@@ -94,8 +104,13 @@ function User(props: singleUserProps) {
       });
 
     if (res) {
-      setUpdated(true);
+      props.fetchDataAgain();
       setLoading(false);
+      setUpdated(true);
+
+      setTimeout(() => {
+        setUpdated(false);
+      }, 3000);
     }
   };
 
@@ -278,6 +293,34 @@ function User(props: singleUserProps) {
                             fullWidth
                           />
                         </div>
+
+                        <div>
+                          <FormControlLabel
+                            labelPlacement="start"
+                            control={
+                              <Switch
+                                checked={
+                                  formValues.hasWriteAccess ? true : false
+                                }
+                                color="primary"
+                                name="hasWriteAccess"
+                                onChange={handleAdminChange}
+                                sx={{
+                                  marginLeft: '8px',
+                                  marginTop: '2px'
+                                }}
+                              />
+                            }
+                            label={
+                              <Typography sx={{ marginTop: '4px' }}>
+                                Admin
+                              </Typography>
+                            }
+                            sx={{
+                              marginLeft: '10px'
+                            }}
+                          />
+                        </div>
                         <div
                           style={{
                             display: 'flex',
diff --git a/typescript/frontend-marios2/src/content/dashboards/Users/index.tsx b/typescript/frontend-marios2/src/content/dashboards/Users/index.tsx
index 1a3e95a48..6e141cae3 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Users/index.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Users/index.tsx
@@ -8,7 +8,7 @@ function Users() {
   const theme = useTheme();
 
   return (
-    <>
+    <div style={{ userSelect: 'none' }}>
       <AccessContextProvider>
         <Container maxWidth="xl" sx={{ marginTop: '20px' }}>
           <Grid item xs={12}>
@@ -19,7 +19,7 @@ function Users() {
         </Container>
         <Footer />
       </AccessContextProvider>
-    </>
+    </div>
   );
 }
 
diff --git a/typescript/frontend-marios2/src/content/dashboards/Users/userForm.tsx b/typescript/frontend-marios2/src/content/dashboards/Users/userForm.tsx
index 4803a169a..23ef0361f 100644
--- a/typescript/frontend-marios2/src/content/dashboards/Users/userForm.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/Users/userForm.tsx
@@ -9,7 +9,9 @@ import {
   MenuItem,
   Modal,
   Select,
+  Switch,
   TextField,
+  Typography,
   useTheme
 } from '@mui/material';
 import Button from '@mui/material/Button';
@@ -17,10 +19,9 @@ import { Close as CloseIcon } from '@mui/icons-material';
 import { InnovEnergyUser } from 'src/interfaces/UserTypes';
 import axiosConfig from 'src/Resources/axiosConfig';
 import { TokenContext } from 'src/contexts/tokenContext';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
 import { I_Folder, I_Installation } from 'src/interfaces/InstallationTypes';
 import { FormattedMessage } from 'react-intl';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 interface userFormProps {
   cancel: () => void;
@@ -385,16 +386,22 @@ function userForm(props: userFormProps) {
 
             <div>
               <FormControlLabel
+                labelPlacement="start"
                 control={
-                  <Checkbox
+                  <Switch
+                    color="primary"
                     onChange={handleAdminChange}
                     sx={{
-                      marginLeft: '11px'
+                      marginLeft: '8px',
+                      marginTop: '2px'
                     }}
                   />
                 }
-                label="Admin"
-                sx={{ marginTop: 1 }}
+                label={<Typography sx={{ marginTop: '6px' }}>Admin</Typography>}
+                sx={{
+                  marginLeft: '10px',
+                  marginTop: '9px'
+                }}
               />
             </div>
 
diff --git a/typescript/frontend-marios2/src/content/pages/Status/Status404/index.tsx b/typescript/frontend-marios2/src/content/pages/Status/Status404/index.tsx
index d760d8703..4cd500aec 100644
--- a/typescript/frontend-marios2/src/content/pages/Status/Status404/index.tsx
+++ b/typescript/frontend-marios2/src/content/pages/Status/Status404/index.tsx
@@ -1,17 +1,12 @@
 import {
   Box,
-  Card,
-  Typography,
-  Container,
-  Divider,
   Button,
-  FormControl,
+  Container,
   OutlinedInput,
-  InputAdornment,
-  styled
+  styled,
+  Typography
 } from '@mui/material';
 import { Helmet } from 'react-helmet-async';
-import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone';
 
 const MainContent = styled(Box)(
   ({ theme }) => `
@@ -50,42 +45,14 @@ function Status404() {
             <Typography variant="h2" sx={{ my: 2 }}>
               The page you were looking for doesn't exist.
             </Typography>
-            <Typography
-              variant="h4"
-              color="text.secondary"
-              fontWeight="normal"
-              sx={{ mb: 4 }}
+            <Button
+              href="/login"
+              variant="outlined"
+              sx={{ backgroundColor: 'white' }}
             >
-              It's on us, we moved the content to a different page. The search
-              below should help!
-            </Typography>
+              Go to homepage
+            </Button>
           </Box>
-          <Container maxWidth="sm">
-            <Card sx={{ textAlign: 'center', mt: 3, p: 4 }}>
-              <FormControl variant="outlined" fullWidth>
-                <OutlinedInputWrapper
-                  type="text"
-                  placeholder="Search terms here..."
-                  endAdornment={
-                    <InputAdornment position="end">
-                      <ButtonSearch variant="contained" size="small">
-                        Search
-                      </ButtonSearch>
-                    </InputAdornment>
-                  }
-                  startAdornment={
-                    <InputAdornment position="start">
-                      <SearchTwoToneIcon />
-                    </InputAdornment>
-                  }
-                />
-              </FormControl>
-              <Divider sx={{ my: 4 }}>OR</Divider>
-              <Button href="/overview" variant="outlined">
-                Go to homepage
-              </Button>
-            </Card>
-          </Container>
         </Container>
       </MainContent>
     </>
diff --git a/typescript/frontend-marios2/src/interfaces/Chart.tsx b/typescript/frontend-marios2/src/interfaces/Chart.tsx
index cc4b4a63a..1c209eb69 100644
--- a/typescript/frontend-marios2/src/interfaces/Chart.tsx
+++ b/typescript/frontend-marios2/src/interfaces/Chart.tsx
@@ -110,7 +110,7 @@ export const transformInputToDailyData = async (
   while (startUnixTime < endTimestamp) {
     timestampPromises.push(fetchData(startUnixTime, s3Credentials));
 
-    startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + diff / 200);
+    startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + diff / 100);
     if (startUnixTime.ticks % 2 !== 0) {
       startUnixTime = UnixTime.fromTicks(startUnixTime.ticks + 1);
     }
@@ -436,12 +436,8 @@ export const transformInputToAggregatedData = async (
       overviewData['/GridExportPower'].magnitude
     ),
     unit: '(kWh)',
-    min:
-      overviewData['/GridImportPower'].min +
-      overviewData['/GridExportPower'].min,
-    max:
-      overviewData['/GridImportPower'].max +
-      overviewData['/GridExportPower'].max
+    min: overviewData['/GridExportPower'].min,
+    max: overviewData['/GridImportPower'].max
   };
 
   chartOverview.overview = {
diff --git a/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Menu/index.tsx b/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Menu/index.tsx
index 65c3784cd..743301461 100644
--- a/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Menu/index.tsx
+++ b/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Menu/index.tsx
@@ -11,6 +11,7 @@ import { styled } from '@mui/material/styles';
 import ExpandMoreTwoToneIcon from '@mui/icons-material/ExpandMoreTwoTone';
 import { ThemeContext } from '../../../../theme/ThemeProvider';
 import { FormattedMessage } from 'react-intl';
+import '../../../../App.css';
 
 interface HeaderButtonsProps {
   language: string;
@@ -106,7 +107,7 @@ function HeaderMenu(props: HeaderButtonsProps) {
   const isMobile = window.innerWidth <= 1280;
 
   return (
-    <>
+    <div style={{ userSelect: 'none' }}>
       <ListWrapper
         sx={{
           color: isMobile ? 'white' : ''
@@ -132,18 +133,22 @@ function HeaderMenu(props: HeaderButtonsProps) {
           </ListItem>
         </List>
       </ListWrapper>
-      <Menu anchorEl={ref.current} onClose={handleClose} open={isOpen}>
-        <MenuItem value="en" onClick={() => handleLanguageSelect('en')}>
-          English
-        </MenuItem>
-        <MenuItem value="de" onClick={() => handleLanguageSelect('de')}>
-          German
-        </MenuItem>
-        <MenuItem value="fr" onClick={() => handleLanguageSelect('fr')}>
-          French
-        </MenuItem>
-      </Menu>
-    </>
+      <div
+        style={{ userSelect: 'none', pointerEvents: 'none', cursor: 'default' }}
+      >
+        <Menu anchorEl={ref.current} onClose={handleClose} open={isOpen}>
+          <MenuItem value="en" onClick={() => handleLanguageSelect('en')}>
+            English
+          </MenuItem>
+          <MenuItem value="de" onClick={() => handleLanguageSelect('de')}>
+            German
+          </MenuItem>
+          <MenuItem value="fr" onClick={() => handleLanguageSelect('fr')}>
+            French
+          </MenuItem>
+        </Menu>
+      </div>
+    </div>
   );
 }
 
diff --git a/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Userbox/index.tsx b/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Userbox/index.tsx
index 04eb7cd32..cdfe96b9d 100644
--- a/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Userbox/index.tsx
+++ b/typescript/frontend-marios2/src/layouts/SidebarLayout/Header/Userbox/index.tsx
@@ -19,6 +19,7 @@ import { TokenContext } from 'src/contexts/tokenContext';
 import { useNavigate } from 'react-router-dom';
 import routes from 'src/Resources/routes.json';
 import { WebSocketContext } from '../../../../contexts/WebSocketContextProvider';
+import '../../../../App.css';
 
 const UserBoxButton = styled(Button)(
   ({ theme }) => `
@@ -86,8 +87,13 @@ function HeaderUserbox() {
   };
 
   return (
-    <>
-      <UserBoxButton color="secondary" ref={ref} onClick={handleOpen}>
+    <div style={{ userSelect: 'none' }}>
+      <UserBoxButton
+        color="secondary"
+        ref={ref}
+        onClick={handleOpen}
+        style={{ cursor: 'pointer' }}
+      >
         <Hidden mdDown>
           <UserBoxText>
             <UserBoxLabel variant="body1">{currentUser?.name}</UserBoxLabel>
@@ -113,14 +119,16 @@ function HeaderUserbox() {
           horizontal: 'right'
         }}
       >
-        <MenuUserBox sx={{ minWidth: 210 }} display="flex">
-          <UserBoxText>
-            <UserBoxLabel variant="body1">{currentUser?.name}</UserBoxLabel>
-            <UserBoxDescription variant="body2">
-              {currentUser?.email}
-            </UserBoxDescription>
-          </UserBoxText>
-        </MenuUserBox>
+        <div style={{ userSelect: 'none', cursor: 'none' }}>
+          <MenuUserBox sx={{ minWidth: 210 }} display="flex">
+            <UserBoxText>
+              <UserBoxLabel variant="body1">{currentUser?.name}</UserBoxLabel>
+              <UserBoxDescription variant="body2">
+                {currentUser?.email}
+              </UserBoxDescription>
+            </UserBoxText>
+          </MenuUserBox>
+        </div>
 
         <Divider />
         <Box sx={{ m: 1 }}>
@@ -130,7 +138,7 @@ function HeaderUserbox() {
           </Button>
         </Box>
       </Popover>
-    </>
+    </div>
   );
 }
 
diff --git a/typescript/frontend-marios2/src/layouts/SidebarLayout/index.tsx b/typescript/frontend-marios2/src/layouts/SidebarLayout/index.tsx
index 4c9f3e7cf..bbcd07914 100644
--- a/typescript/frontend-marios2/src/layouts/SidebarLayout/index.tsx
+++ b/typescript/frontend-marios2/src/layouts/SidebarLayout/index.tsx
@@ -43,10 +43,12 @@ const SidebarLayout = (props: SidebarLayoutProps) => {
           }
         }}
       >
-        <Header
-          language={props.language}
-          onSelectLanguage={props.onSelectLanguage}
-        />
+        <div style={{ userSelect: 'none' }}>
+          <Header
+            language={props.language}
+            onSelectLanguage={props.onSelectLanguage}
+          />
+        </div>
         <Sidebar />
         <Box
           sx={{