made Battery SN automatically filled by Scanner and keep the memory of it when the Battery Number changes

typescript/frontend-marios2/src/content/dashboards/Information/InformationSodistoreHome.tsx

@@ -7,7 +7,6 @@ import {
   FormControl,
   Grid,
   IconButton,
-  InputAdornment,
   InputLabel,
   MenuItem,
   Modal,
@@ -19,7 +18,7 @@ import {
 import { FormattedMessage } from 'react-intl';
 import Button from '@mui/material/Button';
 import { Close as CloseIcon } from '@mui/icons-material';
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, useRef } from 'react';
 import { I_S3Credentials } from '../../../interfaces/S3Types';
 import { I_Installation } from '../../../interfaces/InstallationTypes';
 import { InstallationsContext } from '../../../contexts/InstallationsContextProvider';
@@ -57,8 +56,7 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
     { id: 4, name: 'Sinexcel' }
   ];
 
-  const BATTERY_SN_PREFIX = 'PNR020125101';
-  const BATTERY_SN_SUFFIX_LENGTH = 4;
+  const batterySnRefs = useRef<(HTMLInputElement | null)[]>([]);
 
   // Initialize battery data from props
   useEffect(() => {
@@ -68,14 +66,7 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
     if (props.values.batterySerialNumbers) {
       const serialNumbers = props.values.batterySerialNumbers
         .split(',')
-        .filter((sn) => sn.trim() !== '')
-        .map((sn) => {
-          // If it has the prefix, extract only the suffix
-          if (sn.startsWith(BATTERY_SN_PREFIX)) {
-            return sn.substring(BATTERY_SN_PREFIX.length);
-          }
-          return sn;
-        });
+        .filter((sn) => sn.trim() !== '');
       setBatterySerialNumbers(serialNumbers);
     }
   }, []);
@@ -107,41 +98,47 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
       const value = inputValue === '' ? 0 : parseInt(inputValue);
       setBatteryNumber(value);
 
-      // Preserve existing serial numbers and adjust array size
-      const newSerialNumbers = Array.from({ length: value }, (_, index) => {
-        // Keep existing serial number if it exists, otherwise use empty string
-        return batterySerialNumbers[index] || '';
-      });
-      setBatterySerialNumbers(newSerialNumbers);
+      if (value > 0) {
+        // Resize array: preserve existing serial numbers, add empty for new slots
+        const newSerialNumbers = Array.from({ length: value }, (_, index) => {
+          return batterySerialNumbers[index] || '';
+        });
+        setBatterySerialNumbers(newSerialNumbers);
 
-      // Update formValues with preserved serial numbers
-      const fullSerialNumbers = newSerialNumbers
-        .map((suffix) => (suffix ? BATTERY_SN_PREFIX + suffix : ''))
-        .filter((sn) => sn !== '');
-
-      setFormValues({
-        ...formValues,
-        batteryNumber: value,
-        batterySerialNumbers: fullSerialNumbers.join(',')
-      });
+        setFormValues({
+          ...formValues,
+          batteryNumber: value,
+          batterySerialNumbers: newSerialNumbers.filter((sn) => sn !== '').join(',')
+        });
+      } else {
+        // Field is empty (user is mid-edit) — don't clear serial numbers
+        setFormValues({
+          ...formValues,
+          batteryNumber: 0
+        });
+      }
     }
   };
 
   const handleBatterySerialNumberChange = (index: number, value: string) => {
-    // Only allow digits and limit to 3 characters
-    const sanitizedValue = value.replace(/\D/g, '').substring(0, BATTERY_SN_SUFFIX_LENGTH);
     const updatedSerialNumbers = [...batterySerialNumbers];
-    updatedSerialNumbers[index] = sanitizedValue;
+    updatedSerialNumbers[index] = value;
     setBatterySerialNumbers(updatedSerialNumbers);
-    // Update formValues for persistence with full serial numbers (prefix + suffix)
-    const fullSerialNumbers = updatedSerialNumbers
-      .map((suffix) => (suffix ? BATTERY_SN_PREFIX + suffix : ''))
-      .filter((sn) => sn !== '');
     setFormValues({
       ...formValues,
-      batterySerialNumbers: fullSerialNumbers.join(',')
+      batterySerialNumbers: updatedSerialNumbers.filter((sn) => sn !== '').join(',')
     });
   };
+
+  const handleBatterySnKeyDown = (e: React.KeyboardEvent, index: number) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const nextIndex = index + 1;
+      if (nextIndex < batteryNumber && batterySnRefs.current[nextIndex]) {
+        batterySnRefs.current[nextIndex].focus();
+      }
+    }
+  };
   const handleSubmit = () => {
     setLoading(true);
     setError(false);
@@ -467,20 +464,11 @@ function InformationSodistorehome(props: InformationSodistorehomeProps) {
                         onChange={(e) =>
                           handleBatterySerialNumberChange(index, e.target.value)
                         }
+                        onKeyDown={(e) => handleBatterySnKeyDown(e, index)}
+                        inputRef={(el) => (batterySnRefs.current[index] = el)}
                         variant="outlined"
                         fullWidth
-                        InputProps={{
-                          startAdornment: (
-                            <InputAdornment position="start">
-                              {BATTERY_SN_PREFIX}
-                            </InputAdornment>
-                          )
-                        }}
-                        inputProps={{
-                          maxLength: BATTERY_SN_SUFFIX_LENGTH,
-                          placeholder: '0000'
-                        }}
-                        helperText={`Enter ${BATTERY_SN_SUFFIX_LENGTH} digits`}
+                        placeholder="Scan or enter serial number"
                       />
                     </div>
                   ))}