remove checklist and add confguration tab

typescript/frontend-marios2/src/content/dashboards/Configuration/ConfigurationSodistoreGrid.tsx

@@ -0,0 +1,256 @@
+import { ConfigurationValues, JSONRecordData } from '../Log/graph.util';
+import {
+  Alert,
+  Box,
+  CardContent,
+  CircularProgress,
+  Container,
+  Grid,
+  IconButton,
+  TextField,
+  useTheme
+} from '@mui/material';
+
+import React, { useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Button from '@mui/material/Button';
+import { Close as CloseIcon } from '@mui/icons-material';
+import axiosConfig from '../../../Resources/axiosConfig';
+
+interface ConfigurationSodistoreGridProps {
+  values: JSONRecordData;
+  id: number;
+}
+
+function ConfigurationSodistoreGrid(props: ConfigurationSodistoreGridProps) {
+  const intl = useIntl();
+  if (props.values === null) {
+    return null;
+  }
+
+  const theme = useTheme();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [updated, setUpdated] = useState(false);
+
+  const [errors, setErrors] = useState({
+    minimumSoC: false,
+    gridSetPoint: false
+  });
+
+  const SetErrorForField = (field_name: string, state: boolean) => {
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      [field_name]: state
+    }));
+  };
+
+  const [formValues, setFormValues] = useState<Partial<ConfigurationValues>>({
+    minimumSoC: props.values.Config?.MinSoc,
+    gridSetPoint:
+      props.values.Config?.GridSetPoint != null
+        ? (props.values.Config.GridSetPoint as number) / 1000
+        : undefined
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    switch (name) {
+      case 'minimumSoC':
+        if (
+          /[^0-9.]/.test(value) ||
+          isNaN(parseFloat(value)) ||
+          parseFloat(value) > 100
+        ) {
+          SetErrorForField(name, true);
+        } else {
+          SetErrorForField(name, false);
+        }
+        break;
+      case 'gridSetPoint':
+        if (/[^0-9.]/.test(value) || isNaN(parseFloat(value))) {
+          SetErrorForField(name, true);
+        } else {
+          SetErrorForField(name, false);
+        }
+        break;
+      default:
+        return true;
+    }
+
+    setFormValues({
+      ...formValues,
+      [name]: value
+    });
+  };
+
+  const handleSubmit = async () => {
+    const configurationToSend: Partial<ConfigurationValues> = {
+      minimumSoC: formValues.minimumSoC,
+      gridSetPoint: formValues.gridSetPoint
+    };
+
+    setLoading(true);
+    const res = await axiosConfig
+      .post(
+        `/EditInstallationConfig?installationId=${props.id}&product=4`,
+        configurationToSend
+      )
+      .catch((err) => {
+        if (err.response) {
+          setError(true);
+          setLoading(false);
+        }
+      });
+
+    if (res) {
+      setUpdated(true);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Container maxWidth="xl">
+      <Grid
+        container
+        direction="row"
+        justifyContent="center"
+        alignItems="stretch"
+        spacing={3}
+      >
+        <Grid item xs={12} md={12}>
+          <CardContent>
+            <Box
+              component="form"
+              sx={{
+                '& .MuiTextField-root': { m: 1, width: 390 }
+              }}
+              noValidate
+              autoComplete="off"
+            >
+              <div style={{ marginBottom: '5px' }}>
+                <TextField
+                  label={
+                    <FormattedMessage
+                      id="minimum_soc "
+                      defaultMessage="Minimum SoC (%)"
+                    />
+                  }
+                  name="minimumSoC"
+                  value={formValues.minimumSoC ?? ''}
+                  onChange={handleChange}
+                  helperText={
+                    errors.minimumSoC ? (
+                      <span style={{ color: 'red' }}>
+                        {intl.formatMessage({ id: 'valueBetween0And100' })}
+                      </span>
+                    ) : (
+                      ''
+                    )
+                  }
+                  fullWidth
+                />
+              </div>
+
+              <div style={{ marginBottom: '5px' }}>
+                <TextField
+                  label={
+                    <FormattedMessage
+                      id="grid_set_point"
+                      defaultMessage="Grid Set Point (kW)"
+                    />
+                  }
+                  name="gridSetPoint"
+                  value={formValues.gridSetPoint ?? ''}
+                  onChange={handleChange}
+                  helperText={
+                    errors.gridSetPoint ? (
+                      <span style={{ color: 'red' }}>
+                        {intl.formatMessage({ id: 'pleaseProvideValidNumber' })}
+                      </span>
+                    ) : (
+                      ''
+                    )
+                  }
+                  fullWidth
+                />
+              </div>
+
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  marginTop: 10
+                }}
+              >
+                <Button
+                  variant="contained"
+                  onClick={handleSubmit}
+                  disabled={errors.minimumSoC || errors.gridSetPoint}
+                  sx={{ marginLeft: '10px' }}
+                >
+                  <FormattedMessage
+                    id="applychanges"
+                    defaultMessage="Apply Changes"
+                  />
+                </Button>
+
+                {loading && (
+                  <CircularProgress
+                    sx={{
+                      color: theme.palette.primary.main,
+                      marginLeft: '20px'
+                    }}
+                  />
+                )}
+
+                {updated && (
+                  <Alert
+                    severity="success"
+                    sx={{ ml: 1, display: 'flex', alignItems: 'center' }}
+                  >
+                    <FormattedMessage
+                      id="successfullyAppliedConfig"
+                      defaultMessage="Successfully applied configuration file"
+                    />
+                    <IconButton
+                      color="inherit"
+                      size="small"
+                      onClick={() => setUpdated(false)}
+                      sx={{ marginLeft: '4px' }}
+                    >
+                      <CloseIcon fontSize="small" />
+                    </IconButton>
+                  </Alert>
+                )}
+
+                {error && (
+                  <Alert
+                    severity="error"
+                    sx={{ ml: 1, display: 'flex', alignItems: 'center' }}
+                  >
+                    <FormattedMessage
+                      id="configErrorOccurred"
+                      defaultMessage="An error has occurred"
+                    />
+                    <IconButton
+                      color="inherit"
+                      size="small"
+                      onClick={() => setError(false)}
+                      sx={{ marginLeft: '4px' }}
+                    >
+                      <CloseIcon fontSize="small" />
+                    </IconButton>
+                  </Alert>
+                )}
+              </div>
+            </Box>
+          </CardContent>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+}
+
+export default ConfigurationSodistoreGrid;

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

@@ -28,6 +28,7 @@ import Topology from '../Topology/Topology';
 import TopologySodistoreGrid from '../Topology/TopologySodistoreGrid';
 import BatteryView from '../BatteryView/BatteryView';
 import Configuration from '../Configuration/Configuration';
+import ConfigurationSodistoreGrid from '../Configuration/ConfigurationSodistoreGrid';
 import PvView from '../PvView/PvView';
 import InstallationTicketsTab from '../Tickets/InstallationTicketsTab';
 import DocumentsTab from '../Documents/DocumentsTab';
@@ -605,20 +606,10 @@ function Installation(props: singleInstallationProps) {
                   path={routes.configuration}
                   element={
                     props.current_installation.product === 4 ? (
-                      // TODO: SodistoreGrid — implement actual configuration
+                      <ConfigurationSodistoreGrid
-                      <Container
+                        values={values}
-                        maxWidth="xl"
+                        id={props.current_installation.id}
-                        sx={{
+                      />
-                          display: 'flex',
-                          justifyContent: 'center',
-                          alignItems: 'center',
-                          height: '40vh'
-                        }}
-                      >
-                        <Typography variant="body1" color="text.secondary">
-                          Configuration not yet available
-                        </Typography>
-                      </Container>
                     ) : (
                       <Configuration
                         values={values}

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

@@ -106,9 +106,9 @@ function InstallationTabs(props: InstallationTabsProps) {
   // TODO: SodistoreGrid — PV View excluded for product 4, add back when data path is ready
   const hidePvView = props.product === 4;
 
-  // Checklist is only shown for Sodistore Grid (product=4) in the Installations view.
+  // Checklist is not shown for any product in the Installations view.
-  // Salimax (0) / Salidomo (1) / SodistoreMax (3) use different onboarding flows.
+  // Salimax (0) / Salidomo (1) / SodistoreMax (3) / SodistoreGrid (4) use different onboarding flows.
-  const showChecklist = props.product === 4;
+  const showChecklist = false;
 
   const singleInstallationTabs = (
     currentUser.userType == UserType.admin

typescript/frontend-marios2/src/interfaces/ChecklistTypes.tsx

@@ -23,7 +23,7 @@ export type ChecklistItem = {
   updatedAt: string;
 };
 
-export const CHECKLIST_ENABLED_PRODUCTS: ReadonlySet<number> = new Set([2, 4, 5]);
+export const CHECKLIST_ENABLED_PRODUCTS: ReadonlySet<number> = new Set([2, 5]);
 
 export const UPLOADABLE_SUBTASK_KEYS: ReadonlySet<string> = new Set([
   'checklistStep8Sub1',