add off-balance alert treshold to settings

src/app/components/PlanetaryInteraction/PlanetTableRow.tsx

@@ -73,7 +73,7 @@ export const PlanetTableRow = ({
     setPlanetConfigOpen(false);
   };
 
-  const { piPrices, alertMode, updatePlanetConfig, readPlanetConfig } = useContext(SessionContext);
+  const { piPrices, alertMode, updatePlanetConfig, readPlanetConfig, balanceThreshold } = useContext(SessionContext);
   const planetInfo = planet.info;
   const planetInfoUniverse = planet.infoUniverse;
   const { expired, extractors, localProduction, localImports, localExports } =
@@ -113,7 +113,7 @@ export const PlanetTableRow = ({
     });
 
   const hasLargeExtractorDifference = extractorAverages.length === 2 && 
-    Math.abs(extractorAverages[0].averagePerHour - extractorAverages[1].averagePerHour) > 1000;
+    Math.abs(extractorAverages[0].averagePerHour - extractorAverages[1].averagePerHour) > balanceThreshold;
 
   const storageFacilities = planetInfo.pins.filter(pin => 
     STORAGE_IDS().some(storage => storage.type_id === pin.type_id)

src/app/components/Settings/SettingsButtons.tsx

@@ -1,6 +1,7 @@
 import {
   ColorContext,
   ColorSelectionType,
+  SessionContext,
 } from "@/app/context/Context";
 import {
   Button,
@@ -10,14 +11,16 @@ import {
   DialogTitle,
   Tooltip,
   Typography,
+  TextField,
+  Box,
 } from "@mui/material";
 import { ColorChangeHandler, ColorResult, CompactPicker } from "react-color";
-import React from "react";
-import { useContext } from "react";
+import React, { useState, useContext } from "react";
 
 export const SettingsButton = () => {
   const { colors, setColors } = useContext(ColorContext);
-  const [open, setOpen] = React.useState(false);
+  const { balanceThreshold, setBalanceThreshold } = useContext(SessionContext);
+  const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -26,6 +29,7 @@ export const SettingsButton = () => {
   const handleClose = () => {
     setOpen(false);
   };
+
   const handleColorSelection = (key: string, currentColors: ColorSelectionType) => (selection: ColorResult) => {
     console.log(key, selection.hex)
     setColors({
@@ -34,20 +38,44 @@ export const SettingsButton = () => {
     })
   };
 
+  const handleBalanceThresholdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value);
+    if (!isNaN(value) && value >= 0 && value <= 100000) {
+      setBalanceThreshold(value);
+    }
+  };
+
   return (
     <Tooltip title="Toggle settings dialog">
       <>
-        <Button onClick={handleClickOpen}>Settings</Button>
+        <Button onClick={handleClickOpen} color="inherit">
+          Settings
+        </Button>
         <Dialog
           open={open}
           onClose={handleClose}
           aria-labelledby="alert-dialog-title"
           aria-describedby="alert-dialog-description"
         >
+
           <DialogTitle id="alert-dialog-title">
-            {"Override default timer colors"}
+            {"Settings"}
           </DialogTitle>
+
           <DialogContent style={{ paddingTop: "1rem" }}>
+          <Box sx={{ mt: 2 }}>
+              <Typography variant="subtitle1">Balance Threshold</Typography>
+              <TextField
+                type="number"
+                value={balanceThreshold}
+                onChange={handleBalanceThresholdChange}
+                fullWidth
+                margin="normal"
+                inputProps={{ min: 0, max: 100000 }}
+                helperText="Set the threshold for balance alerts (0-100,000)"
+                error={balanceThreshold < 0 || balanceThreshold > 100000}
+              />
+            </Box>
             {Object.keys(colors).map((key) => {
               return (
                 <div key={`color-row-${key}`}>
@@ -59,6 +87,7 @@ export const SettingsButton = () => {
                 </div>
               );
             })}
+            
           </DialogContent>
           <DialogActions>
             <Button onClick={handleClose}>Close</Button>