show sum battery power and avg soc on Live View for Sodistore Home, Pro, Grid

typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx

@@ -25,6 +25,7 @@ import Information from '../Information/Information';
 import { UserType } from '../../../interfaces/UserTypes';
 import HistoryOfActions from '../History/History';
 import Topology from '../Topology/Topology';
+import TopologySodistoreHome from '../Topology/TopologySodistoreHome';
 import BatteryView from '../BatteryView/BatteryView';
 import Configuration from '../Configuration/Configuration';
 import PvView from '../PvView/PvView';
@@ -465,20 +466,12 @@ function Installation(props: singleInstallationProps) {
                 path={routes.live}
                 element={
                   props.current_installation.product === 4 ? (
-                    // TODO: SodistoreGrid — implement actual topology layout
-                    <Container
-                      maxWidth="xl"
-                      sx={{
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '40vh'
-                      }}
-                    >
-                      <Typography variant="body1" color="text.secondary">
-                        Live view coming soon
-                      </Typography>
-                    </Container>
+                    <TopologySodistoreHome
+                      values={values}
+                      connected={connected}
+                      loading={loading}
+                      batteryClusterNumber={props.current_installation.batteryClusterNumber}
+                    ></TopologySodistoreHome>
                   ) : (
                     <Topology
                       values={values}

typescript/frontend-marios2/src/content/dashboards/Topology/TopologySodistoreHome.tsx

@@ -65,6 +65,14 @@ function TopologySodistoreHome(props: TopologySodistoreHomeProps) {
   const totalGridPower: number =
     inv?.TotalGridPower ?? inv?.GridPower ?? 0;
 
+  const avgBatterySoc: number = hasDevices
+    ? (inv?.AvgBatterySoc ?? 0)
+    : (() => {
+        const socs = Array.from({ length: props.batteryClusterNumber })
+          .map((_, i) => Number(inv?.[`Battery${i + 1}Soc`]) || 0);
+        return socs.length ? socs.reduce((s, v) => s + v, 0) / socs.length : 0;
+      })();
+
   return (
     <Container maxWidth="xl" style={{ backgroundColor: 'white' }}>
       <Grid container>
@@ -255,42 +263,20 @@ function TopologySodistoreHome(props: TopologySodistoreHomeProps) {
                 isFirst={false}
               />
               {/*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/}
-              {Array.from({ length: props.batteryClusterNumber }).map((_, index) => {
-                let soc: number;
-                let power: number;
-
-                if (hasDevices) {
-                  // Sinexcel: map across devices — 0→D1/B1, 1→D1/B2, 2→D2/B1, 3→D2/B2
-                  const deviceId = String(Math.floor(index / 2) + 1);
-                  const batteryIndex = (index % 2) + 1;
-                  const device = inv?.Devices?.[deviceId];
-                  soc = device?.[`Battery${batteryIndex}Soc`] ?? device?.[`Battery${batteryIndex}SocSecondvalue`] ?? 0;
-                  power = device?.[`Battery${batteryIndex}Power`] ?? 0;
-                } else {
-                  // Growatt: flat Battery1, Battery2, ...
-                  const i = index + 1;
-                  soc = Number(inv?.[`Battery${i}Soc`]) || 0;
-                  power = Number(inv?.[`Battery${i}Power`]) || 0;
-                }
-
-                return (
-                  <TopologyColumn
-                    key={index + 1}
-                    centerBox={{
-                      title: `Battery C${index + 1}`,
-                      data: inv
-                        ? [
-                          { value: soc, unit: '%' },
-                          { value: power, unit: 'W' }
-                        ]
-                        : undefined,
-                      connected: true
-                    }}
-                    isFirst={false}
-                    isLast={true}
-                  />
-                );
-              })}
+              <TopologyColumn
+                centerBox={{
+                  title: 'Battery',
+                  data: inv
+                    ? [
+                      { value: avgBatterySoc, unit: '%' },
+                      { value: totalBatteryPower, unit: 'W' }
+                    ]
+                    : undefined,
+                  connected: true
+                }}
+                isFirst={false}
+                isLast={true}
+              />
             </Grid>
           </>
         )}

typescript/frontend-marios2/src/content/dashboards/Topology/topologyBox.tsx

@@ -257,14 +257,11 @@ function TopologyBox(props: TopologyBoxProps) {
               }}
             >
               {props.data.map((boxData, index) => {
+                const formatted = formatPower(boxData.value, boxData.unit);
                 return (
                   <Typography key={index}>
-                    {formatPower(boxData.value, boxData.unit) === 0
-                      ? null
-                      : formatPower(boxData.value, boxData.unit)}
-                    {formatPower(boxData.value, boxData.unit) === 0
-                      ? null
-                      : boxData.unit}
+                    {formatted === 0 ? '0 ' : formatted}
+                    {boxData.unit}
                   </Typography>
                 );
               })}